aiot-app/pages/quantity/detail/detail.vue

<template>
	<view class="tour-container">
		<uni-nav-bar fixed="true" statusBar="true" left-icon="back" title="量具送检工单详情" @clickLeft="back" right-icon="scan" @clickRight="HandlScanCode"></uni-nav-bar>
		<view class="tour-wrapper">
			<view class="tour_tally-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>
						{{ worksheetInfo.code }}
					</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.cycleValue
              }}{{ cycleOptObj[worksheetInfo.cycleType] }}</text
            >
          </view> -->
					<view class="kd-cell">
						<text class="kd-label">设备分类</text>
						<text class="kd-content">{{ worksheetInfo.categoryName }}</text>
					</view>
					<view class="kd-cell">
						<text class="kd-label">巡检设备总数</text>
						<text class="kd-content text-warning">{{ worksheetInfo.finishNum }}/{{ worksheetInfo.total }}</text>
					</view>
					<view class="kd-cell">
						<text class="kd-label">计划完成时长</text>
						{{ worksheetInfo.duration }}分钟
					</view>
					<view class="kd-cell">
						<text class="kd-label">实际完成时长</text>
						{{ finishTime(worksheetInfo.acceptTime, worksheetInfo.finishTime) }}
					</view>
					<view class="kd-cell">
						<text class="kd-label">实际开始时间</text>
						{{ worksheetInfo.acceptTime }}
					</view>
					<view class="kd-cell">
						<text class="kd-label">实际完成时间</text>
						{{ worksheetInfo.finishTime }}
					</view>

					<!-- <u-button type="primary" size="large" text="开始执行"></u-button> -->
					<template>
						<template v-if="worksheetInfo.orderStatus === 0">
							<button class="btn-execute" type="primary" @click="handleExecute">开始执行</button>
							<button class="btn-reassignment" type="primary" @click="handleAssign">转派</button>
						</template>
						<button v-else-if="worksheetInfo.orderStatus === 2" class="btn-execute" type="primary" @click="handleReport">报工</button>
						<button v-else-if="worksheetInfo.orderStatus === 3" :disabled="true" class="btn-execute" type="primary">已报工</button>
					</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>
											{{ item.code }}
										</view>
										<view class="kd-cell">
											<text class="kd-label">设备名称</text>
											{{ item.name }}
										</view>
										<view class="kd-cell">
											<text class="kd-label">设备型号</text>
											{{ item.model }}
										</view>
										<view class="kd-cell">
											<text class="kd-label">设备位置</text>
											{{ item.deviceLocationName.pathName }}
										</view>
										<view class="kd-cell">
											<text class="kd-label">执行结果</text>
											<text class="status-box text-warning" v-if="item.executeStatus === 0">待检</text>
											<text class="status-box text-primary" v-else-if="item.executeStatus === 1">已检</text>
											<text class="status-box text-danger" v-else-if="item.executeStatus === 2">缺陷</text>
											<text class="status-box text-primary" v-else-if="item.executeStatus === 3">已报修</text>
										</view>
									</view>
									<view class="card-footer">
										<button v-if="item.orderStatus == 2 && item.executeStatus == 0" type="primary" class="primary-btn" @click="handleCheck(item)">检查</button>
										<template v-if="item.orderStatus && item.orderStatus === 3">
											<button type="default" v-if="item.resultStatus === 3" @click="handLbxDetail(item)">报修详情</button>
											<button type="default" v-else-if="item.resultStatus === 2" @click="handLbx(item)">报修</button>
										</template>
										<button type="default" v-if="[0, 2, 3].includes(item.orderStatus) && item.executeStatus != 0" @click="checkDetail(item)">检查详情</button>
									</view>
								</view>
							</u-list-item>
						</u-list>
					</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>
		</view>
		<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"></ScanCode> -->
	</view>
</template>

