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

28
src/views/manage/menu/index.vue
View File

@ -37,19 +37,15 @@ const { columns, filteredColumns, data, loading, pagination, getData } = useTabl
width: 48
},
{
key: 'index',
title: $t('common.index'),
width: 120,
render: (_, index) => {
return <span>{getIndex(index)}</span>;
},
key: 'id',
title: $t('page.manage.menu.id'),
align: 'center'
},
{
key: 'menuType',
title: $t('page.manage.menu.menuType'),
align: 'center',
width: 120,
width: 80,
render: row => {
const tagMap: Record<Api.Common.EnableStatus, NaiveUI.ThemeColor> = {
1: 'default',
@ -107,7 +103,7 @@ const { columns, filteredColumns, data, loading, pagination, getData } = useTabl
key: 'status',
title: $t('page.manage.menu.menuStatus'),
align: 'center',
width: 120,
width: 80,
render: row => {
if (row.status === null) {
return null;
@ -127,7 +123,7 @@ const { columns, filteredColumns, data, loading, pagination, getData } = useTabl
key: 'hideInMenu',
title: $t('page.manage.menu.hideInMenu'),
align: 'center',
width: 100,
width: 80,
render: row => {
const hide: CommonType.YesOrNo = row.hideInMenu ? 'Y' : 'N';
@ -141,11 +137,17 @@ const { columns, filteredColumns, data, loading, pagination, getData } = useTabl
return <NTag type={tagMap[hide]}>{label}</NTag>;
}
},
{
key: 'parentId',
title: $t('page.manage.menu.parentId'),
width: 90,
align: 'center'
},
{
key: 'order',
title: $t('page.manage.menu.order'),
align: 'center',
width: 80
width: 60
},
{
key: 'operate',
@ -219,12 +221,6 @@ async function handleDelete(id: number) {
getData();
}
function getIndex(index: number) {
const { page = 0, pageSize = 10 } = pagination;
return String((page - 1) * pageSize + index + 1);
}
</script>
<template>

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>