GTsoft/ruoyi-plus-soybean
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(projects): page manage_user

Browse Source
This commit is contained in:
Soybean 2024-01-28 16:24:43 +08:00
parent a19f895cd9
commit 8a170eeebd
11 changed files with 703 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/constants/business.ts
View File

@ -6,3 +6,17 @@ export const roleStatusRecord: Record<Api.SystemManage.RoleStatus, App.I18n.I18n
};
export const roleStatusOptions = transformRecordToOption(roleStatusRecord);
export const userGenderRecord: Record<Api.SystemManage.UserGender, App.I18n.I18nKey> = {
'1': 'page.manage.user.gender.male',
'2': 'page.manage.user.gender.female'
};
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 userStatusOptions = transformRecordToOption(userStatusRecord);

78
src/hooks/common/form.ts
View File

@ -4,47 +4,40 @@ import { REG_CODE_SIX, REG_EMAIL, REG_PHONE, REG_PWD, REG_USER_NAME } from '@/co
import { $t } from '@/locales';
export function useFormRules() {
const constantRules = {
userName: [
createRequiredRule($t('form.userName.required')),
{
pattern: REG_USER_NAME,
message: $t('form.userName.invalid'),
trigger: 'change'
}
],
phone: [
createRequiredRule($t('form.phone.required')),
{
pattern: REG_PHONE,
message: $t('form.phone.invalid'),
trigger: 'change'
}
],
pwd: [
createRequiredRule($t('form.pwd.required')),
{
pattern: REG_PWD,
message: $t('form.pwd.invalid'),
trigger: 'change'
}
],
code: [
createRequiredRule($t('form.code.required')),
{
pattern: REG_CODE_SIX,
message: $t('form.code.invalid'),
trigger: 'change'
}
],
email: [
createRequiredRule($t('form.email.required')),
{
pattern: REG_EMAIL,
message: $t('form.email.invalid'),
trigger: 'change'
}
]
const patternRules = {
userName: {
pattern: REG_USER_NAME,
message: $t('form.userName.invalid'),
trigger: 'change'
},
phone: {
pattern: REG_PHONE,
message: $t('form.phone.invalid'),
trigger: 'change'
},
pwd: {
pattern: REG_PWD,
message: $t('form.pwd.invalid'),
trigger: 'change'
},
code: {
pattern: REG_CODE_SIX,
message: $t('form.code.invalid'),
trigger: 'change'
},
email: {
pattern: REG_EMAIL,
message: $t('form.email.invalid'),
trigger: 'change'
}
} satisfies Record<string, App.Global.FormRule>;
const formRules = {
userName: [createRequiredRule($t('form.userName.required')), patternRules.userName],
phone: [createRequiredRule($t('form.phone.required')), patternRules.phone],
pwd: [createRequiredRule($t('form.pwd.required')), patternRules.pwd],
code: [createRequiredRule($t('form.code.required')), patternRules.code],
email: [createRequiredRule($t('form.email.required')), patternRules.email]
} satisfies Record<string, App.Global.FormRule[]>;
/** the default required rule */
@ -58,7 +51,8 @@ export function useFormRules() {
}
return {
constantRules,
patternRules,
formRules,
defaultRequiredRule,
createRequiredRule
};

29
src/locales/langs/en-us.ts
View File

@ -271,6 +271,35 @@ const local: App.I18n.Schema = {
enable: 'Enable',
disable: 'Disable'
}
},
user: {
title: 'User List',
form: {
userName: 'Please enter user name',
userGender: 'Please select gender',
nickName: 'Please enter nick name',
userPhone: 'Please enter phone number',
userEmail: 'Please enter email',
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'
},
status: {
enable: 'Enable',
disable: 'Disable'
}
}
}
},

29
src/locales/langs/zh-cn.ts
View File

@ -271,6 +271,35 @@ const local: App.I18n.Schema = {
enable: '启用',
disable: '禁用'
}
},
user: {
title: '用户列表',
form: {
userName: '请输入用户名',
userGender: '请选择性别',
nickName: '请输入昵称',
userPhone: '请输入手机号',
userEmail: '请输入邮箱',
userStatus: '请选择用户状态',
userRole: '请选择用户角色'
},
userName: '用户名',
userGender: '性别',
nickName: '昵称',
userPhone: '手机号',
userEmail: '邮箱',
userStatus: '用户状态',
userRole: '用户角色',
addUser: '新增用户',
editUser: '编辑用户',
gender: {
male: '男',
female: '女'
},
status: {
enable: '启用',
disable: '禁用'
}
}
}
},

