aiot-app/pages/warehouse/picking/add.vue

<template>
	<view class="mainBox">
		<uni-nav-bar fixed="true" statusBar="true" left-icon="back" title="新增拣货" @clickLeft="back">
			<template slot="float"></template>
		</uni-nav-bar>

		<u-form class="baseForm" labelPosition="left" :model="formData" ref="formRef" labelWidth="220"
			labelAlign="right">
			<u-form-item label="拣货编码" prop="code" borderBottom>
				<u-input disableColor="#ffffff" v-model="formData.code" placeholder="请选择" disabled type="text" />
			</u-form-item>
			<u-form-item class="required-form" label="拣货名称" prop="name" borderBottom>
				<u-input disableColor="#ffffff" v-model="formData.name" placeholder="请选择" type="text" />
			</u-form-item>
			<u-form-item class="required-form" label="关联领料单" prop="documentSource" borderBottom>
				<u-input type="text" placeholder="请选择" v-model="formData.sourceBizNo" @click.native="goToRequisition" />
			</u-form-item>
		</u-form>

		<view class="tabs-container">
			<view class="tabs">
				<view class="tab-item" :class="{ active: activeName === 1 }" @click="activeName = 1">领料产品清单</view>
				<view class="tab-item" :class="{ active: activeName === 2 }">
					<text @click="activeName = 2" class="label">拣货清单</text>
					<u-icon name="scan" size="50" @click="goScanCode"></u-icon>
				</view>
			</view>
		</view>
		<view class="tableBox" v-if="activeName == 1">
			<u-list v-if="productList.length > 0" class="scrollList">
				<u-list-item v-for="(item, index) in productList" :key="index">
					<view class="listBox">
						<view class="listBox-con">
							<view class="listBox-top">
								<view class="listBox-name">
									{{ item.categoryName }}
								</view>
								<view class="listBox-code">
									{{ item.categoryCode }}
								</view>
							</view>
							<view class="listBox-bottom">
								<view>批次号：{{ item.batchNo }}</view>
								<view>包装数量：{{ item.packingQuantity }}</view>
								<view>包装单位：{{ item.packingUnit }}</view>
								<view>计量数量：{{ item.measureQuantity }}</view>
								<view>计量单位：{{ item.measuringUnit }}</view>
								<view>重量：{{ item.weight }}</view>
								<view>重量单位：{{ item.weightUnit }}</view>
								<view class="w100">仓库：{{ item.warehouseName }}</view>
							</view>
						</view>
					</view>
				</u-list-item>
			</u-list>
			<view v-else class="no_data">暂无数据</view>
		</view>
		<view class="tableBox" v-else>
			<u-list v-if="tableList.length > 0" class="scrollList">
				<u-list-item v-for="(item, index) in tableList" :key="index">
					<view class="listBox">
						<view class="listBox-con">
							<view class="listBox-top">
								<view class="listBox-name">
									{{ item.categoryName }}
								</view>
								<view class="listBox-code">
									{{ item.categoryCode }}
								</view>
							</view>
							<view class="listBox-bottom">
								<view>批次号：{{ item.batchNo }}</view>
								<view>包装数量：{{ item.packingQuantity }}</view>
								<view>包装单位：{{ item.packingUnit }}</view>
								<view>计量数量：{{ item.measureQuantity }}</view>
								<view>计量单位：{{ item.measuringUnit }}</view>
								<view>重量：{{ item.weight }}</view>
								<view>重量单位：{{ item.weightUnit }}</view>
								<view class="w100">仓库：{{ item.warehouseName }}</view>
							</view>
						</view>
					</view>
				</u-list-item>
			</u-list>
			<view v-else class="no_data">暂无数据</view>
		</view>
		<view class="footBox">
			<view class="reg" @click="submit">
				<uni-icons custom-prefix="iconfont" size="20" color="#fff"></uni-icons>
				提交
			</view>
		</view>
	</view>
