From 1db16082bedcff89c31a4e7fe182db9106102c7d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=8D=E5=81=9A=E7=A0=81=E5=86=9C?= <599854767@qq.com>
Date: Sun, 24 Sep 2023 16:50:57 +0800
Subject: [PATCH] =?UTF-8?q?:zap:=E4=BC=98=E5=8C=96=E8=8F=9C=E5=8D=95?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Controllers/System/SysMenuController.cs   |  16 +-
 ZR.Vue/src/views/system/menu/index.vue        | 278 +++++++++---------
 2 files changed, 151 insertions(+), 143 deletions(-)

diff --git a/ZR.Admin.WebApi/Controllers/System/SysMenuController.cs b/ZR.Admin.WebApi/Controllers/System/SysMenuController.cs
index a6cff1f..13e9b84 100644
--- a/ZR.Admin.WebApi/Controllers/System/SysMenuController.cs
+++ b/ZR.Admin.WebApi/Controllers/System/SysMenuController.cs
@@ -28,16 +28,28 @@ namespace ZR.Admin.WebApi.Controllers.System
             this.sysRoleMenuService = sysRoleMenuService;
         }
 
+        /// <summary>
+        /// 获取菜单树列表
+        /// </summary>
+        /// <returns></returns>
+        [ActionPermissionFilter(Permission = "system:menu:list")]
+        [HttpGet("treelist")]
+        public IActionResult TreeMenuList([FromQuery] MenuQueryDto menu)
+        {
+            long userId = HttpContext.GetUId();
+            return SUCCESS(sysMenuService.SelectTreeMenuList(menu, userId), "yyyy-MM-dd HH:mm:ss");
+        }
+
         /// <summary>
         /// 获取菜单列表
         /// </summary>
         /// <returns></returns>
         [ActionPermissionFilter(Permission = "system:menu:list")]
         [HttpGet("list")]
-        public IActionResult TreeMenuList([FromQuery] MenuQueryDto menu)
+        public IActionResult MenuList([FromQuery] MenuQueryDto menu)
         {
             long userId = HttpContext.GetUId();
-            return SUCCESS(sysMenuService.SelectTreeMenuList(menu, userId), "yyyy-MM-dd HH:mm:ss");
+            return SUCCESS(sysMenuService.SelectMenuList(menu, userId), "yyyy-MM-dd HH:mm:ss");
         }
 
         /// <summary>
diff --git a/ZR.Vue/src/views/system/menu/index.vue b/ZR.Vue/src/views/system/menu/index.vue
index f4a18c7..b96c017 100644
--- a/ZR.Vue/src/views/system/menu/index.vue
+++ b/ZR.Vue/src/views/system/menu/index.vue
@@ -25,13 +25,15 @@
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
-    <el-table v-if="refreshTable" v-loading="loading" :data="menuList" :default-expand-all="isExpandAll"
+    <el-table
+      v-if="refreshTable"
+      v-loading="loading"
+      :data="menuList"
+      :default-expand-all="isExpandAll"
       row-key="menuId"
-      node-key="menuId"
       border
-      lazy
-      :load="loadMenu"
-      :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
+      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+    >
       <el-table-column prop="menuName" label="菜单名称" :show-overflow-tooltip="true" width="160"></el-table-column>
       <el-table-column prop="icon" label="图标" align="center" width="80">
         <template slot-scope="scope">
@@ -48,9 +50,14 @@
       </el-table-column>
       <el-table-column prop="orderNum" label="排序" width="90" align="center">
         <template slot-scope="scope">
-          <span v-show="editIndex != scope.$index" @click="editCurrRow(scope.$index,'rowkeY')">{{scope.row.orderNum}}</span>
-          <el-input :id="scope.$index+'rowkeY'" size="mini" v-show="(editIndex == scope.$index)" v-model="scope.row.orderNum"
-            @blur="handleChangeSort(scope.row)"></el-input>
+          <span v-show="editIndex != scope.$index" @click="editCurrRow(scope.$index, 'rowkeY')">{{ scope.row.orderNum }}</span>
+          <el-input
+            :id="scope.$index + 'rowkeY'"
+            size="mini"
+            v-show="editIndex == scope.$index"
+            v-model="scope.row.orderNum"
+            @blur="handleChangeSort(scope.row)"
+          ></el-input>
         </template>
       </el-table-column>
       <el-table-column prop="perms" label="权限标识" :show-overflow-tooltip="true"></el-table-column>
