aiot-app/pages/maintenance/detail/detail copy.vue

<template>
	<view class="maintenance-container">
		<uni-nav-bar fixed="true" statusBar="true" left-icon="back" title="保养工单详情" @clickLeft="back" right-icon="scan" @clickRight="HandlScanCode"></uni-nav-bar>
		<view class="maintenance-wrapper">
			<view class="maintenance-content">
				<KdTabs v-model="active" @change="handleTabChange" :list="['基本信息', '保养设备']" />
				<view class="kd-baseInfo" v-show="active === 0">
					<view class="kd-cell">
						<text class="kd-label">工单编号</text>
						<text class="kd-content">{{ worksheetInfo.workOrderCode }}</text>
					</view>
					<view class="kd-cell">
						<text class="kd-label">计划名称</text>
						<text class="kd-content">{{ worksheetInfo.planName }}</text>
					</view>
					<view class="kd-cell">
						<text class="kd-label">设备分类</text>
						<text class="kd-content">{{ worksheetInfo.equiTypeName }}</text>
					</view>
					<view class="kd-cell">
						<text class="kd-label">保养设备总数</text>
						<text class="kd-content text-warning">{{ worksheetInfo.equipCount - worksheetInfo.awaitInspectSum || 0 }}/{{ worksheetInfo.equipCount }}</text>
					</view>
					<view class="kd-cell">
						<text class="kd-label">计划完成时长</text>
						<text class="kd-content">{{ worksheetInfo.duration }}分钟</text>
					</view>
					<view class="kd-cell">
						<text class="kd-label">实际完成时长</text>
						<text class="kd-content">{{ finishTime(worksheetInfo.acceptTime, worksheetInfo.finishTime) }}</text>
					</view>
					<view class="kd-cell">
						<text class="kd-label">实际开始时间</text>
						<text class="kd-content">{{ worksheetInfo.acceptTime }}</text>
					</view>
					<view class="kd-cell">
						<text class="kd-label">实际完成时间</text>
						<text class="kd-content">{{ worksheetInfo.finishTime }}</text>
					</view>

					<!-- <u-button type="primary" size="large" text="开始执行"></u-button> -->
					<template v-if="worksheetInfo.status">
						<template v-if="worksheetInfo.status.code === 0">
							<button class="btn-execute" type="primary" @click="handleExecute">开始执行</button>
							<div class="apply-box">
								<!-- <button
                  class="btn-reassignment"
                  type="primary"
                  @click="sparepartApply"
                >
                  申请备品备件
                </button> -->
							</div>
						</template>
						<template v-else-if="worksheetInfo.status.code === 1">
							<button class="btn-execute" type="primary" @click="handleReport">报工</button>
						</template>
						<button v-else-if="worksheetInfo.status.code === 3" :disabled="true" class="btn-execute" type="primary">已报工</button>
						<div class="apply-box">
							<button v-if="worksheetInfo.status.code !== 3" class="btn-reassignment" type="primary" @click="sparepartApply">申请备品备件</button>
							<button v-if="worksheetInfo.status.code === 0" class="btn-reassignment" type="primary" @click="handleAssign">转派</button>
						</div>
					</template>
				</view>
				<view class="kd-equipment" v-show="active === 1">
					<view class="kd-type-box">
						<text :class="{ 'type—active': typeActive === index }" v-for="(item, index) in equpStatus" :key="index" @click="typeChange(index)">{{ item.name }}</text>
					</view>
					<view class="kd-list-container">
						<u-list @scrolltolower="scrolltolower">
							<u-list-item v-for="(item, index) in euqiList" :key="index">
								<view class="kd-card">
									<view class="kd-card-wrapper">
										<view class="kd-cell">
											<text class="kd-label">设备编码</text>
											<text class="kd-content">{{ item.equiCode }}</text>
										</view>
										<view class="kd-cell">
											<text class="kd-label">设备名称</text>
											<text class="kd-content">{{ item.equiName }}</text>
										</view>
										<view class="kd-cell">
											<text class="kd-label">设备型号</text>
											<text class="kd-content">{{ item.equiModel }}</text>
										</view>
										<view class="kd-cell">
											<text class="kd-label">设备位置</text>
											<text class="kd-content">{{ item.equiLocation }}</text>
										</view>
										<view class="kd-cell">
											<text class="kd-label">执行结果</text>

											<text class="kd-content">
												<text class="status-box text-warning" v-if="item.resultStatus === 0">待保养</text>
												<text class="status-box text-primary" v-else-if="item.resultStatus === 1">完成保养</text>
												<text class="status-box text-danger" v-else-if="item.resultStatus === 2">缺陷</text>
												<text class="status-box text-primary" v-else-if="item.resultStatus === 3">已报修</text>
											</text>
										</view>
									</view>
									<view class="card-footer">
										<button type="primary" class="primary-btn" @click="handleCheck(item)" v-if="worksheetInfo.status && worksheetInfo.status.code === 1">执行</button>
										<template v-if="worksheetInfo.status && worksheetInfo.status.code === 3">
											<button type="default" v-if="item.resultStatus === 2" @click="handLbx(item)">报修</button>
											<button type="default" v-else-if="item.resultStatus === 3" @click="handLbxDetail(item)">报修详情</button>
										</template>
										<button type="default" v-if="[0, 3].includes(worksheetInfo.status && worksheetInfo.status.code)" @click="checkDetail(item)">保养详情</button>
									</view>
								</view>
							</u-list-item>
						</u-list>
					</view>
				</view>
			</view>
		</view>
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog
				ref="inputClose"
				mode="input"
				title="您当前已超出计划完成时间，请填写原因"
				placeholder="请输入内容"
				:before-close="true"
				@close="handleClose"
				@confirm="timeoutCauseConfirm"></uni-popup-dialog>
		</uni-popup>
		<u-modal :show="modalShow" title="提示" @confirm="modalShow = false">
			<view>
				您还有
				<text class="text-warning">{{ worksheetInfo.awaitInspectSum }}</text>
				台设备待检，不可报工
			</view>
		</u-modal>
		<Assign ref="assignRef" @success="assignSuccess" />

		<!-- <ScanCode @scancodedate="scancodedate" :model="'uni'"></ScanCode> -->
	</view>