</template>

<script>
	// import ScanCode from '@/components/ScanCode.vue'
	import {
		savePickgoods,
		getCode
	} from '@/api/warehouseManagement'
	export default {
		data() {
			return {
				activeName: 1,
				formData: {
					type: 1, // 入库
					bizType: '1', // 入库场景
					storageTime: '', // 入库时间
					extInfo: {}, // 扩展信息
					sourceBizNo: '', // 来源单据编号
					fromUser: '', // 送货人
					remark: '' // 备注
				},
				productList: [],
				tableList: []
			}
		},
		beforeDestroy() {
			uni.$off('setSelectList')
			uni.$off('requisitionSelect')
		},
		onLoad() {
			this.getCode()
			const userInfo = uni.getStorageSync('userInfo')
			this.formData.createUserName = userInfo.name
			uni.$on('setSelectList', async data => {
				if (data?.length) {
					console.log('setSelectList--data------------', data)
					this.tableList = this.tableList.concat(data)
					setTimeout(() => {
						this.detailOpen = !this.detailOpen
						this.$refs.collapse && this.$refs.collapse.resize()
					}, 0)
				}
			})
			uni.$on('requisitionSelectC', async (data, query) => {
				console.log(data)
				console.log(query)
				this.formData.sourceBizNo = query.sourceBizNo
				this.productList = data
				setTimeout(() => {
					this.detailOpen = !this.detailOpen
					this.$refs.collapse && this.$refs.collapse.resize()
				}, 0)
			})
			// 明细信息填写
			uni.$on('batchNumBack', productList => {
				if (productList?.length) {
					this.productList = productList
				}
			})
		},
		mounted() {
			// this.getAddDetails();
		},
		methods: {
			goScanCode() {
				uni.navigateTo({
					url: '/pages/warehouse/components/scanCodeList'
				})
			},
			async getCode() {
				const code = await getCode('transfer_no')
				this.formData.code = code
				this.$forceUpdate()
			},
			goToRequisition() {
				uni.navigateTo({
					url: '/pages/warehouse/components/requisitionList?type=' + 2
				})
			},
			async submit() {
				if (!this.formData.name) {
					uni.showToast({
						title: '请输入拣货名称',
						icon: 'none'
					})
					return
				}
				if (!this.formData.sourceBizNo) {
					uni.showToast({
						title: '请选择关联领料单',
						icon: 'none'
					})
					return
				}
				if (this.tableList.length <= 0) {
					uni.showToast({
						title: '请扫码录入明细信息',
						icon: 'none'
					})
					return
				}
				if (this.tableList.length !== this.productList.length) {
					uni.showToast({
						title: '请检查拣货清单',
						icon: 'none'
					})
					return
				} else {
					for (let i = 0; i < this.productList.length; i++) {
						let obj = this.tableList.find(item => item.categoryCode == this.productList[i].categoryCode)
						if (!!obj) {
							if (this.productList[i].packingQuantity != obj.packingQuantity || this.productList[i]
								.packingUnit != obj.packingUnit) {
								uni.showToast({
									title: '请检查拣货清单',
									icon: 'none'
								})
								return
							}
						} else {
							uni.showToast({
								title: '请检查拣货清单',
								icon: 'none'
							})
							return
						}
					}
				}
				uni.showLoading({
					title: '保存中...'
				})
				let params = {
					code: this.formData.code,
					name: this.formData.name,
					sourceNo: this.formData.sourceBizNo,
					warehouseId: this.tableList[0].warehouseId,
					warehouseName: this.tableList[0].warehouseName,
					status: 2, // 出库
					info: this.tableList
				}
				savePickgoods(params)
					.then(res => {
						uni.hideLoading()
						uni.showToast({
							icon: 'none',
							title: '提交成功',
							duration: 2000
						})
					})
					.catch(() => {
						uni.hideLoading()
						uni.showToast({
							icon: 'none',
							title: '提交失败',
							duration: 2000
						})
					})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.mainBox {
		height: 100vh;
		display: flex;
		flex-direction: column;

		/deep/.required-form .u-form-item__body__left__content__label::before {
			content: '*';
			color: red;
		}
	}

	.required-form-text {
		/deep/ .u-form-item__body__right {
			overflow: hidden;

			.u-form-item__body__right__content {
				width: 100%;
				display: inline-block !important;
				width: 100%;
			}
		}
	}

	.tabs-container {
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tabs {
		display: flex;
		width: 100vw;
		height: 80rpx;
		background-color: #fff;
		display: flex;
		justify-content: flex-start;
		align-items: flex-end;
		margin: 20rpx 0;
		padding: 0 10rpx;
		box-sizing: border-box;

		.tab-item {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 10rpx 0;
			box-sizing: border-box;
			height: 72rpx;


			.label {
				margin-right: 10rpx;
			}

			&.active {
				background: linear-gradient(180deg, rgba(75, 121, 2, 1) 0%, rgba(255, 255, 255, 1) 12%);
				border-right: 1rpx solid #ccc;
				border-left: 1rpx solid #ccc;
				border-bottom: 1rpx solid #ccc;
				border-radius: 10rpx;
			}
		}
	}

	.picList {
		display: flex;
		align-items: center;
		justify-items: flex-start;
		flex-wrap: wrap;
	}

	/deep/.baseForm {
		.u-form-item__body {
			padding: 4px !important;
		}

		.assetType_box {
			padding: 12rpx 18rpx;
			width: 100%;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
	}

	/deep/.picList .u-image {
		margin-right: 10rpx;
		margin-bottom: 10rpx;
	}

	/deep/.cLine .u-line:nth-child(1) {
		border-bottom: none !important;
	}

	.detail-box {
		position: relative;
		display: flex;
		justify-content: space-between;
		align-items: center;

		/deep/uni-button {
			margin: 0 !important;
			width: 180rpx;
		}

		.selectEnterType {
			margin-left: 10rpx !important;
		}
	}

	.footBox {
		height: 80rpx;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;

		view {
			width: 100%;
			height: 100%;
			text-align: center;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.reg {
			background: $u-success-dark;
		}

		.add {
			background: $uni-color-primary;
		}

		.uni-icons {
			margin-right: 8rpx !important;
		}
	}

	.tableBox {
		flex: 1;
		overflow: hidden;
		display: flex;
		flex-direction: column;

		.scrollList {
			flex: 1;
			height: 100% !important;

			.listBox {
				display: flex;
				padding: 20rpx;
				border-bottom: 2rpx solid #e5e5e5;

				.listBox-con {
					width: 100%;
					align-items: center;
					padding: 0 18rpx 0 0;

					.listBox-top {
						width: 100%;
						display: flex;
						justify-content: space-between;
						padding-bottom: 10rpx;

						.listBox-name,
						.listBox-code {
							display: inline-block;
							font-size: $uni-font-size-sm;
							font-weight: bold;
						}
					}

					.listBox-bottom {
						width: 100%;
						display: flex;
						justify-content: space-between;
						font-size: $uni-font-size-sm;
						flex-wrap: wrap;

						>view {
							width: 50%;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
							line-height: 24px;
						}

						.input_view {
							display: flex;
							align-items: center;
							justify-content: center;

							.u-input {
								height: 36rpx;
								padding: 0 !important;
								margin-right: 10rpx;
								border: 1px solid #ddd;
							}
						}

						.w100 {
							width: 100%;
						}
					}
				}
			}
		}

		.no_data {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.list {
			padding: 20rpx 10rpx;
			border-bottom: 1px #f2f2f2 solid;
			position: relative;

			&.code {
				.label {
					width: 120rpx !important;
				}
			}

			.listTit {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;

				/deep/uni-button {
					margin-right: 20rpx;
					width: 100rpx;

					&.assets {
						width: 180rpx;
					}
				}

				.name {
					width: 50%;
					margin-left: 10px;
					overflow: hidden;
					white-space: nowrap;
					-o-text-overflow: ellipsis;
					text-overflow: ellipsis;
					font-size: 30rpx;
				}

				.btn {
					display: flex;
					justify-content: flex-end;
				}

				.weight {
					width: 30%;
					font-size: 30rpx;
					margin-left: auto;
					margin-right: 60rpx;
					position: relative;
					display: flex;

					input {
						margin-right: 10rpx;
						border: 1px solid black;
						width: 40%;
						height: 20rpx;
					}
				}

				.weight::after {
					position: absolute;
					right: -30rpx;
					top: 50%;
					content: '';
					background: #eee;
					width: 1px;
					height: 28rpx;
					margin-top: -14rpx;
				}
			}

			.z_list {
				max-height: 500rpx;

				.material {
					margin-top: 10rpx;

					.left {
						width: 40rpx;
					}

					.zdy_check {
						width: 30rpx;
						height: 30rpx;
						border: 2rpx solid #c8c9cc;
						border-radius: 4rpx;
					}

					.check_active {
						background: $theme-color;
						border: 2rpx solid $theme-color;

						/deep/ .u-icon__icon {
							color: #fff !important;
						}
					}

					.content_table {
						width: 670rpx;
						border: 2rpx solid $border-color;

						.item {
							display: flex;
							border-bottom: 2rpx solid $border-color;

							.lable {
								width: 200rpx;
								text-align: center;
								background-color: #f7f9fa;
								font-size: 26rpx;
								border-right: 2rpx solid $border-color;
								flex-shrink: 0;
							}

							.ww80 {
								width: 80rpx;
							}

							.content {
								width: 500rpx;
								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;
							}

							.input_box {
								padding: 0 !important;
							}

							.content_num {
								display: flex;
								align-items: center;
								padding: 0 4rpx;

								/deep/ .uni-input-input {
									width: 200rpx;
									border: 2rpx solid #f0f8f2;
									background: #f0f8f2;
									color: $theme-color;
								}

								.unit {
									padding: 0 4rpx;
									font-size: 24rpx;
									color: #404446;
								}
							}

							.ww400 {
								/deep/ .uni-input-input {
									width: 400rpx;
								}
							}

							.pd4 {
								padding: 4rpx 8rpx;
							}

							&:last-child {
								border-bottom: none;
							}
						}

						.ww55 {
							width: 55%;
						}

						.ww45 {
							width: 45%;
						}

						.ww50 {
							width: 50%;
						}

						.ww30 {
							width: 30%;
						}

						.ww70 {
							width: 70%;
						}

						.ww80 {
							width: 80%;
						}

						.ww20 {
							width: 20%;
						}

						.check {
							width: 30rpx;
							height: 30rpx;
						}

						.tag_box {
							padding: 2rpx 10rpx;
							margin-right: 12rpx;
							background: #e6a23c;
							font-size: 22rpx;
							color: #fff;
							border-radius: 4rpx;
						}
					}
				}
			}

			.more {
				position: absolute;
				bottom: 26rpx;
				right: 30rpx;
				font-size: 28rpx;
				color: #666;
			}
		}
	}

	.selectTime {
		display: flex;
		justify-content: flex-end;
		margin-bottom: 10rpx;

		.timeBox {
			display: flex;
			width: 500rpx;

			.firstBtn {
				margin-right: 10rpx;
			}
		}
	}

	.textBox {
		border: 1px #f2f2f2 solid;
		height: 160px;
		display: block;
		width: auto !important;
	}

	.saveBtn {
		width: 50%;
		margin: 40rpx auto;
	}

	.top-css {
		border-bottom: 1px solid rgb(207, 204, 204);
	}
</style>