OfficeApp/components/newArchives/residents.vue

<!-- 常住人口 -->
<template>
  <view class="">
    <u--form labelPosition="left" :model="residents" :rules="rules" ref="uForm">
      <block value="人口">
        <block value="人员信息" v-for="(item, index) in residents.family" :key="'user'+index">
          <u-form-item label="姓名" required prop="residents.name" borderBottom>
            <u--input v-model="item.name" placeholder="请输入姓名"></u--input>
          </u-form-item>
          <picker mode="date" value="1990-01-01" @change="changebirth_time" :data-index="index">
            <u-form-item labelWidth="auto" label="出生日期" required prop="residents.name" borderBottom>
              <u--input :value="item.birth_time" placeholder="请选择出生日期" disabled disabledColor="#fff"></u--input>
              <u-icon slot="right" name="arrow-right"></u-icon>
            </u-form-item>
          </picker>
          <picker mode="selector" :range="situationList" @change="changesituation" :data-index="index">
            <u-form-item labelWidth="auto" label="就业情况" required prop="residents.name" borderBottom>
              <u--input :value="item.situation" 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.name" borderBottom>
            <u--input v-model="item.skills" placeholder="请输入技能特长"></u--input>
          </u-form-item>
          <button type="primary" v-if="residents.family.length>1" class="delete"
            @click="removeFamily(index)">删除以上信息</button>
        </block>
        <button type="primary" class="plus" @click="pushFamily">+</button>
      </block>
      <block value="婴幼儿信息">
        <u-form-item labelWidth="auto" label="是否存在学生、婴幼儿" required prop="residents.child" borderBottom>
          <u-radio-group v-model="residents.child" 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.child>0" v-for="(item,index) in residents.child_arr" :key="'child'+index">
          <u-form-item label="年龄" required prop="residents.child_arr.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.child" 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.child_arr.age" borderBottom>
              <u--input v-model="item.grade" placeholder="请输入年级"></u--input>
            </u-form-item>
            <u-form-item labelWidth="auto" label="是否补课" required prop="residents.child" borderBottom>
              <u-radio-group v-model="item.is_lesson" 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_lesson>0" label-width="auto" labelPosition="top" label="补课内容" prop="residents.child_arr.age"
              borderBottom>
              <u--textarea v-model="item.lesson" autoHeight placeholder="请输入需要的课程" border="surround"
                count></u--textarea>
            </u-form-item>
            <u-form-item label-width="auto" labelPosition="top" label="备注" prop="residents.child_arr.age" borderBottom>
              <u--textarea v-model="item.notes" autoHeight placeholder="请输入备注" border="surround" count></u--textarea>
            </u-form-item>
          </block>
          <button type="primary" v-if="residents.child_arr.length>1" class="delete"
            @click="removeChildArr(index)">删除以上信息</button>
        </block>
        <button type="primary" v-if="residents.child>0" class="plus" @click="pushChildArr">+</button>
      </block>
      
    </u--form>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        situationList: ['公务员','国企事业单位','民营企业','自由职业','其他'],
        // 常住人口
        residents: {
          family: [{
            name: '',
            birth_time: '',
            situation: '', // 工作
            skills: '', // 技能
          }],
          child: '', //是否存在婴幼儿
          child_arr: [ //婴幼儿列表
            {
              age: '',
              feeding: '', //喂养方式
              grade: '', //年级
              is_lesson: '', //是否补课
              lesson: '', //课程
              notes: '' //备注
            }
          ],
        },
        rules: {

        }
      }
    },
    methods: {
      // 选择生日
      changebirth_time(e){
        let index = e.currentTarget.dataset.index;
        this.residents.family[index].birth_time = e.detail.value;
      },
      // 选择就业
      changesituation(e){
        let index = e.currentTarget.dataset.index;
        this.residents.family[index].situation = this.situationList[e.detail.value];
      },
      // 添加人口
      pushFamily() {
        this.residents.family.push({
            name: '',
            birth_time: '',
            situation: '', // 工作
            skills: '', // 技能
          })
      },
      // 删除人口
      removeFamily(index) {
        uni.showModal({
          confirmColor: '#f56c6c',
          content: '确定删除吗?',
          success: (res) => {
            if (res.confirm) {
              this.residents.family.splice(index, 1);
            }
          }
        })
      },
      // 添加婴幼儿
      pushChildArr() {
        this.residents.child_arr.push({
              age: '',
              feeding: '', //喂养方式
              grade: '', //年级
              is_lesson: '', //是否补课
              lesson: '', //课程
              notes: '' //备注
            })
      },
      // 删除婴幼儿
      removeChildArr(index) {
        uni.showModal({
          confirmColor: '#f56c6c',
          content: '确定删除吗?',
          success: (res) => {
            if (res.confirm) {
              this.residents.child_arr.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>