lemons
/
zb-admin
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

特性: 修改密码模块新增输入强度条、确认密码校验

This commit is contained in:
fifteen 2024-01-25 10:48:34 +08:00
parent 3c106c5743
commit f88d1d88ad
1 changed files with 32 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/layout/components/Header/components/PersonalDialog.vue
View File

@ -1,14 +1,17 @@
<template> <template>
<el-dialog v-model="dialogVisible" title="修改密码" width="40%"> <el-dialog v-model="dialogVisible" title="修改密码" width="40%">
<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm" :size="formSize"> <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm" :size="formSize">
<el-form-item label="姓名"> <el-form-item label="用户名称">
<el-input v-model="ruleForm.name" disabled></el-input> <el-input v-model="ruleForm.name" disabled></el-input>
</el-form-item> </el-form-item>
<el-form-item label="旧的密码" prop="password"> <el-form-item label="旧密码" prop="oldPassword">
<el-input v-model="ruleForm.password" type="password"></el-input> <inputStrength v-model="ruleForm.oldPassword" placeholder="请输入旧密码"></inputStrength>
</el-form-item> </el-form-item>
<el-form-item label="新的密码" prop="configPassword"> <el-form-item label="新密码" prop="newPassword">
<el-input v-model="ruleForm.configPassword" type="password"></el-input> <inputStrength v-model="ruleForm.newPassword" strength placeholder="请输入新密码"></inputStrength>
</el-form-item>
<el-form-item label="确认密码" prop="confirmPassword">
<inputStrength v-model="ruleForm.confirmPassword" strength placeholder="请确认新密码"></inputStrength>
</el-form-item> </el-form-item>
</el-form> </el-form>
<template #footer> <template #footer>
@ -21,8 +24,10 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref, defineExpose, reactive } from 'vue' import { ref, computed, defineExpose, reactive } from 'vue'
import type { ElForm } from 'element-plus' import type { ElForm } from 'element-plus'
import inputStrength from '@/components/InputStrength/index.vue'
const dialogVisible = ref(false) const dialogVisible = ref(false)
import { useUserStore } from '@/store/modules/user' import { useUserStore } from '@/store/modules/user'
const UserStore = useUserStore() const UserStore = useUserStore()
@ -34,21 +39,37 @@
} }
type FormInstance = InstanceType<typeof ElForm> type FormInstance = InstanceType<typeof ElForm>
const userInfo = computed(() => UserStore.userInfo)
const formSize = ref('') const formSize = ref('')
const ruleFormRef = ref<FormInstance>() const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({ const ruleForm = reactive({
name: UserStore.userInfo.username, name: userInfo.value?.username,
password: UserStore.userInfo.password, oldPassword: userInfo.value?.password,
configPassword: '', newPassword: '',
confirmPassword: '',
}) })
//确认密码输入值的一致性校验
const equalToPassword = (_rule, value, callback) => {
ruleForm.newPassword !== value ? callback(new Error('两次输入密码不一致')) : callback()
}
const rules = reactive({ const rules = reactive({
configPassword: [ newPassword: [
{ {
required: true, required: true,
message: '请输入新的密码', message: '请输入新密码',
trigger: 'blur', trigger: 'blur',
}, },
], ],
confirmPassword: [
{
required: true,
message: '请输入确认密码',
trigger: 'blur',
},
{ required: true, validator: equalToPassword, trigger: 'blur' },
],
}) })
const submitForm = (formEl: FormInstance | undefined) => { const submitForm = (formEl: FormInstance | undefined) => {
if (!formEl) return if (!formEl) return