rd_mes_uniapp/pages/wms/sale/codeCk.vue

<template>
	<view class="container">
		<uni-easyinput class="scanInput" placeholder="请扫描销售单号" v-model="saleCode"
			@confirm="fetchDetail" @blur="isFocusSaleCode = false" :focus="isFocusSaleCode" clearable />
		<t-sale-info :saleInfo="saleInfo" />
		<uni-easyinput class="scanInput" placeholder="请扫描工业条码" v-if="!isFinish" :key="inputKey"
			v-model="pieceBarcode" @confirm="submitPiece" @blur="isFocusPieceBarcode = false" :focus="isFocusPieceBarcode" clearable />
		<uni-table border stripe emptyText="暂无更多数据" class="pieceInfo">
			<uni-tr>
				<uni-th align="center" width="30">物料名称</uni-th>
				<uni-th align="center" width="30">规格</uni-th>
				<uni-th align="center" width="20">发货数</uni-th>
				<uni-th align="center" width="20">校验数</uni-th>
			</uni-tr>
			<uni-tr v-for="(item, index) in saleInfo.wmsSaleOutTaskDetailList" :key="index">
				<uni-td align="center">{{ item.materialName }}</uni-td>
				<uni-td align="center">{{ item.specification }}</uni-td>
				<uni-td align="center">{{ item.number }}</uni-td>
				<uni-td align="center">{{ item.validationNumber }}</uni-td>
			</uni-tr>
		</uni-table>
		<view class="actions">
			<u-button class="reload-btn" icon="reload" @click="fetchDetail"></u-button>
			<uni-badge size="small" :text="errorLogs.length" absolute="rightTop" type="error">
				<u-button class="logs-btn" @click="showErrorLogs">异常记录</u-button>
			</uni-badge>
			<u-button class="submit-btn" type="primary" @click="submit" :disabled="!isFinish">提交</u-button>	
		</view>
		<uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0" background-color="#fff">
			<scroll-view scroll-y class="err-logs-container" v-if="errorLogs.length">
				<uni-section :title="'共有' + errorLogs.length + '条错误记录'" type="line" />
				<uni-card v-for="(err, index) in errorLogs" :key="err.pieceBarcode">
					<template #title>
						<view class="err-logs-card__title">							
							<text style="flex: 1">{{ err.pieceBarcode }}</text>
							<u-button size="mini" text="X" style="flex: 0" @click="removeErrPiece(err.pieceBarcode)"></u-button>
						</view>
					</template>
					{{ err.msg }}
					<template #actions>
						<view class="actions-container" @click="reSubmitPiece(err.pieceBarcode)">
							<text>重新提交</text>
						</view>
					</template>
				</uni-card>
			</scroll-view>
			<u-empty mode="list" v-else />
		</uni-popup>
		<u-modal :show="showModal" :title="title" :content="content" @confirm="handleConfirm" />
	</view>
</template>

<script>
import { addOut } from '@/api/wms/sale.js';
import {
	listTask,
	getTask,
	fetchTask
} from '@/api/wms/sale.js';
import { autioError, autioSuccess } from '@/utils/audio';
import { addWmsPieceOutRecord } from '@/api/mes/wmsPieceOutRecord.js';
import { nextTick } from "vue";