@@ -70,7 +77,9 @@
         <template slot-scope="scope">
           <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:menu:edit']">修改</el-button>
           <el-button size="mini" type="text" icon="el-icon-plus" @click="handleAdd(scope.row)" v-hasPermi="['system:menu:add']">新增</el-button>
-          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['system:menu:remove']">删除</el-button>
+          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['system:menu:remove']"
+            >删除</el-button
+          >
         </template>
       </el-table-column>
     </el-table>
@@ -81,8 +90,14 @@
         <el-row>
           <el-col :lg="24">
             <el-form-item label="上级菜单">
-              <treeselect v-model="form.parentId" :options="menuOptions" :normalizer="normalizer" :show-count="true" @select="handleTreeSelect"
-                placeholder="选择上级菜单" />
+              <treeselect
+                v-model="form.parentId"
+                :options="menuOptions"
+                :normalizer="normalizer"
+                :show-count="true"
+                @select="handleTreeSelect"
+                placeholder="选择上级菜单"
+              />
             </el-form-item>
           </el-col>
           <el-col :lg="24">
@@ -109,7 +124,7 @@
               <el-popover placement="bottom-start" width="460" trigger="click" @show="$refs['iconSelect'].reset()">
                 <IconSelect ref="iconSelect" @selected="selected" />
                 <el-input slot="reference" v-model="form.icon" placeholder="点击选择图标" clearable="" readonly>
-                  <svg-icon v-if="form.icon" slot="prefix" :icon-class="form.icon" class="el-input__icon" style="height: 32px;width: 16px;" />
+                  <svg-icon v-if="form.icon" slot="prefix" :icon-class="form.icon" class="el-input__icon" style="height: 32px; width: 16px" />
                   <i v-else slot="prefix" class="el-icon-search el-input__icon"></i>
                 </el-input>
               </el-popover>
@@ -159,7 +174,7 @@
                 显示状态
               </span>
               <el-radio-group v-model="form.visible">
-                <el-radio v-for="dict in visibleOptions" :key="dict.dictValue" :label="dict.dictValue">{{dict.dictLabel}}</el-radio>
+                <el-radio v-for="dict in visibleOptions" :key="dict.dictValue" :label="dict.dictValue">{{ dict.dictLabel }}</el-radio>
               </el-radio-group>
             </el-form-item>
           </el-col>
@@ -186,7 +201,7 @@
                 菜单状态
               </span>
               <el-radio-group v-model="form.status">
-                <el-radio v-for="dict in statusOptions" :key="dict.dictValue" :label="dict.dictValue">{{dict.dictLabel}}</el-radio>
+                <el-radio v-for="dict in statusOptions" :key="dict.dictValue" :label="dict.dictValue">{{ dict.dictLabel }}</el-radio>
               </el-radio-group>
             </el-form-item>
           </el-col>
@@ -215,21 +230,13 @@
 </template>
 
 <script>
