<template>
|
<div>
|
<el-card shadow="hover" header="快捷入口">
|
<ul>
|
<li v-for="(item,index) in titleList">
|
<div @click="goPage(item)">{{item.name}}</div>
|
</li>
|
<li><div class="addMenu" @click="showDrawer">+ 添加菜单</div></li>
|
</ul>
|
</el-card>
|
<el-drawer title="选择菜单" v-model="drawer" :direction="direction" :before-close="handleClose" size="680">
|
<div v-for="(value,key,index) in menuList">
|
<div class="parent-children-title">{{key}}</div>
|
<div class="parent-children">
|
<span v-for="(item,index1) in value" @click="addChecked(item,key,index1)" >
|
<div class="parent-name">{{item.name}}</div>
|
<div class="triangle-topright" v-if="item.checked"></div>
|
<el-icon class="icon-topright" v-if="item.checked"><Select /></el-icon>
|
</span>
|
</div>
|
</div>
|
<div class="drawer-foot">
|
<el-button @click="closeDrawer">取消</el-button>
|
<el-button type="primary" @click="drawerConfirm">确定</el-button>
|
</div>
|
</el-drawer>
|
</div>
|
</template>
|
|
<script>
|
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
|
let icons = []
|
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
|
icons.push(key)
|
}
|
export default {
|
title: "快捷入口",
|
icon: "el-icon-data-line",
|
description: "添加常用菜单入口",
|
data() {
|
return {
|
direction: "rtl",
|
titleList: [],
|
drawer: false,
|
menuList: {},
|
CARD_INFO: [],
|
firstMenuList: [], //存储初始化的数据
|
setCard: [],
|
workid: ""
|
}
|
},
|
components: {...ElementPlusIconsVue},
|
mounted() {
|
this.getCard();
|
},
|
methods: {
|
drawerConfirm() {
|
var list = [];
|
for(var key in this.menuList) {
|
this.menuList[key].forEach(item=> {
|
if(item.checked) {
|
list.push(item.id);
|
}
|
})
|
}
|
this.setCard.forEach(item=> {
|
if(item.cardKey == "Entrance") {
|
item.textContent = list.join(",");
|
}
|
})
|
var obj = {
|
workbenchId: this.workid,
|
workbenchCardAddVOList: this.setCard
|
}
|
this.$HTTP.post(`/api/blade-system/workbench-card/create-workbench-card`,obj).then(res=> {
|
if(res.code == 200) {
|
this.drawer = false;
|
this.menuList = {};
|
this.getCard(); //重新获取快捷菜单
|
}
|
})
|
//console.log(this.setCard,222)
|
},
|
getCard() { //获取快捷菜单
|
this.$HTTP.get(`/api/blade-system/workbench-card/list?workbenchId=${this.workid}`).then(res=> {
|
if(res.code == 200) {
|
this.setCard = res.data;
|
res.data.forEach(item=> {
|
if(item.cardKey == "Entrance") {
|
this.$TOOL.data.set("CARD_INFO", item.textContent);
|
}
|
})
|
this.init(); //根据获取的快捷菜单和菜单确定最后一级和勾选状态
|
}
|
})
|
},
|
init() {
|
this.titleList = [];
|
var data = this.$TOOL.data.get("MENU");
|
this.workid = data[0].children[0].id; //记录第一个children的id
|
this.CARD_INFO = this.$TOOL.data.get("CARD_INFO").split(",");
|
var obj = {};
|
//取最后一级菜单
|
data.forEach((item,index)=> {
|
if(item.name != "工作台") {
|
obj[item.name] = this.getLastLevelNames(item.children);
|
}
|
})
|
this.menuList = obj;
|
this.firstMenuList = JSON.parse(JSON.stringify(obj)); //存储初始化的数据
|
// 获取title
|
for(var key in this.menuList) {
|
this.menuList[key].forEach(item=> {
|
if(item.checked) {
|
this.titleList.push(item)
|
}
|
})
|
}
|
},
|
addChecked(item,key,index1) {
|
this.menuList[key][index1].checked = !this.menuList[key][index1].checked;
|
},
|
goPage(item) {
|
this.$router.push(item.path);
|
},
|
getLastLevelNames(tree) {
|
var that = this;
|
const lastLevelNames = [];
|
//,checked: this.$TOOL.data.get("CARD_INFO").split(",").include(item.id)
|
tree.forEach(item => {
|
if (item.children) {
|
// 递归调用，处理子菜单项
|
const childLastLevelNames = this.getLastLevelNames(item.children);
|
// 将子菜单项的最底层名称添加到结果中
|
lastLevelNames.push(...childLastLevelNames);
|
} else {
|
// 当前项没有子菜单项，是最后一层，添加其名称
|
lastLevelNames.push({name:item.name,id: item.id,checked: that.CARD_INFO.includes(item.id),path: item.path});
|
}
|
});
|
|
return lastLevelNames;
|
},
|
showDrawer() {
|
this.drawer = true;
|
},
|
closeDrawer() {
|
this.menuList = JSON.parse(JSON.stringify(this.firstMenuList));
|
this.drawer = false;
|
},
|
handleClose(done) {
|
this.menuList = JSON.parse(JSON.stringify(this.firstMenuList));
|
done();
|
}
|
}
|
}
|
</script>
|
<style scoped>
|
ul {list-style: none;margin-bottom: 10px;overflow: hidden;}
|
ul li {float: left;margin-bottom: 8px;}
|
ul li div,.addMenu{border: 1px solid #3b8e8e;margin-top: 10px;height: 43px;margin-left: 10px;display: flex;align-items: center;justify-content: center;color: #3b8e8e;border-radius: 2px;border-radius: 2px;white-space: nowrap;cursor: pointer;min-width: 112px;}
|
ul li div:hover {background-color: #ebf4f4;}
|
.addMenu {border: 1px dashed #3b8e8e;}
|
..addMenu:hover {border: 1px dashed #104E8B;}
|
.parent-children-title {margin-left: 10px;margin-top: 24px;font-weight: 700;font-size: 14px;text-align: left;color: #333;}
|
.parent-children {display: flex;flex-direction: row;flex-wrap: wrap;justify-content: flex-start;align-items: flex-start;padding-left: 10px;box-sizing: border-box;}
|
.parent-children span {margin-left: 10px;margin-top: 10px;width: 22%;border: 0.5px solid #20B2AA;border-radius: 2px;height: 43px;display: flex;align-items: center;justify-content: center;cursor: pointer;position: relative;min-width: 112px;}
|
.parent-children span:hover {border: 1px solid #104E8B;}
|
.triangle-topright {width: 0;height: 0;border-top: 28px solid #3b8e8e;border-left: 28px solid transparent;position: absolute;right: 0;top: 0;}
|
.icon-topright {position: absolute;right: 2px;top: 2px;z-index: 2;color: #fff;}
|
.drawer-foot {text-align: right;margin-top: 8px;margin-bottom: 8px;margin-right: 20px;}
|
</style>
|
