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 | 549 ++++++++++++++++++++++++++++++++++++++++++++++--------
1 files changed, 468 insertions(+), 81 deletions(-)
diff --git a/src/views/console/authority/role/index.vue b/src/views/console/authority/role/index.vue
index d987e5a..4392751 100644
--- a/src/views/console/authority/role/index.vue
+++ b/src/views/console/authority/role/index.vue
@@ -1,75 +1,374 @@
<template>
- <el-container>
- <el-header>
+ <div class="rolePage">
+ <div class="roleContainer">
+ <div class="roleContainer-title">瑙掕壊</div>
+ <ul>
+ <li v-for="(item,index) in tableData" @click="changeTabaleLi(item,index)">
+ <span :class="{active: item.active}">{{item.roleName}}</span>
+ <div class="scopeBtn">
+ <span style="margin-right: 12px;cursor: pointer;" @click.stop="table_edit(item, index)">閲嶅懡鍚�</span>
+ <span @click="table_del(item, index)">鍒犻櫎</span>
+ </div>
+ </li>
+ </ul>
<div class="left-panel">
- <el-button type="primary" icon="el-icon-plus" @click="add"></el-button>
- <el-button type="danger" plain icon="el-icon-delete" :disabled="selection.length==0" @click="batch_del"></el-button>
- <el-button type="primary" plain :disabled="selection.length!=1" @click="permission">鏉冮檺璁剧疆</el-button>
+ <el-button type="primary" icon="el-icon-plus" @click="addRole">娣诲姞瑙掕壊</el-button>
</div>
- <div class="right-panel">
- <div class="right-panel-search">
- <el-input v-model="search.keyword" placeholder="瑙掕壊鍚嶇О" clearable></el-input>
- <el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
- </div>
+ </div>
+ <div class="role-main-tabs">
+ <div class="role-main-header">
+ <div class="role-main-title">璐﹀彿</div>
+ <ul>
+ <li v-for="(item,index) in roleHeaderList" @click="changeHeaderLi(item,index)" :class="{titleActive: item.active}">{{item.realName}}</li>
+ <li class="role-header-add" @click="addUser">+ 娣诲姞璐﹀彿</li>
+ </ul>
+ <div class="role-main-title">鏉冮檺绠＄悊</div>
</div>
- </el-header>
- <el-main class="nopadding">
- <scTable ref="table" :apiObj="apiObj" row-key="id" @selection-change="selectionChange" stripe>
- <el-table-column type="selection" width="50"></el-table-column>
- <el-table-column label="#" type="index" width="50"></el-table-column>
- <el-table-column label="瑙掕壊鍚嶇О" prop="label" width="150"></el-table-column>
- <el-table-column label="鎺掑簭" prop="sort" width="80"></el-table-column>
- <el-table-column label="鎿嶄綔" fixed="right" align="right" width="170">
- <template #default="scope">
- <el-button-group>
- <el-button text type="primary" size="small" @click="table_show(scope.row, scope.$index)">鏌ョ湅</el-button>
- <el-button text type="primary" size="small" @click="table_edit(scope.row, scope.$index)">缂栬緫</el-button>
- <el-popconfirm title="纭畾鍒犻櫎鍚楋紵" @confirm="table_del(scope.row, scope.$index)">
- <template #reference>
- <el-button text type="primary" size="small">鍒犻櫎</el-button>
- </template>
- </el-popconfirm>
- </el-button-group>
- </template>
- </el-table-column>
+ <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="(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>
+ </el-tab-pane>
+ <el-tab-pane label="鍗＄墖">
+ <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 :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>
- </scTable>
- </el-main>
- </el-container>
-
- <save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSaveSuccess" @closed="dialog.save=false"></save-dialog>
-
- <permission-dialog v-if="dialog.permission" ref="permissionDialog" @closed="dialog.permission=false"></permission-dialog>
-
+ <el-dialog title="浜哄憳閫夋嫨" v-model="userVisible" :width="500" destroy-on-close>
+ <div>
+ <el-table ref="userVisibleRef" :data="userVisibleData" style="width: 100%" @selection-change="userVisibleChange">
+ <el-table-column type="selection" width="55" />
+ <el-table-column label="濮撳悕" prop="realName" />
+ <el-table-column label="褰撳墠瑙掕壊" prop="roleName" />
+ <el-table-column label="鎵嬫満鍙�" prop="phone" />
+ <el-table-column label="閭" prop="email" />
+ </el-table>
+ <el-pagination @current-change="handleCurrentChange" style="margin-top: 12px;" layout="total, prev, pager, next" :total="total" />
+ </div>
+
+ <template #footer>
+ <el-button @click="userVisible=false" >鍙� 娑�</el-button>
+ <el-button type="primary" :loading="isSaveing" @click="userSubmit()">纭� 瀹�</el-button>
+ </template>
+ </el-dialog>
+ <save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSaveSuccess" @closed="dialog.save=false"></save-dialog>
+ </div>
</template>
<script>
import saveDialog from './save'
- import permissionDialog from './permission'
export default {
name: 'role',
components: {
- saveDialog,
- permissionDialog
+ saveDialog
},
data() {
return {
+ templateGrantTreeCard: [], //涓存椂瀛樺偍/menu/grant-tree涓殑card
+ menuHandleText: "",
+ showtree: true,
+ treeCheck: [],
+ menuActiveName: "",
+ treeData: [],
+ treeData1: [],
+ menuGrantList: [],
+ total: 0,
+ searchData: {
+ current: 1,
+ size: 10
+ },
+ tableLiId: "", //褰撳墠瑙掕壊id
+ isSaveing: false,
+ submitIsSaveing: false,
+ userVisibleData: [],
+ userVisible: false,
+ roleHeaderList: [],
+ menu: {
+ list: [],
+ checked: [],
+ props: {
+ label: (data)=>{
+ return data.meta.title
+ }
+ }
+ },
+ grid: {
+ list: [],
+ checked: ["welcome", "ver", "time", "progress", "echarts", "about"],
+ props: {
+ label: (data)=>{
+ return data.title
+ },
+ disabled: (data)=>{
+ return data.isFixed
+ }
+ }
+ },
dialog: {
save: false,
permission: false
},
//apiObj: this.$API.system.role.list,
- apiObj: "",
- selection: [],
- search: {
- keyword: null
- }
+ tableData: "",
+ userSelection: []
}
},
+ mounted(){
+ this.getRoleList(); //瑙掕壊鍒楄〃
+ this.getUser(); //鑾峰彇鍏ㄩ儴璐﹀彿
+ },
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: list,
+ roleIds: [this.tableLiId]
+ }
+ this.isSaveing = true;
+ this.$HTTP.post(`/api/blade-system/role/grant`,obj).then(res=> {
+ this.isSaveing = false;
+ if(res.code == 200) {
+ this.$message.success("鎿嶄綔鎴愬姛");
+ }
+ })
+ },
+ 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
+ }
+ },
+ 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;
+ },
+ 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) {
+ if(index == '0') {
+ this.treeData = item.children;
+ }
+ if(index == '1') {
+ this.treeData1 = item.children;
+ }
+ }
+ })
+ },
+ extractLastLevelIds(array) { //閫掑綊鑾峰彇children鏈�鍚庝竴绾х殑id鐨勬暟缁�
+ let ids = [];
+ for (let i = 0; i < array.length; i++) {
+ const obj = array[i];
+ if (obj.children) {
+ // 閫掑綊璋冪敤浠ユ彁鍙栨洿娣卞眰绾х殑children涓殑id
+ ids = ids.concat(this.extractLastLevelIds(obj.children));
+ } else {
+ // 濡傛灉娌℃湁children灞炴�э紝鍒欏亣瀹氬綋鍓嶅璞℃槸鏈�鍚庝竴绾�
+ if (obj.id) {
+ ids.push(obj.id);
+ }
+ }
+ }
+ return ids;
+ },
+ findOverlap(array1, array2) { //鎵惧嚭涓や釜鏁扮粍閲嶅悎鐨勯儴鍒�
+ // 鍒涘缓涓�涓泦鍚堬紙Set锛夋潵瀛樺偍绗簩涓暟缁勪腑鐨勫厓绱狅紝浠ヤ究浜庡揩閫熸煡鎵�
+ const set = new Set(array2);
+ // 浣跨敤filter鏂规硶杩囨护鍑虹涓�涓暟缁勪腑鍦ㄩ泦鍚堜腑瀛樺湪鐨勫厓绱�
+ const overlap = array1.filter(item => set.has(item));
+ return overlap;
+ },
+ getSelectTree(res,id,index) {//鑾峰彇宸查�夋暟鎹�
+ this.$HTTP.get(`/api/blade-system/menu/role-tree-keys?roleIds=${id}`).then(resp=> {
+ if(resp.code == 200) {
+ this.tableData.forEach(item=> {
+ item.active = false;
+ })
+ 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鐨�,杩欓噷鏄痳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 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]; //鑾峰彇閫変腑鏁版嵁
+ })
+ }
+ })
+ },
+ 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);
+ }
+ })
+ },
+ userSubmit() {
+ var ids = [];
+ this.userSelection.forEach(item=> {
+ ids.push(item.id);
+ })
+ this.isSaveing = true;
+
+ this.$HTTP.post(`/api/blade-user/${this.tableLiId}/save`,{ids}).then(res=> {
+ this.isSaveing = false;
+ if(res.code == 200) {
+ this.userVisible = false;
+ this.$message.success("鎿嶄綔鎴愬姛");
+ this.$HTTP.get(`/api/blade-user/${this.tableLiId}/list`).then(res=> {
+ if(res.code == 200) {
+ this.roleHeaderList = res.data;
+ }
+ })
+ }
+ })
+ },
+ userVisibleChange(selection) {
+ this.userSelection = selection;
+ },
+ addUser() { //娣诲姞璐﹀彿
+ this.userVisible = true;
+ },
+ getUser() { //鑾峰彇鍏ㄩ儴璐﹀彿
+ this.$HTTP.get(`/api/blade-user/page?current=${this.searchData.current}&size=10&deptId=`).then(res=> {
+ if(res.code == 200) {
+ this.userVisibleData = res.data.records;
+ this.total = res.data.total;
+ }
+ })
+ },
+ getBladeList(row,index) { //浜哄憳鍒楄〃
+ this.$HTTP.get(`/api/blade-user/${row.id}/list`).then(res=> {
+ if(res.code == 200) {
+ this.roleHeaderList = res.data;
+ this.getMenuGrant(row,index); //鑾峰彇tree
+ }
+ })
+ },
+ changeHeaderLi(row,index) {
+ this.roleHeaderList.forEach(item=> {
+ item.active = false;
+ })
+ this.roleHeaderList[index].active = true;
+ },
+ changeTabaleLi(row,index) {
+ this.getBladeList(row,index); //鑾峰彇浜哄憳鍒楄〃
+ },
+ getRoleList() {
+ this.$HTTP.get("/api/blade-system/role/list?current=1&size=1000").then(res=> {
+ if(res.code == 200) {
+ res.data[0].active = true;
+ this.tableData = res.data;
+ this.getBladeList(this.tableData[0],0); //榛樿绗竴涓鑹茶幏
+ }
+ })
+ },
//娣诲姞
- add(){
+ addRole(){
this.dialog.save = true
this.$nextTick(() => {
this.$refs.saveDialog.open()
@@ -79,7 +378,7 @@
table_edit(row){
this.dialog.save = true
this.$nextTick(() => {
- this.$refs.saveDialog.open('edit').setData(row)
+ this.$refs.saveDialog.open('edit').setData(row);
})
},
//鏌ョ湅
@@ -89,33 +388,18 @@
this.$refs.saveDialog.open('show').setData(row)
})
},
- //鏉冮檺璁剧疆
- permission(){
- this.dialog.permission = true
- this.$nextTick(() => {
- this.$refs.permissionDialog.open()
- })
- },
//鍒犻櫎
- async table_del(row){
- var reqData = {id: row.id}
- var res = await this.$API.demo.post.post(reqData);
- if(res.code == 200){
- this.$refs.table.refresh()
- this.$message.success("鍒犻櫎鎴愬姛")
- }else{
- this.$alert(res.message, "鎻愮ず", {type: 'error'})
- }
- },
- //鎵归噺鍒犻櫎
- async batch_del(){
- this.$confirm(`纭畾鍒犻櫎閫変腑鐨� ${this.selection.length} 椤瑰悧锛熷鏋滃垹闄ら」涓惈鏈夊瓙闆嗗皢浼氳涓�骞跺垹闄, '鎻愮ず', {
+ table_del(row) {
+ var that = this;
+ this.$confirm(`鏄惁鍒犻櫎瑙掕壊-${row.roleName}?`, '', {
type: 'warning'
}).then(() => {
- const loading = this.$loading();
- this.$refs.table.refresh()
- loading.close();
- this.$message.success("鎿嶄綔鎴愬姛")
+ this.$HTTP.post("/api/blade-system/role/remove?ids="+row.id).then(res=> {
+ if(res.code == 200) {
+ that.$message.success("鎿嶄綔鎴愬姛");
+ that.getRoleList(); //瑙掕壊鍒楄〃
+ }
+ })
}).catch(() => {
})
@@ -133,10 +417,6 @@
row.status = val;
this.$message.success("鎿嶄綔鎴愬姛")
}, 500)
- },
- //鎼滅储
- upsearch(){
-
},
//鏍规嵁ID鑾峰彇鏍戠粨鏋�
filterTree(id){
@@ -156,15 +436,122 @@
},
//鏈湴鏇存柊鏁版嵁
handleSaveSuccess(data, mode){
- if(mode=='add'){
- this.$refs.table.refresh()
- }else if(mode=='edit'){
- this.$refs.table.refresh()
- }
+ this.getRoleList(); //瑙掕壊鍒楄〃
+ },
+ handleCurrentChange(val) {
+ console.log(`褰撳墠椤�: ${val}`);
+ this.searchData.current = val;
+ this.getUser();
}
}
}
</script>
+<style scoped>
+.rolePage {
+ display: flex;
+}
+.rolePage .roleContainer {
+ max-width:300px;
+ width:300px;
+ margin-right: 8px;
+ height: 100%;
+ margin-top:8px;
+ margin-left:8px;
+ background-color: #fff;
+ padding-bottom:8px;
+}
+.roleContainer-title {
+ height: 41px;
+ line-height: 41px;
+ font-size: 14px;
+ text-align: center;
+ background-color: #409eff;
+ color: #fff;
+}
+.rolePage .roleContainer ul {
+
+}
+.rolePage .roleContainer ul li{
+ height:42px;
+ line-height: 42px;
+ list-style-type: none;
+ color: #606266;
+ display: flex;
+ justify-content: space-between;
+ border-bottom: 1px solid #ebeef5;
+ padding-left: 8px;
+ padding-right: 8px;
+ cursor: pointer;
+}
+.rolePage .roleContainer ul li .active {
+ font-weight: bold;
+ color: #409eff;
+}
+.rolePage .roleContainer ul li:hover {
+ background-color: #f5f7fa;
+}
+.rolePage .roleContainer ul li .scopeBtn {
+ color: #409eff;
+}
+.rolePage .roleContainer .left-panel {
+ text-align: center;
+ margin-top:8px;
+}
+.rolePage .role-main-tabs {
+ flex: 1;
+ background-color: #fff;
+ padding: 8px;
+ margin-top:8px;
+ margin-right:8px;
+}
+.role-main-title {
+ padding: 6px 10px;
+ font-size: 14px;
+ background-color: #9dc7f2;
+ margin-bottom: 8px;
+ border-radius: 2px;
+}
+.role-main-header ul {
+ padding: 20px 20px 10px;
+}
+.role-main-header ul li {
+ list-style-type: none;
+ display: inline-block;
+ width: 200px;
+ padding: 8px 20px;
+ margin: 0 10px 10px 0;
+ border: 1px solid #e5e5e5;
+ cursor: pointer;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+.role-main-header ul li.titleActive {
+ border: 1px solid #409eff;
+}
+.role-main-header ul li.role-header-add {
+ display: inline-block;
+ border: 1px dashed #e5e5e5;
+}
+.treeMain {
+ position: relative;
+ margin-bottom: 60px;
+}
+.roleSubmit {
+ bottom: 0;
+ position: fixed;
+ width: 100%;
+ text-align: right;
+ right: 0;
+ padding-right: 20px;
+ padding-bottom: 12px;
+ background: #fff;
+ z-index: 11;
+}
+</style>
<style>
+.topStyle .el-tabs__header .el-tabs__nav-scroll .el-tabs__item{
+ padding-left: 20px;
+}
</style>
--
Gitblit v1.9.3