aiot-app/pages/pda/jobBooking/components/packingBom.vue

<template>

	<view>
		<view class="title_box rx-bc">
			<view class="name">内包装</view>
		</view>

		<view class="material ">

			<view class="content_table">
				<view class="item">
					<view class="lable rx-cc">包装总数</view>
					<view class="content content_num">
						<input class="uni-input" v-model="formedNumLast" type='digit'></input>
						<view class="unit">{{objData.unit}}</view>
					</view>
				</view>

				<view class="item rx-sc">
					<view class="rx ww55 ">
						<view class="lable lable150 rx-cc ">内包装单元</view>
						<view class="content content_num">
							<input class="uni-input" v-model="quantity"></input>

						</view>
					</view>

					<view class="rx ww45">
						<view class="rx-cc ww80">
							<view style="max-width: 100rpx; font-size: 24rpx;">{{objData.unit}}</view>/
						</view>
						<view class="content rx-sc">
							<zxz-uni-data-select :localdata="unitList" v-model="unit" dataValue='Key' format='{Value}'
								dataKey="Key" filterable :clear='false'></zxz-uni-data-select>

							<view class="penalize" @click="handleSplit">确认</view>
						</view>
					</view>

				</view>

			</view>




			<view class="content_table2" v-if='splitList.length'>
				<view class="head row rx-sc">
					<view class="item ww10">序号</view>
					<view class="item ww30">数量</view>
					<view class="item ww50">条码</view>
					<view class="item ww10"></view>
				</view>

				<view class="table">
					<u-list @scrolltolower="scrolltolower" class="z_list">
						<view class="tr row rx-sc" v-for="(it, idx) in splitList" :key='idx'>
							<view class="item ww10 rx-cc ">{{ it.computeSize }}</view>
							<view class="item ww30 content_num rx-sc">
								<input class="uni-input" v-model="it.quantity" type="digit"></input>
								<view style="width: 260rpx; font-size: 22rpx;"> {{objData.unit}}/ {{it.unit}}</view>
							</view>
							<view class="item ww50">
								{{ it.code }}
							</view>
							<view class="item ww10 rx-cc" v-if="!it.parentId" @click="handleCheck( idx, it)">
								<image class="check" v-if='it.check == 1' src='@/static/check.png'>
								</image>
								<image class="check" v-if='it.check == 0 || it.check == null ' src='@/static/check_no.png'>
								</image>
							</view>

						</view>

					</u-list>
				</view>
			</view>



		</view>


		<view class="material ">

			<view class="title_box rx-bc">
				<view class="name">外包装</view>
			</view>


			<view class="content_table2" v-if='temporaryList.length'>
				<view class="head row rx-sc">
					<view class="item ww10">序号</view>
					<view class="item ww30">数量</view>
					<view class="item ww50">条码</view>
					<view class="item ww10"></view>
				</view>

				<view class="table">

					<view class="tr row rx-sc" v-for="(it, idx) in temporaryList" :key='idx'>
						<view class="item ww10 rx-cc ">{{ idx + 1 }}</view>
						<view class="item ww30 content_num rx-sc">
							<input class="uni-input" v-model="it.quantity" disabled type="digit"></input>
							<view style="width: 260rpx; font-size: 22rpx;"> {{objData.unit}}/ {{it.unit}}</view>
						</view>
						<view class="item ww50">
							{{ it.code }}
						</view>
						<view class="item ww10 rx-cc">
							<uni-icons custom-prefix="iconfont" type="icon-shanchu" size="20"
								color="#fa3534" @click="handclose(it)"></uni-icons>
						</view>


					</view>

					<view class="tr row rx-sc">
						<view class="item ww10 rx-cc ">合并</view>
						<view class="item ww90  rx-sc">
							总共{{temporaryCount}} {{objData.unit}} / {{this.temporaryNum}} {{unit}}
							--打包成 1
							<zxz-uni-data-select :localdata="unitList" v-model="packUnit" dataValue='Key'
								format='{Value}' dataKey="Key" filterable :clear='false'></zxz-uni-data-select>

							<view class="penalize" @click="handlePack">打包</view>

						</view>


					</view>



				</view>
			</view>




			<!-- 外包装  列表-->
			<view class="content_table2" v-if='packTwoList.length > 0'>
				<view class="head row rx-sc">
					<view class="item ww10">序号</view>
					<view class="item ww30">数量</view>

					<view class="item ww50">条码</view>
					<view class="item ww10"></view>
				</view>

				<view class="table">
					<view class="tr row rx-sc " v-for="(it, idx) in packTwoList" :key='idx'>
						<view class="item ww10 rx-cc ">{{ idx + 1 }}</view>
						<view class="item ww30 content_num rx-sc">
							{{ it.quantity}} {{ objData.unit }} / {{it.unit}}
						</view>



						<view class="item ww50">
							{{ it.code }}
						</view>
						<view class="item ww10 rx-cc">

						</view>


					</view>


				</view>

			</view>









		</view>





	</view>
