ybxf-security-uniapp/pagesA/fire/drill/drill_details/drill_details.vue

<template>
	<view class=" uni-container" v-if="formData.orgName">
		<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="drillTitle" :required="true">
					<u-input v-model="formData.drillTitle" placeholder="培训演练标题" disabled />
				</u-form-item>
				<u-form-item label="所属单位" prop="orgName" :required="true">
					<u--input v-model="formData.orgName" disabled placeholder="请选择所属单位"></u--input>
				</u-form-item>
				<u-form-item label="记录类型" prop="drillType" :required="true">
					<u--input v-model="formData.drillTypeName" disabled placeholder="请选择记录类型"></u--input>
				</u-form-item>
				<u-form-item label="培训演练内容	" prop="drillContent">
					<u-textarea v-model="formData.drillContent" disabled placeholder="培训演练内容"></u-textarea>
				</u-form-item>
				<u-form-item label="培训演练时间" prop="drillDate">
					<uni-datetime-picker v-model="formData.drillDate" type="datetime" closeOnClickOverlay
						disabled></uni-datetime-picker>
				</u-form-item>
				<u-form-item label="培训演练地点" prop="drillPlace">
					<u-input v-model="formData.drillPlace" disabled placeholder="培训演练地点" />
				</u-form-item>
				<u-form-item label="培训演练讲师">
					<u-input v-model="formData.drillLecturer" disabled placeholder="培训演练讲师" />
				</u-form-item>
				<u-form-item label="参与人员数量">
					<u-input v-model="formData.participant" disabled placeholder="参与人员数量" />
				</u-form-item>

				<u-form-item label="附件">
					<view class="buju">
						<text v-if="formData.attId == '' || formData.attId == null">无</text>
						<!-- #ifdef MP-WEIXIN -->
						<text v-else style="color:#00a3f4;cursor: pointer;"
							@click.native="down(formData.attId)">点击预览文件</text>
						<!-- #endif -->
						<!-- #ifdef H5 -->
						<a v-else style="color:#00a3f4;cursor: pointer;" @click="down(formData.attId)">点击预览文件</a>
						<!-- #endif -->
					</view>
				</u-form-item>
			</u--form>
		</view>
		<uni-row class="heigthButton">
			<u-button v-if="historyView" @click="gotoDrill()" shape="circle" size="large" color="#4cb2b6"
				style="width: 60%;" text="返回"></u-button>
			<u-button v-else @click="gotoEditDrill(formData)" shape="circle" size="large" color="#4cb2b6"
				style="width: 60%;" text="修改信息"></u-button>

		</uni-row>
	</view>
</template>
<script>
	var that = null;
	import {
		downSee
	} from '@/utils/common'
	export default {
		data() {
			return {
				formData: {
					orgName: ''
				},
				formData: {
					orgName: ''
				},
				screenHeight: this.$screenHeight,
				wheight: '',
				historyView: false
			};
		},
		mounted() {
			uni.createSelectorQuery().in(this).select('.heigthButton').boundingClientRect(data => {
				this.wheight = data.height
			}).exec()
		},
		onLoad: function(option) {
			if (option.historyView == 'historyView') {
				this.historyView = true
			}
			that = this
			var data = option.id;


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

		methods: {
			// 下载附件
			down(attId) {
				downSee(attId)
			},
			gotoDrill() {
				uni.navigateBack()
			},
			// 传递当前页面数据到 ‘修改信息’
			gotoEditDrill(val) {
				uni.navigateTo({
					url: '/pagesA/fire/drill/edit_drill/edit_drill',
					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;
		}
	}

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