From abef413ca08628702b291889cef15d17b0a74aa6 Mon Sep 17 00:00:00 2001
From: suerprisePlus <15810472099@163.com>
Date: 星期五, 29 十一月 2024 09:20:53 +0800
Subject: [PATCH] 前端页面优化，角色权限页面添加
---
se-ui/src/views/system/user/profile/userInfo.vue | 4
se-ui/src/views/system/role/index.vue | 2
se-ui/src/views/system/rolePower/index.vue | 359 +++++++++++++++++++++++++++++++++++++++++++++++++++
3 files changed, 362 insertions(+), 3 deletions(-)
diff --git a/se-ui/src/views/system/role/index.vue b/se-ui/src/views/system/role/index.vue
index ca99356..4bab496 100644
--- a/se-ui/src/views/system/role/index.vue
+++ b/se-ui/src/views/system/role/index.vue
@@ -206,7 +206,7 @@
>{{dict.label}}</el-radio>
</el-radio-group>
</el-form-item>
- <el-form-item label="鑿滃崟鏉冮檺">
+ <el-form-item label="鑿滃崟鏉冮檺" v-show="false">
<el-checkbox
v-model="menuExpand"
@change="handleCheckedTreeExpand($event, 'menu')"
diff --git a/se-ui/src/views/system/rolePower/index.vue b/se-ui/src/views/system/rolePower/index.vue
new file mode 100644
index 0000000..d8b4eda
--- /dev/null
+++ b/se-ui/src/views/system/rolePower/index.vue
@@ -0,0 +1,359 @@
+<template>
+ <div class="app-container">
+ <div>
+ <el-form :inline="true" :model="formInline" class="demo-form-inline">
+ <el-form-item label="鐢ㄦ埛鍚嶇О锛�">
+ <el-input v-model="formInline.roleName" ize="mini" placeholder="璇疯緭鍏ョ敤鎴峰悕绉�"></el-input>
+ </el-form-item>
+ <el-form-item>
+ <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">鎼滅储</el-button>
+ <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">閲嶇疆</el-button>
+ </el-form-item>
+ </el-form>
+ </div>
+
+ <el-divider></el-divider>
+ <div class="roleCotent">
+ <div class="roleLeft roleBox">
+ <div class="roleTable">
+ <el-table ref="roleTable" highlight-current-row :data="tableData" @row-click="handleRoleClick"
+ style="width: 100%" height="calc(100% - 1px)">
+ <el-table-column label="瑙掕壊缂栧彿" prop="roleId" align="center" />
+ <el-table-column label="瑙掕壊鍚嶇О" prop="roleName" align="center" />
+ <el-table-column label="鏉冮檺瀛楃" prop="roleKey" align="center" />
+ <el-table-column label="鏄剧ず椤哄簭" prop="roleSort" align="center" />
+ <el-table-column label="鍒涘缓鏃堕棿" align="center" prop="createTime">
+ <template slot-scope="scope">
+ <span>{{ parseTime(scope.row.createTime) }}</span>
+ </template>
+ </el-table-column>
+ </el-table>
+ </div>
+ <div class="rolePage">
+ <pagination v-show="formInline.total > 0" :total="formInline.total" :page.sync="formInline.pageNum"
+ :limit.sync="formInline.pageSize" @pagination="getList" />
+ </div>
+
+ </div>
+ <div class="roleRight roleBox">
+
+ <el-form>
+ <el-form-item label="鑿滃崟鏉冮檺" v-show="false">
+ <el-checkbox v-model="menuExpand"
+ @change="handleCheckedTreeExpand($event, 'menu')">灞曞紑/鎶樺彔</el-checkbox>
+ <el-checkbox v-model="menuNodeAll"
+ @change="handleCheckedTreeNodeAll($event, 'menu')">鍏ㄩ��/鍏ㄤ笉閫�</el-checkbox>
+ <el-checkbox v-model="form.menuCheckStrictly"
+ @change="handleCheckedTreeConnect($event, 'menu')">鐖跺瓙鑱斿姩</el-checkbox>
+ </el-form-item>
+ </el-form>
+ <div class="roleTreeBox">
+ <div class="treeBox">
+ <el-tree ref="powerTree" class="tree-border" :data="menuOptions" show-checkbox node-key="id"
+ :check-strictly="!form.menuCheckStrictly" empty-text="鍔犺浇涓紝璇风◢鍊�"
+ :default-expanded-keys="expanded" :props="defaultProps"></el-tree>
+ </div>
+ </div>
+ <div class="roeleSubmit">
+ <el-button type="primary" icon="el-icon-upload2" size="mini" @click="handleUpload">鎻愪氦</el-button>
+ </div>
+
+ </div>
+ </div>
+
+ </div>
+</template>
+
+<script>
+import {
+ addRole,
+ listRole,
+ getRole,
+ updateRole,
+} from "@/api/system/role";
+import {
+ treeselect as menuTreeselect,
+ roleMenuTreeselect
+} from "@/api/system/menu"
+export default {
+ data() {
+ return {
+ formInline: {
+ roleName: '',
+ total: 0,
+ pageNum: 1,
+ pageSize: 10,
+ },
+ tableData: [],
+ checkRow: null,
+ form: {},
+ menuOptions: [],
+ checkedKeys: [],
+ defaultProps: {
+ children: "children",
+ label: "label"
+ },
+ menuExpand: false,
+ menuNodeAll: false,
+ menuIds: [],
+ expanded: []
+ }
+ },
+ mounted() {
+ this.resetQuery();
+ },
+ methods: {
+ // 鎼滅储浜嬩欢
+ handleQuery() {
+ this.formInline.pageNum = 1
+ this.getRoleData();
+ },
+ // 閲嶇疆浜嬩欢
+ resetQuery() {
+ this.formInline = {
+ roleName: '',
+ total: 0,
+ pageNum: 1,
+ pageSize: 10,
+ }
+ this.$nextTick(() => {
+ this.getRoleData();
+ })
+ },
+ // 鍒嗛〉鐐瑰嚮浜嬩欢
+ getList() {
+ this.getRoleData();
+ },
+ // 琛ㄦ牸琛岀偣鍑讳簨浠�
+ handleRoleClick(row, column, event) {
+ this.checkRow = row;
+ this.getTreePower();
+ },
+
+ // 鑾峰彇瑙掕壊鍒楄〃鏁版嵁
+ getRoleData() {
+ listRole(this.formInline).then(response => {
+ if (response.code != 200) {
+ return this.$message({
+ message: '瑙掕壊鍒楄〃鏌ヨ澶辫触',
+ type: 'warning'
+ });
+ };
+ this.formInline.total = response.total;
+ var table_data = response.rows.filter(item => {
+ if (item.roleId != 1) {
+ return item
+ }
+ })
+ this.tableData = table_data;
+ this.checkRow = this.tableData[0];
+ this.getTreePower();
+ this.$refs.roleTable.setCurrentRow(this.checkRow);
+
+ })
+ },
+ // 鑾峰彇鑿滃崟鏉冮檺
+ getTreePower() {
+ this.menuExpand = false;
+ this.menuNodeAll = false;
+ this.menuOptions = [];
+ this.checkedKeys = [];
+ this.menuIds = [];
+ roleMenuTreeselect(this.checkRow.roleId).then(response => {
+ if (response.code != 200) {
+ return this.$message({
+ message: '鑿滃崟鍒楄〃鏌ヨ澶辫触',
+ type: 'warning'
+ });
+ }
+ this.menuOptions = response.menus;
+ this.menuIds = this.getMenuIds(this.menuOptions, [])
+ this.checkedKeys = response.checkedKeys;
+
+ this.expanded= [this.menuOptions[0].id]
+ this.getRole()
+ });
+
+ },
+ getMenuIds(node, ids) {
+ for (var i in node) {
+ const child = node[i];
+ if (child.children) {
+ this.getMenuIds(child.children, ids)
+ } else {
+ ids.push(node[i].id)
+ }
+ }
+ return ids;
+
+ },
+ // 鏍规嵁id 鏌ヨ瑙掕壊
+ getRole() {
+ getRole(this.checkRow.roleId).then(response => {
+ if (response.code != 200) {
+ return this.$message({
+ message: '瑙掕壊淇℃伅鑾峰彇澶辫触',
+ type: 'warning'
+ });
+ }
+ this.form = response.data
+ let checkedKeys = this.checkedKeys;
+ checkedKeys.forEach(v => {
+ this.$nextTick(() => {
+ this.$refs.powerTree.setChecked(v, true, false);
+ });
+ });
+
+
+
+ })
+ },
+ isElTreeAllSelected(tree) {
+ // 鍋囪tree鏄痚l-tree鐨勫疄渚嬶紝鍙互閫氳繃Vue瀹炰緥璁块棶鍒�
+ const getAllNodes = (tree) => {
+ let allNodes = [];
+ const traverse = (node) => {
+ allNodes.push(node);
+
+ node.childNodes.forEach((child) => traverse(child));
+ };
+ traverse(tree);
+ return allNodes;
+ };
+
+ const allNodes = getAllNodes(tree); // 鑾峰彇鎵�鏈夎妭鐐�
+ return allNodes.every(node => node.checked); // 妫�鏌ユ瘡涓妭鐐规槸鍚﹂�変腑
+ },
+ // 鏍戞潈闄愶紙鍏ㄩ��/鍏ㄤ笉閫夛級
+ handleCheckedTreeNodeAll(value, type) {
+ if (type == "menu") {
+ this.$refs.powerTree.setCheckedNodes(value ? this.menuOptions : []);
+ } else if (type == "dept") {
+ this.$refs.dept.setCheckedNodes(value ? this.deptOptions : []);
+ }
+ },
+ // 鏍戞潈闄愶紙灞曞紑/鎶樺彔锛�
+ handleCheckedTreeExpand(value, type) {
+ if (type == "menu") {
+ let treeList = this.menuOptions;
+ for (let i = 0; i < treeList.length; i++) {
+ this.$refs.powerTree.store.nodesMap[treeList[i].id].expanded = value;
+ }
+ } else if (type == "dept") {
+ let treeList = this.deptOptions;
+ for (let i = 0; i < treeList.length; i++) {
+ this.$refs.dept.store.nodesMap[treeList[i].id].expanded = value;
+ }
+ }
+ },
+ // 鎵�鏈夎彍鍗曡妭鐐规暟鎹�
+ getMenuAllCheckedKeys() {
+ // 鐩墠琚�変腑鐨勮彍鍗曡妭鐐�
+ let checkedKeys = this.$refs.powerTree.getCheckedKeys();
+ // 鍗婇�変腑鐨勮彍鍗曡妭鐐�
+ let halfCheckedKeys = this.$refs.powerTree.getHalfCheckedKeys();
+ checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
+ return checkedKeys;
+ },
+ //淇敼鎻愪氦
+ handleUpload() {
+ if (this.form.roleId != undefined) {
+ this.form.menuIds = this.getMenuAllCheckedKeys();
+ updateRole(this.form).then(response => {
+ this.$modal.msgSuccess("淇敼鎴愬姛");
+ this.getTreePower();
+ });
+ } else {
+ this.form.menuIds = this.getMenuAllCheckedKeys();
+ addRole(this.form).then(response => {
+ this.$modal.msgSuccess("鏂板鎴愬姛");
+
+ this.getTreePower();
+ });
+ }
+ }
+
+ }
+}
+</script>
+
+<style lang="scss" scoped>
+.app-container {
+ height: calc(100vh - 84px);
+ width: 100%;
+ position: absolute;
+ display: flex;
+ flex-direction: column;
+
+ .roleCotent {
+ flex: 1;
+ display: flex;
+ }
+
+ .roleRight {
+ flex: 1;
+ padding: 10px;
+ display: flex;
+ flex-direction: column;
+
+ .roeleSubmit {
+ margin: 10px 0px;
+ width: 100%;
+ display: flex;
+ justify-content: end;
+ }
+
+ .roleTreeBox {
+ flex: 1;
+ position: relative;
+
+
+ .treeBox {
+ // padding: 10px;
+ overflow: auto;
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ // border: 1px solid #e5e6e7;
+ // background: #FFFFFF none;
+ border-radius: 4px;
+
+ ::v-deep .tree-border {
+ margin: 0;
+ border: transparent;
+ }
+ }
+ }
+ }
+
+ .roleLeft {
+ width: 60%;
+ height: 100%;
+ margin-right: 1%;
+ position: relative;
+ display: flex;
+ flex-direction: column;
+
+ .roleTable {
+ flex: 1;
+ }
+
+ .rolePage {
+ margin: 10px 20px 20px 0px;
+ }
+ }
+
+ .roleBox {
+ border: 1px solid #DCDFE6;
+ box-shadow: 0px 0px 4px 0px rgba(14, 22, 32, 0.2);
+ border-radius: 10px;
+ }
+
+
+
+ ::v-deep .el-divider--horizontal {
+ margin: 0px 0px 22px 0px;
+
+ }
+}
+</style>
\ No newline at end of file
diff --git a/se-ui/src/views/system/user/profile/userInfo.vue b/se-ui/src/views/system/user/profile/userInfo.vue
index c970dc9..e3bffca 100644
--- a/se-ui/src/views/system/user/profile/userInfo.vue
+++ b/se-ui/src/views/system/user/profile/userInfo.vue
@@ -1,6 +1,6 @@
<template>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
- <el-form-item label="鐢ㄦ埛鏄电О" prop="nickName">
+ <el-form-item label="鐢ㄦ埛濮撳悕" prop="nickName">
<el-input v-model="form.nickName" maxlength="30" />
</el-form-item>
<el-form-item label="鎵嬫満鍙风爜" prop="phonenumber">
@@ -37,7 +37,7 @@
// 琛ㄥ崟鏍￠獙
rules: {
nickName: [
- { required: true, message: "鐢ㄦ埛鏄电О涓嶈兘涓虹┖", trigger: "blur" }
+ { required: true, message: "鐢ㄦ埛濮撳悕涓嶈兘涓虹┖", trigger: "blur" }
],
email: [
{ required: true, message: "閭鍦板潃涓嶈兘涓虹┖", trigger: "blur" },
--
Gitblit v1.9.3