公共数据之后，家庭成员循环绑定
<div class="details-middle" v-loading="listLoading">
<el-form label-width="150px" label-position="left" :rules="rules" ref="ruleForm" :model="ruleForm">
<div class="details-middle-title">
<span>个人基本信息</span>
</div>
<div class="details-middle-con">
<div class="details-middle-con-info">
<el-row>
<el-col :span="8">
<el-form-item label="姓名" prop="username" class="item-con">
<el-input v-model="ruleForm.username" placeholder="请输入姓名"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="性别" prop="sex" class="item-con">
<el-select style="width: 100%;" v-model="ruleForm.sex" placeholder="请选择" clearable>
<el-option label="男" :value="1"></el-option>
<el-option label="女" :value="2"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="民族" prop="nationality" class="item-con">
<el-input v-model="ruleForm.nationality" placeholder="请输入民族"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item label="籍貫" prop="hometown" class="item-con">
<!-- <el-cascader size="small" :options="areaList" :props="{
value: 'name',
label: 'name',
}" clearable v-model="ruleForm.hometown" filterable @change="handleChange" /> -->
<el-input v-model="ruleForm.hometown" placeholder="请输入"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label-position="left" label="身份证号码" prop="cardNumber" class="item-con">
<el-input v-model="ruleForm.cardNumber" placeholder="请输入身份证号码"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label-position="left" label="出生年月" prop="birthDate" class="item-con">
<el-date-picker style="width: 100%;" v-model="ruleForm.birthDate"
value-format="yyyy-MM-dd" type="date" placeholder="选择日期">
</el-date-picker>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item label-position="left" label="政治面貌" prop="politicalStatus" class="item-con">
<el-select style="width: 100%;" v-model="ruleForm.politicalStatus" placeholder="请选择"
clearable>
<el-option label="党员" :value="1"></el-option>
<el-option label="群众" :value="2"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label-position="left" label="入党时间" prop="joinPartyTime" class="item-con">
<el-date-picker style="width: 100%;" v-model="ruleForm.joinPartyTime"
value-format="yyyy-MM-dd" type="date" placeholder="选择日期">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label-position="left" label="健康状况" prop="health" class="item-con">
<el-input v-model="ruleForm.health" placeholder="请输入健康状况"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item label-position="left" label="全日制教育" prop="fullTimeEdycation" class="item-con">
<el-input v-model="ruleForm.fullTimeEdycation" placeholder="请输入全日制教育情况"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label-position="left" label="毕业院校及专业" prop="fullTimeCollege" class="item-con">
<el-input v-model="ruleForm.fullTimeCollege" placeholder="请输入毕业院校及专业"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label-position="left" label="学历" prop="education" class="item-con">
<el-select style="width: 100%;" v-model="ruleForm.education" placeholder="请选择"
clearable>
<el-option label="研究生" :value="1"></el-option>
<el-option label="本科" :value="2"></el-option>
<el-option label="专科" :value="3"></el-option>
<el-option label="高中" :value="4"></el-option>
<el-option label="初中" :value="5"></el-option>
<el-option label="小学" :value="6"></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item label-position="left" style="margin-left: 5px;" label="在职教育"
prop="inServiceEducation" class="item-con">
<el-input style="padding-left: 5px;" v-model="ruleForm.inServiceEducation"
placeholder="请输入在职教育情况"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label-position="left" label="在职毕业院校及专业" prop="inServiceCollege"
class="item-con">
<el-input v-model="ruleForm.inServiceCollege" placeholder="请输入在职毕业院校及专业"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label-position="left" label="专业技术职务" prop="professionalPost" class="item-con">
<el-input v-model="ruleForm.professionalPost" placeholder="请输入专业技术职务"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item label-position="left" label="熟悉专业有何特长" prop="speciality" class="item-con">
<el-input v-model="ruleForm.speciality" placeholder="请输入熟悉专业特长"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label-position="left" label="参加工作时间" prop="joinDate" class="item-con">
<el-date-picker style="width: 100%;" v-model="ruleForm.joinDate"
value-format="yyyy-MM-dd" type="date" placeholder="选择日期">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label-position="left" label="工作单位" prop="company" class="item-con">
<el-input v-model="ruleForm.company" placeholder="请输入工作单位"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item label-position="left" label="工作单位及地址" prop="unitAddress" class="item-con">
<el-input v-model="ruleForm.unitAddress" placeholder="请输入工作单位及地址"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label-position="left" label="邮政编码" prop="postalCode" class="item-con">
<el-input v-model="ruleForm.postalCode" placeholder="请输入邮政编码"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label-position="left" label="部门名称" prop="department" class="item-con">
<el-input v-model="ruleForm.department" placeholder="请输入部门名称"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item label-position="left" label="现任职务" prop="post" class="item-con">
<el-input v-model="ruleForm.post" placeholder="请输入现任职务"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label-position="left" label="职称" prop="title" class="item-con">
<el-input v-model="ruleForm.title" placeholder="请输入职称"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label-position="left" label="奖惩情况" prop="rewardsPunishment" class="item-con">
<el-input type="textarea" :rows="3" v-model="ruleForm.rewardsPunishment"
placeholder="请输入奖惩情况"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label-position="left" label="简历" prop="resume" class="item-con">
<el-input type="textarea" :rows="4" v-model="ruleForm.resume"
placeholder="请输入简历"></el-input>
</el-form-item>
</el-col>
</el-row>
</div>
</div>
<!-- 家庭主要成员及社会重要关系 -->
<div class="details-middle-title">
<span>家庭主要成员及社会重要关系</span>
<el-button @click="addMembers()">添加成员</el-button>
</div>
<div class="details-middle-con">
<div class="details-middle-con-info">
<div class="details-middle-con-info-item" v-for="(item, index) in ruleForm.memberRelationshipList"
:key="index">
<div style="line-height: 33px;color: #000;font-size:14px"> 成员{{ index + 1 }}</div>
<div>
<el-row>
<el-col :span="8">
<!-- :rules="{
required: true,
message: '请输入称谓',
trigger: 'blur',
}" -->
<el-form-item label="称谓" :prop="`memberRelationshipList[${index}].appellation`"
class="item-con">
<el-input v-model="item.appellation" placeholder="请输入称谓"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="姓名" :prop="`memberRelationshipList[${index}].name`"
class="item-con">
<el-input v-model="item.name" placeholder="请输入姓名"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="年龄" :rules="[
{
pattern: /^(0|[1-9][0-9]{0,2})$/,
message: '请输入正确的年龄',
trigger: 'blur',
}]" :prop="`memberRelationshipList[${index}].age`" class="item-con">
<el-input v-model.number="item.age" placeholder="请输入年龄"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<!-- :rules="{
required: true,
message: '请输入工作单位及职务',
trigger: 'blur',
}" -->
<el-form-item label="工作单位及职务" :prop="`memberRelationshipList[${index}].company`"
class="item-con">
<el-input type="textarea" maxlength="50" :rows="4" v-model="item.company"
placeholder="请输入工作单位及职务"></el-input>
</el-form-item>
</el-col>
</el-row>
</div>
<div @click="handledel(item)" style="cursor: pointer;">
<i class="el-icon-delete-solid"></i>
</div>
</div>
</div>
</div>
</el-form>
</div>return {
listLoading: false,
corpId: '',//企业id
// areaList: [],
ruleForm: {
birthDate: '',//出生日期
cardNumber: '',//身份证号
company: '',//工作单位
deptId: '',//部门id
department: '',
education: 1,//学历：1.研究生2.本科3.专科4.高中5.初中6.小学
fullTimeCollege: '',//全日制教育毕业院校
fullTimeEdycation: '',//全日制教育
health: '',//健康状态
hometown: '',//籍贯
inServiceCollege: '',//在职教育毕业院校
inServiceEducation: '',//在职教育
joinDate: '',//参加工作时间
joinPartyTime: '',//入党时间
memberRelationshipList: [
// {
// age: null,//年龄
// appellation: '',//称谓
// archivesId: '',//档案id
// company: '',//工作单位及职务
// memberRelationshipId: '',//成员关系id
// name: '',//姓名
// politicalStatus: '',//政治面貌
// }
],
nationality: '',//民族
nativeAddress: '',//出生地
politicalStatus: 1,//政治面貌：1.党员2.群众
post: '',//职务
postalCode: '',//邮政编码
professionalPost: '',//专业技术职务
resume: '',//简历
rewardsPunishment: '',//奖惩情况
sexName: '',
sex: 1,//性别：1.男2.女
speciality: '',//熟悉专业有何专长
submitterId: JSON.parse(sessionStorage.getItem('vue_app_base_session_user')).userId,//提交人id
title: '',//职称
unitAddress: '',// 单位地址
userId: '',//钉钉id
username: '',//姓名
},
rules: {
username: [
{
required: true,
message: '请输入姓名',
trigger: 'blur',
},
],
sex: [
{
required: true,
message: '请选择性别',
trigger: 'blur',
},
],
nationality: [
{
required: true,
message: '请输入民族',
trigger: 'blur',
},
],
hometown: [
{
required: true,
message: '请输入籍贯',
trigger: 'blur',
},
],
cardNumber: [
{
required: true,
message: '请输入身份证号码',
trigger: 'blur',
},
{
required: true,
validator: checkCardNumber,
trigger: 'blur',
}
],
birthDate: [
{
required: true,
message: '请选择出生年月',
trigger: 'blur',
},
],
joinDate: [
{
required: true,
message: '请选择参加工作时间',
trigger: 'blur',
},
],
// joinPartyTime: [
// {
// required: true,
// message: '请选择入党时间',
// trigger: 'blur',
// },
// ],
health: [
{
required: true,
message: '请输入健康状况',
trigger: 'blur',
},
],
fullTimeEdycation: [
{
required: true,
message: '请输入全日制教育',
trigger: 'blur',
},
],
fullTimeCollege: [
{
required: true,
message: '请输入毕业院校及专业',
trigger: 'blur',
},
],
education: [
{
required: true,
message: '请选择学历',
trigger: 'blur',
},
],
// inServiceEducation: [
// {
// required: true,
// message: '请输入在职教育',
// trigger: 'blur',
// },
// ],
// inServiceCollege: [
// {
// required: true,
// message: '请输入毕业院校及专业',
// trigger: 'blur',
// },
// ],
professionalPost: [
{
required: true,
message: '请输入专业技术职务',
trigger: 'blur',
},
],
speciality: [
{
required: true,
message: '请输入熟悉专业有何特长',
trigger: 'blur',
},
],
politicalStatus: [
{
required: true,
message: '请选择政治面貌',
trigger: 'blur',
},
],
company: [
{
required: true,
message: '请输入工作单位',
trigger: 'blur',
},
],
unitAddress: [
{
required: true,
message: '请输入工作单位及地址',
trigger: 'blur',
},
],
postalCode: [
{
required: true,
message: '请输入邮政编码',
trigger: 'blur',
},
{
required: true,
validator: checkPostalCode,
trigger: 'blur',
}
],
department: [
{
required: true,
message: '请输入部门名称',
trigger: 'blur',
},
],
post: [
{
required: true,
message: '请输入现任职务',
trigger: 'blur',
},
],
title: [
{
required: true,
message: '请输入职称',
trigger: 'blur',
},
],
rewardsPunishment: [
{
required: true,
message: '请输入奖惩情况',
trigger: 'blur',
},
],
resume: [
{
required: true,
message: '请输入简历',
trigger: 'blur',
},
],
},
}handleSubmit() {
this.$refs['ruleForm'].validate((valid) => {
if (valid) {
} else {
// 定位到未填项
this.$nextTick(() => {
let isError = document.getElementsByClassName('el-form-item__error')
if (isError.length) {
isError[0].scrollIntoView({
block: 'center',
behavior: 'smooth'
})
}
})
return false;
}
});
},// 添加成员
addMembers() {
if (this.ruleForm.memberRelationshipList && this.ruleForm.memberRelationshipList.length > 4) {
this.$message.info('最多保留五个家庭成员')
} else {
this.ruleForm.memberRelationshipList.push({
age: 0,//年龄
appellation: '',//称谓
archivesId: '',//档案id
company: '',//工作单位及职务
memberRelationshipId: '',//成员关系id
name: '',//姓名
politicalStatus: '',//政治面貌
})
}
},
// 删除成员
handledel(value) {
// if (this.ruleForm.memberRelationshipList.length > 0) {
this.ruleForm.memberRelationshipList.splice(
this.ruleForm.memberRelationshipList.indexOf(value),
1
)
// }
// else {
// this.$message.info('最少保留一个家庭成员')
// return
// }
},
1465
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
