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

<template>
	<view>
		<!-- 备品备件弹窗 -->
		<u-popup :show="popShow" @close="close" mode="center" class="u-popup">
			<view class="bpbj">
				<view class="title">
					{{ title }}
				</view>
				<view class="detail-content">
					<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>
							</template>
						</StepItem>
					</Step>
					<PopSparePart ref="PopSparePart" :workOrderCode="workOrderCode" :noRequest="true"></PopSparePart>
				</view>
				<view class="close" @click="close">
					<u-button text="关闭"></u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import Step from '@/components/Step/Step.vue'
	import StepItem from '@/components/Step/StepItem.vue'
	import PopSparePart from './PopSparePart.vue'
	export default {
		components: {
			Step,
			StepItem,
			PopSparePart
		},
		data() {
			return {
				repairInfoLogList: [],
				logs: [],
				workOrderCode: '',
				popShow: false,
				workOrderId: '',
				InfoList: [],
				title: '',
				typeOptions: {
					CREATE: '生成工单',
					SPARE_PARTS_APPLY: '备品备件申请',
					ACCEPTANCE_CHEK: '验收',
					WORK_REPORT: '报工'
				}
			}
		},
		methods: {
			// 备件使用明细
			handlbjsymx(title, list) {
				console.log(list)
				this.$refs.PopSparePart.open(title, list)
			},
			open(value, data) {
				console.log(list)
				this.popShow = true
				this.title = value
				let list = JSON.parse(JSON.stringify(data))
				this.repairInfoLogList = list.reverse()
				this.repairInfoLogList.forEach(item => {
					this.logs[item.id] = {
						id: item.id,
						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 && 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
										}
								  })
								: []
					}
				})
			},
			close() {
				this.popShow = false
				this.$emit('close')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.nodata {
		text-align: center;
		padding: 30rpx 0;
	}
	.popShow {
		height: 100%;
		width: 100%;
		overflow: hidden;
		position: fixed;
	}
	.bpbj {
		width: 600rpx;
		.title {
			margin-bottom: 7px;
			background-color: #333333;
			text-align: center;
			color: #fff;
			padding: 10rpx 0;
		}

		.detail-content {
			border: 1rpx solid rgba(242, 242, 242, 1);
			max-height: 60vh;
			overflow: auto;
			.col {
				font-size: 28rpx;
				border-bottom: 1rpx solid rgba(242, 242, 242, 1);
				display: flex;
				padding: 10rpx;
				flex-wrap: wrap;
				align-items: center;
				justify-content: space-between;
				background-color: rgba(242, 242, 242, 0.372549019607843);
				.tt {
					width: 100%;
				}
			}

			.plus {
				width: 40rpx;
				height: 40rpx;
				line-height: 38rpx;
				text-align: center;
				background-color: $j-primary-border-green;
				color: #fff;
				margin: 16rpx 0 0 16rpx;
			}
		}

		/deep/.u-number-box {
			.u-number-box__minus,
			.u-number-box__plus,
			.u-number-box__input {
				font-size: 30rpx;
				height: 1.6em !important;
			}

			.u-number-box__input {
				width: 2em !important;
			}

			.u-number-box__minus,
			.u-number-box__plus {
				background-color: $j-primary-border-green !important;

				.u-icon__icon {
					color: #fff !important;
				}
			}
		}
	}
</style>