aiot-app/pages/pda/picking/components/outsourceOrder.vue

<template>
	<view>
		<u-popup :show="show" :mode='mode' :closeOnClickOverlay='false'>

			<view :style="{paddingTop: mode == 'top' ?  topHight + 'px' : ''}">

				<view class="box_list">

					<u-list @scrolltolower="scrolltolower" class="z_list">
						<checkbox-group v-for="(item, index) in list" :key="index"
							@change="e => selectVal(e, item, index)">
							<label class="listBox rx-bs">

								<view class="listBox-sel">
									<checkbox :value="item.code" color="#fff" :checked="item.checked" />
								</view>

								<view class="listBox-con">
									<view class="listBox-top rx-bc">
										<view> {{ item.name }} {{item.checked}} </view>
										<view class="code">
											{{ item.rootCategoryLevelId == 4 ?  item.codeNumber :  item.code}}
										</view>
									</view>

									<view class="listBox-bottom rx">

										<view class="items">
											<text>委外类型</text> {{ item.deliveryMethod == 2 ? '分批到货' : '一次到货'}}
										</view>

										<view class="items">
											<text>委外数量</text>
											{{item.deliveryMethod == 2 ? item.purchaseQuantity :  item.totalCount}}
										</view>
										
										<view class="items" style="width: calc(100% - 2px);" v-if="item.deliveryMethod == 2">
											<text>批次号</text>
											{{ item.batchNo  }}
										</view>
										

										<view class="items" style="width: calc(100% - 2px);">
											<text>委外到货时间</text>
											{{ item.deliveryMethod == 2 ? item.requireDeliveryTime  : item.requireDeliveryTime }}
										</view>
										
									


									</view>



								</view>




							</label>
						</checkbox-group>

					</u-list>
				</view>

				<view class="operate_box  rx-bc">

					<u-button size="small" class="u-reset-button" @click="close">
						取消
					</u-button>


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

				</view>


			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mode: 'center',
				show: false,
				topHight: 20 || 20,

				list: []
			}
		},
		methods: {
			close() {
				this.show = false
			},
			open(list) {
				this.list = []
				list.forEach(f => {
					if (f.timeList.length > 0) {
						f.timeList.forEach(o => {
							this.list.push({
								...f,
								...o
							})

						})
					} else {
						this.list.push(f)
					}
				})

				console.log(this.list)
				this.show = true
			},

			scrolltolower() {},

			handOK() {
     
			
			let _arr = []
			this.list.forEach(f => {
				if(Object.prototype.hasOwnProperty.call(f, 'checked') && f.checked == true) {
					_arr.push({
						id: f.id,
						code: f.code,
						batchNo: f.batchNo
					})
				}
			})
			
			this.$emit('outsourceEmit' ,_arr)
			this.show = false
			},

			selectVal(e, val, index) {
				this.list[index].checked = !this.list[index].checked
			},

			timeTure(timestamp) {

				console.log(timestamp,'timestamp');

				const date = new Date(Number(timestamp)); // 创建 Date 对象
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要加1并补零
				const day = String(date.getDate()).padStart(2, '0'); // 补零
				const hours = String(date.getHours()).padStart(2, '0'); // 补零
				const minutes = String(date.getMinutes()).padStart(2, '0'); // 补零
				const seconds = String(date.getSeconds()).padStart(2, '0'); // 补零

				// 格式化输出
				const formattedDate = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
				return formattedDate

			}
		}
	}
</script>

<style lang="scss" scoped>
	.z_list {
		max-height: 860rpx;
	}

	.box_list {
		min-height: 100rpx;
		width: 90vw;

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

	.operate_box {
		padding: 10rpx 32rpx;

		/deep/ .u-button {
			width: 40%;
		}
	}


	.listBox {
		margin-top: 8rpx;
		padding: 8rpx 24rpx;
		background: #f5f5f5;


		/deep/ .uni-checkbox-input-checked {
			background-color: $theme-color !important;
			border-color: $theme-color !important;
		}

		.listBox-con {
			width: 650rpx;
			font-weight: 400;
		}

		.listBox-top {
			margin-top: 6rpx;
			color: #090A0A;
			font-size: 28rpx;
			font-style: normal;
			font-weight: 800;
		}

		.listBox-bottom {
			color: #090A0A;
			font-size: 24rpx;
			font-style: normal;
			flex-wrap: wrap;

			.items {
				width: calc(50% - 1px);
				border-left: 1rpx solid #E3E5E5;
				border-right: 1rpx solid #E3E5E5;
				border-bottom: 1rpx solid #E3E5E5;
				box-sizing: border-box;
				word-break: break-all;

				text {
					display: inline-block;
					background: #F7F9FA;
					padding: 8rpx 10rpx;
					color: #157A2C;

				}

				&:nth-child(1),
				&:nth-child(2) {
					border-top: 1rpx solid #E3E5E5;
					margin-top: 8rpx;
				}

			}

		}
	}
</style>