ybxf-security-uniapp/pagesA/fire/architecture/architecture_details/architecture_details.vue

<template>
	<view class=" uni-container">
		<view class="example container" :style="'height: ' + (screenHeight - wheight - 75) + 'px'">
			<!-- 自定义表单校验 1-->
			<u--form ref="customForm" :model="formData" labelPosition="top" labelWidth="250" labelAlign="left">
				<view class=" flex  flex-direction width100">
					<u-form-item label="楼宇名称" prop="buildingName" :required="true">
						<u-input v-model="formData.buildingName" placeholder="必填。楼宇名称" :disabled="true"/>
					</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="楼宇编号	">
						<u-input v-model="formData.buildingCode" placeholder="楼宇编号" :disabled="true"/>
					</u-form-item>
					<u-form-item label="楼龄	">
						<u-input v-model="formData.buildingAge" placeholder="楼龄" :disabled="true"/>
					</u-form-item>
					<u-form-item label="楼层	">
						<u-input v-model="formData.buildingFloor" placeholder="楼层" :disabled="true"/>
					</u-form-item>

					<u-form-item label="档案负责人">
						<u-input v-model="formData.dafzr" placeholder="档案负责人" :disabled="true"/>
					</u-form-item>
					<u-form-item label="占地面积">
						<u-input v-model="formData.zdmj" placeholder="占地面积" :disabled="true"/>
					</u-form-item>
					<u-form-item label="产权信息	">
						<u-input v-model="formData.ownership" placeholder="产权信息" :disabled="true"/>
					</u-form-item>
					<u-form-item prop="dlwz"  label="地理位置">
								<u-input v-model="formData.dlwz" placeholder="地理位置" :disabled="true"/>
					</u-form-item>
					<u-form-item label="有无避难层" prop="ywbnc">
						<u--input v-model="formData.ywbnc" disabled  placeholder="有无避难层"/>
					</u-form-item>
					<u-form-item label="避难层层数">
						<u-input v-model="formData.bncsl" placeholder="避难层层数	" :disabled="true"/>
					</u-form-item>
					<u-form-item label="避难层面积">
						<u-input v-model="formData.bncmj" placeholder="避难层面积" :disabled="true"/>
					</u-form-item>
					<u-form-item label="避难层位置">
						<u-input v-model="formData.bncwz" placeholder="避难层位置" :disabled="true"/>
					</u-form-item>
					<u-form-item label="安全出口数">
						<u-input v-model="formData.aqcks" placeholder="安全出口数" :disabled="true"/>
					</u-form-item>
					<u-form-item label="建筑数量	">
						<u-input v-model="formData.jzsl" placeholder="建筑数量" :disabled="true"/>
					</u-form-item>
					<u-form-item label="建筑高度	">
						<u-input v-model="formData.buildingHeight" placeholder="建筑高度" :disabled="true"/>
					</u-form-item>
					<u-form-item label="建筑面积	">
						<u-input v-model="formData.jzmj" placeholder="建筑面积" :disabled="true"/>
					</u-form-item>
					<u-form-item label="建筑结构	">
						<u-input v-model="formData.buildingStructure" placeholder="建筑结构" :disabled="true"/>
					</u-form-item>
					<u-form-item label="消防车道数" prop="xfcds">
						<u-input v-model="formData.xfcds" placeholder="消防车道数" :disabled="true"/>
					</u-form-item>
					<u-form-item label="消防电梯数" prop="xfdts">
						<u-input v-model="formData.xfdts" placeholder="消防电梯数" :disabled="true"/>
					</u-form-item>
					<u-form-item prop="xfcdwz" label="消防车登高操作场地位置">
						<u-input v-model="formData.xfcdwz" placeholder="消防车登高操作场地位置" :disabled="true"/>
					</u-form-item>
					<u-form-item label="消防控制室位置" prop="xfkzswz">
						<u-input v-model="formData.xfkzswz" placeholder="消防控制室位置" :disabled="true"/>
					</u-form-item>
					<u-form-item label="自动消防设施情况">
						<u--input v-model="formData.zdxfss" disabled  placeholder="自动消防设施情况"/>
					</u-form-item>
					<u-form-item label="耐火等级	">
						<u-input v-model="formData.fireRating" placeholder="耐火等级" :disabled="true"/>
					</u-form-item>
					<u-form-item label="燃气类型	">
						<u-input v-model="formData.rqlx" placeholder="燃气类型" :disabled="true"/>
					</u-form-item>
					<u-form-item label="重点部位" prop="xfdts">
						<u-input v-model="formData.zdbw" placeholder="请输入重点部位" />
					</u-form-item>
					<u-form-item label="总平面图纸名称	">
						<view class="buju">
							<text v-if="formData.dwpmtzmc == '' || formData.dwpmtzmc == null">无</text>
							<!-- #ifdef MP-WEIXIN -->
							<text v-else-if="formData.dwpmtzmc" style="color:#00a3f4;cursor: pointer;"
								@click.native="down(formData.taskInfo.attId)">点击预览文件</text>
							<!-- #endif -->
							<!-- #ifdef H5 -->
							<a v-else-if="formData.dwpmtzmc" style="color:#00a3f4;cursor: pointer;"
								@click="down(formData.dwpmtzmc)">点击预览文件</a>
							<!-- #endif -->
						</view>
					</u-form-item>
				</view>

			</u--form>
		</view>
		<view class="heigthButton">
			<u-button @click="gotoEditArc(formData)" shape="circle" size="large" color="#4cb2b6"
				style="width:60%;margin-bottom: 20rpx;" text="修改信息"></u-button>
		</view>
	</view>