</template>

<script>
	import { get, post, postJ } from '@/utils/api.js'
	import Assign from '@/components/Assign.vue'
	import CellInfo from '@/components/CellInfo.vue'
	import KdTabs from '@/components/KdTabs.vue'
	import dayjs from 'dayjs'
	import ScanCode from '@/components/ScanCode.vue'
	export default {
		components: {
			CellInfo,
			KdTabs,
			Assign,
			ScanCode
		},
		data() {
			return {
				modalShow: false,
				active: 0,
				typeActive: 0,
				statusList: {
					0: '待接收',
					1: '执行中',
					3: '已完成'
				},
				pageId: '',
				workOrderCode: '',
				worksheetInfo: {
					equiList: [],
					workOrder: {}
				},
				equpStatus: [
					// {
					//   name: '全部',
					//   value: []
					// },
					{
						name: '待执行',
						value: [0]
					},
					{
						name: '已执行',
						value: [1, 2, 3]
					},
					{
						name: '缺陷',
						value: [2]
					},
					{
						name: '全部',
						value: []
					}
				],
				euqiList: [],
				equipPage: 1,
				isEnd: false,
				barType: 0,
				qrContent: null
			}
		},
		async onLoad(options) {
			this.workOrderCode = options.workOrderCode
			this.pageId = options.id
			// 设备台账跳转详情
			if (options.qrContent) {
				this.qrContent = options.qrContent
				await this.getInfo()
				this.cbScancodedate({ code: this.qrContent })
			}
		},
		onShow() {
			this.getInfo()
			this.typeChange(0)
			let _this = this
			uni.$off('scancodedate') // 每次进来先 移除全局自定义事件监听器
			uni.$on('scancodedate', function (data) {
				_this.cbScancodedate(data)
			})
		},
		onHide() {
			uni.$off('scancodedate')
		},
		onUnload() {
			uni.$off('scancodedate')
		},
		methods: {
			// 扫码枪扫码
			cbScancodedate(data) {
				this.Scancodedate(data.code)
			},
			// 相机扫码
			HandlScanCode() {
				let _this = this
				uni.scanCode({
					onlyFromCamera: true,
					success: function (res) {
						_this.Scancodedate(res.result)
					}
				})
			},
			Scancodedate(code) {
				let _this = this
				if (this.worksheetInfo.status.code === 0) {
					uni.showModal({
						title: '提示',
						content: '工单未开启执行，不可进行保养操作，请先点击“开始执行”！',
						confirmText: '开始执行', //这块是确定按钮的文字
						cancelText: '取消', //这块是取消的文字
						success: function (res) {
							if (res.confirm) {
								_this.handleExecute() // 执行确认后的操作
							} else {
								// 执行取消后的操作
							}
						}
					})
					return
				}
				this.qrContent = code.trim()
				this.barType = this.setBarType(this.qrContent)
				_this.getData()
			},
			// 设置barType
			setBarType(val) {
				let index = val.indexOf('@_@')
				let result = 0
				if (index !== -1) {
					let item = val.substr(index + 3, 1)
					if (item) {
						result = Number(item)
					}
				}
				return result
			},
			// 根据条码请求设备数据
			getData() {
				let par = {
					barType: this.barType,
					qrContent: this.qrContent
				}
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				postJ(this.apiUrl + '/scan/getAssetInfo', par)
					.then(res => {
						console.log('扫码接口返回', res)
						let data = res.data
						this.matchEquipment(data)
					})
					.finally(() => {
						uni.hideLoading()
					})
			},

			matchEquipment(data) {
				let par = {
					assetCode: data.assetCode,
					workOrderId: this.worksheetInfo.id
				}
				console.log('par', par)
				post(this.apiUrl + '/workOrder/scanMatching', par).then(res => {
					let data = res.data
					if (!data) {
						uni.showModal({
							title: '提示',
							content: '本工单中，无此设备！',
							confirmText: '好的', //这块是确定按钮的文字
							showCancel: false,
							success: function (res) {
								if (res.confirm) {
									// 执行确认后的操作
								} else {
									// 执行取消后的操作
								}
							}
						})
					} else {
						// 未报工
						if (this.worksheetInfo.status.code === 1) {
							this.handleCheck(data)
						}
						// 已报工
						if (this.worksheetInfo.status.code === 3) {
							this.checkDetail(data)
						}
					}
				})
			},

			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			handleAssign() {
				this.$refs.assignRef.open(this.pageId)
			},
			assignSuccess() {
				this.back()
			},
			finishTime(start, end) {
				if (!end) return ''
				let dur = new Date(end).getTime() - new Date(start).getTime()
				return Math.ceil(dur / 1000 / 60) + '分钟'
			},
			// 申请备品备件
			sparepartApply() {
				uni.navigateTo({
					url: `/pages/maintenance/sparepart/sparepart?planCode=${this.worksheetInfo.planCode}&sourceId=${this.worksheetInfo.id}&sourceCode=${this.worksheetInfo.workOrderCode}`
				})
			},
			// 申请备品备件详情
			sparepartDetail() {
				uni.navigateTo({
					url: `/pages/maintenance/sparepart/sparepartDetail?applyOrder=${this.worksheetInfo.applyOrder}`
				})
			},
			// 报工
			handleReport() {
				// if (
				//   new Date(this.worksheetInfo.planFinishTime).getTime() <
				//   new Date().getTime()
				// ) {
				//   this.$refs.inputDialog.open()
				//   return
				// }
				this._report()
			},
			handleClose() {
				this.$refs.inputDialog.close()
			},
			timeoutCauseConfirm(value) {
				if (!value) {
					uni.showToast({
						title: '请输入超时原因',
						icon: 'none'
					})
					return
				}
				this.$refs.inputDialog.close()
				this._report(value)
			},
			_report(timeoutCause = '') {
				post(
					this.apiUrl + '/workOrder/reportWork',
					{
						workOrderId: this.pageId,
						timeoutCause
					},
					true,
					false
				)
					.then(res => {
						let _this = this
						if (res?.success) {
							let data = res.data
							if (data.length) {
								uni.showModal({
									title: '提示',
									content: `有${data.length}台设备被标记为缺陷，是否要报修？`,
									cancelText: '取消', // 取消按钮的文字
									confirmText: '报修', // 确认按钮的文字
									showCancel: true, // 是否显示取消按钮，默认为 true
									success: res => {
										if (res.confirm) {
											if (data.length > 1) {
												uni.navigateTo({
													url: `/pages/maintenance/detail/detail?workOrderCode=${this.workOrderCode}&id=${this.pageId}&chooseTab=true`
												})
											} else {
												uni.navigateTo({
													url: `/pages/repair/repair/index?source=5&workOrderCode=${this.workOrderCode}&equiCode=${data[0].equiCode}&equiId=${data[0].equiId}&workOrderId=${this.pageId}&equiName=${data[0].equiName}&equiModel=${data[0].equiModel}&equiLocation=${data[0].equiLocation}`
												})
											}
										} else {
											_this.getInfo()
										}
									}
								})
							} else {
								uni.showToast({
									icon: 'success',
									title: '操作成功！',
									duration: 2000
								})
								this.getInfo()
							}
						}
					})
					.catch(res => {
						if (res.code === '4444') {
							this.$refs.inputDialog.open()
						} else if (res.code === '5555') {
							this.modalShow = true
							// uni.showModal({
							//   title: '提示',
							//   content: `您还有 ${this.worksheetInfo.awaitInspectSum} 台设备待检，不可报工`,
							//   success: function (res) {},
							//   showCancel: false
							// })
						}
					})
			},
			// 执行工单
			handleExecute() {
				post(this.apiUrl + '/workOrder/execute', {
					workOrderCode: this.workOrderCode
				}).then(res => {
					if (res?.success && res.data) {
						uni.showToast({
							icon: 'success',
							title: '操作成功！',
							duration: 2000
						})
						this.active = 1
						this.getInfo()
					}
				})
			},
			//巡点检设备加载更多
			scrolltolower() {
				if (this.isEnd) return
				this.equipPage++
				this.getEquipList()
			},
			// 巡点检设备列表
			getEquipList() {
				const params = {
					workOrderId: this.pageId,
					resultStatus: this.equpStatus[this.typeActive].value
				}

				post(this.apiUrl + `/workOrder/getEquipmentListApp?page=${this.equipPage}&size=10`, params, true).then(res => {
					if (res?.success) {
						if (this.equipPage === 1) {
							this.euqiList = res.data.records
						} else {
							this.euqiList.push(...res.data.records)
						}

						this.isEnd = this.euqiList.length >= res.data.total
					}
				})
			},

			handleTabChange(value) {
				if (value === 1) {
					this.typeChange(0)
				}
			},
			// 设备状态切换
			typeChange(type) {
				this.typeActive = type
				this.equipPage = 1
				this.getEquipList()
			},
			handleCheck({ id, equiName, equiCode, sparePartsJson }) {
				this.$store.commit('maintenance/SET_SPAREPARTSJSON', sparePartsJson)
				uni.navigateTo({
					url: `/pages/maintenance/check/index?workOrderId=${this.pageId}&id=${id}&equiName=${equiName}&equiCode=${equiCode}&applyOrder=${this.worksheetInfo.applyOrder}&workOrderCode=${this.worksheetInfo.workOrderCode}`
				})
			},
			checkDetail({ id, equiName, equiCode, sparePartsJson }) {
				this.$store.commit('maintenance/SET_SPAREPARTSJSON', sparePartsJson)
				uni.navigateTo({
					url: `/pages/maintenance/check/detail?workOrderId=${this.pageId}&id=${id}&equiName=${equiName}&equiCode=${equiCode}&applyOrder=${this.worksheetInfo.applyOrder}&workOrderCode=${this.worksheetInfo.workOrderCode}`
				})
			},
			getInfo() {
				post(this.apiUrl + '/workOrder/getDetailsApp', {
					workOrderCode: this.workOrderCode
				}).then(res => {
					if (res?.success) {
						this.worksheetInfo = res.data
					}
				})
			},
			// 报修
			handLbx(item) {
				uni.navigateTo({
					url: `/pages/repair/repair/index?source=4&workOrderCode=${this.workOrderCode}&equiCode=${item.equiCode}&equiId=${item.equiId}&workOrderId=${this.pageId}&equiName=${item.equiName}&equiModel=${item.equiModel}&equiLocation=${item.equiLocation}`
				})
			},
			// 报修详情
			handLbxDetail(item) {
				uni.navigateTo({
					url: `/pages/repair/detail/detail?id=${item.repairId}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/components/submitted.scss';

	.list-cell {
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: $uni-text-color-grey;
		padding: 5rpx 20rpx;
	}

	.font-sm {
		font-size: $uni-font-size-sm;
	}

	.font-text {
		color: $uni-text-color;
	}

	.btn-execute {
		background-color: $j-primary-border-green;
		width: 450rpx;
		margin-top: 10vh;
	}

	.btn-reassignment {
		color: $uni-color-primary;
		background-color: transparent;
		border: none;
		box-shadow: none;

		&::after {
			display: none;
		}
	}

	.maintenance-container {
		position: fixed;
		top: 0;
		bottom: 0;
		width: 100vw;
		display: flex;
		flex-direction: column;
		/deep/.u-popup {
			flex: none !important;
		}
	}
	.maintenance-wrapper {
		position: relative;
		flex: 1;
	}
	.maintenance-content {
		padding-top: 40rpx;
		box-sizing: border-box;
		// height: calc(100vh - 88rpx);
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		flex-direction: column;
	}

	.kd-cell {
		line-height: 90rpx;
		border-bottom: 1px dashed #dadada;
		display: flex;
		justify-content: space-between;
		.kd-label {
			display: inline-block;
			width: 7em;
			font-weight: bold;
		}
		.kd-content {
			flex: 1;
			text-align: left;
			word-break: break-all;
		}
	}
	.kd-baseInfo {
		padding: 0 32rpx;
		font-size: 28rpx;
	}
	.kd-equipment {
		flex: 1;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		.kd-type-box {
			text-align: center;
			padding: 26rpx 0;
			text {
				display: inline-block;
				width: 120rpx;
				padding: 4rpx 0;
				color: #333;
				margin: 0 8rpx;
				&.type—active {
					background-color: rgba(215, 215, 215, 1);
				}
			}
		}
		.kd-list-container {
			flex: 1;
			display: flex;
			flex-direction: column;
			overflow: hidden;
			padding: 12rpx 18rpx;
			background-color: $page-bg;

			.u-list {
				flex: 1;
				height: 100% !important;
			}
		}
	}

	.kd-card {
		background-color: #fff;
		margin-bottom: 20rpx;
		padding: 8rpx 0;
		font-size: 28rpx;
		word-break: break-all;
		.kd-card-wrapper {
			padding: 0 30rpx;
			border-bottom: 1px solid #dadada;
		}
		.kd-cell {
			line-height: 60rpx;
		}
		.kd-cell:last-of-type {
			border-bottom: none;
		}
		.status-box {
			margin-right: 16rpx;
		}
		.card-footer {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			padding: 8rpx 0 20rpx;
			button {
				width: 180rpx;
				height: 56rpx;
				line-height: 56rpx;
				font-size: 28rpx;
				margin: 0 8rpx;
			}
			.primary-btn {
				background-color: $j-primary-border-green;
			}
		}
	}
	.apply-box {
		width: 70%;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}
</style>