klp-mono/apps/hand-factory/pages/receive/receive.vue

<template>
	<view class="container">
		<!-- 筛选栏 -->
		<view class="filter-bar">
			<!-- 左侧：收货计划选择 -->
			<view class="plan-select" @click="openPlanPopup">
				<uni-icons type="shop" size="20" color="#666"></uni-icons>
				<text class="plan-text">{{ currentPlan.planNo || '选择收货计划' }}</text>
				<uni-icons type="arrowright" size="16" color="#999"></uni-icons>
			</view>

			<!-- 右侧：钢卷号筛选 -->
			<view class="coil-filter">
				<input v-model="currentCoilNo" placeholder="请输入钢卷号筛选" clearable @confirm="fetchList" class="coil-input"></input>
				<uni-icons type="search" size="18" color="#666" @click="fetchList(true)"></uni-icons>
			</view>
		</view>

		<!-- 收货计划选择悬浮窗 -->
		<uni-popup ref="planPopup" type="bottom" :mask-click="true" height="70%">
			<view class="popup-container">
				<!-- 弹窗头部 -->
				<view class="popup-header">
					<text class="popup-title">选择收货计划</text>
					<uni-icons type="close" size="20" @click="closePlanPopup"></uni-icons>
				</view>

				<!-- 计划筛选输入框 -->
				<view class="plan-search">
					<input v-model="planKeyword" placeholder="请输入计划编号筛选" clearable class="plan-search-input"
						@confirm="fetchDeliveryPlan"></input>
					<uni-icons type="search" size="18" color="#666" @click="fetchDeliveryPlan(true)"></uni-icons>
				</view>

				<!-- 收货计划列表 -->
				<view class="plan-list">
					<uni-list v-if="planList.length">
						<uni-list-item v-for="(item, index) in planList" :key="index" :title="item.planName" clickable
							@click="selectPlan(item)"></uni-list-item>
					</uni-list>
					<view class="empty-tip" v-else>暂无收货计划数据</view>

					<!-- 加载更多 -->
					<uni-load-more :status="planHasMore ? 'more' : 'noMore'" @clickLoadMore="fetchDeliveryPlan(false)"
						v-if="planList.length"></uni-load-more>
				</view>
			</view>
		</uni-popup>

		<uni-popup ref='receivePopup'>
			<!-- 表单区域 -->
			<view class="form-card" v-if="form.coilId">
				<view class="card-title">
					<text class="title-dot"></text>
					<text class="title-text">录入信息</text>
				</view>

				<!-- 当前钢卷号 -->
				<view class="form-item">
					<text class="form-label">当前钢卷号</text>
					<input v-model="form.currentCoilNo" placeholder="请输入当前钢卷号" class="form-input" />
				</view>

				<!-- 班组 -->
				<view class="form-item">
					<text class="form-label">班组</text>
					<input v-model="form.team" placeholder="请输入班组名称" class="form-input" :disabled="form.dataType === 0"
						:class="{ 'form-input-disabled': form.dataType === 0 }" />
				</view>

				<!-- 库区选择 -->
				<view class="form-item form-item-optional">
					<text class="form-label-optional">目标库位</text>
					<klp-warehouse-picker v-model="form.warehouseId" :disabled="form.dataType === 0" placeholder="请选择目标库区" />
				</view>

				<!-- 	<view class="form-item form-item-optional">
					<text class="form-label-optional">真实库区</text>
					<klp-warehouse-picker v-model="form.actualWarehouseId" :disabled="form.dataType === 0"
						placeholder="请选择目标库区" ware-type="actual" />
				</view> -->

				<!-- 物品类型、产品、原材料选择（使用封装组件） -->
				<klp-material-picker :item-type.sync="form.itemType" :item-id.sync="form.itemId" :disabled="form.dataType === 0"
					:page-size="2000" />

				<!-- 毛重 -->
				<view class="form-item form-item-optional">
					<text class="form-label-optional">毛重 (吨)</text>
					<input v-model="form.grossWeight" type="digit" placeholder="请输入毛重（选填）" class="form-input"
						:disabled="form.dataType === 0" :class="{ 'form-input-disabled': form.dataType === 0 }" />
				</view>

				<!-- 净重 -->
				<view class="form-item form-item-optional">
					<text class="form-label-optional">净重 (吨)</text>
					<input v-model="form.netWeight" type="digit" placeholder="请输入净重（选填）" class="form-input"
						:disabled="form.dataType === 0" :class="{ 'form-input-disabled': form.dataType === 0 }" />
				</view>
				
				<!-- 长度 -->
				<view class="form-item form-item-optional">
					<text class="form-label-optional">长度 (米)</text>
					<input v-model="form.length" type="digit" placeholder="请输入长度（选填）" class="form-input"
						:disabled="form.dataType === 0" :class="{ 'form-input-disabled': form.dataType === 0 }" />
				</view>

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

				<!-- 操作按钮 -->
				<view class="action-buttons">
					<button v-if="form.dataType == 10" class="btn btn-primary" @click="confirmReceive" :disabled="loading">
						{{ loading ? '提交中...' : '确认收货' }}
					</button>
				</view>
			</view>
		</uni-popup>

		<uni-popup ref='viewPopup' type="bottom" :mask-click="true" height="70%">
			<view class="popup-container">
				<!-- 弹窗头部：标题+关闭按钮 -->
				<view class="popup-header">
					<text class="popup-title">钢卷详情信息</text>
					<uni-icons type="close" size="20" @click="closeViewPopup"></uni-icons>
				</view>

				<!-- 详情内容区域（滚动布局，适配多内容） -->
				<scroll-view class="detail-scroll" scroll-y>
					<view class="form-card" v-if="form.coilId">
						<!-- 基础信息网格 -->
						<view class="info-grid">
							<view class="info-item">
								<text class="item-label">入场钢卷号</text>
								<text class="item-value">{{ form.enterCoilNo || '-' }}</text>
							</view>
							<view class="info-item">
								<text class="item-label">钢卷号</text>
								<text class="item-value">{{ form.currentCoilNo || '-' }}</text>
							</view>
							<view class="info-item">
								<text class="item-label">班组</text>
								<text class="item-value">{{ form.team || '-' }}</text>
							</view>
							<view class="info-item">
								<text class="item-label">数据类型</text>
								<text
									class="item-value">{{ form.dataType === 0 ? '默认数据' : form.dataType === 10 ? '待收货数据' : '-' }}</text>
							</view>
							<view class="info-item full-width">
								<text class="item-label">目标库位</text>
								<text class="item-value">{{ form.warehouseName || (form.warehouseId ? '已选库位（未获取名称）' : '-') }}</text>
							</view>
							<view class="info-item full-width" v-if="form.actualWarehouseId">
								<text class="item-label">真实库区</text>
								<text class="item-value">{{ form.actualWarehouseName || '已选库位（未获取名称）' }}</text>
							</view>
						</view>

						<!-- 物料信息 -->
						<view class="card-title" style="margin-top: 30rpx;">
							<text class="title-dot"></text>
							<text class="title-text">物料信息</text>
						</view>
						<view class="info-grid">
							<!-- <view class="info-item">
								<text class="item-label">物品类型</text>
								<text class="item-value">{{ form.itemType || '-' }}</text>
							</view>
							<view class="info-item">
								<text class="item-label">物品ID</text>
								<text class="item-value">{{ form.itemId || '-' }}</text>
							</view>
							<view class="info-item full-width">
								<text class="item-label">物料名称</text>
								<text class="item-value">{{ form.itemName || '-' }}</text>
							</view> -->
							<view class="info-item">
								<text class="item-label">物品名称</text>
								<text class="item-value">{{ form.rawMaterial.rawMaterialName || form.product.productName || '-' }}</text>
							</view>
							<view class="info-item">
								<text class="item-label">规格</text>
								<text class="item-value">{{ form.rawMaterial.specification || form.product.specification || '-' }}</text>
							</view>
							<view class="info-item">
								<text class="item-label">材质</text>
								<text class="item-value">{{ form.rawMaterial.material || form.product.material || '-' }}</text>
							</view>
							<view class="info-item">
								<text class="item-label">厂家</text>
								<text class="item-value">{{ form.rawMaterial.manufacturer || form.product.manufacturer || '-' }}</text>
							</view>
						</view>

						<!-- 重量信息 -->
						<view class="card-title" style="margin-top: 30rpx;">
							<text class="title-dot"></text>
							<text class="title-text">重量信息</text>
						</view>
						<view class="info-grid">
							<view class="info-item">
								<text class="item-label">毛重（吨）</text>
								<text class="item-value">{{ form.grossWeight || '-' }}</text>
							</view>
							<view class="info-item">
								<text class="item-label">净重（吨）</text>
								<text class="item-value">{{ form.netWeight || '-' }}</text>
							</view>
						</view>

						<!-- 操作信息 -->
						<view class="card-title" style="margin-top: 30rpx;">
							<text class="title-dot"></text>
							<text class="title-text">操作信息</text>
						</view>
						<view class="info-grid">
							<view class="info-item">
								<text class="item-label">操作人</text>
								<text class="item-value">{{ operatorName }}</text>
							</view>
							<view class="info-item">
								<text class="item-label">更新时间</text>
								<text class="item-value">{{ currentAction.updateTime || '-' }}</text>
							</view>
							<view class="info-item full-width">
								<text class="item-label">操作状态</text>
								<text
									class="item-value">{{ currentAction.actionStatus === 0 ? '未开始' : currentAction.actionStatus === 2 ? '已完成' : '-' }}</text>
							</view>
						</view>
					</view>

					<!-- 空数据提示 -->
					<view class="empty-tip" v-else>
						暂无钢卷详情数据
					</view>
				</scroll-view>
			</view>
		</uni-popup>

		<!-- 主列表区域 -->
		<view class="main-list">
			<scroll-view class="list-scroll" scroll-y>
				<uni-list v-if="list.length">
					<uni-list-item v-for="(item, index) in list" :key="index" @click=""
						:title="`钢卷号：${item.currentCoilNo || '-'}`" :note="`操作时间：${item.updateTime || '-'}`">
						<template v-slot:footer>
							<button style="margin-right: 10rpx;" size="mini" type="primary" plain="true" @click="openViewPopup(item)">查看</button>
							<button size="mini" type="primary" plain="true" @click="openReceivePopup(item)">收货</button>
						</template>
					</uni-list-item>
				</uni-list>
				<view class="empty-tip" v-else>暂无待操作数据</view>

				<!-- 加载更多 -->
				<uni-load-more :status="hasMore ? 'more' : 'noMore'" @clickLoadMore="fetchList(false)"
					v-if="list.length"></uni-load-more>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		listPendingAction,
		updatePendingAction
	} from '@/api/wms/pendingAction';
	import {
		listDeliveryPlan
	} from '@/api/wms/deliveryPlan.js';
	import {
		updateMaterialCoilSimple,
		getMaterialCoil
	} from '@/api/wms/coil.js'

	// 入库操作编码
	const ACTION_TYPE = 401;
	// 收货计划类型编码
	const RECEIVE_PLAN_TYPE = 1;
	// 未开始操作状态
	const ACTION_STATUS = 0;

	export default {
		data() {
			return {
				// 主列表数据
				list: [],
				currentPlan: {}, // 当前选中的收货计划
				currentCoilNo: undefined, // 当前输入的钢卷号
				hasMore: false, // 是否有更多主列表数据
				pageNum: 1, // 主列表页码
				pageSize: 10, // 每页条数
				refreshing: false, // 下拉刷新状态

				// 收货计划弹窗相关
				planKeyword: '', // 计划筛选关键词
				planList: [], // 收货计划列表
				planHasMore: false, // 计划列表是否有更多
				planPageNum: 1, // 计划列表页码
				popupShow: false, // 弹窗显示状态

				form: {},
				loading: false,
				currentAction: {},
				loadingDetail: false,
			};
		},
		computed: {
			// 获取当前操作者昵称
			operatorName() {
				return this.$store.state.user.nickName || this.$store.state.user.name || '未知'
			}
		},
		onShow() {
			// 页面显示时初始化加载数据
			this.fetchList(true);
		},
		methods: {
			/**
			 * 获取待操作列表数据
			 * @param {Boolean} isRefresh 是否刷新（重置页码）
			 */
			async fetchList(isRefresh = false) {
				try {
					// 刷新时重置页码和加载状态
					if (isRefresh) {
						this.pageNum = 1;
						this.refreshing = true;
					}

					// 构造请求参数
					const params = {
						actionStatus: ACTION_STATUS,
						actionType: ACTION_TYPE,
						warehouseId: this.currentPlan.planId || '', // 选中的计划ID
						currentCoilNo: this.currentCoilNo || '', // 钢卷号
						pageNum: this.pageNum,
						pageSize: this.pageSize
					};

					// 请求接口
					const res = await listPendingAction(params);
					if (res.code === 200) {
						const list = res.rows || [];
						// 刷新时替换数据，加载更多时追加数据
						this.list = isRefresh ? list : [...this.list, ...list];
						// 判断是否有更多数据
						this.hasMore = this.pageNum * this.pageSize < res.total;
					}

					console.log(this.list, '需要渲染的数据')
				} catch (err) {
					console.error('获取待操作列表失败：', err);
					uni.showToast({
						title: '数据加载失败',
						icon: 'none'
					});
				} finally {
					// 结束下拉刷新状态
					this.refreshing = false;
					// 加载更多时页码+1
					if (!isRefresh) this.pageNum++;
				}
			},

			/**
			 * 获取收货计划列表
			 * @param {Boolean} isRefresh 是否刷新（重置页码）
			 */
			async fetchDeliveryPlan(isRefresh = false) {
				try {
					if (isRefresh) {
						this.planPageNum = 1;
					}

					// 构造请求参数
					const params = {
						planType: RECEIVE_PLAN_TYPE,
						planName: this.planKeyword || '', // 计划编号筛选
						pageNum: this.planPageNum,
						pageSize: this.pageSize
					};

					const res = await listDeliveryPlan(params);
					if (res.code === 200) {
						const list = res.rows || [];

						this.planList = isRefresh ? list : [...this.planList, ...list];
						this.planHasMore = this.planPageNum * this.pageSize < res.total;
					}
				} catch (err) {
					console.error('获取收货计划失败：', err);
					uni.showToast({
						title: '计划加载失败',
						icon: 'none'
					});
				} finally {
					if (!isRefresh) this.planPageNum++;
				}
			},

			/**
			 * 打开收货计划弹窗
			 */
			openPlanPopup() {
				this.$refs.planPopup.open();
				// 打开弹窗时加载计划数据
				this.fetchDeliveryPlan(true);
			},

			/**
			 * 关闭收货计划弹窗
			 */
			closePlanPopup() {
				this.$refs.planPopup.close();
			},

			/**
			 * 打开收货弹窗
			 */
			openReceivePopup(row) {
				this.$refs.receivePopup.open('bottom')
				// this.loadingDetail = false;
				uni.showLoading({
					title: '正在加载收货详情'
				})
				getMaterialCoil(row.coilId).then(res => {
					this.form = res.data;
					this.currentAction = row;
					// this.loadingDetail = true
					uni.hideLoading()
				})
			},

			openViewPopup(row) {
				this.$refs.viewPopup.open('bottom')
				// this.loadingDetail = false;
				uni.showLoading({
					title: '正在加载收货详情'
				})
				getMaterialCoil(row.coilId).then(res => {
					this.form = res.data;
					this.currentAction = row;
					uni.hideLoading()
					// this.loadingDetail = true
				})
			},

			/**
			 * 关闭钢卷详情弹窗
			 */
			closeViewPopup() {
				this.$refs.viewPopup.close();
				// 可选：清空表单临时数据（根据业务需求决定是否保留）
				this.form = {};
				this.currentAction = {};
			},

			/**
			 * 确认收货
			 */
			confirmReceive(row) {
				const currentAction = this.currentAction;
				const form = this.form;
				const that = this;
				uni.showModal({
					title: '确定要收货吗？',
					success() {
						// console.log(currentAction, form)
						that.loading = true;
						Promise.all([
							updatePendingAction({
								...currentAction,
								actionStatus: 2
							}),
							updateMaterialCoilSimple({
								...form,
								dataType: 1
							})
						]).then(_ => {
							uni.showToast({
								title: '钢卷已收货'
							});
							that.fetchList(true);
							that.loading = false;
							that.$refs.receivePopup.close()
						})
					}
				})
			},

			/**
			 * 选择收货计划
			 * @param {Object} plan 选中的计划对象
			 */
			selectPlan(plan) {
				this.currentPlan = plan;
				this.closePlanPopup();
				// 选择计划后重新加载主列表
				this.fetchList(true);
			},

			/**
			 * 下拉刷新触发（修正后事件可正常绑定）
			 */
			onPullDownRefresh() {
				this.fetchList(true);
			},

			/**
			 * 页面上拉加载（可选：补充页面级上拉加载）
			 */
			onReachBottom() {
				if (this.hasMore) {
					this.fetchList(false);
				}
			}
		},
		// 补充页面级上拉加载钩子（可选，增强体验）
		onReachBottom() {
			this.onReachBottom();
		}
	};
