From 245cbd725988d579d015fd4834277aacca352dec Mon Sep 17 00:00:00 2001
From: lzhe <lzhe@example.com>
Date: 星期一, 30 九月 2024 17:06:39 +0800
Subject: [PATCH] 1
---
src/views/console/authority/role/index.vue | 83 +++++++++++++++++++++++++++++++++--------
1 files changed, 67 insertions(+), 16 deletions(-)
diff --git a/src/views/console/authority/role/index.vue b/src/views/console/authority/role/index.vue
index 557a1cc..56389d5 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-tabs tab-position="left" class="demo-tabs" v-model="menuActiveName" @tab-click="(tab,event)=>menuHandleClick(tab,event,'0')">
<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-tree ref="tree0" 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-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 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="treeHandleCheckChange" :default-checked-keys="treeCheck" default-expand-all />
+ </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,12 @@
},
data() {
return {
+ menuHandleText: "",
showtree: true,
treeCheck: [],
menuActiveName: "",
treeData: [],
+ treeData1: [],
menuGrantList: [],
total: 0,
searchData: {
@@ -130,7 +135,7 @@
var obj = {
apiScopeIds: [],
dataScopeIds: [],
- menuIds: this.$refs.tree[0].getCheckedKeys(),
+ menuIds: this.treeCheck,
roleIds: [this.tableLiId]
}
this.isSaveing = true;
@@ -141,17 +146,43 @@
}
})
},
- 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) {
+ if(!item.hasChildren) {
+ this.treeCheck.push(item.id);
+ }
+ },
+ setTreeList(arr,name,index=0) {
this.treeData = [];
+ this.treeData1 = [];
arr.forEach(item=> {
if(item.title == name) {
- this.treeData = item.children;
+ //this.treeData = item.children;
+ if(index == '0') {
+ this.treeData = item.children;
+ }
+ if(index == '1') {
+ this.treeData1 = item.children;
+ }
}
})
},
@@ -180,7 +211,7 @@
},
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;
})
@@ -189,15 +220,30 @@
this.tableLiId = id; //瑙掕壊id
this.$nextTick(()=> {
this.showtree = true;
+ //鑿滃崟
this.menuGrantList = res.data.menu.filter(item=> { //杩囨护鎺夋病鏈塩hildren鐨�
return item.children;
});
+ //鍗＄墖
+ this.menuGrantList1 = [];
+ 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 = [];
var lastId = this.extractLastLevelIds(this.menuGrantList); //鑾峰彇鏈�鍚庝竴绾d
var idarr = this.findOverlap(lastId,resp.data.menu); //鎵惧嚭涓や釜鏁扮粍閲嶅悎鐨勯儴鍒�
- this.treeCheck = idarr; //鑾峰彇閫変腑鏁版嵁
+
+ var lastId1 = [];
+ var lastId1 = this.extractLastLevelIds(this.menuGrantList1); //鑾峰彇鏈�鍚庝竴绾d
+ var idarr1 = this.findOverlap(lastId1,resp.data.card); //鎵惧嚭涓や釜鏁扮粍閲嶅悎鐨勯儴鍒�
+
+ this.treeCheck = [...idarr,...idarr1]; //鑾峰彇閫変腑鏁版嵁
})
}
})
@@ -453,3 +499,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