ybxf-security-uniapp/pagesA/fire/unit_info/unit_info_details/unit_info_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="200" labelAlign="left">
				<!-- <view class=" flex flex-direction width100"> -->
				<u-form-item label="单位名称" prop="orgName" :required="true">
					<u-input v-model="formData.orgName" placeholder="必填。单位名称" :disabled="true"/>
				</u-form-item>
				<u-form-item label="负责人" prop="orgCharge" :required="true">
					<u-input v-model="formData.orgCharge" placeholder="必填。负责人" :disabled="true" />
				</u-form-item>
				<u-form-item label="消防安全管理人" >
					<u-input v-model="formData.aqglr" placeholder="楼宇名称" :disabled="true" />
				</u-form-item>
				<u-form-item label="消防安全管理人电话" >
					<u-input v-model="formData.aqglrdh" placeholder="档案负责人" :disabled="true" />
				</u-form-item>
				<u-form-item label="消防安全管理人身份证" >
					<u-input v-model="formData.aqglrsfz" placeholder="地理位置" :disabled="true" />
				</u-form-item>
				<u-form-item label="消防安全负责人">
					<u-input v-model="formData.aqzrr" placeholder="消防安全负责人" :disabled="true" />
				</u-form-item>
				<u-form-item label="消防安全负责人电话" >
					<u-input v-model="formData.aqzrrdh" placeholder="消防安全负责人电话" :disabled="true" />
				</u-form-item>
				<u-form-item label="消防安全负责人身份证">
					<u-input v-model="formData.aqzrrsfz" placeholder="消防安全负责人身份证" :disabled="true" />
				</u-form-item>
				<u-form-item label="单位传真">
					<u-input v-model="formData.dwcz" placeholder="单位传真" :disabled="true" />
				</u-form-item>
				<u-form-item label="单位电话">
					<u-input v-model="formData.dwdh" placeholder="单位电话" :disabled="true" />
				</u-form-item>
				<u-form-item prop="dwdz" label="单位地址">
					<u-input v-model="formData.dwdz" placeholder="单位地址" :disabled="true" /> </u-form-item>
				<u-form-item label="单位电子邮箱	">
					<u-input v-model="formData.dwdzyx" placeholder="单位电子邮箱" :disabled="true" />
				</u-form-item>
				<u-form-item label="监管单位类别">
					<u-input v-model="formData.dwxzName" placeholder="监管单位类别" :disabled="true" />
				</u-form-item>
				<u-form-item label="负责人电话">
					<u-input v-model="formData.frdbdh" placeholder="负责人电话" :disabled="true" />
				</u-form-item>
				<u-form-item label="负责人身份证">
					<u-input v-model="formData.frdbsfz" placeholder="负责人身份证" :disabled="true" />
				</u-form-item>
				<u-form-item label="归口部门">
					<u-input v-model="formData.gkbm" 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="单位成立时间：">
					<uni-datetime-picker v-model="formData.dwclsj" type="date" :disabled="true"></uni-datetime-picker>
				</u-form-item>
				<!-- 确认重点单位时间 -->
				<u-form-item label="确认重点单位时间：">
					<uni-datetime-picker v-model="formData.qrsj" type="date" :disabled="true"></uni-datetime-picker>
				</u-form-item>
				<!-- 取消重点单位时间 -->
				<u-form-item label="取消重点单位时间：">
					<uni-datetime-picker v-model="formData.qxsj" type="date" :disabled="true"></uni-datetime-picker>
				</u-form-item>
				<u-form-item label="其他情况">
					<u-input v-model="formData.qtqk" placeholder="其他情况" :disabled="true" />
				</u-form-item>
				<u-form-item label="上级消防管辖单位">
					<u-input v-model="formData.sjxfgxdw" placeholder="上级消防管辖单位" :disabled="true" />
				</u-form-item>
				<u-form-item label="行政区域">
					<u-input v-model="formData.xzqy" placeholder="行政区域" :disabled="true" />
				</u-form-item>
				<u-form-item label="单位邮政编码">
					<u-input v-model="formData.yzbm" placeholder="单位邮政编码" :disabled="true" />
				</u-form-item>
				<u-form-item label="专兼职消防管理人">
					<u-input v-model="formData.zjzxfglr" placeholder="专兼职消防管理人" :disabled="true" />
				</u-form-item>
				<u-form-item label="专兼职消防管理人电话">
					<u-input v-model="formData.zjzxfglrdh" placeholder="专兼职消防管理人电话" :disabled="true" />
				</u-form-item>
				<u-form-item label="专兼职消防管理人身份证">
					<u-input v-model="formData.zjzxfglrsfz" placeholder="专兼职消防管理人身份证" :disabled="true" />
				</u-form-item>
				<u-form-item label="消防预案">
					<!-- #ifdef MP-WEIXIN -->
					<text style="color:#00a3f4;cursor: pointer;margin-left: 50rpx !important;"
						@click.native="viewSee(formData.xfya)" v-if="formData.xfya">点击预览文件</text>
					<!-- #endif -->
					<!-- #ifdef H5 -->
					<a style="color:#00a3f4;cursor: pointer;margin-left: 50rpx !important;"
						@click="viewSee(formData.xfya)" v-if="formData.xfya">点击预览文件</a>
					<!-- #endif -->
				</u-form-item>
				<!-- </view> -->
			</u--form>
		</view>
		<view class="heigthButton">
			<u-button @click="gotoEdit(formData)" shape="circle" size="large" color="#4cb2b6" text="修改信息"
				:customStyle="{width:'60%'}"></u-button>
		</view>

	</view>
