多语言优化
This commit is contained in:
@@ -1,17 +1,17 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
v-model="visible"
|
||||
:title="dialogType === 'add' ? '新增菜单' : '编辑菜单'"
|
||||
:title="dialogType === 'add' ? $t('page.form.titleAdd') : $t('page.form.titleEdit')"
|
||||
width="820px"
|
||||
align-center
|
||||
:close-on-click-modal="false"
|
||||
@close="handleClose"
|
||||
>
|
||||
<el-form ref="formRef" :model="formData" :rules="rules" label-width="120px">
|
||||
<el-form-item label="菜单类型" prop="type">
|
||||
<el-form-item :label="$t('page.form.labelMenuType')" prop="type">
|
||||
<sa-radio v-model="formData.type" type="button" dict="menu_type"></sa-radio>
|
||||
</el-form-item>
|
||||
<el-form-item label="上级菜单" prop="parent_id">
|
||||
<el-form-item :label="$t('page.form.labelParentMenu')" prop="parent_id">
|
||||
<el-tree-select
|
||||
v-model="formData.parent_id"
|
||||
:data="optionData.treeData"
|
||||
@@ -22,63 +22,63 @@
|
||||
</el-form-item>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="菜单名称" prop="name">
|
||||
<el-input v-model="formData.name" placeholder="请输入菜单名称" />
|
||||
<el-form-item :label="$t('page.form.labelMenuName')" prop="name">
|
||||
<el-input v-model="formData.name" :placeholder="$t('page.form.labelMenuName')" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" v-if="formData.type < 3">
|
||||
<el-form-item prop="path">
|
||||
<template #label>
|
||||
<sa-label
|
||||
label="路由地址"
|
||||
tooltip="一级菜单:以 / 开头的绝对路径(如 /dashboard) 二级及以下:相对路径(如 console、user)"
|
||||
:label="$t('page.form.labelRoutePath')"
|
||||
:tooltip="$t('page.form.labelRoutePathTip')"
|
||||
/>
|
||||
</template>
|
||||
<el-input v-model="formData.path" placeholder="如:/dashboard 或 console" />
|
||||
<el-input v-model="formData.path" :placeholder="$t('page.form.placeholderRoutePath')" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" v-if="formData.type != 3">
|
||||
<el-form-item label="组件名称" prop="code">
|
||||
<el-input v-model="formData.code" placeholder="如: User" />
|
||||
<el-form-item :label="$t('page.form.labelComponentName')" prop="code">
|
||||
<el-input v-model="formData.code" :placeholder="$t('page.form.placeholderComponentName')" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" v-if="formData.type === 2">
|
||||
<el-form-item prop="component">
|
||||
<template #label>
|
||||
<sa-label label="组件路径" tooltip="填写组件路径(views目录下) 目录菜单:留空" />
|
||||
<sa-label :label="$t('page.form.labelComponentPath')" :tooltip="$t('page.form.labelComponentPathTip')" />
|
||||
</template>
|
||||
<el-autocomplete
|
||||
class="w-full"
|
||||
v-model="formData.component"
|
||||
:fetch-suggestions="querySearch"
|
||||
clearable
|
||||
placeholder="如:/system/user 或留空"
|
||||
:placeholder="$t('page.form.placeholderComponentPath')"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" v-if="formData.type != 3">
|
||||
<el-form-item label="菜单图标" prop="icon">
|
||||
<el-form-item :label="$t('page.form.labelMenuIcon')" prop="icon">
|
||||
<sa-icon-picker v-model="formData.icon" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" v-if="formData.type === 3">
|
||||
<el-form-item label="权限标识" prop="slug">
|
||||
<el-input v-model="formData.slug" placeholder="请输入权限标识" />
|
||||
<el-form-item :label="$t('page.form.labelPermSlug')" prop="slug">
|
||||
<el-input v-model="formData.slug" :placeholder="$t('page.form.placeholderPermSlug')" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24" v-if="formData.type === 4">
|
||||
<el-form-item label="外链地址" prop="link_url">
|
||||
<el-input v-model="formData.link_url" placeholder="如:https://saithink.top" />
|
||||
<el-form-item :label="$t('page.form.labelLinkUrl')" prop="link_url">
|
||||
<el-input v-model="formData.link_url" :placeholder="$t('page.form.placeholderLinkUrl')" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item prop="sort">
|
||||
<template #label>
|
||||
<sa-label label="排序" tooltip="数字越大越靠前" />
|
||||
<sa-label :label="$t('page.form.labelSort')" :tooltip="$t('page.form.labelSortTip')" />
|
||||
</template>
|
||||
<el-input-number
|
||||
v-model="formData.sort"
|
||||
placeholder="请输入排序"
|
||||
:placeholder="$t('page.form.placeholderSort')"
|
||||
controls-position="right"
|
||||
/>
|
||||
</el-form-item>
|
||||
@@ -86,7 +86,7 @@
|
||||
<el-col :span="12">
|
||||
<el-form-item prop="status">
|
||||
<template #label>
|
||||
<sa-label label="状态" tooltip="禁用后,该菜单项将不可用" />
|
||||
<sa-label :label="$t('page.form.labelStatus')" :tooltip="$t('page.form.labelStatusTip')" />
|
||||
</template>
|
||||
<sa-radio v-model="formData.status" dict="data_status" />
|
||||
</el-form-item>
|
||||
@@ -94,7 +94,7 @@
|
||||
<el-col :span="12">
|
||||
<el-form-item prop="is_iframe">
|
||||
<template #label>
|
||||
<sa-label label="是否内嵌" tooltip="外链模式下有效" />
|
||||
<sa-label :label="$t('page.form.labelIsIframe')" :tooltip="$t('page.form.labelIsIframeTip')" />
|
||||
</template>
|
||||
<sa-switch v-model="formData.is_iframe" dict="yes_or_no" :showText="false" />
|
||||
</el-form-item>
|
||||
@@ -102,7 +102,7 @@
|
||||
<el-col :span="12">
|
||||
<el-form-item prop="is_keep_alive">
|
||||
<template #label>
|
||||
<sa-label label="是否缓存" tooltip="切换tabs不刷新" />
|
||||
<sa-label :label="$t('page.form.labelIsKeepAlive')" :tooltip="$t('page.form.labelIsKeepAliveTip')" />
|
||||
</template>
|
||||
<sa-switch v-model="formData.is_keep_alive" dict="yes_or_no" :showText="false" />
|
||||
</el-form-item>
|
||||
@@ -110,7 +110,7 @@
|
||||
<el-col :span="12">
|
||||
<el-form-item prop="is_hidden">
|
||||
<template #label>
|
||||
<sa-label label="是否隐藏" tooltip="不在菜单栏显示,但是可以通过路由访问" />
|
||||
<sa-label :label="$t('page.form.labelIsHidden')" :tooltip="$t('page.form.labelIsHiddenTip')" />
|
||||
</template>
|
||||
<sa-switch v-model="formData.is_hidden" dict="yes_or_no" :showText="false" />
|
||||
</el-form-item>
|
||||
@@ -118,7 +118,7 @@
|
||||
<el-col :span="12">
|
||||
<el-form-item prop="is_fixed_tab">
|
||||
<template #label>
|
||||
<sa-label label="是否固定" tooltip="固定在tabs导航栏" />
|
||||
<sa-label :label="$t('page.form.labelIsFixedTab')" :tooltip="$t('page.form.labelIsFixedTabTip')" />
|
||||
</template>
|
||||
<sa-switch v-model="formData.is_fixed_tab" dict="yes_or_no" :showText="false" />
|
||||
</el-form-item>
|
||||
@@ -126,7 +126,7 @@
|
||||
<el-col :span="12">
|
||||
<el-form-item prop="is_full_page">
|
||||
<template #label>
|
||||
<sa-label label="是否全屏" tooltip="不继承左侧菜单和顶部导航栏" />
|
||||
<sa-label :label="$t('page.form.labelIsFullPage')" :tooltip="$t('page.form.labelIsFullPageTip')" />
|
||||
</template>
|
||||
<sa-switch v-model="formData.is_full_page" dict="yes_or_no" :showText="false" />
|
||||
</el-form-item>
|
||||
@@ -134,8 +134,8 @@
|
||||
</el-row>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="handleClose">取消</el-button>
|
||||
<el-button type="primary" @click="handleSubmit">提交</el-button>
|
||||
<el-button @click="handleClose">{{ $t('common.cancel') }}</el-button>
|
||||
<el-button type="primary" @click="handleSubmit">{{ $t('table.form.submit') }}</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
@@ -144,6 +144,7 @@
|
||||
import api from '@/api/system/menu'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import type { FormInstance, FormRules } from 'element-plus'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
interface Props {
|
||||
modelValue: boolean
|
||||
@@ -163,6 +164,7 @@
|
||||
})
|
||||
|
||||
const emit = defineEmits<Emits>()
|
||||
const { t } = useI18n()
|
||||
|
||||
const formRef = ref<FormInstance>()
|
||||
const optionData = reactive({
|
||||
@@ -197,14 +199,14 @@
|
||||
/**
|
||||
* 表单验证规则
|
||||
*/
|
||||
const rules = reactive<FormRules>({
|
||||
parent_id: [{ required: true, message: '请选择上级菜单', trigger: 'change' }],
|
||||
name: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }],
|
||||
path: [{ required: true, message: '请输入路由地址', trigger: 'blur' }],
|
||||
code: [{ required: true, message: '请输入组件名称', trigger: 'blur' }],
|
||||
slug: [{ required: true, message: '请输入权限标识', trigger: 'blur' }],
|
||||
link_url: [{ required: true, message: '请输入外链地址', trigger: 'blur' }]
|
||||
})
|
||||
const rules = computed<FormRules>(() => ({
|
||||
parent_id: [{ required: true, message: t('page.form.ruleParentMenuRequired'), trigger: 'change' }],
|
||||
name: [{ required: true, message: t('page.form.ruleMenuNameRequired'), trigger: 'blur' }],
|
||||
path: [{ required: true, message: t('page.form.ruleRoutePathRequired'), trigger: 'blur' }],
|
||||
code: [{ required: true, message: t('page.form.ruleComponentNameRequired'), trigger: 'blur' }],
|
||||
slug: [{ required: true, message: t('page.form.rulePermSlugRequired'), trigger: 'blur' }],
|
||||
link_url: [{ required: true, message: t('page.form.ruleLinkUrlRequired'), trigger: 'blur' }]
|
||||
}))
|
||||
|
||||
/**
|
||||
* 初始数据
|
||||
@@ -302,10 +304,10 @@
|
||||
await formRef.value.validate()
|
||||
if (props.dialogType === 'add') {
|
||||
await api.save(formData)
|
||||
ElMessage.success('新增成功')
|
||||
ElMessage.success(t('page.form.addSuccess'))
|
||||
} else {
|
||||
await api.update(formData)
|
||||
ElMessage.success('修改成功')
|
||||
ElMessage.success(t('page.form.editSuccess'))
|
||||
}
|
||||
emit('success')
|
||||
handleClose()
|
||||
|
||||
@@ -1,37 +1,37 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
v-model="visible"
|
||||
:title="dialogType === 'add' ? '新增岗位' : '编辑岗位'"
|
||||
:title="dialogType === 'add' ? $t('page.form.titleAdd') : $t('page.form.titleEdit')"
|
||||
width="600px"
|
||||
align-center
|
||||
:close-on-click-modal="false"
|
||||
@close="handleClose"
|
||||
>
|
||||
<el-form ref="formRef" :model="formData" :rules="rules" label-width="120px">
|
||||
<el-form-item label="岗位名称" prop="name">
|
||||
<el-input v-model="formData.name" placeholder="请输入岗位名称" />
|
||||
<el-form-item :label="$t('page.form.labelName')" prop="name">
|
||||
<el-input v-model="formData.name" :placeholder="$t('page.form.placeholderName')" />
|
||||
</el-form-item>
|
||||
<el-form-item label="岗位编码" prop="code">
|
||||
<el-input v-model="formData.code" placeholder="请输入岗位编码" />
|
||||
<el-form-item :label="$t('page.form.labelCode')" prop="code">
|
||||
<el-input v-model="formData.code" :placeholder="$t('page.form.placeholderCode')" />
|
||||
</el-form-item>
|
||||
<el-form-item label="描述" prop="remark">
|
||||
<el-form-item :label="$t('page.form.labelRemark')" prop="remark">
|
||||
<el-input
|
||||
v-model="formData.remark"
|
||||
type="textarea"
|
||||
:rows="3"
|
||||
placeholder="请输入岗位描述"
|
||||
:placeholder="$t('page.form.placeholderRemark')"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input-number v-model="formData.sort" placeholder="请输入排序" />
|
||||
<el-form-item :label="$t('page.form.labelSort')" prop="sort">
|
||||
<el-input-number v-model="formData.sort" :placeholder="$t('page.form.placeholderSort')" />
|
||||
</el-form-item>
|
||||
<el-form-item label="启用" prop="status">
|
||||
<el-form-item :label="$t('page.form.labelStatus')" prop="status">
|
||||
<sa-radio v-model="formData.status" dict="data_status" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="handleClose">取消</el-button>
|
||||
<el-button type="primary" @click="handleSubmit">提交</el-button>
|
||||
<el-button @click="handleClose">{{ $t('common.cancel') }}</el-button>
|
||||
<el-button type="primary" @click="handleSubmit">{{ $t('table.form.submit') }}</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
@@ -40,6 +40,7 @@
|
||||
import api from '@/api/system/post'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import type { FormInstance, FormRules } from 'element-plus'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
interface Props {
|
||||
modelValue: boolean
|
||||
@@ -59,6 +60,7 @@
|
||||
})
|
||||
|
||||
const emit = defineEmits<Emits>()
|
||||
const { t } = useI18n()
|
||||
|
||||
const formRef = ref<FormInstance>()
|
||||
|
||||
@@ -73,10 +75,10 @@
|
||||
/**
|
||||
* 表单验证规则
|
||||
*/
|
||||
const rules = reactive<FormRules>({
|
||||
name: [{ required: true, message: '请输入岗位名称', trigger: 'blur' }],
|
||||
code: [{ required: true, message: '请输入岗位编码', trigger: 'blur' }]
|
||||
})
|
||||
const rules = computed<FormRules>(() => ({
|
||||
name: [{ required: true, message: t('page.form.ruleNameRequired'), trigger: 'blur' }],
|
||||
code: [{ required: true, message: t('page.form.ruleCodeRequired'), trigger: 'blur' }]
|
||||
}))
|
||||
|
||||
/**
|
||||
* 初始数据
|
||||
@@ -150,10 +152,10 @@
|
||||
await formRef.value.validate()
|
||||
if (props.dialogType === 'add') {
|
||||
await api.save(formData)
|
||||
ElMessage.success('新增成功')
|
||||
ElMessage.success(t('page.form.addSuccess'))
|
||||
} else {
|
||||
await api.update(formData)
|
||||
ElMessage.success('修改成功')
|
||||
ElMessage.success(t('page.form.editSuccess'))
|
||||
}
|
||||
emit('success')
|
||||
handleClose()
|
||||
|
||||
@@ -1,42 +1,40 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
v-model="visible"
|
||||
:title="dialogType === 'add' ? '新增角色' : '编辑角色'"
|
||||
:title="dialogType === 'add' ? $t('page.form.titleAdd') : $t('page.form.titleEdit')"
|
||||
width="600px"
|
||||
align-center
|
||||
@close="handleClose"
|
||||
>
|
||||
<el-form ref="formRef" :model="formData" :rules="rules" label-width="120px">
|
||||
<el-form-item label="角色名称" prop="name">
|
||||
<el-input v-model="formData.name" placeholder="请输入角色名称" />
|
||||
<el-form-item :label="$t('page.form.labelName')" prop="name">
|
||||
<el-input v-model="formData.name" :placeholder="$t('page.form.placeholderName')" />
|
||||
</el-form-item>
|
||||
<el-form-item label="角色标识" prop="code">
|
||||
<el-input v-model="formData.code" placeholder="请输入角色编码" />
|
||||
<el-form-item :label="$t('page.form.labelCode')" prop="code">
|
||||
<el-input v-model="formData.code" :placeholder="$t('page.form.placeholderCode')" />
|
||||
</el-form-item>
|
||||
<el-form-item label="角色级别" prop="level">
|
||||
<el-input-number v-model="formData.level" placeholder="角色级别" :max="99" :min="1" />
|
||||
<el-form-item :label="$t('page.form.labelLevel')" prop="level">
|
||||
<el-input-number v-model="formData.level" :placeholder="$t('page.form.labelLevel')" :max="99" :min="1" />
|
||||
</el-form-item>
|
||||
<div class="text-xs text-gray-400 pl-32 pb-4"
|
||||
>控制角色的权限层级, 不能操作职级高于自己的角色</div
|
||||
>
|
||||
<el-form-item label="描述" prop="remark">
|
||||
<div class="text-xs text-gray-400 pl-32 pb-4">{{ $t('page.form.levelTip') }}</div>
|
||||
<el-form-item :label="$t('page.form.labelRemark')" prop="remark">
|
||||
<el-input
|
||||
v-model="formData.remark"
|
||||
type="textarea"
|
||||
:rows="3"
|
||||
placeholder="请输入角色描述"
|
||||
:placeholder="$t('page.form.placeholderRemark')"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input-number v-model="formData.sort" placeholder="请输入排序" />
|
||||
<el-form-item :label="$t('page.form.labelSort')" prop="sort">
|
||||
<el-input-number v-model="formData.sort" :placeholder="$t('page.form.placeholderSort')" />
|
||||
</el-form-item>
|
||||
<el-form-item label="启用" prop="status">
|
||||
<el-form-item :label="$t('page.form.labelStatus')" prop="status">
|
||||
<sa-radio v-model="formData.status" dict="data_status" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="handleClose">取消</el-button>
|
||||
<el-button type="primary" @click="handleSubmit">提交</el-button>
|
||||
<el-button @click="handleClose">{{ $t('common.cancel') }}</el-button>
|
||||
<el-button type="primary" @click="handleSubmit">{{ $t('table.form.submit') }}</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
@@ -45,6 +43,7 @@
|
||||
import api from '@/api/system/role'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import type { FormInstance, FormRules } from 'element-plus'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
interface Props {
|
||||
modelValue: boolean
|
||||
@@ -64,6 +63,7 @@
|
||||
})
|
||||
|
||||
const emit = defineEmits<Emits>()
|
||||
const { t } = useI18n()
|
||||
|
||||
const formRef = ref<FormInstance>()
|
||||
|
||||
@@ -78,11 +78,11 @@
|
||||
/**
|
||||
* 表单验证规则
|
||||
*/
|
||||
const rules = reactive<FormRules>({
|
||||
name: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
|
||||
code: [{ required: true, message: '请输入角色编码', trigger: 'blur' }],
|
||||
level: [{ required: true, message: '请输入角色级别', trigger: 'blur' }]
|
||||
})
|
||||
const rules = computed<FormRules>(() => ({
|
||||
name: [{ required: true, message: t('page.form.ruleNameRequired'), trigger: 'blur' }],
|
||||
code: [{ required: true, message: t('page.form.ruleCodeRequired'), trigger: 'blur' }],
|
||||
level: [{ required: true, message: t('page.form.ruleLevelRequired'), trigger: 'blur' }]
|
||||
}))
|
||||
|
||||
/**
|
||||
* 初始数据
|
||||
@@ -157,10 +157,10 @@
|
||||
await formRef.value.validate()
|
||||
if (props.dialogType === 'add') {
|
||||
await api.save(formData)
|
||||
ElMessage.success('新增成功')
|
||||
ElMessage.success(t('page.form.addSuccess'))
|
||||
} else {
|
||||
await api.update(formData)
|
||||
ElMessage.success('修改成功')
|
||||
ElMessage.success(t('page.form.editSuccess'))
|
||||
}
|
||||
emit('success')
|
||||
handleClose()
|
||||
|
||||
@@ -1,36 +1,36 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
v-model="visible"
|
||||
:title="dialogType === 'add' ? '新增用户' : '编辑用户'"
|
||||
:title="dialogType === 'add' ? $t('page.form.titleAdd') : $t('page.form.titleEdit')"
|
||||
width="800px"
|
||||
align-center
|
||||
:close-on-click-modal="false"
|
||||
@close="handleClose"
|
||||
>
|
||||
<el-form ref="formRef" :model="formData" :rules="rules" label-width="100px">
|
||||
<el-form-item label="头像" prop="avatar">
|
||||
<el-form-item :label="$t('page.form.labelAvatar')" prop="avatar">
|
||||
<sa-image-picker v-model="formData.avatar" round />
|
||||
</el-form-item>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="用户名" prop="username">
|
||||
<el-form-item :label="$t('page.form.labelUsername')" prop="username">
|
||||
<el-input v-model="formData.username" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="真实姓名" prop="realname">
|
||||
<el-form-item :label="$t('page.form.labelRealname')" prop="realname">
|
||||
<el-input v-model="formData.realname" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row v-if="dialogType === 'add'">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="密码" prop="password">
|
||||
<el-form-item :label="$t('page.form.labelPassword')" prop="password">
|
||||
<el-input type="password" v-model="formData.password" show-password />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="确认密码" prop="password_confirm">
|
||||
<el-form-item :label="$t('page.form.labelPasswordConfirm')" prop="password_confirm">
|
||||
<el-input type="password" v-model="formData.password_confirm" show-password />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
@@ -38,20 +38,20 @@
|
||||
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="邮箱" prop="email">
|
||||
<el-input v-model="formData.email" placeholder="请输入邮箱" />
|
||||
<el-form-item :label="$t('page.form.labelEmail')" prop="email">
|
||||
<el-input v-model="formData.email" :placeholder="$t('page.form.placeholderEmail')" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="手机号" prop="phone">
|
||||
<el-input v-model="formData.phone" placeholder="请输入手机号" />
|
||||
<el-form-item :label="$t('page.form.labelPhone')" prop="phone">
|
||||
<el-input v-model="formData.phone" :placeholder="$t('page.form.placeholderPhone')" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="部门" prop="dept_id">
|
||||
<el-form-item :label="$t('page.form.labelDept')" prop="dept_id">
|
||||
<el-tree-select
|
||||
v-model="formData.dept_id"
|
||||
:data="optionData.deptData"
|
||||
@@ -62,7 +62,7 @@
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="角色" prop="role_ids">
|
||||
<el-form-item :label="$t('page.form.labelRole')" prop="role_ids">
|
||||
<el-select v-model="formData.role_ids" multiple clearable>
|
||||
<el-option
|
||||
v-for="role in optionData.roleList"
|
||||
@@ -77,7 +77,7 @@
|
||||
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="岗位" prop="post_ids">
|
||||
<el-form-item :label="$t('page.form.labelPost')" prop="post_ids">
|
||||
<el-select v-model="formData.post_ids" multiple clearable>
|
||||
<el-option
|
||||
v-for="post in optionData.postList"
|
||||
@@ -89,14 +89,14 @@
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="性别" prop="gender">
|
||||
<el-form-item :label="$t('page.form.labelGender')" prop="gender">
|
||||
<sa-radio v-model="formData.gender" dict="gender" valueType="string" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-form-item :label="$t('page.form.labelStatus')" prop="status">
|
||||
<sa-radio v-model="formData.status" dict="data_status" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
@@ -104,12 +104,12 @@
|
||||
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-form-item :label="$t('page.form.labelRemark')" prop="remark">
|
||||
<el-input
|
||||
v-model="formData.remark"
|
||||
type="textarea"
|
||||
:rows="3"
|
||||
placeholder="请输入备注"
|
||||
:placeholder="$t('page.form.placeholderRemark')"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
@@ -117,8 +117,8 @@
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="handleClose">取消</el-button>
|
||||
<el-button type="primary" @click="handleSubmit">提交</el-button>
|
||||
<el-button @click="handleClose">{{ $t('common.cancel') }}</el-button>
|
||||
<el-button type="primary" @click="handleSubmit">{{ $t('table.form.submit') }}</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
@@ -130,6 +130,8 @@
|
||||
import deptApi from '@/api/system/dept'
|
||||
import roleApi from '@/api/system/role'
|
||||
import postApi from '@/api/system/post'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
interface Props {
|
||||
modelValue: boolean
|
||||
@@ -149,6 +151,7 @@
|
||||
})
|
||||
|
||||
const emit = defineEmits<Emits>()
|
||||
const { t } = useI18n()
|
||||
|
||||
const formRef = ref<FormInstance>()
|
||||
const optionData = reactive({
|
||||
@@ -167,30 +170,30 @@
|
||||
|
||||
const validatePasswordConfirm = (rule: any, value: any, callback: any) => {
|
||||
if (value !== formData.password) {
|
||||
callback(new Error('两次输入的密码不一致'))
|
||||
callback(new Error(t('page.form.rulePasswordNotMatch')))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
|
||||
// 表单验证规则
|
||||
const rules: FormRules = {
|
||||
const rules = computed<FormRules>(() => ({
|
||||
username: [
|
||||
{ required: true, message: '请输入用户名', trigger: 'blur' },
|
||||
{ min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
|
||||
{ required: true, message: t('page.form.ruleUsernameRequired'), trigger: 'blur' },
|
||||
{ min: 2, max: 20, message: t('page.form.ruleUsernameLength'), trigger: 'blur' }
|
||||
],
|
||||
password: [
|
||||
{ required: true, message: '请输入密码', trigger: 'blur' },
|
||||
{ min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
|
||||
{ required: true, message: t('page.form.rulePasswordRequired'), trigger: 'blur' },
|
||||
{ min: 6, max: 20, message: t('page.form.rulePasswordLength'), trigger: 'blur' }
|
||||
],
|
||||
password_confirm: [
|
||||
{ required: true, message: '请输入确认密码', trigger: 'blur' },
|
||||
{ min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' },
|
||||
{ required: true, message: t('page.form.rulePasswordConfirmRequired'), trigger: 'blur' },
|
||||
{ min: 6, max: 20, message: t('page.form.rulePasswordLength'), trigger: 'blur' },
|
||||
{ validator: validatePasswordConfirm, trigger: 'blur' }
|
||||
],
|
||||
dept_id: [{ required: true, message: '请选择部门', trigger: 'change' }],
|
||||
role_ids: [{ required: true, message: '请选择角色', trigger: 'blur' }]
|
||||
}
|
||||
dept_id: [{ required: true, message: t('page.form.ruleDeptRequired'), trigger: 'change' }],
|
||||
role_ids: [{ required: true, message: t('page.form.ruleRoleRequired'), trigger: 'blur' }]
|
||||
}))
|
||||
|
||||
// 初始表单数据
|
||||
const initialFormData = {
|
||||
@@ -287,10 +290,10 @@
|
||||
await formRef.value.validate()
|
||||
if (props.dialogType === 'add') {
|
||||
await api.save(formData)
|
||||
ElMessage.success('新增成功')
|
||||
ElMessage.success(t('page.form.addSuccess'))
|
||||
} else {
|
||||
await api.update(formData)
|
||||
ElMessage.success('修改成功')
|
||||
ElMessage.success(t('page.form.editSuccess'))
|
||||
}
|
||||
emit('success')
|
||||
handleClose()
|
||||
|
||||
Reference in New Issue
Block a user