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

<template>
  <view class="">
    <view class="data-from" v-for="item in carList">
      <en-input label="车辆品牌" type="text" placeholder="请输入车辆品牌" v-model="item.brand_id"
                v-if="verifyKey('brand_id')"></en-input>
      <en-radio label="车牌类型" :radio-data="carTypeData" v-model="item.car_type"
                v-if="verifyKey('car_type')"></en-radio>
      <en-input label="车牌号" type="text" placeholder="请输入车牌号" v-model="carItem.car_num"
                v-if="verifyKey('car_num')"></en-input>
      <en-input label="车架号" type="text" placeholder="请输入车架号" v-model="item.car_vin"
                v-if="verifyKey('car_vin')"></en-input>
      <en-input label="车辆颜色" type="text" placeholder="请输入车俩颜色" v-model="item.colour"
                v-if="verifyKey('colour')"></en-input>
      <en-input label="裸车价格" type="number" placeholder="请输入金额" v-model="item.car_price"
                v-if="verifyKey('car_price')" rightText="元"></en-input>
      <en-date label="登记时间" placeholder="选择车辆登记时间" v-model="item.register_date"
               v-if="verifyKey('register_date')"></en-date>
      <add-register img-type="2" v-model="item.register_img" @setCarData="setCarData" v-if="verifyKey('register_img')"></add-register>
      <add-register v-model="item.driving_img" @setCarData="setCarData" v-if="verifyKey('driving_img')"></add-register>
      <en-upload label="上传车辆相关图片" :imageWidth="180" v-model="item.car_img" v-if="verifyKey('car_img')"></en-upload>
      <en-input label="备注" type="text" placeholder="请输入备注信息" v-model="item.remark"
                v-if="verifyKey('remark')" :noBox="true"></en-input>
    </view>
    <en-blank message="暂无车辆信息,快来添加吧！" v-if="carList.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";
import AddRegister from "@/page_task/property/components/add-register.vue";

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

      }
    },
    'itemKey': {
      default: 0
    }
  },
  data() {
    return {
      carTypeData: [{'id': 1, 'name': '运营车'}, {'id': 2, 'name': '非运营车'}],
      carBrandData: [],
      carItem: {
        'car_type': '2',
        'brand_id': '',
        'car_num': '',
        'car_vin': '',
        'colour': '',
        'car_price': '',
        'register_date': '',
        'register_img': '',
        'driving_img': '',
        'car_img': [],
        'remark': '',
      },
      carList:[]
    }
  },
  watch: {
    'carList': {
      handler() {
        this.$emit("input", this.carList);
      },
      deep: true
    },
    'value': {
      handler() {
        if (this.value) {
          this.setValue()
        }
      },
      deep: true
    },
  },
  mounted() {
    this.getTaskOptions()
    this.setValue()
  },
  methods: {
    setCarData(carData){
      console.log('carData')
      console.log(this.carData)
      if(carData.car_num){
        this.carItem.car_num=carData.car_num
      }
      if(carData.car_vin){
        this.carItem.car_vin=carData.car_vin
      }
      if(carData.colour){
        this.carItem.colour=carData.colour
      }
      if(carData.register_date){
        this.carItem.register_date=carData.register_date
      }
      if(carData.car_type){
        this.carItem.car_type=carData.car_type
      }
      if(carData.brand_id){
        this.carItem.brand_id=carData.brand_id
      }
    },
    addItem(){
      this.carList.push(this.carItem)
    },
    setSendMd5() {
      let str = JSON.stringify(this.value)
      this.sendMd5=md5(JSON.stringify(this.carList))
      return md5(str)
    },
    setValue(){
      if (this.value) {
        let sendMd5 = this.setSendMd5()
        if (sendMd5 !== this.sendMd5) {
          this.carList=this.value
        }
      }
    },
    verifyKey(field) {
      return this.showKeys.indexOf(field) >= 0
    },
    async getTaskOptions() {
      const res = await getTaskOptions({'type':2})
      if (res.code === 1) {
        res.data.carBrand.forEach((val) => {
          this.carBrandData.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>