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

<template>
	<view class="">
		<view class="data-from" v-for="(item,index) in carList">
      <view class="p-t30" v-if="editIndex!==index">
        <view  class="sys-from-background-color p-20 r-20">
          <view class="row-justify-sb center">
            <text class="size-28 sys-weight-600">车辆信息({{index+1}})</text>
            <view class="row-c sys-background-fff r-100 p-lr40 p-tb10">
              <image class="wh-30"
                     src="/page_task/static/img/information/edit.png"
                     mode="aspectFill" @click="onEditInfo(index)"></image>
              <view class="title-line m-lr20"></view>
              <image class="wh-30"
                     src="/page_task/static/img/information/delete.png"
                     mode="aspectFill" @click="onDeleteInfo(index)">
              </image>
            </view>
          </view>
          <view class="row p-t30" v-if="verifyKey('brand_id')">
            <view class="text-color-666"><text></text>车辆品牌：</view>
            <text class="flex">{{getTypeText(item.data.brand_id,1)}}</text>
          </view>
          <view class="row p-t30" v-if="verifyKey('car_type')">
            <view class="text-color-666"><text></text>车牌类型：</view>
            <text class="flex">{{getTypeText(item.data.car_type,2)}}</text>
          </view>
          <view class="row p-t30" v-if="verifyKey('car_num')">
            <view class="text-color-666"><text></text>车牌号：</view>
            <text class="flex">{{item.data.car_num}}</text>
          </view>
          <view class="row p-t30" v-if="verifyKey('car_vin')">
            <view class="text-color-666"><text></text>车架号：</view>
            <text class="flex">{{item.data.car_vin}}</text>
          </view>
          <view class="row p-t30"  v-if="verifyKey('colour')">
            <view class="text-color-666"><text></text>车辆颜色：</view>
            <text class="flex">{{item.data.colour}}</text>
          </view>
          <view class="row p-t30" v-if="verifyKey('car_price')">
            <view class="text-color-666"><text></text>裸车价格：</view>
            <text class="flex">{{item.data.car_price}}</text>
          </view>
          <view class="row p-t30" v-if="verifyKey('register_date')">
            <view class="text-color-666"><text></text>登记时间：</view>
            <text class="flex">{{item.data.register_date}}</text>
          </view>
          <view class="row p-t30" v-if="verifyKey('register_img')">
            <view class="text-color-666"><text></text>登记证书：</view>
            <EnImage :img="item.data.register_img"></EnImage>
          </view>
          <view class="row p-t30" v-if="verifyKey('driving_img')">
            <view class="text-color-666"><text></text>行驶证：</view>
            <EnImage :img="item.data.driving_img"></EnImage>
          </view>
          <view class="row p-t30" v-if="verifyKey('car_img')">
            <view class="text-color-666"><text></text>辆相关图片：</view>
            <EnImage :img="item.data.car_img"></EnImage>
          </view>
          <view class="row p-t30">
            <view class="text-color-666"><text></text>备注：</view>
            <text class="flex">{{item.data.remark}}</text>
          </view>
        </view>
      </view>
      <view class="p-t30" v-else>
        <view class="row-justify-sb center p-b10">
          <text class="size-28 sys-weight-600">房产信息({{index+1}})</text>
          <view class="row-c sys-background-fff r-100">
            <image class="wh-30"
                   src="/page_task/static/img/information/delete.png"
                   mode="aspectFill" @click="onDeleteInfo(index)">
            </image>
          </view>
        </view>
        <en-input label="车辆品牌" type="text" placeholder="请输入车辆品牌" v-model="item.data.brand_id"
                  v-if="verifyKey('brand_id')"></en-input>
        <en-radio label="车牌类型" :radio-data="carTypeData" v-model="item.data.car_type"
                  v-if="verifyKey('car_type')"></en-radio>
        <en-input label="车牌号" type="text" placeholder="请输入车牌号" v-model="item.data.car_num"
                  v-if="verifyKey('car_num')"></en-input>
        <en-input label="车架号" type="text" placeholder="请输入车架号" v-model="item.data.car_vin"
                  v-if="verifyKey('car_vin')"></en-input>
        <en-input label="车辆颜色" type="text" placeholder="请输入车俩颜色" v-model="item.data.colour"
                  v-if="verifyKey('colour')"></en-input>
        <en-input label="裸车价格" type="number" placeholder="请输入金额" v-model="item.data.car_price"
                  v-if="verifyKey('car_price')" rightText="元"></en-input>
        <en-date label="登记时间" placeholder="选择车辆登记时间" v-model="item.data.register_date"
                 v-if="verifyKey('register_date')"></en-date>
        <add-register img-type="2" v-model="item.data.register_img" @setCarData="setCarData"
                      v-if="verifyKey('register_img')"></add-register>
        <add-register v-model="item.data.driving_img" @setCarData="setCarData"
                      v-if="verifyKey('driving_img')"></add-register>
        <en-upload label="上传车辆相关图片" :imageWidth="180" v-model="item.data.car_img"
                   v-if="verifyKey('car_img')"></en-upload>
        <en-input label="备注" type="text" placeholder="请输入备注信息" v-model="item.data.remark" v-if="verifyKey('remark')"
                  :noBox="true"></en-input>
      </view>
    </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";
import tools from "@/service/tools";
import {
  getSn
} from "@/api/common";
import EnImage from "@/components/en-utils/en-image/en-image.vue";

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

				}
			},
			'itemKey': {
				default: 0
			}
		},
		data() {
			return {
        editIndex:0,
				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: {
      getTypeText(val){
        val=val*1
        for (const typeKey in   this.houseTypeData) {
          if(val===this.houseTypeData[typeKey].value){
            return this.houseTypeData[typeKey].text
          }
        }

      },
      onDeleteInfo(itemKey) {
        uni.showModal({
          title: '是否删除当前资产信息',
          content: '确定删除?',
          success: (res) => {
            if (res.confirm) {
              this.carList.splice(itemKey, 1)
              this.editIndex = itemKey-1
            }
          }
        })

      },
      onEditInfo(index){
        this.editIndex = index
      },
			setCarData(carData) {
				console.log('carData')
				console.log(this.carData)
				// if(carData.car_num){
				//   this.caritem.data.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() {
				tools.showLoading()
				getSn().then((res) => {
					if (res.code === 1) {
						this.carList.push({
							'property_type': 2,
							'property_sn': res.data,
							'data': JSON.parse(JSON.stringify(this.carItem))
						})
            this.editIndex = this.carList.length-1
						this.$emit('onResize')
					} else {
						tools.error('编号生成失败')
					}
					tools.hideLoading()
				})
			},
			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>