<template>
|
<el-dialog title="修改密码" :visible.sync="isShow" custom-class="custom-dialog" @close='cancelDialog()'>
|
<el-form label-position="right" status-icon :model="info" :rules="passRule" size="small" ref="alterPwForm">
|
<el-form-item label="旧密码：" prop="oldpass">
|
<el-input type="password" auto-complete="off" v-model="info.oldpass"></el-input>
|
</el-form-item>
|
<el-form-item label="新密码：" prop="newpass">
|
<el-input type="password" auto-complete="off" v-model="info.newpass"></el-input>
|
</el-form-item>
|
<el-form-item label="再次输入新密码：" prop="newpass2">
|
<el-input type="password" auto-complete="off" v-model="info.newpass2"></el-input>
|
</el-form-item>
|
</el-form>
|
<div slot="footer" class="dialog-footer">
|
<el-button @click="cancelDialog()">取 消</el-button>
|
<el-button type="primary" @click="confirmDialog()">确 定</el-button>
|
</div>
|
</el-dialog>
|
</template>
|
|
<script>
|
import { isValidPassword } from '@/utils/validate'
|
export default {
|
name: 'alterPasswordDialog',
|
props: {
|
isVisible: {
|
type: Boolean,
|
default: false
|
}
|
},
|
watch: {
|
isVisible(val) {
|
this.isShow = val
|
if (!val) {
|
this.$refs.alterPwForm.resetFields()
|
}
|
}
|
},
|
data() {
|
// 密码自定义规则
|
const rulesPass = (rule, value, callback) => {
|
if (!isValidPassword(value)) {
|
callback(new Error(`可用字母、数字，长度不低于6位`))
|
} else if (value.length < 6) {
|
callback(new Error(`密码不能低于6位`))
|
} else {
|
callback()
|
}
|
}
|
const rulesPass2 = (rule, value, callback) => {
|
if (value === '' && this.info.newpass || value !== this.info.newpass) {
|
callback(new Error('两次输入密码不一致!'))
|
} else if (value === '') {
|
callback(new Error('请再次输入密码'))
|
} else {
|
callback()
|
}
|
}
|
return {
|
isShow: this.isVisible,
|
info: {
|
oldpass: '', // 旧密码
|
newpass: '', // 新密码
|
newpass2: '' // 再次确认新密码
|
},
|
passRule: {
|
oldpass: [
|
{ required: true, message: '旧密码不能为空', trigger: ['blur', 'change'] },
|
// 自定义规则
|
{ validator: rulesPass, trigger: ['blur', 'change'] }
|
],
|
newpass: [
|
{ required: true, message: '新密码不能为空', trigger: ['blur', 'change'] },
|
// 自定义规则
|
{ validator: rulesPass, trigger: ['blur', 'change'] }
|
],
|
newpass2: [
|
// 自定义规则
|
{ validator: rulesPass2, trigger: ['blur', 'change'] }
|
]
|
}
|
}
|
},
|
methods: {
|
cancelDialog() {
|
this.$emit('submit', { action: 'cancel' })
|
},
|
confirmDialog() {
|
// console.log('confirm')
|
this.$refs.alterPwForm.validate((valid) => {
|
if (valid) {
|
this.$emit('submit', { action: 'confirm', data: { oldPass: this.info.oldpass, newPass: this.info.newpass }})
|
} else {
|
return false
|
}
|
})
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
|
</style>
|