</template>

<script>
	import {
		getByCode
	} from '@/api/pda/common.js'
	import {
		packingReport,
		getPackingReport,

		packingReportRepeat,
		getPackingReportRepeat
	} from '@/api/pda/workOrder.js'
	export default {
		props: {
			objData: {
				type: Object,
				default: () => {}
			},

			taskId: {
				type: String,
				default: ''
			},

			workOrderId: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				formedNumLast: 0,

				quantity: '',
				unit: '',

				unitList: [],

				splitList: [],



				packUnit: null,
				temporaryNum: 0,
				temporaryCount: 0,
				temporaryList: [],
				packTwoList: []





			}
		},

		created() {
			this.formedNumLast = this.objData.formedNumLast
			this.byCode(),

				this.getPackingDetails()
			this.getPackingDetailsTwo()
		},

		methods: {
			byCode() {
				getByCode('packing_unit').then(res => {

					this.unitList = []

					res.forEach((obj, index) => {
						for (let key in obj) {
							if (obj.hasOwnProperty(key)) { // 确保key是对象自身的属性

								this.unitList.push({
									Key: `${key}`,
									Value: ` ${obj[key]}`
								})


							}
						}
					});

				})
			},


			getPackingDetails() {
				let param = {
					workOrderId: this.workOrderId,
					taskId: this.taskId,
					tier: 1
				}

				getPackingReport(param).then(res => {

					this.splitList = res.detailList
					this.formedNumLast = res.totalQuantity
					this.quantity = res.quantity
					this.unit = res.unit


				})
			},



			handleSplit() {

				if (this.splitList.length) {
					uni.showToast({
						title: '产品已分包',
						icon: 'none'
					})
					return false
				}



				if (!this.formedNumLast) {
					uni.showToast({
						title: '包装总数数量不能为空',
						icon: 'none'
					})
					return false
				}

				if (!this.quantity) {
					uni.showToast({
						title: '内包装单元数量不能为空',
						icon: 'none'
					})
					return false
				}

				if (!this.unit) {
					uni.showToast({
						title: '请选择包装单位',
						icon: 'none'
					})
					return false
				}

				let param = {
					totalQuantity: this.objData.formedNumLast,
					quantity: this.quantity,
					unit: this.unit,
					workOrderId: this.workOrderId,
					taskId: this.taskId,
					tier: 1
				}
				packingReport(param).then(res => {
					this.splitList = res.map(m => {

						return {
							check: false,
							...m
						}
					})

					this.getPackingDetails()
				})


			},

			handleCheck(idx, it) {



				if (it.quantity <= 0) {
					uni.showToast({
						icon: 'none',
						title: '数量为空不能勾选'
					})

					return false
				}
				
				this.$set(this.splitList[idx], 'check', it.check ? 0 : 1)

				this.temporaryList = []


				this.temporaryList = this.splitList.filter(e => {
					return e.check == 1
				})
				this.temporaryNum = 0
				this.temporaryCount = 0
				if (this.temporaryList.length > 0) {
					this.temporaryList.forEach(e => {
						this.temporaryNum = this.temporaryNum + 1
						this.temporaryCount = this.temporaryCount + Number(e.quantity)
					})
				}


			},
			
			
			handclose(it) {
				this.splitList.forEach(f => {
					if(f.computeSize == it.computeSize) {
						f.check = 0
					}
				})
				
				this.temporaryList = []
				
				
				this.temporaryList = this.splitList.filter(e => {
					return e.check == 1
				})
			},

			getPackingDetailsTwo() {
				let param = {
					totalQuantity: this.objData.formedNumLast,
					quantity: this.quantity,
					unit: this.unit,
					workOrderId: this.workOrderId,
					taskId: this.taskId,
					tier: 2,

				}
				getPackingReportRepeat(param).then(res => {
					this.packTwoList = res.detailList
				})
			},

			handlePack() {
				let param = {
					detailList: this.temporaryList,
					quantity: this.temporaryCount,
					totalQuantity: this.formedNumLast,
					unit: this.packUnit,
					taskId: this.taskId,
					workOrderId: this.workOrderId,
					tier: 2
				}

				packingReportRepeat(param).then(res => {
					this.temporaryList = []
					this.getPackingDetails()
					this.getPackingDetailsTwo()
				})
			},


			scrolltolower() {

			},

			getData() {
				let _packingReportMarginList = []

				_packingReportMarginList = this.splitList.filter(e => {
					return !e.parentId
				})

				let packInfo = {
					packingReportList: this.packTwoList,
					packingReportMarginList: _packingReportMarginList,
					formedNumLast: this.formedNumLast
				}
				return packInfo
			},
		},
	}
