From 7688834261de1dd9711a4a175989b75dd00906cc Mon Sep 17 00:00:00 2001
From: heshaofeng <heshaofeng@hnkhzn.com>
Date: 星期二, 02 十二月 2025 19:42:22 +0800
Subject: [PATCH] 提交
---
项目代码/WIDESEA_WMSClient/src/extension/outbound/extend/NoStockOut.vue | 365 +++++++++++++++++++++++++++++++++------------------
1 files changed, 236 insertions(+), 129 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 252da58..95df14e 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"
@@ -5,29 +5,63 @@
:lazy="true"
width="65%"
:padding="20"
- title="鏃犲簱瀛樺嚭搴�"
+ title="铏氭嫙鍑哄叆搴�"
class="custom-vol-box"
>
<div>
+ <!-- 鍗曟嵁杈撳叆鍖哄煙锛堟敮鎸佹壂鐮侊級 -->
+ <el-form :inline="true" :model="orderForm" style="margin-bottom: 20px; align-items: flex-end;">
+ <el-form-item label="鍑哄簱鍗曟嵁:" name="outboundOrderNo">
+ <el-input
+ v-model="orderForm.outboundOrderNo"
+ placeholder="璇疯緭鍏ユ垨鎵弿鍑哄簱鍗曟嵁鍙�"
+ clearable
+ style="width: 220px; margin-right: 10px;"
+ @input="handleOutboundInput"
+ @keyup.enter="focusPurchaseInput"
+ ref="outboundInputRef"
+ ></el-input>
+ </el-form-item>
+ <el-form-item label="閲囪喘鍗曟嵁:" name="purchaseOrderNo">
+ <el-input
+ v-model="orderForm.purchaseOrderNo"
+ placeholder="璇疯緭鍏ユ垨鎵弿閲囪喘鍗曟嵁鍙�"
+ clearable
+ style="width: 220px; margin-right: 10px;"
+ @input="handlePurchaseInput"
+ @keyup.enter="focusBarcodeInput"
+ ref="purchaseInputRef"
+ ></el-input>
+ </el-form-item>
+ </el-form>
+
<!-- 涓婃柟杈撳叆妗� -->
- <el-form :inline="true" :model="formData" ref="formData" style="margin-bottom: 20px; align-items: flex-end;">
+ <el-form :inline="true" :model="formData" ref="formRef" style="margin-bottom: 20px; align-items: flex-end;">
<el-form-item
label="鎵弿鏉＄爜:"
style="width: 80%"
- prop="barcode"
+ name="barcode"
+ :rules="[{ required: true, message: '璇锋壂鎻忔垨杈撳叆鏉＄爜', trigger: 'blur' }]"
>
<el-input
- ref="barcodeInput"
+ ref="barcodeInputRef"
v-model="formData.barcode"
placeholder="璇蜂娇鐢ㄦ壂鐮佹灙鎵弿鏉＄爜锛屾垨鎵嬪姩杈撳叆"
@keyup.enter="handleScan"
autofocus
class="custom-input"
+ :disabled="!orderForm.outboundOrderNo || !orderForm.purchaseOrderNo"
></el-input>
</el-form-item>
<el-form-item>
- <el-button type="primary" size="small" @click="handleScan" class="custom-button">
- <i class="el-icon-search"></i> 纭鎵弿
+ <el-button
+ type="primary"
+ size="small"
+ @click="handleScan"
+ class="custom-button"
+ :disabled="!orderForm.outboundOrderNo || !orderForm.purchaseOrderNo || loading"
+ >
+ <Search /> 纭鎵弿
</el-button>
</el-form-item>
</el-form>
@@ -37,27 +71,23 @@
<el-card shadow="hover" style="margin-bottom: 10px; border: none;" class="custom-card">
<div class="card-header">
<span class="header-title">宸叉壂鎻忔潯鐮佸垪琛紙鍏眥{ scannedBarcodes.length }}鏉★級</span>
- <el-button
- class="clear-all-btn"
- @click="clearAll"
- :disabled="scannedBarcodes.length === 0"
- >娓呯┖鎵�鏈�</el-button>
</div>
<div class="card-body">
<el-scrollbar height="400px" class="custom-scrollbar">
- <!-- 浣跨敤 transition-group 鍖呰９浠ュ疄鐜板姩鐢� -->
<transition-group name="barcode-item-transition">
- <div class="barcode-item" v-for="(barcode, index) in scannedBarcodes" :key="barcode" :data-index="index">
- <span class="barcode-text">{{ index + 1 }}. {{ barcode }}</span>
+ <div class="barcode-item" v-for="(item, index) in scannedBarcodes" :key="item.barcode" :data-index="index">
+ <span class="barcode-text">{{ index + 1 }}. {{ item.barcode }}</span>
<el-button
class="delete-btn"
- @click="removeItem(index)"
- >鍒犻櫎</el-button>
+ @click="removeItem(index, item.barcode)"
+ icon="Delete"
+ circle
+ :disabled="loading"
+ ></el-button>
</div>
</transition-group>
<div class="empty-tip" v-if="scannedBarcodes.length === 0">
- <i class="el-icon-information"></i>
- <span>鏆傛棤鎵弿璁板綍锛岃鎵弿鏉＄爜</span>
+ <span>鏆傛棤鎵弿璁板綍锛岃鍏堣緭鍏ュ崟鎹悗鎵弿鏉＄爜</span>
</div>
</el-scrollbar>
</div>
@@ -67,10 +97,16 @@
<template #footer>
<div class="footer-actions">
- <el-button type="primary" size="small" @click="submit" :disabled="scannedBarcodes.length === 0" class="submit-btn">
- <i class="el-icon-check"></i> 鎻愪氦鍑哄簱
+ <el-button
+ type="primary"
+ size="small"
+ @click="submit"
+ :disabled="scannedBarcodes.length === 0 || !orderForm.outboundOrderNo || !orderForm.purchaseOrderNo || loading"
+ class="submit-btn"
+ >
+ <Check /> 鎻愪氦鍑哄簱
</el-button>
- <el-button type="text" size="small" @click="showDetailBox = false" class="cancel-btn">
+ <el-button type="text" size="small" @click="showDetailBox = false" class="cancel-btn" :disabled="loading">
鍙栨秷
</el-button>
</div>
@@ -79,99 +115,180 @@
</div>
</template>
-<script>
+<script setup>
+import { ref, reactive, onMounted, nextTick } from 'vue';
+import { ElMessage } from 'element-plus';
+import { Search } from '@element-plus/icons-vue';
+
import VolBox from "@/components/basic/VolBox.vue";
+import http from '@/api/http';
-export default {
- components: { VolBox },
- data() {
- return {
- showDetailBox: false,
- formData: {
- barcode: "",
- },
- scannedBarcodes: [],
- };
- },
- methods: {
- open() {
- this.showDetailBox = true;
- this.scannedBarcodes = [];
- this.formData.barcode = "";
- this.$nextTick(() => {
- this.$refs.barcodeInput.focus();
- });
- },
+// 鍝嶅簲寮忔暟鎹�
+const showDetailBox = ref(false);
+const orderForm = reactive({
+ outboundOrderNo: "",
+ purchaseOrderNo: ""
+});
+const formData = reactive({
+ barcode: "",
+});
+const scannedBarcodes = ref([]);
+const loading = ref(false);
- handleScan() {
- const barcode = this.formData.barcode.trim();
- if (!barcode) {
- this.$refs.barcodeInput.focus();
- return;
- }
- if (this.scannedBarcodes.includes(barcode)) {
- this.$message.warning(`鏉＄爜 ${barcode} 宸叉壂鎻忚繃锛岃鍕块噸澶嶆壂鎻廯);
- this.formData.barcode = "";
- this.$refs.barcodeInput.focus();
- return;
- }
+// 妯℃澘寮曠敤
+const formRef = ref(null);
+const barcodeInputRef = ref(null);
+const outboundInputRef = ref(null);
+const purchaseInputRef = ref(null);
- this.scannedBarcodes.push(barcode);
- this.formData.barcode = "";
+// 缁勪欢鎸傝浇鏃惰仛鐒﹀埌鍑哄簱鍗曡緭鍏ユ
+onMounted(() => {
+ nextTick(() => {
+ outboundInputRef.value?.focus();
+ });
+});
- this.$nextTick(() => {
- this.$refs.barcodeInput.focus();
- });
- },
-
- removeItem(index) {
- this.scannedBarcodes.splice(index, 1);
- },
-
- clearAll() {
- this.$confirm("纭畾瑕佹竻绌烘墍鏈夋壂鎻忚褰曞悧锛�", "鎻愮ず", {
- confirmButtonText: "纭畾",
- cancelButtonText: "鍙栨秷",
- type: "warning",
- }).then(() => {
- this.scannedBarcodes = [];
- }).catch(() => {
- this.$refs.barcodeInput.focus();
- });
- },
-
- submit() {
- if (this.scannedBarcodes.length === 0) {
- this.$message.warning("璇峰厛鎵弿鑷冲皯涓�鏉℃潯鐮�");
- this.$refs.barcodeInput.focus();
- return;
- }
-
- const params = {
- barcodes: this.scannedBarcodes,
- };
-
- this.http
- .post("/api/OutboundOrder/NoStockOut", params, "鏁版嵁澶勭悊涓�...")
- .then((res) => {
- if (!res.status) {
- this.$message.error(res.message);
- this.$refs.barcodeInput.focus();
- return;
- }
- this.$message.success("鍑哄簱鎴愬姛");
- this.showDetailBox = false;
- this.$emit("parentCall", ($vue) => {
- $vue.refresh();
- });
- })
- .catch((err) => {
- this.$message.error(`璇锋眰澶辫触锛�${err.message || "鏈煡閿欒"}`);
- this.$refs.barcodeInput.focus();
- });
- },
- },
+// 鎵撳紑寮圭獥
+const open = () => {
+ showDetailBox.value = true;
+ scannedBarcodes.value = [];
+ formData.barcode = "";
+ orderForm.outboundOrderNo = "";
+ orderForm.purchaseOrderNo = "";
+ nextTick(() => {
+ outboundInputRef.value?.focus();
+ });
};
+
+// 鍑哄簱鍗曡緭鍏ュ鐞嗭紙鎵爜鎴栨墜鍔ㄨ緭鍏ワ級
+const handleOutboundInput = (value) => {
+ // 鎵爜鏋緭鍏ラ�氬父浼氳嚜鍔ㄨЕ鍙慹nter浜嬩欢锛岃繖閲屼富瑕佸鐞嗘墜鍔ㄨ緭鍏ョ殑鎯呭喌
+ if (value && value.trim()) {
+ // 鍙互鍦ㄨ繖閲屾坊鍔犲嚭搴撳崟鍙风殑鏍煎紡楠岃瘉閫昏緫
+ }
+};
+
+// 閲囪喘鍗曡緭鍏ュ鐞嗭紙鎵爜鎴栨墜鍔ㄨ緭鍏ワ級
+const handlePurchaseInput = (value) => {
+ if (value && value.trim()) {
+ // 鍙互鍦ㄨ繖閲屾坊鍔犻噰璐崟鍙风殑鏍煎紡楠岃瘉閫昏緫
+ }
+};
+
+// 鐒︾偣璺宠浆鍑芥暟
+const focusPurchaseInput = () => {
+ if (orderForm.outboundOrderNo.trim()) {
+ purchaseInputRef.value?.focus();
+ } else {
+ ElMessage.warning("璇峰厛杈撳叆鏈夋晥鐨勫嚭搴撳崟鎹彿");
+ }
+};
+
+const focusBarcodeInput = () => {
+ if (orderForm.purchaseOrderNo.trim()) {
+ barcodeInputRef.value?.focus();
+ } else {
+ ElMessage.warning("璇峰厛杈撳叆鏈夋晥鐨勯噰璐崟鎹彿");
+ }
+};
+
+// 鎵弿鏉＄爜澶勭悊
+const handleScan = async () => {
+ if (!formRef.value) return;
+ await formRef.value.validateField('barcode');
+
+ const barcode = formData.barcode.trim();
+
+ if (scannedBarcodes.value.some(item => item.barcode === barcode)) {
+ ElMessage.warning(`鏉＄爜 ${barcode} 宸叉壂鎻忚繃锛岃鍕块噸澶嶆壂鎻廯);
+ formData.barcode = "";
+ nextTick(() => barcodeInputRef.value?.focus());
+ return;
+ }
+
+ try {
+ loading.value = true;
+ // 杩欓噷淇濈暀浜嗗師鏈夌殑鏉＄爜楠岃瘉鎺ュ彛锛屼綘鍙互鏍规嵁瀹為檯闇�姹備慨鏀规垨淇濈暀
+ const res = await http.post("/api/OutboundPicking/BarcodeValidate", {
+ outOder: orderForm.outboundOrderNo, // 娉ㄦ剰锛氳繖閲岀幇鍦ㄤ紶閫掔殑鏄崟鎹彿瀛楃涓诧紝鑰屼笉鏄疘D
+ inOder: orderForm.purchaseOrderNo, // 娉ㄦ剰锛氳繖閲岀幇鍦ㄤ紶閫掔殑鏄崟鎹彿瀛楃涓诧紝鑰屼笉鏄疘D
+ barCode: barcode
+ });
+
+ if (res.status === true) {
+ scannedBarcodes.value.push({ barcode });
+ ElMessage.success("鎵弿鎴愬姛");
+ formData.barcode = "";
+ } else {
+ ElMessage.error("鎵弿澶辫触锛�" + (res.message || '楠岃瘉澶辫触'));
+ }
+ } catch (error) {
+ ElMessage.error("鎵弿楠岃瘉寮傚父锛�" + error.message);
+ } finally {
+ loading.value = false;
+ nextTick(() => barcodeInputRef.value?.focus());
+ }
+};
+
+// 绉婚櫎鍗曟潯鎵弿璁板綍
+const removeItem = async (index, barcode) => {
+ try {
+ loading.value = true;
+ // 杩欓噷淇濈暀浜嗗師鏈夌殑鍒犻櫎鏉＄爜鎺ュ彛锛屼綘鍙互鏍规嵁瀹為檯闇�姹備慨鏀规垨淇濈暀
+ const res = await http.post("/api/OutboundPicking/DeleteBarcode", {
+ outOder: orderForm.outboundOrderNo,
+ inOder: orderForm.purchaseOrderNo,
+ barCode: barcode
+ });
+
+ if (res.status === true) {
+ scannedBarcodes.value.splice(index, 1);
+ ElMessage.success("鍒犻櫎鎴愬姛");
+ } else {
+ ElMessage.error("鍒犻櫎澶辫触锛�" + (res.message || '鍒犻櫎澶辫触'));
+ }
+ } catch (error) {
+ ElMessage.error("鍒犻櫎鏉＄爜寮傚父锛�" + error.message);
+ } finally {
+ loading.value = false;
+ }
+};
+
+// 鎻愪氦鍑哄簱
+const submit = async () => {
+ if (scannedBarcodes.value.length === 0) {
+ ElMessage.warning("璇峰厛鎵弿鑷冲皯涓�鏉℃潯鐮�");
+ return;
+ }
+
+ const barcodes = scannedBarcodes.value.map(item => item.barcode);
+
+ try {
+ loading.value = true;
+ // 杩欓噷淇濈暀浜嗗師鏈夌殑鎻愪氦鎺ュ彛锛屾敞鎰忓弬鏁扮幇鍦ㄤ紶閫掔殑鏄崟鎹彿瀛楃涓�
+ const res = await http.post("/api/OutboundPicking/NoStockOutSubmit", {
+ OutOderSubmit: orderForm.outboundOrderNo,
+ InOderSubmit: orderForm.purchaseOrderNo,
+ BarCodeSubmit: barcodes
+ });
+
+ if (res.status === true) {
+ ElMessage.success("鍑哄簱鎻愪氦鎴愬姛");
+ showDetailBox.value = false;
+ } else {
+ ElMessage.error("鍑哄簱鎻愪氦澶辫触锛�" + (res.message || '鎻愪氦澶辫触'));
+ }
+ } catch (error) {
+ ElMessage.error("鍑哄簱鎻愪氦寮傚父锛�" + error.message);
+ } finally {
+ loading.value = false;
+ }
+};
+
+// 鏆撮湶缁欑埗缁勪欢鐨勬柟娉�
+defineExpose({
+ open
+});
</script>
<style scoped>
@@ -219,31 +336,22 @@
font-size: 15px;
color: #333;
}
-.clear-all-btn {
- color: #f56c6c;
- font-size: 13px;
- transition: color 0.2s;
-}
-.clear-all-btn:hover {
- color: #e53e3e;
- background: rgba(245, 108, 108, 0.1);
-}
.card-body {
padding: 0;
}
/* 鑷畾涔夋粴鍔ㄦ潯 */
-.custom-scrollbar ::v-deep .el-scrollbar__thumb {
+.custom-scrollbar :deep(.el-scrollbar__thumb) {
background: rgba(0, 0, 0, 0.2);
border-radius: 4px;
width: 4px;
}
-.custom-scrollbar ::v-deep .el-scrollbar__bar:hover .el-scrollbar__thumb {
+.custom-scrollbar :deep(.el-scrollbar__bar:hover .el-scrollbar__thumb) {
background: rgba(0, 0, 0, 0.3);
width: 6px;
}
-.custom-scrollbar ::v-deep .el-scrollbar__wrap {
+.custom-scrollbar :deep(.el-scrollbar__wrap) {
overflow-x: hidden;
}
@@ -260,7 +368,7 @@
}
/* 涓哄鏁拌娣诲姞杞诲井鐨勮儗鏅壊锛屽寮哄彲璇绘�� */
.barcode-item:nth-child(odd) {
- background-color: #e1e1e1;
+ background-color: #f9f9f9;
}
.barcode-text {
flex: 1;
@@ -274,16 +382,15 @@
.delete-btn {
color: #ea1919;
- font-size: 20px;
+ font-size: 16px;
transition: all 0.2s;
- transform: scale(0.8);
+ opacity: 0.7;
}
.barcode-item:hover .delete-btn {
opacity: 1;
- transform: scale(1);
}
.delete-btn:hover {
- color: #f56c6c !important; /* 浣跨敤 !important 瑕嗙洊 Element UI 榛樿鏍峰紡 */
+ color: #f56c6c !important;
background: rgba(245, 108, 108, 0.1);
}
@@ -296,22 +403,22 @@
flex-direction: column;
align-items: center;
justify-content: center;
+ gap: 15px;
}
.empty-tip i {
font-size: 40px;
- margin-bottom: 15px;
color: #dcdfe6;
}
/* 鑷畾涔夎緭鍏ユ */
-.custom-input ::v-deep .el-input__inner {
+.custom-input :deep(.el-input__inner) {
border-radius: 6px;
border-color: #e4e7ed;
transition: all 0.3s;
height: 36px;
line-height: 36px;
}
-.custom-input ::v-deep .el-input__inner:focus {
+.custom-input :deep(.el-input__inner:focus) {
border-color: #409eff;
box-shadow: 0 0 0 3px rgba(64, 158, 255, 0.1);
}
@@ -355,7 +462,7 @@
</style>
<style>
-/* ... (鍏ㄥ眬鏍峰紡閮ㄥ垎淇濇寔涓嶅彉) ... */
+/* 鍏ㄥ眬鏍峰紡閮ㄥ垎淇濇寔涓嶅彉 */
.text-button:hover {
background-color: #f0f9eb !important;
}
--
Gitblit v1.9.3