mirror of
https://github.com/soybeanjs/soybean-admin.git
synced 2025-09-20 18:46:39 +08:00
feat(projects): page manage_menu
This commit is contained in:
Soybean
parent
f8467ceb17
commit
87d65d3b1c
@ -1,11 +1,11 @@
|
||||
import { transformRecordToOption } from '@/utils/common';
|
||||
|
||||
export const roleStatusRecord: Record<Api.SystemManage.RoleStatus, App.I18n.I18nKey> = {
|
||||
'1': 'page.manage.role.status.enable',
|
||||
'2': 'page.manage.role.status.disable'
|
||||
export const enableStatusRecord: Record<Api.Common.EnableStatus, App.I18n.I18nKey> = {
|
||||
'1': 'page.manage.common.status.enable',
|
||||
'2': 'page.manage.common.status.disable'
|
||||
};
|
||||
|
||||
export const roleStatusOptions = transformRecordToOption(roleStatusRecord);
|
||||
export const enableStatusOptions = transformRecordToOption(enableStatusRecord);
|
||||
|
||||
export const userGenderRecord: Record<Api.SystemManage.UserGender, App.I18n.I18nKey> = {
|
||||
'1': 'page.manage.user.gender.male',
|
||||
@ -14,9 +14,9 @@ export const userGenderRecord: Record<Api.SystemManage.UserGender, App.I18n.I18n
|
||||
|
||||
export const userGenderOptions = transformRecordToOption(userGenderRecord);
|
||||
|
||||
export const userStatusRecord: Record<Api.SystemManage.UserStatus, App.I18n.I18nKey> = {
|
||||
'1': 'page.manage.user.status.enable',
|
||||
'2': 'page.manage.user.status.disable'
|
||||
export const menuTypeRecord: Record<Api.SystemManage.MenuType, App.I18n.I18nKey> = {
|
||||
'1': 'page.manage.menu.type.directory',
|
||||
'2': 'page.manage.menu.type.menu'
|
||||
};
|
||||
|
||||
export const userStatusOptions = transformRecordToOption(userStatusRecord);
|
||||
export const menuTypeOptions = transformRecordToOption(menuTypeRecord);
|
||||
|
||||
8
src/constants/common.ts
Normal file
8
src/constants/common.ts
Normal file
@ -0,0 +1,8 @@
|
||||
import { transformRecordToOption } from '@/utils/common';
|
||||
|
||||
export const yesOrNoRecord: Record<CommonType.YesOrNo, App.I18n.I18nKey> = {
|
||||
Y: 'common.yesOrNo.yes',
|
||||
N: 'common.yesOrNo.no'
|
||||
};
|
||||
|
||||
export const yesOrNoOptions = transformRecordToOption(yesOrNoRecord);
|
||||
@ -33,7 +33,7 @@ export type TableConfig<TableData extends BaseData = BaseData, Fn extends ApiFn
|
||||
/** api function to get table data */
|
||||
apiFn: Fn;
|
||||
/** api params */
|
||||
apiParams: Parameters<Fn>[0];
|
||||
apiParams?: Parameters<Fn>[0];
|
||||
/** transform api response to table data */
|
||||
transformer: Transformer<TableData, Awaited<ReturnType<Fn>>>;
|
||||
/** pagination */
|
||||
|
||||
@ -30,7 +30,11 @@ const local: App.I18n.Schema = {
|
||||
tip: 'Tip',
|
||||
update: 'Update',
|
||||
updateSuccess: 'Update Success',
|
||||
userCenter: 'User Center'
|
||||
userCenter: 'User Center',
|
||||
yesOrNo: {
|
||||
yes: 'Yes',
|
||||
no: 'No'
|
||||
}
|
||||
},
|
||||
theme: {
|
||||
themeSchema: {
|
||||
@ -253,27 +257,36 @@ const local: App.I18n.Schema = {
|
||||
}
|
||||
},
|
||||
manage: {
|
||||
common: {
|
||||
status: {
|
||||
enable: 'Enable',
|
||||
disable: 'Disable'
|
||||
}
|
||||
},
|
||||
role: {
|
||||
title: 'Role List',
|
||||
roleName: 'Role Name',
|
||||
roleCode: 'Role Code',
|
||||
roleStatus: 'Role Status',
|
||||
roleDesc: 'Role Description',
|
||||
form: {
|
||||
roleName: 'Please enter role name',
|
||||
roleCode: 'Please enter role code',
|
||||
roleStatus: 'Please select role status',
|
||||
roleDesc: 'Please enter role description'
|
||||
},
|
||||
roleName: 'Role Name',
|
||||
roleCode: 'Role Code',
|
||||
roleStatus: 'Role Status',
|
||||
roleDesc: 'Role Description',
|
||||
addRole: 'Add Role',
|
||||
editRole: 'Edit Role',
|
||||
status: {
|
||||
enable: 'Enable',
|
||||
disable: 'Disable'
|
||||
}
|
||||
editRole: 'Edit Role'
|
||||
},
|
||||
user: {
|
||||
title: 'User List',
|
||||
userName: 'User Name',
|
||||
userGender: 'Gender',
|
||||
nickName: 'Nick Name',
|
||||
userPhone: 'Phone Number',
|
||||
userEmail: 'Email',
|
||||
userStatus: 'User Status',
|
||||
userRole: 'User Role',
|
||||
form: {
|
||||
userName: 'Please enter user name',
|
||||
userGender: 'Please select gender',
|
||||
@ -283,22 +296,64 @@ const local: App.I18n.Schema = {
|
||||
userStatus: 'Please select user status',
|
||||
userRole: 'Please select user role'
|
||||
},
|
||||
userName: 'User Name',
|
||||
userGender: 'Gender',
|
||||
nickName: 'Nick Name',
|
||||
userPhone: 'Phone Number',
|
||||
userEmail: 'Email',
|
||||
userStatus: 'User Status',
|
||||
userRole: 'User Role',
|
||||
addUser: 'Add User',
|
||||
editUser: 'Edit User',
|
||||
gender: {
|
||||
male: 'Male',
|
||||
female: 'Female'
|
||||
}
|
||||
},
|
||||
menu: {
|
||||
title: 'Menu List',
|
||||
menuType: 'Menu Type',
|
||||
menuName: 'Menu Name',
|
||||
routeName: 'Route Name',
|
||||
routePath: 'Route Path',
|
||||
page: 'Page Component',
|
||||
layout: 'Layout Component',
|
||||
i18nKey: 'I18n Key',
|
||||
icon: 'Icon',
|
||||
localIcon: 'Local Icon',
|
||||
order: 'Order',
|
||||
keepAlive: 'Keep Alive',
|
||||
href: 'Href',
|
||||
hideInMenu: 'Hide In Menu',
|
||||
activeMenu: 'Active Menu',
|
||||
multiTab: 'Multi Tab',
|
||||
fixedIndexInTab: 'Fixed Index In Tab',
|
||||
button: 'Button',
|
||||
buttonCode: 'Button Code',
|
||||
buttonDesc: 'Button Desc',
|
||||
menuStatus: 'Menu Status',
|
||||
form: {
|
||||
menuType: 'Please select menu type',
|
||||
menuName: 'Please enter menu name',
|
||||
routeName: 'Please enter route name',
|
||||
routePath: 'Please enter route path',
|
||||
page: 'Please select page component',
|
||||
layout: 'Please select layout component',
|
||||
i18nKey: 'Please enter i18n key',
|
||||
icon: 'Please enter icon',
|
||||
localIcon: 'Please select local icon',
|
||||
order: 'Please enter order',
|
||||
keepAlive: 'Please select whether to cache route',
|
||||
href: 'Please enter href',
|
||||
hideInMenu: 'Please select whether to hide menu',
|
||||
activeMenu: 'Please enter the route name of the highlighted menu',
|
||||
multiTab: 'Please select whether to support multiple tabs',
|
||||
fixedInTab: 'Please select whether to fix in the tab',
|
||||
fixedIndexInTab: 'Please enter the index fixed in the tab',
|
||||
button: 'Please select whether it is a button',
|
||||
buttonCode: 'Please enter button code',
|
||||
buttonDesc: 'Please enter button description',
|
||||
menuStatus: 'Please select menu status'
|
||||
},
|
||||
status: {
|
||||
enable: 'Enable',
|
||||
disable: 'Disable'
|
||||
addMenu: 'Add Menu',
|
||||
editMenu: 'Edit Menu',
|
||||
addChildMenu: 'Add Child Menu',
|
||||
type: {
|
||||
directory: 'Directory',
|
||||
menu: 'Menu'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -30,7 +30,11 @@ const local: App.I18n.Schema = {
|
||||
tip: '提示',
|
||||
update: '更新',
|
||||
updateSuccess: '更新成功',
|
||||
userCenter: '个人中心'
|
||||
userCenter: '个人中心',
|
||||
yesOrNo: {
|
||||
yes: '是',
|
||||
no: '否'
|
||||
}
|
||||
},
|
||||
theme: {
|
||||
themeSchema: {
|
||||
@ -253,27 +257,36 @@ const local: App.I18n.Schema = {
|
||||
}
|
||||
},
|
||||
manage: {
|
||||
common: {
|
||||
status: {
|
||||
enable: '启用',
|
||||
disable: '禁用'
|
||||
}
|
||||
},
|
||||
role: {
|
||||
title: '角色列表',
|
||||
roleName: '角色名称',
|
||||
roleCode: '角色编码',
|
||||
roleStatus: '角色状态',
|
||||
roleDesc: '角色描述',
|
||||
form: {
|
||||
roleName: '请输入角色名称',
|
||||
roleCode: '请输入角色编码',
|
||||
roleStatus: '请选择角色状态',
|
||||
roleDesc: '请输入角色描述'
|
||||
},
|
||||
roleName: '角色名称',
|
||||
roleCode: '角色编码',
|
||||
roleStatus: '角色状态',
|
||||
roleDesc: '角色描述',
|
||||
addRole: '新增角色',
|
||||
editRole: '编辑角色',
|
||||
status: {
|
||||
enable: '启用',
|
||||
disable: '禁用'
|
||||
}
|
||||
editRole: '编辑角色'
|
||||
},
|
||||
user: {
|
||||
title: '用户列表',
|
||||
userName: '用户名',
|
||||
userGender: '性别',
|
||||
nickName: '昵称',
|
||||
userPhone: '手机号',
|
||||
userEmail: '邮箱',
|
||||
userStatus: '用户状态',
|
||||
userRole: '用户角色',
|
||||
form: {
|
||||
userName: '请输入用户名',
|
||||
userGender: '请选择性别',
|
||||
@ -283,22 +296,64 @@ const local: App.I18n.Schema = {
|
||||
userStatus: '请选择用户状态',
|
||||
userRole: '请选择用户角色'
|
||||
},
|
||||
userName: '用户名',
|
||||
userGender: '性别',
|
||||
nickName: '昵称',
|
||||
userPhone: '手机号',
|
||||
userEmail: '邮箱',
|
||||
userStatus: '用户状态',
|
||||
userRole: '用户角色',
|
||||
addUser: '新增用户',
|
||||
editUser: '编辑用户',
|
||||
gender: {
|
||||
male: '男',
|
||||
female: '女'
|
||||
}
|
||||
},
|
||||
menu: {
|
||||
title: '菜单列表',
|
||||
menuType: '菜单类型',
|
||||
menuName: '菜单名称',
|
||||
routeName: '路由名称',
|
||||
routePath: '路由路径',
|
||||
page: '页面组件',
|
||||
layout: '布局',
|
||||
i18nKey: '国际化key',
|
||||
icon: '图标',
|
||||
localIcon: '本地图标',
|
||||
order: '排序',
|
||||
keepAlive: '缓存路由',
|
||||
href: '外链',
|
||||
hideInMenu: '隐藏菜单',
|
||||
activeMenu: '高亮的菜单',
|
||||
multiTab: '支持多页签',
|
||||
fixedIndexInTab: '固定在页签中的序号',
|
||||
button: '按钮',
|
||||
buttonCode: '按钮编码',
|
||||
buttonDesc: '按钮描述',
|
||||
menuStatus: '菜单状态',
|
||||
form: {
|
||||
menuType: '请选择菜单类型',
|
||||
menuName: '请输入菜单名称',
|
||||
routeName: '请输入路由名称',
|
||||
routePath: '请输入路由路径',
|
||||
page: '请选择页面组件',
|
||||
layout: '请选择布局组件',
|
||||
i18nKey: '请输入国际化key',
|
||||
icon: '请输入图标',
|
||||
localIcon: '请选择本地图标',
|
||||
order: '请输入排序',
|
||||
keepAlive: '请选择是否缓存路由',
|
||||
href: '请输入外链',
|
||||
hideInMenu: '请选择是否隐藏菜单',
|
||||
activeMenu: '请输入高亮的菜单的路由名称',
|
||||
multiTab: '请选择是否支持多标签',
|
||||
fixedInTab: '请选择是否固定在页签中',
|
||||
fixedIndexInTab: '请输入固定在页签中的序号',
|
||||
button: '请选择是否按钮',
|
||||
buttonCode: '请输入按钮编码',
|
||||
buttonDesc: '请输入按钮描述',
|
||||
menuStatus: '请选择菜单状态'
|
||||
},
|
||||
status: {
|
||||
enable: '启用',
|
||||
disable: '禁用'
|
||||
addMenu: '新增菜单',
|
||||
editMenu: '编辑菜单',
|
||||
addChildMenu: '新增子菜单',
|
||||
type: {
|
||||
directory: '目录',
|
||||
menu: '菜单'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -29,3 +29,11 @@ export function fetchGetUserList(params?: Api.SystemManage.UserSearchParams) {
|
||||
params
|
||||
});
|
||||
}
|
||||
|
||||
/** get menu list */
|
||||
export function fetchGetMenuList() {
|
||||
return request<Api.SystemManage.Menu[]>({
|
||||
url: '/systemManage/getMenuList',
|
||||
method: 'get'
|
||||
});
|
||||
}
|
||||
|
||||
109
src/typings/api.d.ts
vendored
109
src/typings/api.d.ts
vendored
@ -20,6 +20,14 @@ declare namespace Api {
|
||||
records: T[];
|
||||
}
|
||||
|
||||
/**
|
||||
* enable status
|
||||
*
|
||||
* - "1": enabled
|
||||
* - "2": disabled
|
||||
*/
|
||||
type EnableStatus = '1' | '2';
|
||||
|
||||
/** common record */
|
||||
type CommonRecord<T extends NonNullable<unknown>> = {
|
||||
/** record id */
|
||||
@ -32,6 +40,8 @@ declare namespace Api {
|
||||
updateBy: string;
|
||||
/** record update time */
|
||||
updateTime: string;
|
||||
/** record status */
|
||||
status: EnableStatus | null;
|
||||
} & T;
|
||||
}
|
||||
|
||||
@ -79,14 +89,6 @@ declare namespace Api {
|
||||
namespace SystemManage {
|
||||
type CommonSearchParams = Pick<Common.PaginatingCommonParams, 'current' | 'size'>;
|
||||
|
||||
/**
|
||||
* role status
|
||||
*
|
||||
* - "1": enabled
|
||||
* - "2": disabled
|
||||
*/
|
||||
type RoleStatus = '1' | '2';
|
||||
|
||||
/** role */
|
||||
type Role = Common.CommonRecord<{
|
||||
/** role name */
|
||||
@ -95,13 +97,11 @@ declare namespace Api {
|
||||
roleCode: string;
|
||||
/** role description */
|
||||
roleDesc: string;
|
||||
/** role status */
|
||||
roleStatus: RoleStatus | null;
|
||||
}>;
|
||||
|
||||
/** role search params */
|
||||
type RoleSearchParams = CommonType.RecordNullable<
|
||||
Pick<Api.SystemManage.Role, 'roleName' | 'roleCode' | 'roleStatus'> & CommonSearchParams
|
||||
Pick<Api.SystemManage.Role, 'roleName' | 'roleCode' | 'status'> & CommonSearchParams
|
||||
>;
|
||||
|
||||
/** role list */
|
||||
@ -118,14 +118,6 @@ declare namespace Api {
|
||||
*/
|
||||
type UserGender = '1' | '2';
|
||||
|
||||
/**
|
||||
* user status
|
||||
*
|
||||
* - "1": enabled
|
||||
* - "2": disabled
|
||||
*/
|
||||
type UserStatus = '1' | '2';
|
||||
|
||||
/** user */
|
||||
type User = Common.CommonRecord<{
|
||||
/** user name */
|
||||
@ -140,17 +132,90 @@ declare namespace Api {
|
||||
userEmail: string;
|
||||
/** user role code collection */
|
||||
userRoles: string[];
|
||||
/** user status */
|
||||
userStatus: UserStatus | null;
|
||||
}>;
|
||||
|
||||
/** user search params */
|
||||
type UserSearchParams = CommonType.RecordNullable<
|
||||
Pick<Api.SystemManage.User, 'userName' | 'userGender' | 'nickName' | 'userPhone' | 'userEmail' | 'userStatus'> &
|
||||
Pick<Api.SystemManage.User, 'userName' | 'userGender' | 'nickName' | 'userPhone' | 'userEmail' | 'status'> &
|
||||
CommonSearchParams
|
||||
>;
|
||||
|
||||
/** user list */
|
||||
type UserList = Common.PaginatingQueryRecord<User>;
|
||||
|
||||
/**
|
||||
* menu type
|
||||
*
|
||||
* - "1": directory
|
||||
* - "2": menu
|
||||
*/
|
||||
type MenuType = '1' | '2';
|
||||
|
||||
type MenuButton = {
|
||||
/**
|
||||
* button code
|
||||
*
|
||||
* it can be used to control the button permission
|
||||
*/
|
||||
code: string;
|
||||
/** button description */
|
||||
desc: string;
|
||||
};
|
||||
|
||||
/**
|
||||
* icon type
|
||||
*
|
||||
* - "1": iconify icon
|
||||
* - "2": local icon
|
||||
*/
|
||||
type IconType = '1' | '2';
|
||||
|
||||
type Menu = Common.CommonRecord<{
|
||||
/** menu type */
|
||||
menuType: MenuType;
|
||||
/** menu name */
|
||||
menuName: string;
|
||||
/** route name */
|
||||
routeName: string;
|
||||
/** route path */
|
||||
routePath: string;
|
||||
/** component */
|
||||
component?: string;
|
||||
/**
|
||||
* i18n key
|
||||
*
|
||||
* it is for internationalization
|
||||
*/
|
||||
i18nKey?: App.I18n.I18nKey;
|
||||
/** iconify icon name or local icon name */
|
||||
icon: string;
|
||||
/** icon type */
|
||||
iconType: IconType;
|
||||
/** menu order */
|
||||
order: number;
|
||||
/** whether to cache the route */
|
||||
keepAlive?: boolean;
|
||||
/** outer link */
|
||||
href?: string;
|
||||
/** whether to hide the route in the menu */
|
||||
hideInMenu?: boolean;
|
||||
/**
|
||||
* The menu key will be activated when entering the route
|
||||
*
|
||||
* The route is not in the menu
|
||||
*
|
||||
* @example
|
||||
* the route is "user_detail", if it is set to "user_list", the menu "user_list" will be activated
|
||||
*/
|
||||
activeMenu?: import('@elegant-router/types').LastLevelRouteKey;
|
||||
/** By default, the same route path will use one tab, if set to true, it will use multiple tabs */
|
||||
multiTab?: boolean;
|
||||
/** If set, the route will be fixed in tabs, and the value is the order of fixed tabs */
|
||||
fixedIndexInTab?: number;
|
||||
/** menu buttons */
|
||||
buttons?: MenuButton[];
|
||||
/** children menu */
|
||||
children?: Menu[];
|
||||
}>;
|
||||
}
|
||||
}
|
||||
|
||||
91
src/typings/app.d.ts
vendored
91
src/typings/app.d.ts
vendored
@ -277,6 +277,10 @@ declare namespace App {
|
||||
update: string;
|
||||
updateSuccess: string;
|
||||
userCenter: string;
|
||||
yesOrNo: {
|
||||
yes: string;
|
||||
no: string;
|
||||
};
|
||||
};
|
||||
theme: {
|
||||
themeSchema: { title: string } & Record<UnionKey.ThemeScheme, string>;
|
||||
@ -440,27 +444,36 @@ declare namespace App {
|
||||
};
|
||||
};
|
||||
manage: {
|
||||
common: {
|
||||
status: {
|
||||
enable: string;
|
||||
disable: string;
|
||||
};
|
||||
};
|
||||
role: {
|
||||
title: string;
|
||||
roleName: string;
|
||||
roleCode: string;
|
||||
roleStatus: string;
|
||||
roleDesc: string;
|
||||
form: {
|
||||
roleName: string;
|
||||
roleCode: string;
|
||||
roleStatus: string;
|
||||
roleDesc: string;
|
||||
};
|
||||
roleName: string;
|
||||
roleCode: string;
|
||||
roleStatus: string;
|
||||
roleDesc: string;
|
||||
addRole: string;
|
||||
editRole: string;
|
||||
status: {
|
||||
enable: string;
|
||||
disable: string;
|
||||
};
|
||||
};
|
||||
user: {
|
||||
title: string;
|
||||
userName: string;
|
||||
userGender: string;
|
||||
nickName: string;
|
||||
userPhone: string;
|
||||
userEmail: string;
|
||||
userStatus: string;
|
||||
userRole: string;
|
||||
form: {
|
||||
userName: string;
|
||||
userGender: string;
|
||||
@ -470,22 +483,64 @@ declare namespace App {
|
||||
userStatus: string;
|
||||
userRole: string;
|
||||
};
|
||||
userName: string;
|
||||
userGender: string;
|
||||
nickName: string;
|
||||
userPhone: string;
|
||||
userEmail: string;
|
||||
userStatus: string;
|
||||
userRole: string;
|
||||
addUser: string;
|
||||
editUser: string;
|
||||
gender: {
|
||||
male: string;
|
||||
female: string;
|
||||
};
|
||||
status: {
|
||||
enable: string;
|
||||
disable: string;
|
||||
};
|
||||
menu: {
|
||||
title: string;
|
||||
menuType: string;
|
||||
menuName: string;
|
||||
routeName: string;
|
||||
routePath: string;
|
||||
page: string;
|
||||
layout: string;
|
||||
i18nKey: string;
|
||||
icon: string;
|
||||
localIcon: string;
|
||||
order: string;
|
||||
keepAlive: string;
|
||||
href: string;
|
||||
hideInMenu: string;
|
||||
activeMenu: string;
|
||||
multiTab: string;
|
||||
fixedIndexInTab: string;
|
||||
button: string;
|
||||
buttonCode: string;
|
||||
buttonDesc: string;
|
||||
menuStatus: string;
|
||||
form: {
|
||||
menuType: string;
|
||||
menuName: string;
|
||||
routeName: string;
|
||||
routePath: string;
|
||||
page: string;
|
||||
layout: string;
|
||||
i18nKey: string;
|
||||
icon: string;
|
||||
localIcon: string;
|
||||
order: string;
|
||||
keepAlive: string;
|
||||
href: string;
|
||||
hideInMenu: string;
|
||||
activeMenu: string;
|
||||
multiTab: string;
|
||||
fixedInTab: string;
|
||||
fixedIndexInTab: string;
|
||||
button: string;
|
||||
buttonCode: string;
|
||||
buttonDesc: string;
|
||||
menuStatus: string;
|
||||
};
|
||||
addMenu: string;
|
||||
editMenu: string;
|
||||
addChildMenu: string;
|
||||
type: {
|
||||
directory: string;
|
||||
menu: string;
|
||||
};
|
||||
};
|
||||
};
|
||||
|
||||
@ -1,7 +1,258 @@
|
||||
<script setup lang="ts"></script>
|
||||
<script setup lang="tsx">
|
||||
import { ref } from 'vue';
|
||||
import { NButton, NPopconfirm, NTag } from 'naive-ui';
|
||||
import { useBoolean } from '@sa/hooks';
|
||||
import { fetchGetMenuList } from '@/service/api';
|
||||
import { useAppStore } from '@/store/modules/app';
|
||||
import { useTable } from '@/hooks/common/table';
|
||||
import { $t } from '@/locales';
|
||||
import { yesOrNoRecord } from '@/constants/common';
|
||||
import { enableStatusRecord, menuTypeRecord } from '@/constants/business';
|
||||
import SvgIcon from '@/components/custom/svg-icon.vue';
|
||||
import MenuOperateDrawer, { type OperateType } from './modules/menu-operate-drawer.vue';
|
||||
|
||||
const appStore = useAppStore();
|
||||
const { bool: drawerVisible, setTrue: openDrawer } = useBoolean();
|
||||
|
||||
const { columns, filteredColumns, data, loading, pagination, getData } = useTable<
|
||||
Api.SystemManage.Menu,
|
||||
typeof fetchGetMenuList,
|
||||
'index' | 'operate'
|
||||
>({
|
||||
apiFn: fetchGetMenuList,
|
||||
transformer: res => {
|
||||
const menus = res.data || [];
|
||||
|
||||
return {
|
||||
data: menus,
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
total: menus.length
|
||||
};
|
||||
},
|
||||
columns: () => [
|
||||
{
|
||||
type: 'selection',
|
||||
align: 'center',
|
||||
width: 48
|
||||
},
|
||||
{
|
||||
key: 'index',
|
||||
title: $t('common.index'),
|
||||
render: (_, index) => {
|
||||
return <span>{getIndex(index)}</span>;
|
||||
},
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
key: 'menuType',
|
||||
title: $t('page.manage.menu.menuType'),
|
||||
align: 'center',
|
||||
width: 100,
|
||||
render: row => {
|
||||
const tagMap: Record<Api.Common.EnableStatus, NaiveUI.ThemeColor> = {
|
||||
1: 'default',
|
||||
2: 'primary'
|
||||
};
|
||||
|
||||
const label = $t(menuTypeRecord[row.menuType]);
|
||||
|
||||
return <NTag type={tagMap[row.menuType]}>{label}</NTag>;
|
||||
}
|
||||
},
|
||||
{
|
||||
key: 'menuName',
|
||||
title: $t('page.manage.menu.menuName'),
|
||||
render: row => {
|
||||
const { i18nKey, menuName } = row;
|
||||
|
||||
const label = i18nKey ? $t(i18nKey) : menuName;
|
||||
|
||||
return <span>{label}</span>;
|
||||
}
|
||||
},
|
||||
{
|
||||
key: 'icon',
|
||||
title: $t('page.manage.menu.icon'),
|
||||
align: 'center',
|
||||
width: 60,
|
||||
render: row => {
|
||||
const icon = row.iconType === '1' ? row.icon : undefined;
|
||||
|
||||
const localIcon = row.iconType === '2' ? row.icon : undefined;
|
||||
|
||||
return (
|
||||
<div class="flex-center">
|
||||
<SvgIcon icon={icon} localIcon={localIcon} class="text-icon" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
key: 'routeName',
|
||||
title: $t('page.manage.menu.routeName')
|
||||
},
|
||||
{
|
||||
key: 'routePath',
|
||||
title: $t('page.manage.menu.routePath')
|
||||
},
|
||||
{
|
||||
key: 'status',
|
||||
title: $t('page.manage.menu.menuStatus'),
|
||||
align: 'center',
|
||||
width: 100,
|
||||
render: row => {
|
||||
if (row.status === null) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const tagMap: Record<Api.Common.EnableStatus, NaiveUI.ThemeColor> = {
|
||||
1: 'success',
|
||||
2: 'warning'
|
||||
};
|
||||
|
||||
const label = $t(enableStatusRecord[row.status]);
|
||||
|
||||
return <NTag type={tagMap[row.status]}>{label}</NTag>;
|
||||
}
|
||||
},
|
||||
{
|
||||
key: 'hideInMenu',
|
||||
title: $t('page.manage.menu.hideInMenu'),
|
||||
align: 'center',
|
||||
width: 100,
|
||||
render: row => {
|
||||
const hide: CommonType.YesOrNo = row.hideInMenu ? 'Y' : 'N';
|
||||
|
||||
const tagMap: Record<CommonType.YesOrNo, NaiveUI.ThemeColor> = {
|
||||
Y: 'error',
|
||||
N: 'default'
|
||||
};
|
||||
|
||||
const label = $t(yesOrNoRecord[hide]);
|
||||
|
||||
return <NTag type={tagMap[hide]}>{label}</NTag>;
|
||||
}
|
||||
},
|
||||
{
|
||||
key: 'order',
|
||||
title: $t('page.manage.menu.order'),
|
||||
align: 'center',
|
||||
width: 64
|
||||
},
|
||||
{
|
||||
key: 'operate',
|
||||
title: $t('common.operate'),
|
||||
align: 'center',
|
||||
width: 230,
|
||||
render: row => (
|
||||
<div class="flex-center justify-end gap-8px">
|
||||
{row.menuType === '1' && (
|
||||
<NButton type="primary" ghost size="small" onClick={() => handleAddChildMenu(row.id)}>
|
||||
{$t('page.manage.menu.addChildMenu')}
|
||||
</NButton>
|
||||
)}
|
||||
<NButton type="primary" ghost size="small" onClick={() => handleEdit(row.id)}>
|
||||
{$t('common.edit')}
|
||||
</NButton>
|
||||
<NPopconfirm onPositiveClick={() => handleDelete(row.id)}>
|
||||
{{
|
||||
default: () => $t('common.confirmDelete'),
|
||||
trigger: () => (
|
||||
<NButton type="error" ghost size="small">
|
||||
{$t('common.delete')}
|
||||
</NButton>
|
||||
)
|
||||
}}
|
||||
</NPopconfirm>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
const operateType = ref<OperateType>('add');
|
||||
|
||||
function handleAdd() {
|
||||
operateType.value = 'add';
|
||||
openDrawer();
|
||||
}
|
||||
|
||||
const checkedRowKeys = ref<string[]>([]);
|
||||
|
||||
async function handleBatchDelete() {
|
||||
// request
|
||||
console.log(checkedRowKeys.value);
|
||||
window.$message?.success($t('common.deleteSuccess'));
|
||||
|
||||
checkedRowKeys.value = [];
|
||||
|
||||
getData();
|
||||
}
|
||||
|
||||
function handleAddChildMenu(id: number) {
|
||||
console.log('id: ', id);
|
||||
operateType.value = 'add';
|
||||
openDrawer();
|
||||
}
|
||||
|
||||
/** the editing row data */
|
||||
const editingData = ref<Api.SystemManage.Menu | null>(null);
|
||||
|
||||
function handleEdit(id: number) {
|
||||
operateType.value = 'edit';
|
||||
editingData.value = data.value.find(item => item.id === id) || null;
|
||||
openDrawer();
|
||||
}
|
||||
|
||||
async function handleDelete(id: number) {
|
||||
// request
|
||||
console.log(id);
|
||||
window.$message?.success($t('common.deleteSuccess'));
|
||||
|
||||
getData();
|
||||
}
|
||||
|
||||
function getIndex(index: number) {
|
||||
const { page = 0, pageSize = 10 } = pagination;
|
||||
|
||||
return String((page - 1) * pageSize + index + 1);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>manage_menu</div>
|
||||
<div class="flex-vertical-stretch gap-16px overflow-hidden <sm:overflow-auto">
|
||||
<NCard :title="$t('page.manage.menu.title')" :bordered="false" size="small" class="card-wrapper sm:flex-1-hidden">
|
||||
<template #header-extra>
|
||||
<TableHeaderOperation
|
||||
v-model:columns="filteredColumns"
|
||||
:disabled-delete="checkedRowKeys.length === 0"
|
||||
:loading="loading"
|
||||
@add="handleAdd"
|
||||
@delete="handleBatchDelete"
|
||||
@refresh="getData"
|
||||
/>
|
||||
</template>
|
||||
<NDataTable
|
||||
v-model:checked-row-keys="checkedRowKeys"
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
size="small"
|
||||
:flex-height="!appStore.isMobile"
|
||||
:scroll-x="640"
|
||||
:loading="loading"
|
||||
:pagination="pagination"
|
||||
:row-key="item => item.id"
|
||||
class="sm:h-full"
|
||||
/>
|
||||
<MenuOperateDrawer
|
||||
v-model:visible="drawerVisible"
|
||||
:operate-type="operateType"
|
||||
:row-data="editingData"
|
||||
@submitted="getData"
|
||||
/>
|
||||
</NCard>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
||||
113
src/views/manage/menu/modules/menu-operate-drawer.vue
Normal file
113
src/views/manage/menu/modules/menu-operate-drawer.vue
Normal file
@ -0,0 +1,113 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, reactive, watch } from 'vue';
|
||||
import { useFormRules, useNaiveForm } from '@/hooks/common/form';
|
||||
import { $t } from '@/locales';
|
||||
|
||||
defineOptions({
|
||||
name: 'MenuOperateDrawer'
|
||||
});
|
||||
|
||||
/**
|
||||
* the type of operation
|
||||
*
|
||||
* - add: add user
|
||||
* - edit: edit user
|
||||
*/
|
||||
export type OperateType = 'add' | 'edit';
|
||||
|
||||
interface Props {
|
||||
/** the type of operation */
|
||||
operateType: OperateType;
|
||||
/** the edit row data */
|
||||
rowData?: Api.SystemManage.Menu | null;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
|
||||
interface Emits {
|
||||
(e: 'submitted'): void;
|
||||
}
|
||||
|
||||
const emit = defineEmits<Emits>();
|
||||
|
||||
const visible = defineModel<boolean>('visible', {
|
||||
default: false
|
||||
});
|
||||
|
||||
const { formRef, validate, restoreValidation } = useNaiveForm();
|
||||
const { defaultRequiredRule } = useFormRules();
|
||||
|
||||
const title = computed(() => {
|
||||
const titles: Record<OperateType, string> = {
|
||||
add: $t('page.manage.menu.addMenu'),
|
||||
edit: $t('page.manage.menu.editMenu')
|
||||
};
|
||||
return titles[props.operateType];
|
||||
});
|
||||
|
||||
type Model = Pick<Api.SystemManage.Menu, 'menuType' | 'menuName' | 'routeName' | 'routePath'>;
|
||||
|
||||
const model: Model = reactive(createDefaultModel());
|
||||
|
||||
function createDefaultModel(): Model {
|
||||
return {
|
||||
menuType: '1',
|
||||
menuName: '',
|
||||
routeName: '',
|
||||
routePath: ''
|
||||
};
|
||||
}
|
||||
|
||||
type RuleKey = Extract<keyof Model, 'userName' | 'userStatus'>;
|
||||
|
||||
const rules: Record<RuleKey, App.Global.FormRule> = {
|
||||
userName: defaultRequiredRule,
|
||||
userStatus: defaultRequiredRule
|
||||
};
|
||||
|
||||
function handleUpdateModelWhenEdit() {
|
||||
if (props.operateType === 'add') {
|
||||
Object.assign(model, createDefaultModel());
|
||||
return;
|
||||
}
|
||||
|
||||
if (props.operateType === 'edit' && props.rowData) {
|
||||
Object.assign(model, props.rowData);
|
||||
}
|
||||
}
|
||||
|
||||
function closeDrawer() {
|
||||
visible.value = false;
|
||||
}
|
||||
|
||||
async function handleSubmit() {
|
||||
await validate();
|
||||
// request
|
||||
window.$message?.success($t('common.updateSuccess'));
|
||||
closeDrawer();
|
||||
emit('submitted');
|
||||
}
|
||||
|
||||
watch(visible, () => {
|
||||
if (visible.value) {
|
||||
handleUpdateModelWhenEdit();
|
||||
restoreValidation();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<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>
|
||||
<template #footer>
|
||||
<NSpace :size="16">
|
||||
<NButton @click="closeDrawer">{{ $t('common.cancel') }}</NButton>
|
||||
<NButton type="primary" @click="handleSubmit">{{ $t('common.confirm') }}</NButton>
|
||||
</NSpace>
|
||||
</template>
|
||||
</NDrawerContent>
|
||||
</NDrawer>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
@ -6,7 +6,7 @@ import { fetchGetRoleList } from '@/service/api';
|
||||
import { useAppStore } from '@/store/modules/app';
|
||||
import { useTable } from '@/hooks/common/table';
|
||||
import { $t } from '@/locales';
|
||||
import { roleStatusRecord } from '@/constants/business';
|
||||
import { enableStatusRecord } from '@/constants/business';
|
||||
import RoleOperateDrawer, { type OperateType } from './modules/role-operate-drawer.vue';
|
||||
import RoleSearch from './modules/role-search.vue';
|
||||
|
||||
@ -24,9 +24,9 @@ const { columns, filteredColumns, data, loading, pagination, getData, searchPara
|
||||
size: 10,
|
||||
// if you want to use the searchParams in Form, you need to define the following properties, and the value is null
|
||||
// the value can not be undefined, otherwise the property in Form will not be reactive
|
||||
status: null,
|
||||
roleName: null,
|
||||
roleCode: null,
|
||||
roleStatus: null
|
||||
roleCode: null
|
||||
},
|
||||
transformer: res => {
|
||||
const { records = [], current = 1, size = 10, total = 0 } = res.data || {};
|
||||
@ -69,23 +69,23 @@ const { columns, filteredColumns, data, loading, pagination, getData, searchPara
|
||||
minWidth: 120
|
||||
},
|
||||
{
|
||||
key: 'roleStatus',
|
||||
key: 'status',
|
||||
title: $t('page.manage.role.roleStatus'),
|
||||
align: 'center',
|
||||
width: 100,
|
||||
render: row => {
|
||||
if (row.roleStatus === null) {
|
||||
if (row.status === null) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const tagMap: Record<Api.SystemManage.RoleStatus, NaiveUI.ThemeColor> = {
|
||||
const tagMap: Record<Api.Common.EnableStatus, NaiveUI.ThemeColor> = {
|
||||
1: 'success',
|
||||
2: 'warning'
|
||||
};
|
||||
|
||||
const label = $t(roleStatusRecord[row.roleStatus]);
|
||||
const label = $t(enableStatusRecord[row.status]);
|
||||
|
||||
return <NTag type={tagMap[row.roleStatus]}>{label}</NTag>;
|
||||
return <NTag type={tagMap[row.status]}>{label}</NTag>;
|
||||
}
|
||||
},
|
||||
{
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
import { computed, reactive, watch } from 'vue';
|
||||
import { useFormRules, useNaiveForm } from '@/hooks/common/form';
|
||||
import { $t } from '@/locales';
|
||||
import { roleStatusOptions } from '@/constants/business';
|
||||
import { enableStatusOptions } from '@/constants/business';
|
||||
|
||||
defineOptions({
|
||||
name: 'RoleOperateDrawer'
|
||||
@ -46,7 +46,7 @@ const title = computed(() => {
|
||||
return titles[props.operateType];
|
||||
});
|
||||
|
||||
type Model = Pick<Api.SystemManage.Role, 'roleName' | 'roleCode' | 'roleDesc' | 'roleStatus'>;
|
||||
type Model = Pick<Api.SystemManage.Role, 'roleName' | 'roleCode' | 'roleDesc' | 'status'>;
|
||||
|
||||
const model: Model = reactive(createDefaultModel());
|
||||
|
||||
@ -55,7 +55,7 @@ function createDefaultModel(): Model {
|
||||
roleName: '',
|
||||
roleCode: '',
|
||||
roleDesc: '',
|
||||
roleStatus: null
|
||||
status: null
|
||||
};
|
||||
}
|
||||
|
||||
@ -64,7 +64,7 @@ type RuleKey = Exclude<keyof Model, 'roleDesc'>;
|
||||
const rules: Record<RuleKey, App.Global.FormRule> = {
|
||||
roleName: defaultRequiredRule,
|
||||
roleCode: defaultRequiredRule,
|
||||
roleStatus: defaultRequiredRule
|
||||
status: defaultRequiredRule
|
||||
};
|
||||
|
||||
function handleUpdateModelWhenEdit() {
|
||||
@ -108,9 +108,9 @@ watch(visible, () => {
|
||||
<NFormItem :label="$t('page.manage.role.roleCode')" path="roleCode">
|
||||
<NInput v-model:value="model.roleCode" :placeholder="$t('page.manage.role.form.roleCode')" />
|
||||
</NFormItem>
|
||||
<NFormItem :label="$t('page.manage.role.roleStatus')" path="roleStatus">
|
||||
<NRadioGroup v-model:value="model.roleStatus">
|
||||
<NRadio v-for="item in roleStatusOptions" :key="item.value" :value="item.value" :label="$t(item.label)" />
|
||||
<NFormItem :label="$t('page.manage.role.roleStatus')" 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.role.roleDesc')" path="roleDesc">
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import { $t } from '@/locales';
|
||||
import { roleStatusOptions } from '@/constants/business';
|
||||
import { enableStatusOptions } from '@/constants/business';
|
||||
import { translateOptions } from '@/utils/common';
|
||||
|
||||
defineOptions({
|
||||
@ -35,11 +35,11 @@ function search() {
|
||||
<NFormItemGi span="24 s:12 m:6" :label="$t('page.manage.role.roleCode')" path="roleCode" class="pr-24px">
|
||||
<NInput v-model:value="model.roleCode" :placeholder="$t('page.manage.role.form.roleCode')" />
|
||||
</NFormItemGi>
|
||||
<NFormItemGi span="24 s:12 m:6" :label="$t('page.manage.role.roleStatus')" path="roleStatus" class="pr-24px">
|
||||
<NFormItemGi span="24 s:12 m:6" :label="$t('page.manage.role.roleStatus')" path="status" class="pr-24px">
|
||||
<NSelect
|
||||
v-model:value="model.roleStatus"
|
||||
v-model:value="model.status"
|
||||
:placeholder="$t('page.manage.role.form.roleStatus')"
|
||||
:options="translateOptions(roleStatusOptions)"
|
||||
:options="translateOptions(enableStatusOptions)"
|
||||
clearable
|
||||
/>
|
||||
</NFormItemGi>
|
||||
|
||||
@ -6,7 +6,7 @@ import { fetchGetUserList } from '@/service/api';
|
||||
import { useAppStore } from '@/store/modules/app';
|
||||
import { useTable } from '@/hooks/common/table';
|
||||
import { $t } from '@/locales';
|
||||
import { userGenderRecord, userStatusRecord } from '@/constants/business';
|
||||
import { enableStatusRecord, userGenderRecord } from '@/constants/business';
|
||||
import UserOperateDrawer, { type OperateType } from './modules/user-operate-drawer.vue';
|
||||
import UserSearch from './modules/user-search.vue';
|
||||
|
||||
@ -24,12 +24,12 @@ const { columns, filteredColumns, data, loading, pagination, getData, searchPara
|
||||
size: 10,
|
||||
// if you want to use the searchParams in Form, you need to define the following properties, and the value is null
|
||||
// the value can not be undefined, otherwise the property in Form will not be reactive
|
||||
status: null,
|
||||
userName: null,
|
||||
userGender: null,
|
||||
nickName: null,
|
||||
userPhone: null,
|
||||
userEmail: null,
|
||||
userStatus: null
|
||||
userEmail: null
|
||||
},
|
||||
transformer: res => {
|
||||
const { records = [], current = 1, size = 10, total = 0 } = res.data || {};
|
||||
@ -99,23 +99,23 @@ const { columns, filteredColumns, data, loading, pagination, getData, searchPara
|
||||
minWidth: 200
|
||||
},
|
||||
{
|
||||
key: 'userStatus',
|
||||
key: 'status',
|
||||
title: $t('page.manage.user.userStatus'),
|
||||
align: 'center',
|
||||
width: 100,
|
||||
render: row => {
|
||||
if (row.userStatus === null) {
|
||||
if (row.status === null) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const tagMap: Record<Api.SystemManage.UserStatus, NaiveUI.ThemeColor> = {
|
||||
const tagMap: Record<Api.Common.EnableStatus, NaiveUI.ThemeColor> = {
|
||||
1: 'success',
|
||||
2: 'warning'
|
||||
};
|
||||
|
||||
const label = $t(userStatusRecord[row.userStatus]);
|
||||
const label = $t(enableStatusRecord[row.status]);
|
||||
|
||||
return <NTag type={tagMap[row.userStatus]}>{label}</NTag>;
|
||||
return <NTag type={tagMap[row.status]}>{label}</NTag>;
|
||||
}
|
||||
},
|
||||
{
|
||||
|
||||
@ -3,7 +3,7 @@ import { computed, reactive, ref, watch } from 'vue';
|
||||
import { useFormRules, useNaiveForm } from '@/hooks/common/form';
|
||||
import { fetchGetAllRoles } from '@/service/api';
|
||||
import { $t } from '@/locales';
|
||||
import { userGenderOptions, userStatusOptions } from '@/constants/business';
|
||||
import { enableStatusOptions, userGenderOptions } from '@/constants/business';
|
||||
|
||||
defineOptions({
|
||||
name: 'UserOperateDrawer'
|
||||
@ -49,7 +49,7 @@ const title = computed(() => {
|
||||
|
||||
type Model = Pick<
|
||||
Api.SystemManage.User,
|
||||
'userName' | 'userGender' | 'nickName' | 'userPhone' | 'userEmail' | 'userRoles' | 'userStatus'
|
||||
'userName' | 'userGender' | 'nickName' | 'userPhone' | 'userEmail' | 'userRoles' | 'status'
|
||||
>;
|
||||
|
||||
const model: Model = reactive(createDefaultModel());
|
||||
@ -62,15 +62,15 @@ function createDefaultModel(): Model {
|
||||
userPhone: '',
|
||||
userEmail: '',
|
||||
userRoles: [],
|
||||
userStatus: null
|
||||
status: null
|
||||
};
|
||||
}
|
||||
|
||||
type RuleKey = Extract<keyof Model, 'userName' | 'userStatus'>;
|
||||
type RuleKey = Extract<keyof Model, 'userName' | 'status'>;
|
||||
|
||||
const rules: Record<RuleKey, App.Global.FormRule> = {
|
||||
userName: defaultRequiredRule,
|
||||
userStatus: defaultRequiredRule
|
||||
status: defaultRequiredRule
|
||||
};
|
||||
|
||||
/** the enabled role options */
|
||||
@ -150,9 +150,9 @@ watch(visible, () => {
|
||||
<NFormItem :label="$t('page.manage.user.userEmail')" path="email">
|
||||
<NInput v-model:value="model.userEmail" :placeholder="$t('page.manage.user.form.userEmail')" />
|
||||
</NFormItem>
|
||||
<NFormItem :label="$t('page.manage.user.userStatus')" path="userStatus">
|
||||
<NRadioGroup v-model:value="model.userStatus">
|
||||
<NRadio v-for="item in userStatusOptions" :key="item.value" :value="item.value" :label="$t(item.label)" />
|
||||
<NFormItem :label="$t('page.manage.user.userStatus')" 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.user.userRole')" path="roles">
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
import { computed } from 'vue';
|
||||
import { $t } from '@/locales';
|
||||
import { useFormRules, useNaiveForm } from '@/hooks/common/form';
|
||||
import { userGenderOptions, userStatusOptions } from '@/constants/business';
|
||||
import { enableStatusOptions, userGenderOptions } from '@/constants/business';
|
||||
import { translateOptions } from '@/utils/common';
|
||||
|
||||
defineOptions({
|
||||
@ -68,9 +68,9 @@ async function search() {
|
||||
</NFormItemGi>
|
||||
<NFormItemGi span="24 s:12 m:6" :label="$t('page.manage.user.userStatus')" path="userStatus" class="pr-24px">
|
||||
<NSelect
|
||||
v-model:value="model.userStatus"
|
||||
v-model:value="model.status"
|
||||
:placeholder="$t('page.manage.user.form.userStatus')"
|
||||
:options="translateOptions(userStatusOptions)"
|
||||
:options="translateOptions(enableStatusOptions)"
|
||||
clearable
|
||||
/>
|
||||
</NFormItemGi>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user