From 491f9c9d598158e40690400d85cb4d99738a59ea Mon Sep 17 00:00:00 2001
From: cwchen <1048842385@qq.com>
Date: Tue, 27 Feb 2024 17:52:21 +0800
Subject: [PATCH] =?UTF-8?q?=E8=8F=9C=E5=8D=95=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ah-jjzhgd-web/src/api/menu.js                 |  43 +++++
 ah-jjzhgd-web/src/api/select.js               |   5 +-
 ah-jjzhgd-web/src/views/system/menu/index.vue | 180 ++++++++----------
 .../src/views/system/roles/index.vue          |   6 +-
 ah-jjzhgd-web/src/views/system/user/index.vue |   2 +-
 5 files changed, 130 insertions(+), 106 deletions(-)
 create mode 100644 ah-jjzhgd-web/src/api/menu.js

diff --git a/ah-jjzhgd-web/src/api/menu.js b/ah-jjzhgd-web/src/api/menu.js
new file mode 100644
index 0000000..2e18d4c
--- /dev/null
+++ b/ah-jjzhgd-web/src/api/menu.js
@@ -0,0 +1,43 @@
+import request from '@/utils/request'
+
+
+/** 获取菜单列表*/
+export function fetchList(query) {
+  return request({
+    url: '/system/sys/menu/getMenuList',
+    method: 'get',
+    params: query
+  })
+}
+/** 新增菜单*/
+export function addMenu(data) {
+  return request({
+    url: '/system/sys/menu/addMenu',
+    method: 'post',
+    data
+  })
+}
+/** 获取菜单*/
+export function getMenuById(query) {
+  return request({
+    url: '/system/sys/menu/getMenuById',
+    method: 'get',
+    params: query
+  })
+}
+/** 修改菜单*/
+export function editMenu(data) {
+  return request({
+    url: '/system/sys/menu/editMenu',
+    method: 'post',
+    data
+  })
+}
+/** 删除菜单*/
+export function deleteMenu(query) {
+  return request({
+    url: '/system/sys/menu/delMenu',
+    method: 'post',
+    params: query
+  })
+}
diff --git a/ah-jjzhgd-web/src/api/select.js b/ah-jjzhgd-web/src/api/select.js
index 7c33ca7..58a6438 100644
--- a/ah-jjzhgd-web/src/api/select.js
+++ b/ah-jjzhgd-web/src/api/select.js
@@ -16,9 +16,10 @@ export function fetchRoleList() {
 }
 
 /** 菜单查询 */
