<template>
|
<a-modal
|
title="编辑-账户"
|
destoryOnClose
|
:visible="visible"
|
@cancel="handleCancel"
|
@ok="handleOk"
|
okText="保存"
|
>
|
<a-form style="margin-top:8px">
|
<a-form-item :labelCol="{span:5}" :wrapperCol="{span:15}" label="用户名">
|
<a-input v-model="changeInform.userName" disabled></a-input>
|
</a-form-item>
|
|
<a-form-item
|
:labelCol="{span:5}"
|
:wrapperCol="{span:15}"
|
label="密码"
|
has-feedback
|
:validate-status="ruleState"
|
>
|
<a-input type="password" placeholder="请输入新密码" v-model="changeInform.password"></a-input>
|
</a-form-item>
|
<a-form-item
|
:labelCol="{span:5}"
|
:wrapperCol="{span:15}"
|
label="确认密码"
|
has-feedback
|
:validate-status="ruleStateTo"
|
:help="helpErrorContent"
|
>
|
<a-input type="password" placeholder="再次输入新密码" v-model="changeInform.passnew"></a-input>
|
</a-form-item>
|
</a-form>
|
</a-modal>
|
</template>
|
|
<script lang="ts">
|
import { Encrypt, Decrypt} from '../../../util/AES.js'
|
import { get, post } from "@/util/request";
|
import {
|
Vue,
|
Prop,
|
Component,
|
Emit,
|
Watch
|
} from "vue-property-decorator";
|
//必须要写，注册成组件
|
@Component({
|
components: {}
|
})
|
export default class ChangePassword extends Vue {
|
private changeInform:any={
|
userName:null,
|
password:null,
|
passNew:null,
|
}
|
@Prop({
|
type: Boolean,
|
default: false
|
})
|
private visible!: boolean;
|
|
@Prop({
|
type:Object,
|
default(){
|
return{};
|
}
|
})
|
private record!:any;
|
private helpErrorContent:any=null;
|
private ruleState:any=null;
|
private ruleStateTo:any=null;
|
@Watch('changeInform.password')
|
private changePassword(newValue:any,oldValue:any):void{
|
if(newValue==""||newValue==null||newValue.length<6){
|
this.ruleState=''
|
}
|
else{
|
//密码长度最短为6位
|
if(newValue.length>=6){
|
this.ruleState='success'
|
}
|
|
}
|
}
|
@Watch('changeInform.passnew')
|
private changePassnew(newValue:any,oldValue:any):void{
|
if(newValue==""||newValue==null){
|
this.ruleStateTo=''
|
this.helpErrorContent=null;
|
}
|
else if(newValue==this.changeInform.password){
|
this.ruleStateTo='success';
|
this.helpErrorContent=null;
|
}
|
else{
|
this.ruleStateTo="error"
|
this.helpErrorContent="两次输入密码不一致"
|
}
|
}
|
|
@Watch('record',{
|
immediate:true,
|
deep:true,
|
})
|
//回调，拿到数据赋值
|
private recordChange(value:any,oldValue:any):void{
|
this.changeInform.userName=this.record.userName
|
|
}
|
//取消，清除密码
|
private handleCancel():void{
|
this.changeInform.password=null;
|
this.changeInform.passn123ew=null;
|
this.changVisible(false);
|
}
|
//保存，网络请求，修改数据库
|
private handleOk():void{
|
|
if((this.changeInform.password!=null&&this.changeInform.passnew!=null)&&(this.changeInform.password==this.changeInform.passnew)&&this.changeInform.password.length>=6&&this.changeInform.passnew.length>=6)
|
{
|
//修改数据库
|
post("account/update",{
|
accountId:this.record.id,
|
password:Encrypt(this.changeInform.password)
|
}).then(res=>{
|
|
if(res.data.code!=0){
|
this.$message.error(res.data.message)
|
}else{
|
this.changeInform.password=null;
|
this.changeInform.passnew=null;
|
//保存成功，组件刷新数据
|
|
this.$message.success(res.data.message)
|
this.$emit('updateData')
|
this.changVisible(false);
|
}
|
}).catch(err=>{
|
console.log(err)
|
})
|
}
|
}
|
private changVisible(visible:boolean):void{
|
this.$emit('update:visible', visible);
|
}
|
}
|
</script>
|
