From eef1ef0be935d4a3d8fc691b2666f41796b2d4a5 Mon Sep 17 00:00:00 2001
From: gaoshp <291585735@qq.com>
Date: 星期一, 04 十一月 2024 19:57:08 +0800
Subject: [PATCH] 增加列表显示
---
src/views/console/authority/role/index.vue | 88 ++++++++++++++++++++++++++++++++------------
1 files changed, 64 insertions(+), 24 deletions(-)
diff --git a/src/views/console/authority/role/index.vue b/src/views/console/authority/role/index.vue
index c78d10e..4392751 100644
--- a/src/views/console/authority/role/index.vue
+++ b/src/views/console/authority/role/index.vue
@@ -29,7 +29,7 @@
<div class="treeMain">
<el-tabs tab-position="left" class="demo-tabs" v-model="menuActiveName" @tab-click="(tab,event)=>menuHandleClick(tab,event,'0')">
<el-tab-pane v-for="(item,index) in menuGrantList" :label="item.title" :name="item.title">
- <el-tree ref="tree0" v-if="showtree" :data="treeData" :props="{ label: 'title',children: 'children'}" node-key="id" show-checkbox @check-change="(item,isCheck)=>treeHandleCheckChange(item,isCheck,index)" :default-checked-keys="treeCheck" default-expand-all />
+ <el-tree ref="tree0" v-if="showtree" :data="treeData" :props="{ label: 'title',children: 'children'}" node-key="id" show-checkbox @check-change="(item,isCheck)=>treeHandleCheckChange(item,isCheck,index)" :default-checked-keys="treeCheck" default-expand-all :check-strictly="true"/>
</el-tab-pane>
</el-tabs>
</div>
@@ -38,7 +38,7 @@
<div class="treeMain">
<el-tabs tab-position="left" class="demo-tabs" v-model="menuActiveName" @tab-click="(tab,event)=>menuHandleClick(tab,event,'1')">
<el-tab-pane v-for="(item,index) in menuGrantList" :label="item.title" :name="item.title">
- <el-tree ref="tree1" v-if="showtree" :data="treeData1" :props="{ label: 'title',children: 'children'}" node-key="id" show-checkbox @check-change="(item,isCheck)=>treeHandleCheckChange(item,isCheck,index)" :default-checked-keys="treeCheck" default-expand-all />
+ <el-tree ref="tree1" v-if="showtree" :data="treeData1" :props="{ label: 'title',children: 'children'}" node-key="id" show-checkbox @check-change="(item,isCheck)=>treeHandleCheckChange(item,isCheck,index)" :default-checked-keys="treeCheck" default-expand-all :check-strictly="true"/>
</el-tab-pane>
</el-tabs>
</div>
@@ -78,6 +78,7 @@
},
data() {
return {
+ templateGrantTreeCard: [], //涓存椂瀛樺偍/menu/grant-tree涓殑card
menuHandleText: "",
showtree: true,
treeCheck: [],
@@ -132,10 +133,20 @@
},
methods: {
roleSubmit() { //淇濆瓨
+ var cardIdArrId = []; //榛樿澧炲姞鍏ㄥ眬鍗＄墖
+ this.templateGrantTreeCard.forEach(item=> {
+ if(item.code == "desk") {
+ cardIdArrId.push(item.id);
+ item.children.forEach(item1=> {
+ cardIdArrId.push(item1.id);
+ })
+ }
+ })
+ var list = [...new Set([...cardIdArrId, ...this.treeCheck])];; //鏂版暟缁勶紝cardIdArr鍜宼his.treeCheck鍚堝苟
var obj = {
apiScopeIds: [],
dataScopeIds: [],
- menuIds: this.treeCheck,
+ menuIds: list,
roleIds: [this.tableLiId]
}
this.isSaveing = true;
@@ -167,19 +178,45 @@
this.menuHandleText = event.target.innerText;
},
treeHandleCheckChange(item,isCheck,index) {
+ var that = this;
if(isCheck) {
- console.log(item.id,111)
- if(!this.treeCheck.includes(item.id)) {
- this.treeCheck.push(item.id);
+ function checkoutId(val){
+ if(!that.treeCheck.includes(val.id)) {
+ that.treeCheck.push(val.id);
+ }
+ if(val.children) {
+ val.children.forEach(item1=> {
+ checkoutId(item1);
+ })
+ }
}
- }else {
- if(this.treeCheck.length != 0) {
- this.treeCheck.forEach((val,valIndex)=> {
- if(val == item.id) {
- this.treeCheck.splice(valIndex,1);
+ checkoutId(item);
+ that.$refs.tree0[index].setCheckedKeys(this.treeCheck,false);
+ }else { //鍙栨秷閫変腑
+ if(item.children) { //鏈塩hildren
+ function delCheckoutId(val){
+ that.treeCheck.forEach((val1,valIndex)=> {
+ if(val1 == val.id) {
+ that.treeCheck.splice(valIndex,1);
+ }
+ })
+ if(val.children) {
+ val.children.forEach(item1=> {
+ delCheckoutId(item1);
+ })
}
- })
- }
+ }
+ delCheckoutId(item);
+ that.$refs.tree0[index].setCheckedKeys(this.treeCheck,false);
+ }else { //娌℃湁children
+ if(this.treeCheck.length != 0) {
+ this.treeCheck.forEach((val,valIndex)=> {
+ if(val == item.id) {
+ this.treeCheck.splice(valIndex,1);
+ }
+ })
+ }
+ }
}
},
setTreeList(arr,name,index=0) {
@@ -187,7 +224,6 @@
this.treeData1 = [];
arr.forEach(item=> {
if(item.title == name) {
- //this.treeData = item.children;
if(index == '0') {
this.treeData = item.children;
}
@@ -226,17 +262,17 @@
this.tableData.forEach(item=> {
item.active = false;
})
- this.tableData[index].active = true; //閫変腑
+ this.tableData[index].active = true; //宸︿晶鍒囨崲瑙掕壊閫変腑
this.showtree = false;
this.tableLiId = id; //瑙掕壊id
this.$nextTick(()=> {
this.showtree = true;
//鑿滃崟
- this.menuGrantList = res.data.menu.filter(item=> { //杩囨护鎺夋病鏈塩hildren鐨�
+ this.menuGrantList = res.data.menu.filter(item=> { //杩囨护鎺夋病鏈塩hildren鐨�,杩欓噷鏄痳es锛屼笉鏄痳esp锛屾槸鑿滃崟tree宸︿晶鐨勯�夐」
return item.children;
});
//鍗＄墖
- this.menuGrantList1 = [];
+ this.menuGrantList1 = []; //card鐨則ree宸︿晶鐨勯�夐」
res.data.card.forEach(item=> {
this.menuGrantList.forEach(item1=> {
if(item.id == item1.id) {
@@ -246,15 +282,18 @@
})
this.menuActiveName = this.menuGrantList[0].title;//榛樿绗竴涓彍鍗�
this.setTreeList(this.menuGrantList,this.menuActiveName);//灞曠ず鏍戯紙宸︿晶鑿滃崟list锛屽乏渚ц彍鍗曞悕瀛楋級
- var lastId = [];
- var lastId = this.extractLastLevelIds(this.menuGrantList); //鑾峰彇鏈�鍚庝竴绾d
- var idarr = this.findOverlap(lastId,resp.data.menu); //鎵惧嚭涓や釜鏁扮粍閲嶅悎鐨勯儴鍒�
- var lastId1 = [];
- var lastId1 = this.extractLastLevelIds(this.menuGrantList1); //鑾峰彇鏈�鍚庝竴绾d
- var idarr1 = this.findOverlap(lastId1,resp.data.card); //鎵惧嚭涓や釜鏁扮粍閲嶅悎鐨勯儴鍒�
+ var idarr = resp.data.menu.concat(resp.data.card);
+ this.treeCheck = [...new Set(idarr)]; //鑾峰彇閫変腑鏁版嵁
+ // var lastId = [];
+ // var lastId = this.extractLastLevelIds(this.menuGrantList); //鑾峰彇鏈�鍚庝竴绾d
+ // var idarr = this.findOverlap(lastId,resp.data.menu); //鎵惧嚭涓や釜鏁扮粍閲嶅悎鐨勯儴鍒�
- this.treeCheck = [...idarr,...idarr1]; //鑾峰彇閫変腑鏁版嵁
+ // var lastId1 = [];
+ // var lastId1 = this.extractLastLevelIds(this.menuGrantList1); //鑾峰彇鏈�鍚庝竴绾d
+ // var idarr1 = this.findOverlap(lastId1,resp.data.card); //鎵惧嚭涓や釜鏁扮粍閲嶅悎鐨勯儴鍒�
+
+ // this.treeCheck = [...idarr,...idarr1]; //鑾峰彇閫変腑鏁版嵁
})
}
})
@@ -262,6 +301,7 @@
getMenuGrant(row,index) {
this.$HTTP.get(`/api/blade-system/menu/grant-tree`).then(res=> {
if(res.code == 200) {
+ this.templateGrantTreeCard = res.data.card; //涓存椂瀛樺偍/menu/grant-tree涓殑card
//鑾峰彇宸查�夋暟鎹� (鏍戠殑鏁版嵁锛岃鑹瞚d)
this.getSelectTree(res,row.id,index);
}
--
Gitblit v1.9.3