From 1378fc4cd7abc24ed3a982e09437c2c8a74e9f2f Mon Sep 17 00:00:00 2001
From: 647556386 <647556386@qq.com>
Date: 星期二, 27 一月 2026 19:06:32 +0800
Subject: [PATCH] 代码优化
---
项目代码/WIDESEA_WMSClient/src/extension/outbound/extend/NoStockOut.vue | 142 ++++++++++++++++++++++++++++++++++++++++-------
1 files changed, 121 insertions(+), 21 deletions(-)
diff --git "a/\351\241\271\347\233\256\344\273\243\347\240\201/WIDESEA_WMSClient/src/extension/outbound/extend/NoStockOut.vue" "b/\351\241\271\347\233\256\344\273\243\347\240\201/WIDESEA_WMSClient/src/extension/outbound/extend/NoStockOut.vue"
index ec9dd47..bb63598 100644
--- "a/\351\241\271\347\233\256\344\273\243\347\240\201/WIDESEA_WMSClient/src/extension/outbound/extend/NoStockOut.vue"
+++ "b/\351\241\271\347\233\256\344\273\243\347\240\201/WIDESEA_WMSClient/src/extension/outbound/extend/NoStockOut.vue"
@@ -8,6 +8,14 @@
title="铏氭嫙鍑哄叆搴�"
class="custom-vol-box"
>
+ <!-- 鎻愪氦閬僵灞傦細瑕嗙洊鏁翠釜寮圭獥鍐呭鍖哄煙 -->
+ <div class="submit-mask" v-show="submitLoading">
+ <div class="mask-content">
+ <el-loading-spinner class="loading-icon" />
+ <span class="loading-text">姝ｅ湪鎻愪氦鍑哄簱锛岃绋嶅��...</span>
+ </div>
+ </div>
+
<div>
<!-- 鍗曟嵁杈撳叆鍖哄煙锛堟敮鎸佹壂鐮侊級 -->
<el-form
@@ -25,8 +33,11 @@
@input="handleOutboundInput"
@keyup.enter="validateOutboundOrder"
ref="outboundInputRef"
- :disabled="loading"
+ :disabled="loading || submitLoading || isOutboundVerified"
></el-input>
+ <!-- 鏂板锛氶獙璇佺姸鎬佹彁绀� -->
+ <span v-if="isOutboundVerified" class="verified-tag">鉁� 宸查獙璇�</span>
+ <span v-else-if="loading" class="loading-tag">鉁� 楠岃瘉涓�...</span>
</el-form-item>
<el-form-item label="閲囪喘鍗曟嵁:" name="purchaseOrderNo">
<el-input
@@ -37,6 +48,7 @@
@input="handlePurchaseInput"
readonly
ref="purchaseInputRef"
+ :disabled="submitLoading"
></el-input>
</el-form-item>
</el-form>
@@ -53,7 +65,6 @@
label="鎵弿鏉＄爜:"
style="width: 80%"
name="barcode"
- :rules="[{ required: true, message: '璇锋壂鎻忔垨杈撳叆鏉＄爜', trigger: 'blur' }]"
>
<el-input
ref="barcodeInputRef"
@@ -62,7 +73,7 @@
@keydown.enter="debouncedHandleScan"
autofocus
class="custom-input"
- :disabled="!orderForm.outboundOrderNo || loading"
+ :disabled="!isOutboundVerified || loading || submitLoading"
></el-input>
</el-form-item>
<el-form-item>
@@ -71,7 +82,7 @@
size="small"
@click="handleScan"
class="custom-button"
- :disabled="!orderForm.outboundOrderNo || loading"
+ :disabled="!isOutboundVerified || loading || submitLoading"
>
<Search /> 纭鎵弿
</el-button>
@@ -123,12 +134,13 @@
@click="removeItem(index, item.barcode)"
icon="Delete"
circle
- :disabled="loading"
+ :disabled="loading || submitLoading"
></el-button>
</div>
</transition-group>
<div class="empty-tip" v-if="scannedBarcodes.length === 0">
- <span>鏆傛棤鎵弿璁板綍锛岃鍏堣緭鍏ュ嚭搴撳崟鎹悗鎵弿鏉＄爜</span>
+ <span v-if="isOutboundVerified">鏆傛棤鎵弿璁板綍锛岃鎵弿鏉＄爜</span>
+ <span v-else>璇峰厛杈撳叆骞堕獙璇佹湁鏁堢殑鍑哄簱鍗曟嵁鍙�</span>
</div>
</el-scrollbar>
</div>
@@ -142,7 +154,7 @@
type="primary"
size="small"
@click="submit"
- :disabled="scannedBarcodes.length === 0 || !orderForm.outboundOrderNo || loading"
+ :disabled="scannedBarcodes.length === 0 || !isOutboundVerified || loading || submitLoading"
class="submit-btn"
>
<Check /> 鎻愪氦鍑哄簱
@@ -156,7 +168,7 @@
showDetailBox = false;
}"
class="cancel-btn"
- :disabled="loading"
+ :disabled="loading || submitLoading"
>
鍙栨秷
</el-button>
@@ -185,6 +197,10 @@
});
const scannedBarcodes = ref([]);
const loading = ref(false);
+// 鏂板锛氭彁浜や笓灞瀕oading鐘舵�侊紝鎺у埗閬僵灞傛樉绀�
+const submitLoading = ref(false);
+// 鏍稿績鏂板锛氬嚭搴撳崟楠岃瘉鐘舵�佹爣璇�
+const isOutboundVerified = ref(false);
// 妯℃澘寮曠敤
const formRef = ref(null);
@@ -217,6 +233,8 @@
formData.barcode = "";
orderForm.outboundOrderNo = "";
orderForm.purchaseOrderNo = "";
+ submitLoading.value = false; // 鎵撳紑寮圭獥鏃堕噸缃彁浜oading
+ isOutboundVerified.value = false; // 鎵撳紑寮圭獥鏃堕噸缃嚭搴撳崟楠岃瘉鐘舵��
nextTick(() => {
outboundInputRef.value?.focus(); // 鎵撳紑寮圭獥浠嶈仛鐒﹀嚭搴撳崟杈撳叆妗�
});
@@ -224,11 +242,12 @@
/**
* 楠岃瘉鍑哄簱鍗曟嵁鍙风殑鏈夋晥鎬�
- * 鏍稿績淇敼锛氶獙璇佹垚鍔熷悗鐩存帴鑱氱劍鏉＄爜鎵弿妗嗭紝澶辫触鍒欒仛鐒﹀洖鍑哄簱鍗曡緭鍏ユ
+ * 鏍稿績淇敼锛氶獙璇佹垚鍔熷悗鏍囪isOutboundVerified涓簍rue锛屽け璐ュ垯閲嶇疆涓篺alse
*/
const validateOutboundOrder = async () => {
const outboundOrderNo = orderForm.outboundOrderNo.trim();
if (!outboundOrderNo) {
+ ElMessage.warning("璇疯緭鍏ュ嚭搴撳崟鎹彿");
return;
}
@@ -240,8 +259,9 @@
);
if (res.status !== true) {
- // 楠岃瘉澶辫触锛氭竻绌鸿緭鍏ユ锛屾彁绀洪敊璇紝鑱氱劍鍥炲嚭搴撳崟杈撳叆妗�
+ // 楠岃瘉澶辫触锛氭竻绌鸿緭鍏ユ锛屾彁绀洪敊璇紝閲嶇疆楠岃瘉鐘舵�侊紝鑱氱劍鍥炲嚭搴撳崟杈撳叆妗�
orderForm.outboundOrderNo = "";
+ isOutboundVerified.value = false;
ElMessage.error(res.message || "鍑哄簱鍗曟嵁鍙烽獙璇佸け璐ワ紝璇锋鏌ュ崟鎹彿鏄惁姝ｇ‘");
nextTick(() => {
outboundInputRef.value?.focus(); // 澶辫触鑱氱劍鍑哄簱鍗曡緭鍏ユ
@@ -249,14 +269,16 @@
return;
}
- // 楠岃瘉鎴愬姛锛氭彁绀虹敤鎴凤紝鐩存帴鑱氱劍鏉＄爜鎵弿妗嗭紙鏍稿績淇敼锛�
+ // 楠岃瘉鎴愬姛锛氭爣璁伴獙璇佺姸鎬佷负true锛屾彁绀虹敤鎴凤紝鑱氱劍鏉＄爜鎵弿妗�
+ isOutboundVerified.value = true;
ElMessage.success("鍑哄簱鍗曟嵁鍙烽獙璇侀�氳繃");
nextTick(() => {
barcodeInputRef.value?.focus(); // 鎴愬姛鐩存帴璺宠浆鍒版潯鐮佹壂鎻忔
});
} catch (error) {
- // 鎺ュ彛寮傚父锛氭竻绌鸿緭鍏ユ锛屾彁绀洪敊璇紝鑱氱劍鍥炲嚭搴撳崟杈撳叆妗�
+ // 鎺ュ彛寮傚父锛氭竻绌鸿緭鍏ユ锛屾彁绀洪敊璇紝閲嶇疆楠岃瘉鐘舵�侊紝鑱氱劍鍥炲嚭搴撳崟杈撳叆妗�
orderForm.outboundOrderNo = "";
+ isOutboundVerified.value = false;
ElMessage.error(`鍑哄簱鍗曟嵁鍙烽獙璇佸紓甯革細${error.message || "缃戠粶閿欒锛岃閲嶈瘯"}`);
nextTick(() => {
outboundInputRef.value?.focus(); // 寮傚父鑱氱劍鍑哄簱鍗曡緭鍏ユ
@@ -268,8 +290,9 @@
// 鍑哄簱鍗曡緭鍏ュ鐞�
const handleOutboundInput = (value) => {
+ // 鏍稿績淇敼锛氳緭鍏ユ椂鑷姩閲嶇疆楠岃瘉鐘舵�侊紙闃叉鎵嬪姩淇敼宸查獙璇佺殑鍑哄簱鍗曞彿锛�
if (value && value.trim()) {
- // 鍙繚鐣欏嚭搴撳崟鍙锋牸寮忛獙璇侀�昏緫
+ isOutboundVerified.value = false;
}
};
@@ -282,10 +305,13 @@
// 鑱氱劍鏉＄爜杈撳叆妗嗭紙澶嶇敤鍑芥暟锛�
const focusBarcodeInputDirectly = () => {
- if (orderForm.outboundOrderNo.trim()) {
+ if (isOutboundVerified.value) {
barcodeInputRef.value?.focus();
} else {
- ElMessage.warning("璇峰厛杈撳叆鏈夋晥鐨勫嚭搴撳崟鎹彿");
+ ElMessage.warning("璇峰厛杈撳叆骞堕獙璇佹湁鏁堢殑鍑哄簱鍗曟嵁鍙�");
+ nextTick(() => {
+ outboundInputRef.value?.focus();
+ });
}
};
@@ -311,6 +337,15 @@
// 鎵弿鏉＄爜鏍稿績閫昏緫
const handleScan = async () => {
+ // 鏍稿績鏂板锛氬墠缃牎楠岋紝纭繚鍑哄簱鍗曞凡楠岃瘉
+ if (!isOutboundVerified.value) {
+ ElMessage.warning("璇峰厛楠岃瘉鏈夋晥鐨勫嚭搴撳崟鎹彿鍚庡啀鎵弿鏉＄爜");
+ nextTick(() => {
+ outboundInputRef.value?.focus();
+ });
+ return;
+ }
+
if (!formRef.value) return;
await formRef.value.validateField('barcode');
@@ -333,9 +368,10 @@
const purchaseOrderNo = await getPurchaseOrderByBarcode(barcode);
if (purchaseOrderNo) {
orderForm.purchaseOrderNo = purchaseOrderNo;
- ElMessage.success(`鎴愬姛鏌ヨ鍒伴噰璐崟锛�${purchaseOrderNo}`);
} else {
ElMessage.info("鏈煡璇㈠埌璇ユ潯鐮佸搴旂殑閲囪喘鍗曞彿锛岀户缁獙璇佹潯鐮佹湁鏁堟��");
+ formData.barcode = "";
+ nextTick(() => barcodeInputRef.value?.focus());
}
// 姝ラ2锛氶獙璇佹潯鐮佸苟鑾峰彇鐗╂枡淇℃伅
@@ -348,6 +384,8 @@
if (validateRes.status === true) {
if (!Array.isArray(validateRes.data) || validateRes.data.length === 0) {
ElMessage.warning("璇ユ潯鐮侀獙璇佹垚鍔燂紝浣嗘湭杩斿洖鐗╂枡淇℃伅");
+ formData.barcode = "";
+ nextTick(() => barcodeInputRef.value?.focus());
} else {
const newItems = validateRes.data.map(item => ({
barcode: item.barcode || '',
@@ -360,14 +398,17 @@
}));
scannedBarcodes.value.push(...newItems);
ElMessage.success(`鎵弿鎴愬姛锛屾柊澧� ${newItems.length} 鏉＄墿鏂欎俊鎭紝绱 ${scannedBarcodes.value.length} 鏉);
+ formData.barcode = "";
}
- formData.barcode = "";
} else {
ElMessage.error("鎵弿澶辫触锛�" + (validateRes.message || '鏉＄爜楠岃瘉澶辫触'));
+ formData.barcode = "";
+ nextTick(() => barcodeInputRef.value?.focus());
}
} catch (error) {
ElMessage.error(error.message);
formData.barcode = "";
+ nextTick(() => barcodeInputRef.value?.focus());
} finally {
loading.value = false;
// 鎵弿瀹屾垚鍚庡缁堣仛鐒︽潯鐮佽緭鍏ユ锛堟柟渚胯繛缁壂鎻忥級
@@ -418,9 +459,18 @@
// 鎻愪氦鍑哄簱
const submit = async () => {
+ // 鏍稿績鏂板锛氬墠缃牎楠屽嚭搴撳崟楠岃瘉鐘舵��
+ if (!isOutboundVerified.value) {
+ ElMessage.warning("鍑哄簱鍗曟嵁鍙锋湭楠岃瘉锛屾棤娉曟彁浜�");
+ nextTick(() => {
+ outboundInputRef.value?.focus();
+ });
+ return;
+ }
+
if (scannedBarcodes.value.length === 0) {
ElMessage.warning("璇峰厛鎵弿鑷冲皯涓�鏉℃潯鐮�");
- nextTick(() => barcodeInputRef.value?.focus()); // 鎻愪氦澶辫触鑱氱劍鏉＄爜妗�
+ nextTick(() => barcodeInputRef.value?.focus());
return;
}
@@ -428,7 +478,8 @@
const purchaseOrderNos = [...new Set(scannedBarcodes.value.map(item => item.purchaseOrderNo).filter(Boolean))];
try {
- loading.value = true;
+ // 寮�鍚彁浜oading锛屾樉绀洪伄缃╁眰
+ submitLoading.value = true;
const res = await http.post("/api/OutboundPicking/NoStockOutSubmit", {
OutOderSubmit: orderForm.outboundOrderNo,
InOderSubmit: purchaseOrderNos.join(',') || '',
@@ -440,14 +491,17 @@
showDetailBox.value = false;
scannedBarcodes.value = [];
orderForm.purchaseOrderNo = "";
+ isOutboundVerified.value = false; // 鎻愪氦鎴愬姛鍚庨噸缃獙璇佺姸鎬�
} else {
ElMessage.error("鍑哄簱鎻愪氦澶辫触锛�" + (res.message || '鎻愪氦澶辫触'));
- nextTick(() => barcodeInputRef.value?.focus()); // 鎻愪氦澶辫触鑱氱劍鏉＄爜妗�
+ nextTick(() => barcodeInputRef.value?.focus());
}
} catch (error) {
ElMessage.error("鍑哄簱鎻愪氦寮傚父锛�" + error.message);
- nextTick(() => barcodeInputRef.value?.focus()); // 寮傚父鑱氱劍鏉＄爜妗�
+ nextTick(() => barcodeInputRef.value?.focus());
} finally {
+ // 鍏抽棴鎻愪氦loading锛岄殣钘忛伄缃╁眰
+ submitLoading.value = false;
loading.value = false;
}
};
@@ -476,6 +530,52 @@
transition: transform 1s ease;
}
+/* 鏂板锛氭彁浜ら伄缃╁眰鏍峰紡 */
+.submit-mask {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(255, 255, 255, 0.85);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ z-index: 100;
+ border-radius: inherit;
+}
+.mask-content {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 12px;
+ color: #409eff;
+ font-size: 15px;
+}
+.loading-icon {
+ font-size: 24px;
+ animation: el-loading-circle 1.5s linear infinite;
+}
+
+/* 鏂板锛氶獙璇佺姸鎬佹爣绛炬牱寮� */
+.verified-tag {
+ color: #67c23a;
+ font-size: 12px;
+ margin-left: 8px;
+ font-weight: 500;
+}
+.loading-tag {
+ color: #409eff;
+ font-size: 12px;
+ margin-left: 8px;
+ font-weight: 500;
+ animation: spin 1s linear infinite;
+}
+@keyframes spin {
+ 0% { transform: rotate(0deg); }
+ 100% { transform: rotate(360deg); }
+}
+
.scan-list {
width: 100%;
}
--
Gitblit v1.9.3