-import {
-  listMenu,
-  getMenu,
-  delMenu,
-  addMenu,
-  changeMenuSort,
-  updateMenu,
-  listMenuById
-} from "@/api/system/menu";
-import Treeselect from "@riophae/vue-treeselect";
-import "@riophae/vue-treeselect/dist/vue-treeselect.css";
-import IconSelect from "@/components/IconSelect";
+import { listMenu, getMenu, delMenu, addMenu, changeMenuSort, updateMenu, listMenuById } from '@/api/system/menu'
+import Treeselect from '@riophae/vue-treeselect'
+import '@riophae/vue-treeselect/dist/vue-treeselect.css'
+import IconSelect from '@/components/IconSelect'
 
 export default {
-  name: "menu1",
+  name: 'menu1',
   components: { Treeselect, IconSelect },
   data() {
     return {
@@ -242,7 +249,7 @@ export default {
       // 菜单树选项
       menuOptions: [],
       // 弹出层标题
-      title: "",
+      title: '',
       // 是否显示弹出层
       open: false,
       // 是否展开，默认全部折叠
@@ -267,230 +274,219 @@ export default {
       form: {},
       // 表单校验
       rules: {
-        menuName: [
-          { required: true, message: "菜单名称不能为空", trigger: "blur" },
-        ],
-        orderNum: [
-          { required: true, message: "菜单顺序不能为空", trigger: "blur" },
-        ],
-        path: [
-          { required: true, message: "路由地址不能为空", trigger: "blur" },
-        ],
+        menuName: [{ required: true, message: '菜单名称不能为空', trigger: 'blur' }],
+        orderNum: [{ required: true, message: '菜单顺序不能为空', trigger: 'blur' }],
+        path: [{ required: true, message: '路由地址不能为空', trigger: 'blur' }],
       },
       // table树节点
       tableTreeNodeMap: new Map(),
-    };
+    }
   },
   created() {
-    // this.getList();
-    this.getDicts("sys_show_hide").then((response) => {
-      this.visibleOptions = response.data;
-    });
-    this.getDicts("sys_normal_disable").then((response) => {
-      this.statusOptions = response.data;
-    });
-    listMenuById(0).then((response) => {
-      this.menuList = response.data
+    this.getList()
+    this.getDicts('sys_show_hide').then((response) => {
+      this.visibleOptions = response.data
     })
+    this.getDicts('sys_normal_disable').then((response) => {
+      this.statusOptions = response.data
+    })
+    // listMenuById(0).then((response) => {
+    //   this.menuList = response.data
+    // })
   },
   methods: {
     // 选择图标
     selected(name) {
-      this.form.icon = name;
+      this.form.icon = name
     },
     /** 查询菜单列表 */
     getList() {
-      this.loading = true;
+      this.loading = true
       listMenu(this.queryParams).then((response) => {
-        this.menuList = response.data;
-        // this.menuList = this.handleTree(response.data, "menuId");
-        this.loading = false;
-      });
+        // this.menuList = response.data
+        this.menuList = this.handleTree(response.data, 'menuId')
+        this.loading = false
+      })
     },
     /** 转换菜单数据结构 */
     normalizer(node) {
       if (node.children && !node.children.length) {
-        delete node.children;
+        delete node.children
       }
       return {
         id: node.menuId,
         label: node.menuName,
         children: node.children,
-      };
+      }
     },
     /** 查询菜单下拉树结构 */
     getTreeselect() {
       listMenu({ menuTypeIds: 'M,C,F' }).then((response) => {
-        this.menuOptions = [];
-        const menu = { menuId: 0, menuName: "根菜单", children: [] };
-				menu.children = response.data;
+        this.menuOptions = []
+        const menu = { menuId: 0, menuName: '根菜单', children: [] }
+        menu.children = response.data
         //menu.children = this.handleTree(response.data, "menuId");
-        this.menuOptions.push(menu);
-      });
+        this.menuOptions.push(menu)
+      })
     },
     // 显示状态字典翻译
     visibleFormat(row, column) {
-      if (row.menuType == "F") {
-        return "";
+      if (row.menuType == 'F') {
+        return ''
       }
-      return this.selectDictLabel(this.visibleOptions, row.visible);
+      return this.selectDictLabel(this.visibleOptions, row.visible)
     },
     // 菜单状态字典翻译
     statusFormat(row, column) {
-      if (row.menuType == "F") {
-        return "";
+      if (row.menuType == 'F') {
+        return ''
       }
-      return this.selectDictLabel(this.statusOptions, row.status);
+      return this.selectDictLabel(this.statusOptions, row.status)
     },
     // 取消按钮
     cancel() {
-      this.open = false;
-      this.reset();
+      this.open = false
+      this.reset()
     },
     // 表单重置
     reset() {
-      this.btnSubmitVisible = true;
+      this.btnSubmitVisible = true
       this.form = {
         menuId: undefined,
         parentId: 0,
         menuName: undefined,
         icon: undefined,
-        menuType: "M",
+        menuType: 'M',
         orderNum: 999,
-        isFrame: "0",
-        isCache: "0",
-        visible: "0",
-        status: "0",
-      };
-      this.resetForm("form");
+        isFrame: '0',
+        isCache: '0',
+        visible: '0',
+        status: '0',
+      }
+      this.resetForm('form')
     },
     /** 搜索按钮操作 */
     handleQuery() {
-      this.getList();
+      this.getList()
     },
     /** 重置按钮操作 */
     resetQuery() {
-      this.resetForm("queryForm");
-      this.handleQuery();
+      this.resetForm('queryForm')
+      this.handleQuery()
     },
     /** 新增按钮操作 */
     handleAdd(row) {
-      this.reset();
-      this.getTreeselect();
+      this.reset()
+      this.getTreeselect()
 
-      this.form.parentId = row != null && row.menuId ? row.menuId : 0;
-      this.open = true;
-      this.title = "添加菜单";
+      this.form.parentId = row != null && row.menuId ? row.menuId : 0
+      this.open = true
+      this.title = '添加菜单'
     },
     /** 修改按钮操作 */
     handleUpdate(row) {
-      this.reset();
-      this.getTreeselect();
+      this.reset()
+      this.getTreeselect()
       getMenu(row.menuId).then((response) => {
-        this.form = response.data;
-        this.open = true;
-        this.title = "修改菜单";
-      });
+        this.form = response.data
+        this.open = true
+        this.title = '修改菜单'
+      })
     },
     /** 提交按钮 */
     submitForm: function () {
-      this.$refs["form"].validate((valid) => {
+      this.$refs['form'].validate((valid) => {
         if (valid) {
           if (this.form.menuId != undefined) {
             updateMenu(this.form).then((response) => {
-              this.msgSuccess("修改成功");
-              this.open = false;
+              this.msgSuccess('修改成功')
+              this.open = false
               if (this.form.parentId === 0) {
-                this.getList();
+                this.getList()
               } else {
-                this.refreshTableTree(this.form.parentId);
+                this.refreshTableTree(this.form.parentId)
               }
-            });
+            })
           } else {
             addMenu(this.form).then((response) => {
-              this.msgSuccess("新增成功");
-              this.open = false;
+              this.msgSuccess('新增成功')
+              this.open = false
               if (this.form.parentId === 0) {
-                this.getList();
+                this.getList()
               } else {
-                this.refreshTableTree(this.form.parentId);
+                this.refreshTableTree(this.form.parentId)
               }
-            });
+            })
           }
         }
-      });
+      })
     },
     /** 删除按钮操作 */
     handleDelete(row) {
-      this.$confirm(
-        '是否确认删除名称为"' + row.menuName + '"的数据项?',
-        "警告",
-        {
-          confirmButtonText: "确定",
-          cancelButtonText: "取消",
-          type: "warning",
-        }
-      )
+      this.$confirm('是否确认删除名称为"' + row.menuName + '"的数据项?', '警告', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+      })
         .then(function () {
-          return delMenu(row.menuId);
+          return delMenu(row.menuId)
         })
         .then(() => {
           if (row.parentId === 0) {
-            this.getList();
+            this.getList()
           } else {
-            this.refreshTableTree(row.parentId);
+            this.refreshTableTree(row.parentId)
           }
-          this.msgSuccess("删除成功");
-        });
+          this.msgSuccess('删除成功')
+        })
     },
     /**
      * 保存排序
      */
     handleChangeSort(item) {
-      this.editIndex = -1;
-      changeMenuSort({ value: item.orderNum, id: item.menuId }).then(
-        (response) => {
-          this.msgSuccess("修改成功");
-          this.getList();
-        }
-      );
+      this.editIndex = -1
+      changeMenuSort({ value: item.orderNum, id: item.menuId }).then((response) => {
+        this.msgSuccess('修改成功')
+        this.getList()
+      })
     },
     handleTreeSelect(node, instanceId) {
       //如果是链接隐藏提交按钮
-      this.btnSubmitVisible = node.menuType == "L" ? false : true;
+      this.btnSubmitVisible = node.menuType == 'L' ? false : true
     },
     // 显示编辑排序
     editCurrRow(rowId, str) {
-      this.editIndex = rowId;
-      let id = rowId + str;
+      this.editIndex = rowId
+      let id = rowId + str
 
       setTimeout(() => {
-        document.getElementById(id).focus();
-      }, 100);
+        document.getElementById(id).focus()
+      }, 100)
     },
     //展开/折叠操作
     toggleExpandAll() {
-      this.refreshTable = false;
-      this.isExpandAll = !this.isExpandAll;
+      this.refreshTable = false
+      this.isExpandAll = !this.isExpandAll
       this.$nextTick(() => {
-        this.refreshTable = true;
-      });
+        this.refreshTable = true
+      })
     },
-    loadMenu (row, treeNode, resolve) {
-      this.tableTreeNodeMap.set(row.menuId, { row, treeNode, resolve });
+    loadMenu(row, treeNode, resolve) {
+      this.tableTreeNodeMap.set(row.menuId, { row, treeNode, resolve })
       listMenuById(row.menuId).then((res) => {
         resolve(res.data)
       })
     },
     //新增/修改/删除子节点时刷新子节点
     refreshTableTree(key) {
-      const node = this.tableTreeNodeMap.get(key);
-      if (!node) {
-        return;
-      }
-      const { row, treeNode, resolve } = node;
-      this.loadMenu(row, treeNode, resolve);
+      // const node = this.tableTreeNodeMap.get(key)
+      // if (!node) {
+      //   return
+      // }
+      // const { row, treeNode, resolve } = node
+      // this.loadMenu(row, treeNode, resolve)
+      this.getList()
     },
   },
-};
+}
 </script>