feat: 新增级联菜单删除按钮

src/components/custom/menu-tree.vue

@@ -9,11 +9,13 @@ defineOptions({ name: 'MenuTree' });
 
 interface Props {
   immediate?: boolean;
+  showHeader?: boolean;
   [key: string]: any;
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  immediate: true
+  immediate: true,
+  showHeader: true
 });
 
 const { bool: expandAll } = useBoolean();
@@ -106,7 +108,7 @@ defineExpose({
 
 <template>
   <div class="w-full flex-col gap-12px">
-    <div class="w-full flex-center">
+    <div v-if="showHeader" class="w-full flex-center">
       <NCheckbox v-model:checked="expandAll" :checked-value="true" :unchecked-value="false">展开/折叠</NCheckbox>
       <NCheckbox
         v-model:checked="checkAll"

src/locales/langs/en-us.ts

@@ -612,6 +612,10 @@ const local: App.I18n.Schema = {
             required: 'Please select Menu Icon',
             invalid: 'Menu Icon cannot be empty'
           },
+          menuIds: {
+            required: 'Please select Menu',
+            invalid: 'Menu cannot be empty'
+          },
           menuName: {
             required: 'Please enter Menu Name',
             invalid: 'Menu Name cannot be empty'
@@ -669,7 +673,8 @@ const local: App.I18n.Schema = {
         button: 'Button',
         addMenu: 'Add Menu',
         addChildMenu: 'Add Child Menu',
-        editMenu: 'Edit Menu'
+        editMenu: 'Edit Menu',
+        cascadeDelete: 'Cascade Delete Menu'
       },
       notice: {
         title: 'Notice List',

src/locales/langs/zh-cn.ts

@@ -606,6 +606,10 @@ const local: App.I18n.Schema = {
             required: '请选择菜单类型',
             invalid: '菜单类型不能为空'
           },
+          menuIds: {
+            required: '请选择菜单',
+            invalid: '菜单不能为空'
+          },
           icon: {
             required: '请选择菜单图标',
             invalid: '菜单图标不能为空'
@@ -667,7 +671,8 @@ const local: App.I18n.Schema = {
         button: '按钮',
         addMenu: '新增菜单',
         addChildMenu: '新增子菜单',
-        editMenu: '编辑菜单'
+        editMenu: '编辑菜单',
+        cascadeDelete: '级联删除菜单'
       },
       notice: {
         title: '通知公告列表',

src/service/api/system/menu.ts

@@ -59,3 +59,11 @@ export function fetchGetTenantPackageMenuTreeSelect(packageId: CommonType.IdType
     method: 'get'
   });
 }
+
+// 级联删除菜单
+export function fetchCascadeDeleteMenu(menuIds: CommonType.IdType[]) {
+  return request<boolean>({
+    url: `/system/menu/cascade/${menuIds.join(',')}`,
+    method: 'delete'
+  });
+}

src/typings/app.d.ts

@@ -714,6 +714,7 @@ declare namespace App {
             form: {
               parentId: FormMsg;
               menuType: FormMsg;
+              menuIds: FormMsg;
               icon: FormMsg;
               menuName: FormMsg;
               orderNum: FormMsg;
@@ -740,6 +741,7 @@ declare namespace App {
             addMenu: string;
             addChildMenu: string;
             editMenu: string;
+            cascadeDelete: string;
           };
           notice: {
             title: string;

src/views/system/menu/index.vue

@@ -14,6 +14,7 @@ import SvgIcon from '@/components/custom/svg-icon.vue';
 import DictTag from '@/components/custom/dict-tag.vue';
 import ButtonIcon from '@/components/custom/button-icon.vue';
 import MenuOperateDrawer from './modules/menu-operate-drawer.vue';
+import MenuCascadeDeleteModal from './modules/menu-cascade-delete-modal.vue';
 
 useDict('sys_show_hide');
 useDict('sys_normal_disable');
@@ -26,6 +27,7 @@ const editingData = ref<Api.System.Menu>();
 const operateType = ref<NaiveUI.TableOperateType>('add');
 const { loading, startLoading, endLoading } = useLoading();
 const { bool: drawerVisible, setTrue: openDrawer } = useBoolean();
+const { bool: cascadeDeleteVisible, setTrue: openCascadeDeleteDrawer } = useBoolean();
 const { loading: btnLoading, startLoading: startBtnLoading, endLoading: endBtnLoading } = useLoading();
 /** tree pattern name , use tree search */
 const name = ref<string>();
@@ -304,10 +306,18 @@ const btnColumns: DataTableColumns<Api.System.Menu> = [
         v-if="hasAuth('system:menu:add')"
         size="small"
         icon="material-symbols:add-rounded"
-        class="h-28px text-icon"
+        class="h-28px text-icon color-primary"
         :tooltip-content="$t('page.system.menu.addMenu')"
         @click.stop="handleAddMenu(0)"
       />
+      <ButtonIcon
+        v-if="hasAuth('system:menu:add')"
+        size="small"
+        icon="material-symbols:delete-outline"
+        class="h-28px text-icon color-error"
+        :tooltip-content="$t('page.system.menu.cascadeDelete')"
+        @click.stop="openCascadeDeleteDrawer"
+      />
       <ButtonIcon
         size="small"
         icon="material-symbols:refresh-rounded"
@@ -477,6 +487,7 @@ const btnColumns: DataTableColumns<Api.System.Menu> = [
       :menu-type="createType"
       @submitted="handleSubmitted"
     />
+    <MenuCascadeDeleteModal v-model:visible="cascadeDeleteVisible" @submitted="handleSubmitted" />
   </TableSiderLayout>
 </template>
 

src/views/system/menu/modules/menu-cascade-delete-modal.vue

@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import { reactive, ref, watch } from 'vue';
+import { useLoading } from '@sa/hooks';
+import { fetchCascadeDeleteMenu } from '@/service/api/system';
+import { useFormRules, useNaiveForm } from '@/hooks/common/form';
+import { $t } from '@/locales';
+import MenuTree from '@/components/custom/menu-tree.vue';
+
+defineOptions({
+  name: 'MenuCascadeDeleteModal'
+});
+
+interface Emits {
+  (e: 'submitted'): void;
+}
+
+const emit = defineEmits<Emits>();
+
+const visible = defineModel<boolean>('visible', {
+  default: false
+});
+
+const menuTreeRef = ref<InstanceType<typeof MenuTree> | null>(null);
+const menuOptions = ref<Api.System.MenuList>([]);
+const { loading: menuLoading } = useLoading();
+
+const { formRef, validate, restoreValidation } = useNaiveForm();
+const { createRequiredRule } = useFormRules();
+
+type Model = {
+  menuIds: CommonType.IdType[];
+};
+
+const model: Model = reactive(createDefaultModel());
+
+function createDefaultModel(): Model {
+  return {
+    menuIds: []
+  };
+}
+
+type RuleKey = Extract<keyof Model, 'menuIds'>;
+
+const rules: Record<RuleKey, App.Global.FormRule> = {
+  menuIds: createRequiredRule($t('page.system.menu.form.menuIds.invalid'))
+};
+
+async function handleUpdateModelWhenEdit() {
+  menuOptions.value = [];
+  Object.assign(model, createDefaultModel());
+}
+
+function closeDrawer() {
+  visible.value = false;
+}
+
+async function handleSubmit() {
+  await validate();
+  const { error } = await fetchCascadeDeleteMenu(model.menuIds);
+  if (error) return;
+  window.$message?.success($t('common.deleteSuccess'));
+  closeDrawer();
+  emit('submitted');
+}
+
+watch(visible, () => {
+  if (visible.value) {
+    handleUpdateModelWhenEdit();
+    restoreValidation();
+  }
+});
+</script>
+
+<template>
+  <NModal
+    v-model:show="visible"
+    :title="$t('page.system.menu.cascadeDelete')"
+    preset="card"
+    :bordered="false"
+    display-directive="show"
+    class="max-w-90% w-500px"
+    @close="closeDrawer"
+  >
+    <NForm ref="formRef" :model="model" :rules="rules">
+      <NFormItem :show-label="false" path="menuIds">
+        <MenuTree
+          v-if="visible"
+          ref="menuTreeRef"
+          v-model:options="menuOptions"
+          v-model:loading="menuLoading"
+          v-model:checked-keys="model.menuIds"
+          :cascade="true"
+          :show-header="false"
+          :immediate="true"
+        />
+      </NFormItem>
+    </NForm>
+    <template #footer>
+      <NSpace justify="end" :size="16">
+        <NButton @click="closeDrawer">{{ $t('common.cancel') }}</NButton>
+        <NButton type="primary" @click="handleSubmit">{{ $t('common.confirm') }}</NButton>
+      </NSpace>
+    </template>
+  </NModal>
+</template>
+
+<style scoped></style>