aiot-app/pages/maintenanceWorkorder/components/maintain_course.vue

<template>
	<view :class="{ popupShow: popupShow }">
		<!-- 步骤条 -->
		<Step>
			<StepItem v-for="(item, index) in repairInfoLogList" :key="index" :active="index == 0" :hideContent="Boolean(item.content)">
				<template v-slot:header>
					<view class="step-title">
						<view class="s1">{{ typeOptions[item.type] }}</view>
						<view class="s2">
							{{ item.createTime }}
						</view>
					</view>
				</template>
				<template v-slot:content v-if="item.content">
					<view class="list-xs" v-if="item.type == 'CREATE'">
						<view class="list-xs-item">
							<view class="label">报修人</view>
							<view class="value">
								{{ logs[item.id] ? logs[item.id].content.requestUserName : '' }}
							</view>
						</view>
						<view class="list-xs-item">
							<view class="label">故障描述</view>
							<view class="value">
								{{ logs[item.id] ? logs[item.id].content.remark : '' }}
							</view>
						</view>
					</view>
					<view class="list-xs" v-else-if="item.type == 'SPARE_PARTS_APPLY'">
						<view class="list-xs-item">
							<view class="label">申领清单</view>
							<view class="value bjsymx" @click="handlbjsymx('备件明细', item.content.infoList)">备件使用明细</view>
						</view>
					</view>
					<view class="list-xs" v-else-if="item.type == 'ACCEPTANCE_CHEK'">
						<view class="list-xs-item">
							<view class="label">验收人</view>
							<view class="value">
								{{ logs[item.id] ? logs[item.id].content.userName : '' }}
							</view>
						</view>
						<view class="list-xs-item">
							<view class="label">验收结果</view>
							<view class="value">
								{{ logs[item.id] ? (logs[item.id].content.orderStatus == 4 ? '通过' : '驳回') : '' }}
							</view>
						</view>
					</view>
					<view class="list-xs" v-else-if="item.type == 'WORK_REPORT'">
						<view class="list-xs-item">
							<view class="label">处理说明</view>
							<view class="value">
								{{ logs[item.id] ? logs[item.id].content.reason : '' }}
							</view>
						</view>
					</view>
					<!-- 转派 -->
					<!-- <view class="list-xs" v-if="item.type.desc == '转派'">
						<view class="list-xs-item">
							<view class="label">转派人</view>
							<view class="value">
								{{ item.content.reassignName }}
							</view>
						</view>
						<view class="list-xs-item">
							<view class="label">接收人</view>
							<view class="value">
								{{ item.content.executorName }}
							</view>
						</view>
						<view class="list-xs-item">
							<view class="label">转派原因</view>
							<view class="value">
								{{ item.content.reassignExplain }}
							</view>
						</view>
					</view> -->
					<!-- 默认 -->
					<!-- <view class="list-xs" v-else>
						<template v-for="(itm, index1) in Object.entries(item.content)">
							<view class="img-wrap" v-if="itm[0] == 'workOrderImgList' && itm[1]">
								<image class="img" @click="clickImg(itm[1].split(','), el)" :src="apiUrl + el" v-for="(el, index2) in itm[1].split(',')" :key="index2"></image>
							</view>
							<view class="list-xs-item" v-else-if="itm[0] == 'workOrderId'">
								<view class="label"></view>
								<view class="value bj" @click="handlbjsymx('备件使用明细')">
									{{ dictProcess[itm[0]] }}
								</view>
							</view>
							<view class="list-xs-item" v-else-if="['examineResult', 'acceptanceResult', 'approvalResult'].includes(itm[0])">
								<view class="label">
									{{ dictProcess[itm[0]] }}
								</view>
								<view class="value">
									{{ itm[1] ? '通过' : '未通过' }}
								</view>
							</view>
							<view class="list-xs-item" v-else-if="itm[0] == 'sparePartsCode'">
								<view class="label">
									{{ dictProcess[itm[0]] }}
								</view>
								<view class="value">
									{{ itm[1] }}
									<span class="list-xs-item-btn" @click="handlbjsymx('备件明细', itm[1])">备件明细</span>
								</view>
							</view>
							<view
								class="list-xs-item"
								v-else-if="
									[
										'approvalUserName',
										'applyUserName',
										'stockOutCode',
										'executorName',
										'repairReportExplain',
										'userName',
										'acceptanceInstructions',
										'createUserName',
										'planCode',
										'planName',
										'examinePlanUserName',
										'examineExplain',
										'workOrderCode',
										'maintenanceContent',
										'plannedTime',
										'workOrderExecutorName'
									].includes(itm[0])
								">
								<view class="label">
									{{ dictProcess[itm[0]] }}
								</view>
								<view class="value">
									{{ itm[1] }}
								</view>
							</view>
						</template>
					</view> -->
				</template>
			</StepItem>
		</Step>
		<PopSparePart ref="PopSparePart" :workOrderCode="workOrderCode" :sparePartsJson="sparePartsJson" :noRequest="true"></PopSparePart>
	</view>
