ipc-app/pages/work/maintenance/detailsMaintenance.vue

<template>
	<view class="detail-container">
		<uni-section title="保养基本信息" type="line">
			<view style="background: white;padding: 0px 20px 20px 20px;">
				<u--form labelPosition="left" :model="maintenanceInfo" label-width="100px">
					<u-form-item label="保养计划编号:" prop="" borderBottom>
						{{planNum}}
					</u-form-item>
					<u-form-item label="计划开始时间:" prop="" borderBottom>
						{{planStartTime}}
					</u-form-item>
					<u-form-item label="计划完成时间:" prop="" borderBottom>
						{{planEndTime}}
					</u-form-item>
					<u-form-item label="执行人:" prop="" borderBottom>
						{{maintainerName}}
					</u-form-item>
					<u-form-item label="保养内容:" prop="" borderBottom>
						{{planContent}}
					</u-form-item>
					<u-form-item label="备件出库单号:" prop="" borderBottom>
						{{maintenanceInfo.sparePartsOutboundNum}}
					</u-form-item>
					<u-form-item label="使用备件名:" prop="" borderBottom>
						{{maintenanceInfo.sparePartsName}}
					</u-form-item>
					<u-form-item label="使用备件数量:" prop="" borderBottom>
						{{maintenanceInfo.outboundQuantity}}
					</u-form-item>
					<u-form-item label="保养报告内容:" prop="" borderBottom>
						<view><mp-html :content="maintenanceInfo.reportContent" /></view>
					</u-form-item>
					<u-form-item label="照片:" prop="" borderBottom>
						<u--image :showLoading="true" :src="maintenanceInfo.photoPath" width="80px" height="80px"
							@click="lookImage(maintenanceInfo.photoPath)"></u--image>
					</u-form-item>
				</u--form>
			</view>
		</uni-section>
	</view>
</template>

<script>
	import {
		getMaintenanceById
	} from "@/api/maintenance/maintenance.js"

	import config from '@/config'
	const baseUrl = config.baseUrl

	export default {
		data() {
			return {
				id: null,
				planStartTime: null,
				planEndTime: null,
				maintainerName: null,
				planContent: null,
				planNum: null,
				maintenanceInfo: {},
			}
		},
		onLoad(opts) {
			this.id = opts.id;
			if ("null" != opts.planStartTime) {
				this.planStartTime = opts.planStartTime;
			}
			if ("null" != opts.planEndTime) {
				this.planEndTime = opts.planEndTime;
			}
			if ("null" != opts.maintainerName) {
				this.maintainerName = opts.maintainerName;
			}
			if ("null" != opts.planContent) {
				this.planContent = opts.planContent;
			}
			if ("null" != opts.planNum) {
				this.planNum = opts.planNum;
			}
		},
		created() {
			this.getMaintenanceInfo();
		},
		methods: {
			lookImage(url) {
				// 预览图片
				let urls = [];
				urls.push(url)
				uni.previewImage({
					urls: urls
				});
			},
			getMaintenanceInfo() {
				getMaintenanceById(this.id).then((res) => {
					this.maintenanceInfo = res.data
					let photoPath = this.maintenanceInfo.photoPath;
					if (photoPath != null && photoPath != '') {
						this.maintenanceInfo.photoPath = baseUrl + photoPath;
					}
				})
			}
		}
	}
</script>

<style>
	/* #ifndef APP-NVUE */
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #fff;
		min-height: 100%;
		height: auto;
	}

	view {
		font-size: 14px;
		line-height: inherit;
	}

	/* #endif */

	.text {
		text-align: center;
		font-size: 26rpx;
		margin-top: 10rpx;
	}

	.grid-item-box {
		flex: 1;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.uni-margin-wrap {
		width: 690rpx;
		width: 100%;
		;
	}

	.swiper {
		height: 300rpx;
	}

	.swiper-box {
		height: 150px;
	}

	.swiper-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #fff;
		height: 300rpx;
		line-height: 300rpx;
	}

	@media screen and (min-width: 500px) {
		.uni-swiper-dot-box {
			width: 400px;
			/* #ifndef APP-NVUE */
			margin: 0 auto;
			/* #endif */
			margin-top: 8px;
		}

		.image {
			width: 100%;
		}
	}

	.detail-container {
		padding: 12px;
		background: #f1f1f1;

		//设置按钮的样式，靠右
		.worker-button {
			float: right;
			/* margin-right: 24px; */
			margin-top: 10px;
		}
	}
</style>