export default {
	data() {
		return {
			inputKey: 0,
			isFinish: false,
			isFocusSaleCode: true,
			isFocusPieceBarcode: false,
			// 销售单号
			saleCode: null,
			// 销售单 id
			saleId: null,
			// 工业条码
			pieceBarcode: '',
			// 扫描销售单号获取的数据
			saleInfo: {
				// 销售单号
				saleOutTaskCode: '',
				// 扫描数量
				scanNumber: '',
				// 订单总数
				allNumber: '',
				// 动态字段
				dynamicField1: {
					// 下级客户
					nextLevelCus: ''
				},
				//获取的物料详情
				wmsSaleOutTaskDetailList: []
			},
			showModal: false,
			modalType: '',
			title: '',
			content: '',
			errorLogs: []
		};
	},
	methods: {
		focusSaleCode() {
			this.$nextTick(() => {
				this.isFocusSaleCode = true;
			});
		},
		focusPieceBarcode() {
			this.inputKey++;
			this.$nextTick(() => {
				this.isFocusPieceBarcode = true;
			});
		},
		showErrorLogs() {
			this.$refs.popup.open('bottom');
		},
		showConfirm(title, content, type) {
		  this.title = title;
		  this.content = content;
		  this.modalType = type;
		  this.showModal = true;
		},
		handleConfirm() {
			autioError();
		  const type = this.modalType;
		  this.showModal = false;
		  this.title = this.content = this.modalType = '';
		
			if (type === 'saleCode') this.focusSaleCode();
			else if (type === 'pieceBarCode') this.focusPieceBarcode();
		},
		// 校验工业条码规范性
		validatePieceBarcode() {
			//判断工业条码里面是否有逗号，逗号后面大于九位
			if (!this.pieceBarcode) return false;
			const [prefix, suffix] = this.pieceBarcode.replace('，', ',').split(',');
			return !!(prefix && suffix?.length >= 9);
		},
		// 提交工业条码
		submitPiece() {
		  if (!this.pieceBarcode) return;
		  if (!this.saleCode) return this.showConfirm('错误', '请先输入销售单号', 'saleCode');
		  if (!this.validatePieceBarcode()) return this.showConfirm('错误', '请输入正确的工业条码', 'pieceBarCode');
		
			const pieceBarcode = this.pieceBarcode;
			
			autioSuccess();
			this.$modal.msgSuccess('提交成功');
			addWmsPieceOutRecord({
				// 销售订单号
				saleOrderCode: this.saleCode,
				// 工业条码
				pieceBarcode,
				// 客户编码
				customerCode: this.saleInfo.customerCode,
				delStatus: '0'
			}).catch(err => {
				this.addError(pieceBarcode, err.msg);
			});
			this.isFocusPieceBarcode = false;
			this.pieceBarcode = '';
			this.focusPieceBarcode();
		},
		async reSubmitPiece(pieceBarcode) {
			this.$modal.loading('重新提交中');
			await addWmsPieceOutRecord({
				// 销售订单号
				saleOrderCode: this.saleCode,
				// 工业条码
				pieceBarcode,
				// 客户编码
				customerCode: this.saleInfo.customerCode,
				delStatus: '0'
			}).then(() => {
				this.$modal.msgSuccess('提交成功');
				this.removeErrPiece(pieceBarcode);
			}).catch(err => {
				autioError();
				this.addError(pieceBarcode, err.msg);
				this.showConfirm('重新提交失败', err.msg, 'pieceBarCode');				
			});
			this.$modal.closeLoading();
		},
		addError(pieceBarcode, msg) {
			const idx = this.errorLogs.findIndex(i => i.pieceBarcode === pieceBarcode);
			if (idx !== -1) {
				// 已存在 → 更新
				this.errorLogs[idx].msg = msg;
				// 为确保视图立即刷新（Vue2 对数组项更新可能不追踪）
				this.errorLogs.splice(idx, 1, this.errorLogs[idx]);
			} else {
				// 不存在 → 添加新记录
				this.errorLogs.push({ pieceBarcode, msg });
			}
		},
		removeErrPiece(pieceBarcode) {
			this.errorLogs = this.errorLogs.filter(i => i.pieceBarcode !== pieceBarcode);
		},
		// 通过销售单号获取任务单明细
		async fetchDetail() {
			//当输入值明显不合法时不执行后续操作
			if (!this.saleCode) return;
		
			if (this.saleCode.length < 9) {
				this.showConfirm('错误', `销售单号 ${this.saleCode} 错误，请扫描正确的销售单号`, 'saleCode');
				this.saleCode = '';
				return autioError();
			}
			
			this.$modal.loading('获取明细中...');
			try {
				// 从任务单信息中获取任务单 id
				const res = await listTask({ saleOutTaskCode: this.saleCode });
				this.saleId = res.rows[0]?.id || null;
				if (!this.saleId) {
					this.$modal.closeLoading();
					this.showConfirm('获取明细失败', `请检查销售单号 ${this.saleCode}`, 'saleCode');
					return;
				}
			
				// 用任务单 id 获取明细详情
				const res_task = await getTask(this.saleId);
				const data = res_task.data;
				
				data.dynamicField1 = data.dynamicField1
					? JSON.parse(data.dynamicField1)
					: { nextLevelCus: null };
				delete data.id;
				
				this.saleInfo = data;
				this.isFinish = !!(data.scanNumber && data.allNumber && data.scanNumber >= data.allNumber);
				this.focusPieceBarcode();
			} catch (err) {
				autioError();
				this.showConfirm('获取明细失败', err.message || err, 'saleCode');
			}
			this.$modal.closeLoading();
		},
		// 提交
		async submit() {
		  try {
		    this.$modal.loading('提交中...');
		    const { data } = await fetchTask(this.saleId);
		    const detail = {
		      ...data,
		      wmsSaleOutTaskDetailList: data.wmsSaleOutTaskDetailList.map(i => {
		        const { id, ...rest } = i;
		        return rest;
		      }),
		      dynamicField1: JSON.stringify(this.saleInfo.dynamicField1),
		      wmsSaleOutDetailList: data.wmsSaleOutTaskDetailList,
		      billType: 2
		    };
		    delete detail.id;
		    await addOut(detail);
		    autioSuccess();
		    this.$modal.msgSuccess('出库成功');
		  } catch (err) {
		    autioError();
		    this.$modal.alert(err.msg || err.message || err);
		  } finally {
		    this.$modal.closeLoading();
		  }
		}
	}
};
</script>

<style scoped lang="scss">
.container {
	background-color: #ffffff;
	// #ifdef H5
	height: calc(100vh - 44px);
	// #endif
	// #ifdef APP-PLUS
	height: 100vh;
	// #endif
	padding: 10px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.scanInput,
.saleInfo,
.pieceInfo, {
	flex: 0 0 auto;
	margin: 0.5vh 0;
}

.pieceInfo {
	flex: 1;
}

.uni-table-th,
.uni-table-td {
	padding: 4px;
}

.uni-table-th {
	position: sticky;
	top: 0;
	z-index: 2;
	background-color: #ffffff;
}

::v-deep .u-popup {
	flex: unset;
}

.actions {
	width: 100%;
	display: flex;
	gap: 10px;
	.reload-btn {
		width: 46px;
	}
	.submit-btn {
		flex: 1;
	}
}
::v-deep .uni-badge {
	z-index: 99;
}
::v-deep .err-logs-container {
	.uni-scroll-view {
		max-height: 40vh;
	}
	.err-logs-card__title {
		display: flex;
		align-items: center;
		padding: 10px 5px;
	}
}
.uni-popup__wrapper {
	z-index: 999 !important;
}
.actions-container {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px 0;
	border-top: 1px #EBEEF5 solid;
}
</style>