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 | 144 +++++++++++++++++++++++++++++++++++++++++-------
1 files changed, 123 insertions(+), 21 deletions(-)
diff --git a/src/views/console/authority/role/index.vue b/src/views/console/authority/role/index.vue
index 557a1cc..4392751 100644
--- a/src/views/console/authority/role/index.vue
+++ b/src/views/console/authority/role/index.vue
@@ -24,24 +24,27 @@
</ul>
<div class="role-main-title">鏉冮檺绠＄悊</div>
</div>
- <el-tabs tab-position="top">
+ <el-tabs tab-position="top" class="topStyle" @tab-click="topHandleClick">
<el-tab-pane label="鑿滃崟">
<div class="treeMain">
- <el-tabs tab-position="left" class="demo-tabs" v-model="menuActiveName" @tab-click="menuHandleClick">
- <el-tab-pane v-for="item in menuGrantList" :label="item.title" :name="item.title">
- <el-tree ref="tree" v-if="showtree" :data="treeData" :props="{ label: 'title',children: 'children'}" node-key="id" show-checkbox @check-change="treeHandleCheckChange" :default-checked-keys="treeCheck" default-expand-all />
+ <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 :check-strictly="true"/>
</el-tab-pane>
</el-tabs>
- <div class="roleSubmit"><el-button type="primary" :loading="submitIsSaveing" @click="roleSubmit()">淇� 瀛�</el-button></div>
</div>
</el-tab-pane>
<el-tab-pane label="鍗＄墖">
<div class="treeMain">
- <!-- <el-tree ref="grid" node-key="key" :data="grid.list" :props="grid.props" :default-checked-keys="grid.checked" show-checkbox></el-tree> -->
- 123
+ <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 :check-strictly="true"/>
+ </el-tab-pane>
+ </el-tabs>
</div>
</el-tab-pane>
</el-tabs>
+ <div class="roleSubmit"><el-button type="primary" :loading="submitIsSaveing" @click="roleSubmit()">淇� 瀛�</el-button></div>
</div>
<el-dialog title="浜哄憳閫夋嫨" v-model="userVisible" :width="500" destroy-on-close>
@@ -75,10 +78,13 @@
},
data() {
return {
+ templateGrantTreeCard: [], //涓存椂瀛樺偍/menu/grant-tree涓殑card
+ menuHandleText: "",
showtree: true,
treeCheck: [],
menuActiveName: "",
treeData: [],
+ treeData1: [],
menuGrantList: [],
total: 0,
searchData: {
@@ -127,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.$refs.tree[0].getCheckedKeys(),
+ menuIds: list,
roleIds: [this.tableLiId]
}
this.isSaveing = true;
@@ -141,17 +157,79 @@
}
})
},
- menuHandleClick(tab, event) {
- this.setTreeList(this.menuGrantList,event.target.innerText); //tree
+ topHandleClick(tab,event) {
+ if(this.menuHandleText == "") {
+ this.menuHandleText = this.menuGrantList[0].title;
+ }
+ if(event.target.innerText == "鑿滃崟") {
+ this.setTreeList(this.menuGrantList,this.menuHandleText,'0'); //tree
+ }
+ if(event.target.innerText == "鍗＄墖") {
+ this.setTreeList(this.menuGrantList1,this.menuHandleText,'1'); //tree
+ }
},
- treeHandleCheckChange() {
-
+ menuHandleClick(tab, event,index) {
+ if(index == 0) {
+ this.setTreeList(this.menuGrantList,event.target.innerText,index); //tree
+ }
+ if(index == 1) {
+ this.setTreeList(this.menuGrantList1,event.target.innerText,index); //tree
+ }
+ this.menuHandleText = event.target.innerText;
},
- setTreeList(arr,name) {
+ treeHandleCheckChange(item,isCheck,index) {
+ var that = this;
+ if(isCheck) {
+ function checkoutId(val){
+ if(!that.treeCheck.includes(val.id)) {
+ that.treeCheck.push(val.id);
+ }
+ if(val.children) {
+ val.children.forEach(item1=> {
+ checkoutId(item1);
+ })
+ }
+ }
+ 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) {
this.treeData = [];
+ this.treeData1 = [];
arr.forEach(item=> {
if(item.title == name) {
- this.treeData = item.children;
+ if(index == '0') {
+ this.treeData = item.children;
+ }
+ if(index == '1') {
+ this.treeData1 = item.children;
+ }
}
})
},
@@ -180,24 +258,42 @@
},
getSelectTree(res,id,index) {//鑾峰彇宸查�夋暟鎹�
this.$HTTP.get(`/api/blade-system/menu/role-tree-keys?roleIds=${id}`).then(resp=> {
- if(res.code == 200) {
+ if(resp.code == 200) {
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 = []; //card鐨則ree宸︿晶鐨勯�夐」
+ res.data.card.forEach(item=> {
+ this.menuGrantList.forEach(item1=> {
+ if(item.id == item1.id) {
+ this.menuGrantList1.push(item);
+ }
+ })
+ })
this.menuActiveName = this.menuGrantList[0].title;//榛樿绗竴涓彍鍗�
this.setTreeList(this.menuGrantList,this.menuActiveName);//灞曠ず鏍戯紙宸︿晶鑿滃崟list锛屽乏渚ц彍鍗曞悕瀛楋級
- var lastId = [],idarr = [];
- var lastId = this.extractLastLevelIds(this.menuGrantList); //鑾峰彇鏈�鍚庝竴绾d
- var idarr = this.findOverlap(lastId,resp.data.menu); //鎵惧嚭涓や釜鏁扮粍閲嶅悎鐨勯儴鍒�
- this.treeCheck = idarr; //鑾峰彇閫変腑鏁版嵁
+
+ 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); //鎵惧嚭涓や釜鏁扮粍閲嶅悎鐨勯儴鍒�
+
+ // var lastId1 = [];
+ // var lastId1 = this.extractLastLevelIds(this.menuGrantList1); //鑾峰彇鏈�鍚庝竴绾d
+ // var idarr1 = this.findOverlap(lastId1,resp.data.card); //鎵惧嚭涓や釜鏁扮粍閲嶅悎鐨勯儴鍒�
+
+ // this.treeCheck = [...idarr,...idarr1]; //鑾峰彇閫変腑鏁版嵁
})
}
})
@@ -205,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);
}
@@ -453,3 +550,8 @@
z-index: 11;
}
</style>
+<style>
+.topStyle .el-tabs__header .el-tabs__nav-scroll .el-tabs__item{
+ padding-left: 20px;
+}
+</style>
--
Gitblit v1.9.3