<template>
|
<div>
|
<el-dialog
|
title="修改密码"
|
:visible.sync="editConfig.dialogVisible"
|
width="30%"
|
:before-close="handleClose">
|
<el-form :label-position="labelPosition" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
|
<el-form-item label="旧密码:" prop="oldPass">
|
<el-input type="password" clearable v-model="ruleForm.oldPass" autocomplete="off"></el-input>
|
</el-form-item>
|
<el-form-item label="新密码:" prop="pass">
|
<el-input type="password" clearable v-model="ruleForm.pass" autocomplete="off"></el-input>
|
</el-form-item>
|
<el-form-item label="确认密码:" prop="checkPass">
|
<el-input type="password" clearable v-model="ruleForm.checkPass" autocomplete="off"></el-input>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="submitForm('ruleForm')" style="margin-bottom:20px;">确认</el-button>
|
</el-form-item>
|
</el-form>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import { modifiedPwd } from "@/api/admin/user";
|
export default {
|
props: {
|
editCommonConfig: {
|
type: Object,
|
default: () => {
|
return {
|
dialogVisible:false,
|
userId:"",
|
};
|
},
|
},
|
},
|
data() {
|
var validatePass = (rule, value, callback) => {
|
if (value === '') {
|
callback(new Error('请输入旧密码'));
|
}else{
|
callback();
|
}
|
};
|
var validatePass1 = (rule, value, callback) => {
|
if (value === '') {
|
callback(new Error('请输入新密码'));
|
} else {
|
if (this.ruleForm.checkPass !== '') {
|
this.$refs.ruleForm.validateField('checkPass');
|
}
|
callback();
|
}
|
};
|
var validatePass2 = (rule, value, callback) => {
|
if (value === '') {
|
callback(new Error('请再次输入密码'));
|
} else if (value !== this.ruleForm.pass) {
|
callback(new Error('两次输入密码不一致!'));
|
} else {
|
callback();
|
}
|
};
|
return {
|
editConfig:this.editCommonConfig,
|
// dialogVisible: false
|
ruleForm: {
|
oldPass:'',
|
pass: '',
|
checkPass: '',
|
},
|
rules: {
|
oldPass: [
|
{ validator: validatePass, trigger: 'blur', required: true, }
|
],
|
pass: [
|
{ validator: validatePass1, trigger: 'blur', required: true, }
|
],
|
checkPass: [
|
{ validator: validatePass2, trigger: 'blur', required: true, }
|
],
|
},
|
labelPosition:"left",
|
userId : '',
|
};
|
},
|
created(){
|
|
},
|
computed: {
|
|
},
|
mounted() {
|
},
|
watch: {
|
|
},
|
methods: {
|
//
|
environmentType(){
|
let type
|
if (location.href.includes('192.168.20.119')) {
|
type = 'test'
|
} else if (location.href.includes('192.168') || location.href.includes('localhost')) {
|
type = 'dev'
|
} else {
|
type = 'prod'
|
}
|
return type
|
},
|
//
|
getApsPage(){
|
// 首页部署在各个环境的端口
|
const loginPathMap = {
|
prod:`//${window.location.hostname}:9080`,
|
test:`//192.168.20.119:9080`,
|
// 想跳到本地启动的登录页的话需要把dev改成你本地项目路径
|
dev: `//192.168.8.108:8080`
|
}
|
|
return loginPathMap[this.environmentType()]
|
},
|
handleClose(done){
|
done();
|
},
|
modifiedPwd(params){
|
modifiedPwd(params).then((res)=>{
|
if(res.code==200){
|
this.editConfig.dialogVisible=false
|
alert("密码修改成功,请重新登录!")
|
window.location = this.getApsPage()+'/login'
|
}
|
})
|
},
|
submitForm(formName) {
|
this.$refs[formName].validate((valid) => {
|
if (valid) {
|
console.log(this.ruleForm,"看看表单")
|
this.modifiedPwd({
|
userId:this.editConfig.userId,
|
oldPwd:this.ruleForm.oldPass,
|
newPwd:this.ruleForm.pass,
|
})
|
|
} else {
|
console.log('error submit!!');
|
return false;
|
}
|
});
|
},
|
|
},
|
components: {
|
|
},
|
};
|
</script>
|
|
<style scoped lang="scss">
|
.el-form{
|
margin-top:20px;
|
}
|
::v-deep {
|
.el-form-item__content{
|
display: flex;
|
flex-direction: row-reverse;
|
}
|
.el-dialog__header{
|
.el-dialog__title{
|
font-size:18px;
|
|
}
|
}
|
.el-form{
|
margin:20px;
|
}
|
|
}
|
</style>
|
