ezhizao_dms_app/components/dialog-selectProduction/dialog-selectProduction.vue

<template>
	<dialog-base class="dialog-body" ref="baseDialog" title="箱号">
		<view class="selectedProcess">
			<uni-section title="可根据工艺列表筛选箱号" type="square">
				<uni-data-select v-model="selectedProcess" :localdata="processList" :clear="true"
					@change="handleProcessChange"></uni-data-select>
			</uni-section>
		</view>
		<view class="carrierList-title uni-row">
			<view class="uni-row" style="width: 46%;justify-content: center;">批次号</view>
			<view class="uni-row" style="width: 18%;justify-content: center;">箱号</view>
			<view class="uni-row" style="width: 32%;justify-content: center;">位置</view>
		</view>
		<view class="carrierList uni-row">
			<view class="carrierItem uni-row" v-for="(item,index) in carrierList">
				<view  style="width: 46%;text-align: left;">{{ item.lotCode }}</view>
				<view  style="width: 27%;text-align: left;">{{ item.carrierCode }}</view>
				<view  style="width: 27%;word-wrap: break-word;text-align: left;">{{ item.place }}</view>
			</view>
		</view>	
	</dialog-base>
</template>

<script setup>
	import {
		ref,
		getCurrentInstance
	} from 'vue'
	import {
		store
	} from '../../store';
	import {
		getAvailableCarrierList
	} from '@/api/business/dayWork.js'
	import {
		getProcessList
	} from '@/api/business/deptProcess.js'

	const baseDialog = ref(null)
	const selectedProcess = ref(0)
	const processList = ref([])
	const curProcessId = ref('')
	const carrierList = ref([])

	function open() {
		reset();
		// getProcessList({
		// 	deptId: store.curDeptDetails.deptId
		// }).then(res => {
		// 	if (res.code == 200) {
		// 		//过滤出工序交集
		// 		let filteredData = store.planDetails.processSequence.filter((item1) =>
		// 			res.data.some((item2) => item2.processCode === item1.processCode)
		// 		);
		// 		for (let i = 0; i < filteredData.length; i++) {
		// 			processList.value[i] = {
		// 				text: filteredData[i].processAlias,
		// 				value: filteredData[i].id
		// 			}
		// 		}

		// 		console.log(processList.value)
		// 	}
		// 	baseDialog.value.open();
		// })

		// getAvailableCarrierList(store.planDetails.id, store.curDeptDetails.deptId).then(res => {
		// 	if (res.code == 200) {
		// 		carrierList.value = res.data;
		// 	}
		// })

		Promise.all([getProcessList({
			deptId: store.curDeptDetails.deptId
		}), getAvailableCarrierList({
			planDetailId: store.planDetails.id,
			deptId: store.curDeptDetails.deptId
		})]).then(([res, response]) => {
			if (res.code == 200) {
				//过滤出工序交集
				let filteredData = store.planDetails.processSequence.filter((item1) =>
					res.data.some((item2) => item2.processCode === item1.processCode)
				);
				for (let i = 0; i < filteredData.length; i++) {
					processList.value[i] = {
						text: filteredData[i].processAlias,
						value: filteredData[i].id
					}
				}

				console.log(processList.value)
			}
			/* 处理结果格式 */
			carrierList.value = changeResultStructure(response.data)
			console.log(carrierList.value)
			console.log(store.userInfo)
			baseDialog.value.open();
		})
	}
	/**
	 * 处理响应结果
	 */
	function changeResultStructure(data){
		// 用于存放处理后的结果
		const result = {};
		// 遍历原始数组的每个对象
		data.forEach(item => {
		  const { lotCode, place,carrierCode } = item;  
		  // 如果lotCode不存在于结果中，则以该lotCode为键，创建一个新对象
		  if (!result[lotCode]) {  
		    result[lotCode] = {
		      lotCode: lotCode,
		      place: place,
			  carrierCode: carrierCode
		    };
		  // 如果lotCode已存在于结果中，则将place进行字符串拼接
		  } else {
			  if (result[lotCode].place !== place){
				  result[lotCode].place += `, ${place}`;
			  }
			result[lotCode].carrierCode += `, ${carrierCode}`;
		  }
		});
		return Object.values(result);
	}

	function close() {
		baseDialog.value.close()
	}

	function reset() {
		selectedProcess.value = 0;
		processList.value = [];
		curProcessId.value = '';
		carrierList.value = [];
	}

	function handleProcessChange(e) {
		if (e == '' || e == null) {
			Promise.all([getProcessList({
				deptId: store.curDeptDetails.deptId
			}), getAvailableCarrierList({
				planDetailId: store.planDetails.id,
				deptId: store.curDeptDetails.deptId
			})]).then(([res, response]) => {
				if (res.code == 200) {
					//过滤出工序交集
					let filteredData = store.planDetails.processSequence.filter((item1) =>
						res.data.some((item2) => item2.processCode === item1.processCode)
					);
					for (let i = 0; i < filteredData.length; i++) {
						processList.value[i] = {
							text: filteredData[i].processAlias,
							value: filteredData[i].id
						}
					}

					console.log(processList.value)
				}
				/* 处理结果格式 */
				carrierList.value = changeResultStructure(response.data);
				baseDialog.value.open();
			})
		} else {
			let processIds = []
			for (let i = 0; i < store.planDetails.processSequence.length; i++) {
				processIds.push(store.planDetails.processSequence[i].id)
				if (store.planDetails.processSequence[i].id == selectedProcess.value) {
					break;
				}
			}
			curProcessId.value = processIds.join(',')
			getAvailableCarrierList({
				planDetailId: store.planDetails.id,
				deptId: store.curDeptDetails.deptId,
				processId: curProcessId.value
			}).then(res => {
				if (res.code == 200) {
					carrierList.value = changeResultStructure(res.data);
				}
				console.log(res)
			})
		}
	}

	defineExpose({
		open
	})
</script>

<style lang="scss">
	$nav-height: 60rpx;

	.dialog-body {
		overflow: auto;

		.selectedProcess {
			width: 88%;
			margin: 20rpx auto 40rpx;
		}
		.carrierList-title {
			width: 100%;
			border-bottom: 1rpx solid #999999;
			padding-bottom: 16rpx;
			margin-bottom: 16rpx;
		}
		.carrierList {	
			width: 100%;
			flex-wrap: wrap;
			justify-items: flex-start;
			align-content: flex-start;
			text-align: center;
			height: auto;
			max-height: 300rpx;
			overflow: auto;
			// padding-left: calc((100% - 54rpx - 6rpx - 84%) / 2);
			
			.carrierItem {
				width: 100%;
				height: auto;
				line-height: 64rpx;
				text-align: center;
				justify-content: flex-start;
				align-items: center;
				border-bottom: 1rpx solid #999999;
			}
		}
	}
</style>