<template>
|
<div class="container">
|
<el-form
|
ref="form"
|
:model="info"
|
status-icon
|
:rules="rules"
|
v-loading="loading"
|
label-width="100px"
|
label-position="right"
|
>
|
<el-form-item label="密码" prop="newPassword">
|
<el-input clearable type="password" v-model="info.newPassword" autocomplete="off"></el-input>
|
</el-form-item>
|
<el-form-item label="确认密码" prop="confirmPassword" label-position="top">
|
<el-input clearable type="password" v-model="info.confirmPassword" autocomplete="off"></el-input>
|
</el-form-item>
|
<el-form-item v-show="false">
|
<el-button type="primary" @click="submitForm">保存</el-button>
|
<el-button @click="resetForm">取消</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
</template>
|
|
<script>
|
import { ElMessage } from 'element-plus'
|
import { reactive, ref } from 'vue'
|
import AdminModel from '@/lin/model/admin'
|
|
export default {
|
props: ['id'],
|
setup(props, ctx) {
|
const form = ref(null)
|
const loading = ref(false)
|
const info = reactive({
|
newPassword: '',
|
confirmPassword: '',
|
})
|
|
/**
|
* 表单规则
|
*/
|
const rules = getRules(ctx, info, form)
|
|
/**
|
* 提交表单数据
|
*/
|
const submitForm = () => {
|
if (!info.newPassword && !info.confirmPassword) {
|
ctx.emit('handlePasswordResult', true)
|
return
|
}
|
|
form.value.validate(async valid => {
|
if (valid) {
|
let res = {}
|
try {
|
loading.value = true
|
res = await AdminModel.changePassword(info.newPassword, info.confirmPassword, props.id)
|
} catch (e) {
|
loading.value = false
|
}
|
if (res.code < window.MAX_SUCCESS_CODE) {
|
loading.value = false
|
ElMessage.success(`${res.message}`)
|
resetForm()
|
ctx.emit('handlePasswordResult', true)
|
} else {
|
loading.value = false
|
ElMessage.error(`${res.message}`)
|
}
|
} else {
|
ElMessage.error('请填写正确的密码信息')
|
}
|
})
|
}
|
|
// 重置表单
|
const resetForm = () => {
|
form.value.resetFields()
|
}
|
|
return {
|
info,
|
form,
|
rules,
|
loading,
|
resetForm,
|
submitForm,
|
}
|
},
|
}
|
|
/**
|
* 表单规则
|
*/
|
function getRules(ctx, info, form) {
|
const validatePassword = (rule, value, callback) => {
|
if (!value) {
|
callback(new Error('请输入密码'))
|
} else if (value.length < 6) {
|
callback(new Error('密码长度不能少于6位数'))
|
} else {
|
if (info.confirmPassword) {
|
form.value.validateField('confirmPassword')
|
}
|
callback()
|
}
|
}
|
const validatePassword2 = (rule, value, callback) => {
|
if (!value) {
|
callback(new Error('请再次输入密码'))
|
} else if (value !== info.newPassword) {
|
callback(new Error('两次输入密码不一致!'))
|
} else {
|
callback()
|
}
|
}
|
|
// 验证规则
|
return {
|
newPassword: [{ validator: validatePassword, trigger: 'blur', required: true }],
|
confirmPassword: [{ validator: validatePassword2, trigger: 'blur', required: true }],
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.el-form-item :v-deep(.el-form-item__label) {
|
padding-right: 10px !important;
|
}
|
</style>
|
