zd_wechatApp/pages/statistics/historyDetails.vue

<template>
	<view>
		<view class="uni-media-list">
			<view class="uni-media-list-body">
				<view v-for="(value, key) in dataJson.zEngineeringNodeBo.zEngineeringInfoBoList" :key="key"
					v-if="isEdit(value)">
					<view class="uni-media-list-text-top">
						<view class="tit-text">施工时间:</view>{{value.updateTime}}
					</view>
					<view v-for="(user,index) in newPhone" :key="index">
						<view class="uni-media-list-text-top" style="border-bottom: 1px solid #f8f8f8;">
							<view class="tit-text">现住人电话:</view>
							<view>
								{{user.phone}}
							</view>
						</view>
						</view>
						<view class="uni-media-list-text-top" v-if="title=='拆旧管'">
							<view class="tit-text">腐蚀等级:</view>
							<view @click="pickerShow('fsdj',key)">
								{{getSelectName(value.zEngineeringMaterialBo[0].corrosionLevel)}}
							</view>
						</view>
						<view class="uni-media-list-text-top" v-if="title=='打孔'">
							<view class="tit-text">孔距:</view>
							<view @click="pickerShow('kj',key)">
								<!-- 123 -->
								{{getSelectName(value.zEngineeringMaterialBo[0].corrosionLevel)}}
							</view>
						</view>
						<view class="uni-media-list-text-top" v-if="title=='挂表'">
							<view class="tit-text">品牌:</view>
							<view @click="pickerShow('brand',key)">
								{{getSelectName(value.zEngineeringMaterialBo[0].brand)}}
							</view>
						</view>
						<view class="uni-media-list-text-top" v-if="title=='切断阀'||title=='报警器'">
							<view class="tit-text">厂家:</view>
							<view @click="pickerShow('brand',key)">
								{{getSelectName(value.zEngineeringMaterialBo[0].brand)}}
							</view>
						</view>
						<view class="" v-if="title=='立杠'||title=='表后管'">
							<view class="uni-media-list-text-top" style="border-bottom: 1px solid #f8f8f8;">

								<view class="tit-text">
									材 质
								</view>

								<view class="uni-list-cell-db" style="margin-top: 10;" @click="pickerShow('cz',key)">
									<span
										style="color: black;">{{value.zEngineeringMaterialBo[0].materialQualityName}}</span>

								</view>
							</view>
							<view class="uni-media-list-text-top" style="border-bottom: 1px solid #f8f8f8;">

								<view class="tit-text">
									规 格
								</view>

								<view class="uni-list-cell-db" style="margin-top: 10;" @click="pickerShow('gg',key)">
									<span
										style="color: black;">{{value.zEngineeringMaterialBo[0].specificationsName==''?'请选择规格':value.zEngineeringMaterialBo[0].specificationsName}}</span>

								</view>
							</view>
							<view class="uni-media-list-text-top" style="border-bottom: 1px solid #f8f8f8;">
								<text class="tit-text">米 数</text>
								<view style="display: flex; justify-content: right; width: 70%;">
									<input class="uni-input" type="number"
										:value="getIntegerPart(value.zEngineeringMaterialBo[0].number,0)"
										@change="setInfoBoNumber(key,$event.target.value,0)" maxlength="6"
										style="text-align: center; border: 1px solid #00aaff; border-radius: 20rpx;"></input>
									<text style="font-weight:bold;margin-left: 10px;margin-right: 10px;">.</text>

									<input class="uni-input" type="number"
										:value="getIntegerPart(value.zEngineeringMaterialBo[0].number,1)"
										@change="setInfoBoNumber(key,$event.target.value,1)" maxlength="1"
										style="text-align: center; border: 1px solid #00aaff; border-radius: 20rpx;"></input>
								</view>
							</view>
						</view>

						<view class="uni-list" style="margin-bottom: 20px;" v-if="title=='阀管'">

							<view class="uni-media-list-text-top" style="border-bottom: 1px solid #f8f8f8;">

								<view>
									上门类型
								</view>

								<view class="uni-list-cell-db" style="margin-top: 10;" @click="pickerShow('door',key)">
									<span style="color: black;">{{value.zEngineeringMaterialBo[0].visitType}}</span>

								</view>
							</view>
							<view class="uni-media-list-text-top" style="border-bottom: 1px solid #f8f8f8;">

								<view>
									自闭阀厂家
								</view>

								<view class="uni-list-cell-db" style="margin-top: 10;" @click="pickerShow('zbf',key)">
									<span
										style="color: black;">{{getSelectZBFName(value.zEngineeringMaterialBo[0].selfClosingValveType)}}</span>

								</view>
							</view>
							<view class="uni-media-list-text-top" style="border-bottom: 1px solid #f8f8f8;">

								<view>
									灶具管厂家
								</view>

								<view class="uni-list-cell-db" style="margin-top: 10;" @click="pickerShow('cz',key)">
									<span
										style="color: black;">{{value.zEngineeringMaterialBo[0].materialQualityName}}</span>

								</view>
							</view>
							<view class="uni-media-list-text-top" style="border-bottom: 1px solid #f8f8f8;">

								<view>
									规 格
								</view>

								<view class="uni-list-cell-db" style="margin-top: 10;" @click="pickerShow('gg',key)">
									<span
										style="color: black;">{{value.zEngineeringMaterialBo[0].specificationsName==''?'请选择规格':value.zEngineeringMaterialBo[0].specificationsName}}</span>

								</view>
							</view>
						</view>

						<view class="" style="display: flex; flex-wrap: wrap;margin-top: 10px; margin-left: 10px;">
							<image :src="loadImgSrc('updateimg.png')" mode=""
								style="width: 200rpx; height: 150rpx; margin: 0 12rpx;; " @click="choose(key)">
							</image>
							<view v-for="(item,index) in  value.zEngiineeringPhotoBoList" :key="index"
								style="position: relative;">
								<view
									v-if="item.substring(item.length - 3) == 'png' || item.substring(item.length - 3) == 'jpg'||item.substring(item.length-4)=='jpeg' ">
									<image :src="item" mode="" style="width: 100rpx; height: 100rpx; margin: 0 12rpx;"
										@click="showPhoto(index,value.zEngiineeringPhotoBoList)">
									</image>
								</view>
								<view v-else>
									<video :src="item" style="width: 100rpx; height: 100rpx; margin: 0 12rpx;"></video>
								</view>
								<view @click="remove(index,key)"
									style="position: absolute; top: 0; right: 14rpx; border-radius: 50%;">
									<image :src="loadImgSrc('icon_close.png')" style=" width: 15px; height: 15px;">
									</image>
								</view>
							</view>
						</view>
						<!-- </view> -->
					</view>
				</view>
			</view>
			<SelectPicker :list="selectList" @change="changeSelect" v-if="open" @close="close" titleKey="name"
				subtitleKey="id">
			</SelectPicker>
			<SelectPicker :list="dictOptions" @change="changeSelectDict" v-if="openDict" @close="closeDict"
				titleKey="dictLabel" subtitleKey="dictValue" v-model="name"></SelectPicker>
			<view class="action-btn" v-if="hideButton==false">
				<button @click="submit" class="btn cu-btn block bg-blue lg round">确认</button>
			</view>
		</view>