-export function fetchMenuList() {
+export function fetchMenuList(query) {
   return request({
     url: '/system/sys/select/getMenuTree',
-    method: 'post'
+    method: 'post',
+    params: query
   })
 }
\ No newline at end of file
diff --git a/ah-jjzhgd-web/src/views/system/menu/index.vue b/ah-jjzhgd-web/src/views/system/menu/index.vue
index ce4d55a..496a62e 100644
--- a/ah-jjzhgd-web/src/views/system/menu/index.vue
+++ b/ah-jjzhgd-web/src/views/system/menu/index.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="app-container">
         <div class="filter-container">
-            <el-input v-model="listQuery.roleName" placeholder="角色名称" style="width: 200px" class="filter-item"
+            <el-input v-model="listQuery.menuName" placeholder="菜单名称" style="width: 200px" class="filter-item"
                 :maxlength="30" @keyup.enter.native="handleFilter" />
             <el-button v-waves style="margin-left: 40px" class="filter-item" type="primary" icon="el-icon-search"
                 @click="handleFilter">
@@ -11,30 +11,37 @@
                 @click="handleCreate">
                 新增
             </el-button>
+            <el-button class="filter-item" icon="el-icon-plus" @click="toggleExpandAll">展开/折叠</el-button>
         </div>
 
-        <el-table :key="tableKey" v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%"
-            :max-height="tableHeight" :default-expand-all="isExpandAll"
-            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
-            <el-table-column key="menuName" prop="menuName" label="菜单名称" min-width="40px" align="center" />
-            <el-table-column key="menuLogo" prop="menuLogo" label="图标" min-width="40px" align="center" />
-            <el-table-column key="menuSort" prop="menuSort" label="排序" min-width="40px" align="center" />
-            <el-table-column key="menuUrl" prop="menuUrl" label="菜单路径" min-width="40px" align="center" />
+        <el-table v-if="refreshTable" row-key="menuId" v-loading="listLoading" :data="list" border style="width: 100%"
+            :default-expand-all="isExpandAll" :tree-props="defaulatTreeTableProps">
+            <el-table-column key="menuName" prop="menuName" label="菜单名称" />
+            <el-table-column prop="menuLogo" label="图标" align="center">
+                <template slot-scope="scope">
+                    <svg-icon :icon-class="!scope.row.menuLogo ? '' : scope.row.menuLogo" />
+                </template>
+            </el-table-column>
+            <el-table-column key="menuType" prop="menuType" label="菜单类型" align="center">
+                <template slot-scope="{row}">
+                    <span v-if="row.menuType === 0">目录</span>
+                    <span v-if="row.menuType === 1">菜单</span>
+                    <span v-if="row.menuType === 2">按钮</span>
+                </template>
+            </el-table-column>
+            <el-table-column key="menuSort" prop="menuSort" label="排序" align="center" />
+            <el-table-column key="menuUrl" prop="menuUrl" label="菜单路径" align="center" />
+            <el-table-column key="menuAuth" prop="menuAuth" label="权限" align="center" />
             <el-table-column key="createTime" prop="createTime" label="创建时间" align="center" :show-overflow-tooltip="true" />
-            <el-table-column label="操作" align="center" width="300" class-name="small-padding fixed-width">
+            <el-table-column label="操作" align="center" width="200" class-name="small-padding fixed-width">
                 <template slot-scope="{ row, $index }">
                     <el-button type="primary" size="mini" plain icon="el-icon-edit" title="修改" @click="handleUpdate(row)" />
                     <el-button v-if="row.status != 'deleted'" plain size="mini" type="danger" icon="el-icon-delete"
                         title="删除" @click="handleDelete(row, $index)" />
-                    <el-button size="mini" type="warning" plain icon="el-icon-user" title="授权"
-                        @click="addMenu(row, $index)" />
                 </template>
             </el-table-column>
         </el-table>
 
-        <pagination v-show="total > 0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize"
-            @pagination="getList" />
-
         <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" width="600px">
             <el-form ref="dataForm" :rules="rules" :model="temp" label-position="right" label-width="80px"
                 style="width: 400px; margin-left: 50px">
@@ -59,12 +66,12 @@
                 <el-form-item label="菜单名称" prop="menuName">
                     <el-input v-model="temp.menuName" placeholder="菜单名称" :maxlength="50" />
                 </el-form-item>
-                <el-form-item label="权限" prop="menuAuth">
-                    <el-input v-model="temp.menuAuth" placeholder="权限" :maxlength="50" />
-                </el-form-item>
                 <el-form-item label="菜单地址" prop="menuUrl" v-if="temp.menuType !== '2'">
                     <el-input v-model="temp.menuUrl" placeholder="菜单地址" :maxlength="100" />
                 </el-form-item>
+                <el-form-item label="权限" prop="menuAuth">
+                    <el-input v-model="temp.menuAuth" placeholder="权限" :maxlength="50" />
+                </el-form-item>
                 <el-form-item label="排序" prop="menuSort">
                     <el-input-number v-model="temp.menuSort" :min="1" :max="1000"
                         controls-position="right"></el-input-number>
@@ -81,9 +88,8 @@
 </template>
   
 <script>
-import { fetchList, addRole, getRoleById, editRole, deleteRole, authMenu, getAuthMenus } from '@/api/role'
+import { fetchList, addMenu, getMenuById, editMenu, deleteMenu } from '@/api/menu'
 import { fetchMenuList } from '@/api/select'
-import { validSort } from '@/utils/validate'
 import waves from '@/directive/waves'
 import { parseTime } from '@/utils'
 import Pagination from '@/components/Pagination'
@@ -112,35 +118,29 @@ export default {
         return {
             // 是否展开，默认全部折叠
             isExpandAll: false,
+            // 重新渲染表格状态
+            refreshTable: true,
             menuTypeArr: menuTypeArr,
             menuOptions: [],
-            tableKey: 0,
-            list: null,
-            total: 0,
+            defaulatTreeTableProps: { children: 'children', hasChildren: 'hasChildren' },
+            list: [],
             listLoading: true,
-            listQuery: {
-                pageNum: 1,
-                pageSize: 10
-            },
-            tableHeight: 650,
+            listQuery: {},
             showReviewer: false,
-            roleNameParam: null,
+            menuNameParam: null,
             temp: {
-                roleId: null,
-                roleName: '',
-                roleSort: '',
+                menuId: null,
+                menuType: '',
+                icon: undefined,
+                menuName: '',
                 menuType: '0',
                 menuSort: 1,
-                icon: undefined,
                 menuAuth: '',
-                parentId: null
-            },
-            pwdForm: {
-                userId: null,
-                password: ''
+                menuUrl: '',
+                parentId: null,
+                menuLogo: null
             },
             dialogFormVisible: false,
-            dialogFormVisible2: false,
             dialogStatus: '',
             downloadLoading: false,
             textMap: {
@@ -152,6 +152,9 @@ export default {
                 menuName: [
                     { required: true, message: '菜单名称不能为空', trigger: 'blur' }
                 ],
+                menuType: [
+                    { required: true, message: '请选择菜单类型', trigger: 'change' }
+                ],
                 menuUrl: [
                     { required: true, message: '菜单地址不能为空', trigger: 'blur' }
                 ],
@@ -169,40 +172,60 @@ export default {
         // 选择图标
         selected(name) {
             this.temp.icon = name;
+            this.temp.menuLogo = name;
         },
-        getMenuList() {
-            fetchMenuList().then((response) => {
+        /** 展开/折叠操作 */
+        toggleExpandAll() {
+            this.refreshTable = false;
+            this.isExpandAll = !this.isExpandAll;
+            this.$nextTick(() => {
+                this.refreshTable = true;
+            });
+        },
+        getMenuList(params) {
+            fetchMenuList(params).then((response) => {
+                console.log(response.data);
+                this.menuOptions = this.menuOptions.slice(0,0)
                 this.menuOptions = response.data
             })
         },
         getList() {
             this.listLoading = true
             fetchList(this.listQuery).then((response) => {
-                this.list = response.rows
-                this.total = response.total
+                this.list = response.data
                 setTimeout(() => {
                     this.listLoading = false
                 }, 1 * 500)
             })
         },
+        // 刷新页面数据
+        reloadData() {
+            this.getList();
+            this.getMenuList();
+        },
         handleFilter() {
-            this.listQuery.pageNum = 1
             this.getList()
         },
         handleCreate() {
+            this.getMenuList()
             this.dialogStatus = 'create'
             this.dialogFormVisible = true
+            console.log(this.temp);
             this.$nextTick(() => {
-                this.temp.roleId = null;
                 this.$refs['dataForm'].resetFields()
+                this.temp.menuId = null;
+                this.temp.icon = undefined;
+                this.temp.menuLogo = null;
+                this.temp.menuUrl = null;
             })
         },
         createData() {
             this.$refs['dataForm'].validate((valid) => {
                 if (valid) {
-                    this.temp.flag = false;
+                    this.temp.flag = false
                     console.log(this.temp);
-                    addRole(this.temp).then((response) => {
+                    addMenu(this.temp).then((response) => {
+                        this.temp.parentId = null;
                         this.dialogFormVisible = false
                         this.$message({
                             showClose: true,
@@ -210,29 +233,31 @@ export default {
                             type: 'success',
                             duration: 2000
                         })
-                        this.getList()
+                        this.reloadData();
                     })
                 }
             })
         },
         handleUpdate(row) {
-            getRoleById({ roleId: row.roleId }).then((response) => {
+            this.getMenuList({menuId:row.menuId})
+            getMenuById({ menuId: row.menuId }).then((response) => {
                 this.temp = Object.assign({}, response.data)
-                this.roleNameParam = response.data.roleName
+                this.temp.icon = !response.data.menuLogo ? undefined : response.data.menuLogo
+                this.temp.menuType = response.data.menuType + ''
+                this.menuNameParam = response.data.menuName
             })
             this.dialogStatus = 'update'
             this.dialogFormVisible = true
             this.$nextTick(() => {
-                this.temp.roleId = null;
+                this.temp.menuId = null;
                 this.$refs['dataForm'].resetFields()
             })
         },
         updateData() {
             this.$refs['dataForm'].validate((valid) => {
                 if (valid) {
-                    this.temp.flag = this.roleNameParam === this.temp.roleName ? false : true
-                    console.log(this.temp);
-                    editRole(this.temp).then((response) => {
+                    this.temp.flag = this.menuNameParam === this.temp.menuName ? false : true
+                    editMenu(this.temp).then((response) => {
                         this.dialogFormVisible = false
                         this.$message({
                             showClose: true,
@@ -240,7 +265,7 @@ export default {
                             type: 'success',
                             duration: 2000
                         })
-                        this.getList()
+                        this.reloadData()
                     })
                 }
             })
@@ -251,14 +276,14 @@ export default {
                 title: '操作提示',
                 beforeClose: async (action, instance, done) => {
                     if (action === 'confirm') {
-                        deleteRole({ roleId: row.roleId }).then((response) => {
+                        deleteMenu({ menuId: row.menuId }).then((response) => {
                             this.$message({
                                 showClose: true,
                                 message: response.msg,
                                 type: 'success',
                                 duration: 2000
                             })
-                            this.getList()
+                            this.reloadData()
                             done()
                         })
                     } else {
@@ -267,47 +292,6 @@ export default {
                 }
             })
         },
-        addMenu(row, index) {
-            this.getAuthMenus({
-                roleId: row.roleId
-            });
-            this.temp.roleId = row.roleId
-            this.dialogFormVisible2 = true
-            // 清空树
-            this.$refs.menuTree.setCheckedKeys([]);
-        },
-        addMenuData() {
-            let treeNodeData = this.$refs.menuTree.getCheckedNodes();
-            treeNodeData = treeNodeData.filter((item) => {
-                return item.level !== '2'
-            })
-            if (treeNodeData.length === 0) {
-                this.$message({
-                    showClose: true,
-                    message: "未选择授权数据",
-                    type: 'warning',
-                    duration: 2000
-                })
-                return;
-            }
-            let menuIdsArr = [];
-            treeNodeData.forEach(function (item, index) {
-                menuIdsArr.push(item.id);
-            });
-            let data = {
-                menuIds: menuIdsArr,
-                roleId: this.temp.roleId
-            }
-            authMenu(data).then((response) => {
-                this.dialogFormVisible2 = false
-                this.$message({
-                    showClose: true,
-                    message: response.msg,
-                    type: 'success',
-                    duration: 2000
-                })
-            })
-        },
         formatJson(filterVal) {
             return this.list.map((v) =>
                 filterVal.map((j) => {
@@ -324,6 +308,6 @@ export default {
 </script>
 <style scoped>
 .el-input-number {
-  width: 320px;
+    width: 320px;
 }
 </style>
\ No newline at end of file
diff --git a/ah-jjzhgd-web/src/views/system/roles/index.vue b/ah-jjzhgd-web/src/views/system/roles/index.vue
index ed68789..7875ddd 100644
--- a/ah-jjzhgd-web/src/views/system/roles/index.vue
+++ b/ah-jjzhgd-web/src/views/system/roles/index.vue
@@ -94,7 +94,7 @@ export default {
         label: 'label'
       },
       tableKey: 0,
-      list: null,
+      list: [],
       total: 0,
       listLoading: true,
       listQuery: {
@@ -109,10 +109,6 @@ export default {
         roleName: '',
         roleSort: '',
       },
-      pwdForm: {
-        userId: null,
-        password: ''
-      },
       dialogFormVisible: false,
       dialogFormVisible2: false,
       dialogStatus: '',
diff --git a/ah-jjzhgd-web/src/views/system/user/index.vue b/ah-jjzhgd-web/src/views/system/user/index.vue
index 20b0888..570531e 100644
--- a/ah-jjzhgd-web/src/views/system/user/index.vue
+++ b/ah-jjzhgd-web/src/views/system/user/index.vue
@@ -177,7 +177,7 @@ export default {
       roleArr: [],
       accountStatusArr: accountStatusArr,
       loginType: [],
-      list: null,
+      list: [],
       total: 0,
       listLoading: true,
       listQuery: {