ybxf-security-uniapp/pagesA/fire/fpd_detection/detection_details/detection_details.vue

<template>
	<view class=" uni-container" v-if="formData.id">
		<view class="example container" :style="'height: ' + (screenHeight - wheight - 75) + 'px'">
			<!-- 自定义表单校验 1-->
			<u--form ref="customForm" :model="formData" labelPosition="top" labelWidth="150" labelAlign="left">
				<u-form-item label="检测项目" prop="detinspect" :required="true">
					<u-input v-model="formData.detinspect" disabled placeholder="请输入检测项目" />
				</u-form-item>
				<u-form-item label="预计检测时间" prop="detdate">
					<uni-datetime-picker v-model="formData.detdate" type="datetime" closeOnClickOverlay
						disabled></uni-datetime-picker>
				</u-form-item>
				<u-form-item label="检测维保结果" prop="detresult">
					<u-input v-model="formData.detresult.name" disabled placeholder="请输入检测维保结果" />
				</u-form-item>
				<u-form-item label="所属单位" prop="orgName" :required="true">
					<u-input v-model="formData.orgName" disabled placeholder="" />
				</u-form-item>
				<u-form-item label="附件">
					<view class="buju">
						<text v-if="formData.att == '' || formData.att == null">无</text>
						<!-- #ifdef MP-WEIXIN -->
						<text v-else style="color:#00a3f4;cursor: pointer;"
							@click.native="down(formData.att)">点击预览文件</text>
						<!-- #endif -->
						<!-- #ifdef H5 -->
						<a v-else style="color:#00a3f4;cursor: pointer;" @click="down(formData.att)">点击预览文件</a>
						<!-- #endif -->
					</view>
				</u-form-item>
			</u--form>
		</view>
		<uni-row class="heigthButton">
			<u-button v-if="historyView" @click="gotoDetection()" class="hBtn" shape="circle" size="large"
				color="#4cb2b6" style="width: 60%;" text="返回"></u-button>
			<u-button v-else @click="gotoEditDetection(formData)" class="hBtn" shape="circle" size="large" color="#4cb2b6"
				style="width: 60%;" text="修改信息"></u-button>
		</uni-row>
	</view>
