ezhizao_dms_app/components/dialog-lotReporting/dialog-lotReporting.vue

<template>
	<dialog-base class="dialog-body" ref="baseDialog" title="添加批次报工">
		<view style="overflow: auto;height: 800rpx;">
			<!-- <view v-for="(item, index) in lotData" :key="index" class="list-item"> -->
				<view class="item-info uni-row">
					<text class="label">批次号</text>
					<text class="label right">{{ lotData.map(v => v.lotCode).join(",") }}</text>
				</view>
			<!-- 	<view class="item-info uni-row">
					<text class="label">生产计划单号</text>
					<text class="label right">{{ item['productionPlanNo'] }}</text>
				</view> -->
				<view class="item-info uni-row">
					<text class="label">产品描述</text>
					<text class="label right">{{ item['productDescription'] }}</text>
				</view>
				<view class="item-info uni-row">
					<text class="label">箱号</text>
					<text class="label right">{{ item['carrierName'] }}</text>
				</view>
				<view class="item-info uni-row">
					<text class="label">当前序</text>
					<view class="label right uni-row">{{ item['process'] ? item['process'].processAlias : '-' }}
						(<view style="color:  #1684fc;" @click.stop="handleClickProcessList(item)">&nbsp;工艺列表&nbsp;
						</view>)
					</view>
				</view>
				<view class="item-info uni-row">
					<text class="label">下序</text>
					<view class="label right uni-row">{{ item['nextProcess'] ? item['nextProcess'].processAlias : '-' }}
					</view>
				</view>
				<!-- <view class='middle'>
					<view class='segment'></view>
					<uni-icons type="paperclip" size="30" style="margin: 10rpx;"></uni-icons>
					<view class='segment'></view>
				</view> -->
			<!-- </view> -->
		</view>
		<view class="list-item">
			<view class="item-info uni-row">
				<text class="label">下序车间</text>
				<uni-data-select v-model="curDaywork.workshopId" :localdata="workshopList"
					@change="handleChangeWorkshop" :clear="false"
					style="outline: 2rpx solid #999999;border-radius: 10rpx;"></uni-data-select>
			</view>
			<view class="item-info uni-row">
				<text class="label">下序工段</text>
				<uni-data-select v-model="curDaywork.deptId" :localdata="deptList" :clear="false"
					style="outline: 2rpx solid #999999;border-radius: 10rpx;"></uni-data-select>
			</view>
		</view>

		<!-- 抽屉 -->
		<view>
		</view>
		<view style="z-index: 99999;">
			<uni-drawer ref="showRight" mode="right" :mask-click="true">
				<view class="scroll-view">
					<scroll-view class="scroll-view-box" style="height:100%;">
						<view style="width: 100%;text-align: center;;font-size: 48rpx;margin: 48rpx 0 24rpx 0;">工艺列表
						</view>
						<view style="font-size: 24rpx;width: 100%;text-align: center;color: red;margin-bottom: 48rpx;">
							仅显示当前工序后面工艺</view>
						<view class="info-content" v-for="(item,index) in curProcessAfte" :key="index"
							style="width: 100%;margin: 8rpx 0 8rpx 14%;">
							<text>{{ index + 1 }}.{{item.processAlias}}</text>
						</view>
					</scroll-view>
				</view>
			</uni-drawer>
		</view>
		<view class="add-btn-container uni-row">
			<button type="default" class="leftBtn" @click="handleFinishScan">结束扫码</button>
			<button type="default" class="rightBtn" @click="handleContinueScan">继续扫码</button>
		</view>
	</dialog-base>
</template>

<script setup>
	import {
		ref,
		getCurrentInstance,
		toRef
	} from 'vue'
	import {
		getDictInfoByType
	} from '@/api/dict/dict.js'
	import {
		getQuickDayworkList,
		finishQuick,
		getDayworkByCarrierId,
		reportDaywork
	} from '@/api/business/quickDaywork'

	const props = defineProps({
		getList: {
			type: Function,
			default: () => {}
		}
	})
	
	const emit = defineEmits();
	const baseDialog = ref(null)
	const lotData = ref(null)
	const curDaywork = ref({})
	const workshopList = ref([])
	const curProcessAfte = ref([])
	const deptList = ref([])
	const item = ref({})
	const showRight = ref(null) // 抽屉
	function open(data) {
		lotData.value = data.items
		item.value = data.items[0]
		// lotData.value.map(v => v.lotCode).join(",")
		baseDialog.value.open()
		workshopList.value = data.workShops.map(v => ({
			value: v.id,
			text: v.name,
			deptList: v.depts
		}))
		curDaywork.value = {}
		deptList.value = []
		init()
	}

	function init() {
		//查询车间
	}

	function handleClickProcessList(item) {
		curProcessAfte.value = lotData.value[0].nextProcesses;
		showRight.value.open();
	}
	//切换车间
	function handleChangeWorkshop(arg) {
		// console.log(arg)
		deptList.value = workshopList.value.find(v => v.value === arg).deptList.map(v => ({
			value: v.deptId,
			text: v.deptName
		}))
	}
	//结束扫码
	function handleFinishScan() {
		// 保存新报工信息
		// 然后关闭dialog
		// console.log(props)
		addDayworkItem(() => {
			baseDialog.value.close()
			props.getList()
		})
	}

	function addDayworkItem(callback) {
		// 判断选择下工段和下车间
		if (curDaywork.value.workshopId == null || curDaywork.value.deptId == null || deptList.value.find(v => v.value ===
				curDaywork.value.deptId) == null) {
			uni.showToast({
				icon: 'none',
				title: '请选择周转车间和下序工段'
			})
			return
		}
		const params = lotData.value.map(v => ({
			...v,
			daywork: {
				...v.daywork,
				processId: v.process.id,
				technologicalProcessDetailId: v.process.technologicalProcessDetailId
			},
			quickInfo: {
				deptId: curDaywork.value.deptId,
				workshopId: curDaywork.value.workshopId,
				deptName: deptList.value.find(v => v.value === curDaywork.value.deptId).text
			}

		}))
		// console.log(params)
		reportDaywork(params).then(res => {
			callback()
		})
		// callback()
	}
	//继续扫码
	function handleContinueScan() {
		// 保存报工信息
		// 调用前一个页面的扫码方法
		// 关闭dialog
		// console.log(props)
		addDayworkItem(() => {
			props.getList()
			baseDialog.value.close()
			emit("scan")
		})
	}

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

	defineExpose({
		open
	})
</script>

<style lang="scss">
	.dialog-body {
		// height: 60%;
		// margin: auto auto;
		overflow: auto;
	}

	.item-info {
		margin: 8rpx;

		.label {
			font-size: 28rpx;
			width: 220rpx;
			color: #808080;

			&.right {
				flex: 1;
				color: #000000;
			}
		}
	}

	.middle {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center
	}

	.segment {
		width: 280rpx;
		background-color: rgba(213, 213, 213, 1);
		border: 1rpx solid rgba(213, 213, 213, 1);
	}

	.middle {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center
	}

	.segment {
		width: 80rpx;
		background-color: rgba(213, 213, 213, 1);
		border: 1rpx solid rgba(213, 213, 213, 1);
	}

	.add-btn-container {
		margin-top: 32rpx;

		.leftBtn {
			flex: 1;
			background-color: rgb(164, 173, 179);
			color: #FFFFFF;

		}

		.rightBtn {
			flex: 1;
			margin-left: 24rpx;
			background-color: rgb(91, 214, 165);
			color: #FFFFFF;

		}
	}
</style>