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

<template>
	<view>
		<view class="col userInp " style="display: flex; align-items: center;border: 1px solid #E3E5E5;border-top: 0;">
			<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: {
		packInfo: {
			type: Object,
			default: () => { }
		},

	},
	watch: {
		packInfo: {
			handler(val) {
				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 {
			specText:'',
			list: [],









		}
	},

	created() {



	},

	methods: {





		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>