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 uni-row">
			<view class="carrierItem" v-for="(item,index) in carrierList">{{ item.carrierCode }}</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(0)
	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 = response.data;
			baseDialog.value.open();
		})
	}

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

	function reset() {
		selectedProcess.value = 0;
		processList.value = [];
		curProcessId.value = 0;
		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 = response.data;
				baseDialog.value.open();
			})
		}else {
			for (let i = 1; i < store.planDetails.processSequence.length; i++) {
				if (store.planDetails.processSequence[i].id == selectedProcess.value) {
					curProcessId.value = store.planDetails.processSequence[i - 1].id;
					console.log(curProcessId.value)
					break;
				}
			}
			getAvailableCarrierList({
				planDetailId: store.planDetails.id,
				deptId: store.curDeptDetails.deptId,
				processId: curProcessId.value
			}).then(res => {
				if(res.code == 200){
					carrierList.value = 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 {
			width: 100%;
			flex-wrap: wrap;
			// justify-content: space-evenly;
			justify-items: flex-start;
			align-content: flex-start;
			text-align: center;
			height: 300rpx;
			overflow: auto;
			padding-left: calc((100% - 54rpx - 6rpx - 84%) / 2) ;
			
			.carrierItem {
				border: 1rpx solid #999;
				border-radius: 8rpx;
				width: 28%;
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				margin: 8rpx;
			}
		}
	}
</style>