<template>
|
<a-form style="margin-top: 8px">
|
<a-modal
|
title="编辑-账户"
|
destroyOnClose
|
:visible="visible"
|
@cancel="handleCancel"
|
@ok="handleOk"
|
okText="保存"
|
>
|
<a-form style="margin-top: 8px">
|
<a-form-item
|
:labelCol="{ span: 5 }"
|
:wrapperCol="{ span: 15 }"
|
label="用户名"
|
has-feedback
|
:validate-status="ruleStateTo"
|
:help="helpErrorContent"
|
>
|
<a-input placeholder="请输入用户名" v-model="editUserInform.username" />
|
</a-form-item>
|
<a-form-item
|
:labelCol="{ span: 5 }"
|
:wrapperCol="{ span: 15 }"
|
label="电话"
|
fieldDecoratorId="mobile"
|
>
|
<a-input placeholder="请输入电话" v-model="editUserInform.mobile" />
|
</a-form-item>
|
<a-form-item
|
:labelCol="{ span: 5 }"
|
:wrapperCol="{ span: 15 }"
|
label="电子邮件"
|
fieldDecoratorId="email"
|
>
|
<a-input placeholder="请输入电子邮件" v-model="editUserInform.email" />
|
</a-form-item>
|
</a-form>
|
</a-modal>
|
</a-form>
|
</template>
|
|
<script lang="ts">
|
import {
|
Component,
|
Prop,
|
Vue,
|
Emit,
|
Model,
|
Watch
|
} from "vue-property-decorator";
|
import { State, Mutation, namespace } from "vuex-class";
|
import { get, post } from "@/util/request";
|
|
import axios from "axios";
|
|
@Component({
|
components: {}
|
})
|
export default class UpdateTaskForm extends Vue {
|
private editUserInform: any = {
|
username: null,
|
mobile: null,
|
email: null,
|
id: null
|
};
|
@Prop({
|
type: Boolean,
|
default: false
|
})
|
private visible!: boolean;
|
|
@Prop({
|
type: Object,
|
default() {
|
return {};
|
}
|
})
|
private record!: any;
|
|
private ruleStateTo: any = null;
|
private helpErrorContent: any = null;
|
//监听userName不能为空
|
@Watch("editUserInform.username")
|
private changeUserName(newValue: any, oldValue: any) {
|
if(!newValue){
|
this.ruleStateTo='error'
|
this.helpErrorContent="请输入用户名，只能为中文！"
|
}else{
|
var regex="^[\u4E00-\u9FA5]+$";
|
//匹配成功，返回对象，匹配失败，返回null
|
if(newValue.match(regex)){
|
this.ruleStateTo='success'
|
this.helpErrorContent=""
|
}else{
|
this.ruleStateTo='error',
|
this.helpErrorContent='用户名错误'
|
}
|
}
|
}
|
|
private handleCancel(): void {
|
//默认清除后，重新赋值
|
this.editUserInform.username = this.record.userName;
|
this.editUserInform.mobile = this.record.mobile;
|
this.editUserInform.email = this.record.email;
|
this.updateVisible(false);
|
}
|
// 保存 更新数据库
|
private handleOk(): void {
|
let checkUserName = null;
|
let checkMobile = null;
|
let checkEmail = null;
|
//只改了变动的传过去，无变动不传，跟record数据进行对比
|
if (this.record.userName != this.editUserInform.username) {
|
checkUserName = this.editUserInform.username;
|
//匹配正则
|
if(!checkUserName.match("^[\u4E00-\u9FA5]+$")){
|
return
|
}
|
|
}
|
if (this.record.mobile != this.editUserInform.mobile) {
|
checkMobile = this.editUserInform.mobile === '' ? null : this.editUserInform.mobile;
|
}
|
if (this.record.email != this.editUserInform.email) {
|
checkEmail = this.editUserInform.email === '' ? null : this.editUserInform.email;
|
}
|
if(checkUserName==null&&checkMobile==null&&checkEmail==null){
|
this.$message.warning('未修改')
|
return
|
}
|
post("account/update",
|
{
|
accountId: this.editUserInform.id,
|
userName: checkUserName,
|
mobile: checkMobile,
|
email: checkEmail
|
}
|
).then(res => {
|
if (res.data.code != 0) {
|
this.$message.error(res.data.message);
|
} else {
|
//保存成功，组件刷新数据
|
this.$emit("updateData");
|
this.$message.success(res.data.message)
|
this.updateVisible(false);
|
}
|
})
|
.catch(err => {
|
console.log(err);
|
});
|
}
|
|
private updateVisible(visible: boolean): void {
|
this.$emit("update:visible", visible);
|
}
|
|
//监听编辑回调值
|
@Watch("record", {
|
immediate: true, //监听开始后是否立即调用该回调函数;
|
deep: true //深度监听
|
})
|
//监听编辑逻辑赋值
|
private recordChange(value: any, oldValue: any): void {
|
this.editUserInform.username = this.record.userName;
|
this.editUserInform.mobile = this.record.mobile;
|
this.editUserInform.email = this.record.email;
|
this.editUserInform.id = this.record.id;
|
}
|
}
|
</script>
|
