aiot-app/pages/maintenance/check/index.vue

<template>
	<view>
		<uni-nav-bar fixed="true" statusBar="true" left-icon="back" title="保养中" @clickLeft="back">
			<!-- <view class="nav-right" slot="right">
        <view class="text-box" @click="goRegister"> 备件使用登记 </view>
      </view> -->
		</uni-nav-bar>
		<view class="check-content">
			<view class="title">
				{{ equiName }}
				<text>{{ equiCode }}</text>
			</view>
			<!-- 选择状态栏 -->
			<view class="select-bar" v-if="showSelectBar">
				<view class="select-actions">
					<view class="select-all" @click="selectAll">
						<checkbox :checked="allSelected" color="#157a2c" />
						<text>{{ allSelected ? '取消全选' : '全选' }}</text>
					</view>
					<view class="selected-count">
						<text>已选择 {{ selectedCount }} 项</text>
					</view>
				</view>
				<view class="batch-btn" @click="openBatchDialog" :class="{ disabled: selectedCount === 0 }">
					<text>批量操作</text>
				</view>
				<view class="close-select" @click="closeSelectBar">
					<text>取消选择</text>
				</view>
			</view>
			<view class="batch-trigger" @click="openSelectBar" v-if="!showSelectBar">
				<text>批量操作</text>
			</view>
			<view class="check-list">
				<CheckCard v-for="(item, index) in equipList" :item="item" class="mb20" :index="index"></CheckCard>
			</view>
			<view class="footer">
				<view class="btn" @click="back">返回</view>
				<view class="btn primary" @click="handleSave">保存</view>
			</view>
		</view>

		<!-- 批量操作弹窗 -->
		<uni-popup ref="batchPopup" type="bottom">
			<view class="batch-popup-content">
				<view class="popup-header">
					<text class="header-title">批量操作</text>
					<view class="close-btn" @click="closeBatchPopup">
						<text class="close-icon">×</text>
					</view>
				</view>
				<view class="popup-body">
					<view class="select-info">
						<text>已选择 {{ selectedCount }} 项</text>
					</view>
					<view class="action-btn status-btn" @click="batchSetStatus(1)">
						<text class="status-icon normal-icon">✓</text>
						<text>批量设为正常</text>
					</view>
					<view class="action-btn status-btn" @click="batchSetStatus(-1)">
						<text class="status-icon abnormal-icon">✗</text>
						<text>批量设为异常</text>
					</view>
				</view>
			</view>
		</uni-popup>
		<u-modal :show.sync="visible" class="maintenance-order" :showCancelButton="true" @confirm="confirm"
			@cancel="cancel" :closeOnClickOverlay="true">
			<view class="" style="flex: 1">
				<view class="title">备件使用登记</view>
				<view class="register-content">
					<view class="inner">
						<view class="col" v-for="item in applyEquiPartList">
							{{ item.name }}({{ item.code }}/{{ item.model }})
							<u-number-box v-model="item.usedNum" :step="1" :min="item.min"
								:max="item.num"></u-number-box>
						</view>
					</view>
				</view>
			</view>
		</u-modal>

		<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>
</template>

