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 jsColor" @click="calculation()" v-if="clientEnvironmentId != 3">计算</view>
					<view class="item ww10" v-if="clientEnvironmentId == 3"></view>
				</view>

				<view class="table">
					<u-list @scrolltolower="scrolltolower" class="z_list" style="height: 100% !important;">
						<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>





		<SearchPopup mode="center" v-if='show'>
			<template v-slot:list>
				<view class="search_list">

					<u-form labelPosition="left" :model="formData" labelWidth="180" labelAlign="left" class="baseForm">

						<u-form-item label="外包装数:" class="required-form" borderBottom prop="assetType">
							<input class="uni-input" v-model="formData.wPackNum" style="width: 280rpx;"
								placeholder="外包装数"></input> / {{splitList[0].unit}}
						</u-form-item>

					</u-form>

				</view>
			</template>

			<template v-slot:operate>
				<view class="operate_box rx-bc">
					<u-button size="small" class="u-reset-button" @click="calculationClose()">
						取消
					</u-button>

					<u-button type="success" size="small" class="u-reset-button" @click="calculationReset()">
						重置
					</u-button>


					<u-button type="success" size="small" class="u-reset-button" @click="calculationSave()">
						确定
					</u-button>

				</view>
			</template>

		</SearchPopup>

	</view>
</template>

<script>
	import {
		getByCode
	} from '@/api/pda/common.js'
	import {
		packingReport,
		getPackingReport,
		packingReportRepeat,
		getPackingReportRepeat
	} from '@/api/pda/workOrder.js'
	import SearchPopup from '../../components/searchPopup.vue'
	export default {
		components: {
			SearchPopup
		},
		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: [],


				show: false,
				formData: {
					wPackNum: null,
				},
				clientEnvironmentId: uni.getStorageSync("userInfo") && uni.getStorageSync("userInfo").clientEnvironmentId,






			}
		},

		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.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.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 _arr = []
				_arr = this.temporaryList.map(m => {
					return {
						...m,
						isChecked: 1
					}
				})

				let param = {
					detailList: _arr,
					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
			},

			calculation() {
				this.show = true
			},

			calculationSave() {
				let count = this.splitList.filter(item => item.isChecked != 1).length;

				if (this.formData.wPackNum <= count) {
					for (let i = 0; i < this.formData.wPackNum; i++) {
						this.splitList[i].check = 1
					}
					this.handleCheck(0, 0)
					this.calculationClose()

				} else {
					uni.showToast({
						icon: 'none',
						title: '外包装数超出内包装条数'
					})
				}

			},

			calculationClose() {
				this.show = false
			},

			calculationReset() {

				this.formData.wPackNum = null
				this.splitList.forEach(f => {
					f.check = null
				})
				this.temporaryList = []
				this.show = false

			}
		},
	}
</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%;
			}

			.jsColor {
				color: $theme-color;
				font-size: 20rpx;
			}

		}

		.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;
	}


	.search_list {
		min-height: 100rpx;
		width: 80vw;

		/deep/ .baseForm {
			padding: 0 20rpx;
		}
	}

	.operate_box {
		padding: 10rpx 32rpx;

		/deep/ .u-button {
			width: 30%;
		}
	}
</style>