From 1988d77f4df3c01a9137303e0c959b3442c14377 Mon Sep 17 00:00:00 2001
From: lzhe <lzhe@example.com>
Date: 星期一, 30 九月 2024 22:10:30 +0800
Subject: [PATCH] 1
---
src/views/console/authority/role/index.vue | 91 +++++++++++++++++++++++++++++++++++----------
1 files changed, 71 insertions(+), 20 deletions(-)
diff --git a/src/views/console/authority/role/index.vue b/src/views/console/authority/role/index.vue
index e634ebd..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]; //鑾峰彇閫変腑鏁版嵁
})
}
})
@@ -369,7 +415,7 @@
line-height: 41px;
font-size: 14px;
text-align: center;
- background-color: #3b8e8e;
+ background-color: #409eff;
color: #fff;
}
.rolePage .roleContainer ul {
@@ -389,7 +435,7 @@
}
.rolePage .roleContainer ul li .active {
font-weight: bold;
- color: #3b8e8e;
+ color: #409eff;
}
.rolePage .roleContainer ul li:hover {
background-color: #f5f7fa;
@@ -411,7 +457,7 @@
.role-main-title {
padding: 6px 10px;
font-size: 14px;
- background-color: #d8e8d8;
+ background-color: #9dc7f2;
margin-bottom: 8px;
border-radius: 2px;
}
@@ -431,7 +477,7 @@
text-overflow: ellipsis;
}
.role-main-header ul li.titleActive {
- border: 1px solid #3b8e8e;
+ border: 1px solid #409eff;
}
.role-main-header ul li.role-header-add {
display: inline-block;
@@ -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