fix: 1.修复【个人中心】页面在英语环境下字段名过长被换行展示导致错位;2.修复【个人中心】页面【修改密码】校验失效。

This commit is contained in:
baayso 2023-08-17 21:35:58 +08:00
parent a3f2a01eb0
commit e4592442ed
2 changed files with 14 additions and 9 deletions

View File

@ -1,5 +1,5 @@
<template> <template>
<Form ref="formRef" :labelWidth="80" :rules="rules" :schema="schema"> <Form ref="formRef" :labelWidth="200" :rules="rules" :schema="schema">
<template #sex="form"> <template #sex="form">
<el-radio-group v-model="form['sex']"> <el-radio-group v-model="form['sex']">
<el-radio :label="1">{{ t('profile.user.man') }}</el-radio> <el-radio :label="1">{{ t('profile.user.man') }}</el-radio>
@ -7,8 +7,10 @@
</el-radio-group> </el-radio-group>
</template> </template>
</Form> </Form>
<XButton :title="t('common.save')" @click="submit()" /> <div style="text-align: center">
<XButton :title="t('common.reset')" type="danger" @click="init()" /> <XButton :title="t('common.save')" type="primary" @click="submit()" />
<XButton :title="t('common.reset')" type="danger" @click="init()" />
</div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import type { FormRules } from 'element-plus' import type { FormRules } from 'element-plus'

View File

@ -1,12 +1,12 @@
<template> <template>
<el-form ref="formRef" :model="password" :rules="rules" label-width="80px"> <el-form ref="formRef" :model="password" :rules="rules" :label-width="200">
<el-form-item :label="t('profile.password.oldPassword')"> <el-form-item :label="t('profile.password.oldPassword')" prop="oldPassword">
<InputPassword v-model="password.oldPassword" /> <InputPassword v-model="password.oldPassword" />
</el-form-item> </el-form-item>
<el-form-item :label="t('profile.password.newPassword')"> <el-form-item :label="t('profile.password.newPassword')" prop="newPassword">
<InputPassword v-model="password.newPassword" strength /> <InputPassword v-model="password.newPassword" strength />
</el-form-item> </el-form-item>
<el-form-item :label="t('profile.password.confirmPassword')"> <el-form-item :label="t('profile.password.confirmPassword')" prop="confirmPassword">
<InputPassword v-model="password.confirmPassword" strength /> <InputPassword v-model="password.confirmPassword" strength />
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
@ -33,17 +33,18 @@ const password = reactive({
}) })
// //
const equalToPassword = (value, callback) => { const equalToPassword = (_rule, value, callback) => {
if (password.newPassword !== value) { if (password.newPassword !== value) {
callback(new Error(t('profile.password.diffPwd'))) callback(new Error(t('profile.password.diffPwd')))
} else { } else {
callback() callback()
} }
} }
const rules = reactive<FormRules>({ const rules = reactive<FormRules>({
oldPassword: [ oldPassword: [
{ required: true, message: t('profile.password.oldPwdMsg'), trigger: 'blur' }, { required: true, message: t('profile.password.oldPwdMsg'), trigger: 'blur' },
{ min: 3, max: 5, message: t('profile.password.pwdRules'), trigger: 'blur' } { min: 6, max: 20, message: t('profile.password.pwdRules'), trigger: 'blur' }
], ],
newPassword: [ newPassword: [
{ required: true, message: t('profile.password.newPwdMsg'), trigger: 'blur' }, { required: true, message: t('profile.password.newPwdMsg'), trigger: 'blur' },
@ -54,6 +55,7 @@ const rules = reactive<FormRules>({
{ required: true, validator: equalToPassword, trigger: 'blur' } { required: true, validator: equalToPassword, trigger: 'blur' }
] ]
}) })
const submit = (formEl: FormInstance | undefined) => { const submit = (formEl: FormInstance | undefined) => {
if (!formEl) return if (!formEl) return
formEl.validate(async (valid) => { formEl.validate(async (valid) => {
@ -63,6 +65,7 @@ const submit = (formEl: FormInstance | undefined) => {
} }
}) })
} }
const reset = (formEl: FormInstance | undefined) => { const reset = (formEl: FormInstance | undefined) => {
if (!formEl) return if (!formEl) return
formEl.resetFields() formEl.resetFields()