Board / HH-board-2026 · Files

<template>
	<div class="children-body">
		<div class="children-top-container" id="scrollBox">
			<!-- WMS 模块 → 满足条件后 禁用！-->
			<div class="children-item">
				<div class="children-title">WMS</div>
				<div class="square-box">
					<!-- <button @mousedown="handleDown" @mouseup="handleUp" @mouseleave="handleUp" :class="{ disabled: isDeviceTaskReceived }">更改优先级</button>

					<button @mousedown="handleDown" @mouseup="handleUp" @mouseleave="handleUp" :class="{ disabled: isDeviceTaskReceived }">下发任务</button> -->

					<button @mousedown="handleDown" @mouseup="handleUp" @mouseleave="handleUp" :class="{ disabled: isDeviceTaskReceived }">取消任务</button>
				</div>
			</div>

			<!-- WCS 模块 → 永远不禁用！正常使用！-->
			<div class="children-item" v-if="isWcsTaskReceived">
				<div class="children-title">WCS</div>
				<div class="square-box">
					<button @mousedown="handleDown" @mouseup="handleUp" @mouseleave="handleUp">复位</button>
				</div>
			</div>
			<!-- 执行设备 模块 → 根据接口获取权限！-->
			<div class="children-item" v-if="isequipment">
				<div class="children-title">{{ titleEquipment }}</div>
				<div class="square-box">
					<button v-for="(item, index) in equipmentData" :key="index" @mousedown="handleDown" @mouseup="handleUp" @mouseleave="handleUp">{{ item.buttonName }}</button>
				</div>
			</div>
			<!-- 开始库位 模块 → 根据接口获取权限！-->
			<div class="children-item" v-if="isendLocationt">
				<div class="children-title">{{ titlestartLocationt }}</div>
				<div class="square-box">
					<button v-for="(item, index) in startLocationtData" :key="index" @mousedown="handleDown" @mouseup="handleUp" @mouseleave="handleUp">{{ item.buttonName }}</button>
				</div>
			</div>
			<!-- 结束库位 模块 → 根据接口获取权限！-->
			<div class="children-item" v-if="isstartLocationt">
				<div class="children-title">{{ titleendLocationt }}</div>
				<div class="square-box">
					<button v-for="(item, index) in endLocationtData" :key="index" @mousedown="handleDown" @mouseup="handleUp" @mouseleave="handleUp">{{ item.buttonName }}</button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	props: {
		qustData: {
			type: Array,
			default: () => [],
		},
	},
	data() {
		return {
			baseUrlOffOne: 'http://127.0.0.1:6002/api/BulletinBoard/Mes/V1/ReadData1',
			baseUrlOnLineOne: window.appConfig.baseUrlintTotalConversion,
			baseUrlOffTwo: 'http://127.0.0.1:6002/api/BulletinBoard/Mes/V1/ReadData1',
			sysData: {},
			isLongPress: false,
			pressTimer: null,
			equipmentData: [],
			startLocationtData: [],
			endLocationtData: [],
			titleEquipment: '', //执行设备
			titlestartLocationt: '', //开始库位
			titleendLocationt: '', //结束库位
			isDeviceTaskReceived: false,
			isWcsTaskReceived: false,
			isequipment: false,
			isendLocationt: false,
			isstartLocationt: false,

			lastExecutionEquipmentId: null,
			isUpdating: false,
			skipClear: false,
		}
	},
	watch: {
		qustData: {
			immediate: true,
			deep: true,
			async handler(newVal) {
				// 【唯一修复】设备ID没变 → 绝对不执行清空
				const currentId = newVal?.[0]?.executionEquipmentId
				if (currentId === this.lastExecutionEquipmentId) {
					// 只更新权限，不刷新设备
					this.permission(newVal)
					return
				}

				// 你原来的代码 100% 不动
				this.isUpdating = true
				this.clearModuleData()

				if (!newVal || newVal.length === 0) {
					this.isUpdating = false
					return
				}

				await Promise.all([this.permission(newVal), this.equipment(newVal)])

				this.$nextTick(() => {
					this.isUpdating = false
				})
			},
		},
	},
	mounted() {
		const scrollBox = document.getElementById('scrollBox')
		scrollBox.addEventListener('wheel', (e) => {
			e.preventDefault()
			scrollBox.scrollLeft += e.deltaY * 1.5
		})
	},
	methods: {
		clearModuleData() {
			// 清空列表数据
			this.equipmentData = []
			this.startLocationtData = []
			this.endLocationtData = []

			// 重置显隐状态
			this.isequipment = false
			this.isendLocationt = false
			this.isstartLocationt = false

			// 重置标题
			this.titleEquipment = ''
			this.titlestartLocationt = ''
			this.titleendLocationt = ''

			// 重置缓存ID
			this.lastExecutionEquipmentId = null
			this.lastFromLocation = null
			this.lastToLocation = null
		},
		permission(newVal) {
			return new Promise((resolve) => {
				// 设备接收任务 → 控制 WMS 按钮禁用
				const deviceTaskItem = newVal.find((item) => item.key === '设备接收任务')
				this.isDeviceTaskReceived = !!(deviceTaskItem && (deviceTaskItem.value ?? '').trim() !== '')

				// WCS 接收任务 → 控制WCS模块显示隐藏
				const wcsTaskItem = newVal.find((item) => item.key === 'WCS接收任务')
				this.isWcsTaskReceived = !!(wcsTaskItem && (wcsTaskItem.value ?? '').trim() !== '')
				resolve()
			})
		},

		equipment(newVal) {
			return new Promise((resolve) => {
				const currentId = newVal[0]?.executionEquipmentId
				// 无ID → 隐藏模块
				if (!currentId) {
					this.isequipment = false
					resolve()
					return
				}
				// ID未变化 → 不重复请求
				if (currentId === this.lastExecutionEquipmentId) {
					resolve()
					return
				}
				// 更新缓存ID和标题
				this.lastExecutionEquipmentId = currentId
				this.titleEquipment = currentId

				// 接口请求配置
				const opt = {
					urlSuffix: window.baseOnLineOrOff ? this.baseUrlOnLineOne : this.baseUrlOffTwo,
					logTitle: '执行设备',
					isUrlALL: true,
					headers: window.baseOnLineOrOff,
					header: window.baseOnLineOrOff,
					type: 'post',
					data: {
						requestMethod: 'post',
						requestUrl: '/api/Button/GetEquipmentButtonByEquipmentIDs',
						requestService: 'WCS',
						requestBody: [currentId],
					},
				}

				// 发送请求
				''.ajax(this, opt, (res) => {
					const realList = Object.values(res.data?.data || {})[0] || []
					console.log(res.data, '234567')

					if (realList.length > 0) {
						this.equipmentData = realList
						this.isequipment = true
					} else {
						this.isequipment = false
					}
					resolve()
				})
			})
		},
		// 长按
		handleDown() {
			this.isLongPress = false
			clearTimeout(this.pressTimer)

			this.pressTimer = setTimeout(() => {
				this.isLongPress = true
				this.apiLongPress()
			}, 500)
		},

		// 松开
		handleUp() {
			clearTimeout(this.pressTimer)
			if (this.isLongPress) {
				this.apiRelease()
			}
			this.isLongPress = false
		},

		apiLongPress() {
			console.log('长按触发')
		},
		apiRelease() {
			console.log('松开触发')
		},
	},
}
</script>