</template>

<script>
	import SelectPicker from '../../components/selectPicker/select_picker.vue'
	import {
		getDicts
	} from "@/api/system/dict/data";
	import {
		getToken
	} from '../../utils/auth';
	import user from '@/store/modules/user'
	import {
		getHistoryDetails,
		getEnginMaterialQualityList,
		putHistory,
		getEnginSpecificationsList,
		getRoomDetails,
	} from '@/api/common'
	export default {
		components: {
			SelectPicker,
		},
		data() {
			return {
				selectZbfList: [],
				dictOptions: [],
				openDict: false,
				dataIndex: 0, //数据用第几条
				imageIndex: 0,
				headers: {
					Authorization: "Bearer " + getToken()
				},
				nodeId: '',
				type: '',
				title: '',
				dataJson: '',
				enginClassification: '',
				enginType: '',
				enginClassValue: '',
				selectList: [],
				open: false,
				chooseType: '',
				hideButton: false,
				roomId: '',
				newPhone: []
			}
		},
		onLoad(options) {
			if ('params' in options) {
				let e = JSON.parse(decodeURIComponent(options.params));
				this.nodeId = e.id;
				this.type = e.type;
				this.roomId = e.roomId;
				console.log(this.roomId);
				this.newPhone = [];
				getRoomDetails(e.roomId).then(response => {
						if (!this.isEmpty(response.data.newPhone)) {
							let str = response.data.newPhone;
							var array = str.split(",");
							array.forEach((list) => {
								this.newPhone.push({
									phone: list
								})
							})
						}

					}),
					getHistoryDetails(this.nodeId, this.type).then(response => {
						if (response.data.zEngineeringNodeBo != null) {
							this.hideButton = false;
							// if (response.data.zEngineeringNodeBo.createBy == this.$user.state.name) {
							// 	this.hideButton = false;
							// } else {
							// 	this.hideButton = true;
							// }

							this.dataJson = response.data;
							this.title = response.data.zEngineeringNodeBo.type;
							console.log("===", this.dataJson.zEngineeringNodeBo.zEngineeringInfoBoList);
							this.enginType = response.data.enginType;
							this.enginClassification = response.data.enginClassification;
							if (this.type == '阀管') {
								getEnginMaterialQualityList("民用工程", this.enginType, this.enginClassification, this
										.title,
										'自闭阀厂家')
									.then(
										response => {
											this.selectZbfList = response.data;
											this.selectList = this.selectZbfList;
										});
							} else {

								this.getFSDJLevel();
							}
						} else {
							this.hideButton = true;
							this.$modal.msg("暂无历史信息")
						}
					});

			}
		},
		methods: {
			//关闭弹窗
			closeDict(e) {
				this.openDict = false
			},
			remove(index, key) {
				uni.showModal({
					title: '提示',
					content: '是否删除该图片或视频？',
					success: (res) => {
						if (res.confirm) {

							this.dataJson.zEngineeringNodeBo
								.zEngineeringInfoBoList[key]
								.zEngiineeringPhotoBoList.splice(index, 1)

						}
					}
				})
			},
			choose(index1, index) {
				this.dataIndex = index1;
				let _this = this;
				uni.showActionSheet({
					title: '上传',
					itemList: ['图片', '视频'],
					success: (res) => {
						if (res.tapIndex == 0) {
							this.chooseimage()
						} else {
							this.choosevideo()
						}
					}
				})
			},
			chooseimage() {

				let _this = this;
				uni.chooseImage({
					sizeType: ['album', 'camera'],
					success(resp) {
						resp.tempFiles.forEach((item, index) => {
							const task = uni.uploadFile({
								url: _this.$HTTP + `/obs`,
								filePath: item.path,
								name: 'file',
								formData: {},
								header: _this.headers,

								success: res => {
									let data = JSON.parse(res.data);
									if (![200].includes(data.code)) {
										_this.$modal.msg(data.msg)
									} else {
										if (_this.progress === 100) {

											_this.dataJson.zEngineeringNodeBo
												.zEngineeringInfoBoList[_this.dataIndex]
												.zEngiineeringPhotoBoList.push(data.data.url);
											_this.$modal.msg('上传成功！')
											_this.photo = false;
										}
									}
								},
								fail: e => {
									_this.$modal.msg('上传失败！')
								},
								complete: res => {
									uni.hideLoading();
									_this.uploading = false;

								}
							});
							task.onProgressUpdate(res => {
								_this.progress = res.progress;
								uni.showLoading({
									title: '上传中'
								})
								if (_this.progress != 100) {
									_this.loading = false
								} else {
									_this.loading = true
								}
							});

						})

					},
				})
			},

			choosevideo() {
				let _this = this;
				uni.chooseVideo({
					sourceType: ['album', 'camera'],
					maxDuration: 30,
					success(resp) {
						const task = uni.uploadFile({
							url: _this.$HTTP + `/obs`,
							filePath: resp.tempFilePath,
							name: 'file',
							formData: {},
							header: _this.headers,
							success: res => {
								let data = JSON.parse(res.data);
								if (![200].includes(res.statusCode)) {
									this.uploadError(index, data);
								} else {
									//上传成功
									if (_this.progress === 100) {
										_this.dataJson.zEngineeringNodeBo
											.zEngineeringInfoBoList[_this.dataIndex]
											.zEngiineeringPhotoBoList.push(data.data.url);
										_this.$modal.msg('上传成功！')
										_this.photo = false;
									}
								}
							},
							fail: e => {
								_this.$modal.msg('上传失败！')
								this.uploadError(index, e);
							},
							complete: res => {
								uni.hideLoading();
								_this.uploading = false;
							}
						});
						task.onProgressUpdate(res => {
							_this.progress = res.progress;
							uni.showLoading({
								title: '上传中'
							})
							if (_this.progress != 100) {
								_this.loading = false
							} else {
								_this.loading = true
							}
						});

					},
				})
			},
			showPhoto(index, arr) {
				uni.previewImage({
					current: index,
					urls: arr,
				})

			},
			//关闭弹窗
			close(e) {
				this.open = false
			},

			// 截取小数点前的字符串
			getIntegerPart(numStr, i) {
				return numStr.toString().split('.')[i] == undefined ? '0' : numStr.toString().split('.')[i];
			},
			setInfoBoNumber(key, number, i) {
				let Ynumber = this.dataJson.zEngineeringNodeBo.zEngineeringInfoBoList[key].zEngineeringMaterialBo[0]
					.number;
				let resAry = Ynumber.toString().split('.');
				resAry[i] = number
				this.dataJson.zEngineeringNodeBo.zEngineeringInfoBoList[key].zEngineeringMaterialBo[0].number = resAry
					.join('.');
			},
			changeSelectDict(item, index) {
				this.openDict = false;
				if (this.chooseType == 'door') {
					this.dataJson.zEngineeringNodeBo.zEngineeringInfoBoList[this.dataIndex].zEngineeringMaterialBo[0]
						.visitType = item.dictValue;

				}
			},
			pickerShow(e, index) {
				this.dataIndex = index;
				this.chooseType = e;


				if (e == 'door') {
					this.openDict = true;
					getDicts("visit_type").then(response => {
						this.dictOptions = response.data;
					});
				}
				if (e == 'brand') {
					this.open = true;
					this.getFSDJLevel();
				}
				if (e == 'kj') {
					this.open = true;
					this.getFSDJLevel();
				}
				if (e == 'zbf') {
					this.open = true;
					getEnginMaterialQualityList("民用工程", this.enginType, this.enginClassification, this.title, '自闭阀厂家')
						.then(
							response => {
								this.selectZbfList = response.data;
								this.selectList = this.selectZbfList;
							});
				}
				if (e == 'fsdj') {
					this.open = true;
					this.getFSDJLevel();
				}
				if (e == 'cz') {
					this.open = true;

					if (this.type == '阀管') {
						getEnginMaterialQualityList("民用工程", this.enginType, this.enginClassification, this.title, "灶具管厂家")
							.then(response => {
								this.selectList = response.data;
							});
					} else {
						this.getFSDJLevel();
					}



				}
				if (e == 'gg') {
					this.open = true;
					//根据材质ID 获取规格数据
					getEnginSpecificationsList(this.dataJson.zEngineeringNodeBo.zEngineeringInfoBoList[this.dataIndex]
						.zEngineeringMaterialBo[0]
						.materialQuality).then(res => {
						this.selectList = res.data
					})
				}


			},
			isEmpty(str) {

				return (!str || 0 === str.length);

			},
			changeSelect(item, index) {
				this.open = false;
				if (this.chooseType == 'fsdj' || this.chooseType == 'kj') {
					this.dataJson.zEngineeringNodeBo.zEngineeringInfoBoList[this.dataIndex].zEngineeringMaterialBo[0]
						.corrosionLevel = item.id;
				} else if (this.chooseType == 'cz') {
					this.dataJson.zEngineeringNodeBo.zEngineeringInfoBoList[this.dataIndex].zEngineeringMaterialBo[0]
						.materialQuality = item.id;
					this.dataJson.zEngineeringNodeBo.zEngineeringInfoBoList[this.dataIndex].zEngineeringMaterialBo[0]
						.materialQualityName = item.name;
					this.dataJson.zEngineeringNodeBo.zEngineeringInfoBoList[this.dataIndex].zEngineeringMaterialBo[0]
						.specifications = '';
					this.dataJson.zEngineeringNodeBo.zEngineeringInfoBoList[this.dataIndex].zEngineeringMaterialBo[0]
						.specificationsName = '';


				} else if (this.chooseType == 'gg') {
					this.dataJson.zEngineeringNodeBo.zEngineeringInfoBoList[this.dataIndex].zEngineeringMaterialBo[0]
						.specifications = item.id;
					this.dataJson.zEngineeringNodeBo.zEngineeringInfoBoList[this.dataIndex].zEngineeringMaterialBo[0]
						.specificationsName = item.name;
				} else if (this.chooseType == 'brand') {
					this.dataJson.zEngineeringNodeBo.zEngineeringInfoBoList[this.dataIndex].zEngineeringMaterialBo[0]
						.brand = item.id;

				} else if (this.chooseType == 'zbf') {
					this.dataJson.zEngineeringNodeBo.zEngineeringInfoBoList[this.dataIndex].zEngineeringMaterialBo[0]
						.selfClosingValveType = item.id;

				}
			},
			getFSDJLevel() {
				getEnginMaterialQualityList("民用工程", this.enginType, this.enginClassification, this.title).then(
					response => {
						this.selectList = response.data;
						this.$forceUpdate();

					});
			},
			getSelectName(id) {
				let res = '';
				this.selectList.forEach((val) => {
					if (id == val.id) {

						res = val.name
					};
				})
				return res;
			},
			getSelectZBFName(id) {
				let res = '';
				this.selectZbfList.forEach((val) => {
					if (id == val.id) {
						res = val.name
					};
				})
				return res;
			},
			isEdit(item) {
				var isShow = item.createBy == this.$user.state.name;

				return isShow;
			},
			submit() {
				let isSubmit = true;
				this.dataJson.zEngineeringNodeBo.zEngineeringInfoBoList.forEach((res) => {
					if (res.zEngiineeringPhotoBoList.length == 0) {
						this.$modal.msg("请上传照片");
						isSubmit = false;
					}
					if (this.title == '立杠' || this.title == '表后管' || this.title == '阀管') {
						if (res.zEngineeringMaterialBo[0].specifications == '') {
							this.$modal.msg("请选择规格");
							isSubmit = false;
						}
					}
					if (this.title == '立杠' || this.title == '表后管') {
						if (res.zEngineeringMaterialBo[0].number == '') {
							this.$modal.msg("请输入米数");
							isSubmit = false;
						}
					}
				})
				if (!isSubmit) {
					return
				}

				putHistory(this.dataJson).then(

					response => {
						if (response.code == '200') {
							uni.hideLoading()
							uni.showToast({
								title: response.msg,
								icon: 'none',
								duration: 2000
							});
							setTimeout(function() {
								uni.navigateBack();
							}, 1000)

						}

					});
			}
		}

	}
