From 20baed5059a2f040996cae291d66bdbfc46eb9c2 Mon Sep 17 00:00:00 2001
From: Surpriseplus <845948745@qq.com>
Date: 星期五, 14 十月 2022 15:45:52 +0800
Subject: [PATCH] 菜单权限授权,角色资源授权页面添加，接口对接
---
src/api/api.js | 39 +
src/assets/lang/zh.js | 31
src/views/AuthorizationManagement/menuRoleAuthorization.vue | 447 +++++++++++++++++++++++
public/config/config.js | 4
src/views/AuthorizationManagement/roleResAuthorization.vue | 540 ++++++++++++++++++++++++++++
src/assets/lang/en.js | 3
src/router/index.js | 33 +
7 files changed, 1,070 insertions(+), 27 deletions(-)
diff --git a/public/config/config.js b/public/config/config.js
index a2b2f29..6be7033 100644
--- a/public/config/config.js
+++ b/public/config/config.js
@@ -1,5 +1,5 @@
-// const BASE_URL = 'http://192.168.20.55:12316';
-const BASE_URL = 'http://192.168.20.39:12316';
+const BASE_URL = 'http://192.168.20.55:12316';
+//const BASE_URL = 'http://192.168.20.39:12316';
var gisUrl = 'http://183.162.245.49:3301';
var ifreamUrl = 'http://192.168.20.39:12306/';
diff --git a/src/api/api.js b/src/api/api.js
index a12ed13..bd75500 100644
--- a/src/api/api.js
+++ b/src/api/api.js
@@ -132,6 +132,12 @@
//璇锋眰鍦板潃
return request.get('/auth/selectByPageAndCount', { params: params });
}
+//鏉冮檺绠＄悊鍒楄〃鏍规嵁鑿滃崟
+export function select_AuthMenu_ByPageAndCount(params) {
+ //璇锋眰鍦板潃
+ return request.get('/auth/selectByPageForMenu', { params: params });
+}
+
//鏉冮檺绠＄悊娣诲姞
export function insertAuth(params) {
return request.post('/auth/insertAuth', params);
@@ -202,8 +208,6 @@
return request.post('/Menu/updateMenus', params);
}
-
-
//璇锋眰鐩綍鏍戞暟鎹�
export function queryDirTree() {
return request.get('/dir/selectDirAll');
@@ -268,8 +272,6 @@
return request.post('/user/updateUserPwd', params);
}
-
-
//鏍规嵁瑙掕壊鏌ヨ鐢ㄦ埛
export function roleUserselectByPageForRole(params) {
//璇锋眰鍦板潃
@@ -299,3 +301,32 @@
export function update_args(params) {
return request.post('/args/update', params);
}
+
+//鑿滃崟鏉冮檺璇锋眰鍒楄〃
+export function select_menuAuth_ByPageAndCount(params) {
+ return request.get('/menuAuth/selectByPageAndCount', { params: params });
+}
+//鑿滃崟鏉冮檺娣诲姞澶氭潯鏁版嵁
+export function menuAuthinserts(params) {
+ return request.post('/menuAuth/inserts', params);
+}
+//鑿滃崟鏉冮檺鍒犻櫎澶氭潯
+export function menuAuthDeletes(params) {
+ return request.get('/menuAuth/deletes', { params: params });
+}
+//瑙掕壊璧勬簮鍒楄〃
+export function roleReselectByPageAndCount(params) {
+ return request.get('/roleRes/selectByPageAndCount', { params: params });
+}
+//瑙掕壊璧勬簮鏂板
+export function roleResInserts(params) {
+ return request.post('/roleRes/inserts', params);
+}
+//瑙掕壊璧勬簮鍒犻櫎
+export function roleResDeletes(params) {
+ return request.get('/roleRes/deletes', { params: params });
+}
+//璧勬簮绠＄悊-鏍规嵁瑙掕壊鍒嗛〉鏌ヨ骞惰繑鍥炶褰曟暟
+export function resSelectCountForRole(params) {
+ return request.get('/res/selectCountForRole', { params: params });
+}
diff --git a/src/assets/lang/en.js b/src/assets/lang/en.js
index 3e546e4..416b164 100644
--- a/src/assets/lang/en.js
+++ b/src/assets/lang/en.js
@@ -105,6 +105,7 @@
operatManage: 'Operat Manage',
ResourceLog: 'Resource Log',
UserRoleAuthorization: 'User Role Authorization',
+ MenuRoleAuthorization: 'Menu Permission Authorization',
UserRoleAuthorizationObj: {
RoleTable: 'Role Table',
userTable: 'user Table',
@@ -112,6 +113,8 @@
delete: 'delete',
serialNumber: 'serial Number',
name: 'name',
+ PermissionTable: 'Permission table',
+ server: 'Service Address',
},
ELM: {
username: 'username',
diff --git a/src/assets/lang/zh.js b/src/assets/lang/zh.js
index a6b66db..2fec689 100644
--- a/src/assets/lang/zh.js
+++ b/src/assets/lang/zh.js
@@ -106,6 +106,7 @@
operatManage: '杩愮淮绠＄悊',
ResourceLog: '璧勬簮鏃ュ織',
UserRoleAuthorization: '鐢ㄦ埛瑙掕壊鎺堟潈',
+ MenuRoleAuthorization: '鑿滃崟鏉冮檺鎺堟潈',
UserRoleAuthorizationObj: {
RoleTable: '瑙掕壊琛�',
userTable: '鐢ㄦ埛琛�',
@@ -113,6 +114,8 @@
delete: '鍒犻櫎',
serialNumber: '缂栧彿',
name: '鍚嶇О',
+ PermissionTable: '鏉冮檺琛�',
+ server: '鏈嶅姟鍦板潃',
},
ELM: {
username: '鐢ㄦ埛鍚嶇О',
@@ -399,21 +402,21 @@
rejection: '鎷掓壒',
userexport: 'Excel鐢ㄦ埛瀵煎嚭',
userinput: 'Excel鐢ㄦ埛瀵煎叆',
- userStatus: "鐢ㄦ埛鐘舵��",
- uname: "鐢ㄦ埛鍚�",
- pwd: "瀵嗙爜",
- sex: "鎬у埆",
- natives: "绫嶈疮",
+ userStatus: '鐢ㄦ埛鐘舵��',
+ uname: '鐢ㄦ埛鍚�',
+ pwd: '瀵嗙爜',
+ sex: '鎬у埆',
+ natives: '绫嶈疮',
depName: '鍗曚綅鍚嶇О',
- idcard: "璇佷欢鍙�",
- job: "宸ヤ綔",
- edu: "鏁欒偛",
- addr: "鍦板潃",
- email: "鐢靛瓙閭欢",
- contact: "鑱旂郴鏂瑰紡",
- status: "鐘舵��",
- bak: "澶囨敞",
- depid: "鎵�灞為儴闂�",
+ idcard: '璇佷欢鍙�',
+ job: '宸ヤ綔',
+ edu: '鏁欒偛',
+ addr: '鍦板潃',
+ email: '鐢靛瓙閭欢',
+ contact: '鑱旂郴鏂瑰紡',
+ status: '鐘舵��',
+ bak: '澶囨敞',
+ depid: '鎵�灞為儴闂�',
chineseName: '涓枃鍚峓鐢ㄦ埛鍚峕',
affiliatedUnit: '鎵�灞炲崟浣峓鍦ㄨ亴]',
mobileNumber: '鎵嬫満鍙穂鎺ユ敹鐭俊]',
diff --git a/src/router/index.js b/src/router/index.js
index 8d351de..c52e652 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -37,14 +37,16 @@
import groupManage from '../views/userManage/groupManage.vue'; // 鐢ㄦ埛绠＄悊妯″潡
import authorityManage from '@/views/userManage/authorityManage.vue'; //鐢ㄦ埛绠＄悊-鏉冮檺绠＄悊
import resourceManage from '@/views/userManage/resourceManage.vue'; //鐢ㄦ埛绠＄悊-璧勬簮绠＄悊
-import userRoleAuthorization from '@/views/AuthorizationManagement/userRoleAuthorization.vue'; //绯荤粺绠＄悊-
-const originalPush = VueRouter.prototype.push
+import userRoleAuthorization from '@/views/AuthorizationManagement/userRoleAuthorization.vue'; //绯荤粺绠＄悊-鐢ㄦ埛瑙掕壊鎺堟潈
+
+import menuRoleAuthorization from '@/views/AuthorizationManagement/menuRoleAuthorization.vue'; //绯荤粺绠＄悊-鑿滃崟鏉冮檺鎺堟潈
+import roleResAuthorization from '@/views/AuthorizationManagement/roleResAuthorization.vue'; //绯荤粺绠＄悊-瑙掕壊璧勬簮鎺堟潈
+
+const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location) {
-
- return originalPush.call(this, location).catch(err => err)
-
-}
+ return originalPush.call(this, location).catch((err) => err);
+};
// 缇ょ粍绠＄悊
Vue.use(VueRouter);
@@ -355,7 +357,24 @@
requireAuth: true, // 鏍囪瘑璇ヨ矾鐢辨槸鍚﹂渶瑕佺櫥褰�
},
},
-
+ {
+ path: '/menuRoleAuthorization',
+ component: menuRoleAuthorization,
+ name: 'menuRoleAuthorization',
+ meta: {
+ title: '鑿滃崟鏉冮檺鎺堟潈',
+ requireAuth: true, // 鏍囪瘑璇ヨ矾鐢辨槸鍚﹂渶瑕佺櫥褰�
+ },
+ },
+ {
+ path: '/roleResAuthorization',
+ component: roleResAuthorization,
+ name: 'roleResAuthorization',
+ meta: {
+ title: '鑿滃崟鏉冮檺鎺堟潈',
+ requireAuth: true, // 鏍囪瘑璇ヨ矾鐢辨槸鍚﹂渶瑕佺櫥褰�
+ },
+ },
],
},
];
diff --git a/src/views/AuthorizationManagement/menuRoleAuthorization.vue b/src/views/AuthorizationManagement/menuRoleAuthorization.vue
new file mode 100644
index 0000000..52f59a3
--- /dev/null
+++ b/src/views/AuthorizationManagement/menuRoleAuthorization.vue
@@ -0,0 +1,447 @@
+<template>
+ <div class="menuSettings_box">
+ <div class="menuSettings_tree">
+ <My-bread
+ :list="[
+ `${$t('operatManage.operatManage')}`,
+
+ `${$t('operatManage.MenuRoleAuthorization')}`,
+ ]"
+ ></My-bread>
+
+ <el-divider />
+ <div class="menuTreeBox">
+ <el-tree
+ :data="depList"
+ :props="defaultProps"
+ :show-checkbox="true"
+ :check-on-click-node="true"
+ :check-strictly="true"
+ node-key="id"
+ @check="treeCheck"
+ ref="treeForm"
+ >
+ </el-tree>
+ </div>
+ </div>
+
+ <div class="menuSettings">
+ <!-- <div class="title_box">
+ <h4>璇︾粏淇℃伅</h4>
+ </div> -->
+ <div
+ style="
+ font-size: 14px;
+ color: #606266;
+ line-height: 1;
+ cursor: text;
+ position: relative;
+ top: 5px;
+ margin-left: 10px;
+ display: flex;
+ align-items: center;
+ "
+ >
+ <span>
+ {{
+ $t('operatManage.UserRoleAuthorizationObj.PermissionTable')
+ }}</span
+ >
+ <div class="btn" style="margin-left: auto">
+ <el-button
+ type="primary"
+ icon="el-icon-circle-plus-outline"
+ size="small"
+ :disabled="roleid == null ? true : false"
+ @click="adduser"
+ >{{ $t('operatManage.UserRoleAuthorizationObj.Added') }}</el-button
+ >
+ <el-button
+ type="danger"
+ icon="el-icon-delete"
+ size="small"
+ @click="deletesUser"
+ :disabled="roleid == null ? true : false"
+ >{{ $t('operatManage.UserRoleAuthorizationObj.delete') }}</el-button
+ >
+ </div>
+ </div>
+ <el-divider class="divider" />
+
+ <el-table
+ :data="tableData"
+ stripe
+ style="width: 100%"
+ height="85%"
+ @selection-change="handleSelectionChange"
+ :header-cell-style="{
+ background: 'transparent',
+ }"
+ >
+ <el-table-column type="selection" width="55"> </el-table-column>
+ <el-table-column
+ prop="authid"
+ :label="$t('operatManage.UserRoleAuthorizationObj.serialNumber')"
+ >
+ </el-table-column>
+ <el-table-column
+ prop="authName"
+ :label="$t('operatManage.UserRoleAuthorizationObj.name')"
+ >
+ </el-table-column>
+ </el-table>
+
+ <div style="margin-top: 20px; text-align: center" class="pagination_box">
+ <el-pagination
+ @size-change="userhandleSizeChange"
+ @current-change="userhandleCurrentChange"
+ :current-page="userlistData.pageIndex"
+ :page-sizes="[10, 20, 30, 40]"
+ :page-size="userlistData.pageSize"
+ layout="total, sizes, prev, pager, next, jumper"
+ :total="usercount"
+ >
+ </el-pagination>
+ </div>
+ </div>
+ <el-dialog
+ :title="$t('operatManage.UserRoleAuthorizationObj.Added')"
+ :visible.sync="dialogTableVisible"
+ >
+ <el-table
+ :data="gridData"
+ height="40vh"
+ @selection-change="addhandleSelectionChange"
+ >
+ <el-table-column type="selection" width="55"> </el-table-column>
+ <el-table-column
+ prop="id"
+ :label="$t('operatManage.UserRoleAuthorizationObj.serialNumber')"
+ >
+ </el-table-column>
+ <el-table-column
+ prop="name"
+ :label="$t('operatManage.UserRoleAuthorizationObj.name')"
+ >
+ </el-table-column>
+ </el-table>
+ <div style="margin-top: 20px; text-align: center" class="pagination_box">
+ <el-pagination
+ @size-change="addhandleSizeChange"
+ @current-change="addhandleCurrentChange"
+ :current-page="addlistData.pageIndex"
+ :page-sizes="[10, 20, 30, 40]"
+ :page-size="addlistData.pageSize"
+ layout="total, sizes, prev, pager, next, jumper"
+ :total="addcount"
+ >
+ </el-pagination>
+ </div>
+ <div slot="footer" class="dialog-footer">
+ <el-button @click="dialogTableVisible = false">{{
+ $t('dataManage.dictionaryManageObj.cancel')
+ }}</el-button>
+ <el-button type="primary" @click="addConfirm">{{
+ $t('dataManage.dictionaryManageObj.confirm')
+ }}</el-button>
+ </div>
+ </el-dialog>
+ </div>
+</template>
+
+<script>
+import MyBread from '../../components/MyBread.vue';
+import {
+ queryMenuTree,
+ select_menuAuth_ByPageAndCount,
+ roleUserselectByPageForRole,
+ menuAuthDeletes,
+ select_AuthMenu_ByPageAndCount,
+ menuAuthinserts,
+} from '../../api/api';
+export default {
+ //import寮曞叆鐨勭粍浠堕渶瑕佹敞鍏ュ埌瀵硅薄涓墠鑳戒娇鐢�
+ components: {
+ MyBread,
+ },
+
+ data() {
+ return {
+ addcount: 0,
+ gridData: [],
+ addlistData: {
+ pageIndex: 1,
+ pageSize: 10,
+ },
+ dialogTableVisible: false,
+ usertableData: [],
+ userlistData: {
+ pageIndex: 1,
+ pageSize: 10,
+ },
+ usercount: 0,
+ tableData: [],
+ // 褰撳墠閫夋嫨鐨勮鐨刬d
+ templateSelection: '',
+ // 褰撳墠閫夋嫨鐨勮鐨勬暟鎹�
+ checkList: [],
+
+ defaultProps: {
+ children: 'children',
+ label: 'cnName',
+ },
+ oriData: [], //鍘熷鏍戞暟鎹�
+ depList: [], //el鏍戞暟鎹�
+ backUpData: {},
+ formLabelWidth: '170px',
+ listData: {
+ pageIndex: 1,
+ pageSize: 10,
+ },
+ count: 0,
+ usermultipleSelection: [],
+ debid: null,
+ roleid: null,
+ addmultipleSelection: [],
+ };
+ },
+ methods: {
+ /**
+ * sws
+ */
+
+ // 閮ㄩ棬璇锋眰
+ async getMenuTree() {
+ //鑾峰彇鐩綍鏍戞渶澶D锛屾柊寤鸿妭鐐逛娇鐢�
+ const data = await queryMenuTree();
+ if (data.code !== 200) {
+ return this.$message.error('璇锋眰鍗曚綅鎶ラ敊');
+ }
+ this.depList = this.treeData(data.result);
+ },
+ treeData(source) {
+ let cloneData = JSON.parse(JSON.stringify(source)); // 瀵规簮鏁版嵁娣卞害鍏嬮殕
+ return cloneData.filter((father) => {
+ // 寰幆鎵�鏈夐」
+ let branchArr = cloneData.filter((child) => father.id == child.pid); // 瀵规瘮ID锛屽垎鍒笂涓嬬骇鑿滃崟锛屽苟杩斿洖鏁版嵁
+ branchArr.length > 0 ? (father.children = branchArr) : ''; // 缁欑埗绾ф坊鍔犱竴涓猚hildren灞炴�э紝骞惰祴鍊�
+ return father.pid == 0; // 杩斿洖涓�绾ц彍鍗�
+ });
+ },
+ // 閮ㄩ棬鏍戝崟閫�
+ treeCheck(node, list) {
+ //node 璇ヨ妭鐐规墍瀵瑰簲鐨勫璞°�乴ist 鏍戠洰鍓嶇殑閫変腑鐘舵�佸璞�
+ //閫変腑浜嬩欢鍦ㄩ�変腑鍚庢墽琛岋紝褰搇is涓湁涓や釜閫変腑鏃讹紝浣跨敤setCheckedKeys鏂规硶锛岄�変腑涓�涓妭鐐�
+
+ if (list.checkedNodes.length > 0) {
+ this.listData.menuid = node.id;
+ this.debid = node.id;
+ this.roleid = node.id;
+ this.getRole();
+ if (list.checkedKeys.length == 2) {
+ //鍗曢�夊疄鐜�
+ this.$refs.treeForm.setCheckedKeys([node.id]);
+ }
+ } else {
+ this.debid = null;
+ this.roleid = null;
+ this.tableData = [];
+ this.usertableData = [];
+ }
+ },
+
+ addConfirm() {
+ this.$confirm('纭畾鏄惁鏂板', '鎻愮ず', {
+ confirmButtonText: '纭畾',
+ cancelButtonText: '鍙栨秷',
+ type: 'warning',
+ })
+ .then(async () => {
+ let arr = [];
+ this.addmultipleSelection.forEach((e) => {
+ arr.push({ menuid: this.roleid, authid: e.id });
+ });
+
+ const data = await menuAuthinserts(arr);
+ if (data.code !== 200) {
+ return this.$message.error('鏂板澶辫触');
+ }
+ this.$message({
+ type: 'success',
+ message: '鏂板鎴愬姛!',
+ });
+ this.dialogTableVisible = false;
+ this.getRole();
+ })
+ .catch(() => {});
+ },
+ adduser() {
+ this.dialogTableVisible = true;
+ this.getadduserList();
+ },
+ //鐢ㄦ埛鍒犻櫎
+ async deletesUser() {
+ let arr = [];
+ this.usermultipleSelection.forEach((e) => {
+ arr.push(e.id);
+ });
+ const data = await menuAuthDeletes({ ids: arr.toString() });
+ if (data.code !== 200) {
+ return this.$message.error('鍒犻櫎澶辫触');
+ }
+ this.$message({
+ message: '鍒犻櫎鎴愬姛',
+ type: 'success',
+ });
+ this.getRole();
+ },
+
+ async getadduserList() {
+ this.addlistData.menuid = this.roleid;
+ const data = await select_AuthMenu_ByPageAndCount(this.addlistData);
+ if (data.code !== 200) {
+ return this.$message.error('鏂板鐢ㄦ埛鍒楄〃璇锋眰閿欒');
+ }
+ this.gridData = data.result;
+ this.addcount = data.count;
+ },
+
+ //鐢ㄦ埛琛ㄥ閫�
+ handleSelectionChange(val) {
+ this.usermultipleSelection = val;
+ },
+ //鏂板鐢ㄦ埛琛ㄥ閫�
+ addhandleSelectionChange(val) {
+ this.addmultipleSelection = val;
+ },
+ // 鏂板鐢ㄦ埛琛ㄥ垎椤�
+ addhandleSizeChange(val) {
+ this.addlistData.pageSize = val;
+ this.getadduserList();
+ },
+ // 鏂板鐢ㄦ埛琛ㄥ垎椤�
+ addhandleCurrentChange(val) {
+ this.addlistData.pageIndex = val;
+ this.getadduserList();
+ },
+ // 鐢ㄦ埛琛ㄥ垎椤�
+ userhandleSizeChange(val) {
+ this.userlistData.pageSize = val;
+ this.getRole();
+ },
+ // 鐢ㄦ埛琛ㄥ垎椤�
+ userhandleCurrentChange(val) {
+ this.userlistData.pageIndex = val;
+ this.getRole();
+ },
+
+ // 瑙掕壊琛ㄨ姹�
+ async getRole() {
+ const data = await select_menuAuth_ByPageAndCount(this.listData);
+ if (data.code !== 200) {
+ return this.$message.error('鐢ㄦ埛瑙掕壊璇锋眰閿欒');
+ }
+
+ this.tableData = data.result;
+ this.usercount = data.count;
+ },
+ },
+ created() {
+ this.getMenuTree();
+ },
+};
+</script>
+<style lang="less" scoped>
+//@import url(); 寮曞叆鍏叡css绫�
+.menuSettings_box {
+ // background: rgb(240, 242, 245);
+ border-radius: 10px;
+ height: 100%;
+ padding: 10px;
+ box-sizing: border-box;
+ display: flex;
+ .menuSettings_tree {
+ position: relative;
+ width: 30%;
+ height: 100%;
+ background: rgb(240, 242, 245);
+ padding: 20px;
+ border-radius: 10px;
+ box-sizing: border-box;
+ overflow: auto;
+ .saveBtn {
+ position: absolute;
+ left: 250px;
+ top: 23px;
+ }
+ .menuTreeBox {
+ height: 90%;
+ overflow: auto;
+ .el-tree {
+ background: transparent;
+ font-size: 15px;
+ font-family: Microsoft YaHei;
+ font-weight: 400;
+ color: #000000;
+ // /deep/ .el-tree-node__label {
+ // font-size: 18px;
+ // }
+ /deep/ .el-tree-node {
+ padding-top: 10px;
+ // padding-bottom: 10px;
+ }
+ /deep/ .el-tree-node:focus > .el-tree-node__content {
+ background-color: #b9b9b9;
+ }
+ /deep/ .el-tree-node__content:hover {
+ background-color: rgb(153, 153, 153);
+ }
+ .btnBox {
+ margin-left: 5px;
+ .el-button + .el-button {
+ margin-left: 5px;
+ }
+ }
+ }
+ }
+ }
+ .menuSettings {
+ width: 70%;
+ border-radius: 10px;
+ background: rgb(240, 242, 245);
+ margin-left: 10px;
+ height: 100%;
+ padding: 20px;
+ box-sizing: border-box;
+ .title_box {
+ background: #fff;
+ padding: 10px;
+ margin-bottom: 24px;
+ display: flex;
+ border-radius: 10px;
+ border: 1px solid rgb(202, 201, 204);
+ box-sizing: border-box;
+ }
+ }
+ .table_box {
+ padding: 10px;
+ background: #fff;
+ border-radius: 5px;
+ border: 1px solid rgb(202, 201, 204);
+ overflow: auto;
+ height: 85%;
+ }
+ .divider {
+ margin-top: 8px;
+ }
+}
+.el-table,
+.el-table /deep/ .el-table__expanded-cell {
+ background-color: transparent;
+}
+
+.el-table /deep/ th,
+.el-table /deep/ tr {
+ background-color: transparent;
+}
+</style>
diff --git a/src/views/AuthorizationManagement/roleResAuthorization.vue b/src/views/AuthorizationManagement/roleResAuthorization.vue
new file mode 100644
index 0000000..b03aa95
--- /dev/null
+++ b/src/views/AuthorizationManagement/roleResAuthorization.vue
@@ -0,0 +1,540 @@
+<template>
+ <div class="menuSettings_box">
+ <div class="menuSettings_tree">
+ <My-bread
+ :list="[
+ `${$t('operatManage.operatManage')}`,
+ `${$t('operatManage.UserRoleAuthorization')}`,
+ ]"
+ ></My-bread>
+
+ <el-divider />
+ <div class="menuTreeBox">
+ <el-tree
+ :data="depList"
+ :props="defaultProps"
+ :show-checkbox="true"
+ :check-on-click-node="true"
+ :check-strictly="true"
+ node-key="id"
+ @check="treeCheck"
+ ref="treeForm"
+ >
+ </el-tree>
+ </div>
+ </div>
+ <div
+ class="menuSettings_tree"
+ style="margin-left: 10px; width: calc(50% - 172px)"
+ >
+ <div
+ style="
+ font-size: 14px;
+ color: #606266;
+ line-height: 1;
+ cursor: text;
+ position: relative;
+ top: 10px;
+ margin-left: 10px;
+ "
+ >
+ {{ $t('operatManage.UserRoleAuthorizationObj.RoleTable') }}
+ </div>
+ <el-divider />
+ <el-table
+ :data="tableData"
+ style="width: 100%"
+ @row-click="singleElection"
+ highlight-current-row
+ height="85%"
+ :header-cell-style="{
+ background: 'transparent',
+ }"
+ >
+ <el-table-column align="center" width="55">
+ <template slot-scope="scope">
+ <!-- 鍙互鎵嬪姩鐨勪慨鏀筶abel鐨勫�硷紝浠庤�屾帶鍒堕�夋嫨鍝竴椤� -->
+ <el-radio
+ class="radio"
+ v-model="templateSelection"
+ :label="scope.row.id"
+ > </el-radio
+ >
+ </template>
+ </el-table-column>
+ <el-table-column
+ prop="id"
+ :label="$t('operatManage.UserRoleAuthorizationObj.serialNumber')"
+ >
+ </el-table-column>
+ <el-table-column
+ prop="name"
+ :label="$t('operatManage.UserRoleAuthorizationObj.name')"
+ >
+ </el-table-column>
+ </el-table>
+ <div style="text-align: center; margin-top: 20px">
+ <el-pagination
+ @size-change="handleSizeChange"
+ @current-change="handleCurrentChange"
+ :current-page="listData.pageIndex"
+ :page-sizes="[10, 20, 30, 40]"
+ :page-size="userlistData.pageSize"
+ layout="total, sizes, prev, pager, next, jumper"
+ :total="count"
+ >
+ </el-pagination>
+ </div>
+ </div>
+ <div class="menuSettings">
+ <!-- <div class="title_box">
+ <h4>璇︾粏淇℃伅</h4>
+ </div> -->
+ <div
+ style="
+ font-size: 14px;
+ color: #606266;
+ line-height: 1;
+ cursor: text;
+ position: relative;
+ top: 5px;
+ margin-left: 10px;
+ display: flex;
+ align-items: center;
+ "
+ >
+ <span>
+ {{ $t('operatManage.UserRoleAuthorizationObj.userTable') }}</span
+ >
+ <div class="btn" style="margin-left: auto">
+ <el-button
+ type="primary"
+ icon="el-icon-circle-plus-outline"
+ size="small"
+ :disabled="roleid == null ? true : false"
+ @click="adduser"
+ >{{ $t('operatManage.UserRoleAuthorizationObj.Added') }}</el-button
+ >
+ <el-button
+ type="danger"
+ icon="el-icon-delete"
+ size="small"
+ @click="deletesUser"
+ :disabled="roleid == null ? true : false"
+ >{{ $t('operatManage.UserRoleAuthorizationObj.delete') }}</el-button
+ >
+ </div>
+ </div>
+ <el-divider class="divider" />
+
+ <el-table
+ :data="usertableData"
+ stripe
+ style="width: 100%"
+ height="85%"
+ @selection-change="handleSelectionChange"
+ :header-cell-style="{
+ background: 'transparent',
+ }"
+ >
+ <el-table-column type="selection" width="55"> </el-table-column>
+ <el-table-column
+ prop="id"
+ :label="$t('operatManage.UserRoleAuthorizationObj.serialNumber')"
+ >
+ </el-table-column>
+ <el-table-column
+ prop="resName"
+ :label="$t('operatManage.UserRoleAuthorizationObj.name')"
+ >
+ </el-table-column>
+ <el-table-column
+ prop="server"
+ :label="$t('operatManage.UserRoleAuthorizationObj.server')"
+ >
+ </el-table-column>
+ </el-table>
+
+ <div style="margin-top: 20px; text-align: center" class="pagination_box">
+ <el-pagination
+ @size-change="userhandleSizeChange"
+ @current-change="userhandleCurrentChange"
+ :current-page="userlistData.pageIndex"
+ :page-sizes="[10, 20, 30, 40]"
+ :page-size="userlistData.pageSize"
+ layout="total, sizes, prev, pager, next, jumper"
+ :total="usercount"
+ >
+ </el-pagination>
+ </div>
+ </div>
+ <el-dialog
+ :title="$t('operatManage.UserRoleAuthorizationObj.Added')"
+ :visible.sync="dialogTableVisible"
+ >
+ <el-table
+ :data="gridData"
+ height="40vh"
+ @selection-change="addhandleSelectionChange"
+ >
+ <el-table-column type="selection" width="55"> </el-table-column>
+ <el-table-column
+ prop="id"
+ :label="$t('operatManage.UserRoleAuthorizationObj.serialNumber')"
+ >
+ </el-table-column>
+ <el-table-column
+ prop="name"
+ :label="$t('operatManage.UserRoleAuthorizationObj.name')"
+ >
+ </el-table-column>
+ <el-table-column
+ prop="server"
+ :label="$t('operatManage.UserRoleAuthorizationObj.server')"
+ >
+ </el-table-column>
+ </el-table>
+ <div style="margin-top: 20px; text-align: center" class="pagination_box">
+ <el-pagination
+ @size-change="addhandleSizeChange"
+ @current-change="addhandleCurrentChange"
+ :current-page="addlistData.pageIndex"
+ :page-sizes="[10, 20, 30, 40]"
+ :page-size="addlistData.pageSize"
+ layout="total, sizes, prev, pager, next, jumper"
+ :total="addcount"
+ >
+ </el-pagination>
+ </div>
+ <div slot="footer" class="dialog-footer">
+ <el-button @click="dialogTableVisible = false">{{
+ $t('dataManage.dictionaryManageObj.cancel')
+ }}</el-button>
+ <el-button type="primary" @click="addConfirm">{{
+ $t('dataManage.dictionaryManageObj.confirm')
+ }}</el-button>
+ </div>
+ </el-dialog>
+ </div>
+</template>
+
+<script>
+import MyBread from '../../components/MyBread.vue';
+import {
+ queryDepTree,
+ select_Role_ByPageAndCount,
+ roleReselectByPageAndCount,
+ roleResDeletes,
+ resSelectCountForRole,
+ roleResInserts,
+} from '../../api/api';
+export default {
+ //import寮曞叆鐨勭粍浠堕渶瑕佹敞鍏ュ埌瀵硅薄涓墠鑳戒娇鐢�
+ components: {
+ MyBread,
+ },
+
+ data() {
+ return {
+ addcount: 0,
+ gridData: [],
+ addlistData: {
+ pageIndex: 1,
+ pageSize: 10,
+ },
+ dialogTableVisible: false,
+ usertableData: [],
+ userlistData: {
+ pageIndex: 1,
+ pageSize: 10,
+ },
+ usercount: 0,
+ tableData: [],
+ // 褰撳墠閫夋嫨鐨勮鐨刬d
+ templateSelection: '',
+ // 褰撳墠閫夋嫨鐨勮鐨勬暟鎹�
+ checkList: [],
+
+ defaultProps: {
+ children: 'children',
+ label: 'name',
+ },
+ oriData: [], //鍘熷鏍戞暟鎹�
+ depList: [], //el鏍戞暟鎹�
+ backUpData: {},
+ formLabelWidth: '170px',
+ listData: {
+ pageIndex: 1,
+ pageSize: 10,
+ },
+ count: 0,
+ usermultipleSelection: [],
+ debid: null,
+ roleid: null,
+ addmultipleSelection: [],
+ };
+ },
+ methods: {
+ addConfirm() {
+ this.$confirm('纭畾鏄惁鏂板', '鎻愮ず', {
+ confirmButtonText: '纭畾',
+ cancelButtonText: '鍙栨秷',
+ type: 'warning',
+ })
+ .then(async () => {
+ let arr = [];
+ this.addmultipleSelection.forEach((e) => {
+ arr.push({ resid: e.id, roleid: this.roleid });
+ });
+ const data = await roleResInserts(arr);
+ if (data.code !== 200) {
+ return this.$message.error('鏂板澶辫触');
+ }
+
+ this.$message({
+ type: 'success',
+ message: '鏂板鎴愬姛!',
+ });
+ this.dialogTableVisible = false;
+ this.getuserList();
+ })
+ .catch(() => {});
+ },
+ adduser() {
+ this.dialogTableVisible = true;
+ this.getadduserList();
+ },
+ //鐢ㄦ埛鍒犻櫎
+ async deletesUser() {
+ let arr = [];
+ this.usermultipleSelection.forEach((e) => {
+ arr.push(e.id);
+ });
+ const data = await roleResDeletes({ ids: arr.toString() });
+ if (data.code !== 200) {
+ return this.$message.error('鍒犻櫎澶辫触');
+ }
+ this.$message({
+ message: '鍒犻櫎鎴愬姛',
+ type: 'success',
+ });
+ this.getuserList();
+ },
+ //鐢ㄦ埛琛ㄥ閫�
+ handleSelectionChange(val) {
+ this.usermultipleSelection = val;
+ },
+ //鏂板鐢ㄦ埛琛ㄥ閫�
+ addhandleSelectionChange(val) {
+ this.addmultipleSelection = val;
+ },
+ // 鏂板鐢ㄦ埛琛ㄥ垎椤�
+ addhandleSizeChange(val) {
+ this.addlistData.pageSize = val;
+ this.getadduserList();
+ },
+ // 鏂板鐢ㄦ埛琛ㄥ垎椤�
+ addhandleCurrentChange(val) {
+ this.addlistData.pageIndex = val;
+ this.getadduserList();
+ },
+ // 鐢ㄦ埛琛ㄥ垎椤�
+ userhandleSizeChange(val) {
+ this.userlistData.pageSize = val;
+ this.getuserList();
+ },
+ // 鐢ㄦ埛琛ㄥ垎椤�
+ userhandleCurrentChange(val) {
+ this.userlistData.pageIndex = val;
+ this.getuserList();
+ },
+ // 瑙掕壊琛ㄥ垎椤�
+ handleSizeChange(val) {
+ this.listData.pageSize = val;
+ this.getRole();
+ },
+ // 瑙掕壊琛ㄥ垎椤�
+ handleCurrentChange(val) {
+ this.listData.pageIndex = val;
+ this.getRole();
+ },
+ // 瑙掕壊鍗曢��
+ singleElection(row) {
+ this.templateSelection = row.id;
+ this.checkList = this.tableData.filter((item) => item.id === row.id);
+ this.userlistData.roleid = row.id;
+ this.roleid = row.id;
+ this.getuserList();
+ },
+ // 閮ㄩ棬璇锋眰
+ async getMenuTree() {
+ //鑾峰彇鐩綍鏍戞渶澶D锛屾柊寤鸿妭鐐逛娇鐢�
+ const data = await queryDepTree();
+
+ if (data.code !== 200) {
+ return this.$message.error('璇锋眰鍗曚綅鎶ラ敊');
+ }
+ this.depList = this.treeData(data.result);
+ },
+ treeData(source) {
+ let cloneData = JSON.parse(JSON.stringify(source)); // 瀵规簮鏁版嵁娣卞害鍏嬮殕
+ return cloneData.filter((father) => {
+ // 寰幆鎵�鏈夐」
+ let branchArr = cloneData.filter((child) => father.id == child.pid); // 瀵规瘮ID锛屽垎鍒笂涓嬬骇鑿滃崟锛屽苟杩斿洖鏁版嵁
+ branchArr.length > 0 ? (father.children = branchArr) : ''; // 缁欑埗绾ф坊鍔犱竴涓猚hildren灞炴�э紝骞惰祴鍊�
+ return father.pid == 0; // 杩斿洖涓�绾ц彍鍗�
+ });
+ },
+ // 閮ㄩ棬鏍戝崟閫�
+ treeCheck(node, list) {
+ //node 璇ヨ妭鐐规墍瀵瑰簲鐨勫璞°�乴ist 鏍戠洰鍓嶇殑閫変腑鐘舵�佸璞�
+ //閫変腑浜嬩欢鍦ㄩ�変腑鍚庢墽琛岋紝褰搇is涓湁涓や釜閫変腑鏃讹紝浣跨敤setCheckedKeys鏂规硶锛岄�変腑涓�涓妭鐐�
+
+ if (list.checkedNodes.length > 0) {
+ this.listData.depid = node.id;
+ this.debid = node.id;
+ this.getRole();
+ if (list.checkedKeys.length == 2) {
+ //鍗曢�夊疄鐜�
+ this.$refs.treeForm.setCheckedKeys([node.id]);
+ }
+ } else {
+ this.debid = null;
+ this.roleid = null;
+ this.tableData = [];
+ this.usertableData = [];
+ }
+ },
+ async getadduserList() {
+ this.addlistData.roleid = this.roleid;
+
+ // this.addlistData.debid = this.debid;
+ const data = await resSelectCountForRole(this.addlistData);
+ if (data.code !== 200) {
+ return this.$message.error('鏂板璧勬簮鍒楄〃璇锋眰閿欒');
+ }
+ this.gridData = data.result;
+ this.addcount = data.count;
+ },
+ // 鐢ㄦ埛琛ㄨ姹�
+ async getuserList() {
+ const data = await roleReselectByPageAndCount(this.userlistData);
+ if (data.code !== 200) {
+ return this.$message.error('鐢ㄦ埛璧勬簮鍒楄〃璇锋眰閿欒');
+ }
+ this.usertableData = data.result;
+ this.usercount = data.count;
+ },
+ // 瑙掕壊琛ㄨ姹�
+ async getRole() {
+ const data = await select_Role_ByPageAndCount(this.listData);
+ if (data.code !== 200) {
+ return this.$message.error('鐢ㄦ埛瑙掕壊璇锋眰閿欒');
+ }
+ this.tableData = data.result;
+ this.count = data.count;
+ if (data.result == null) {
+ this.usertableData = [];
+ this.usercount = 0;
+ }
+ },
+ },
+ created() {
+ this.getMenuTree();
+ },
+};
+</script>
+<style lang="less" scoped>
+//@import url(); 寮曞叆鍏叡css绫�
+.menuSettings_box {
+ // background: rgb(240, 242, 245);
+ border-radius: 10px;
+ height: 100%;
+ padding: 10px;
+ box-sizing: border-box;
+ display: flex;
+ .menuSettings_tree {
+ position: relative;
+ width: 344px;
+ height: 100%;
+ background: rgb(240, 242, 245);
+ padding: 20px;
+ border-radius: 10px;
+ box-sizing: border-box;
+ overflow: auto;
+ .saveBtn {
+ position: absolute;
+ left: 250px;
+ top: 23px;
+ }
+ .menuTreeBox {
+ height: 90%;
+ overflow: auto;
+ .el-tree {
+ background: transparent;
+ font-size: 15px;
+ font-family: Microsoft YaHei;
+ font-weight: 400;
+ color: #000000;
+ // /deep/ .el-tree-node__label {
+ // font-size: 18px;
+ // }
+ /deep/ .el-tree-node {
+ padding-top: 10px;
+ // padding-bottom: 10px;
+ }
+ /deep/ .el-tree-node:focus > .el-tree-node__content {
+ background-color: #b9b9b9;
+ }
+ /deep/ .el-tree-node__content:hover {
+ background-color: rgb(153, 153, 153);
+ }
+ .btnBox {
+ margin-left: 5px;
+ .el-button + .el-button {
+ margin-left: 5px;
+ }
+ }
+ }
+ }
+ }
+ .menuSettings {
+ width: calc(50% - 172px);
+ border-radius: 10px;
+ background: rgb(240, 242, 245);
+ margin-left: 10px;
+ height: 100%;
+ padding: 20px;
+ box-sizing: border-box;
+ .title_box {
+ background: #fff;
+ padding: 10px;
+ margin-bottom: 24px;
+ display: flex;
+ border-radius: 10px;
+ border: 1px solid rgb(202, 201, 204);
+ box-sizing: border-box;
+ }
+ }
+ .table_box {
+ padding: 10px;
+ background: #fff;
+ border-radius: 5px;
+ border: 1px solid rgb(202, 201, 204);
+ overflow: auto;
+ height: 85%;
+ }
+ .divider {
+ margin-top: 8px;
+ }
+}
+.el-table,
+.el-table /deep/ .el-table__expanded-cell {
+ background-color: transparent;
+}
+
+.el-table /deep/ th,
+.el-table /deep/ tr {
+ background-color: transparent;
+}
+</style>
--
Gitblit v1.9.3