1
This commit is contained in:
@@ -5,12 +5,27 @@
|
|||||||
<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
|
||||||
|
:disabled="dataForm.userId !== ''"
|
||||||
|
:placeholder="$t('sysuser.inputUsernameTip')"
|
||||||
|
v-model="dataForm.username"
|
||||||
|
autocomplete="off"
|
||||||
|
:readonly="formState.usernameReadonly"
|
||||||
|
@focus="formState.usernameReadonly = false"
|
||||||
|
></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.password')" prop="password">
|
<el-form-item :label="$t('sysuser.password')" prop="password">
|
||||||
<el-input clearable :placeholder="$t('sysuser.inputPasswordTip')" type="password" v-model="dataForm.password"></el-input>
|
<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-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="12" class="mb20">
|
<el-col :span="12" class="mb20">
|
||||||
@@ -18,11 +33,11 @@
|
|||||||
<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();
|
||||||
|
|||||||
Reference in New Issue
Block a user