菜单管理新增添加下级功能

smart-admin-web-javascript/src/constants/system/menu-const.js

@@ -18,7 +18,7 @@ export const MENU_TYPE_ENUM = {
   },
   POINTS: {
     value: 3,
-    desc: '按钮',
+    desc: '功能点',
   },
 };
 

smart-admin-web-javascript/src/views/system/menu/components/menu-operate-modal.vue

@@ -15,8 +15,9 @@
     :open="visible"
     :width="600"
     @close="onClose"
+    destroyOnClose
   >
-    <a-form ref="formRef" :labelCol="{ span: labelColSpan }" :labelWrap="true" :model="form" :rules="rules">
+    <a-form ref="formRef" :labelCol="{ span: 5 }" :labelWrap="true" :model="form" :rules="rules">
       <a-form-item label="菜单类型" name="menuType">
         <a-radio-group v-model:value="form.menuType" button-style="solid">
           <a-radio-button v-for="item in MENU_TYPE_ENUM" :key="item.value" :value="item.value">
@@ -61,11 +62,17 @@
           <a-switch v-model:checked="form.visibleFlag" checked-children="显示" un-checked-children="不显示" />
         </a-form-item>
         <a-form-item label="禁用状态" name="disabledFlag">
-          <a-switch v-model:checked="form.disabledFlag" :checkedValue="false" :unCheckedValue="true" checked-children="启用" un-checked-children="禁用" />
+          <a-switch
+            v-model:checked="form.disabledFlag"
+            :checkedValue="false"
+            :unCheckedValue="true"
+            checked-children="启用"
+            un-checked-children="禁用"
+          />
         </a-form-item>
       </template>
       <!--      目录 菜单 end   -->
-      <!--      按钮 start   -->
+      <!--      功能点 start   -->
       <template v-if="form.menuType === MENU_TYPE_ENUM.POINTS.value">
         <a-form-item label="功能点名称" name="menuName">
           <a-input v-model:value="form.menuName" placeholder="请输入功能点名称" />
@@ -74,7 +81,13 @@
           <MenuTreeSelect ref="contextMenuTreeSelect" v-model:value="form.contextMenuId" />
         </a-form-item>
         <a-form-item label="功能点状态" name="funcDisabledFlag">
-          <a-switch v-model:checked="form.disabledFlag" :checkedValue="false" :unCheckedValue="true" checked-children="启用" un-checked-children="禁用" />
+          <a-switch
+            v-model:checked="form.disabledFlag"
+            :checkedValue="false"
+            :unCheckedValue="true"
+            checked-children="启用"
+            un-checked-children="禁用"
+          />
         </a-form-item>
         <a-form-item label="权限类型" name="permsType">
           <a-radio-group v-model:value="form.permsType">
@@ -90,7 +103,7 @@
           <a-input v-model:value="form.apiPerms" placeholder="请输入后端权限" />
         </a-form-item>
       </template>
-      <!--      按钮 end   -->
+      <!--      功能点 end   -->
       <a-form-item label="排序" name="sort" help="值越小越靠前">
         <a-input-number v-model:value="form.sort" :min="0" placeholder="请输入排序" style="width: 100px" />
       </a-form-item>
@@ -105,7 +118,7 @@
 <script setup>
   import { message } from 'ant-design-vue';
   import _ from 'lodash';
-  import { computed, nextTick, reactive, ref } from 'vue';
+  import { nextTick, reactive, ref } from 'vue';
   import MenuTreeSelect from './menu-tree-select.vue';
   import { menuApi } from '/@/api/system/menu-api';
   import IconSelect from '/@/components/framework/icon-select/index.vue';
@@ -122,13 +135,6 @@
   // 是否展示抽屉
   const visible = ref(false);
 
-  const labelColSpan = computed(() => {
-    if (form.menuType === MENU_TYPE_ENUM.POINTS.value) {
-      return 6;
-    }
-    return 4;
-  });
-
   const contextMenuTreeSelect = ref();
   const parentMenuTreeSelect = ref();
 