</template>

<script>
	import Step from '@/components/Step/Step.vue'
	import StepItem from '@/components/Step/StepItem.vue'
	import PopSparePart from '../components/PopSparePart.vue'
	export default {
		props: {
			repairInfoLogList: {
				type: Array,
				default() {
					return [
						{
							content: {}
						}
					]
				}
			},
			planEquiList: {
				type: Array,
				default() {
					return []
				}
			},
			workOrderCode: {
				type: String,
				default() {
					return ''
				}
			}
		},
		components: {
			Step,
			StepItem,
			PopSparePart
		},
		computed: {
			// 报工备品备件
			sparePartsJson() {
				if (this.planEquiList && this.planEquiList.length > 0) {
					return JSON.parse(this.planEquiList[0].sparePartsJson || '[]')
				} else {
					return []
				}
			}
		},
		data() {
			return {
				popupShow: false,
				typeOptions: {
					CREATE: '生成工单',
					SPARE_PARTS_APPLY: '备品备件申请',
					ACCEPTANCE_CHEK: '验收',
					WORK_REPORT: '报工'
				},
				logs: {},
				logsKeys: [],
				lastStepName: '',
				// 维修历程映射
				dictProcess: {
					executorName: '执行人',
					repairReportExplain: '处理说明',
					workOrderId: '备件使用明细',
					userName: '验收人',
					acceptanceResult: '验收结果',
					acceptanceInstructions: '验收说明',
					createUserName: '创建人',
					planCode: '计划单号',
					planName: '计划名称',
					examinePlanUserName: '审核人',
					examineResult: '审核结果',
					examineExplain: '审核说明',
					workOrderCode: '工单编号',
					maintenanceContent: '维修方案',
					plannedTime: '执行完成时间',
					workOrderExecutorName: '执行人',
					reassignName: '转派人',
					reassignExplain: '转派原因',
					stockOutCode: '出库单号',
					approvalUserName: '审核人',
					approvalResult: '审核结果',
					applyUserName: '申请人',
					sparePartsCode: '申领单号'
				}
			}
		},
		// mounted() {

		// },
		created() {
			this.repairInfoLogList.forEach(item => {
				this.logs[item.id] = {
					id: item.id,
					content: item.content ? item.content : {},
					createTime: item.createTime,
					type: item.type,
					remark: item.remark,
					requestUserName: item.requestUserName
				}
				if (item.type === 'SPARE_PARTS_APPLY') {
					this.logs[item.id].content.infoList =
						this.logs[item.id].content.infoList && this.logs[item.id].content.infoList.length > 0
							? this.logs[item.id].content.infoList.map(item => {
									return {
										...JSON.parse(item.sparePartsList),
										sparePartsId: item.sparePartsId
									}
							  })
							: []
				}
			})
			console.log('this.logs-------------------')
			console.log(this.logs)
			this.logsKeys = Object.keys(this.logs)
			this.lastStepName = this.logsKeys[0]
		},
		methods: {
			close() {
				this.popupShow = false
			},
			// 备件使用明细
			handlbjsymx(title, list) {
				// if(value==='使用'){

				// }
				this.popupShow = true
				this.$refs.PopSparePart.open(title, list)
			},
			// 查看图片
			clickImg(urls, indexUrl) {
				urls = urls.map(n => {
					return this.apiUrl + n
				})
				wx.previewImage({
					urls: urls, //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
					current: this.apiUrl + indexUrl, // 当前显示图片的http链接，默认是第一个
					success: function (res) {},
					fail: function (res) {},
					complete: function (res) {}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.popupShow {
		overflow: hidden;
		position: fixed;
		width: 100%;
	}
	.step-title {
		display: flex;
		justify-content: space-between;
	}
	.bjsymx {
		color: #4f7f00;
	}
	.list-xs {
		.list-xs-item {
			color: #7f7f7f;
			display: flex;

			.label {
				font-size: 28rpx;
				width: 120rpx;
				text-align: right;
				margin-right: 20rpx;
			}

			.value {
				font-size: 28rpx;

				&.bj {
					padding: 10rpx 0;
					color: #4f7f00;
				}
			}
			& + .list-xs-item {
				margin-top: 10rpx;
				.list-xs-item-btn {
					color: #47975a;
					margin-left: 30rpx;
				}
			}
		}

		.img-wrap {
			padding-left: 140rpx;
			margin-top: 20rpx;
			display: flex;
			flex-wrap: wrap;
			margin-left: -20rpx;

			.img {
				width: 160rpx;
				height: 120rpx;
				margin-left: 20rpx;
				margin-bottom: 20rpx;
			}
		}
	}
</style>