This commit is contained in:
zhoutianchi
2025-12-26 14:49:53 +08:00
parent 08251022f5
commit 7d61fe9d04

View File

@@ -3,26 +3,41 @@
<el-dialog :close-on-click-modal="false" :title="dataForm.userId ? $t('common.editBtn') : $t('common.addBtn')" draggable v-model="visible"> <el-dialog :close-on-click-modal="false" :title="dataForm.userId ? $t('common.editBtn') : $t('common.addBtn')" draggable v-model="visible">
<el-form :model="dataForm" :rules="dataRules" label-width="90px" ref="dataFormRef" v-loading="loading"> <el-form :model="dataForm" :rules="dataRules" label-width="90px" ref="dataFormRef" v-loading="loading">
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="12" class="mb20"> <el-col :span="12" class="mb20">
<el-form-item :label="$t('sysuser.username')" prop="username"> <el-form-item :label="$t('sysuser.username')" prop="username">
<el-input :disabled="dataForm.userId !== ''" :placeholder="$t('sysuser.inputUsernameTip')" v-model="dataForm.username"></el-input> <el-input
</el-form-item> :disabled="dataForm.userId !== ''"
</el-col> :placeholder="$t('sysuser.inputUsernameTip')"
<el-col :span="12" class="mb20"> v-model="dataForm.username"
<el-form-item :label="$t('sysuser.password')" prop="password"> autocomplete="off"
<el-input clearable :placeholder="$t('sysuser.inputPasswordTip')" type="password" v-model="dataForm.password"></el-input> :readonly="formState.usernameReadonly"
</el-form-item> @focus="formState.usernameReadonly = false"
</el-col> ></el-input>
</el-form-item>
</el-col>
<el-col :span="12" class="mb20">
<el-form-item :label="$t('sysuser.password')" prop="password">
<el-input
clearable
:placeholder="$t('sysuser.inputPasswordTip')"
type="password"
v-model="dataForm.password"
autocomplete="new-password"
:readonly="formState.passwordReadonly"
@focus="formState.passwordReadonly = false"
></el-input>
</el-form-item>
</el-col>
<el-col :span="12" class="mb20"> <el-col :span="12" class="mb20">
<el-form-item :label="$t('sysuser.name')" prop="realName"> <el-form-item :label="$t('sysuser.name')" prop="realName">
<el-input clearable :placeholder="$t('sysuser.inputNameTip')" v-model="dataForm.realName"></el-input> <el-input clearable :placeholder="$t('sysuser.inputNameTip')" v-model="dataForm.realName"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12" class="mb20"> <!-- <el-col :span="12" class="mb20">-->
<el-form-item :label="$t('sysuser.phone')" prop="phone"> <!-- <el-form-item :label="$t('sysuser.phone')" prop="phone">-->
<el-input clearable :placeholder="$t('sysuser.inputPhoneTip')" v-model="dataForm.phone"></el-input> <!-- <el-input clearable :placeholder="$t('sysuser.inputPhoneTip')" v-model="dataForm.phone"></el-input>-->
</el-form-item> <!-- </el-form-item>-->
</el-col> <!-- </el-col>-->
<el-col :span="12" class="mb20"> <el-col :span="12" class="mb20">
<el-form-item :label="$t('sysuser.role')" prop="role"> <el-form-item :label="$t('sysuser.role')" prop="role">
<el-select clearable multiple :placeholder="$t('sysuser.selectRole')" v-model="dataForm.role"> <el-select clearable multiple :placeholder="$t('sysuser.selectRole')" v-model="dataForm.role">
@@ -30,13 +45,13 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12" class="mb20"> <!-- <el-col :span="12" class="mb20">-->
<el-form-item :label="$t('sysuser.post')" prop="post"> <!-- <el-form-item :label="$t('sysuser.post')" prop="post">-->
<el-select clearable multiple :placeholder="$t('sysuser.selectPost')" v-model="dataForm.post"> <!-- <el-select clearable multiple :placeholder="$t('sysuser.selectPost')" v-model="dataForm.post">-->
<el-option :key="item.postId" :label="item.postName" :value="item.postId" v-for="item in postData" /> <!-- <el-option :key="item.postId" :label="item.postName" :value="item.postId" v-for="item in postData" />-->
</el-select> <!-- </el-select>-->
</el-form-item> <!-- </el-form-item>-->
</el-col> <!-- </el-col>-->
<el-col :span="12" class="mb20"> <el-col :span="12" class="mb20">
<el-form-item :label="$t('sysuser.dept')" prop="deptId"> <el-form-item :label="$t('sysuser.dept')" prop="deptId">
<el-tree-select <el-tree-select
@@ -52,11 +67,11 @@
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12" class="mb20"> <!-- <el-col :span="12" class="mb20">-->
<el-form-item :label="$t('sysuser.email')" prop="email"> <!-- <el-form-item :label="$t('sysuser.email')" prop="email">-->
<el-input clearable :placeholder="$t('sysuser.inputEmailTip')" v-model="dataForm.email"></el-input> <!-- <el-input clearable :placeholder="$t('sysuser.inputEmailTip')" v-model="dataForm.email"></el-input>-->
</el-form-item> <!-- </el-form-item>-->
</el-col> <!-- </el-col>-->
<el-col :span="12" class="mb20"> <el-col :span="12" class="mb20">
<el-form-item :label="$t('sysuser.lockFlag')" prop="lockFlag"> <el-form-item :label="$t('sysuser.lockFlag')" prop="lockFlag">
<el-radio-group v-model="dataForm.lockFlag"> <el-radio-group v-model="dataForm.lockFlag">
@@ -126,6 +141,12 @@ const dataForm = reactive({
role: [] as string[], role: [] as string[],
}); });
// 表单状态,用于防止浏览器自动填充
const formState = reactive({
usernameReadonly: true, // 用户名输入框只读状态
passwordReadonly: true, // 密码输入框只读状态
});
const dataRules = ref({ const dataRules = ref({
// 用户名校验,不能为空 、长度 5-20、不能和已有数据重复 // 用户名校验,不能为空 、长度 5-20、不能和已有数据重复
username: [ username: [
@@ -157,20 +178,20 @@ const dataRules = ref({
role: [{ required: true, message: t('sysuser.roleRequired'), trigger: 'blur' }], role: [{ required: true, message: t('sysuser.roleRequired'), trigger: 'blur' }],
// post: [{ required: true, message: t('sysuser.postRequired'), trigger: 'blur' }], // post: [{ required: true, message: t('sysuser.postRequired'), trigger: 'blur' }],
// 手机号校验,不能为空、新增的时不能重复校验 // 手机号校验,不能为空、新增的时不能重复校验
phone: [ // phone: [
{ required: true, message: t('sysuser.phoneRequired'), trigger: 'blur' }, // { required: true, message: t('sysuser.phoneRequired'), trigger: 'blur' },
{ validator: rule.validatePhone, trigger: 'blur' }, // { validator: rule.validatePhone, trigger: 'blur' },
{ // {
validator: (rule: any, value: any, callback: any) => { // validator: (rule: any, value: any, callback: any) => {
validatePhone(rule, value, callback, dataForm.userId !== ''); // validatePhone(rule, value, callback, dataForm.userId !== '');
}, // },
trigger: 'blur', // trigger: 'blur',
}, // },
], // ],
email: [ // email: [
{ type: 'email', message: t('sysuser.emailFormat'), trigger: ['blur', 'change'] }, // { type: 'email', message: t('sysuser.emailFormat'), trigger: ['blur', 'change'] },
{ validator: rule.overLength, trigger: 'blur' }, // { validator: rule.overLength, trigger: 'blur' },
], // ],
lockFlag: [{ required: true, message: t('sysuser.statusRequired'), trigger: 'blur' }], lockFlag: [{ required: true, message: t('sysuser.statusRequired'), trigger: 'blur' }],
}); });
@@ -179,6 +200,10 @@ const openDialog = async (id: string) => {
visible.value = true; visible.value = true;
dataForm.userId = ''; dataForm.userId = '';
// 重置表单只读状态,防止浏览器自动填充
formState.usernameReadonly = true;
formState.passwordReadonly = true;
// 重置表单数据 // 重置表单数据
nextTick(() => { nextTick(() => {
dataFormRef.value?.resetFields(); dataFormRef.value?.resetFields();