CZC/operationSupport/src/views/ownerManagement/ownerReview/toExamine.vue

<template>
  <div class="main">
    <div></div>
    <div class="formContent">
      <div class="formContent-item">
        <div class="formContent-item_title">基础信息</div>
        <div class="formContent-formList">
          <zz-form
            :cols="formCols"
            :data="formData"
            :rules="formRules"
            :errors="formErrors"
            labelWidth="70"
            ref="form"
          >
            <!-- 查看审核 -->
            <template>
              <template slot="name">{{ formData.name || '--' }}</template>
              <template slot="phone">{{ formData.phone || '--' }}</template>
              <template slot="personnelNumber">{{ formData.personnelNumber || '--' }}</template>
              <template
                slot="sex"
                v-if="formData.sex === 0"
              >未知</template>
              <template
                slot="sex"
                v-else
              >{{ formData.sex === 1 ? '男' : '女' }}</template>
              <template slot="remarks">{{ formData.remarks || '--' }}</template>
            </template>
          </zz-form>

          <template>
            <div class="clickUpload">
              <div class="clickUpText">
                <img
                  class="dataImg"
                  v-if="!!formData.facePictureUrl"
                  :src="formData.facePictureUrl"
                />
                <template v-else>
                  <img
                    class="bg-img"
                    src="@/assets/img/ownerManagement/img_zhaopian2@2x.png"
                    alt=""
                  />
                  <div>无人脸图片</div>
                </template>
              </div>
            </div>
          </template>
        </div>
      </div>

      <div class="formContent-item">
        <div class="formContent-item_title">证件信息</div>
        <zz-form
          :cols="formCols2"
          :data="formData"
          :errors="formErrors"
          labelWidth="70"
        >
          <!-- 查看审核 -->
          <template>
            <template slot="idType">{{ formData.idType | matchingVal(idTypeArray) }}</template>
            <template slot="idNumber">{{ formData.idNumber || '--' }}</template>
            <template slot="permanentAddress">{{ formData.permanentAddress  || '--' }}</template>
            <template slot="issuingAuthority">{{ formData.issuingAuthority || '--' }}</template>
            <template slot="effectiveDate">{{
                            !!formData.effectiveDateStart ? formData.effectiveDateStart + '  ——  ' + formData.effectiveDateStart : '--'
                        }}</template>
            <template slot="nationality">{{ formData.nationality | matchingVal(nationalityArray) }}</template>
            <template slot="nativePlace">{{ formData.nativePlace | matchingVal(nativePlaceArray) }}</template>
            <template slot="nation">{{ formData.nation | matchingVal(nationArray) }}</template>
            <template slot="birthDate">{{ formData.birthDate }}</template>
          </template>
        </zz-form>
      </div>

      <div class="formContent-item">
        <div class="formContent-item_title"><span class="show-required-icon-star"></span> 绑定房产和车位</div>
        <div
          class="formContent-formList house"
          v-for="(item, index) in formData.houseList"
          :key="index"
        >
          <div class="block-title">
            <div class="floor list-title">
              {{ `${item.buildingName} ${!!item.unitName ? CheckChinese(item.unitName, '单元') : ''}${item.roomNumber}` }}
            </div>
            <img
              class="bg-img"
              src="@/assets/img/ownerManagement/bg_card@2x.png"
              alt=""
            />
            <img
              class="bg-imgIoc"
              src="@/assets/img/ownerManagement/icon_building@2x.png"
              alt=""
            />
          </div>

          <zz-form
            :cols="formCols3"
            :data="item"
            :rules="formRules"
            :errors="formErrors"
            labelWidth="70"
          >
            <!-- 查看审核 -->
            <template>
              <template slot="householdType">{{ item.householdType | matchingVal(householdTypeArray) }}</template>
              <template slot="checkInDate">{{ item.checkInDate || '--' }}</template>
            </template>
          </zz-form>

          <div
            class="block-title car"
            v-for="(items, indexs) in item.parkingList"
            :key="indexs"
          >
            <div class="floor list-title">
              {{ `${items.garageName}${items.areaName || items.partitionName || ''}-${items.parkingNumber}` }}
            </div>
            <img
              class="bg-img"
              src="@/assets/img/ownerManagement/bg_card@2x.png"
              alt=""
            />
            <img
              class="bg-imgIoc"
              src="@/assets/img/ownerManagement/icon_car@2x.png"
              alt=""
            />
          </div>
        </div>
      </div>
    </div>

    <div class="buttons">
      <el-button @click="closes">取消</el-button>
      <el-button
        type="primary"
        @click="passOK(2)"
      >审核不通过</el-button>
      <el-button
        type="primary"
        @click="passOK(1)"
      >审核通过</el-button>
    </div>
  </div>