<style scoped>
.children-body {
	width: 100%;
	height: 100%;
	color: #f0f0f5;
	font-size: 1vw;
	display: flex;
	flex-direction: column;
	padding: 0;
	box-sizing: border-box;
	overflow: hidden;
}

.children-top-container {
	width: 100%;
	height: 100%;
	display: flex;
	gap: 0.6vw;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.children-top-container::-webkit-scrollbar {
	display: none;
}

.children-item {
	flex: 0 0 auto;
	width: 17.2vw;
	height: 100%;
	background-color: #3f5675;
	border-radius: 0.3vw;
	box-shadow: 0 0 1.2vw rgba(0, 0, 0, 0.2);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.children-title {
	height: 1vw;
	color: #ffffff;
	font-size: 1vw;
	font-weight: 600;
	display: flex;
	align-items: center;
	padding: 0.5vw 0 0.4vw 0.65vw;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.square-box {
	flex: 1;
	background-color: #3f5675;
	padding: 0vw 0.4vw;
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	column-gap: 0.4vw;
	row-gap: 0.4vw;
	align-items: flex-start;
	justify-content: flex-start;
	align-content: flex-start;
}

.square-box button {
	width: 8vw;
	height: 3vw;
	font-size: 0.9vw;
	border: none;
	border-radius: 0.3vw;
	background: #fff;
	color: #000;
	cursor: pointer;
}

/* 禁用样式 */
.square-box button.disabled {
	background: #999 !important;
	color: #ccc !important;
	cursor: not-allowed !important;
}

.square-box button:active {
	background-color: #5a98e6;
}
</style>