</script>

<style lang="scss" scoped>
	.title_box {
		margin-top: 20rpx;

		.name {
			font-size: 28rpx;
			font-style: normal;
			font-weight: 400;
			color: $theme-color;
			padding-left: 20rpx;

			position: relative;

			&:before {
				position: absolute;
				content: '';
				left: 0rpx;
				top: 0rpx;
				bottom: 0rpx;
				width: 4rpx;
				height: 28rpx;
				background: $theme-color;
				margin: auto;
			}
		}
	}


	.material {
		margin-top: 10rpx;



		.content_table {
			width: 100%;
			border: 2rpx solid $border-color;

			.item {
				display: flex;
				border-bottom: 2rpx solid $border-color;


				.lable {
					width: 132rpx;
					text-align: center;
					background-color: #F7F9FA;
					font-size: 26rpx;
					border-right: 2rpx solid $border-color;
					flex-shrink: 0;
				}

				.lable220 {
					width: 220rpx !important;
					font-size: 24rpx;
				}

				.lable150 {
					width: 156rpx !important;
					font-size: 24rpx;
				}

				.ww80 {
					width: 80rpx;
				}

				.content {
					width: 518rpx;
					min-height: 64rpx;
					font-size: 28rpx;
					line-height: 28rpx;
					font-style: normal;
					font-weight: 400;
					// padding: 18rpx 8rpx;
					box-sizing: border-box;
					word-wrap: break-word;
					flex-grow: 1 !important;


					.unit {
						padding: 0 4rpx;
						font-size: 24rpx;
						color: #404446;
					}



				}



				&:last-child {
					border-bottom: none;
				}
			}



			.ww55 {
				width: 55%;
			}

			.ww45 {
				width: 45%;
			}


		}
	}




	.content_table2 {
		width: 100%;
		margin-top: 16rpx;

		.row {
			width: 100%;


			.item {

				color: #404446;
				font-size: 28rpx;
				padding-left: 12rpx;

			}

			.color157 {
				color: $theme-color;
			}

			.ww30 {
				width: 30%;
			}

			.ww50 {
				width: 50%;

			}

			.ww90 {
				width: 90%;
			}

			.ww15 {
				width: 15%;
			}

			.ww10 {
				width: 10%;
			}

			.ww30 {
				width: 30%;
			}

		}

		.head {
			height: 64rpx;
			background: #F7F9FA;
			border-top: 2rpx solid #E3E5E5;
			border-left: 2rpx solid #E3E5E5;

			.item {
				height: 64rpx;
				line-height: 64rpx;
				border-right: 2rpx solid #E3E5E5;
				box-sizing: border-box;
			}
		}



		.tr {
			border-top: 2rpx solid #E3E5E5;
			border-left: 2rpx solid #E3E5E5;


			.item {
				font-size: 24rpx;
				min-height: 64rpx;
				display: flex;
				align-items: center;
				border-right: 2rpx solid #E3E5E5;
				box-sizing: border-box;
				white-space: normal;
				word-break: break-all;

			}

			&:last-child {
				border-bottom: 2rpx solid #E3E5E5;

			}
		}
	}




	.content_num {
		display: flex;
		align-items: center;
		padding: 0 4rpx;

		/deep/ .uni-input-input {
			border: 2rpx solid #F0F8F2;
			background: #F0F8F2;
			color: $theme-color;
		}


	}

	.penalize {
		width: 86rpx;
		line-height: 60rpx;
		background: $theme-color;
		font-size: 24rpx;
		text-align: center;
		color: #fff;
	}

	.check {
		width: 30rpx;
		height: 30rpx;
	}

	.z_list {
		max-height: 500rpx;
	}
</style>