<script>
	import {
		getDeviceInfo,
		mattersChecked
	} from '@/api/myTicket/index.js'
	import {
		post,
		postJ
	} from '@/utils/api.js'
	import CheckCard from './components/CheckCard.vue'
	export default {
		components: {
			CheckCard
		},
		data() {
			return {
				registerObj: [],
				visible: false,
				pageId: '',
				page: 1,
				equipList: [],
				isEnd: false,
				equiName: '',
				equiCode: '',
				workOrderId: '',
				applyEquiPartList: [],
				originList: [],
				workOrderCode: '',
				showSelectBar: false,
				allSelected: false
			}
		},
		computed: {
			selectedCount() {
				return this.equipList.filter(item => item.checked).length
			}
		},
		onLoad(options) {
			// this.pageId = options.id
			// this.workOrderId = options.workOrderId
			// this.equiName = options.equiName
			// this.equiCode = options.equiCode
			// this.workOrderCode = options.workOrderCode
			this.id = options.id
			this.getList()

			// this.getApplyEquiPartList(+options.workOrderId, options.id)
			// this.getUsePartList(+options.workOrderId, options.id);
		},
		// onReachBottom () {
		//   if (this.isEnd) return
		//   this.page++
		//   this.getList()
		// },
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			confirm() {
				this.originList = uni.$u.deepClone(this.applyEquiPartList)
				this.visible = false
			},
			cancel() {
				this.applyEquiPartList = uni.$u.deepClone(this.originList)
				this.visible = false
			},

			goRegister() {
				uni.navigateTo({
					url: `/pages/maintenance/check/register?workOrderCode=${this.workOrderCode}&workOrderId=${this.workOrderId}&equipmentCode=${this.equiCode}`
				})
			},

			getApplyEquiPartList(workOrderId, planEquiId) {
				post(this.apiUrl + '/stockOutApply/getApplyEquiPartList', {
					workOrderId,
					planEquiId
				}).then(res => {
					if (res?.success) {
						this.originList = res.data.map(i => {
							i.min = i.usedNum
							return i
						})
						this.applyEquiPartList = uni.$u.deepClone(this.originList)
					}
				})
			},
			// getUsePartList(workOrderId, planEquiId){
			// 	post(this.apiUrl + '/stockOutApply/getUsePartList', {workOrderId, planEquiId}).then(res => {
			// 		if(res?.success){
			// 			this.originList = res.data
			// 			this.applyEquiPartList = uni.$u.deepClone(this.originList)
			// 		}
			// 	})
			// },
			handleSave() {
				console.log(this.equipList, '-------')
				let isAllPass = true
				isAllPass = this.equipList.every(item => item.status > -1)
				let params = {
					id: this.equipList[0].id,
					executeStatus: isAllPass ? 1 : 2,
					isAbnormal: isAllPass ? 1 : 0,
					workItems: this.equipList.map(item => {
						return {
							content: item.content,
							name: item.name,
							norm: item.norm,
							operationGuide: item.operationGuide,
							result: item.result,
							serialNum: item.serialNum,
							status: item.status == -1 ? -1 : 1,
							// 新增 拍照数据
							photoList: item.photoList || []
						}
					})
				}
				mattersChecked(params).then(data => {
					uni.showToast({
						duration: 2000,
						title: '保存成功！'
					})
					this.back()
				})
				// let _this = this
				// const params = {
				//   itemList: this.equipList,
				//   planEquiId: this.pageId,
				//   workOrderId: +this.workOrderId,
				//   workOrderType: 2,
				//   stockOutApplyPartList: this.originList.filter(i => !!i.usedNum)
				// }
				// postJ(this.apiUrl + `/workOrder/itemsInspect`, params, true).then(res => {
				//   if (res?.success) {
				//     if (res.data) {
				//       uni.showModal({
				//         title: '提示',
				//         content: '所有设备已执行完，是否报工？',
				//         cancelText: '取消', // 取消按钮的文字
				//         confirmText: '报工', // 确认按钮的文字
				//         showCancel: true, // 是否显示取消按钮，默认为 true
				//         success: res => {
				//           if (res.confirm) {
				//             _this._report()
				//           } else {
				//             _this.back()
				//           }
				//         }
				//       })
				//     } else {
				//       uni.showToast({
				//         duration: 2000,
				//         title: '保存成功！'
				//       })
				//       this.back()
				//     }
				//   }
				// })
			},

			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.workOrderId,
							timeoutCause
						},
						true,
						false
					)
					.then(res => {
						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.workOrderId}&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.back()
										}
									}
								})
							} else {
								uni.showToast({
									icon: 'success',
									title: '操作成功！',
									duration: 2000
								})
								_this.back()
							}
						}
					})
					.catch(res => {
						if (res.code === '4444') {
							this.$refs.inputDialog.open()
						}
					})
			},

			// 打开选择栏
			openSelectBar() {
				this.showSelectBar = true
			},
			// 关闭选择栏
			closeSelectBar() {
				this.showSelectBar = false
				this.equipList.forEach(item => {
					item.checked = false
				})
				this.allSelected = false
			},
			// 全选/取消全选
			selectAll() {
				this.allSelected = !this.allSelected
				this.equipList.forEach(item => {
					item.checked = this.allSelected
				})
			},
			// 打开批量操作弹窗
			openBatchDialog() {
				if (this.selectedCount === 0) {
					uni.showToast({
						title: '请先选择要操作的项目',
						icon: 'none'
					})
					return
				}
				this.$refs.batchPopup.open()
			},
			// 关闭批量操作弹窗
			closeBatchPopup() {
				this.$refs.batchPopup.close()
			},
			// 批量设置状态
			batchSetStatus(status) {
				const statusText = status === 1 ? '正常' : '异常'
				uni.showModal({
					title: '确认提示',
					content: `确认将选中的 ${this.selectedCount} 项设置为${statusText}吗？`,
					success: (res) => {
						if (res.confirm) {
							this.equipList.forEach(item => {
								if (item.checked) {
									item.status = status
									item.result = statusText
								}
							})
							uni.showToast({
								title: '批量设置成功',
								icon: 'success'
							})
							this.closeBatchPopup()
							this.closeSelectBar()
						}
					}
				})
			},
			getList() {
				getDeviceInfo({
					id: this.id
				}).then(data => {
					this.equiName = data.name
					this.equiCode = data.code
					this.equipList = data.workItems.map(item => {
						return {
							...item,
							id: data.id,
							status: 1,
							result: '正常',
							executeStatus: 1,
							checked: false
						}
					})
				})
				// const { page } = this
				// post(this.apiUrl + `/workOrder/getEquipmentItemsListApp?size=10&page=${page}`, { planEquiId: +this.pageId, workOrderId: +this.workOrderId }, true).then(res => {
				// 	if (res?.success) {
				// 		res.data.records.forEach(item => {
				// 			item.isNormal = item.isNormal === null || item.isNormal === undefined ? 1 : item.isNormal
				// 		})
				// 		if (page === 1) {
				// 			this.equipList = res.data.records
				// 		} else {
				// 			this.equipList.push(...res.data.records)
				// 		}

				// 		this.isEnd = this.equipList.length >= res.data.total
				// 	}
				// })
			}
		}
	}
