<template>
|
<div>
|
<a-modal width="50%" title="账号管理" destroyOnClose :visible="visible" @cancel="handleCancel">
|
<a-card :bordered="false" style="margin-top:24px;">
|
<h1>所属组织: <span style="font-weight:bold;font-size:18px">{{data.name}}</span> </h1>
|
|
<a-form-model style="margin-top: 8px" :rules="rules" ref="ruleForm" :model="saveData">
|
<a-form-model-item
|
v-bind="formItemLayout"
|
label="账号"
|
prop="account"
|
>
|
<!-- fieldDecoratorId="account"-->
|
<!-- :fieldDecoratorOptions="{rules: [{ required: true, validator: validatorAccount, trigger: 'blur' }],-->
|
<!-- initialValue: record.adminUser.account}"-->
|
<a-input placeholder="请输入" :disabled="isAccount" v-model="saveData.account"/>
|
</a-form-model-item>
|
|
<a-form-model-item
|
v-bind="formItemLayout"
|
label="密码"
|
prop="password"
|
v-if="passwordOfFlag"
|
>
|
<!-- fieldDecoratorId="password"-->
|
<!-- :fieldDecoratorOptions="{rules: [{ required: true, validator: validatorPassword, trigger: 'blur' }],-->
|
<!-- initialValue: record.adminUser.password}"-->
|
<a-input placeholder="请输入" v-model="saveData.password"/>
|
</a-form-model-item>
|
|
<a-form-model-item
|
v-bind="formItemLayout"
|
label="用户名称"
|
prop="userName"
|
>
|
<!-- fieldDecoratorId="userName"-->
|
<!-- :fieldDecoratorOptions="{rules: [{ required: true, validator: validatorUsername, trigger: 'blur' }],-->
|
<!-- initialValue: record.adminUser.userName}"-->
|
<a-input placeholder="请输入" v-model="saveData.userName"/>
|
</a-form-model-item>
|
|
|
<!-- <a-form-item
|
v-bind="formItemLayout"
|
label="到期时间"
|
fieldDecoratorId="expireTime"
|
:fieldDecoratorOptions="{rules: [{ required: true, message: '请输入标题' }],
|
initialValue: record.expireTime}" >
|
<a-date-picker @change="onChange" />
|
</a-form-item> -->
|
<a-form-model-item
|
v-bind="formItemLayout"
|
label="到期时间"
|
>
|
<!-- fieldDecoratorId="expireTime"-->
|
<!-- :fieldDecoratorOptions="{-->
|
<!-- initialValue: record.expireTime}"-->
|
<a-input placeholder="请输入" disabled v-model="saveData.expireTime"/>
|
</a-form-model-item>
|
|
|
|
<a-form-model-item
|
v-bind="formItemLayout"
|
prop="mobile"
|
>
|
<!-- fieldDecoratorId="mobile"-->
|
<!-- :fieldDecoratorOptions="{rules: [{ validator: validatorPhone, trigger: 'blur' }],-->
|
<!-- initialValue: record.adminUser.mobile}"-->
|
<span slot="label">
|
手机
|
<em class="optional">（选填）</em>
|
</span>
|
<a-input placeholder="请输入" v-model="saveData.mobile"/>
|
</a-form-model-item>
|
|
<a-form-model-item
|
v-bind="formItemLayout"
|
prop="email"
|
>
|
<!-- fieldDecoratorId="email"-->
|
<!-- :fieldDecoratorOptions="{rules: [{ validator: validatorMail, trigger: 'blur' }],-->
|
<!-- initialValue: record.adminUser.email}"-->
|
<span slot="label">
|
邮箱
|
<em class="optional">（选填）</em>
|
</span>
|
<a-input placeholder="请输入" v-model="saveData.email"/>
|
</a-form-model-item>
|
<a-form-model-item v-bind="submitFormLayout" style="margin-top: 32px" v-if="!passwordOfFlag">
|
<a-button style="margin-left: 8px" @click="resetPassword">{{ passwordText }}</a-button>
|
|
</a-form-model-item>
|
<a-form-model-item
|
v-bind="formItemLayout"
|
label="密码"
|
prop="password"
|
v-if="passwordOfFlag1"
|
>
|
<!-- fieldDecoratorId="password"-->
|
<!-- :fieldDecoratorOptions="{rules: [{ required: true, validator: validatorPassword, trigger: 'blur' }],-->
|
<!-- initialValue: record.adminUser.password}"-->
|
<a-input placeholder="请输入新密码" v-model="saveData.password"/>
|
</a-form-model-item>
|
</a-form-model>
|
|
</a-card>
|
|
<template slot="footer">
|
<a-button key="cancel" @click="handleCancel">
|
取消
|
</a-button>
|
<a-button key="forward" type="primary" @click="handleOk">
|
完成
|
</a-button>
|
</template>
|
</a-modal>
|
|
</div>
|
</template>
|
|
<style lang="less">
|
.optional {
|
color: rgba(0, 0, 0, 0.45);
|
font-style: normal;
|
}
|
</style>
|
|
<script lang="ts">
|
import {Component, Emit, Prop, Vue, Watch} from 'vue-property-decorator';
|
import { State, Mutation, namespace } from 'vuex-class';
|
import { Encrypt, Decrypt} from '../../util/AES.js'
|
import { get, post } from "@/util/request";
|
|
@Component({})
|
export default class BasicForm extends Vue {
|
private passwordOfFlag: boolean = true
|
private passwordOfFlag1: boolean = false
|
private passwordText: string = '密码重置'
|
// 规则定义
|
private rules: any = {
|
account: [
|
{required: true,message:'账号不能为空',trigger:'blur'},
|
{message:'账户必须以字母开头, 只能包括 字母 , 下划线 , 数字, 长度必须在3 到 20 之间!',trigger:['change', 'blur'],pattern:/^[a-zA-Z][-_a-zA-Z0-9]{2,19}/},
|
],
|
password: [
|
{required: true,message:'密码不能为空',trigger:'blur'},
|
],
|
userName: [
|
{required: true,message:'用户名不能为空',trigger:'blur'},
|
{message:'用户名称只能包含汉字, 字母',trigger:'blur',pattern:/^[\u4E00-\u9FA5A-Za-z]+$/},
|
],
|
mobile: [
|
{
|
pattern:/^(13[0-9]{9}$|14[0-9]{9}|15[0-9]{9}$|18[0-9]{9})$|(^\d{3}-\d{7,8}|\d{4}-\d{7,8})$/,
|
message: '电话号格式错误',
|
trigger:['change', 'blur']
|
},
|
|
],
|
email: [
|
{
|
pattern: /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/,
|
message: '邮箱格式错误',
|
trigger:['change', 'blur']
|
}
|
]
|
}
|
|
private formItemLayout: any = {
|
labelCol: {
|
xs: { span: 24 },
|
sm: { span: 7 },
|
},
|
wrapperCol: {
|
xs: { span: 24 },
|
sm: { span: 12 },
|
md: { span: 10 },
|
},
|
};
|
|
@Prop({
|
type: Boolean,
|
default: true,
|
})
|
private visible!: boolean;
|
|
@Prop({
|
type: Object,
|
default() {
|
return {};
|
},
|
})
|
private accountRecord!: any
|
|
private data: any = {}
|
@Watch('visible',{
|
deep: true,
|
immediate: true
|
})
|
private watchVisble(newVal: boolean, oldVal: boolean) {
|
this.data = this.accountRecord
|
if (this.accountRecord.adminUserId !== 0) {
|
this.passwordOfFlag = false
|
this.saveData.account = this.accountRecord.adminUser.account
|
this.saveData.userName = this.accountRecord.adminUser.userName
|
this.saveData.expireTime = this.accountRecord.expireTime
|
this.saveData.email = this.accountRecord.adminUser.email
|
this.saveData.mobile = this.accountRecord.adminUser.mobile
|
}else {
|
this.passwordOfFlag = true
|
this.saveData.account = ''
|
this.saveData.password = ''
|
this.saveData.userName = ''
|
this.saveData.expireTime = this.accountRecord.expireTime
|
this.saveData.email = ''
|
}
|
}
|
|
private resetPassword() {
|
if (!this.passwordOfFlag1) {
|
this.passwordText = '取消密码重置'
|
}else {
|
this.passwordText = '密码重置'
|
}
|
this.passwordOfFlag1 = !this.passwordOfFlag1
|
|
}
|
|
// 默认获取组织信息
|
private submitFormLayout: any = {
|
wrapperCol: {
|
xs: { span: 24, offset: 0 },
|
sm: { span: 10, offset: 3},
|
},
|
};
|
|
|
// 此组织下是否有账号的变量
|
private isAccount:boolean = true
|
|
private form: any = null;
|
|
// 删除的状态
|
private value:number= 1
|
// private record!: any;
|
|
|
private saveData:any = {
|
account: '',
|
password: '',
|
userName: '',
|
expireTime: '',
|
email: '',
|
mobile: ''
|
};
|
private submitting: boolean = false;
|
|
// 用户账号正则
|
private validatorAccount(rule:any, value:any, callback:any) {
|
if (!value) {
|
callback(new Error('请输入账号!'))
|
} else {
|
if (!/^[a-zA-Z][-_a-zA-Z0-9]{2,19}/.test(value)) {
|
callback(new Error(' 账户必须以字母开头, 只能包括 字母 , 下划线 , 数字, 长度必须在3 到 20 之间!'))
|
} else {
|
callback()
|
}
|
}
|
}
|
|
//密码正则
|
private validatorPassword(rule:any, value:any, callback:any) {
|
if (!/^[a-zA-Z][-_a-zA-Z0-9]{2,19}/.test(value)) {
|
callback(new Error(' 账户必须以字母开头, 只能包括 字母 , 下划线 , 数字, 长度必须在3 到 20 之间!'))
|
} else {
|
callback()
|
}
|
}
|
// 用户名称正则
|
private validatorUsername(rule:any, value:any, callback:any) {
|
if (!value) {
|
callback(new Error('请输入用户名称!'))
|
} else {
|
if (!/^[\u4E00-\u9FA5A-Za-z]+$/.test(value)) {
|
callback(new Error(' 用户名称只能包含汉字, 字母!'))
|
} else {
|
callback()
|
}
|
}
|
}
|
// 手机号正则
|
private validatorPhone(rule:any, value:any, callback:any) {
|
if (!value) {
|
callback(new Error('请输入手机号!'))
|
} else {
|
if (!/^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/.test(value)) {
|
callback(new Error(' 请输入正确手机号!'))
|
} else {
|
callback()
|
}
|
}
|
}
|
// 邮箱正则
|
private validatorMail(rule:any, value:any, callback:any) {
|
if (!value) {
|
callback(new Error('请输入邮箱!'))
|
} else {
|
if (!/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(value)) {
|
callback(new Error(' 请输入正确邮箱'))
|
} else {
|
callback()
|
}
|
}
|
}
|
constructor() {
|
super();
|
}
|
|
get isPublic2() {
|
if (this.form == null) {
|
return false;
|
}
|
const value = this.form.getFieldValue('public');
|
|
return value === '2';
|
}
|
|
private handleSubmit(e: any): void {
|
e.preventDefault();
|
|
this.form.validateFieldsAndScroll((err: any, values: any) => {
|
});
|
}
|
// private mounted() {
|
// console.log('父组件信息')
|
// console.log(this.$parent)
|
// }
|
@Emit('visible')
|
private accountFlag() {
|
return false;
|
}
|
|
// 提交信息
|
private handleOk():void {
|
this.$refs.ruleForm.validate((valid: any) => {
|
if (valid) {
|
if(this.accountRecord.adminUserId ===0){
|
this.saveData.password = Encrypt(this.saveData.password);
|
post('user/insert',
|
{
|
account:this.saveData.account,
|
password:this.saveData.password,
|
userName:this.saveData.userName,
|
organizationId:this.accountRecord.id,
|
expireTime:this.accountRecord.expireTime,
|
email:this.saveData.email,
|
mobile:this.saveData.mobile
|
}
|
).then((res) => {
|
if (res.data.code === 0) {
|
this.$parent.orgData()
|
}
|
})
|
.catch((err)=>{
|
console.log(err);
|
})
|
this.$message.success('新建成功')
|
}else{
|
post('user/update',
|
{
|
id:this.accountRecord.adminUser.id,
|
password:this.saveData.password === '' ? null : Encrypt(this.saveData.password),
|
userName:this.saveData.userName === this.accountRecord.adminUser.userName ? null : this.saveData.userName,
|
expireTime:this.accountRecord.expireTime,
|
email:this.saveData.email === this.accountRecord.adminUser.email ? null : this.saveData.email,
|
mobile:this.saveData.mobile === this.accountRecord.adminUser.mobile ? null : this.saveData.mobile
|
}
|
).then((res) => {
|
if (res.data.code === 0) {
|
this.$parent.orgData()
|
this.$message.success('修改成功')
|
}
|
})
|
.catch((err)=>{
|
console.log(err);
|
})
|
|
}
|
this.accountFlag()
|
} else {
|
console.log('error submit!!');
|
return false;
|
}
|
});
|
|
|
}
|
// 返回上一页
|
private handleCancel():void {
|
this.accountFlag()
|
}
|
@Watch('accountRecord', {
|
immediate: true,
|
deep: true,
|
})
|
private recordChange(value: any, oldValue: any): void {
|
if(value.adminUserId === 0){
|
this.isAccount = false
|
}
|
}
|
}
|
</script>
|
