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">{{ item['lotCode'] }}</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['nextProcess'] ? item['nextProcess'].processAlias : '-' }}
						(<view style="color:  #1684fc;" @click.stop="handleClickProcessList(item)">&nbsp;工艺列表&nbsp;
						</view>)
					</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
	} from 'vue'
	import {
		getDictInfoByType
	} from '@/api/dict/dict.js'

	const baseDialog = ref(null)
	const lotData = ref(null)
	const curDaywork = ref({})
	const workshopList = ref([])
	const curProcessAfte = ref([])
	const deptList = ref([])
	const showRight = ref(null) // 抽屉
	function open(data) {
		lotData.value = data
		baseDialog.value.open()
		workshopList.value = [{
				value: '1762872520725155842',
				text: '一号车间'
			},
			{
				value: '1762874510792380417',
				text: '二三车间'
			}
		];

		deptList.value = [{
			value: 11,
			text: '热处理'
		}];
		init()
	}

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

	function handleClickProcessList(item) {
		let curProcessAfterList = [{
			processAlias: '下料'
		}, {
			processAlias: '大切断'
		}, {
			processAlias: '分选'
		}, {
			processAlias: '下料'
		}, {
			processAlias: '大切断'
		}, {
			processAlias: '分选'
		}];
		// let nextIndex = 0;
		// for (let i = 0; i < item.processSequence.length; i++) {
		// 	if (item.nextProcess.id == item.processSequence[i].id) {
		// 		nextIndex = i;
		// 	}
		// }
		// for (let i = 0; i < item.processSequence.length; i++) {
		// 	if (i >= nextIndex) {
		// 		curProcessAfterList.push(item.processSequence[i]);
		// 	}
		// }
		// console.log(curProcessAfterList)
		curProcessAfte.value = curProcessAfterList;
		showRight.value.open();
	}
	//切换车间
	function handleChangeWorkshop() {}
	//结束扫码
	function handleFinishScan() {

	}
	//继续扫码
	function handleContinueScan() {

	}

	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>