feat: 新增级联菜单删除按钮
This commit is contained in:
parent
f81a65a359
commit
40f3fbbd77
@ -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"
|
||||
|
@ -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',
|
||||
|
@ -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: '通知公告列表',
|
||||
|
@ -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'
|
||||
});
|
||||
}
|
||||
|
2
src/typings/app.d.ts
vendored
2
src/typings/app.d.ts
vendored
@ -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;
|
||||
|
@ -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>
|
||||
|
||||
|
107
src/views/system/menu/modules/menu-cascade-delete-modal.vue
Normal file
107
src/views/system/menu/modules/menu-cascade-delete-modal.vue
Normal file
@ -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>
|
Loading…
Reference in New Issue
Block a user