214 lines
8.5 KiB
Vue
214 lines
8.5 KiB
Vue
|
<!-- 常住人口 -->
|
||
|
|
<template>
|
||
|
|
<view class="">
|
||
|
|
<u--form labelPosition="left" :model="residents" :rules="rules" ref="uForm">
|
||
|
|
<block value="人口">
|
||
|
|
<block value="人员信息" v-for="(item, index) in residents.userList" :key="'user'+index">
|
||
|
|
<u-form-item label="姓名" required prop="residents.nickname" borderBottom>
|
||
|
|
<u--input v-model="item.nickname" placeholder="请输入姓名"></u--input>
|
||
|
|
</u-form-item>
|
||
|
|
<picker mode="date" value="1990-01-01" @change="changeBirthday" :data-index="index">
|
||
|
|
<u-form-item labelWidth="auto" label="出生日期" required prop="residents.nickname" borderBottom>
|
||
|
|
<u--input :value="item.birthday" placeholder="请选择出生日期" disabled disabledColor="#fff"></u--input>
|
||
|
|
<u-icon slot="right" name="arrow-right"></u-icon>
|
||
|
|
</u-form-item>
|
||
|
|
</picker>
|
||
|
|
<picker mode="selector" :range="['公务员','国企事业单位','民营企业','自由职业','其他']" @change="">
|
||
|
|
<u-form-item labelWidth="auto" label="就业情况" required prop="residents.nickname" borderBottom>
|
||
|
|
<u--input :value="item.jobType" placeholder="请选择就业情况" disabled disabledColor="#fff"></u--input>
|
||
|
|
<u-icon slot="right" name="arrow-right"></u-icon>
|
||
|
|
</u-form-item>
|
||
|
|
</picker>
|
||
|
|
<u-form-item labelWidth="auto" label="技能特长" required prop="residents.nickname" borderBottom>
|
||
|
|
<u--input v-model="item.skill" placeholder="请输入技能特长"></u--input>
|
||
|
|
</u-form-item>
|
||
|
|
<button type="primary" v-if="residents.userList.length>1" class="delete"
|
||
|
|
@click="removeUserList(index)">删除以上信息</button>
|
||
|
|
</block>
|
||
|
|
<button type="primary" class="plus" @click="pushUserList">+</button>
|
||
|
|
</block>
|
||
|
|
<block value="婴幼儿信息">
|
||
|
|
<u-form-item labelWidth="auto" label="是否存在学生、婴幼儿" required prop="residents.infant" borderBottom>
|
||
|
|
<u-radio-group v-model="residents.infant" style="margin: 16rpx;">
|
||
|
|
<u-radio :customStyle="{marginRight: '16px'}"
|
||
|
|
v-for="(item, index) in [{value:1,label:'是'},{value:0,label:'否'}]" :key="index" :label="item.label"
|
||
|
|
:name="item.value">
|
||
|
|
</u-radio>
|
||
|
|
</u-radio-group>
|
||
|
|
</u-form-item>
|
||
|
|
<block value="是" v-if="residents.infant>0" v-for="(item,index) in residents.infantList" :key="'infant'+index">
|
||
|
|
<u-form-item label="年龄" required prop="residents.infantList.age" borderBottom>
|
||
|
|
<u--input v-model="item.age" placeholder="请输入年龄" type="number"></u--input>
|
||
|
|
</u-form-item>
|
||
|
|
<block v-if="item.age<4">
|
||
|
|
<u-form-item labelWidth="auto" label="喂养方式" required prop="residents.infant" borderBottom>
|
||
|
|
<u-radio-group v-model="item.wyfs" style="margin: 16rpx;">
|
||
|
|
<u-radio :customStyle="{marginRight: '16px'}"
|
||
|
|
v-for="(item, index) in [{value:1,label:'母乳'},{value:0,label:'奶粉'}]" :key="index" :label="item.label"
|
||
|
|
:name="item.value">
|
||
|
|
</u-radio>
|
||
|
|
</u-radio-group>
|
||
|
|
</u-form-item>
|
||
|
|
</block>
|
||
|
|
<block v-else>
|
||
|
|
<u-form-item label="年级" required prop="residents.infantList.age" borderBottom>
|
||
|
|
<u--input v-model="item.grade" placeholder="请输入年级"></u--input>
|
||
|
|
</u-form-item>
|
||
|
|
<u-form-item labelWidth="auto" label="是否补课" required prop="residents.infant" borderBottom>
|
||
|
|
<u-radio-group v-model="item.is_course" style="margin: 16rpx;">
|
||
|
|
<u-radio :customStyle="{marginRight: '16px'}"
|
||
|
|
v-for="(item, index) in [{value:1,label:'是'},{value:0,label:'否'}]" :key="index" :label="item.label"
|
||
|
|
:name="item.value">
|
||
|
|
</u-radio>
|
||
|
|
</u-radio-group>
|
||
|
|
</u-form-item>
|
||
|
|
<u-form-item v-if="item.is_course>0" label-width="auto" labelPosition="top" label="补课内容" prop="residents.infantList.age"
|
||
|
|
borderBottom>
|
||
|
|
<u--textarea v-model="item.course" autoHeight placeholder="请输入需要的课程" border="surround"
|
||
|
|
count></u--textarea>
|
||
|
|
</u-form-item>
|
||
|
|
<u-form-item label-width="auto" labelPosition="top" label="备注" prop="residents.infantList.age" borderBottom>
|
||
|
|
<u--textarea v-model="item.remark" autoHeight placeholder="请输入备注" border="surround" count></u--textarea>
|
||
|
|
</u-form-item>
|
||
|
|
</block>
|
||
|
|
<button type="primary" v-if="residents.infantList.length>1" class="delete"
|
||
|
|
@click="removeInfantList(index)">删除以上信息</button>
|
||
|
|
</block>
|
||
|
|
<button type="primary" class="plus" @click="pushInfantList">+</button>
|
||
|
|
</block>
|
||
|
|
<u-form-item labelWidth="auto" label="汽车是否能到家" required prop="residents.infant" borderBottom>
|
||
|
|
<u-radio-group v-model="residents.is_car" style="margin: 16rpx;">
|
||
|
|
<u-radio :customStyle="{marginRight: '16px'}"
|
||
|
|
v-for="(item, index) in [{value:1,label:'是'},{value:0,label:'否'}]" :key="index" :label="item.label"
|
||
|
|
:name="item.value">
|
||
|
|
</u-radio>
|
||
|
|
</u-radio-group>
|
||
|
|
</u-form-item>
|
||
|
|
<block value="智能手机">
|
||
|
|
<u-form-item labelWidth="auto" label="是否使用智能手机" required prop="residents.infant" borderBottom>
|
||
|
|
<u-radio-group v-model="residents.is_smartphone" style="margin: 16rpx;">
|
||
|
|
<u-radio :customStyle="{marginRight: '16px'}"
|
||
|
|
v-for="(item, index) in [{value:1,label:'是'},{value:0,label:'否'}]" :key="index" :label="item.label"
|
||
|
|
:name="item.value">
|
||
|
|
</u-radio>
|
||
|
|
</u-radio-group>
|
||
|
|
</u-form-item>
|
||
|
|
<block v-if="residents.is_smartphone>0">
|
||
|
|
<u-form-item labelWidth="auto" label="微信号" required prop="residents.infantList.age" borderBottom>
|
||
|
|
<u--input v-model="residents.wechat" placeholder="请输入微信号"></u--input>
|
||
|
|
</u-form-item>
|
||
|
|
</block>
|
||
|
|
</block>
|
||
|
|
</u--form>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
// 常住人口
|
||
|
|
residents: {
|
||
|
|
userList: [{
|
||
|
|
nickname: '',
|
||
|
|
birthday: '',
|
||
|
|
jobType: '', // 工作
|
||
|
|
skill: '', // 技能
|
||
|
|
}],
|
||
|
|
infant: '', //是否存在婴幼儿
|
||
|
|
infantList: [ //婴幼儿列表
|
||
|
|
{
|
||
|
|
age: '',
|
||
|
|
wsfy: '', //喂养方式
|
||
|
|
grade: '', //年级
|
||
|
|
is_course: '', //是否补课
|
||
|
|
course: '', //课程
|
||
|
|
remark: '' //备注
|
||
|
|
}
|
||
|
|
],
|
||
|
|
is_car: '',//汽车是否能到家
|
||
|
|
is_smartphone: '',//是否使用智能手机
|
||
|
|
wechat: '', //微信号
|
||
|
|
},
|
||
|
|
rules: {
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
changeBirthday(e){
|
||
|
|
console.log(e);
|
||
|
|
},
|
||
|
|
// 添加人口
|
||
|
|
pushUserList() {
|
||
|
|
this.residents.userList.push({
|
||
|
|
nickname: '',
|
||
|
|
birthday: '',
|
||
|
|
jobType: '',
|
||
|
|
skill: '',
|
||
|
|
})
|
||
|
|
},
|
||
|
|
// 删除人口
|
||
|
|
removeUserList(index) {
|
||
|
|
uni.showModal({
|
||
|
|
confirmColor: '#f56c6c',
|
||
|
|
content: '确定删除吗?',
|
||
|
|
success: (res) => {
|
||
|
|
if (res.confirm) {
|
||
|
|
this.residents.userList.splice(index, 1);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
// 添加婴幼儿
|
||
|
|
pushInfantList() {
|
||
|
|
this.residents.infantList.push({
|
||
|
|
age: '',
|
||
|
|
wsfy: '', //喂养方式
|
||
|
|
grade: '', //年级
|
||
|
|
course: '', //课程
|
||
|
|
remark: '' //备注
|
||
|
|
})
|
||
|
|
},
|
||
|
|
// 删除婴幼儿
|
||
|
|
removeInfantList(index) {
|
||
|
|
uni.showModal({
|
||
|
|
confirmColor: '#f56c6c',
|
||
|
|
content: '确定删除吗?',
|
||
|
|
success: (res) => {
|
||
|
|
if (res.confirm) {
|
||
|
|
this.residents.infantList.splice(index, 1);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
},
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
.delete {
|
||
|
|
margin: 22rpx 0;
|
||
|
|
// margin-bottom: 40rpx;
|
||
|
|
width: 100%;
|
||
|
|
height: 54rpx;
|
||
|
|
line-height: 54rpx;
|
||
|
|
background: #f56c6c;
|
||
|
|
border-radius: 14rpx;
|
||
|
|
font-size: 28rpx;
|
||
|
|
color: #fff;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.plus {
|
||
|
|
margin: 22rpx 0;
|
||
|
|
// margin-bottom: 40rpx;
|
||
|
|
width: 100%;
|
||
|
|
height: 54rpx;
|
||
|
|
line-height: 54rpx;
|
||
|
|
background: $theme-oa-color;
|
||
|
|
border-radius: 14rpx;
|
||
|
|
color: #fff;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
</style>
|