</template>
<script>
	import {
		createFpdDetection, //创建消防设备维护和检测台账
		updateFpdDetection, //更新消防设备维护和检测台账
		deleteFpdDetection, //删除消防设备维护和检测台账
		getFpdDetection, //获得消防设备维护和检测台账
		getFpdDetectionPage, //获得消防设备维护和检测台账分页
		exportFpdDetectionExcel, //导出消防设备维护和检测台账 Excel
		getOrgId
	} from '@/api/fpdDetection/index.js';
	import {
		DICT_TYPE,
		getDictDatas
	} from '@/utils/dict';
	import {
		downSee
	} from '@/utils/common'
	export default {
		data() {
			return {
				formData: {
					orgName: ''
				},
				screenHeight: this.$screenHeight,
				wheight: '',
				//当前id
				thisId: '',
				historyView: false
			};
		},
		watch: {
			loading: {
				handler(newLength, oldLength) {
					this.$modal.isLoadingModel(this.loading)
				},
				immediate: true
			}
		},
		mounted() {

			// uni.createSelectorQuery().in(this).select('.heigthButton').boundingClientRect(data => {
			// 	console.log('data',data);
			// 	this.wheight = data.height
			// }).exec()
			// const query = uni.createSelectorQuery().in(this)
			// console.log('query', query);
			// const thisNode = query.select(".heigthButton")
			// console.log('thisNode', thisNode);
			// thisNode.boundingClientRect(data => {
			// 	console.log('data', data);
			// 	this.wheight = data.height
			// }).exec()
		},
		onShow() {
			if (this.thisId) {
				getFpdDetection(this.thisId).then(res => {
					// console.log('thisform', res);
					//对检测结果进行初始化
					const reArr = getDictDatas(DICT_TYPE.BACKEND_DET_RESULT)
					// console.log('reArr',reArr);

					const thisItem = reArr.find(par => par.value === res.data.detresult)
					// console.log('thisItem',thisItem);
					if (thisItem) {
						res.data.detresult = {
							id: thisItem.value,
							name: thisItem.label
						}
					}


					this.formData = res.data
					// 获取单位id
					getOrgId({
						pageNo: this.pageNo,
						pageSize: this.pageSize,
						userId: this.$store.state.user.id
					}).then(response => {
						// console.log(response, 'response');
						// 取到用户对应的单位名称与id
						response.data.forEach(v => {
							if (this.formData.orgId === v.dwid) {
								this.$set(this.formData, 'orgName', v.orgName)
							}
						});
					});
			//dom生成之后再获取节点计算高度
					this.$nextTick(() => {

						uni.createSelectorQuery().in(this).select('.heigthButton').boundingClientRect(
							data => {
								// console.log('data', data);
								this.wheight = data.height
							}).exec()
					})
				})

			}
		},
		onLoad: function(option) {
			if (option.historyView == 'historyView') {
				this.historyView = true
			}
			this.thisId = option.id
			//获取当前表单数据
			getFpdDetection(option.id).then(res => {
				// console.log('thisform', res);
				//对检测结果进行初始化
				const reArr = getDictDatas(DICT_TYPE.BACKEND_DET_RESULT)
				// console.log('reArr',reArr);

				const thisItem = reArr.find(par => par.value === res.data.detresult)
				// console.log('thisItem',thisItem);
				if (thisItem) {
					res.data.detresult = {
						id: thisItem.value,
						name: thisItem.label
					}
				}


				this.formData = res.data
				// 获取单位id
				getOrgId({
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					userId: this.$store.state.user.id
				}).then(response => {
					// console.log(response, 'response');
					// 取到用户对应的单位名称与id
					response.data.forEach(v => {
						if (this.formData.orgId === v.dwid) {
							this.$set(this.formData, 'orgName', v.orgName)
						}
					});
				});
				// var File = this.formData.File = []
				// if (this.formData.att != '') {
				// 	File.push({
				// 		url: this.formData.att,
				// 		name: this.formData.att
				// 	});
				// } else {
				// 	File = null
				// }
				// uni.createSelectorQuery().in(this).select('.heigthButton').boundingClientRect(data => {
				// 	console.log('data',data);
				// 	this.wheight = data.height
				// }).exec()
				// console.log('edit页面的val的值', this.formData);
			})

			// 接收来自上个页面传递的参数
			// const navData = JSON.parse(option.navData)
			// that.formData = navData;
			// const eventChannel = this.getOpenerEventChannel();
			// eventChannel.on('acceptDataFromOpenerPage', function(val) {
			// 	that.formData = val;
			// 	console.log('val+++++++++++++++++++', that.formData);
			// });
			// this.formData.orgName = option.orgName
		},

		methods: {
			gotoDetection() {
				uni.navigateBack()
			},
			// 下载附件
			down(attId) {
				// console.log(attId, 'sdf');
				downSee(attId)
			},
			// 传递当前页面数据到 ‘修改信息’
			gotoEditDetection(val) {
				// console.log('val',val);
				// const navData = JSON.stringify(this.formData)
				uni.navigateTo({
					url: '/pagesA/fire/fpd_detection/edit_detection/edit_detection?id=' + val.id,
				});
			}
		}
	};
</script>
<style lang="scss" scoped>
	page {
		background-color: #F5F7F9;
	}

	.container {
		position: relative;
		// height: 220vh;
		background-color: rgb(245, 247, 249);
		overflow: auto;

		.buju {
			margin: 40rpx;
		}
	}

	.cont {}

	.weiwan {
		color: #d51a52;
		background: rgba(213, 26, 82, 0.2);
		padding: 5rpx 20rpx;
		border-radius: 2px;
		border: 1px solid #d51a52;
	}

	.yiwan {
		color: #4cb2b6;
		background: rgba(76, 178, 182, 0.2);
		padding: 5rpx 20rpx;
		border-radius: 2px;
		border: 1px solid #4cb2b6;
	}

	.miaoshu {
		margin-right: 20rpx;
		color: #274647;
		font-weight: 600;
	}
</style>