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

<template>

	<view>
		<view class="title_box rx-bc">
			<view class="name">最小包装单元</view>

			<view class="btn_box rx-bc" @click="handCancelPacking">
				重置打包
			</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="title_box rx-bc">
			<view class="name">内包装</view>

			<view class="btn_box rx-bc" @click="handCancelPacking">
				重置打包
			</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" :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 {
	cancelPacking,
	packingReport,
	getPackingReport,
	packingReportRepeat,
	packageDisposition,
	getPackingReportRepeat
} from '@/api/pda/workOrder.js'
import SearchPopup from '../../components/searchPopup.vue'
export default {
	components: {
		SearchPopup
	},
	props: {
		categoryId: {
			type: String,
			default: ''
		},
		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: [],
			newCategoryId:'',

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

		}
	},
	watch:{
		categoryId:{
			handler(newVal){
				console.log(newVal,'newVal');
				this.newCategoryId = newVal;
			},
			deep:true,
			immediate:true
		},
		
	},
	created() {
		this.formedNumLast = this.objData.formedNumLast

		this.byCode(),
			this.packageDispositionFn();
		this.getPackingDetails()
		this.getPackingDetailsTwo()
	},

	methods: {
		async packageDispositionFn() {
			const res = await packageDisposition(this.newCategoryId)
			console.log(res, '1111111');
		},


		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

			})
		},


		handCancelPacking() {
			uni.showModal({
				title: `是否清空包装？`,
				content: "",
				confirmText: "确认",
				success: () => {
					let param = {
						workOrderId: this.workOrderId,
						taskId: this.taskId,
					}
					cancelPacking(param).then(res => {
						this.getPackingDetails()
						this.getPackingDetailsTwo()
					})
				},

			})


		},


		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 && count != 0) {
				for (let i = 0; i < this.formData.wPackNum; i++) {
					this.splitList[i].check = 1
				}
				this.handleCheck(0, 0)
				this.calculationClose()

			} else {
				if (count != 0) {
					for (let i = 0; i < count; i++) {
						this.splitList[i].check = 1
					}
					this.handleCheck(0, 0)
					this.calculationClose()
				}
				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;
		}
	}


	.btn_box {
		color: $theme-color;
	}
}


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