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

<template>
	<view class="">
		<view class="data-from" v-for="(item,index) in houseList">
			<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('property_owner')">
						<view class="text-color-666"><text></text>产权人：</view>
						<text class="flex">{{item.data.property_owner}}</text>
					</view>
					<view class="row p-t30" v-if="verifyKey('deed_num')">
						<view class="text-color-666"><text></text>房产证号：</view>
						<text class="flex">{{item.data.deed_num}}</text>
					</view>
					<view class="row p-t30" v-if="verifyKey('house_city')">
						<view class="text-color-666"><text></text>房产地址：</view>
						<text class="flex">{{item.data.house_city}}{{item.data.house_address}}</text>
					</view>
					<view class="row p-t30" v-if="verifyKey('house_use')">
						<view class="text-color-666"><text></text>房屋用途：</view>
						<text class="flex">{{getHouseUse(item.data.house_use)}}</text>
					</view>
					<view class="row p-t30" v-if="verifyKey('build_date')">
						<view class="text-color-666"><text></text>建成年份：</view>
						<text class="flex">{{item.data.covered_area}}</text>
					</view>
					<view class="row p-t30" v-if="verifyKey('is_pay')">
						<view class="text-color-666"><text></text>材料费：</view>
						<text class="flex">{{item.data.is_pay===1?'已支付':'未支付'}}</text>
					</view>
					<view class="row p-t30" v-if="verifyKey('covered_area')">
						<view class="text-color-666"><text></text>建筑面积：</view>
						<text class="flex">{{item.data.covered_area}}</text>
					</view>
					<view class="row p-t30" v-if="verifyKey('certificate_img')">
						<view class="text-color-666"><text></text>房产证件：</view>
						<EnImage :img="item.data.certificate_img" width="160rpx" height="160rpx"></EnImage>
					</view>
					<view class="row p-t30" v-if="verifyKey('property')">
						<view class="text-color-666"><text></text>房产证件：</view>
						<EnImage :img="item.data.property"></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.property_owner"
					v-if="verifyKey('property_owner')"></en-input>
				<en-input label="房产证号" v-model="item.data.deed_num" v-if="verifyKey('deed_num')" type="text"
					placeholder="请输入房产证号"></en-input>
				<en-city label="房产城市" v-model="item.data.house_city" v-if="verifyKey('house_city')"
					placeholder="请选择省、市、区"></en-city>
				<en-input label="房产地址" v-model="item.data.house_address" v-if="verifyKey('house_address')" type="text"
					placeholder="请输入房产详细地址"></en-input>
				<en-select label="房屋用途" v-model="item.data.house_use" v-if="verifyKey('house_use')"
					placeholder="请选择房屋用途" :local-data="houseTypeData"></en-select>
				<en-date label="建成年份" v-model="item.data.build_date" v-if="verifyKey('build_date')"
					placeholder="选择房屋建成年份"></en-date>
				<en-radio label="材料费" v-model="item.data.is_pay" v-if="verifyKey('is_pay')"
					:radio-data="payData"></en-radio>
				<en-input label="建筑面积" v-model="item.data.covered_area" v-if="verifyKey('covered_area')" type="digit"
					placeholder="请输入建筑面积" rightText="㎡"></en-input>
				<en-upload label="上传房产证件" v-model="item.data.certificate_img" v-if="verifyKey('certificate_img')"
					:imageWidth="180"></en-upload>
				<en-upload label="上传房产关联图片" v-model="item.data.property" v-if="verifyKey('property')"
					:imageWidth="180"></en-upload>
				<en-input label="备注" v-model="item.data.remark" v-if="verifyKey('remark')" type="text"
					placeholder="请输入备注信息" :noBox="true"></en-input>
			</view>
		</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 {
		getTaskOptions
	} from "@/api/task";
	import {
		getSn
	} from "@/api/common";
	import md5 from "js-md5";
	import tools from "@/service/tools";
	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 EnDate from "@/components/en-from/en-date/en-date.vue";
	import EnBlank from "@/components/en-utils/en-blank/en-blank.vue";
	import EnImage from "@/components/en-utils/en-image/en-image.vue";

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

				}
			},
			'itemKey': {
				default: 0
			}
		},
		data() {
			return {
				editIndex: 0,
				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);
					this.$emit('onResize')
				},
				deep: true
			},
			'value': {
				handler() {
					if (this.value) {
						this.setValue()
					}
				},
				deep: true
			},
		},
		mounted() {
			this.getTaskOptions()
			this.setValue()
		},
		methods: {
			getHouseUse(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.houseList.splice(itemKey, 1)
							this.editIndex = itemKey - 1
						}
					}
				})

			},
			onEditInfo(index) {
				this.editIndex = index
			},
			addHouse() {
				tools.showLoading()
				getSn().then((res) => {
					if (res.code === 1) {
						this.houseList.push({
							'property_type': 1,
							'property_sn': res.data,
							'data': JSON.parse(JSON.stringify(this.houseItem))
						})
						this.editIndex = this.houseList.length - 1
						this.$emit('onResize')
					} else {
						tools.error('编号生成失败')
					}
					tools.hideLoading()
				})

			},
			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>