OfficeApp/components/newArchives/residents.vue

<!-- 常住人口 -->
<template>
  <view class="">
    <u--form labelPosition="left" :model="residents" :rules="rules" ref="residentsForm">
      <block value="人口">
        <block value="人员信息" v-for="(item, index) in residents.family" :key="'user'+index">
          <u-form-item label="姓名" required prop="family.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="family.birth_time" 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="family.situation" 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="family" 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="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="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="喂养方式" 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="年级" borderBottom>
              <u--input v-model="item.grade" placeholder="请输入年级"></u--input>
            </u-form-item>
            <u-form-item labelWidth="auto" label="是否补课" 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="补课内容" borderBottom>
              <u--textarea v-model="item.lessons" autoHeight placeholder="请输入需要的课程" border="surround"
                count></u--textarea>
            </u-form-item>
          </block>
          <u-form-item label-width="auto" labelPosition="top" label="备注" borderBottom>
            <u--textarea v-model="item.notes" autoHeight placeholder="请输入备注" border="surround" count></u--textarea>
          </u-form-item>
          <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: '', //是否补课
              lessons: '', //课程
              notes: '' //备注
            }
          ],
        },
        rules: {
          family: {
            validator: (rule, value, callback ) => {
              if (Array.isArray(value) && value.length > 0) {
                for (let i = 0; i < value.length; i++) {
                  const item = value[i];
                  for (const key in item) {
                    // 检查每个属性值是否为空
                    if (!item[key]) {
                      callback(new Error('以上四项基本信息必填'));
                      return;
                    }
                  }
                }
                // 数组每个属性都不为空，校验通过
                callback();
              } else {
                // 数组为空，校验未通过
                callback(new Error('数组不能为空'));
              }
            },
            trigger: ['change', 'blur']
          },
          child: {
            validator: (rule, value, callback )=>{
              typeof value==='number'?callback():callback('不能为空')
            },
            trigger: ['change', 'blur']
          },
        }
      }
    },
    methods: {
      validate() {
        return new Promise((resolve, reject) => {
          this.$refs.residentsForm.validate().then(res => {
            if (res) resolve(true);
            else reject(false);
          })
        })
      },
      // 选择生日
      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: '', //是否补课
          lessons: '', //课程
          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>