:recycle: Refactoring code. 优化 菜单管理

src/api/admin/menu.js

@@ -33,11 +33,10 @@ export function getTopMenu() {
   })
 }
 
-export function fetchMenuTree(query) {
+export function fetchMenuTree() {
   return request({
     url: '/admin/menu/tree',
-    method: 'get',
-    params: query
+    method: 'get'
   })
 }
 

src/const/crud/admin/menu.js

@@ -26,13 +26,38 @@ export const tableOption = {
   align: 'center',
   column: [
     {
-      label: "菜单名称",
+      label: "名称",
       prop: "name",
       width: 180,
       rules: [
         {
           required: true,
-          message: "请输入菜单名称",
+          message: "请输入名称",
+          trigger: "blur"
+        }
+      ]
+    },
+    {
+      label: "类型",
+      prop: "type",
+      type: "radio",
+      slot: true,
+      border:true,
+      valueFormat: "string",
+      dicData: [
+        {
+          label: "菜单",
+          value: "0"
+        },
+        {
+          label: "按钮",
+          value: "1"
+        }
+      ],
+      rules: [
+        {
+          required: true,
+          message: "请选择菜单类型",
           trigger: "blur"
         }
       ]
@@ -41,6 +66,8 @@ export const tableOption = {
       label: "路由路径",
       prop: "path",
       width: 180,
+      addDisplay: true,
+      editDisplay: true,
       overHidden: true,
       rules: [
         {
@@ -62,9 +89,9 @@ export const tableOption = {
       },
       rules: [
         {
-          required: false,
+          required: true,
           message: "请选择上级菜单",
-          trigger: "click"
+          trigger: "click",
         }
       ]
     },
@@ -73,6 +100,8 @@ export const tableOption = {
       prop: "icon",
       type: "icon-select",
       slot: true,
+      addDisplay: true,
+      editDisplay: true,
       iconList: iconList,
       rules: [
         {
@@ -82,36 +111,15 @@ export const tableOption = {
         }
       ]
     },
-    {
-      label: "类型",
-      prop: "type",
-      type: "radio",
-      slot: true,
-      valueFormat: "string",
-      dicData: [
-        {
-          label: "菜单",
-          value: "0"
-        },
-        {
-          label: "按钮",
-          value: "1"
-        }
-      ],
-      rules: [
-        {
-          required: true,
-          message: "请选择菜单类型",
-          trigger: "blur"
-        }
-      ]
-    },
     {
       label: "权限标识",
       prop: "code",
+      addDisplay: true,
+      editDisplay: true,
       rules: [
         {
-          message: "菜单类型可不填",
+          required: true,
+          message: "权限标识",
           trigger: "blur"
         }
       ]

src/views/admin/menu/index.vue

@@ -9,8 +9,6 @@
                @row-del="rowDel"
                @row-update="rowUpdate"
                @row-save="rowSave"
-               @current-change="currentChange"
-               @size-change="sizeChange"
                @on-load="onLoad">
       <template slot-scope="scope"
                 slot="icon">
@@ -30,9 +28,9 @@
 </template>
 
 <script>
-  import { addObj, delObj, fetchMenuTree, getObj, putObj } from '@/api/admin/menu'
+  import {addObj, delObj, fetchMenuTree, getObj, putObj} from '@/api/admin/menu'
   import {mapGetters} from "vuex";
-  import { tableOption } from '@/const/crud/admin/menu'
+  import {tableOption} from '@/const/crud/admin/menu'
 
   export default {
     data() {
@@ -42,7 +40,11 @@
         data: []
       };
     },
-
+    watch: {
+      'form.type'() {
+        this.showHide()
+      }
+    },
     computed: {
       ...mapGetters(["permissions"]),
       permissionList() {
@@ -73,14 +75,12 @@
           confirmButtonText: "确定",
           cancelButtonText: "取消",
           type: "warning"
-        })
-          .then(() => {
-            return delObj(row.id);
-          })
-          .then(() => {
-            this.onLoad();
-            this.$message.success("删除成功");
-          });
+        }).then(() => {
+          return delObj(row.id);
+        }).then(() => {
+          this.onLoad();
+          this.$message.success("删除成功");
+        });
       },
       beforeOpen(done, type) {
         if (["edit", "view"].includes(type)) {
@@ -94,6 +94,25 @@
         fetchMenuTree().then(res => {
           this.data = res.data.data;
         });
+      },
+      showHide(){
+        this.$refs.crud.option.column.filter(item => {
+          if (item.prop === "path") {
+            item.addDisplay = this.form.type === "0"
+            item.editDisplay = this.form.type === "0"
+          }
+          if (item.prop === "icon") {
+            item.addDisplay = this.form.type === "0"
+            item.editDisplay = this.form.type === "0"
+          }
+          if (item.prop === "code") {
+            item.addDisplay = this.form.type === "1"
+            item.editDisplay = this.form.type === "1"
+          }
+          if (item.prop === "parentId") {
+            item.rules[0].required = this.form.type === "1"
+          }
+        });
       }
     }
   };