From cfcd9a35c74ce88da3647a0be3f1459fe5086ed1 Mon Sep 17 00:00:00 2001
From: lxl <lixuliang_hd@126.com>
Date: 星期三, 19 十月 2022 14:46:59 +0800
Subject: [PATCH] 控制
---
src/views/AuthorizationManagement/menuRoleAuthorization.vue | 446 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 446 insertions(+), 0 deletions(-)
diff --git a/src/views/AuthorizationManagement/menuRoleAuthorization.vue b/src/views/AuthorizationManagement/menuRoleAuthorization.vue
new file mode 100644
index 0000000..ff0ab16
--- /dev/null
+++ b/src/views/AuthorizationManagement/menuRoleAuthorization.vue
@@ -0,0 +1,446 @@
+<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
+ align="center"
+ type="index"
+ :label="$t('dataManage.styleObj.index')"
+ />
+ <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
+ align="center"
+ type="index"
+ :label="$t('dataManage.styleObj.index')"
+ />
+ <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 {
+ selectMenuRecursive,
+ select_menuAuth_ByPageAndCount,
+ 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 selectMenuRecursive({ name: '绠￠亾鍩虹澶ф暟鎹钩鍙�' });
+ 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>
--
Gitblit v1.9.3