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

<template>
	<view class="">
    <view class="data-from" v-for="item in houseList">
      <en-input label="产权人" type="text" placeholder="请输入产权人" v-model="item.property_owner" v-if="verifyKey('property_owner')"></en-input>
      <en-input label="房产证号" v-model="item.deed_num" v-if="verifyKey('deed_num')" type="text" placeholder="请输入房产证号"></en-input>
      <en-city label="房产城市" v-model="item.house_city" v-if="verifyKey('house_city')"  placeholder="请选择省、市、区"></en-city>
      <en-input label="房产地址" v-model="item.house_address" v-if="verifyKey('house_address')" type="text" placeholder="请输入房产详细地址"></en-input>
      <en-select label="房屋用途"  v-model="item.house_use" v-if="verifyKey('house_use')" placeholder="请选择房屋用途" :local-data="houseTypeData" ></en-select>
      <en-date label="建成年份" v-model="item.build_date" v-if="verifyKey('build_date')" placeholder="选择房屋建成年份"></en-date>
      <en-radio label="材料费" v-model="item.is_pay" v-if="verifyKey('is_pay')" :radio-data="payData"></en-radio>
      <en-input label="建筑面积" v-model="item.covered_area" v-if="verifyKey('covered_area')" type="digit" placeholder="请输入建筑面积" rightText="㎡"></en-input>
      <en-upload label="上传房产证件" v-model="item.certificate_img" v-if="verifyKey('certificate_img')" :imageWidth="180"></en-upload>
      <en-upload label="上传房产关联图片" v-model="item.property" v-if="verifyKey('property')" :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="houseList.length<=0"></en-blank>
		<button class="size-26 r-10 button-color house-button m-t30" hover-class="is-hover"
			@click="addHouse">+添加房产</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 {
		components: {
      EnBlank,
      EnDate,
      EnSelect,
      EnUpload,
      EnCity,
      enInput
		},
    props: {
      'showKeys': {
        default: []
      },
      'value': {
        default: {

        }
      },
      'itemKey': {
        default: 0
      }
    },
		data() {
			return {
        payData:[{'id':1,'name':'已支付'},{'id':2,'name':'未支付'}],
        houseTypeData:[],
        houseItem:{
          'property_owner':'',
          'deed_num':'',
          'house_city':'',
          'house_address':'',
          'house_use':'',
          'build_date':'',
          'is_pay':'',
          'covered_area':'',
          'certificate_img':[],
          'property':[],
          'remark':'',
        },
        houseList:[]
      }
		},
    watch: {
      'houseList': {
        handler() {
          this.$emit("input", this.houseList);
        },
        deep: true
      },
      'value': {
        handler() {
          console.log('houseItem:', this.value)
          if (this.value) {
            this.setValue()
          }
        },
        deep: true
      },
    },
    mounted() {
      this.getTaskOptions()
      this.setValue()
    },
		methods: {
      addHouse(){
        this.houseList.push(this.houseItem)
      },
      setSendMd5() {
        let str = JSON.stringify(this.value)
        this.sendMd5=md5(JSON.stringify(this.houseList))
        return md5(str)
      },
      setValue(){
        if (this.value) {
          let sendMd5 = this.setSendMd5()
          if (sendMd5 !== this.sendMd5) {
            this.houseList=this.value
          }
        }
      },
      verifyKey(field) {
        return this.showKeys.indexOf(field) >= 0
      },
      async getTaskOptions() {
        const res = await getTaskOptions({'type':3})
        if (res.code === 1) {
          res.data.houseTypeArr.forEach((val)=>{
            this.houseTypeData.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>