feat: 添加子菜单

apps/web-antd/src/views/system/menu/data.tsx

@@ -131,7 +131,7 @@ export const columns: VxeGridProps['columns'] = [
     fixed: 'right',
     slots: { default: 'action' },
     title: '操作',
-    width: 180,
+    width: 200,
   },
 ];
 

apps/web-antd/src/views/system/menu/index.vue

@@ -100,6 +100,12 @@ function handleAdd() {
   drawerApi.open();
 }
 
+function handleSubAdd(row: Recordable<any>) {
+  const { menuId } = row;
+  drawerApi.setData({ id: menuId, update: false });
+  drawerApi.open();
+}
+
 async function handleEdit(record: Recordable<any>) {
   drawerApi.setData({ id: record.menuId });
   drawerApi.open();
@@ -165,6 +171,15 @@ const isAdmin = computed(() => {
           >
             {{ $t('pages.common.edit') }}
           </ghost-button>
+          <!-- '按钮类型'无法再添加子菜单 -->
+          <ghost-button
+            v-if="row.menuType !== 'F'"
+            class="btn-add"
+            v-access:code="['system:menu:add']"
+            @click="handleSubAdd(row)"
+          >
+            {{ $t('pages.common.add') }}
+          </ghost-button>
           <Popconfirm
             :get-popup-container="getPopupContainer"
             placement="left"
@@ -186,3 +201,15 @@ const isAdmin = computed(() => {
   </Page>
   <Fallback v-else description="您没有菜单管理的访问权限" status="403" />
 </template>
+
+<style lang="scss" scoped>
+.btn-add {
+  color: hsl(var(--success)) !important;
+  border-color: hsl(var(--success)) !important;
+
+  &:hover {
+    color: hsl(var(--success) / 50%) !important;
+    border-color: hsl(var(--success) / 50%) !important;
+  }
+}
+</style>

apps/web-antd/src/views/system/menu/menu-drawer.vue

@@ -15,6 +15,11 @@ import { menuAdd, menuInfo, menuList, menuUpdate } from '#/api/system/menu';
 
 import { drawerSchema } from './data';
 
+interface ModalProps {
+  id?: number | string;
+  update: boolean;
+}
+
 const emit = defineEmits<{ reload: [] }>();
 
 const isUpdate = ref(false);
@@ -28,6 +33,7 @@ const [BasicForm, formApi] = useVbenForm({
       class: 'w-full',
     },
     formItemClass: 'col-span-2',
+    labelWidth: 90,
   },
   schema: drawerSchema(),
   showDefaultActions: false,
@@ -81,13 +87,17 @@ const [BasicDrawer, drawerApi] = useVbenDrawer({
       return null;
     }
     drawerApi.drawerLoading(true);
-    const { id } = drawerApi.getData() as { id?: number | string };
-    isUpdate.value = !!id;
+    const { id, update } = drawerApi.getData() as ModalProps;
+    isUpdate.value = update;
+
     // 加载菜单树选择
     await setupMenuSelect();
-    if (isUpdate.value && id) {
-      const record = await menuInfo(id);
-      await formApi.setValues(record);
+    if (id) {
+      await formApi.setFieldValue('parentId', id);
+      if (update) {
+        const record = await menuInfo(id);
+        await formApi.setValues(record);
+      }
     }
     drawerApi.drawerLoading(false);
   },