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

2025-09-18 03:16:40 +08:00 · 2025-04-08 19:52:07 +08:00 · 2025-04-08 19:52:07 +08:00 · 79fc04d8cb
commit 79fc04d8cb
parent 393cb325c7
8 changed files with 78 additions and 26 deletions
--- a/smart-admin-web-javascript/src/constants/system/menu-const.js
+++ b/smart-admin-web-javascript/src/constants/system/menu-const.js
@ -18,7 +18,7 @@ export const MENU_TYPE_ENUM = {
  },
  POINTS: {
    value: 3,
-    desc: '按钮',
+    desc: '功能点',
  },
 };

--- a/smart-admin-web-javascript/src/views/system/menu/components/menu-operate-modal.vue
+++ b/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);
--- a/smart-admin-web-javascript/src/views/system/menu/menu-list-table-columns.js
+++ b/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"
  },
 ]);
--- a/smart-admin-web-javascript/src/views/system/menu/menu-list.vue
+++ b/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>
--- a/smart-admin-web-typescript/src/constants/system/menu-const.ts
+++ b/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: '功能点',
  },
 };

--- a/smart-admin-web-typescript/src/views/system/menu/components/menu-operate-modal.vue
+++ b/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>
--- a/smart-admin-web-typescript/src/views/system/menu/menu-list-table-columns.ts
+++ b/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"
  },
 ]);
--- a/smart-admin-web-typescript/src/views/system/menu/menu-list.vue
+++ b/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>