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

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>