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

<template>

	<view>
		<view class="col userInp " style="display: flex; align-items: center;">
			<text class="label lable150 rx-cc">规格选择：</text>
			<!-- multiple -->
			<zxz-uni-data-select :localdata="localdataList" v-model="Usertype"
				@change="changeUserType"></zxz-uni-data-select>
		</view>


		<view v-for="(item, i) in DispositionList" :key="i">
			<view class="title_box rx-bc">
				<!-- 最小包装单元 -->
				<view class="name">{{ item.titel }}</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="item.formedNumLast" type="number"  :disabled="i != 0"
								@input="changeinput"></input>

							<view class="unit">{{ item.packageUnit }}</view>

						</view>
					</view>

					<view class="item rx-sc">
						<view class="rx ww55 ">
							<view class="lable lable150 rx-cc ">{{ item.titel }}单元</view>
							<view class="content content_num">
								<input class="uni-input" v-model="item.packageCell" disabled></input>
								<view style="max-width: 100rpx; font-size: 24rpx;">{{ item.packageUnit }}</view>
							</view>
						</view>

						<view class="rx ww45">
							<view class="rx-cc ww80">
								/<view style="max-width: 100rpx; font-size: 24rpx;">{{ item.conversionUnit }}</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='item.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 item.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;"> {{ it.unit }}/{{
										item.conversionUnit }}
									</view>
								</view>
								<view class="item ww50">
									{{ it.code }}
								</view>
							</view>

						</u-list>
					</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: '',
			Usertype: "",// 规格
			unitList: [],

			splitList: [],
			localdataList: [],


			packUnit: null,
			temporaryNum: 0,
			temporaryCount: 0,
			temporaryList: [],
			packTwoList: [],
			DispositionList: [],
			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
		},
		objData: {
			handler(newVal) {
				this.formedNumLast = newVal.formedNumLast;
				console.log(this.formedNumLast );
			},
			deep: true,
			immediate: true
		}
	},
	created() {
		// this.formedNumLast = this.objData.formedNumLast;

		this.byCode();

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

	methods: {
		// 输入数量变化
		changeinput(e){
			console.log(e);

		},

		changeUserType(e) {

			this.listFn(e.arr);
		},
		groupBy(arr, key) {
			return arr.reduce((acc, obj) => {
				const groupKey = obj[key];
				if (!acc[groupKey]) {
					acc[groupKey] = [];
				}
				console.log();
				acc[groupKey].push(obj);
				return acc;
			}, {});
		},

		async packageDispositionFn() {
			let that = this;
			const res = await packageDisposition(this.newCategoryId);
			
			if (res.length) {
				res.shift();
				let data = JSON.parse(JSON.stringify(res));
				let list = this.groupBy(data, 'code');
				Object.entries(list).forEach(([key, value]) => {
					let obj = {
						text: value[0].name,
						arr: value,
						value: key
					}
					this.localdataList.push(obj);
				});

				this.Usertype = this.localdataList[0].value;
				this.listFn(this.localdataList[0].arr);

			}

		},


		listFn(arr) {
			let obj = {
				withinQuantity: "",
				withinUnit: '',
				outsideQuantity: '',
				outsideUnit: ''
			}
			let textList = ['最小包装', '内包装', '外包装'];
			arr.map(async (v, i) => {
				v.splitList = [];
				v.titel = textList[i];
				if (i === 0) {
					v.formedNumLast = this.formedNumLast;
					v.splitList = await this.handleSplit(v)||[];
					// this.$nextTick(c () => {
						
					// })
				}

				if (i === 1) {
					obj.withinQuantity = v.packageCell;
					obj.withinUnit = v.conversionUnit
				}
				if (i === 2) {
					obj.outsideQuantity = v.packageCell;
					obj.outsideUnit = v.conversionUnit;
				}


				
			})
		
			this.$set(this,'DispositionList',arr)
		},


		sunNum(v, i) {
			let _this = this;
			this.$nextTick(() => {
				switch (i) {
					case 0:
						console.log(_this.formedNumLast);
						return _this.formedNumLast;
					case 1:
						return v.splitList.length || 0
					case 2:

						return v.splitList.length || 0

				}
			})


		},

		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(v) {
			if (this.splitList.length) {
				uni.showToast({
					title: '产品已分包',
					icon: 'none'
				})
				return false
			}

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

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

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

			let param = {
				totalQuantity: v.formedNumLast,
				quantity: v.packageCell,
				unit: v.packageUnit,
				packageUnit: v.conversionUnit,
				workOrderId: this.workOrderId,
				taskId: this.taskId,
				tier: 1
			}

			return new Promise((resolve, reject) => {
				packingReport(param).then(res => {
					this.splitList = res.map(m => {

						return {
							check: false,
							...m
						}
					})
					resolve(this.splitList)
					// 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(v) {
			console.log(v);
			let param = {
				totalQuantity: v.formedNumLast,
				quantity: v.packageCell,
				unit: v.conversionUnit,
				workOrderId: this.workOrderId,
				taskId: this.taskId,
				tier: 2,

			}

			getPackingReportRepeat(param).then(res => {
				resolve(res.detailList)
			})

		},

		handlePack(v, s) {
			let _arr = []
			_arr = s.map(m => {
				return {
					...m,
					isChecked: 1
				}
			})
			console.log(_arr, '123');

			let param = {
				detailList: _arr,
				quantity: v.temporaryCount,
				totalQuantity: v.formedNumLast,
				unit: v.packageUnit,
				taskId: this.taskId,
				workOrderId: this.workOrderId,
				tier: 2
			}
			return new Promise((resolve, reject) => {
				packingReportRepeat(param).then(res => {
					console.log(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;

		}
	}
}

.label {
	display: flex;
	height: 70rpx;
	width: 86px !important;
	font-size: 13px;
	align-items: center;
	justify-content: center;
	background-color: #F7F9FA;
}


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