@@ -178,7 +184,7 @@
     apiPerms: undefined,
     sort: undefined,
     visibleFlag: true,
-    cacheFlag: true,
+    cacheFlag: false,
     component: undefined,
     contextMenuId: undefined,
     disabledFlag: false,
@@ -196,6 +202,9 @@
     formRef.value.resetFields();
     form.menuType = menuType;
     form.parentId = parentId;
+    if (form.menuType === MENU_TYPE_ENUM.POINTS.value) {
+      form.contextMenuId = parentId;
+    }
     // 移除最后一个：后面的内容
     if (webPerms && webPerms.lastIndexOf(':')) {
       form.webPerms = webPerms.substring(0, webPerms.lastIndexOf(':') + 1);

smart-admin-web-javascript/src/views/system/menu/menu-list-table-columns.js

@@ -13,12 +13,13 @@ export const columns = ref([
     title: '名称',
     dataIndex: 'menuName',
     key: 'ID',
-    width: 200,
+    width: 220,
   },
   {
     title: '类型',
     dataIndex: 'menuType',
-    width: 80,
+    width: 100,
+    align: "center"
   },
   {
     title: '图标',
@@ -53,6 +54,7 @@ export const columns = ref([
   {
     title: '操作',
     dataIndex: 'operate',
-    width: 100,
+    width: 170,
+    align: "center"
   },
 ]);

smart-admin-web-javascript/src/views/system/menu/menu-list.vue

@@ -88,7 +88,7 @@
       <a-table
         :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
         size="small"
-        :scroll="{ x: 1000 }"
+        :scroll="{ y: 800 }"
         :defaultExpandAllRows="true"
         :dataSource="tableData"
         bordered
@@ -132,6 +132,15 @@
 
           <template v-if="column.dataIndex === 'operate'">
             <div class="smart-table-operate">
+              <a-button
+                v-if="record.menuType !== MENU_TYPE_ENUM.POINTS.value"
+                v-privilege="'system:menu:update'"
+                type="link"
+                size="small"
+                @click="showAddSub(record)"
+              >
+                添加下级
+              </a-button>
               <a-button v-privilege="'system:menu:update'" type="link" size="small" @click="showDrawer(record)">编辑</a-button>
               <a-button v-privilege="'system:menu:batchDelete'" danger type="link" @click="singleDelete(record)">删除</a-button>
             </div>
@@ -157,6 +166,7 @@
   import { smartSentry } from '/@/lib/smart-sentry';
   import TableOperator from '/@/components/support/table-operator/index.vue';
   import { TABLE_ID_CONST } from '/@/constants/support/table-id-const';
+  import { MENU_TYPE_ENUM } from '/@/constants/system/menu-const';
 
   // ------------------------ 表格渲染 ------------------------
   const menuTypeColorArray = ['red', 'blue', 'orange', 'green'];
@@ -256,4 +266,13 @@
   function showDrawer(rowData) {
     menuOperateModal.value.showDrawer(rowData);
   }
+
+  function showAddSub(rowData) {
+    const subData = {
+      parentId: rowData.menuId,
+      menuType: rowData.menuType === MENU_TYPE_ENUM.CATALOG.value ? MENU_TYPE_ENUM.MENU.value : MENU_TYPE_ENUM.POINTS.value,
+      contextMenuId: rowData.menuType === MENU_TYPE_ENUM.MENU.value ? rowData.menuId : undefined,
+    };
+    menuOperateModal.value.showDrawer(subData);
+  }
 </script>

smart-admin-web-typescript/src/constants/system/menu-const.ts

@@ -21,7 +21,7 @@ export const MENU_TYPE_ENUM: SmartEnum<number> = {
   },
   POINTS: {
     value: 3,
-    desc: '按钮',
+    desc: '功能点',
   },
 };
 

smart-admin-web-typescript/src/views/system/menu/components/menu-operate-modal.vue

@@ -15,6 +15,7 @@
     :open="visible"
     :width="600"
     @close="onClose"
+    destroyOnClose
   >
     <a-form ref="formRef" :labelCol="{ span: labelColSpan }" :labelWrap="true" :model="form" :rules="rules">
       <a-form-item label="菜单类型" name="menuType">
@@ -65,7 +66,7 @@
         </a-form-item>
       </template>
       <!--      目录 菜单 end   -->
-      <!--      按钮 start   -->
+      <!--      功能点 start   -->
       <template v-if="form.menuType === MENU_TYPE_ENUM.POINTS.value">
         <a-form-item label="功能点名称" name="menuName">
           <a-input v-model:value="form.menuName" placeholder="请输入功能点名称" />
@@ -90,7 +91,7 @@
           <a-input v-model:value="form.apiPerms" placeholder="请输入后端权限" />
         </a-form-item>
       </template>
-      <!--      按钮 end   -->
+      <!--      功能点 end   -->
       <a-form-item label="排序" name="sort" help="值越小越靠前">
         <a-input-number v-model:value="form.sort" :min="0" placeholder="请输入排序" style="width: 100px" />
       </a-form-item>

smart-admin-web-typescript/src/views/system/menu/menu-list-table-columns.ts

@@ -13,12 +13,13 @@ export const columns = ref([
     title: '名称',
     dataIndex: 'menuName',
     key: 'ID',
-    width: 200,
+    width: 220,
   },
   {
     title: '类型',
     dataIndex: 'menuType',
-    width: 80,
+    width: 100,
+    align: "center"
   },
   {
     title: '图标',
@@ -53,6 +54,7 @@ export const columns = ref([
   {
     title: '操作',
     dataIndex: 'operate',
-    width: 100,
+    width: 170,
+    align: "center"
   },
 ]);

smart-admin-web-typescript/src/views/system/menu/menu-list.vue

@@ -88,7 +88,7 @@
       <a-table
         :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
         size="small"
-        :scroll="{ x: 1000 }"
+        :scroll="{ y: 800 }"
         :defaultExpandAllRows="true"
         :dataSource="tableData"
         bordered
@@ -132,6 +132,15 @@
 
           <template v-if="column.dataIndex === 'operate'">
             <div class="smart-table-operate">
+              <a-button
+                v-if="record.menuType !== MENU_TYPE_ENUM.POINTS.value"
+                v-privilege="'system:menu:update'"
+                type="link"
+                size="small"
+                @click="showAddSub(record)"
+              >
+                添加下级
+              </a-button>
               <a-button v-privilege="'system:menu:update'" type="link" size="small" @click="showDrawer(record)">编辑</a-button>
               <a-button v-privilege="'system:menu:batchDelete'" danger type="link" @click="singleDelete(record)">删除</a-button>
             </div>
@@ -157,6 +166,7 @@
   import { smartSentry } from '/@/lib/smart-sentry';
   import TableOperator from '/@/components/support/table-operator/index.vue';
   import { TABLE_ID_CONST } from '/@/constants/support/table-id-const';
+  import { MENU_TYPE_ENUM } from '/@/constants/system/menu-const';
 
   // ------------------------ 表格渲染 ------------------------
   const menuTypeColorArray = ['red', 'blue', 'orange', 'green'];
@@ -256,4 +266,13 @@
   function showDrawer(rowData) {
     menuOperateModal.value.showDrawer(rowData);
   }
+  
+  function showAddSub(rowData) {
+    const subData = {
+      parentId: rowData.menuId,
+      menuType: rowData.menuType === MENU_TYPE_ENUM.CATALOG.value ? MENU_TYPE_ENUM.MENU.value : MENU_TYPE_ENUM.POINTS.value,
+      contextMenuId: rowData.menuType === MENU_TYPE_ENUM.MENU.value ? rowData.menuId : undefined,
+    };
+    menuOperateModal.value.showDrawer(subData);
+  }
 </script>