</template>
<script>
	var that = null;
	export default {
		data() {
			return {
				formData: {},
				screenHeight: this.$screenHeight,
				wheight: ''
			};
		},
		onLoad: function(option) {

			var data = option.id;
			that = this;
			// 接收来自上个页面传递的参数
			const eventChannel = this.getOpenerEventChannel();
			eventChannel.on('acceptDataFromOpenerPage', function(val) {
				that.formData = val;
				// console.log('val+++++++++++++++++++', this.formData);
			});
		},
		mounted() {
			uni.createSelectorQuery().in(this).select('.heigthButton').boundingClientRect(data => {
				this.wheight = data.height
			}).exec()
		},
		methods: {
			// 下载附件
			down(dwpmtzmc) {
				const fileExt = dwpmtzmc.substring(dwpmtzmc.lastIndexOf('.') + 1);
				var that = this;
				//加载框动画
				uni.showLoading({
					title: '正在下载……'
				});
				// #ifdef H5
				let link = document.createElement('a');
				link.href = dwpmtzmc;
				link.download = '';
				document.body.appendChild(link);
				link.click();
				link.remove();
				uni.hideLoading();
				uni.showToast({
					icon: 'success',
					mask: true,
					title: '文件已下载',
					duration: 2000
				});

				// #endif
				// #ifdef MP-WEIXIN
				// console.log(that.hostUrl + '/uploads'+ dwpmtzmc)
				uni.downloadFile({
					url: dwpmtzmc, //下载地址接口返回
					success: data => {
						// console.log('打印data', data);
						if (data.statusCode === 200) {
							//隐藏加载框
							uni.hideLoading();
							//文件保存到本地
							wx.getFileSystemManager().saveFile({
								tempFilePath: data.tempFilePath, //临时路径
								success: function(res) {
									// console.log('打印res', res);
									uni.showToast({
										icon: 'success',
										mask: true,
										title: '文件已保存：' + res.savedFilePath, //保存路径
										title: '下载成功',
										duration: 2000
									});
									//自动打开文档查看
									setTimeout(() => {
										var filePath = res.savedFilePath;
										uni.openDocument({
											//新开页面打开文档，支持格式：doc, xls, ppt, pdf, docx, xlsx, pptx。
											filePath: filePath,
											fileType: fileExt,
											showMenu: false,
											success: function(res) {
												console.log('打开文档成功');
											},
											fail: function() {
												uni.showToast({
													title: '暂不支持打开此类型',
													duration: 2000,
													icon: 'none'
												});
											}
										});
									}, 2000);
								}
							});
						}
					},
					fail: err => {
						console.log(err);
						uni.showToast({
							icon: 'none',
							mask: true,
							title: '文件下载失败'
						});
					}
				}) // #endif
			},

			// 传递当前页面数据到 ‘修改信息’
			gotoEditArc(val) {
				uni.navigateTo({
					url: '/pagesA/fire/architecture/edit_architecture/edit_architecture',
					events: {
						// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
						acceptDataFromOpenedPage: function(val) {
							this.formData = val;
						}
					},
					success: function(res) {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('acceptDataFromOpenerPage', val);
					}
				});
			}
		}
	};
</script>
<style lang="scss" scoped>
	page {
		height: 100%;
	}

	// .container {
	// 	position: relative;
	// 	height: '';
	// 	background-color: rgb(245, 247, 249);
	// }
	.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;
	}

	.example {
		overflow-y: auto;
	}
</style>