<script>
	import { getWorkOrderDetail, getDeviceList, startExecuting, signingWork } from '@/api/myTicket/index.js'
	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 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: '',
				planId: '',
				workOrderCode: '',
				worksheetInfo: {
					equiList: [],
					workOrder: {}
				},
				equpStatus: [
					// {
					//   name: '全部',
					//   value: []
					// },
					{
						name: '全部',
						value: -1
					},
					{
						name: '待检',
						value: 0
					},
					{
						name: '已检',
						value: 1
					},
					{
						name: '缺陷',
						value: 2
					}
				],
				euqiList: [],
				equipPage: 1,
				isEnd: false,
				cycleOptObj: {
					1: '时/次',
					2: '天/次',
					3: '周/次',
					4: '月/次',
					5: '年/次',
					11: '次/天',
					12: '次/周',
					13: '次/月',
					14: '次/年'
				},
				barType: 0,
				qrContent: null,
				chooseTab: false
			}
		},
		async onLoad(options) {
			console.log('onLoad--------')
			console.log('options------------', options)
			// this.workOrderCode = options.workOrderCode
			this.pageId = options.id
			this.planId = options.planId
			// this.chooseTab = options.chooseTab
			this.getInfo()
			// 设备台账跳转详情
			// if (options.qrContent) {
			// 	this.qrContent = options.qrContent
			// 	await this.getInfo()
			// 	this.cbScancodedate({
			// 		code: this.qrContent
			// 	})
			// }
		},
		onShow() {
			console.log('onShow--------')
			this.getInfo()
			if (this.chooseTab) {
				this.active = 1
				this.typeChange(2)
			} else {
				this.typeChange(0)
			}
			// let _this = this
			// uni.$off('scancodedate') // 每次进来先 移除全局自定义事件监听器
			// uni.$on('scancodedate', function (data) {
			// 	_this.cbScancodedate(data)
			// })
		},
		onUnload() {
			uni.$off('scancodedate')
		},
		onHide() {
			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 => {
						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)
						}
					}
				})
			},

			handleAssign() {
				console.log(this.worksheetInfo)
				this.$refs.assignRef.open(this.worksheetInfo.id)
			},
			assignSuccess() {
				this.back()
			},
			// 报工
			handleReport() {
				if (this.worksheetInfo.finishNum !== this.worksheetInfo.total) {
					uni.showToast({
						title: '请完成巡检设备检查',
						icon: 'none'
					})
				} else {
					if (new Date(this.worksheetInfo.acceptTime).getTime() + this.worksheetInfo.duration * 60 * 1000 < 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 = '') {
				signingWork({ id: this.pageId, timeoutCause: timeoutCause }).then(() => {
					uni.showToast({
						icon: 'success',
						title: '操作成功！',
						duration: 2000
					})
					this.getInfo()
				})

				// 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/tour_tally/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()
				// 			}
				// 		}

				// 		/* if (res?.success) {
				// 		  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() {
				startExecuting({ id: this.pageId }).then(() => {
					uni.showToast({
						icon: 'success',
						title: '操作成功！',
						duration: 2000
					})
					this.getInfo()
				})
				// post(this.apiUrl + '/workOrder/execute', {
				// 	workOrderCode: this.workOrderCode
				// }).then(res => {
				// 	if (res?.success) {
				// 		uni.showToast({
				// 			icon: 'success',
				// 			title: '操作成功！',
				// 			duration: 2000
				// 		})
				// 		this.getInfo()
				// 	}
				// })
			},
			//巡点检设备加载更多
			scrolltolower() {
				if (this.isEnd) return
				this.equipPage++
				this.getEquipList()
			},
			// 巡点检设备列表
			getEquipList() {
				const params = {
					planId: this.planId,
					status: this.equpStatus[this.typeActive].value,
					pageNum: 1,
					size: 9999
				}
				getDeviceList(params).then(data => {
					if (this.equipPage === 1) {
						this.euqiList = data.list
					} else {
						this.euqiList.push(...data.list)
					}
					this.isEnd = this.euqiList.length >= data.count
				})
				// 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)
				}
			},

			finishTime(start, end) {
				if (!end) return ''
				let dur = new Date(end).getTime() - new Date(start).getTime()
				return Math.ceil(dur / 1000 / 60) + '分钟'
			},
			// 设备状态切换
			typeChange(type) {
				this.typeActive = type
				this.equipPage = 1
				this.getEquipList()
			},
			handleCheck({ id }) {
				// uni.navigateTo({
				// 	url: `/pages/tour_tally/check/index?id=${id}&equiName=${equiName}&equiCode=${equiCode}&workOrderId=${this.pageId}&workOrderCode=${this.workOrderCode}`
				// })
				uni.navigateTo({
					url: `/pages/tour_tally/check/index?id=${id}`
				})
			},
			checkDetail({ id }) {
				uni.navigateTo({
					url: `/pages/tour_tally/check/detail?id=${id}`
				})
			},
			getInfo() {
				getWorkOrderDetail({ workId: this.pageId }).then(data => {
					this.worksheetInfo = data
				})
				// return post(this.apiUrl + '/workOrder/getDetailsApp', {
				// 	workOrderCode: this.workOrderCode
				// }).then(res => {
				// 	if (res?.success) {
				// 		this.worksheetInfo = res.data
				// 	}
				// })
			},
			// 报修
			handLbx(item) {
				console.log('item', item)
				uni.navigateTo({
					url: `/pages/repair/repair/index?source=5&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: 5vh;
	}

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

		&::after {
			display: none;
		}
	}

	.tour-container {
		position: fixed;
		top: 0;
		bottom: 0;
		width: 100vw;
		display: flex;
		flex-direction: column;

		/deep/.u-popup {
			flex: none !important;
		}
	}

	.tour-wrapper {
		position: relative;
		flex: 1;
	}

	.tour_tally-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 {
		min-height: 90rpx;
		border-bottom: 1px dashed #dadada;
		display: flex;
		align-items: center;

		.kd-label {
			display: inline-block;
			width: 7em;
			font-weight: bold;
		}

		.kd-content {
			flex: 1;
			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;
			}
		}
	}
</style>