klp-mono/apps/hand-factory/components/panels/code/apart.vue

<template>
	<view class="apart-container">
		<!-- 扫码按钮 -->
		<view class="scan-section" v-if="!form.coilId">
			<view class="scan-btn-wrapper" @click="handleScan">
				<view class="scan-icon">
					<text class="icon-camera">📷</text>
				</view>
				<text class="scan-tip">扫描要分卷的钢卷</text>
			</view>
		</view>

		<!-- 原钢卷信息 -->
		<view class="info-card" v-if="form.coilId">
			<view class="card-title">
				<text class="title-dot"></text>
				<text class="title-text">原钢卷信息</text>
				<view class="more-btn" @click.stop="showBomDialog"
					v-if="coilDetail.bomItemList && coilDetail.bomItemList.length > 0">
					<text class="icon-more">⚙</text>
					<text class="more-text">参数</text>
				</view>
			</view>

			<view class="info-grid">
				<view class="info-item">
					<text class="item-label">入场钢卷号</text>
					<text class="item-value">{{ coilDetail.enterCoilNo || '-' }}</text>
				</view>
				<view class="info-item">
					<text class="item-label">当前钢卷号</text>
					<text class="item-value">{{ coilDetail.currentCoilNo || '-' }}</text>
				</view>
				<view class="info-item">
					<text class="item-label">当前库区</text>
					<text class="item-value">{{ (coilDetail.warehouse && coilDetail.warehouse.warehouseName) || '未分配' }}</text>
				</view>
			</view>
		</view>


		<!-- 分卷列表 -->
		<view class="form-card" v-if="form.coilId" @click="closeWarehouseList">
			<view class="card-title">
				<text class="title-dot"></text>
				<text class="title-text">分卷配置</text>
			</view>

			<!-- 分卷数量选择 -->
			<view class="form-item">
				<text class="form-label">分卷数量</text>
				<view class="split-count-selector">
					<view class="count-btn" :class="{ 'count-btn-disabled': splitCoils.length <= 2 }"
						@click="changeSplitCount(-1)">
						<text>-</text>
					</view>
					<text class="count-value">{{ splitCoils.length }}</text>
					<view class="count-btn" :class="{ 'count-btn-disabled': splitCoils.length >= 10 }"
						@click="changeSplitCount(1)">
						<text>+</text>
					</view>
				</view>
			</view>

			<!-- 分卷信息列表 -->
			<view class="split-list">
				<view class="split-item" v-for="(item, index) in splitCoils" :key="index">
					<view class="split-header">
						<text class="split-title">分卷 {{ index + 1 }}</text>
					</view>
					<view class="split-body">
						<view class="split-field">
							<text class="field-label">新钢卷号</text>
							<input v-model="item.currentCoilNo" placeholder="请输入新钢卷号" class="field-input" />
						</view>
						<view class="split-field">
							<text class="field-label">班组</text>
							<input v-model="item.team" placeholder="请输入班组名称" class="field-input" />
						</view>
						<view class="split-field">
							<text class="field-label-optional">目标库位</text>
							<klp-warehouse-picker v-model="item.warehouseId" placeholder="请选择目标库区" />
						</view>
						
						<view class="split-field">
							<text class="field-label-optional">实际库区</text>
							<klp-warehouse-picker v-model="item.actualWarehouseId" placeholder="请选择实际库区" ware-type="actual" />
						</view>
						
						<klp-material-picker
							:item-type.sync="item.itemType" 
							:item-id.sync="item.itemId" 
							:page-size="2000" 
						/>

						<view class="split-field">
							<text class="field-label-optional">毛重 (吨)</text>
							<input v-model="item.grossWeight" type="digit" placeholder="请输入毛重（选填）" class="field-input" />
						</view>
						<view class="split-field">
							<text class="field-label-optional">净重 (吨)</text>
							<input v-model="item.netWeight" type="digit" placeholder="请输入净重（选填）" class="field-input" />
						</view>
					</view>
				</view>
			</view>

			<!-- 操作者信息 -->
			<view class="operator-info">
				<text class="operator-label">操作人：</text>
				<text class="operator-name">{{ operatorName }}</text>
			</view>

			<!-- 操作按钮 -->
			<view class="action-buttons">
				<button class="btn btn-secondary" @click="handleReset">重新扫码</button>
				<button class="btn btn-primary" @click="handleConfirm" :disabled="loading">
					{{ loading ? '提交中...' : '确认分卷' }}
				</button>
			</view>
		</view>

		<!-- BOM弹窗 -->
		<uni-popup ref="bomPopup" type="bottom">
			<view class="bom-popup">
				<view class="popup-header">
					<text class="popup-title">BOM 清单</text>
					<text class="popup-close" @click="closeBomDialog">✕</text>
				</view>
				<scroll-view class="popup-body" scroll-y>
					<view class="bom-item" v-for="(item, index) in coilDetail.bomItemList" :key="index">
						<view class="bom-index">{{ index + 1 }}</view>
						<view class="bom-content">
							<view class="bom-row">
								<text class="bom-label">{{ item.attrKey }}:</text>
								<text class="bom-value">{{ item.attrValue }}</text>
							</view>
							<view class="bom-row" v-if="item.remark">
								<text class="bom-label">备注:</text>
								<text class="bom-value">{{ item.remark }}</text>
							</view>
						</view>
					</view>
					<view class="empty-tip" v-if="!coilDetail.bomItemList || coilDetail.bomItemList.length === 0">
						<text>暂无参数数据</text>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		getGenerateRecord
	} from '@/api/wms/code.js'
	import {
		updateMaterialCoil,
		getMaterialCoil,
		getMaterialCoilTrace
	} from '@/api/wms/coil.js'

	export default {
		data() {
			return {
				form: {
					coilId: undefined,
					hasMergeSplit: 1 // 1表示分卷
				},
				coilDetail: {},
				splitCoils: [{
						currentCoilNo: '',
						team: '',
						hasMergeSplit: 1,
						warehouseId: undefined,
						actualWarehouseId: undefined,
						warehouseName: '',
						warehouseKeyword: '',
						filteredWarehouses: [],
						showWarehouseList: false,
						itemType: '',
						itemId: undefined,
						productName: '',
						rawMaterialName: '',
						grossWeight: '',
						netWeight: ''
					},
					{
						currentCoilNo: '',
						team: '',
						hasMergeSplit: 1,
						warehouseId: undefined,
						actualWarehouseId: undefined,
						warehouseName: '',
						warehouseKeyword: '',
						filteredWarehouses: [],
						showWarehouseList: false,
						itemType: '',
						itemId: undefined,
						productName: '',
						rawMaterialName: '',
						grossWeight: '',
						netWeight: ''
					}
				],
				warehouses: [],
				warehouseSearchKeyword: '',
				filteredWarehousesInPicker: [],
				products: [], // 产品列表
				productSearchKeyword: '',
				filteredProductsInPicker: [],
				rawMaterials: [], // 原材料列表
				rawMaterialSearchKeyword: '',
				filteredRawMaterialsInPicker: [],
				currentPickerItemIndex: -1,
				loading: false
			}
		},

		computed: {
			operatorName() {
				return this.$store.state.user.nickName || this.$store.state.user.name || '未知'
			}
		},

		methods: {
			// 显示BOM弹窗
			showBomDialog() {
				this.$refs.bomPopup.open();
			},

			// 关闭BOM弹窗
			closeBomDialog() {
				this.$refs.bomPopup.close();
			},

			// 扫码
			handleScan() {
				uni.scanCode({
					success: async (res) => {
						console.log('扫码结果：', res.result);
						try {
							const qrcodeId = res.result;

							// 1. 获取二维码详情
							const qrcodeRes = await getGenerateRecord(qrcodeId);
							if (qrcodeRes.code !== 200) {
								throw new Error('未找到二维码记录');
							}

						// 2. 解析content获取current_coil_id
						const qrcodeRecord = qrcodeRes.data;
						const content = JSON.parse(qrcodeRecord.content);
						
						// 优先使用current_coil_id（当前有效的钢卷ID），如果没有则使用coil_id（兼容旧数据）
						let coilId = content.current_coil_id && content.current_coil_id !== 'null' ? content.current_coil_id : null;
						if (!coilId) {
							coilId = content.coil_id && content.coil_id !== 'null' ? content.coil_id : null;
						}

						// 检查二维码状态
						if (qrcodeRecord.status === 0) {
							uni.showModal({
								title: '提示',
								content: '该二维码已失效，无法进行分卷操作',
								showCancel: false
							});
							return;
						}

						if (!coilId) {
							throw new Error('二维码中未包含有效的钢卷ID');
						}

						// 3. 直接通过钢卷ID获取钢卷详情
						const coilRes = await getMaterialCoil(coilId);
						if (coilRes.code !== 200 || !coilRes.data) {
							throw new Error('未找到钢卷信息');
						}

						const coilData = coilRes.data;

							this.coilDetail = coilData;
							this.form.coilId = coilData.coilId;

							console.log('钢卷详情：', coilData);
							uni.showToast({
								title: '扫码成功',
								icon: 'success'
							});
						} catch (err) {
							console.error('扫码处理失败：', err);
							uni.showToast({
								title: err.message || '扫码信息解析失败',
								icon: 'none',
								duration: 2000
							});
						}
					},
					fail: (err) => {
						console.error('扫码失败：', err);
						uni.showToast({
							title: '扫码失败，请重试',
							icon: 'none'
						});
					}
				});
			},

			// 修改分卷数量
			changeSplitCount(delta) {
				const newCount = this.splitCoils.length + delta;
				if (newCount < 2 || newCount > 10) {
					return;
				}

				if (delta > 0) {
					// 增加分卷
					this.splitCoils.push({
						currentCoilNo: '',
						team: '',
						hasMergeSplit: 1,
						warehouseId: undefined,
						actualWarehouseId: undefined,
						warehouseName: '',
						warehouseKeyword: '',
						filteredWarehouses: this.warehouses,
						showWarehouseList: false,
						itemType: '',
						itemId: undefined,
						productName: '',
						rawMaterialName: '',
						grossWeight: '',
						netWeight: ''
					});
				} else {
					// 减少分卷
					this.splitCoils.pop();
				}
			},

			// 重新扫码
			handleReset() {
				uni.showModal({
					title: '确认重新扫码',
					content: '是否要清空当前数据并重新扫码？',
					success: (res) => {
						if (res.confirm) {
							this.form = {
								coilId: undefined,
								hasMergeSplit: 1
							};
							this.coilDetail = {};
							this.splitCoils = [{
									currentCoilNo: '',
									team: '',
									hasMergeSplit: 1,
									warehouseId: undefined,
									actualWarehouseId: undefined,
									warehouseName: '',
									warehouseKeyword: '',
									filteredWarehouses: this.warehouses,
									showWarehouseList: false,
									itemType: '',
									itemId: undefined,
									productName: '',
									rawMaterialName: '',
									grossWeight: '',
									netWeight: ''
								},
								{
									currentCoilNo: '',
									team: '',
									hasMergeSplit: 1,
									warehouseId: undefined,
									actualWarehouseId: undefined,
									warehouseName: '',
									warehouseKeyword: '',
									filteredWarehouses: this.warehouses,
									showWarehouseList: false,
									itemType: '',
									itemId: undefined,
									productName: '',
									rawMaterialName: '',
									grossWeight: '',
									netWeight: ''
								}
							];
						}
					}
				});
			},

			// 提交分卷
			handleConfirm() {
				// 历史数据不允许分卷
				if (this.coilDetail.dataType === 0) {
					uni.showModal({
						title: '历史数据',
						content: '此为历史记录，不允许进行分卷操作',
						showCancel: false
					});
					return;
				}

				// 验证所有分卷都有钢卷号和班组
				for (let i = 0; i < this.splitCoils.length; i++) {
					if (!this.splitCoils[i].currentCoilNo) {
						uni.showToast({
							title: `请输入分卷 ${i + 1} 的钢卷号`,
							icon: 'none'
						});
						return;
					}
					if (!this.splitCoils[i].team) {
						uni.showToast({
							title: `请输入分卷 ${i + 1} 的班组`,
							icon: 'none'
						});
						return;
					}
				}

				this.loading = true;

				// 构建提交数据
				const submitData = {
					coilId: this.form.coilId,
					enterCoilNo: this.coilDetail.enterCoilNo, // 添加入场钢卷号
					supplierCoilNo: this.coilDetail.supplierCoilNo, // 保留厂家原料卷号
					currentCoilNo: this.coilDetail.currentCoilNo, // 添加当前钢卷号
					hasMergeSplit: 1, // 分卷标识
					newCoils: this.splitCoils.map(item => ({
						currentCoilNo: item.currentCoilNo,
						team: item.team,
						hasMergeSplit: 1,
						itemType: item.itemType || this.coilDetail.itemType, // 优先使用分卷的itemType
						itemId: item.itemId || this.coilDetail.itemId, // 优先使用分卷的itemId
						warehouseId: item.warehouseId || this.coilDetail.warehouseId, // 使用分卷的库区或原库区
						actualWarehouseId: item.actualWarehouseId || this.coilDetail.actualWarehouseId,
						grossWeight: item.grossWeight ? Number(item.grossWeight) : null,
						netWeight: item.netWeight ? Number(item.netWeight) : null
					}))
				};

				updateMaterialCoil(submitData).then(res => {
					if (res.code === 200) {
						uni.showToast({
							title: '分卷成功',
							icon: 'success'
						});
						setTimeout(() => {
							this.handleReset();
						}, 1500);
					} else {
						uni.showToast({
							title: res.msg || '分卷失败',
							icon: 'none'
						});
					}
				}).catch(err => {
					console.error('提交失败：', err);
					uni.showToast({
						title: '分卷失败，请重试',
						icon: 'none'
					});
				}).finally(() => {
					this.loading = false;
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.apart-container {
		padding-bottom: 30rpx;
	}

	/* 扫码区域 */
	.scan-section {
		padding: 80rpx 40rpx;
		background: #fff;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);

		.scan-btn-wrapper {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 30rpx;

			.scan-icon {
				width: 160rpx;
				height: 160rpx;
				border-radius: 50%;
				background: linear-gradient(135deg, #ff9500 0%, #ff6b00 100%);
				display: flex;
				align-items: center;
				justify-content: center;
				box-shadow: 0 8rpx 24rpx rgba(255, 149, 0, 0.3);

				&:active {
					transform: scale(0.95);
				}
			}

			.icon-camera {
				font-size: 70rpx;
			}

			.scan-tip {
				font-size: 28rpx;
				color: #666;
			}
		}
	}

	/* 卡片样式 */
	.info-card,
	.form-card {
		background: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
	}

	.card-title {
		display: flex;
		align-items: center;
		margin-bottom: 25rpx;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #f0f0f0;

		.title-dot {
			width: 8rpx;
			height: 28rpx;
			background: #ff9500;
			border-radius: 4rpx;
			margin-right: 12rpx;
		}

		.title-text {
			flex: 1;
			font-size: 32rpx;
			font-weight: 600;
			color: #333;
		}
	}

	/* 信息网格 */
	.info-grid {
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx;

		.info-item {
			flex: 1;
			min-width: 45%;
			background: #f8f9fa;
			padding: 20rpx;
			border-radius: 12rpx;

			.item-label {
				display: block;
				font-size: 24rpx;
				color: #999;
				margin-bottom: 10rpx;
			}

			.item-value {
				display: block;
				font-size: 28rpx;
				color: #333;
				font-weight: 500;
			}
		}
	}

	/* 表单项 */
	.form-item {
		margin-bottom: 30rpx;

		.form-label {
			display: block;
			font-size: 28rpx;
			color: #333;
			margin-bottom: 15rpx;
			font-weight: 500;

			&::before {
				content: '*';
				color: #ff4d4f;
				margin-right: 6rpx;
			}
		}
	}

	/* 分卷数量选择器 */
	.split-count-selector {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 40rpx;
		padding: 20rpx 0;

		.count-btn {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			background: linear-gradient(135deg, #ff9500 0%, #ff6b00 100%);
			color: #fff;
			font-size: 40rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			box-shadow: 0 4rpx 12rpx rgba(255, 149, 0, 0.2);

			&:active {
				transform: scale(0.95);
			}

			&.count-btn-disabled {
				background: #e8e8e8;
				color: #999;
				box-shadow: none;
			}
		}

		.count-value {
			font-size: 48rpx;
			font-weight: 600;
			color: #333;
			min-width: 80rpx;
			text-align: center;
		}
	}

	/* 分卷列表 */
	.split-list {
		margin-top: 20rpx;

		.split-item {
			background: #f8f9fa;
			border-radius: 12rpx;
			padding: 24rpx;
			margin-bottom: 20rpx;

			&:last-child {
				margin-bottom: 0;
			}

			.split-header {
				margin-bottom: 20rpx;

				.split-title {
					font-size: 28rpx;
					font-weight: 600;
					color: #ff9500;
				}
			}

			.split-body {
				.split-field {
					margin-bottom: 20rpx;

					&:last-child {
						margin-bottom: 0;
					}

					.field-label {
						display: block;
						font-size: 26rpx;
						color: #666;
						margin-bottom: 12rpx;
					}

					.field-label-optional {
						display: block;
						font-size: 26rpx;
						color: #666;
						margin-bottom: 12rpx;
					}

					.field-input {
						width: 100%;
						height: 80rpx;
						padding: 0 20rpx;
						background: #fff;
						border: 2rpx solid #e8e8e8;
						border-radius: 10rpx;
						font-size: 28rpx;
						color: #333;
						box-sizing: border-box;

						&:focus {
							border-color: #ff9500;
						}
					}

					.picker-input {
						width: 100%;
						height: 80rpx;
						padding: 0 20rpx;
						background: #fff;
						border: 2rpx solid #e8e8e8;
						border-radius: 10rpx;
						box-sizing: border-box;
						display: flex;
						align-items: center;
						justify-content: space-between;
						transition: all 0.3s;

						&:active {
							background: #f0f7ff;
							border-color: #ff9500;
						}

						.picker-text {
							flex: 1;
							font-size: 28rpx;
							color: #333;

							&.picker-placeholder {
								color: #999;
							}
						}

						.picker-arrow {
							font-size: 24rpx;
							color: #999;
							margin-left: 10rpx;
						}
					}
				}
			}
		}
	}

	/* 操作者信息 */
	.operator-info {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20rpx 0;
		margin-top: 20rpx;

		.operator-label {
			font-size: 26rpx;
			color: #999;
		}

		.operator-name {
			font-size: 26rpx;
			color: #ff9500;
			font-weight: 500;
		}
	}

	/* 操作按钮 */
	.action-buttons {
		display: flex;
		gap: 20rpx;
		margin-top: 30rpx;

		.btn {
			flex: 1;
			height: 88rpx;
			border-radius: 12rpx;
			font-size: 30rpx;
			font-weight: 500;
			border: none;
			transition: all 0.2s;

			&:active {
				transform: scale(0.98);
			}

			&[disabled] {
				opacity: 0.6;
			}
		}

		.btn-secondary {
			background: #f5f5f5;
			color: #666;
		}

		.btn-primary {
			background: linear-gradient(135deg, #ff9500 0%, #ff6b00 100%);
			color: #fff;
			box-shadow: 0 4rpx 16rpx rgba(255, 149, 0, 0.3);
		}
	}

	/* 库区选择弹窗 */
	.warehouse-popup {
		background: #fff;
		border-radius: 24rpx 24rpx 0 0;
		max-height: 70vh;

		.popup-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 30rpx;
			border-bottom: 1rpx solid #f0f0f0;

			.popup-title {
				font-size: 32rpx;
				color: #333;
				font-weight: 600;
			}

			.popup-close {
				font-size: 40rpx;
				color: #999;
				width: 60rpx;
				height: 60rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		.popup-search {
			padding: 20rpx 30rpx;
			border-bottom: 1rpx solid #f0f0f0;

			.search-input {
				width: 100%;
				height: 80rpx;
				padding: 0 20rpx;
				background: #f8f9fa;
				border: 2rpx solid #e8e8e8;
				border-radius: 10rpx;
				font-size: 28rpx;
				color: #333;
				box-sizing: border-box;

				&:focus {
					background: #fff;
					border-color: #ff9500;
				}
			}
		}

		.popup-body {
			max-height: 400rpx;

			.warehouse-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 30rpx;
				border-bottom: 1rpx solid #f5f5f5;

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

				&:active {
					background: #fff3e0;
				}

				.warehouse-name {
					flex: 1;
					font-size: 28rpx;
					color: #333;
				}

				.warehouse-check {
					font-size: 32rpx;
					color: #ff9500;
					font-weight: bold;
				}
			}

			.empty-tip {
				text-align: center;
				padding: 60rpx 0;
				color: #999;
				font-size: 28rpx;
			}
		}
	}

	/* 参数按钮 */
	.more-btn {
		display: flex;
		align-items: center;
		gap: 8rpx;
		padding: 8rpx 16rpx;
		background: #fff3e0;
		border-radius: 20rpx;
		border: 1rpx solid #ff9500;

		.icon-more {
			font-size: 24rpx;
			color: #ff9500;
		}

		.more-text {
			font-size: 24rpx;
			color: #ff9500;
		}
	}

	/* BOM弹窗 */
	.bom-popup {
		background: #fff;
		border-radius: 24rpx 24rpx 0 0;
		max-height: 70vh;

		.popup-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 30rpx;
			border-bottom: 1rpx solid #f0f0f0;

			.popup-title {
				font-size: 32rpx;
				color: #333;
				font-weight: 600;
			}

			.popup-close {
				font-size: 40rpx;
				color: #999;
				width: 60rpx;
				height: 60rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		.popup-body {
			padding: 30rpx;
			max-height: 500rpx;

			.bom-item {
				display: flex;
				gap: 20rpx;
				padding: 24rpx;
				background: #f8f9fa;
				border-radius: 12rpx;
				margin-bottom: 20rpx;

				&:last-child {
					margin-bottom: 0;
				}

				.bom-index {
					width: 60rpx;
					height: 60rpx;
					background: #ff9500;
					color: #fff;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 24rpx;
					font-weight: bold;
					flex-shrink: 0;
				}

				.bom-content {
					flex: 1;

					.bom-row {
						display: flex;
						margin-bottom: 10rpx;

						&:last-child {
							margin-bottom: 0;
						}

						.bom-label {
							font-size: 26rpx;
							color: #666;
							min-width: 120rpx;
						}

						.bom-value {
							font-size: 26rpx;
							color: #333;
							font-weight: 500;
						}
					}
				}
			}

			.empty-tip {
				text-align: center;
				padding: 60rpx 0;
				color: #999;
				font-size: 28rpx;
			}
		}
	}
</style>