<template>
|
<div class="add-useful-menu">
|
<el-transfer
|
v-model="value"
|
:data="data"
|
filterable
|
class="transfer-width320"
|
:titles="['菜单池', '快捷菜单池']"
|
:button-texts="['移除', '添加']"
|
@change="handleChange"></el-transfer>
|
</div>
|
</template>
|
|
<script>
|
import {
|
APIGetPageMenu
|
} from '@/layout/js/api';
|
import getPageMenu from "@/assets/js/tools/getPageMenu";
|
import apis from './apis';
|
export default {
|
name: "addUsefulMenu",
|
props: {
|
update: {
|
type: Number,
|
default: 0,
|
},
|
list: {
|
type: Array,
|
default() {
|
return [];
|
}
|
}
|
},
|
watch: {
|
update() {
|
console.log(this.list);
|
this.setDefaultValue();
|
}
|
},
|
data() {
|
return {
|
data: [],
|
value: []
|
};
|
},
|
methods: {
|
getPageMenu() {
|
APIGetPageMenu().then(res=>{
|
let rs = res.data;
|
let data = [];
|
if(rs.code == 1) {
|
data = rs.data;
|
}
|
let menus = getPageMenu();
|
this.changeMenus(menus, data);
|
let list = [];
|
for(let i=0; i<menus.length; i++) {
|
let childrens = menus[i].childrens;
|
if(childrens && childrens.length>0) {
|
childrens.map(item=>{
|
item.key = item.id;
|
item.disabled = false;
|
if(item.enableduse) {
|
list.push(item);
|
}
|
});
|
}
|
}
|
this.data = list;
|
}).catch(error=>{
|
console.log(error);
|
});
|
},
|
changeMenus(menus, list) {
|
menus.forEach((menu) => {
|
let item = "";
|
for (let i = 0; i < list.length; i++) {
|
if (menu.id == list[i].id) {
|
item = list[i];
|
break;
|
}
|
}
|
if (item && item.childrens) {
|
item.childrens.forEach((children) => {
|
for (let i = 0; i < menu.childrens.length; i++) {
|
let item2 = menu.childrens[i];
|
if (item2.id == children.id) {
|
item2.enableduse = children.enableduse;
|
break;
|
}
|
}
|
});
|
}
|
});
|
},
|
handleChange(list, type, values) {
|
// 根据类型确定事件
|
switch (type) {
|
case "left":
|
this.remove(values);
|
break;
|
case "right":
|
this.add(values);
|
break;
|
}
|
},
|
add(list) {
|
let data = this.getList(list);
|
apis.addUsefulMenu(data).then(res=>{
|
this.change();
|
}).catch(error=>{
|
this.change();
|
console.log(error);
|
});
|
},
|
remove(list) {
|
let data = this.getList(list, true);
|
apis.deleteUsefulMenu(data).then(res=>{
|
this.change();
|
}).catch(error=>{
|
this.change();
|
console.log(error);
|
});
|
},
|
getList(list, isRemove) {
|
let data = isRemove?this.list:this.data;
|
let result = [];
|
list.map(item=>{
|
for(let i=0; i<data.length; i++) {
|
if(item == data[i].id) {
|
result.push(isRemove?data[i].num:data[i]);
|
}
|
}
|
});
|
return result;
|
},
|
change() {
|
this.$emit("change", true);
|
},
|
setDefaultValue() {
|
let value = [];
|
this.list.map(item=>{
|
if(item.id != undefined) {
|
value.push(item.id);
|
}
|
});
|
this.value = value;
|
}
|
},
|
mounted() {
|
this.setDefaultValue();
|
this.getPageMenu();
|
}
|
}
|
</script>
|
|
<style scoped>
|
.add-useful-menu {
|
width: 960px;
|
height: 600px;
|
background-color: #024d5f;
|
padding-top: 16px;
|
padding-bottom: 16px;
|
}
|
</style>
|