</script>

<style lang="scss">
	.uni-media-list-body {
		background: #fff;
		border: 1px solid #eee;
		border-radius: 40rpx;
		margin: 20rpx;
		padding: 10rpx 0 40rpx;
		box-shadow: 0 0 5px #eee;
	}

	.uni-media-list-text-top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10px;
		position: relative;

	}


	.to-right-icon {
		width: 15px;
		height: 15px;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
	}

	.share {
		width: 100%;
		height: 100%;

	}

	.tit-text {
		color: #4f535a;
		margin-right: 20rpx;
	}

	.normal-text {}

	.cz-style {
		background: #e8f4f9;
		margin: 20rpx;
		padding: 10rpx;
		border-radius: 20rpx;
		border: 1px solid #d4e3f0;
	}

	.uni-media-list-text-top {
		font-size: 14px;
		color: #696969;
		padding: 20rpx 20rpx;
		border-bottom: 1px solid #eee;
		display: flex;
		align-items: center;
	}

	.share-box {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0rpx;
		left: 0rpx;
		bottom: 0rpx;
		right: 0rpx;
		background-color: rgba(0, 0, 0, 0.4);
		transition: .3s;
		z-index: 999;
	}

	// 进入分享动画
	.share-show {
		transition: all 0.3s ease;
		transform: translateY(0%) !important;
		border-radius: 20px 20px 0px 0px;
	}

	.scroll-Y {
		height: 58vh;
	}

	// 离开分享动画
	.share-item {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 70%;
		background-color: #FFFFFF;
		transition: all 0.3s ease;
		transform: translateY(100%);
		z-index: 1999;

		.share-to {
			// width: 100%;
			height: 30px;
			display: flex;
			justify-content: center;
			margin: 30rpx 0 !important;
			align-items: center;


		}

		.content {
			width: 100%;
			height: auto;
			display: flex;
			flex-wrap: wrap;

			.block {
				width: 100%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: left;
				height: auto;

				image {
					width: 80rpx;
					height: 80rpx;
				}

				text {
					margin-top: 16rpx;
					font-size: 28rpx;
					color: #606266;
				}
			}
		}

		.cancel {
			width: 100%;
			height: 3rem;
			display: flex;
			justify-content: center;
			align-items: center;
			border-top: 1rpx solid #E4E7ED;
		}


	}

	.uni-media-list-text-top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10px;
		position: relative;

	}

	.uni-list {
		border: 1xp solid #eee;
	}

	.to-right-icon {
		width: 15px;
		height: 15px;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
	}


	.text {
		font-size: 16px;
		color: #333;
	}
</style>