</template>
<script>
export default {
  name: 'toExamine',
  props: {
    params: {
      type: Object
    },
    islook: {
      type: Boolean,
      default: false
    },
    isAdd: {
      type: Boolean,
      default: true
    }
  },
  filters: {
    matchingVal (val, arr) {
      let v = '--';
      if (!!val) {
        arr.forEach((item) => {
          if (!!item.status && item.status === val) {
            v = item.label;
          } else if (!!item.code && item.code === val) {
            v = item.name;
          }
        });
      }
      return v;
    }
  },
  data () {
    return {
      formData: {
        name: '',
        phone: '',
        personnelNumber: '',
        sex: 0,
        remarks: '',
        facePictureUrl: '',
        id: 0,
        idType: '',
        idNumber: '',
        permanentAddress: '',
        issuingAuthority: '',
        effectiveDateStart: '',
        effectiveDateEnd: '',
        nationality: 1,
        nativePlace: '',
        nation: '',
        birthDate: '',
        houseList: []
      },
      formCols: [
        [
          {
            label: '姓名',
            prop: 'name',
            slot: 'name'
          },
          {
            label: '手机号',
            prop: 'phone',
            slot: 'phone'
          },
          {
            label: '人员编号',
            prop: 'personnelNumber',
            slot: 'personnelNumber'
          },
          {
            label: '性别',
            prop: 'sex',
            slot: 'sex'
          },
          {
            label: '备注',
            prop: 'remarks',
            slot: 'remarks'
          }
        ]
      ],
      formCols2: [
        [
          {
            label: '证件类型',
            prop: 'idType',
            slot: 'idType'
          },
          {
            label: '证件号码',
            prop: 'idNumber',
            slot: 'idNumber'
          },
          {
            label: '户籍地址',
            prop: 'permanentAddress',
            slot: 'permanentAddress'
          },
          {
            label: '签发机关',
            prop: 'issuingAuthority',
            slot: 'issuingAuthority'
          },
          {
            label: '有效期',
            prop: 'effectiveDate',
            slot: 'effectiveDate'
          },
          {
            label: '国籍',
            prop: 'nationality',
            slot: 'nationality'
          },
          {
            label: '籍贯',
            prop: 'nativePlace',
            slot: 'nativePlace'
          },
          {
            label: '民族',
            prop: 'nation',
            slot: 'nation'
          },
          {
            label: '出生日期',
            prop: 'birthDate',
            slot: 'birthDate'
          }
        ]
      ],
      formCols3: [
        [
          {
            label: '类型',
            prop: 'householdType',
            slot: 'householdType',
            showRequired: true
          },
          {
            label: '入住时间',
            prop: 'checkInDate',
            slot: 'checkInDate'
          }
        ]
      ],
      nationalityArray: [
        {
          status: 1,
          label: '中国'
        },
        {
          status: 2,
          label: '其他'
        }
      ],
      idTypeArray: [
        {
          status: 1,
          label: '居民身份证'
        },
        {
          status: 2,
          label: '居民户口簿'
        },
        {
          status: 3,
          label: '暂住证'
        },
        {
          status: 4,
          label: '其他'
        }
      ],
      householdTypeArray: [
        {
          status: 1,
          label: '业主'
        },
        {
          status: 2,
          label: '亲属'
        },
        {
          status: 3,
          label: '租客'
        }, {
          status: 4,
          label: '承租人'
        }
      ],
      formRules: {
        name: [this.$valid.selectRequired('填写姓名')],
        phone: [this.$valid.selectRequired('填写手机号')],
        householdType: [this.$valid.selectRequired('填写类型')]
      }
    };
  },
  created () {
    this.$store.dispatch('collapse', true);

    if (!!this.params.id) {
      this.getDetails(this.params.id);
    } else {
      if (this.$parent.thisLeftData.type == 'room') {

        this.formData.houseList = [
          {
            checkInDate: '',
            householdType: 1,
            buildingName: this.$parent.thisLeftData.buildingName,
            unitName: this.$parent.thisLeftData.unitName,
            roomNumber: this.$parent.thisLeftData.houseName,
            houseId: this.$parent.thisLeftData.houseId,
            parkingList: []
          }
        ];
      }
    }
  },
  beforeDestroy () {
    this.$store.dispatch('collapse', false);
  },
  computed: {
    nationArray () {
      return this.$store.getters['getNationArray'];
    },
    nativePlaceArray () {
      return this.$store.getters['getNativeArray'];
    },
    islooks () {
      if (this.islook) {
        this.lookFormCols('formCols');
        this.lookFormCols('formCols2');
        this.lookFormCols('formCols3');
      }
      return this.islook;
    }
  },
  methods: {
    getDetails (id) {

      let url = '/czc-community/scResident/audit/find/' + id;
      this.$http.get(url).then(({ data, status, msg }) => {
        if (0 === status) {
          let { effectiveDateStart, effectiveDateEnd } = data;
          if (effectiveDateStart == null || effectiveDateEnd == null) {
            effectiveDateStart = '';
            effectiveDateEnd = '';
          }
          this.formData = data;
        } else {
          this.$message.error(msg);
        }
      })
        .catch(() => { });
    },
    lookFormCols (cols) {
      this[cols][0].forEach((item, index) => {
        if (!!item.input) {
          item.input = false;
        }
      });
    },
    closes () {
      this.$emit('clerOwnerStatus');
    },
    passOK (status) {
      this.$http
        .get('/czc-community/scResident/audit', { id: this.params.id, auditStatus: status })
        .then(({ status, msg }) => {
          if (0 === status) {
            this.$message.success(msg);
            this.closes();
          } else {
            this.$message.error(msg);
          }
        })
        .catch(() => { });
    },
    dimension (arr) {
      arr.map((item, index) => {
        if (!!item.children) {
          this.dimension(item.children);
          if (item.type == 'unit') {
            item.name = this.CheckChinese(item.name, '单元');
          } else if (item.type == 'building') {
            item.name = this.CheckChinese(item.name, '楼栋');
          }
        }
      });
    },
    CheckChinese (val, name) {
      var reg = new RegExp('[\\u4E00-\\u9FFF]+', 'g');
      let newVal = val;
      if (!reg.test(val)) {
        newVal = val + name;
      }
      return newVal;
    }
  }
};
</script>
<style lang='scss' scoped >
@import '../style.scss';
.addHouse {
    cursor: pointer;
    img.add {
        margin-left: 20px;
        width: 13px;
    }
}

.formContent .formContent-item .block-title.car {
    margin-bottom: 20px;
}
.formContent-formList.house {
    flex-wrap: wrap;
    &::after {
        content: '';
        width: 100%;
        height: 1px;
        background: #e0e1e3;
        margin-bottom: 20px;
    }
    .el-form {
        width: calc(100% - 220px);
        /deep/ .el-date-editor.el-input {
            width: 100%;
        }
    }
}
.removeHouseButton {
    width: 80px;
    height: 32px;
    margin-bottom: 20px;
}
</style>