21
src/service/api/system-manage.ts
View File

@ -8,3 +8,24 @@ export function fetchGetRoleList(params?: Api.SystemManage.RoleSearchParams) {
params
});
}
/**
* get all roles
*
* these roles are all enabled
*/
export function fetchGetAllRoles() {
return request<Api.SystemManage.AllRole[]>({
url: '/systemManage/getAllRoles',
method: 'get'
});
}
/** get user list */
export function fetchGetUserList(params?: Api.SystemManage.UserSearchParams) {
return request<Api.SystemManage.UserList>({
url: '/systemManage/getUserList',
method: 'get',
params
});
}

51
src/typings/api.d.ts vendored
View File

@ -77,6 +77,8 @@ declare namespace Api {
* backend api module: "systemManage"
*/
namespace SystemManage {
type CommonSearchParams = Pick<Common.PaginatingCommonParams, 'current' | 'size'>;
/**
* role status
*
@ -99,11 +101,56 @@ declare namespace Api {
/** role search params */
type RoleSearchParams = CommonType.RecordNullable<
Pick<Api.SystemManage.Role, 'roleName' | 'roleCode' | 'roleStatus'> &
Pick<Common.PaginatingCommonParams, 'current' | 'size'>
Pick<Api.SystemManage.Role, 'roleName' | 'roleCode' | 'roleStatus'> & CommonSearchParams
>;
/** role list */
type RoleList = Common.PaginatingQueryRecord<Role>;
/** all role */
type AllRole = Pick<Role, 'id' | 'roleName' | 'roleCode'>;
/**
* user gender
*
* - "1": "male"
* - "2": "female"
*/
type UserGender = '1' | '2';
/**
* user status
*
* - "1": enabled
* - "2": disabled
*/
type UserStatus = '1' | '2';
/** user */
type User = Common.CommonRecord<{
/** user name */
userName: string;
/** user gender */
userGender: UserGender | null;
/** user nick name */
nickName: string;
/** user phone */
userPhone: string;
/** user email */
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'> &
CommonSearchParams
>;
/** user list */
type UserList = Common.PaginatingQueryRecord<User>;
}
}

29
src/typings/app.d.ts vendored
View File

@ -459,6 +459,35 @@ declare namespace App {
disable: string;
};
};
user: {
title: string;
form: {
userName: string;
userGender: string;
nickName: string;
userPhone: string;
userEmail: string;
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;
};
};
};
};
form: {

15
src/views/_builtin/login/modules/pwd-login.vue
View File

@ -1,5 +1,5 @@
<script setup lang="ts">
import { reactive } from 'vue';
import { computed, reactive } from 'vue';
import { $t } from '@/locales';
import { loginModuleRecord } from '@/constants/app';
import { useRouterPush } from '@/hooks/common/router';
@ -13,7 +13,6 @@ defineOptions({
const authStore = useAuthStore();
const { toggleLoginModule } = useRouterPush();
const { formRef, validate } = useNaiveForm();
const { constantRules } = useFormRules();
interface FormModel {
userName: string;
@ -25,10 +24,14 @@ const model: FormModel = reactive({
password: '123456'
});
const rules: Record<keyof FormModel, App.Global.FormRule[]> = {
userName: constantRules.userName,
password: constantRules.pwd
};
const rules = computed<Record<keyof FormModel, App.Global.FormRule[]>>(() => {
const { formRules } = useFormRules(); // inside computed to make locale reactive
return {
userName: formRules.userName,
password: formRules.pwd
};
});
async function handleSubmit() {
await validate();

214
src/views/manage/user/index.vue
View File

@ -1,7 +1,217 @@
<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 { 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 UserOperateDrawer, { type OperateType } from './modules/user-operate-drawer.vue';
import UserSearch from './modules/user-search.vue';
const appStore = useAppStore();
const { bool: drawerVisible, setTrue: openDrawer } = useBoolean();
const { columns, filteredColumns, data, loading, pagination, getData, searchParams, resetSearchParams } = useTable<
Api.SystemManage.User,
typeof fetchGetUserList,
'index' | 'operate'
>({
apiFn: fetchGetUserList,
apiParams: {
current: 1,
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
userName: null,
userGender: null,
nickName: null,
userPhone: null,
userEmail: null,
userStatus: null
},
transformer: res => {
const { records = [], current = 1, size = 10, total = 0 } = res.data || {};
return {
data: records,
pageNum: current,
pageSize: size,
total
};
},
columns: () => [
{
type: 'selection',
align: 'center',
width: 48
},
{
key: 'index',
title: $t('common.index'),
render: (_, index): string => getIndex(index),
width: 64,
align: 'center'
},
{
key: 'userName',
title: $t('page.manage.user.userName'),
align: 'center'
},
{
key: 'userGender',
title: $t('page.manage.user.userGender'),
align: 'center',
render: row => {
if (row.userGender === null) {
return null;
}
const tagMap: Record<Api.SystemManage.UserGender, NaiveUI.ThemeColor> = {
1: 'primary',
2: 'error'
};
const label = $t(userGenderRecord[row.userGender]);
return <NTag type={tagMap[row.userGender]}>{label}</NTag>;
}
},
{
key: 'nickName',
title: $t('page.manage.user.nickName')
},
{
key: 'userPhone',
title: $t('page.manage.user.userPhone')
},
{
key: 'userEmail',
title: $t('page.manage.user.userEmail')
},
{
key: 'userStatus',
title: $t('page.manage.user.userStatus'),
align: 'center',
render: row => {
if (row.userStatus === null) {
return null;
}
const tagMap: Record<Api.SystemManage.UserStatus, NaiveUI.ThemeColor> = {
1: 'success',
2: 'warning'
};
const label = $t(userStatusRecord[row.userStatus]);
return <NTag type={tagMap[row.userStatus]}>{label}</NTag>;
}
},
{
key: 'operate',
title: $t('common.operate'),
align: 'center',
width: 130,
render: row => (
<div class="flex-center gap-8px">
<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();
}
/** the editing row data */
const editingData = ref<Api.SystemManage.User | 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>
<LookForward />
<div class="flex-vertical-stretch gap-16px overflow-hidden <sm:overflow-auto">
<UserSearch v-model:model="searchParams" @reset="resetSearchParams" @search="getData" />
<NCard :title="$t('page.manage.role.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"
/>
<UserOperateDrawer
v-model:visible="drawerVisible"
:operate-type="operateType"
:row-data="editingData"
@submitted="getData"
/>
</NCard>
</div>
</template>
<style scoped></style>

177
src/views/manage/user/modules/user-operate-drawer.vue Normal file
View File

@ -0,0 +1,177 @@
<script setup lang="ts">
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';
defineOptions({
name: 'UserOperateDrawer'
});
/**
* 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.User | 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.user.addUser'),
edit: $t('page.manage.user.editUser')
};
return titles[props.operateType];
});
type Model = Pick<
Api.SystemManage.User,
'userName' | 'userGender' | 'nickName' | 'userPhone' | 'userEmail' | 'userRoles' | 'userStatus'
>;
const model: Model = reactive(createDefaultModel());
function createDefaultModel(): Model {
return {
userName: '',
userGender: null,
nickName: '',
userPhone: '',
userEmail: '',
userRoles: [],
userStatus: null
};
}
type RuleKey = Extract<keyof Model, 'userName' | 'userStatus'>;
const rules: Record<RuleKey, App.Global.FormRule> = {
userName: defaultRequiredRule,
userStatus: defaultRequiredRule
};
/** the enabled role options */
const roleOptions = ref<CommonType.Option<string>[]>([]);
async function getRoleOptions() {
const { error, data } = await fetchGetAllRoles();
if (!error) {
const options = data.map(item => ({
label: item.roleName,
value: item.roleCode
}));
// the mock data does not have the roleCode, so fill it
// if the real request, remove the following code
const userRoleOptions = model.userRoles.map(item => ({
label: item,
value: item
}));
// end
roleOptions.value = [...userRoleOptions, ...options];
}
}
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();
getRoleOptions();
}
});
</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">
<NFormItem :label="$t('page.manage.user.userName')" path="userName">
<NInput v-model:value="model.userName" :placeholder="$t('page.manage.user.form.userName')" />
</NFormItem>
<NFormItem :label="$t('page.manage.user.userGender')" path="userGender">
<NRadioGroup v-model:value="model.userGender">
<NRadio v-for="item in userGenderOptions" :key="item.value" :value="item.value" :label="$t(item.label)" />
</NRadioGroup>
</NFormItem>
<NFormItem :label="$t('page.manage.user.nickName')" path="nickName">
<NInput v-model:value="model.nickName" :placeholder="$t('page.manage.user.form.nickName')" />
</NFormItem>
<NFormItem :label="$t('page.manage.user.userPhone')" path="userPhone">
<NInput v-model:value="model.userPhone" :placeholder="$t('page.manage.user.form.userPhone')" />
</NFormItem>
<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)" />
</NRadioGroup>
</NFormItem>
<NFormItem :label="$t('page.manage.user.userRole')" path="roles">
<NSelect
v-model:value="model.userRoles"
multiple
:options="roleOptions"
:placeholder="$t('page.manage.user.form.userRole')"
/>
</NFormItem>
</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>

98
src/views/manage/user/modules/user-search.vue Normal file
View File

@ -0,0 +1,98 @@
<script setup lang="ts">
import { computed } from 'vue';
import { $t } from '@/locales';
import { useFormRules, useNaiveForm } from '@/hooks/common/form';
import { userGenderOptions, userStatusOptions } from '@/constants/business';
import { translateOptions } from '@/utils/common';
defineOptions({
name: 'UserSearch'
});
interface Emits {
(e: 'reset'): void;
(e: 'search'): void;
}
const emit = defineEmits<Emits>();
const { formRef, validate, restoreValidation } = useNaiveForm();
const model = defineModel<Api.SystemManage.UserSearchParams>('model', { required: true });
type RuleKey = Extract<keyof Api.SystemManage.UserSearchParams, 'userEmail' | 'userPhone'>;
const rules = computed<Record<RuleKey, App.Global.FormRule>>(() => {
const { patternRules } = useFormRules(); // inside computed to make locale reactive
return {
userEmail: patternRules.email,
userPhone: patternRules.phone
};
});
async function reset() {
await restoreValidation();
emit('reset');
}
async function search() {
await validate();
emit('search');
}
</script>
<template>
<NCard :title="$t('common.search')" :bordered="false" size="small" class="card-wrapper">
<NForm ref="formRef" :model="model" :rules="rules" label-placement="left">
<NGrid responsive="screen" item-responsive>
<NFormItemGi span="24 s:12 m:6" :label="$t('page.manage.user.userName')" path="userName" class="pr-24px">
<NInput v-model:value="model.userName" :placeholder="$t('page.manage.user.form.userName')" />
</NFormItemGi>
<NFormItemGi span="24 s:12 m:6" :label="$t('page.manage.user.userGender')" path="userGender" class="pr-24px">
<NSelect
v-model:value="model.userGender"
:placeholder="$t('page.manage.user.form.userGender')"
:options="translateOptions(userGenderOptions)"
clearable
/>
</NFormItemGi>
<NFormItemGi span="24 s:12 m:6" :label="$t('page.manage.user.nickName')" path="nickName" class="pr-24px">
<NInput v-model:value="model.nickName" :placeholder="$t('page.manage.user.form.nickName')" />
</NFormItemGi>
<NFormItemGi span="24 s:12 m:6" :label="$t('page.manage.user.userPhone')" path="userPhone" class="pr-24px">
<NInput v-model:value="model.userPhone" :placeholder="$t('page.manage.user.form.userPhone')" />
</NFormItemGi>
<NFormItemGi span="24 s:12 m:6" :label="$t('page.manage.user.userEmail')" path="userEmail" class="pr-24px">
<NInput v-model:value="model.userEmail" :placeholder="$t('page.manage.user.form.userEmail')" />
</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"
:placeholder="$t('page.manage.user.form.userStatus')"
:options="translateOptions(userStatusOptions)"
clearable
/>
</NFormItemGi>
<NFormItemGi span="24 s:12" class="pr-24px">
<NSpace class="w-full" justify="end">
<NButton @click="reset">
<template #icon>
<icon-ic-round-refresh class="text-icon" />
</template>
{{ $t('common.reset') }}
</NButton>
<NButton type="primary" ghost @click="search">
<template #icon>
<icon-ic-round-search class="text-icon" />
</template>
{{ $t('common.search') }}
</NButton>
</NSpace>
</NFormItemGi>
</NGrid>
</NForm>
</NCard>
</template>
<style scoped></style>