feat: 基础部分的国际化

This commit is contained in:
2024-04-01 10:33:53 +08:00
parent 620dba9b38
commit 7fed531835
34 changed files with 981 additions and 280 deletions

View File

@@ -8,7 +8,7 @@
v-model="deptName"
clearable
size="mini"
placeholder="请输入部门名称"
:placeholder="$t('User.placeholder.dep_tip')"
prefix-icon="el-icon-search"
class="filter-item"
@input="getDeptDatas"
@@ -30,7 +30,7 @@
v-model="query.blurry"
clearable
size="mini"
placeholder="输入账号或者名称"
:placeholder="$t('User.placeholder.blu_tip')"
style="width: 200px;"
class="filter-item"
@keyup.enter.native="crud.toQuery"
@@ -39,7 +39,7 @@
v-model="query.is_used"
clearable
size="mini"
placeholder="状态"
:placeholder="$t('User.table.enabled')"
class="filter-item"
style="width: 90px"
@change="crud.toQuery"
@@ -62,23 +62,23 @@
:before-close="crud.cancelCU"
:visible.sync="crud.status.cu > 0"
:title="crud.status.title"
width="700px"
:width="computedLabelWidth"
>
<el-form ref="form" :inline="true" :model="form" :rules="rules" size="mini" label-width="100px">
<el-form-item label="用户名" prop="username">
<el-form ref="form" :inline="true" :model="form" :rules="rules" size="mini" :label-width="computedFormLabelWidth" style="border: 1px solid #cfe0df;margin-top: 10px;padding-top: 10px;">
<el-form-item :label="$t('User.table.user_name')" prop="username">
<el-input v-model="form.username" style="width: 200px;" />
</el-form-item>
<el-form-item label="电话" prop="phone">
<el-form-item :label="$t('User.table.phone')" prop="phone">
<el-input v-model.number="form.phone" style="width: 200px;" />
</el-form-item>
<el-form-item label="姓名" prop="preson_name">
<el-form-item :label="$t('User.table.person_name')" prop="preson_name">
<el-input v-model="form.person_name" style="width: 200px;" />
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-form-item :label="$t('User.table.email')" prop="email">
<el-input v-model="form.email" style="width: 200px;" />
</el-form-item>
<br v-if="!crud.status.edit">
<el-form-item v-if="crud.status.add" label="部门" prop="depts" :rules="[{ required: true, message: '请选择部门', trigger: 'change' }]">
<el-form-item v-if="crud.status.add" :label="$t('User.table.depts')" prop="depts" :rules="[{ required: true, message: '请选择部门', trigger: 'change' }]">
<treeselect
v-model="form.depts"
:load-options="loadDepts"
@@ -87,20 +87,20 @@
:multiple="true"
:flat="true"
:normalizer="normalizer"
placeholder="选择部门类目"
:placeholder="$t('User.placeholder.dep_select_tip')"
/>
</el-form-item>
<br v-if="!crud.status.add">
<el-form-item v-if="crud.status.add" label="密码" prop="password">
<el-form-item v-if="crud.status.add" :label="$t('User.dialog.password')" prop="password">
<el-input v-model="form.password" style="width: 200px;" show-password auto-complete="new-password" />
</el-form-item>
<el-form-item label="性别">
<el-form-item :label="$t('User.table.gender')">
<el-radio-group v-model="form.gender" style="width: 178px">
<el-radio label=""></el-radio>
<el-radio label=""></el-radio>
<el-radio label="1">{{ $t('User.dialog.sex_male') }}</el-radio>
<el-radio label="2">{{ $t('User.dialog.sex_female') }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="状态" prop="is_uesd">
<el-form-item :label="$t('User.table.enabled')" prop="is_uesd">
<el-switch
v-model="form.is_used"
active-color="#409EFF"
@@ -108,14 +108,14 @@
/>
</el-form-item>
<br v-if="!crud.status.edit">
<el-form-item v-if="crud.status.add" style="margin-bottom: 0;" label="角色" prop="roles">
<el-form-item v-if="crud.status.add" style="margin-bottom: 0;" :label="$t('User.dialog.role')" prop="roles">
<el-select
v-model="roleDatas"
style="width: 512px"
multiple
active-value="1"
inactive-value="0"
placeholder="请选择"
:placeholder="$t('common.Please_select')"
@remove-tag="deleteTag"
@change="changeRole"
>
@@ -130,8 +130,8 @@
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="text" @click="crud.cancelCU">取消</el-button>
<el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
<el-button type="text" @click="crud.cancelCU">{{ $t('common.Cancel') }}</el-button>
<el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">{{ $t('common.Confirm') }}</el-button>
</div>
</el-dialog>
<!--表格渲染-->
@@ -143,50 +143,54 @@
@selection-change="crud.selectionChangeHandler"
>
<el-table-column :selectable="checkboxT" type="selection" width="55" />
<el-table-column prop="username" label="用户名" :min-width="flexWidth('username',crud.data,'用户名')" />
<el-table-column prop="username" :label="$t('User.table.user_name')" :min-width="flexWidth('username',crud.data,$t('User.table.user_name'))" />
<el-table-column
prop="person_name"
label="姓名"
:min-width="flexWidth('person_name',crud.data,'姓名')"
:label="$t('User.table.person_name')"
:min-width="flexWidth('person_name',crud.data,$t('User.table.person_name'))"
/>
<el-table-column prop="gender" label="性别" :min-width="flexWidth('gender',crud.data,'性别')" />
<el-table-column prop="phone" label="电话" :min-width="flexWidth('phone',crud.data,'电话')" />
<el-table-column prop="email" label="邮箱" :min-width="flexWidth('email',crud.data,'邮箱')" />
<el-table-column show-overflow-tooltip prop="depts" label="部门" :min-width="flexWidth('depts',crud.data,'邮箱')">
<el-table-column prop="gender" :label="$t('User.table.gender')" :min-width="flexWidth('gender',crud.data,$t('User.table.gender'))">
<template slot-scope="scope">
{{ scope.row.gender === '1' ? $t('User.dialog.sex_male') : $t('User.dialog.sex_female') }}
</template>
</el-table-column>
<el-table-column prop="phone" :label="$t('User.table.phone')" :min-width="flexWidth('phone',crud.data,$t('User.table.phone'))" />
<el-table-column prop="email" :label="$t('User.table.email')" :min-width="flexWidth('email',crud.data,$t('User.table.email'))" />
<el-table-column show-overflow-tooltip prop="depts" :label="$t('User.table.depts')" :min-width="flexWidth('depts',crud.data,$t('User.table.depts'))">
<template slot-scope="scope">
<span v-for="(item, index) in scope.row.depts" :key="index">
{{ item.name }}<span v-if="index !== scope.row.depts.length - 1">、</span>
</span>
</template>
</el-table-column>
<el-table-column label="状态" align="center" prop="enabled">
<el-table-column :label="$t('User.table.enabled')" align="center" prop="enabled">
<template slot-scope="scope">
<span :style="{'color': caseStatusColorFilter(scope.row.is_used)}">{{ enabledTypeOptions.find(item => {return item.key == scope.row.is_used}).display_name }}</span>
</template>
</el-table-column>
<el-table-column prop="create_time" label="创建日期" :min-width="flexWidth('create_time',crud.data,'创建日期')" />
<el-table-column prop="create_time" :label="$t('User.table.create_time')" :min-width="flexWidth('create_time',crud.data,$t('User.table.create_time'))" />
<el-table-column
label="操作"
:label="$t('common.Operate')"
fixed="right"
align="center"
width="200"
>
<template slot-scope="scope">
<el-button size="mini" type="text" icon="el-icon-edit" @click="crud.toEdit(scope.row)">修改</el-button>
<el-button size="mini" type="text" icon="el-icon-delete" @click="handdeleted(scope.row)">删除</el-button>
<el-button size="mini" type="text" icon="el-icon-edit" @click="crud.toEdit(scope.row)">{{ $t('common.Update') }}</el-button>
<el-button size="mini" type="text" icon="el-icon-delete" @click="handdeleted(scope.row)">{{ $t('common.Delete') }}</el-button>
<el-dropdown v-hasPermi="['system:user:resetPwd', 'system:user:edit']" size="mini">
<el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button>
<el-button size="mini" type="text" icon="el-icon-d-arrow-right">{{ $t('common.More') }}</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item icon="el-icon-refresh-right"><span @click="resetPassword(scope.row)">重置密码</span></el-dropdown-item>
<el-dropdown-item icon="el-icon-refresh-right"><span @click="resetPassword(scope.row)">{{ $t('User.table.reset_pwd') }}</span></el-dropdown-item>
<el-dropdown-item icon="el-icon-key">
<span @click="openDeptDrawer(scope.row)">部门权限</span>
<span @click="openDeptDrawer(scope.row)">{{ $t('User.table.dept_reg') }}</span>
</el-dropdown-item>
<el-dropdown-item icon="el-icon-key">
<span @click="openDataDialog(scope.row)">数据权限</span>
<span @click="openDataDialog(scope.row)">{{ $t('User.table.data_reg') }}</span>
</el-dropdown-item>
<el-dropdown-item icon="el-icon-lock"><span @click="changeEnabled(scope.row)">{{ enabledTypeOptions.find(item => {return item.key !== scope.row.is_used}).display_name }}账号</span></el-dropdown-item>
<el-dropdown-item icon="el-icon-lock"><span @click="changeEnabled(scope.row)">{{ enabledTypeOptions.find(item => {return item.key !== scope.row.is_used}).display_name }}{{ $t('User.table.account') }}</span></el-dropdown-item>
<el-dropdown-item icon="el-icon-circle-check">
<span @click="openRoleDrawer(scope.row)">分配角色</span>
<span @click="openRoleDrawer(scope.row)">{{ $t('User.table.assign_roles') }}</span>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
@@ -306,14 +310,14 @@
:data="dataPermissions"
style="width: 100%; max-height: 500px"
>
<el-table-column prop="permission_scope_type" label="权限类型" min-width="100" show-overflow-tooltip>
<el-table-column prop="permission_scope_type" :label="$t('User.table.permission_scope_type')" min-width="100" show-overflow-tooltip>
<template slot-scope="scope">
{{ dict.label.permission_scope_type[scope.row.permission_scope_type] }}
</template>
</el-table-column>
<el-table-column prop="permissionName" label="权限范围" min-width="100" show-overflow-tooltip />
<el-table-column prop="deptName" label="部门名称" min-width="100" show-overflow-tooltip />
<el-table-column prop="person_name" label="用户名称" min-width="100" show-overflow-tooltip />
<el-table-column prop="permissionName" :label="$t('User.table.permissionName')" min-width="100" show-overflow-tooltip />
<el-table-column prop="deptName" :label="$t('User.table.deptName')" min-width="100" show-overflow-tooltip />
<el-table-column prop="person_name" :label="$t('User.table.person_name')" min-width="100" show-overflow-tooltip />
</el-table>
</el-dialog>
<relevance-user-dialog :dialog-show.sync="relevanceUser" :is-single="false" :users="userIds" @selectUsers="selectUsers" />
@@ -336,6 +340,7 @@ import { mapGetters } from 'vuex'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import RelevanceUserDialog from '@/views/system/user/dialog/relevanceUserDialog'
import RelevanceDeptDialog from '@/views/system/user/dialog/relevanceDeptDialog'
import i18n from '@/i18n'
let userRoles = []
const defaultForm = {
@@ -343,7 +348,7 @@ const defaultForm = {
depts: [],
username: null,
person_name: null,
gender: '',
gender: '1',
email: null,
is_used: true,
roles: [],
@@ -354,7 +359,7 @@ export default {
name: 'User',
components: { RelevanceDeptDialog, RelevanceUserDialog, Treeselect, crudOperation, rrOperation, udOperation, pagination },
cruds() {
return CRUD({ title: '用户', idField: 'user_id', url: 'api/users', crudMethod: { ...crudUser }})
return CRUD({ title: i18n.t('User.title'), idField: 'user_id', url: 'api/users', crudMethod: { ...crudUser }})
},
mixins: [presenter(), header(), form(defaultForm), crud()],
// 数据字典
@@ -372,8 +377,8 @@ export default {
del: ['admin', 'user:del']
},
enabledTypeOptions: [
{ key: true, display_name: '激活' },
{ key: false, display_name: '锁定' }
{ key: true, display_name: i18n.t('User.table.activate') },
{ key: false, display_name: i18n.t('User.table.locked') }
],
rules: {
username: [
@@ -410,7 +415,21 @@ export default {
computed: {
...mapGetters([
'user'
])
]),
computedLabelWidth() {
const item = localStorage.getItem('lang')
if (item === 'zh') {
return `650px`
}
return `720px`
},
computedFormLabelWidth() {
const item = localStorage.getItem('lang')
if (item === 'zh') {
return `80px`
}
return `120px`
}
},
beforeMount() {
this.deptTree()