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

<template>

	<view>
		<view class="col userInp " style="display: flex; align-items: center;border: 1px solid #E3E5E5">
			<text class="label lable150 rx-cc" style="border-right: 1px solid #E3E5E5;">规格名称：</text>
			<!-- multiple -->
			<view style="padding-left: 5rpx;">{{ specText }}</view>
		</view>
		<view v-for="(item, i) in list" :key="i">
			<view class="title_box rx-bc">
				<view class="name">{{ item.title }}

				</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></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.title }}单元</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">

							</view>
						</view>

					</view>

				</view>



				<view class="content_table2" v-if='item.splitList.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">
						<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">
									{{ it.quantity }} {{ it.unit }}/{{
										it.packageUnit }}

								</view>
								<view class="item ww50">
									{{ it.code }}
								</view>
								<view class="item ww10 rx-cc" v-if="!it.parentId" @click="handleCheck(idx, it)">

								</view>

							</view>

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



		</view>
	</view>
</template>

<script>
export default {
	props: {
		objData: {
			type: Object,
			default: () => { }
		},

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

	},
	watch: {
		objData: {
			handler(val) {
				this.specText = val.specText || '';

				const createPackageObj = (title, prefix) => ({
					title,
					splitList: val[`${prefix}Package`],
					packageCell: val[`${prefix}PackageCell`],
					packageUnit: val[`${prefix}PackageUnit`],
					conversionUnit: val[`${prefix}ConversionUnit`],
					formedNumLast: val[`${prefix}FormedNumLast`]
				});

				this.list = [
					createPackageObj('最小包装', 'minimum'),
					createPackageObj('内包装', 'within'),
					createPackageObj('外包装', 'outside')
				];

				// this.specText = val.specText || '';

				// let minimumObj = {
				// 	title: '最小包装',
				// 	splitList: val.minimumPackage,
				// 	packageCell: val.minimumPackageCell,
				// 	packageUnit: val.minimumPackageUnit,
				// 	conversionUnit: val.minimumConversionUnit,
				// 	formedNumLast: val.minimumFormedNumLast
				// }
				// let withinObj = {
				// 	title: '内包装',
				// 	splitList: val.withinPackage,
				// 	packageCell: val.withinPackageCell,
				// 	packageUnit: val.withinPackageUnit,
				// 	conversionUnit: val.withinConversionUnit,
				// 	formedNumLast: val.withinFormedNumLast
				// }
				// let outsideObj = {
				// 	title: '外包装',
				// 	splitList: val.outsidePackage,
				// 	packageCell: val.outsidePackageCell,
				// 	packageUnit: val.outsidePackageUnit,
				// 	conversionUnit: val.outsideConversionUnit,
				// 	formedNumLast: val.outsideFormedNumLast
				// }
				// let arr = [minimumObj, withinObj, outsideObj];

				// this.list = arr;

				console.log(this.list);
			},
			deep: true,
			immediate: true,
		},
	},
	data() {
		return {
			oneCheck: false,
			twoCheck: false,
			list: [],
			clientEnvironmentId: uni.getStorageSync("userInfo") && uni.getStorageSync("userInfo").clientEnvironmentId,  // *1 主环境-601环境   2 soll-索尔环境    3 tg-碳谷环境


		}
	},

	created() {


	},

	methods: {


		handOneCheck() {

			if (this.oneCheck) {
				this.oneCheck = false
				this.objData.packingReportList.forEach(e => {
					e.isChecked = false
				})
			} else {
				this.oneCheck = true
				this.objData.packingReportList.forEach(e => {
					e.isChecked = true
				})
			}
			this.$forceUpdate()
		},

		handleCheck(idx, it) {
			this.$set(this.objData.packingReportList[idx], 'isChecked', !it.isChecked)
			this.$forceUpdate()
		},


		handTwoCheck() {
			if (this.twoCheck) {
				this.twoCheck = false
				this.objData.packingReportMarginList.forEach(e => {
					e.isChecked = false
				})
			} else {
				this.twoCheck = true
				this.objData.packingReportMarginList.forEach(e => {
					e.isChecked = true
				})
			}
			this.$forceUpdate()
		},
		handleCheckTwo(idx, it) {
			this.$set(this.objData.packingReportMarginList[idx], 'isChecked', !it.isChecked)
			this.$forceUpdate()
		},





		scrolltolower() {

		},


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

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


}

.material {
	margin-top: 10rpx;


}

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


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