384 lines
12 KiB
Vue
384 lines
12 KiB
Vue
<template>
|
|
<a-card :bordered="false" :title="title">
|
|
<a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
|
|
<!-- <a-divider orientation="left">基本信息</a-divider> -->
|
|
<a-row>
|
|
<a-col :span="12">
|
|
<a-form-model-item ref="name" label="姓名" prop="name">
|
|
<a-input disabled v-model="form.name" />
|
|
</a-form-model-item>
|
|
</a-col>
|
|
<a-col :span="12">
|
|
<a-form-model-item ref="idCardNo" label="身份证号" prop="idCardNo">
|
|
<a-input disabled v-model="form.idCardNo" @blur="idCardNoBlur" />
|
|
</a-form-model-item>
|
|
</a-col>
|
|
</a-row>
|
|
|
|
<a-row>
|
|
<a-col :span="12">
|
|
<a-form-model-item ref="sex" label="性别" prop="sex">
|
|
<a-radio-group v-model="form.sex" disabled>
|
|
<a-radio :value="1">
|
|
男
|
|
</a-radio>
|
|
<a-radio :value="0">
|
|
女
|
|
</a-radio>
|
|
</a-radio-group>
|
|
</a-form-model-item>
|
|
</a-col>
|
|
<a-col :span="12">
|
|
<a-form-model-item ref="age" label="年龄" prop="age">
|
|
<a-input v-model="form.age" disabled />
|
|
</a-form-model-item>
|
|
</a-col>
|
|
</a-row>
|
|
|
|
<a-row>
|
|
<a-col :span="12">
|
|
<a-form-model-item ref="phone" label="联系方式" prop="phone">
|
|
<a-input disabled v-model="form.phone" />
|
|
</a-form-model-item>
|
|
</a-col>
|
|
</a-row>
|
|
|
|
<a-row>
|
|
<a-col>
|
|
<a-form-model-item ref="homeAddress" label="家庭住址" prop="homeAddress" :label-col="{ span: 2 }" :wrapper-col="{ span: 21 }">
|
|
<a-input disabled v-model="form.homeAddress" />
|
|
</a-form-model-item>
|
|
</a-col>
|
|
</a-row>
|
|
|
|
<a-row>
|
|
<a-col :span="12">
|
|
<a-form-model-item ref="jobs" label="岗位" prop="jobs">
|
|
<a-select disabled v-model="form.jobs" style="width: 100%" placeholder="请选择岗位">
|
|
<a-select-option v-for="(item, index) in jobsData" :key="index" :value="item.value" :lable="item.name">
|
|
{{ item.name }}
|
|
</a-select-option>
|
|
</a-select>
|
|
</a-form-model-item>
|
|
</a-col>
|
|
|
|
<a-col :span="12">
|
|
<a-form-model-item ref="maritalStatus" label="婚姻状况" prop="maritalStatus">
|
|
<a-select disabled v-model="form.maritalStatus" style="width: 100%" placeholder="请选择婚姻状况">
|
|
<a-select-option v-for="(item, index) in maritalStatusData" :key="index" :value="item.value" :lable="item.name">
|
|
{{ item.name }}
|
|
</a-select-option>
|
|
</a-select>
|
|
</a-form-model-item>
|
|
</a-col>
|
|
</a-row>
|
|
<a-row>
|
|
<a-col :span="12">
|
|
<a-form-model-item ref="nativePlace" label="籍贯" prop="nativePlace">
|
|
<a-input disabled v-model="form.nativePlace" />
|
|
</a-form-model-item>
|
|
</a-col>
|
|
<a-col :span="12">
|
|
<a-form-model-item ref="nation" label="民族" prop="nation">
|
|
<a-input disabled v-model="form.nation" />
|
|
</a-form-model-item>
|
|
</a-col>
|
|
</a-row>
|
|
|
|
<a-row>
|
|
<a-col :span="12">
|
|
<a-form-model-item ref="politicalOutlook" label="政治面貌" prop="politicalOutlook">
|
|
<a-select disabled v-model="form.politicalOutlook" style="width: 100%" placeholder="请选择政治面貌">
|
|
<a-select-option v-for="(item, index) in politicalOutlookData" :key="index" :value="item.value" :lable="item.name">
|
|
{{ item.name }}
|
|
</a-select-option>
|
|
</a-select>
|
|
</a-form-model-item>
|
|
</a-col>
|
|
</a-row>
|
|
|
|
<a-row>
|
|
<a-col>
|
|
<a-form-model-item ref="health" label="身体状况" prop="health" :label-col="{ span: 2 }" :wrapper-col="{ span: 21 }">
|
|
<a-input disabled v-model="form.health" />
|
|
</a-form-model-item>
|
|
</a-col>
|
|
</a-row>
|
|
|
|
<a-row>
|
|
<a-col>
|
|
<a-form-model-item ref="diseaseHistory" label="疾病史" prop="diseaseHistory" :label-col="{ span: 2 }"
|
|
:wrapper-col="{ span: 21 }">
|
|
<a-input disabled v-model="form.diseaseHistory" />
|
|
</a-form-model-item>
|
|
</a-col>
|
|
</a-row>
|
|
|
|
<a-row>
|
|
<a-col>
|
|
<a-form-model-item ref="awards" label="获得奖项" prop="awards" :label-col="{ span: 2 }" :wrapper-col="{ span: 21 }">
|
|
<a-textarea disabled :autoSize="{ minRows: 2, maxRows: 5 }" v-model="form.awards" />
|
|
</a-form-model-item>
|
|
</a-col>
|
|
</a-row>
|
|
<a-row>
|
|
<a-col>
|
|
<a-form-model-item ref="punish" label="受到处罚" prop="punish" :label-col="{ span: 2 }" :wrapper-col="{ span: 21 }">
|
|
<a-textarea disabled :autoSize="{ minRows: 2, maxRows: 5 }" v-model="form.punish" />
|
|
</a-form-model-item>
|
|
</a-col>
|
|
</a-row>
|
|
<a-row>
|
|
<a-col>
|
|
<a-form-model-item ref="train" label="参加培训" prop="train" :label-col="{ span: 2 }" :wrapper-col="{ span: 21 }">
|
|
<a-textarea disabled :autoSize="{ minRows: 2, maxRows: 5 }" v-model="form.train" />
|
|
</a-form-model-item>
|
|
</a-col>
|
|
</a-row>
|
|
<a-row>
|
|
<a-col>
|
|
<a-form-model-item ref="certificate" label="获得证书" prop="certificate" :label-col="{ span: 2 }" :wrapper-col="{ span: 21 }">
|
|
<a-textarea disabled :autoSize="{ minRows: 2, maxRows: 5 }" v-model="form.certificate" />
|
|
</a-form-model-item>
|
|
</a-col>
|
|
</a-row>
|
|
<a-divider orientation="left">家庭成员</a-divider>
|
|
<a-table ref="table" :columns="columns" :data-source="form.familyList" :rowKey="(record) => record.id"
|
|
:pagination="false">
|
|
</a-table>
|
|
|
|
<div class="draw-button-container align-center" style="bottom: auto;">
|
|
<a-button @click="onCancel">返回</a-button>
|
|
</div>
|
|
</a-form-model>
|
|
</a-card>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
personServiceDetail,
|
|
personServiceAddOrUpdate
|
|
} from '@/api/person/personService'
|
|
import {
|
|
dictionaryDropDown
|
|
} from '@/api/sys/dictionaryItem'
|
|
import DbDynamic from '@/components/DbDynamic/DbDynamic.vue'
|
|
const PARTONE = 'partOne'
|
|
|
|
export default {
|
|
props: {
|
|
id: {
|
|
type: String,
|
|
default: undefined
|
|
}
|
|
},
|
|
components: {
|
|
DbDynamic
|
|
},
|
|
data() {
|
|
return {
|
|
title: '服务人员详情',
|
|
labelCol: {
|
|
span: 4
|
|
},
|
|
wrapperCol: {
|
|
span: 18
|
|
},
|
|
PARTONE,
|
|
childForm: this.$form.createForm(this),
|
|
form: {
|
|
type: this.$route.query.type,
|
|
id: '',
|
|
name: '',
|
|
idCardNo: '',
|
|
age: null,
|
|
sex: null,
|
|
phone: '',
|
|
politicalOutlook: null,
|
|
maritalStatus: null,
|
|
familyList: []
|
|
},
|
|
maritalStatusData: [],
|
|
politicalOutlookData: [],
|
|
jobsData: [],
|
|
rules: {
|
|
name: [{
|
|
required: true,
|
|
message: '请输入名称',
|
|
trigger: 'blur'
|
|
},
|
|
{
|
|
min: 2,
|
|
message: '长度不能小于2',
|
|
trigger: 'blur'
|
|
},
|
|
{
|
|
max: 20,
|
|
message: '长度不能超过20',
|
|
trigger: 'blur'
|
|
}
|
|
],
|
|
idCardNo: [{
|
|
required: true,
|
|
message: '请输入身份证号',
|
|
trigger: 'blur'
|
|
}]
|
|
},
|
|
// 表头
|
|
columns: [{
|
|
title: '姓名',
|
|
dataIndex: 'familyName'
|
|
},
|
|
{
|
|
title: '关系',
|
|
dataIndex: 'relation'
|
|
},
|
|
{
|
|
title: '联系方式',
|
|
dataIndex: 'phone'
|
|
},
|
|
{
|
|
title: '工作单位',
|
|
dataIndex: 'workInfo'
|
|
}
|
|
]
|
|
}
|
|
},
|
|
mounted() {
|
|
|
|
},
|
|
created() {
|
|
this.init()
|
|
},
|
|
methods: {
|
|
async init() {
|
|
await this.dictionaryDropDown()
|
|
this.editDetail()
|
|
},
|
|
editDetail() {
|
|
const id = this.$route.query.id
|
|
if (!id) {
|
|
return
|
|
}
|
|
personServiceDetail({
|
|
id: id
|
|
}).then(data => {
|
|
console.log(data)
|
|
const form = data.data
|
|
this.form = form
|
|
|
|
// 动态回显身份证号相关信息
|
|
this.idCardNoBlur()
|
|
/* this.form.maritalStatus = parseInt(form.maritalStatus)*/
|
|
})
|
|
},
|
|
onSubmit(e) {
|
|
this.$refs.ruleForm.validate(valid => {
|
|
if (valid) {
|
|
const {
|
|
childForm: {
|
|
validateFields
|
|
}
|
|
} = this
|
|
validateFields((errors, values) => {
|
|
if (!errors) {
|
|
const partOneArr = [];
|
|
(values[`${PARTONE}FamilyName`]).forEach((item, index) => {
|
|
const obj = {
|
|
familyName: item,
|
|
id: values[`${PARTONE}Id`][index],
|
|
relation: values[`${PARTONE}Relation`][index],
|
|
phone: values[`${PARTONE}Phone`][index],
|
|
workInfo: values[`${PARTONE}WorkInfo`][index]
|
|
}
|
|
partOneArr.push(obj)
|
|
})
|
|
this.form.familyList = partOneArr
|
|
}
|
|
})
|
|
|
|
console.log(this.form)
|
|
personServiceAddOrUpdate(this.form).then(data => {
|
|
this.$message.info('保存成功')
|
|
this.onCancel()
|
|
})
|
|
} else {
|
|
return false
|
|
}
|
|
})
|
|
},
|
|
onCancel() {
|
|
this.$refs.ruleForm.resetFields()
|
|
delete this.form.id
|
|
this.goback()
|
|
},
|
|
onReset() {
|
|
this.$refs.ruleForm.resetFields()
|
|
},
|
|
idCardNoBlur() {
|
|
const idCardNo = this.form.idCardNo
|
|
console.log(idCardNo)
|
|
// 如果用户身份证号码为undefined则返回空
|
|
if (!idCardNo) {
|
|
return
|
|
}
|
|
|
|
// 获取性别
|
|
if (parseInt(idCardNo.substr(16, 1)) % 2 === 1) {
|
|
this.form.sex = 1
|
|
} else {
|
|
this.form.sex = 0
|
|
}
|
|
|
|
// 获取出生日期
|
|
var yearBirth = idCardNo.substring(6, 10)
|
|
var monthBirth = idCardNo.substring(10, 12)
|
|
var dayBirth = idCardNo.substring(12, 14)
|
|
// 获取当前年月日并计算年龄
|
|
var myDate = new Date()
|
|
var monthNow = myDate.getMonth() + 1
|
|
var dayNow = myDate.getDate()
|
|
var age = myDate.getFullYear() - yearBirth
|
|
if (monthNow < monthBirth || (monthNow === monthBirth && dayNow < dayBirth)) {
|
|
age--
|
|
}
|
|
// 得到年龄
|
|
this.form.age = age
|
|
},
|
|
/**
|
|
* 获取字典数据
|
|
*/
|
|
dictionaryDropDown() {
|
|
// 婚姻状况
|
|
dictionaryDropDown({
|
|
dictionaryCode: '0030'
|
|
}).then(res => {
|
|
this.maritalStatusData = res.data
|
|
})
|
|
// 岗位
|
|
dictionaryDropDown({
|
|
dictionaryCode: '0050'
|
|
}).then(res => {
|
|
this.jobsData = res.data
|
|
})
|
|
// 政治面貌
|
|
dictionaryDropDown({
|
|
dictionaryCode: '0060'
|
|
}).then(res => {
|
|
this.politicalOutlookData = res.data
|
|
})
|
|
},
|
|
// 返回
|
|
goback() {
|
|
this.$router.push({
|
|
path: '/person/service',
|
|
query: {}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
</style>
|