</script>

<style lang="scss" scoped>
	.check-content {
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		padding-bottom: 100rpx;

		.title {
			line-height: 80rpx;
			display: flex;
			justify-content: space-between;
			padding: 0 30rpx;
		}

		.check-list {
			flex: 1;
			overflow: auto;
			padding: 0 30rpx 100rpx;
		}

		.footer {
			height: 100rpx;
			display: flex;
			position: fixed;
			bottom: 0;
			width: 100vw;
			border: 1rpx solid $j-primary-border-green;
			background: #fff;
			z-index: 99;

			.btn {
				display: flex;
				flex: 1;
				justify-content: center;
				align-items: center;
				border-radius: 0;

				&.primary {
					background-color: $j-primary-border-green;
					color: #fff;
				}
			}
		}

		.mb20 {
			margin-bottom: 20rpx;
		}

		.batch-trigger {
			padding: 20rpx 30rpx;
			text-align: right;

			text {
				background-color: #157a2c;
				color: #fff;
				padding: 10rpx 30rpx;
				border-radius: 8rpx;
				font-size: 28rpx;
			}
		}

		.select-bar {
			background-color: #f5f5f5;
			padding: 20rpx 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1rpx solid #e0e0e0;

			.select-actions {
				display: flex;
				align-items: center;
				flex: 1;

				.select-all {
					display: flex;
					align-items: center;
					margin-right: 20rpx;

					text {
						margin-left: 10rpx;
						font-size: 28rpx;
					}
				}

				.selected-count {
					font-size: 28rpx;
					color: #666;
				}
			}

			.batch-btn {
				background-color: #157a2c;
				color: #fff;
				padding: 10rpx 30rpx;
				border-radius: 8rpx;
				font-size: 28rpx;
				margin: 0 10rpx;

				&.disabled {
					background-color: #ccc;
					opacity: 0.6;
				}
			}

			.close-select {
				padding: 10rpx 20rpx;
				background-color: #fff;
				border-radius: 8rpx;
				font-size: 28rpx;
			}
		}
	}

	.nav-right {
		position: relative;

		.text-box {
			white-space: nowrap;
			padding: 4rpx;
			border: 1rpx solid rgba(242, 242, 242, 1);
		}
	}

	.maintenance-order {
		/deep/ .u-modal__content {
			padding: 0 !important;

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

		.title {
			background-color: rgba(51, 51, 51, 1);
			line-height: 60rpx;
			text-align: center;
			color: #fff;
		}

		.register-content {
			padding: 20rpx;

			.inner {
				border: 1rpx solid rgba(242, 242, 242, 1);

				.col {
					font-size: 28rpx;
					border-bottom: 1rpx solid rgba(242, 242, 242, 1);
					display: flex;
					padding: 10rpx;
					justify-content: space-between;
				}
			}
		}
	}

	.batch-popup-content {
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;
		padding: 30rpx;
		z-index: 1000;

		.popup-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-bottom: 30rpx;
			border-bottom: 1rpx solid #e0e0e0;

			.header-title {
				font-size: 36rpx;
				font-weight: bold;
				color: #333;
			}

			.close-btn {
				width: 60rpx;
				height: 60rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				.close-icon {
					font-size: 60rpx;
					color: #999;
					line-height: 1;
				}
			}
		}

		.popup-body {
			padding: 30rpx 0;

			.select-info {
				padding: 20rpx 0;
				text-align: center;
				color: #666;
				font-size: 28rpx;
			}

			.action-btn {
				display: flex;
				align-items: center;
				padding: 25rpx 30rpx;
				margin: 0 0 20rpx 0;
				background-color: #f5f5f5;
				border-radius: 12rpx;
				font-size: 30rpx;

				&:active {
					background-color: #e0e0e0;
				}

				text {
					margin-left: 20rpx;
				}
			}

			.status-btn {
				.status-icon {
					width: 40rpx;
					height: 40rpx;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 28rpx;
					color: #fff;
					margin-left: 0;
				}

				.normal-icon {
					background-color: #157a2c;
				}

				.abnormal-icon {
					background-color: #ff4444;
				}
			}
		}
	}
</style>