zd_wechatApp/pages/piping_record/piping_record.vue

	<template>
		<scroll-view>
			<view class="background">
				<view class="uni-list">
					<view class="container" style="border-bottom: 1px solid #f8f8f8;">
						<view>
							行政区
						</view>
						<view v-if="this.isEmpty(this.XZQValue.dictValue)" style="margin-top: 10;"
							@click="pickerShow('xzq')">
							<span style="color: darkgray;">请选择行政区</span>
							<image :src="loadImgSrc('icon_right.png')" class="to-right-icon"></image>
						</view>
						<view v-else class="uni-list-cell-db" style="margin-top: 10;" @click="pickerShow('xzq')">
							<span style="color: black;">{{XZQValue.dictLabel}}</span>
							<image :src="loadImgSrc('icon_right.png')" class="to-right-icon"></image>
						</view>

					</view>
				</view>
				<view class="uni-list">
					<view class="container" style="border-bottom: 1px solid #f8f8f8;">
						<view>
							小区
						</view>

						<view v-if="this.isEmpty(this.XQValue.id)" class="uni-list-cell-db" style="margin-top: 10;"
							@click="pickerShow('xq')">
							<span style="color: darkgray;">请选择小区</span>
							<image :src="loadImgSrc('icon_right.png')" class="to-right-icon"></image>
						</view>
						<view v-else class="uni-list-cell-db" style="margin-top: 10;" @click="pickerShow('xq')">
							<span style="color: black;">{{XQValue.name}}</span>
							<image :src="loadImgSrc('icon_right.png')" class="to-right-icon"></image>
						</view>
					</view>
				</view>
				<view class="uni-list">
					<view class="container" style="border-bottom: 1px solid #f8f8f8;">
						<view class="uni-list-cell-left">
							楼栋
						</view>
						<view v-if="this.isEmpty(this.LDValue.id)" class="uni-list-cell-db" style="margin-top: 10;"
							@click="pickerShow('ld')">
							<span style="color: darkgray;">请选择楼栋</span>
							<image :src="loadImgSrc('icon_right.png')" class="to-right-icon"></image>
						</view>
						<view v-else class="uni-list-cell-db" style="margin-top: 10;" @click="pickerShow('ld')">
							<span style="color: black;">{{LDValue.name}}</span>
							<image :src="loadImgSrc('icon_right.png')" class="to-right-icon"></image>
						</view>
					</view>
				</view>
				<view class="uni-list" style="margin-top: 10;">
					<view class="container" style="border-bottom: 1px solid #f8f8f8;">
						<view class="uni-list-cell-left">
							单元
						</view>
						<view v-if="this.isEmpty(this.DYValue.id)" class="uni-list-cell-db" style="margin-top: 10;"
							@click="pickerShow('dy')">
							<span style="color: darkgray;">请选择单元</span>
							<image :src="loadImgSrc('icon_right.png')" class="to-right-icon"></image>
						</view>
						<view v-else class="uni-list-cell-db" style="margin-top: 10;" @click="pickerShow('dy')">
							<span style="color: black;">{{DYValue.name}}</span>
							<image :src="loadImgSrc('icon_right.png')" class="to-right-icon"></image>
						</view>
					</view>
				</view>

				<view class="uni-list">
					<view class="container" style="border-bottom: 1px solid #f8f8f8;">
						<view class="uni-list-cell-left">
							房间
						</view>
						<view v-if="this.isEmpty(this.FJValue.id)" class="uni-list-cell-db" style="margin-top: 10;"
							@click="pickerShow('fj')">
							<span style="color: darkgray;">请选择房间</span>
							<image :src="loadImgSrc('icon_right.png')" class="to-right-icon"></image>
						</view>
						<view v-else class="uni-list-cell-db" style="margin-top: 10;" @click="pickerShow('fj')">
							<span style="color: black;">{{FJValue.name}}</span>
							<image :src="loadImgSrc('icon_right.png')" class="to-right-icon"></image>
						</view>
					</view>
				</view>
			</view>

			<view class="background">


				<view>

					<view
						style="font-size: 16px;margin-left: 10px;margin-top: 10px;display: flex; justify-content: space-between;margin-bottom: 10px;">
						户主信息

						<image v-if="change==false" :src="loadImgSrc('icon_user_open.png')" @click='change1'
							style="display: flex;justify-content:flex-end; margin-right: 10px;width: 15px;height: 15px;">
						</image>
						<image v-if="change==true" :src="loadImgSrc('icon_user_close.png')" @click='change1'
							style="display: flex;justify-content:flex-end; margin-right: 10px;width: 15px;height: 15px;">
						</image>
					</view>
				</view>
				<view v-show="change">
					<view class="uni-list">
						<view class="container" style="border-bottom: 1px solid #f8f8f8;">
							<view class="uni-list-cell-left">
								户主姓名
							</view>
							<view class="uni-list-cell-db" style="margin-top: 10;">
								<span style="color: darkgray;" v-model="houseHeadName">{{houseHeadName}}</span>
							</view>

						</view>
					</view>
					<view class="uni-list">
						<view class="container" style="border-bottom: 1px solid #f8f8f8;">
							<view class="uni-list-cell-left">
								户主电话
							</view>
							<view class="uni-list-cell-db" style="margin-top: 10;">
								<span style="color: darkgray;" v-model="houseHeadPhone">{{houseHeadPhone}}</span>
							</view>

						</view>
					</view>
					<view class="uni-list">
						<view class="container" style="border-bottom: 1px solid #f8f8f8;">
							<view class="uni-list-cell-left">
								户主身份证号码
							</view>
							<view class="uni-list-cell-db" style="margin-top: 10;">
								<span style="color: darkgray;"
									v-model="houseHeadIDcardNumber">{{houseHeadIDcardNumber}}</span>
							</view>

						</view>
					</view>
					<view class="uni-list">
						<view class="container" style="border-bottom: 1px solid #f8f8f8;">
							<view class="uni-list-cell-left">
								管理所
							</view>
							<view class="uni-list-cell-db" style="margin-top: 10;">
								<span style="color: darkgray;" v-model="administrative">{{administrative}}</span>
							</view>

						</view>
					</view>
				</view>
			</view>
			<view class="background">
				<view class="uni-list">
					<view
						style="font-size: 16px;margin-left: 10px;margin-top: 10px;display: flex; justify-content: space-between;margin-bottom: 10px;">
						未安装
					</view>
					<view class="container" style="border-bottom: 1px solid #f8f8f8;">

						<view>
							原因
						</view>
						<view v-if="this.isEmpty(this.reasonValue.id)" style="margin-top: 10;"
							@click="pickerShow('reason')">
							<span style="color: darkgray;">请选择原因</span>
							<image :src="loadImgSrc('icon_right.png')" class="to-right-icon"></image>
						</view>
						<view v-else class="uni-list-cell-db" style="margin-top: 10;" @click="pickerShow('reason')">
							<span style="color: black;">{{reasonValue.name}}</span>
							<image :src="loadImgSrc('icon_right.png')" class="to-right-icon"></image>
						</view>

					</view>
					<view class="container" style="border-bottom: 1px solid #f8f8f8;">
						<view class="uni-common-mt" style="width: 100%;">
							<text class="uni-title uni-common-pl">具体原因</text>
							<view style="width: 100%;box-sizing: border-box;">
								<textarea class="textarea" placeholder="请输入具体原因" maxlength="255"
									placeholder-style="padding: 10rpx;"
									style="width: 100%;height: 100%;border: 1rpx solid #cccccc; border-radius: 15rpx;padding: 10rpx;line-height:normal;"
									auto-height v-model="specificReasonsValue"></textarea>
							</view>
						</view>
					</view>

				</view>
			</view>

			</view>
			<view class="action-btn" v-show="reviewStatus!='1'">
				<button @click="submit" class="btn cu-btn block bg-blue lg round">确认上传</button>
			</view>



			<SelectPicker :list="selectList" @change="changeSelect" v-if="open" @close="close" titleKey="name"
				subtitleKey="id" v-model="name"></SelectPicker>

			<SelectPicker :list="dictOptions" @change="changeSelectDict" v-if="openDict" @close="closeDict"
				titleKey="dictLabel" subtitleKey="dictValue" v-model="dictLabel"></SelectPicker>


		</scroll-view>
	</template>

	<script>
		import SelectPicker from '../../components/selectPicker/select_picker.vue'


		import {
			getDicts
		} from "@/api/system/dict/data";
		import {
			getAreaList,
			getBuildingList,
			getUnitList,
			addTearOldPipe,
			getRoomProjectList,
			getRoomProjectId,
			getHousesList,
		} from '@/api/common';
		import {
			getToken
		} from '../../utils/auth';
		export default {
			components: {
				SelectPicker,

			},
			data() {
				return {
					title: '',
					name: '未安装',
					administrative: '',
					headers: {
						Authorization: "Bearer " + getToken()
					},
					reasonValue: {},
					specificReasonsValue: '',
					FJValue: {},
					houseHeadName: '',
					houseHeadPhone: '',
					houseHeadIDcardNumber: '',
					type: '',
					open: false,
					reviewStatus: '', //是否可以点击
					objValue: '', //上一页面传过来的值  新增接口用
					openDict: false,
					selectList: [],
					dictOptions: [],
					imgArr: [],
					XQValue: {},
					XZQValue: {},
					projectValue: {
						'dictValue': '0'
					},
					time: '', //施工时间
					LDValue: {},
					DYValue: {},
					XQList: '',
					LDList: '',
					DYList: '',
					change: false,
					FJList: '',

				}
			},

			onLoad(options) {
				if ('params' in options) {

					this.objValue = JSON.parse(decodeURIComponent(options.params));

					
					uni.setNavigationBarTitle({
						title: '未安装'
					})
				}

			},
			methods: {
				//判断是否选择
				isEmpty(str) {
					return (!str || 0 === str.length);
				},

				change1() {
					this.change = !this.change
				},


				submit() {
					if (this.isEmpty(this.projectValue.dictValue)) {
						this.$modal.msg("请选择工程周期")
						return;
					}
					if (this.isEmpty(this.XZQValue.dictValue)) {
						this.$modal.msg("请选择行政区")
						return;
					}
					if (this.isEmpty(this.XQValue.id)) {
						this.$modal.msg("请选择小区")
						return;
					}
					if (this.isEmpty(this.LDValue.id)) {
						this.$modal.msg("请选择楼栋")
						return;
					}
					if (this.isEmpty(this.DYValue.id)) {
						this.$modal.msg("请选择单元")
						return;
					}
					if (this.isEmpty(this.FJValue.id)) {
						this.$modal.msg("请选择房间")
						return;
					}
					if (this.isEmpty(this.reasonValue.id)) {
						this.$modal.msg("请选择原因")
						return;
					}
					if (this.isEmpty(this.specificReasonsValue)) {
						this.$modal.msg("请输入具体原因")
						return;
					}
					uni.showLoading()
					let param = {
						district: this.XZQValue.dictValue,
						areaId: this.XQValue.id,
						buildingId: this.LDValue.id,
						unitId: this.isEmpty(this.DYValue.id) ? '' : this.DYValue.id,
						enginType: this.objValue.enginType, //写死 上一页面传过来的 
						enginClassification: this.objValue
							.enginClassification, //写死  上一页面传过来的  //室内 - 庭院 - 架空
						enginCycle: this.projectValue.dictValue, //工程周期
						zEngineeringNodeBo: {
							type: this.objValue.enginClassValue, //写死 上一页面传过来的  (拆旧管等 字典值)
							zEngineeringInfoBo: {
								constructTime: this.time,
								zEngiineeringPhotoBoList: this.imgArr, //照片集合
							}
						}

					}

					addTearOldPipe(param).then(res => {
						uni.hideLoading()
						if (res.code == '200') {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								//显示持续时间为 3秒
								duration: 2000
							});
							setTimeout(function() {
								uni.navigateBack();
							}, 1000)

						}
					})
					//提交接口执行逻辑

				},





				pickerShow(e) {
					this.type = e; //赋值类型
					if (e == 'xzq') { //行政区
						if (this.isEmpty(this.projectValue.dictValue)) {
							this.$modal.msg('请选择工程周期')

						} else {
							this.openDict = true;
							getDicts("district").then(response => {
								this.dictOptions = response.data;
							});
						}

					} else if (e == 'xq') { //小区
						if (this.isEmpty(this.XZQValue.dictValue)) {
							this.$modal.msg('请选择行政区')

						} else {
							this.open = true;
							this.selectList = this.XQList;
						}
					} else if (e == 'ld') { //楼栋

						if (this.isEmpty(this.XQValue.id)) {
							this.$modal.msg('请选择小区')

						} else {
							this.open = true;
							this.selectList = this.LDList;
						}

					} else if (e == 'dy') { //单元
						if (this.isEmpty(this.LDValue.id)) {
							this.$modal.msg('请选择楼栋')

						} else {
							this.open = true;
							this.selectList = this.DYList;
						}
					} else if (e == 'fj') { //房间
						if (this.isEmpty(this.DYValue.id)) {
							this.$modal.msg('请选择单元')

						} else {
							this.open = true;
							this.selectList = this.FJList;
						}
					}

				},
				changeSelectDict(item, index) {
					this.openDict = false;
					if (this.type == 'xzq') {
						this.XZQValue = item;

						//根据行政区id获取小区数据
						this.XQValue = ''; //重置小区数据
						this.LDValue = ''; //重置楼栋数据
						this.DYValue = ''; //重置单元数据
						getAreaList(item.dictValue).then(res => {
							this.XQList = res.data;
						})
					}

				},
				changeSelect(item, index) {
					this.open = false;

					if (this.type == 'xq') {
						this.XQValue = item;
						//根据小区id 获取楼栋数据
						this.LDValue = ''; //重置楼栋数据
						this.DYValue = ''; //重置单元数据
						this.administrative = item.administrative;
						getBuildingList(item.id).then(res => {
							this.LDList = res.data
						})
					} else if (this.type == 'ld') {
						this.LDValue = item;
						//根据楼栋ID 获取单元数据
						this.DYValue = ''; //重置单元数据
						getUnitList(item.id).then(res => {
							this.DYList = res.data
						})
					} else if (this.type == 'dy') {
						this.DYValue = item;
						this.FJValue = ''; //重置房间数据
						this.currentResidentsPhoe = [];
						this.houseHeadName = "";
						this.houseHeadPhone = "";
						this.houseHeadIDcardNumber = "";
						getHousesList(item.id).then(res => {
							this.FJList = res.data
						})
					} else if (this.type == 'fj') {
						this.FJValue = item;
						this.houseHeadName = item.houseUserName;
						this.houseHeadPhone = item.phone;
						this.houseHeadIDcardNumber = item.idCard;
					}
				},
				//关闭弹窗
				close(e) {
					this.open = false
				},
				//关闭弹窗
				closeDict(e) {
					this.openDict = false
				},

			}
		}
	</script>

	<style lang="scss">
		.container {
			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;
		}

		.background {
			// border: 15px solid hsla(0, 0%, 100%, .5);
			background: white;
			background-clip: padding-box;
			padding: 20rpx;
			border-radius: 20rpx;
			margin: 20rpx;
			/*从padding开始往外面裁剪背景*/


		}


		.btn {
			width: 715rpx;
			height: 69rpx;
			background: #79A4F0;
			border-radius: 6rpx;
			font-size: 25rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 69rpx;
			margin-top: 40rpx;
			margin-bottom: 100rpx;
		}

		.number {
			display: flex;
			/* 水平居中显示子元素 */
			align-items: flex-start;
			/* 垂直居中显示子元素 */
			justify-content: space-between;
			/* 左右间距等于间距大小 */
			padding: 10px;
			/* 设置padding以提高视觉效果 */
		}

		.textarea {
			margin-top: 10upx;
			width: 100%;
			border: 1rpx solid red;
			min-height: 100upx;
			line-height: 20px;
		}
	</style>