optimize(projects): 优化菜单管理代码
This commit is contained in:
AN
parent
c7d850b93a
commit
e6a18ec527
@ -1,5 +1,5 @@
|
||||
<script setup lang="tsx">
|
||||
import { ref } from 'vue';
|
||||
import { computed, ref } from 'vue';
|
||||
import type { DataTableColumns, TreeInst, TreeOption } from 'naive-ui';
|
||||
import { NButton, NDivider, NIcon, NInput, NPopconfirm } from 'naive-ui';
|
||||
import { useBoolean, useLoading } from '@sa/hooks';
|
||||
@ -36,6 +36,18 @@ const treeData = ref<Api.System.Menu[]>([]);
|
||||
const checkedKeys = ref<CommonType.IdType[]>([0]);
|
||||
const expandedKeys = ref<CommonType.IdType[]>([0]);
|
||||
|
||||
// 是否为目录类型
|
||||
const isCatalog = computed(() => currentMenu.value?.menuType === 'M');
|
||||
|
||||
// 是否为菜单类型
|
||||
const isMenu = computed(() => currentMenu.value?.menuType === 'C');
|
||||
|
||||
// 外链类型
|
||||
const isExternalType = computed(() => currentMenu.value?.isFrame === '0');
|
||||
|
||||
// iframe类型
|
||||
const isIframeType = computed(() => currentMenu.value?.isFrame === '2');
|
||||
|
||||
const menuTreeRef = ref<TreeInst>();
|
||||
const btnData = ref<Api.System.MenuList>([]);
|
||||
|
||||
@ -347,7 +359,7 @@ const btnColumns: DataTableColumns<Api.System.Menu> = [
|
||||
<template #header-extra>
|
||||
<NSpace>
|
||||
<NButton
|
||||
v-if="currentMenu.menuType === 'M' && hasAuth('system:menu:add')"
|
||||
v-if="isCatalog && hasAuth('system:menu:add')"
|
||||
size="small"
|
||||
ghost
|
||||
type="primary"
|
||||
@ -391,30 +403,30 @@ const btnColumns: DataTableColumns<Api.System.Menu> = [
|
||||
label-class="w-20% min-w-88px"
|
||||
content-class="w-100px"
|
||||
>
|
||||
<NDescriptionsItem :label="$t('page.system.menu.menuName')">
|
||||
<NDescriptionsItem :label="$t('page.system.menu.menuType')">
|
||||
<NTag class="m-1" size="small" type="primary">{{ menuTypeRecord[currentMenu.menuType!] }}</NTag>
|
||||
</NDescriptionsItem>
|
||||
<NDescriptionsItem :label="$t('page.system.menu.status')">
|
||||
<DictTag size="small" :value="currentMenu.status" dict-code="sys_normal_disable" />
|
||||
</NDescriptionsItem>
|
||||
<NDescriptionsItem :label="$t('page.system.menu.addChildMenu')">
|
||||
<NDescriptionsItem :label="$t('page.system.menu.menuName')">
|
||||
{{ currentMenu.menuName }}
|
||||
</NDescriptionsItem>
|
||||
<NDescriptionsItem v-if="currentMenu.menuType === 'C'" :label="$t('page.system.menu.component')">
|
||||
<NDescriptionsItem v-if="isMenu" :label="$t('page.system.menu.component')">
|
||||
{{ currentMenu.component }}
|
||||
</NDescriptionsItem>
|
||||
<NDescriptionsItem
|
||||
:label="currentMenu.isFrame !== '0' ? $t('page.system.menu.path') : $t('page.system.menu.externalPath')"
|
||||
:label="!isExternalType ? $t('page.system.menu.path') : $t('page.system.menu.externalPath')"
|
||||
>
|
||||
{{ currentMenu.path }}
|
||||
</NDescriptionsItem>
|
||||
<NDescriptionsItem
|
||||
v-if="currentMenu.menuType === 'C'"
|
||||
:label="currentMenu.isFrame !== '2' ? $t('page.system.menu.query') : $t('page.system.menu.iframeQuery')"
|
||||
v-if="isMenu && !isExternalType"
|
||||
:label="!isIframeType ? $t('page.system.menu.query') : $t('page.system.menu.iframeQuery')"
|
||||
>
|
||||
{{ currentMenu.queryParam }}
|
||||
</NDescriptionsItem>
|
||||
<NDescriptionsItem v-if="currentMenu.menuType !== 'M'" :label="$t('page.system.menu.perms')">
|
||||
<NDescriptionsItem v-if="!isCatalog" :label="$t('page.system.menu.perms')">
|
||||
{{ currentMenu.perms }}
|
||||
</NDescriptionsItem>
|
||||
<NDescriptionsItem :label="$t('page.system.menu.isFrame')">
|
||||
@ -425,7 +437,7 @@ const btnColumns: DataTableColumns<Api.System.Menu> = [
|
||||
<NDescriptionsItem :label="$t('page.system.menu.visible')">
|
||||
<DictTag size="small" :value="currentMenu.visible" dict-code="sys_show_hide" />
|
||||
</NDescriptionsItem>
|
||||
<NDescriptionsItem v-if="currentMenu.menuType === 'C'" :label="$t('page.system.menu.isCache')">
|
||||
<NDescriptionsItem v-if="isMenu" :label="$t('page.system.menu.isCache')">
|
||||
<NTag v-if="currentMenu.isCache" class="m-1" size="small" :type="tagMap[currentMenu.isCache]">
|
||||
{{ currentMenu.isCache === '0' ? $t('page.system.menu.cache') : $t('page.system.menu.noCache') }}
|
||||
</NTag>
|
||||
|
||||
@ -83,8 +83,28 @@ const rules: Record<RuleKey, App.Global.FormRule> = {
|
||||
component: createRequiredRule($t('page.system.menu.form.component.invalid'))
|
||||
};
|
||||
|
||||
const isBtn = computed(() => model.menuType === 'F');
|
||||
// 是否为目录类型
|
||||
const isCatalog = computed(() => model.menuType === 'M');
|
||||
|
||||
// 是否为菜单类型
|
||||
const isMenu = computed(() => model.menuType === 'C');
|
||||
|
||||
// 是否为按钮类型
|
||||
const isBtn = computed(() => model.menuType === 'F');
|
||||
|
||||
// 外链类型
|
||||
const isExternalType = computed(() => model.isFrame === '0');
|
||||
|
||||
// 内部类型
|
||||
const isInternalType = computed(() => model.isFrame === '1');
|
||||
|
||||
// iframe类型
|
||||
const isIframeType = computed(() => model.isFrame === '2');
|
||||
|
||||
// 本地图标类型
|
||||
const isLocalIcon = computed(() => iconType.value === '2');
|
||||
|
||||
// 本地图标
|
||||
const localIcons = getLocalMenuIcons();
|
||||
const localIconOptions = localIcons.map<SelectOption>(item => ({
|
||||
label: () => (
|
||||
@ -102,7 +122,7 @@ function handleInitModel() {
|
||||
|
||||
if (props.operateType === 'edit' && props.rowData) {
|
||||
Object.assign(model, props.rowData);
|
||||
if (isMenu.value && model.isFrame === '1') {
|
||||
if (isMenu.value && isInternalType.value) {
|
||||
model.component = model.component?.slice(0, -6);
|
||||
}
|
||||
iconType.value = model.icon?.startsWith('local-icon-') ? '2' : '1';
|
||||
@ -118,6 +138,44 @@ function closeDrawer() {
|
||||
visible.value = false;
|
||||
}
|
||||
|
||||
// 处理路径
|
||||
function processPath(path: string | null | undefined): string {
|
||||
return path?.startsWith('/') ? path.substring(1) : path || '';
|
||||
}
|
||||
|
||||
// 处理组件
|
||||
function processComponent(component: string | null | undefined): string {
|
||||
if (isCatalog.value && isInternalType.value) {
|
||||
return 'Layout';
|
||||
}
|
||||
if (isIframeType.value || isExternalType.value) {
|
||||
return 'FrameView';
|
||||
}
|
||||
if (isMenu.value && isInternalType.value) {
|
||||
return component?.endsWith('/index') ? component : `${component || ''}/index`;
|
||||
}
|
||||
return component || '';
|
||||
}
|
||||
|
||||
function processQueryParam(queryParam: string | null | undefined): string {
|
||||
// 外链类型不需要查询参数
|
||||
if (isExternalType.value) {
|
||||
return '';
|
||||
}
|
||||
|
||||
// 内部链接类型，处理动态参数
|
||||
if (isInternalType.value && queryList.value.length) {
|
||||
return JSON.stringify(Object.fromEntries(queryList.value.map(({ key, value }) => [key, value])));
|
||||
}
|
||||
|
||||
// iframe类型，直接使用原始参数
|
||||
if (isIframeType.value) {
|
||||
return queryParam || '';
|
||||
}
|
||||
|
||||
return '';
|
||||
}
|
||||
|
||||
async function handleSubmit() {
|
||||
await validate();
|
||||
|
||||
@ -133,37 +191,17 @@ async function handleSubmit() {
|
||||
visible: menuVisible,
|
||||
status,
|
||||
perms,
|
||||
remark
|
||||
remark,
|
||||
component,
|
||||
queryParam
|
||||
} = model;
|
||||
|
||||
let queryParam = model.queryParam;
|
||||
if (isFrame === '0') {
|
||||
queryParam = '';
|
||||
} else if (isFrame === '1' && queryList.value.length) {
|
||||
const queryObj: { [key: string]: string } = {};
|
||||
queryList.value.forEach(item => (queryObj[item.key] = item.value));
|
||||
queryParam = JSON.stringify(queryObj);
|
||||
}
|
||||
|
||||
const path = model.path?.startsWith('/') ? model.path?.substring(1) : model.path;
|
||||
|
||||
let component = model.component;
|
||||
if (isFrame === '1' && menuType === 'M') {
|
||||
component = 'Layout';
|
||||
} else if (isFrame === '2') {
|
||||
component = 'FrameView';
|
||||
} else if (isMenu.value && model.isFrame === '1') {
|
||||
component = component?.endsWith('/index') ? component : `${component}/index`;
|
||||
}
|
||||
|
||||
// request
|
||||
if (props.operateType === 'add') {
|
||||
const { error } = await fetchCreateMenu({
|
||||
const payload = {
|
||||
menuName,
|
||||
path,
|
||||
path: processPath(model.path),
|
||||
parentId,
|
||||
orderNum,
|
||||
queryParam,
|
||||
queryParam: processQueryParam(queryParam),
|
||||
isFrame,
|
||||
isCache,
|
||||
menuType,
|
||||
@ -171,39 +209,18 @@ async function handleSubmit() {
|
||||
status,
|
||||
perms,
|
||||
icon,
|
||||
component,
|
||||
component: processComponent(component),
|
||||
remark
|
||||
});
|
||||
};
|
||||
|
||||
const { error } =
|
||||
props.operateType === 'add' ? await fetchCreateMenu(payload) : await fetchUpdateMenu({ ...payload, menuId });
|
||||
|
||||
if (error) {
|
||||
return;
|
||||
}
|
||||
window.$message?.success($t('common.addSuccess'));
|
||||
}
|
||||
|
||||
if (props.operateType === 'edit') {
|
||||
const { error } = await fetchUpdateMenu({
|
||||
menuId,
|
||||
menuName,
|
||||
path,
|
||||
parentId,
|
||||
orderNum,
|
||||
queryParam,
|
||||
isFrame,
|
||||
isCache,
|
||||
menuType,
|
||||
visible: menuVisible,
|
||||
status,
|
||||
perms,
|
||||
icon,
|
||||
component,
|
||||
remark
|
||||
});
|
||||
if (error) {
|
||||
return;
|
||||
}
|
||||
window.$message?.success($t('common.updateSuccess'));
|
||||
}
|
||||
|
||||
window.$message?.success($t(props.operateType === 'add' ? 'common.addSuccess' : 'common.updateSuccess'));
|
||||
closeDrawer();
|
||||
emit('submitted', menuType!);
|
||||
}
|
||||
@ -224,7 +241,7 @@ function onCreate() {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NDrawer v-model:show="visible" display-directive="show" :width="800" class="max-w-90%">
|
||||
<NDrawer v-model:show="visible" display-directive="show" :width="600" class="max-w-90%">
|
||||
<NDrawerContent :title="drawerTitle" :native-scrollbar="false" closable>
|
||||
<NForm ref="formRef" :model="model" :rules="rules">
|
||||
<NGrid responsive="screen" item-responsive>
|
||||
@ -238,12 +255,7 @@ function onCreate() {
|
||||
:placeholder="$t('page.system.menu.form.parentId.required')"
|
||||
/>
|
||||
</NFormItemGi>
|
||||
<NFormItemGi
|
||||
v-if="model.menuType !== 'F'"
|
||||
:span="24"
|
||||
:label="$t('page.system.menu.menuType')"
|
||||
path="menuType"
|
||||
>
|
||||
<NFormItemGi v-if="!isBtn" :span="24" :label="$t('page.system.menu.menuType')" path="menuType">
|
||||
<NRadioGroup v-model:value="model.menuType">
|
||||
<NRadioButton
|
||||
v-for="item in menuTypeOptions.filter(item => item.value !== 'F')"
|
||||
@ -253,22 +265,30 @@ function onCreate() {
|
||||
/>
|
||||
</NRadioGroup>
|
||||
</NFormItemGi>
|
||||
<NFormItemGi :span="24" :label="$t('page.system.menu.menuName')" path="menuName">
|
||||
<NFormItemGi span="24" :label="$t('page.system.menu.menuName')" path="menuName">
|
||||
<NInput v-model:value="model.menuName" :placeholder="$t('page.system.menu.form.menuName.required')" />
|
||||
</NFormItemGi>
|
||||
<NFormItemGi v-if="!isBtn" span="24" :label="$t('page.system.menu.iconType')">
|
||||
<NFormItemGi v-if="!isBtn" span="12" :label="$t('page.system.menu.iconType')">
|
||||
<NRadioGroup v-model:value="iconType">
|
||||
<NRadio v-for="item in menuIconTypeOptions" :key="item.value" :value="item.value" :label="item.label" />
|
||||
</NRadioGroup>
|
||||
</NFormItemGi>
|
||||
<NFormItemGi v-if="!isBtn" span="24" path="icon">
|
||||
<NFormItemGi v-if="!isBtn" span="12" path="icon">
|
||||
<template #label>
|
||||
<div class="flex-center">
|
||||
<FormTip :content="$t('page.system.menu.iconifyTip')" />
|
||||
<span class="pl-3px">{{ $t('page.system.menu.icon') }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="iconType === '1'">
|
||||
<template v-if="isLocalIcon">
|
||||
<NSelect
|
||||
v-model:value="model.icon"
|
||||
:placeholder="$t('page.system.menu.placeholder.localIconPlaceholder')"
|
||||
filterable
|
||||
:options="localIconOptions"
|
||||
/>
|
||||
</template>
|
||||
<template v-else>
|
||||
<NInput
|
||||
v-model:value="model.icon"
|
||||
:placeholder="$t('page.system.menu.placeholder.iconifyIconPlaceholder')"
|
||||
@ -279,27 +299,51 @@ function onCreate() {
|
||||
</template>
|
||||
</NInput>
|
||||
</template>
|
||||
<template v-if="iconType === '2'">
|
||||
<NSelect
|
||||
v-model:value="model.icon"
|
||||
:placeholder="$t('page.system.menu.placeholder.localIconPlaceholder')"
|
||||
filterable
|
||||
:options="localIconOptions"
|
||||
/>
|
||||
</NFormItemGi>
|
||||
<NFormItemGi v-if="!isBtn" :span="12" path="isFrame">
|
||||
<template #label>
|
||||
<div class="flex-center">
|
||||
<FormTip :content="$t('page.system.menu.isFrameTip')" />
|
||||
<span>{{ $t('page.system.menu.isFrame') }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<NRadioGroup v-model:value="model.isFrame">
|
||||
<NSpace>
|
||||
<NRadio
|
||||
v-for="option in menuIsFrameOptions"
|
||||
:key="option.value"
|
||||
:value="option.value"
|
||||
:label="option.label"
|
||||
/>
|
||||
</NSpace>
|
||||
</NRadioGroup>
|
||||
</NFormItemGi>
|
||||
<NFormItemGi v-if="isMenu" :span="12" path="isCache">
|
||||
<template #label>
|
||||
<div class="flex-center">
|
||||
<FormTip :content="$t('page.system.menu.isCacheTip')" />
|
||||
<span>{{ $t('page.system.menu.isCache') }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<NRadioGroup v-model:value="model.isCache">
|
||||
<NSpace>
|
||||
<NRadio value="0" label="是" />
|
||||
<NRadio value="1" label="否" />
|
||||
</NSpace>
|
||||
</NRadioGroup>
|
||||
</NFormItemGi>
|
||||
<NFormItemGi v-if="!isBtn" :span="24" path="path">
|
||||
<template #label>
|
||||
<div class="flex-center">
|
||||
<FormTip :content="$t('page.system.menu.pathTip')" />
|
||||
<span>
|
||||
{{ model.isFrame !== '0' ? $t('page.system.menu.path') : $t('page.system.menu.externalPath') }}
|
||||
{{ !isExternalType ? $t('page.system.menu.path') : $t('page.system.menu.externalPath') }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<NInput v-model:value="model.path" :placeholder="$t('page.system.menu.form.path.required')" />
|
||||
</NFormItemGi>
|
||||
<NFormItemGi v-if="isMenu && model.isFrame === '1'" :span="24" path="component">
|
||||
<NFormItemGi v-if="isMenu && isInternalType" :span="24" path="component">
|
||||
<template #label>
|
||||
<div class="flex-center">
|
||||
<FormTip :content="$t('page.system.menu.componentTip')" />
|
||||
@ -313,13 +357,13 @@ function onCreate() {
|
||||
</NInputGroup>
|
||||
</NFormItemGi>
|
||||
<NFormItemGi
|
||||
v-if="isMenu && model.isFrame !== '0'"
|
||||
v-if="isMenu && !isExternalType"
|
||||
span="24"
|
||||
:show-feedback="!queryList.length"
|
||||
:label="model.isFrame !== '2' ? $t('page.system.menu.query') : $t('page.system.menu.iframeQuery')"
|
||||
:label="isInternalType ? $t('page.system.menu.query') : $t('page.system.menu.iframeQuery')"
|
||||
>
|
||||
<NDynamicInput
|
||||
v-if="model.isFrame !== '2'"
|
||||
v-if="isInternalType"
|
||||
v-model:value="queryList"
|
||||
item-style="margin-bottom: 0"
|
||||
:on-create="onCreate"
|
||||
@ -369,38 +413,7 @@ function onCreate() {
|
||||
</template>
|
||||
<NInput v-model:value="model.perms" :placeholder="$t('page.system.menu.form.perms.required')" />
|
||||
</NFormItemGi>
|
||||
<NFormItemGi v-if="!isBtn" :span="12" path="isFrame">
|
||||
<template #label>
|
||||
<div class="flex-center">
|
||||
<FormTip :content="$t('page.system.menu.isFrameTip')" />
|
||||
<span>{{ $t('page.system.menu.isFrame') }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<NRadioGroup v-model:value="model.isFrame">
|
||||
<NSpace>
|
||||
<NRadio
|
||||
v-for="option in menuIsFrameOptions"
|
||||
:key="option.value"
|
||||
:value="option.value"
|
||||
:label="option.label"
|
||||
/>
|
||||
</NSpace>
|
||||
</NRadioGroup>
|
||||
</NFormItemGi>
|
||||
<NFormItemGi v-if="isMenu" :span="12" path="isCache">
|
||||
<template #label>
|
||||
<div class="flex-center">
|
||||
<FormTip :content="$t('page.system.menu.isCacheTip')" />
|
||||
<span>{{ $t('page.system.menu.isCache') }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<NRadioGroup v-model:value="model.isCache">
|
||||
<NSpace>
|
||||
<NRadio value="0" label="是" />
|
||||
<NRadio value="1" label="否" />
|
||||
</NSpace>
|
||||
</NRadioGroup>
|
||||
</NFormItemGi>
|
||||
|
||||
<NFormItemGi v-if="!isBtn" :span="12" :label="$t('page.system.menu.visible')" path="visible">
|
||||
<template #label>
|
||||
<div class="flex-center">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user