</template>
<script>
	var that = null;
	import {
		downSee,
	} from '@/utils/common'
	import {
		getUnitInfo,
		getOrg //获取大队列表
	} from '@/api/unit_info';
	import {
		DICT_TYPE,
		getDictDatas
	} from '@/utils/dict';
	import {
		shijianc
	} from '@/utils/common.js'
	export default {
		data() {
			return {
				tableData: {},
				id: '',
				actions: getDictDatas(DICT_TYPE.BACKEND_ORG_TYPE2), //单位类型
				sjxfgxdwName: '',
				sjxfgxdwId: '',
				screenHeight: this.$screenHeight,
				wheight: '',
				formData: {
				},
			};
		},

		onLoad: function(option) {
			var data = option.id;
			that = this
			// 接收来自上个页面传递的参数
			const eventChannel = this.getOpenerEventChannel();
			eventChannel.on('acceptDataFromOpenerPage', function(val) {
				that.id = val.id;
				getOrg().then(res => {
					res.data.map(i => {
						if (val.sjxfgxdw && i.id == val.sjxfgxdw) {
							console.log('2555', i.name);
							that.sjxfgxdwName = i.name
							that.getData(data);
						}
					})
				})
			});
			that.getData(data);
			//单位类型 显示传递过来的选项  + 'px';

		},
		mounted() {
			uni.createSelectorQuery().in(this).select('.heigthButton').boundingClientRect(data => {
				this.wheight = data.height
			}).exec()
		},
		methods: {
			//查看已上传附件
			viewSee(val) {
				downSee(val)
			},
			// 获取数据
			getData(id) {
				getUnitInfo({
					id: id
				}).then(response => {
					this.formData = response.data;
					this.formData.sjxfgxdw = this.sjxfgxdwName
					this.actions.map(i => {
						if (this.formData.dwxz == i.value) {
							this.formData.dwxzName = i.label
						}
					});
				});
			},

			// 传递当前页面数据到 ‘修改信息’
			gotoEdit(val) {
				uni.navigateTo({
					url: '/pagesA/fire/unit_info/edit_unit_info/edit_unit_info',
					events: {
						// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
						acceptDataFromOpenedPage: function(val) {
							this.formData = val;
						}
					},
					success: function(res) {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('acceptDataFromOpenerPage', val);
					}
				});
			}
		}
	};
</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;
			word-break: break-all;
		}
	}

	.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;
	}

	.fixedButton {
		background-color: #F5F7F9;
		margin-top: 20rpx;
		width: 100vw;
	}

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