Files
dvcp_v2_wxcp_app/src/apps/AppPovertyAlleviation/MonitorAddFamilyMember.vue
2021-12-16 17:42:54 +08:00

467 lines
12 KiB
Vue

<template>
<div class="add">
<div class="form-group">
<div class="form-item">
<div class="form-item__wrapper">
<div class="left">
<i>*</i>
<span>与户主关系</span>
</div>
<div class="right">
<AiSelect dict="fpRelationship" v-model="form.relationship"></AiSelect>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="form-item">
<div class="form-item__wrapper">
<div class="left">
<i>*</i>
<span>姓名</span>
</div>
<div class="right">
<input placeholder="请输入" v-model="form.name" placeholder-style="color: #999; font-size: 30rpx;"/>
</div>
</div>
</div>
<div class="form-item">
<div class="form-item__wrapper">
<div class="left">
<i>*</i>
<span>身份证号</span>
</div>
<div class="right">
<input placeholder="请输入" v-model="form.idNumber" placeholder-style="color: #999; font-size: 30rpx;"/>
</div>
</div>
</div>
<div class="form-item">
<div class="form-item__wrapper">
<div class="left">
<i>*</i>
<span>性别</span>
</div>
<div class="right">
<AiSelect dict="sex" v-model="form.sex"></AiSelect>
</div>
</div>
</div>
<div class="form-item">
<div class="form-item__wrapper">
<div class="left">
<i style="opacity: 0;">*</i>
<span>民族</span>
</div>
<div class="right">
<AiSelect dict="fpNation" v-model="form.nation"></AiSelect>
</div>
</div>
</div>
<div class="form-item">
<div class="form-item__wrapper">
<div class="left">
<i style="opacity: 0;">*</i>
<span>政治面貌</span>
</div>
<div class="right">
<AiSelect dict="fpPoliticalOutlook" v-model="form.politicalOutlook"></AiSelect>
</div>
</div>
</div>
<div class="form-item">
<div class="form-item__wrapper">
<div class="left">
<i style="opacity: 0;">*</i>
<span>文化程度</span>
</div>
<div class="right">
<AiSelect dict="fpEducation" v-model="form.education"></AiSelect>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="form-item">
<div class="form-item__wrapper">
<div class="left">
<i>*</i>
<span>在校情况</span>
</div>
<div class="right">
<AiSelect dict="fpStudentsInSchool" v-model="form.studentsInSchool"></AiSelect>
</div>
</div>
</div>
<div class="form-item">
<div class="form-item__wrapper">
<div class="left">
<i>*</i>
<span>健康状况</span>
</div>
<div class="right">
<AiSelect dict="fpHealth" v-model="form.health"></AiSelect>
</div>
</div>
</div>
<div class="form-item">
<div class="form-item__wrapper">
<div class="left">
<i style="opacity: 0;">*</i>
<span>劳动技能</span>
</div>
<div class="right">
<AiSelect dict="fpLaborSkills" v-model="form.laborSkills"></AiSelect>
</div>
</div>
</div>
<div class="form-item">
<div class="form-item__wrapper">
<div class="left">
<i style="opacity: 0;">*</i>
<span>务工区域</span>
</div>
<div class="right">
<input placeholder="请输入" v-model="form.workArea" placeholder-style="color: #999; font-size: 30rpx;"/>
</div>
</div>
</div>
<div class="form-item">
<div class="form-item__wrapper">
<div class="left">
<i style="opacity: 0;">*</i>
<span>务工时长()</span>
</div>
<div class="right">
<input placeholder="请输入" type="number" v-model="form.workingMonths"
placeholder-style="color: #999; font-size: 30rpx;"/>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="form-item">
<div class="form-item__wrapper">
<div class="left">
<i>*</i>
<span>是否参加医保</span>
</div>
<div class="right">
<u-radio-group v-model="form.medicalInsurance">
<u-radio :name="item.dictValue" v-for="(item, index) in $dict.getDict('fpYesOrNo')" :key="index">
{{ item.dictName }}
</u-radio>
</u-radio-group>
</div>
</div>
</div>
<div class="form-item">
<div class="form-item__wrapper">
<div class="left">
<i>*</i>
<span>是否参加大病保险</span>
</div>
<div class="right">
<u-radio-group v-model="form.sicknessInsurance">
<u-radio :name="item.dictValue" v-for="(item, index) in $dict.getDict('fpYesOrNo')" :key="index">
{{ item.dictName }}
</u-radio>
</u-radio-group>
</div>
</div>
</div>
<div class="form-item">
<div class="form-item__wrapper">
<div class="left">
<i>*</i>
<span>是否参加养老保险</span>
</div>
<div class="right">
<u-radio-group v-model="form.endowmentInsurance">
<u-radio :name="item.dictValue" v-for="(item, index) in $dict.getDict('fpYesOrNo')" :key="index">
{{ item.dictName }}
</u-radio>
</u-radio-group>
</div>
</div>
</div>
<div class="form-item">
<div class="form-item__wrapper">
<div class="left">
<i>*</i>
<span>是否享受最低生活保障</span>
</div>
<div class="right">
<u-radio-group v-model="form.subsistenceAllowance">
<u-radio :name="item.dictValue" v-for="(item, index) in $dict.getDict('fpYesOrNo')" :key="index">
{{ item.dictName }}
</u-radio>
</u-radio-group>
</div>
</div>
</div>
<div class="form-item">
<div class="form-item__wrapper">
<div class="left">
<i>*</i>
<span>是否特困供养</span>
</div>
<div class="right">
<u-radio-group v-model="form.destitute">
<u-radio :name="item.dictValue" v-for="(item, index) in $dict.getDict('fpYesOrNo')" :key="index">
{{ item.dictName }}
</u-radio>
</u-radio-group>
</div>
</div>
</div>
</div>
<div class="btn" @click="submit">提交</div>
</div>
</template>
<script>
export default {
data() {
return {
form: {
destitute: '',
education: '',
endowmentInsurance: '',
health: '',
idNumber: '',
laborSkills: '',
medicalInsurance: '',
name: '',
nation: '',
politicalOutlook: '',
relationship: '',
relocation: '',
sex: '',
sicknessInsurance: '',
studentsInSchool: '',
subsistenceAllowance: '',
workArea: '',
workingMonths: ''
},
id: '',
info: {},
isEdit: false,
index: ''
}
},
onLoad(query) {
uni.showLoading()
this.id = query.id
this.$dict.load(['fpRelationship', 'sex', 'fpNation', 'fpHealth', 'fpEducation', 'fpYesOrNo', 'fpLaborSkills', 'fpPoliticalOutlook',
'fpRelationship', 'fpStudentsInSchool', 'fpFnancialAssistance', 'fpHealthAssistance', 'fpHousingSecurity']).then(() => {
this.getInfo(query.id)
})
if (query.index > -1) {
this.isEdit = true
this.index = Number(query.index)
}
},
methods: {
getInfo(id) {
this.$http.post(`/app/apppreventionreturntopoverty/queryDetailById?id=${id}`).then(res => {
if (res.code === 0) {
if (this.isEdit) {
this.form = {
...res.data.familyList[this.index]
}
}
this.info = res.data
}
uni.hideLoading()
})
},
rules() {
return {
relationship: '请选择与户主关系',
name: '请输入姓名',
idNumber: '请输入身份证号',
sex: '请选择性别',
studentsInSchool: '请选择在校情况',
health: '请选择健康状况',
medicalInsurance: '请选择是否参加医保',
sicknessInsurance: '请选择是否参加大病保险',
endowmentInsurance: '请选择是否参加养老保险',
subsistenceAllowance: '请选择是否享受最低生活保障',
destitute: '请选择是否特困供养',
}
},
submit() {
const rules = this.rules()
for (let v of Object.keys(rules)) {
if (!this.form[v]) {
return this.$u.toast(rules[v])
}
}
uni.showLoading()
let familyList = this.info.familyList
if (this.isEdit) {
familyList[this.index] = this.form
} else {
familyList.push(this.form)
}
this.$http.post('/app/apppreventionreturntopoverty/addOrUpdate', {
...this.info,
familyList,
id: this.id
}).then(res => {
if (res.code === 0) {
this.$u.toast(this.isEdit ? '编辑成功' : '提交成功')
uni.$emit('reload')
uni.navigateBack({
delta: 1
})
}
uni.hideLoading()
})
}
}
}
</script>
<style lang="scss">
.add {
padding-bottom: 120px;
::v-deep .u-radio {
&:last-child {
.u-radio__label {
margin-right: 0;
}
}
}
& > div {
margin-bottom: 16px;
background: #fff;
}
.form-group {
.form-item {
padding-left: 32px;
.form-item__wrapper {
display: flex;
align-items: center;
justify-content: space-between;
height: 112px;
border-bottom: 1px solid #E4E5E6;
}
.right {
height: 112px;
line-height: 112px;
padding-right: 32px;
span {
font-size: 30px;
color: #999999;
}
}
input {
height: 100%;
text-align: right;
}
.left {
display: flex;
align-items: center;
span {
color: #333333;
font-size: 32px;
}
i {
margin-right: 4px;
font-style: normal;
color: #FF4466;
font-size: 32px;
}
}
&:last-child {
.form-item__wrapper {
border: none;
}
}
}
}
.form-item__imgs {
padding: 32px;
.form-item__title {
display: flex;
align-items: center;
margin-bottom: 34px;
h2 {
color: #333333;
font-weight: normal;
font-size: 32px;
}
i {
color: #999999;
font-size: 28px;
font-style: normal;
}
}
textarea {
width: 100%;
}
}
.form-type {
display: flex;
align-items: center;
justify-content: space-between;
height: 112px;
padding: 0 32px;
h2 {
font-weight: normal;
color: #333333;
font-size: 32px;
}
span {
color: #999999;
font-size: 28px;
}
}
.btn {
position: fixed;
left: 0;
bottom: 0;
z-index: 11;
width: 100%;
height: 112px;
line-height: 112px;
margin: 0;
text-align: center;
color: #FFFFFF;
font-size: 32px;
background: #3192F4;
}
}
</style>