</script>

<style scoped lang="scss">
	.container {
		width: 100%;
		height: 100vh;
		background-color: #f5f5f5;
		display: flex;
		flex-direction: column;
	}

	/* 筛选栏样式 */
	.filter-bar {
		display: flex;
		align-items: center;
		padding: 10rpx 20rpx;
		background-color: #fff;
		border-bottom: 1px solid #eee;
	}

	.plan-select {
		display: flex;
		align-items: center;
		gap: 8rpx;
		padding: 10rpx 15rpx;
		background-color: #f8f8f8;
		border-radius: 6rpx;
		margin-right: 20rpx;
		min-width: 200rpx;
	}

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

	.coil-filter {
		display: flex;
		align-items: center;
		flex: 1;
		background-color: #f8f8f8;
		border-radius: 6rpx;
		padding: 0 15rpx;
	}

	.coil-input {
		flex: 1;
		font-size: 28rpx;
	}

	/* 弹窗样式 */
	.popup-container {
		width: 100%;
		height: 100%;
		background-color: #fff;
		display: flex;
		flex-direction: column;
	}

	.popup-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx;
		border-bottom: 1px solid #eee;
	}

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

	.plan-search {
		display: flex;
		align-items: center;
		gap: 10rpx;
		padding: 15rpx 20rpx;
		border-bottom: 1px solid #eee;
	}

	.plan-search-input {
		flex: 1;
		font-size: 28rpx;
	}

	.plan-list {
		flex: 1;
		overflow-y: auto;
		padding: 10rpx;
	}

	/* 列表样式 */
	.main-list {
		flex: 1;
		overflow: hidden;
	}

	.list-scroll {
		width: 100%;
		height: 100%;
	}

	.uni-list {
		background-color: #fff;
		margin: 10rpx;
		border-radius: 8rpx;
	}

	.uni-list-item {
		font-size: 28rpx;
	}

	/* 空数据提示 */
	.empty-tip {
		text-align: center;
		padding: 50rpx 0;
		font-size: 28rpx;
		color: #999;
	}

	/* 加载更多样式 */
	.uni-load-more {
		margin: 20rpx 0;
	}

	.form-card {
		background: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		overflow: scroll;
		height: 70vh;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
	}

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

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

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

		.status-badge {
			font-size: 22rpx;
			padding: 4rpx 12rpx;
			border-radius: 12rpx;
			margin-right: 10rpx;

			&.status-1 {
				background: #d1f2eb;
				color: #0c6957;
			}

			&.status-0 {
				background: #f8d7da;
				color: #721c24;
			}
		}

		.more-btn {
			display: flex;
			align-items: center;
			gap: 8rpx;
			padding: 8rpx 16rpx;
			background: #f0f7ff;
			border-radius: 20rpx;
			border: 1rpx solid #007aff;

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

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

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

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

			&.full-width {
				flex: 0 0 100%;
			}

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

		&:last-of-type {
			margin-bottom: 0;
		}

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

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

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

		.form-input {
			width: 100%;
			height: 88rpx;
			padding: 0 24rpx;
			background: #f8f9fa;
			border: 2rpx solid #e8e8e8;
			border-radius: 12rpx;
			font-size: 28rpx;
			color: #333;
			box-sizing: border-box;
			transition: all 0.3s;

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

			&.form-input-disabled {
				background: #f5f5f5;
				color: #999;
				cursor: not-allowed;
			}
		}
	}

	/* 操作者信息 */
	.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: #007aff;
			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, #007aff 0%, #0051d5 100%);
			color: #fff;
			box-shadow: 0 4rpx 16rpx rgba(0, 122, 255, 0.3);
		}
	}
</style>