jiangyc/ruoyi-plus-soybean
1
0
Fork 0
mirror of https://github.com/m-xlsea/ruoyi-plus-soybean.git synced 2025-09-24 07:49:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(projects): page manage_menu operateDrawer

Browse Source
This commit is contained in:
Soybean
2024-01-30 00:33:26 +08:00
parent e2085e058d
commit db17c916ef
8 changed files with 130 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
src/views/manage/menu/modules/menu-operate-drawer.vue
View File

@ -1,7 +1,11 @@
<script setup lang="ts">
<script setup lang="tsx">
import { computed, reactive, watch } from 'vue';
import type { SelectOption } from 'naive-ui';
import { useFormRules, useNaiveForm } from '@/hooks/common/form';
import { $t } from '@/locales';
import { enableStatusOptions, menuIconTypeOptions, menuTypeOptions } from '@/constants/business';
import SvgIcon from '@/components/custom/svg-icon.vue';
import { getLocalIcons } from '@/utils/icon';
defineOptions({
name: 'MenuOperateDrawer'
@ -45,7 +49,10 @@ const title = computed(() => {
return titles[props.operateType];
});
type Model = Pick<Api.SystemManage.Menu, 'menuType' | 'menuName' | 'routeName' | 'routePath'>;
type Model = Pick<
Api.SystemManage.Menu,
'menuType' | 'menuName' | 'icon' | 'iconType' | 'routeName' | 'routePath' | 'status' | 'hideInMenu' | 'order'
>;
const model: Model = reactive(createDefaultModel());
@ -53,8 +60,13 @@ function createDefaultModel(): Model {
return {
menuType: '1',
menuName: '',
icon: '',
iconType: '1',
routeName: '',
routePath: ''
routePath: '',
status: null,
hideInMenu: false,
order: 0
};
}
@ -65,6 +77,17 @@ const rules: Record<RuleKey, App.Global.FormRule> = {
userStatus: defaultRequiredRule
};
const localIcons = getLocalIcons();
const localIconOptions = localIcons.map<SelectOption>(item => ({
label: () => (
<div class="flex-y-center gap-16px">
<SvgIcon localIcon={item} class="text-icon" />
<span>{item}</span>
</div>
),
value: item
}));
function handleUpdateModelWhenEdit() {
if (props.operateType === 'add') {
Object.assign(model, createDefaultModel());
@ -99,7 +122,57 @@ watch(visible, () => {
<template>
<NDrawer v-model:show="visible" :title="title" display-directive="show" :width="360">
<NDrawerContent :title="title" :native-scrollbar="false" closable>
<NForm ref="formRef" :model="model" :rules="rules"></NForm>
<NForm ref="formRef" :model="model" :rules="rules" label-placement="left" :label-width="80">
<NFormItem :label="$t('page.manage.menu.menuType')" path="menuType">
<NRadioGroup v-model:value="model.menuType">
<NRadio v-for="item in menuTypeOptions" :key="item.value" :value="item.value" :label="$t(item.label)" />
</NRadioGroup>
</NFormItem>
<NFormItem :label="$t('page.manage.menu.menuName')" path="menuName">
<NInput v-model:value="model.menuName" :placeholder="$t('page.manage.menu.form.menuName')" />
</NFormItem>
<NFormItem :label="$t('page.manage.menu.iconTypeTitle')" path="iconType">
<NRadioGroup v-model:value="model.iconType">
<NRadio v-for="item in menuIconTypeOptions" :key="item.value" :value="item.value" :label="$t(item.label)" />
</NRadioGroup>
</NFormItem>
<NFormItem :label="$t('page.manage.menu.icon')" path="icon">
<template v-if="model.iconType === '1'">
<NInput v-model:value="model.icon" :placeholder="$t('page.manage.menu.form.icon')" class="flex-1">
<template #suffix>
<SvgIcon v-if="model.icon" :icon="model.icon" class="text-icon" />
</template>
</NInput>
</template>
<template v-if="model.iconType === '2'">
<NSelect
v-model:value="model.icon"
:placeholder="$t('page.manage.menu.form.localIcon')"
:options="localIconOptions"
/>
</template>
</NFormItem>
<NFormItem :label="$t('page.manage.menu.routeName')" path="routeName">
<NInput v-model:value="model.routeName" :placeholder="$t('page.manage.menu.form.routeName')" />
</NFormItem>
<NFormItem :label="$t('page.manage.menu.routePath')" path="routePath">
<NInput v-model:value="model.routePath" :placeholder="$t('page.manage.menu.form.routePath')" />
</NFormItem>
<NFormItem :label="$t('page.manage.menu.menuStatus')" path="status">
<NRadioGroup v-model:value="model.status">
<NRadio v-for="item in enableStatusOptions" :key="item.value" :value="item.value" :label="$t(item.label)" />
</NRadioGroup>
</NFormItem>
<NFormItem :label="$t('page.manage.menu.hideInMenu')" path="hideInMenu">
<NRadioGroup v-model:value="model.hideInMenu">
<NRadio value :label="$t('common.yesOrNo.yes')" />
<NRadio :value="false" :label="$t('common.yesOrNo.no')" />
</NRadioGroup>
</NFormItem>
<NFormItem :label="$t('page.manage.menu.order')" path="order">
<NInputNumber v-model:value="model.order" :placeholder="$t('page.manage.menu.form.order')" />
</NFormItem>
</NForm>
<template #footer>
<NSpace :size="16">
<NButton @click="closeDrawer">{{ $t('common.cancel') }}</NButton>