<template>
|
<flex-layout direction="row" no-bg>
|
<my-card slot="header" title="站点状态列表" class="w300">
|
<div slot="card-tools">
|
<el-button class="card-tools" size="mini" type="primary"
|
:disabled="!isCanEdit"
|
icon="el-icon-plus" circle @click="showAddDialog"></el-button>
|
<el-button class="card-tools" size="mini" type="primary"
|
:disabled="aktive == -1 || !isCanEdit"
|
icon="el-icon-edit" circle @click="showEditDialog"></el-button>
|
<el-button class="card-tools" size="mini" type="danger"
|
:disabled="aktive == -1 || !isCanEdit"
|
icon="el-icon-delete" circle @click="confirmDelBaojiGroup"></el-button>
|
</div>
|
<li v-for="(item,i) in bzList" :key="i" @click="bzztOnclick(i,item)"><a class="bzList_box" :class="{aktive:aktive == i}">{{ item.param }}</a></li>
|
</my-card>
|
<div class="flex-page-content">
|
<el-tabs v-model="activeName" type="border-card" class="flex-layout ">
|
<el-transfer
|
v-model="user.value"
|
:titles="['未添加站点', '已添加站点']"
|
:button-texts="['移除', '添加']"
|
:data="user.data"
|
:filterable="true"
|
@change="userChange"
|
class="transfer-width320">
|
</el-transfer>
|
</el-tabs>
|
</div>
|
<!-- 添加站点状态 -->
|
<el-dialog
|
title="添加站点状态"
|
width="400px"
|
:visible.sync="addBaojiGroup.show"
|
:close-on-click-modal="false"
|
top="0"
|
class="dialog-center"
|
:modal-append-to-body="false">
|
<div class="params-container">
|
<el-form
|
size="mini"
|
label-position="top"
|
class="params-dialog">
|
<div class="table-layout">
|
<div class="table-row">
|
<div class="table-cell">
|
<el-form-item label="站点状态名称">
|
<el-input v-model="addBaojiGroup.value"></el-input>
|
</el-form-item>
|
</div>
|
</div>
|
</div>
|
<div class="form-footer">
|
<three-btn @click="addBaojiGroupOk">确定</three-btn>
|
</div>
|
</el-form>
|
</div>
|
</el-dialog>
|
<!-- 编辑站点状态 -->
|
<el-dialog
|
title="编辑站点状态"
|
width="400px"
|
:visible.sync="editBaojiGroup.show"
|
:close-on-click-modal="false"
|
top="0"
|
class="dialog-center"
|
:modal-append-to-body="false">
|
<div class="params-container">
|
<el-form
|
size="mini"
|
label-position="top"
|
class="params-dialog">
|
<div class="table-layout">
|
<div class="table-row">
|
<div class="table-cell">
|
<el-form-item label="站点状态名称">
|
<el-input v-model="editBaojiGroup.value"></el-input>
|
</el-form-item>
|
</div>
|
</div>
|
</div>
|
<div class="form-footer">
|
<three-btn @click="editBaojiGroupOk">确定</three-btn>
|
</div>
|
</el-form>
|
</div>
|
</el-dialog>
|
</flex-layout>
|
</template>
|
|
<script>
|
import MyCard from '../../components/MyCard'
|
import {isHasPermit} from "@/assets/js/tools";
|
|
export default {
|
components: {
|
MyCard,
|
},
|
data() {
|
let permits = this.$store.state.user.permits;
|
let isCanEdit = isHasPermit('usr_edit_permit', permits);
|
return {
|
isCanEdit: isCanEdit,
|
activeName: 'baoji-group-user',
|
aktive:-1,
|
bzList:[],
|
user: {
|
data: [],
|
value: []
|
},
|
addBaojiGroup: {
|
show: false,
|
value: ''
|
},
|
editBaojiGroup: {
|
show: false,
|
value: ''
|
},
|
}
|
},
|
watch: {
|
aktive(newVal, oldVal){
|
let seft = this;
|
seft.user.value = [];
|
seft.user.data = [];
|
seft.initStation();
|
}
|
},
|
methods: {
|
// 添加站点状态名称
|
showAddDialog:function(){
|
let seft = this;
|
seft.addBaojiGroup.show = true;
|
|
},
|
// 添加站点状态名称确定事件
|
addBaojiGroupOk:function(){
|
let seft = this;
|
// console.log(seft.addBaojiGroup.value)
|
if(seft.findingDuplicate(seft.addBaojiGroup.value)){
|
seft.$message({
|
type: 'error',
|
message: seft.addBaojiGroup.value + '已存在',
|
});
|
return false;
|
}
|
// 添加站点状态名称
|
seft.$axios({
|
method:'post',
|
url:'PageParamAction!add',
|
data:'json='+ JSON.stringify({param:seft.addBaojiGroup.value,categoryId:4})
|
}).then((res)=>{
|
let result = JSON.parse(res.data.result);
|
if(result.code == 1){
|
// 提示信息
|
this.$message({
|
type: 'success',
|
message: '新增成功！',
|
});
|
seft.addBaojiGroup.value = '';
|
seft.addBaojiGroup.show = false;
|
seft.initData();
|
}
|
})
|
|
},
|
// 编辑站点状态名称
|
showEditDialog:function(){
|
let seft = this;
|
seft.editBaojiGroup.show = true;
|
seft.editBaojiGroup.value = seft.bzList[seft.aktive].param;
|
},
|
// 编辑站点状态名称确定事件
|
editBaojiGroupOk:function(){
|
let seft = this;
|
// console.log(seft.editBaojiGroup.value)
|
if(seft.findingDuplicate(seft.editBaojiGroup.value)){
|
this.$message({
|
type: 'error',
|
message: seft.editBaojiGroup.value + '已存在',
|
});
|
return false;
|
}
|
// 修改站点状态名称
|
seft.$axios({
|
method:'post',
|
url:'PageParamAction!updateParamById',
|
data:'json='+ JSON.stringify({param:seft.editBaojiGroup.value,id:seft.bzList[seft.aktive].id})
|
}).then((res)=>{
|
let result = JSON.parse(res.data.result);
|
if(result.code == 1){
|
// 提示信息
|
this.$message({
|
type: 'success',
|
message: '修改成功！',
|
});
|
seft.editBaojiGroup.show = false;
|
seft.initData();
|
}
|
})
|
},
|
// 点击站点状态名称状态时效果
|
bzztOnclick:function(index){
|
let seft = this;
|
seft.aktive = index;
|
},
|
// 初始化数据
|
initData() {
|
// 查询
|
let seft = this;
|
seft.$axios({
|
method:'post',
|
url:'PageParamAction!findByCategoryId',
|
data:'json=' + JSON.stringify({categoryId:4})
|
}).then((res)=>{
|
let result = JSON.parse(res.data.result);
|
// console.log(result)
|
if(result.code == 1 && result.data.length>0){
|
seft.bzList = result.data;
|
}else{
|
seft.bzList = [];
|
}
|
})
|
},
|
// 初始化查询站点
|
initStation:function(index){
|
let seft = this;
|
seft.$axios({
|
method:'post',
|
url:'BattInfAction!searchAllStation',
|
data:null
|
}).then((res)=>{
|
let result = JSON.parse(res.data.result);
|
if(result.code == 1 && result.data.length>0){
|
|
let params = [];
|
result.data.forEach(item=>{
|
if(seft.aktive== -1){
|
|
let obj = {
|
key:item.StationId,
|
label:item.StationName3,
|
sortId:item.sortId,
|
StationName:item.StationName
|
}
|
params.push(obj);
|
}else{
|
if(item.sortId == 0 || item.sortId == seft.bzList[seft.aktive].id){
|
let obj = {
|
key:item.StationId,
|
label:item.StationName3,
|
sortId:item.sortId,
|
StationName:item.StationName
|
}
|
params.push(obj);
|
}
|
}
|
})
|
seft.user.data = params;
|
if(seft.aktive!= -1){
|
seft.addedSite();
|
}
|
// console.log(params)
|
}
|
})
|
},
|
// 已添加站点设置
|
addedSite:function(){
|
let seft = this;
|
seft.user.value = [];
|
seft.user.data.forEach(item => {
|
if(item.sortId == seft.bzList[seft.aktive].id){
|
seft.user.value.push(item.key);
|
}
|
});
|
},
|
// 删除站点状态名称
|
confirmDelBaojiGroup() {
|
let seft = this;
|
let name = seft.bzList[seft.aktive].param;
|
this.$layer.confirm('确认删除'+name, {icon:3},index=>{
|
// 关闭弹出框
|
this.$layer.close(index);
|
// 删除包机组
|
seft.$axios({
|
method:'post',
|
url:'PageParamAction!delete',
|
data:'json=' + JSON.stringify({id:seft.bzList[seft.aktive].id})
|
}).then((res)=>{
|
let result = JSON.parse(res.data.result);
|
if(result.code == 1){
|
// 提示信息
|
this.$message({
|
type: 'success',
|
message: '删除成功！',
|
});
|
seft.aktive = -1;
|
seft.initData();
|
|
}
|
})
|
});
|
},
|
// 站点移动事件 list:已经添加的数组，tyoe：移动方向 values：当前移动的数据
|
userChange(list, type, values) {
|
// console.log(this.user)
|
// var userList = this.getUserListByUIds(values);
|
let seft = this;
|
if(seft.aktive == -1){
|
seft.$message({
|
type: 'error',
|
message: '请先选择分类',
|
});
|
seft.user.value = [];
|
return false;
|
}
|
// 根据类型确定事件
|
switch(type) {
|
case 'left':
|
this.removeUser(values);
|
break;
|
case 'right':
|
this.addUser(values);
|
break;
|
}
|
},
|
// 向左边添加站点
|
addUser(list) {
|
// console.log(list)
|
let seft = this;
|
seft.addAndDelete(list,seft.bzList[seft.aktive].id,'站点添加分类成功！')
|
},
|
// 向右边添加站点
|
removeUser(list) {
|
// console.log(list)
|
let seft = this;
|
seft.addAndDelete(list,0,'站点移除分类成功！')
|
},
|
// 添加和删除站点
|
addAndDelete:function(list,status,msg){
|
let seft = this;
|
let params = [];
|
list.forEach(item => {
|
let obj = {
|
StationId:item,
|
sortId:status
|
}
|
params.push(obj)
|
});
|
seft.$axios({
|
method:'post',
|
url:'BattInfAction!updateSortId',
|
data:'json=' + JSON.stringify(params)
|
}).then((res)=>{
|
let result = JSON.parse(res.data.result);
|
if(result.code == 1){
|
// 提示信息
|
this.$message({
|
type: 'success',
|
message: msg,
|
});
|
this.initStation();
|
}
|
})
|
},
|
// 查重
|
findingDuplicate:function(value){
|
let seft = this;
|
let status = false;
|
seft.bzList.forEach(element => {
|
if(element == value){
|
status = true;
|
}
|
});
|
return status;
|
},
|
},
|
mounted() {
|
// 初始化查询站点分类名称
|
this.initData();
|
// 初始化查询站点
|
this.initStation();
|
// 查询包机组列表
|
// this.searchBaojiGroupList();
|
}
|
}
|
</script>
|
|
<style scoped>
|
.bzList_box{
|
display: block;
|
padding: 6px 8px;
|
text-indent: 10px;
|
text-decoration: none;
|
color: #FFFFFF;
|
font-size: 14px;
|
}
|
.aktive{
|
background-color: #00fefe;
|
color: #021a64;
|
}
|
.flex-page-content {
|
padding: 0 8px;
|
}
|
</style>
|
