<template>
|
<b-modal
|
:title="title"
|
ref="myModalRef"
|
ok-title="保存"
|
@ok="handleOk"
|
@cancel="clearName"
|
cancel-title="取消"
|
>
|
<div>
|
<!-- <b-form-group
|
horizontal
|
label="角色名称："
|
:label-cols="2"
|
label-class="text-sm-right"
|
label-for="input_username"
|
>
|
<b-form-input
|
autocomplete="off"
|
required
|
id="input_username"
|
v-model="name"
|
placeholder="请输入角色名称"
|
/>
|
</b-form-group>-->
|
<div class>
|
<el-form
|
:model="personForm"
|
:rules="rules"
|
ref="personForm"
|
label-width="100px"
|
class="personForm"
|
>
|
<div class="text-center pb-4 px-6">
|
<httpImg :src="personForm.imgUrl" width="100%" alt/>
|
</div>
|
<el-form-item label="姓名：" prop="username">
|
<el-input v-model="personForm.username" placeholder="请输入姓名"></el-input>
|
</el-form-item>
|
<el-form-item label="性别：" prop="sex">
|
<el-radio-group v-model="personForm.sex">
|
<el-radio :label="1">男</el-radio>
|
<el-radio :label="0">女</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item label="身份证号：" prop="idCard">
|
<el-input v-model="personForm.idCard"></el-input>
|
</el-form-item>
|
<el-form-item label="电话：" prop="mobile">
|
<el-input v-model="personForm.mobile"></el-input>
|
</el-form-item>
|
</el-form>
|
</div>
|
</div>
|
</b-modal>
|
</template>
|
|
<script>
|
import { Form, FormItem, Input, Radio, RadioGroup } from 'element-ui'
|
import { editCtrlUserAlready, editCtrlUserTodo } from '@/server/ctrl.js'
|
export default {
|
props: {
|
title: String,
|
item: Object
|
},
|
components: {
|
elForm: Form,
|
elFormItem: FormItem,
|
elInput: Input,
|
elRadio: Radio,
|
elRadioGroup: RadioGroup
|
},
|
data: () => ({
|
personForm: {},
|
rules: {
|
username: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
|
sex: [{ required: true, message: '性别必填', trigger: 'blur' }],
|
idCard: [
|
{ required: true, message: '请输入身份证号', trigger: 'blur' },
|
{
|
pattern: /^[1-9]{1}[0-9]{14}$|^[1-9]{1}[0-9]{16}([0-9]|[xX])$/,
|
message: '请输入正确的身份证号',
|
trigger: 'blur'
|
}
|
],
|
mobile: [
|
{ required: true, message: '请输入手机号', trigger: 'blur' },
|
{
|
pattern: /^1[3-9]\d{9}$/,
|
message: '请输入正确的手机号',
|
trigger: 'blur'
|
}
|
]
|
}
|
}),
|
methods: {
|
async editCtrlUserAlready(json) {
|
const res = await editCtrlUserAlready(json)
|
if (res && res.success) {
|
this.$emit('submit')
|
this.hideModel()
|
}
|
this.$toast({
|
type: res && res.success ? 'success' : 'error',
|
message: res && res.msg ? res.msg : '保存失败！'
|
})
|
},
|
async editCtrlUserTodo(json) {
|
const res = await editCtrlUserTodo(json)
|
if (res && res.success) {
|
this.$emit('submit')
|
this.hideModel()
|
}
|
this.$toast({
|
type: res && res.success ? 'success' : 'error',
|
message: res && res.msg ? res.msg : '保存失败！'
|
})
|
},
|
// * 打开modal
|
showModel(data) {
|
this.$refs.myModalRef.show()
|
this.$nextTick(() => {
|
this.resetForm('personForm')
|
let { username, sex, idCard, mobile, imgUrl, id } = data
|
this.personForm = { username, sex, idCard, mobile, imgUrl, id }
|
})
|
},
|
hideModel() {
|
this.$refs.myModalRef.hide()
|
},
|
// * 提交表单
|
handleOk(e) {
|
e.preventDefault()
|
this.submitForm('personForm')
|
|
// this.$emit('submit', this.name, this.item ? this.item.id : '')
|
},
|
// * 取消
|
clearName() {},
|
/* 表单提交 start */
|
submitForm(formName) {
|
this.$refs[formName].validate(valid => {
|
if (valid) {
|
if (this.tableType === 'already') {
|
this.editCtrlUserAlready(this.personForm)
|
} else {
|
this.editCtrlUserTodo(this.personForm)
|
}
|
} else {
|
return false
|
}
|
})
|
},
|
resetForm(formName) {
|
this.$refs[formName].resetFields()
|
}
|
}
|
}
|
</script>
|
