From dcf9c9e0410fe1186239e3f8d6f7bdc789c08010 Mon Sep 17 00:00:00 2001
From: lzhe <lzhe@example.com>
Date: 星期三, 05 六月 2024 18:00:39 +0800
Subject: [PATCH] 1
---
src/views/home/widgets/components/ver.vue | 160 +++++++++++++++++++++++++++++++++++++++++++++++-----
1 files changed, 143 insertions(+), 17 deletions(-)
diff --git a/src/views/home/widgets/components/ver.vue b/src/views/home/widgets/components/ver.vue
index a02f8c3..2116feb 100644
--- a/src/views/home/widgets/components/ver.vue
+++ b/src/views/home/widgets/components/ver.vue
@@ -2,49 +2,175 @@
<div>
<el-card shadow="hover" header="蹇嵎鍏ュ彛">
<ul>
- <li><div>浜哄伐-閮ㄩ棬</div></li>
+ <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="鎴戞槸鏍囬"
- :visible.sync="drawer"
- :direction="direction"
- :before-close="handleClose">
- <span>鎴戞潵鍟�!</span>
+ <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",
- drawer: false
+ 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() { //鑾峰彇蹇嵎鑿滃崟
+ var data = this.$TOOL.data.get("MENU");
+ this.workid = data[0].children[0].id; //璁板綍绗竴涓猚hildren鐨刬d
+ 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; //璁板綍绗竴涓猚hildren鐨刬d
+ if(this.$TOOL.data.get("CARD_INFO") != null) {
+ 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() {
- alert(2)
this.drawer = true;
- alert(3)
+ },
+ closeDrawer() {
+ this.menuList = JSON.parse(JSON.stringify(this.firstMenuList));
+ this.drawer = false;
},
handleClose(done) {
- this.$confirm('纭鍏抽棴锛�').then(_ => {
- done();
- }).catch(_ => {});
- }
+ 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 {border: 1px solid #3b8e8e;margin-top: 10px;height: 43px;margin-left: 10px;display: flex;align-items: center;justify-content: center;color: #3b8e8e;padding: 7px 15px;border-radius: 2px;border-radius: 2px;white-space: nowrap;cursor: pointer;}
+ ul li div,.addMenu{border: 1px solid #409eff;margin-top: 10px;height: 43px;margin-left: 10px;display: flex;align-items: center;justify-content: center;color: #409eff;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 {border: 1px dashed #409eff;}
+ ..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 #409eff;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>
\ No newline at end of file
--
Gitblit v1.9.3