rd_mes_uniapp/pages/basic/empEqpEnd.vue

<template>
	<view>
		<t-emp />
		<view class="btns">
			<button type="primary" class="btn" @click="search">查询</button>
			<button type="primary" class="btn" @click="endAll" :disabled="searchEqpWithEmp.length===0">全部下机</button>
		</view>
		<h2 class="endableEqp">可下机设备</h2>
		<view class="eqps" v-for="(item, index) in searchEqpWithEmp" :key="index">
			<view class="info">
				<view class="item">设备编码：{{ item.eqpCode }}</view>
				<view class="item">设备名称：{{ item.eqpName }}</view>
			</view>
			<button type="primary" class="end" @click="end(index)">下机</button>
		</view>
	</view>
</template>

<script>
	import {
		addEnd,
		listEmpEqpHistory
	} from '@/api/basic/empEqpHistory.js'

	import {
		listEmployee
	} from '@/api/mes/jobIn.js'

	import {
		getInfo
	} from '@/api/login.js'

	export default {
		data() {
			return {
				empCode: this.$store.state.employee.empCode,
				empName: this.$store.state.employee.empName,
				eqpCode: null,
				eqpName: null,
				searchEqpWithEmp: [],
				endEqp: []
			}
		},
		methods: {
			//根据员工姓名和员工编号来查询已上机但并未下机的设备
			//注：只用一个字段无法精确查找，可能查找到老员工
			search() {
				this.searchEqpWithEmp = [];
				listEmpEqpHistory({
					empName: this.empName,
					empCode: this.empCode
				}).then(async res => {
					if (res.rows.length > 0) {
						for (var i in res.rows) {
							//判断是否下机
							if (!res.rows[i].endTime) {
								this.searchEqpWithEmp.push({
									eqpCode: res.rows[i].equipmentCode,
									eqpName: res.rows[i].equipmentTitle
								});
							}
						}
						if (this.searchEqpWithEmp.length === 0) {
							return uni.showToast({
								title: '未查询到已上机设备',
								icon: 'none'
							})
						}
					} else {
						this.$modal.showToast('没有可下机设备')
					}
				})
			},
			end(index) {
				this.$modal.loading('操作中')
				addEnd({
					empCode: this.empCode,
					eqpCode: this.searchEqpWithEmp[index].eqpCode
				}).then(res => {
					this.$modal.closeLoading();
					this.$modal.msgSuccess("下机成功！")
					this.search()
				})
			},
			endAll() {
				// 确认存在可下机设备
				if (this.searchEqpWithEmp.length === 0) {
					return uni.showToast({
						title: '没有可下机设备',
						icon: 'none'
					})
				}

				// 确认操作弹窗
				uni.showModal({
					title: '操作确认',
					content: `确定要下机全部${this.searchEqpWithEmp.length}台设备吗？`,
					success: async (res) => {
						if (res.confirm) {
							try {
								this.$modal.loading('批量下机中...')

								// 创建所有设备的Promise数组
								const requests = this.searchEqpWithEmp.map(device =>
									addEnd({
										empCode: this.empCode, // 使用动态empCode
										eqpCode: device.eqpCode
									})
								)

								// 并发执行所有请求
								const results = await Promise.all(requests)

								// 检查所有结果
								const allSuccess = results.every(res => res.code === 200)
								if (allSuccess) {
									this.$modal.msgSuccess(`成功下机${results.length}台设备`)
									this.search() // 刷新列表
								} else {
									uni.showToast({
										title: '部分设备下机失败',
										icon: 'none'
									})
								}
							} catch (error) {
								uni.showToast({
									title: '批量下机操作异常',
									icon: 'none'
								})
							} finally {
								this.$modal.closeLoading()
							}
						}
					}
				})
			}
		},
	}
</script>

<style scoped lang="scss">
	page {
		padding: 60rpx 40rpx;
		color: #000;
		font-size: 40rpx;
	}

	.empName {
		display: inline-block;
		margin-left: 80rpx;
	}

	.btns {
		margin-top: 100rpx;
		display: flex;
		justify-content: space-between;

		.btn {
			width: 300rpx;
			height: 100rpx;
			margin: 0;
			font-size: 40rpx;
			background-color: deepskyblue;
			border: none;
			color: #fff;
		}
	}

	.endableEqp {
		margin: 60rpx 0 40rpx;
		text-align: center;
	}

	.eqps {
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;
		width: 100%;
		padding: 20rpx;
		border: 1px solid #ccc;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
		background-color: #f9f9f9;

		.info {
			flex: 1;
			margin-right: 20rpx;
		}

		.item {
			margin-bottom: 10rpx;
			font-weight: bold;
		}

		.end {
			position: absolute;
			top: 20rpx;
			right: 20rpx;
			width: 200rpx;
			height: 90rpx;
			background-color: deepskyblue;
			border: none;
			color: #fff;
		}
	}
</style>