i18n: 用户与租户新增多语言配置

This commit is contained in:
xlsea
2025-05-12 22:41:20 +08:00
committed by 马铃薯头
parent 88467844be
commit 05cc5c40a7
10 changed files with 1440 additions and 78 deletions

View File

@ -59,13 +59,13 @@ const {
},
{
key: 'packageName',
title: '套餐名称',
title: $t('page.system.tenantPackage.packageName'),
align: 'center',
minWidth: 120
},
{
key: 'status',
title: '状态',
title: $t('page.system.tenantPackage.status'),
align: 'center',
minWidth: 120,
render: row => {
@ -80,7 +80,7 @@ const {
},
{
key: 'remark',
title: '备注',
title: $t('page.system.tenantPackage.remark'),
align: 'center',
minWidth: 120
},
@ -162,7 +162,11 @@ function edit(packageId: CommonType.IdType) {
}
function handleExport() {
download('/system/tenant/package/export', searchParams, `租户套餐_${new Date().getTime()}.xlsx`);
download(
'/system/tenant/package/export',
searchParams,
`${$t('page.system.tenantPackage.title')}_${new Date().getTime()}.xlsx`
);
}
/** 处理状态切换 */
@ -179,7 +183,7 @@ async function handleStatusChange(
callback(!error);
if (!error) {
window.$message?.success('状态修改成功');
window.$message?.success($t('page.system.tenantPackage.statusChangeSuccess'));
getData();
}
}
@ -188,7 +192,12 @@ async function handleStatusChange(
<template>
<div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
<TenantPackageSearch v-model:model="searchParams" @reset="resetSearchParams" @search="getDataByPage" />
<NCard title="租户套餐列表" :bordered="false" size="small" class="sm:flex-1-hidden card-wrapper">
<NCard
:title="$t('page.system.tenantPackage.title')"
:bordered="false"
size="small"
class="sm:flex-1-hidden card-wrapper"
>
<template #header-extra>
<TableHeaderOperation
v-model:columns="columnChecks"

View File

@ -41,8 +41,8 @@ const { createRequiredRule } = useFormRules();
const title = computed(() => {
const titles: Record<NaiveUI.TableOperateType, string> = {
add: '新增租户套餐',
edit: '编辑租户套餐'
add: $t('page.system.tenantPackage.addTenantPackage'),
edit: $t('page.system.tenantPackage.editTenantPackage')
};
return titles[props.operateType];
});
@ -63,8 +63,8 @@ function createDefaultModel(): Model {
type RuleKey = Extract<keyof Model, 'packageId' | 'packageName'>;
const rules: Record<RuleKey, App.Global.FormRule> = {
packageId: createRequiredRule('租户套餐id不能为空'),
packageName: createRequiredRule('租户套餐名称不能为空')
packageId: createRequiredRule($t('page.system.tenantPackage.form.packageName.invalid')),
packageName: createRequiredRule($t('page.system.tenantPackage.form.packageName.required'))
};
async function handleUpdateModelWhenEdit() {
@ -113,7 +113,7 @@ async function handleSubmit() {
if (error) return;
}
window.$message?.success($t('common.updateSuccess'));
window.$message?.success($t('common.saveSuccess'));
closeDrawer();
emit('submitted');
}
@ -130,10 +130,13 @@ watch(visible, () => {
<NDrawer v-model:show="visible" :title="title" display-directive="show" :width="800" class="max-w-90%">
<NDrawerContent :title="title" :native-scrollbar="false" closable>
<NForm ref="formRef" :model="model" :rules="rules">
<NFormItem label="套餐名称" path="packageName">
<NInput v-model:value="model.packageName" placeholder="请输入套餐名称" />
<NFormItem :label="$t('page.system.tenantPackage.packageName')" path="packageName">
<NInput
v-model:value="model.packageName"
:placeholder="$t('page.system.tenantPackage.form.packageName.required')"
/>
</NFormItem>
<NFormItem label="关联菜单" path="menuIds">
<NFormItem :label="$t('page.system.tenantPackage.menuIds')" path="menuIds">
<MenuTree
ref="menuTreeRef"
v-model:value="model.menuIds"
@ -143,8 +146,12 @@ watch(visible, () => {
:immediate="operateType === 'add'"
/>
</NFormItem>
<NFormItem label="备注" path="remark">
<NInput v-model:value="model.remark" placeholder="请输入备注" type="textarea" />
<NFormItem :label="$t('page.system.tenantPackage.remark')" path="remark">
<NInput
v-model:value="model.remark"
:placeholder="$t('page.system.tenantPackage.form.remark.required')"
type="textarea"
/>
</NFormItem>
</NForm>
<template #footer>

View File

@ -38,13 +38,21 @@ async function search() {
<NCollapseItem :title="$t('common.search')" name="user-search">
<NForm ref="formRef" :model="model" label-placement="left" :label-width="80">
<NGrid responsive="screen" item-responsive>
<NFormItemGi span="8" label="套餐名称" path="packageName" class="pr-24px">
<NInput v-model:value="model.packageName" placeholder="请输入套餐名称" />
<NFormItemGi
span="8"
:label="$t('page.system.tenantPackage.packageName')"
path="packageName"
class="pr-24px"
>
<NInput
v-model:value="model.packageName"
:placeholder="$t('page.system.tenantPackage.form.packageName.required')"
/>
</NFormItemGi>
<NFormItemGi span="8" label="状态" path="status" class="pr-24px">
<NFormItemGi span="8" :label="$t('page.system.tenantPackage.status')" path="status" class="pr-24px">
<NSelect
v-model:value="model.status"
placeholder="请选择状态"
:placeholder="$t('page.system.tenantPackage.form.status.required')"
:options="sysNormalDisableOptions"
clearable
/>

View File

@ -65,35 +65,35 @@ const {
},
{
key: 'userName',
title: '用户名称',
title: $t('page.system.user.userName'),
align: 'center',
minWidth: 120,
ellipsis: true
},
{
key: 'nickName',
title: '用户昵称',
title: $t('page.system.user.nickName'),
align: 'center',
minWidth: 120,
ellipsis: true
},
{
key: 'deptName',
title: '部门',
title: $t('page.system.user.deptName'),
align: 'center',
minWidth: 120,
ellipsis: true
},
{
key: 'phonenumber',
title: '手机号码',
title: $t('page.system.user.phonenumber'),
align: 'center',
minWidth: 120,
ellipsis: true
},
{
key: 'status',
title: '状态',
title: $t('page.system.user.status'),
align: 'center',
minWidth: 80,
render(row) {
@ -109,7 +109,7 @@ const {
},
{
key: 'createTime',
title: '创建时间',
title: $t('page.system.user.createTime'),
align: 'center',
minWidth: 120
},
@ -234,18 +234,18 @@ async function handleStatusChange(
callback(!error);
if (!error) {
window.$message?.success('状态修改成功');
window.$message?.success($t('page.system.user.statusChangeSuccess'));
getData();
}
}
function handleExport() {
download('/system/user/export', searchParams, `用户列表_${new Date().getTime()}.xlsx`);
download('/system/user/export', searchParams, `${$t('page.system.user.title')}_${new Date().getTime()}.xlsx`);
}
</script>
<template>
<TableSiderLayout sider-title="部门列表">
<TableSiderLayout :sider-title="$t('page.system.dept.title')">
<template #header-extra>
<NButton size="small" text class="h-18px" @click.stop="() => handleResetTreeData()">
<template #icon>
@ -270,7 +270,7 @@ function handleExport() {
@update:selected-keys="handleClickTree"
>
<template #empty>
<NEmpty description="暂无部门信息" class="h-full min-h-200px justify-center" />
<NEmpty :description="$t('page.system.dept.empty')" class="h-full min-h-200px justify-center" />
</template>
</NTree>
</NSpin>
@ -278,7 +278,7 @@ function handleExport() {
<div class="h-full flex-col-stretch gap-12px overflow-hidden lt-sm:overflow-auto">
<UserSearch v-model:model="searchParams" @reset="resetSearchParams" @search="getDataByPage" />
<TableRowCheckAlert v-model:checked-row-keys="checkedRowKeys" />
<NCard title="用户列表" :bordered="false" size="small" class="sm:flex-1-hidden card-wrapper">
<NCard :title="$t('page.system.user.title')" :bordered="false" size="small" class="sm:flex-1-hidden card-wrapper">
<template #header-extra>
<TableHeaderOperation
v-model:columns="columnChecks"
@ -297,7 +297,7 @@ function handleExport() {
<template #icon>
<icon-material-symbols:upload-rounded class="text-icon" />
</template>
导入
{{ $t('common.import') }}
</NButton>
</template>
</TableHeaderOperation>

View File

@ -1,11 +1,11 @@
<script setup lang="ts">
// import { fetchUserResetPwd } from '@/service/api/system';
import { ref, watch } from 'vue';
import type { UploadFileInfo } from 'naive-ui';
import { getToken } from '@/store/modules/auth/shared';
import { useDownload } from '@/hooks/business/download';
import { getServiceBaseURL } from '@/utils/service';
import type FileUpload from '@/components/custom/file-upload.vue';
import { $t } from '@/locales';
defineOptions({
name: 'UserImportModal'
@ -66,7 +66,7 @@ function handleFinish(options: { file: UploadFileInfo; event?: ProgressEvent })
const responseText = event?.target?.responseText;
const response = JSON.parse(responseText);
message.value = response.msg;
window.$message?.success('导入成功');
window.$message?.success($t('common.importSuccess'));
success.value = true;
return file;
}
@ -77,12 +77,16 @@ function handleError(options: { file: UploadFileInfo; event?: ProgressEvent }) {
const responseText = event?.target?.responseText;
const msg = JSON.parse(responseText).msg;
message.value = msg;
window.$message?.error(msg || '导入失败');
window.$message?.error(msg || $t('common.importFail'));
success.value = false;
}
function handleDownloadTemplate() {
download('/system/user/importTemplate', {}, `user_template_${new Date().getTime()}.xlsx`);
download(
'/system/user/importTemplate',
{},
`${$t('page.system.user.title')}_${$t('common.importTemplate')}_${new Date().getTime()}.xlsx`
);
}
watch(visible, () => {
@ -97,7 +101,7 @@ watch(visible, () => {
<template>
<NModal
v-model:show="visible"
title="导入用户"
:title="$t('common.import')"
preset="card"
:bordered="false"
display-directive="show"
@ -125,26 +129,26 @@ watch(visible, () => {
<div class="mb-12px flex-center">
<SvgIcon icon="material-symbols:unarchive-outline" class="text-58px color-#d8d8db dark:color-#a1a1a2" />
</div>
<NText class="text-16px">点击或者拖动文件到该区域来上传</NText>
<NText class="text-16px">{{ $t('common.importTip') }}</NText>
<NP depth="3" class="mt-8px text-center">
请上传大小不超过
{{ $t('common.importSize') }}
<b class="text-red-500">50MB</b>
且格式为
{{ $t('common.importFormat') }}
<b class="text-red-500">xls/xlsx</b>
的文件
{{ $t('common.importEnd') }}
</NP>
</NUploadDragger>
</NUpload>
<div class="flex-center">
<NCheckbox v-model="data.updateSupport">是否更新已经存在的用户数据</NCheckbox>
<NCheckbox v-model="data.updateSupport">{{ $t('common.updateExisting') }}</NCheckbox>
</div>
<NAlert v-if="message" title="导入结果" :type="success ? 'success' : 'error'" :bordered="false">
<NAlert v-if="message" :title="$t('common.importResult')" :type="success ? 'success' : 'error'" :bordered="false">
{{ message }}
</NAlert>
<template #footer>
<NSpace justify="end" :size="16">
<NButton @click="handleDownloadTemplate">下载模板</NButton>
<NButton type="primary" @click="handleSubmit">导入用户</NButton>
<NButton @click="handleDownloadTemplate">{{ $t('common.downloadTemplate') }}</NButton>
<NButton type="primary" @click="handleSubmit">{{ $t('common.import') }}</NButton>
</NSpace>
</template>
</NModal>

View File

@ -39,8 +39,8 @@ const { createRequiredRule, patternRules } = useFormRules();
const title = computed(() => {
const titles: Record<NaiveUI.TableOperateType, string> = {
add: '新增用户信息',
edit: '编辑用户信息'
add: $t('page.system.user.addUser'),
edit: $t('page.system.user.editUser')
};
return titles[props.operateType];
});
@ -68,11 +68,11 @@ function createDefaultModel(): Model {
type RuleKey = Extract<keyof Model, 'userName' | 'nickName' | 'password' | 'status' | 'phonenumber'>;
const rules: Record<RuleKey, App.Global.FormRule[]> = {
userName: [createRequiredRule('用户名称不能为空')],
nickName: [createRequiredRule('用户昵称不能为空')],
userName: [createRequiredRule($t('page.system.user.form.userName.required'))],
nickName: [createRequiredRule($t('page.system.user.form.nickName.required'))],
password: [{ ...patternRules.pwd, required: props.operateType === 'add' }],
phonenumber: [patternRules.phone],
status: [createRequiredRule('帐号状态不能为空')]
status: [createRequiredRule($t('page.system.user.form.status.required'))]
};
async function getUserInfo() {
@ -160,10 +160,10 @@ watch(visible, () => {
<NDrawerContent :title="title" :native-scrollbar="false" closable>
<NSpin :show="loading">
<NForm ref="formRef" :model="model" :rules="rules">
<NFormItem label="用户昵称" path="nickName">
<NInput v-model:value="model.nickName" placeholder="请输入用户昵称" />
<NFormItem :label="$t('page.system.user.nickName')" path="nickName">
<NInput v-model:value="model.nickName" :placeholder="$t('page.system.user.form.nickName.required')" />
</NFormItem>
<NFormItem label="归属部门" path="deptId">
<NFormItem :label="$t('page.system.user.deptName')" path="deptId">
<NTreeSelect
v-model:value="model.deptId"
:loading="deptLoading"
@ -172,40 +172,44 @@ watch(visible, () => {
label-field="label"
key-field="id"
:default-expanded-keys="deptData?.length ? [deptData[0].id] : []"
placeholder="请选择归属部门"
:placeholder="$t('page.system.user.form.deptId.required')"
/>
</NFormItem>
<NFormItem label="手机号码" path="phonenumber">
<NInput v-model:value="model.phonenumber" placeholder="请输入手机号码" />
<NFormItem :label="$t('page.system.user.phonenumber')" path="phonenumber">
<NInput v-model:value="model.phonenumber" :placeholder="$t('page.system.user.form.phonenumber.required')" />
</NFormItem>
<NFormItem label="邮箱" path="email">
<NInput v-model:value="model.email" placeholder="请输入邮箱" />
<NFormItem :label="$t('page.system.user.email')" path="email">
<NInput v-model:value="model.email" :placeholder="$t('page.system.user.form.email.required')" />
</NFormItem>
<NFormItem v-if="operateType === 'add'" label="用户名称" path="userName">
<NInput v-model:value="model.userName" placeholder="请输入用户名称" />
<NFormItem v-if="operateType === 'add'" :label="$t('page.system.user.userName')" path="userName">
<NInput v-model:value="model.userName" :placeholder="$t('page.system.user.form.userName.required')" />
</NFormItem>
<NFormItem label="用户密码" path="password">
<NFormItem :label="$t('page.system.user.password')" path="password">
<NInput
v-model:value="model.password"
type="password"
show-password-on="click"
placeholder="请输入用户密码"
:placeholder="$t('page.system.user.form.password.required')"
/>
</NFormItem>
<NFormItem label="用户性别" path="sex">
<DictRadio v-model:value="model.sex" dict-code="sys_user_sex" placeholder="请选择用户性别" />
<NFormItem :label="$t('page.system.user.sex')" path="sex">
<DictRadio
v-model:value="model.sex"
dict-code="sys_user_sex"
:placeholder="$t('page.system.user.form.sex.required')"
/>
</NFormItem>
<NFormItem label="岗位" path="postIds">
<NFormItem :label="$t('page.system.user.postIds')" path="postIds">
<PostSelect v-model:value="model.postIds" :dept-id="model.deptId" multiple clearable />
</NFormItem>
<NFormItem label="角色" path="roleIds">
<NFormItem :label="$t('page.system.user.roleIds')" path="roleIds">
<RoleSelect v-model:value="model.roleIds" multiple clearable />
</NFormItem>
<NFormItem label="状态" path="status">
<NFormItem :label="$t('page.system.user.status')" path="status">
<DictRadio v-model:value="model.status" dict-code="sys_normal_disable" />
</NFormItem>
<NFormItem label="备注" path="remark">
<NInput v-model:value="model.remark" placeholder="请输入备注" />
<NFormItem :label="$t('page.system.user.remark')" path="remark">
<NInput v-model:value="model.remark" :placeholder="$t('page.system.user.form.remark.required')" />
</NFormItem>
</NForm>
</NSpin>

View File

@ -42,24 +42,37 @@ async function search() {
<NCollapseItem :title="$t('common.search')" name="user-search">
<NForm ref="formRef" :model="model" label-placement="left" :label-width="80">
<NGrid responsive="screen" item-responsive>
<NFormItemGi span="24 s:12 m:6" label="用户名称" path="userName" class="pr-24px">
<NInput v-model:value="model.userName" placeholder="请输入用户名称" />
<NFormItemGi span="24 s:12 m:6" :label="$t('page.system.user.userName')" path="userName" class="pr-24px">
<NInput v-model:value="model.userName" :placeholder="$t('page.system.user.form.userName.required')" />
</NFormItemGi>
<NFormItemGi span="24 s:12 m:6" label="用户昵称" path="nickName" class="pr-24px">
<NInput v-model:value="model.nickName" placeholder="请输入用户昵称" />
<NFormItemGi span="24 s:12 m:6" :label="$t('page.system.user.nickName')" path="nickName" class="pr-24px">
<NInput v-model:value="model.nickName" :placeholder="$t('page.system.user.form.nickName.required')" />
</NFormItemGi>
<NFormItemGi span="24 s:12 m:6" label="手机号码" path="phonenumber" class="pr-24px">
<NInput v-model:value="model.phonenumber" placeholder="请输入手机号码" />
<NFormItemGi
span="24 s:12 m:6"
:label="$t('page.system.user.phonenumber')"
path="phonenumber"
class="pr-24px"
>
<NInput
v-model:value="model.phonenumber"
:placeholder="$t('page.system.user.form.phonenumber.required')"
/>
</NFormItemGi>
<NFormItemGi span="24 s:12 m:6" label="帐号状态" path="status" class="pr-24px">
<NFormItemGi span="24 s:12 m:6" :label="$t('page.system.user.status')" path="status" class="pr-24px">
<DictSelect
v-model:value="model.status"
placeholder="请选择帐号状态"
:placeholder="$t('page.system.user.form.status.required')"
dict-code="sys_normal_disable"
clearable
/>
</NFormItemGi>
<NFormItemGi span="24 s:12 m:12" label="创建时间" path="createTime" class="pr-24px">
<NFormItemGi
span="24 s:12 m:12"
:label="$t('page.system.user.createTime')"
path="createTime"
class="pr-24px"
>
<NDatePicker
v-model:formatted-value="dateRangeCreateTime"
type="datetimerange"