assess-app/page_task/property/components/company.vue

<template>
  <view class="">
    <view class="data-from" v-for="item in insuranceList">
      <en-input label="保险公司" type="text" placeholder="请输入保险公司名称" v-model="item.insurance_name"
                v-if="verifyKey('insurance_name')"></en-input>
      <en-select label="保险类型" placeholder="请选择保险类型" v-model="item.insurance_type"
                 v-if="verifyKey('insurance_type')" :local-data="insuranceTypeData"></en-select>
      <en-input label="年交费额" type="number"  v-model="item.year_money"
                v-if="verifyKey('year_money')" placeholder="请输入年交费额" rightText="元"></en-input>
      <en-radio label="满足缴费情况" v-model="item.is_fees"
                v-if="verifyKey('is_fees')" :radio-data="payData"></en-radio>
      <en-date label="保单有效期" v-model="item.validity_date"
               v-if="verifyKey('validity_date')" item="选择保单有效期"></en-date>
      <en-upload label="上传保单相关图片" v-model="insuranceItem.insurance_img"
                 v-if="verifyKey('insurance_img')" :imageWidth="180"></en-upload>
      <en-input label="备注" v-model="item.remark"
                v-if="verifyKey('remark')" type="text" placeholder="请输入备注信息" :noBox="true"></en-input>
    </view>
    <en-blank message="暂无保单信息,快来添加吧！" v-if="insuranceList.length<=0"></en-blank>
    <button class="size-26 r-10 button-color house-button m-t30" hover-class="is-hover"
            @click="addItem">+添加保单</button>
  </view>
</template>

<script>
import enInput from "@/components/en-from/en-input/en-input.vue"
import EnCity from "@/components/en-from/en-city/en-city.vue";
import EnUpload from "@/components/en-from/en-upload/en-upload.vue";
import EnSelect from "@/components/en-from/en-select/en-select.vue";
import {getTaskOptions} from "@/api/task";
import md5 from "js-md5";
import EnDate from "@/components/en-from/en-date/en-date.vue";
import EnBlank from "@/components/en-utils/en-blank/en-blank.vue";

export default {
  name:'property-company',
  components: {
    EnBlank,
    EnDate,
    EnSelect,
    EnUpload,
    EnCity,
    enInput
  },
  props: {
    'showKeys': {
      default: []
    },
    'value': {
      default: {

      }
    },
    'itemKey': {
      default: 0
    }
  },
  data() {
    return {
      payData:[{'id':1,'name':'满足'},{'id':0,'name':'未足'}],
      insuranceTypeData:[],
      insuranceItem: {
        'insurance_name':'',
        'insurance_type':'',
        'year_money':'',
        'is_fees':'1',
        'validity_date':'',
        'insurance_img':[],
        'remark':'',
      },
      insuranceList:[]
    }
  },
  watch: {
    'insuranceList': {
      handler() {
        this.$emit("input", this.insuranceList);
      },
      deep: true
    },
    'value': {
      handler() {
        if (this.value) {
          this.setValue()
        }
      },
      deep: true
    },
  },
  mounted() {
    this.getTaskOptions()
    this.setValue()
  },
  methods: {
    addItem(){
      this.insuranceList.push(this.insuranceItem)
    },
    setSendMd5() {
      let str = JSON.stringify(this.value)
      this.sendMd5=md5(JSON.stringify(this.insuranceList))
      return md5(str)
    },
    setValue(){
      if (this.value) {
        let sendMd5 = this.setSendMd5()
        if (sendMd5 !== this.sendMd5) {
          this.insuranceList=this.value
        }
      }
    },
    verifyKey(field) {
      return this.showKeys.indexOf(field) >= 0
    },
    async getTaskOptions() {
      const res = await getTaskOptions({'type': 4})
      if (res.code === 1) {
        res.data.insuranceType.forEach((val) => {
          this.insuranceTypeData.push({'text': val.name, 'value': val.value})
        })
      }
    },
    delItem(){
      uni.showModal({
        title: '警告',
        content: '是否删除当前保单信息！',
        success: (res) => {
          if (res.confirm) {
            this.$emit('delItem',this.itemKey)
          }
        }
      });
    }
  }
}
</script>

<style>
.house-button {
  height: 70rpx;
  line-height: 70rpx;
  background: #FFFFFF;
  border: 1rpx solid #0FB160;
}
</style>