| | |
| | | <template> |
| | | <el-dialog |
| | | v-model="dialogVisible" |
| | | title="ææ¶æå平账" |
| | | width="1000px" |
| | | title="æå平账" |
| | | width="600px" |
| | | :close-on-click-modal="false" |
| | | :destroy-on-close="true" |
| | | @closed="handleDialogClosed" |
| | | > |
| | | <div class="reconciliation-container"> |
| | | <!-- åæ®åºæ¬ä¿¡æ¯ --> |
| | | <div class="order-info"> |
| | | <div class="info-row"> |
| | | <span class="label">åæ®IDï¼</span> |
| | | <span class="value">{{ currentRow.id || "-" }}</span> |
| | | </div> |
| | | <div class="info-row" v-if="selectedItem"> |
| | | <span class="label">å·²é订åï¼</span> |
| | | <span class="value selected-order">{{ selectedItem.id }}</span> |
| | | </div> |
| | | <!-- ç§»é¤åæ®IDå±ç¤ºï¼ä»
ä¿çæ¡ç è¾å
¥æ¡ --> |
| | | <!-- æ¡ç è¾å
¥æ¡ --> |
| | | <div class="barcode-input-container"> |
| | | <el-input |
| | | v-model="barcode" |
| | | placeholder="请è¾å
¥/æ«ææ¡ç å平账" |
| | | clearable |
| | | @keyup.enter="handleEnterConfirm" |
| | | class="barcode-input" |
| | | :disabled="loading" |
| | | /> |
| | | </div> |
| | | |
| | | <!-- æ°æ®å表å±ç¤º --> |
| | | <el-scrollbar height="400px" class="custom-scrollbar"> |
| | | <transition-group name="data-item-transition"> |
| | | <div |
| | | class="data-item" |
| | | v-for="(item, index) in displayData" |
| | | :key="`${item.orderId}-${index}`" |
| | | > |
| | | <div class="radio-container"> |
| | | <el-radio |
| | | v-model="selectedItem" |
| | | :label="item" |
| | | :value="item" |
| | | @change="handleRadioChange(item)" |
| | | ></el-radio> |
| | | <!-- 空æç¤ºï¼ä»
æ¡ç ä¸ºç©ºæ¶æ¾ç¤ºï¼ --> |
| | | <div class="empty-tip" v-if="!barcode && !loading"> |
| | | <span>请è¾å
¥æ¡ç åè¿è¡å¹³è´¦æä½</span> |
| | | </div> |
| | | <div class="data-detail"> |
| | | <div class="detail-row"> |
| | | <span class="label">订åIDï¼</span> |
| | | <span class="value">{{ item.id || "-" }}</span> |
| | | </div> |
| | | <div class="detail-row"> |
| | | <span class="label">ç©æç¼ç ï¼</span> |
| | | <span class="value">{{ item.materielCode || "-" }}</span> |
| | | </div> |
| | | <div class="detail-row"> |
| | | <span class="label">ç©æåç§°ï¼</span> |
| | | <span class="value">{{ item.materielName || "-" }}</span> |
| | | </div> |
| | | <div class="detail-row"> |
| | | <span class="label">æ¹æ¬¡å·ï¼</span> |
| | | <span class="value">{{ item.batchNo || "-" }}</span> |
| | | </div> |
| | | <div class="detail-row"> |
| | | <span class="label">è®¢åæ°éï¼</span> |
| | | <span class="value">{{ item.orderQuantity || 0 }}</span> |
| | | </div> |
| | | <div class="detail-row"> |
| | | <span class="label">åä½ï¼</span> |
| | | <span class="value">{{ item.unit || "-" }}</span> |
| | | </div> |
| | | <div class="detail-row"> |
| | | <span class="label">ä¾åºåç¼ç ï¼</span> |
| | | <span class="value">{{ item.supplyCode || "-" }}</span> |
| | | </div> |
| | | <div class="detail-row"> |
| | | <span class="label">ä»åºç¼ç ï¼</span> |
| | | <span class="value">{{ item.warehouseCode || "-" }}</span> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </transition-group> |
| | | <div class="empty-tip" v-if="displayData.length === 0"> |
| | | <span>ææ ç¸å
³æ°æ®</span> |
| | | </div> |
| | | </el-scrollbar> |
| | | </div> |
| | | |
| | | <template #footer> |
| | |
| | | <el-button |
| | | type="primary" |
| | | @click="handleConfirm" |
| | | :disabled="!selectedItem" |
| | | :disabled="!barcode || loading" |
| | | :loading="loading" |
| | | > |
| | | {{ loading ? "平账ä¸..." : "确认平账" }} |
| | |
| | | </template> |
| | | </el-dialog> |
| | | |
| | | <!-- æå°ç»ä»¶ï¼å¿
须卿¨¡æ¿ä¸å£°æï¼æè½éè¿refè·åï¼ --> |
| | | <!-- æå°ç»ä»¶ï¼ä¿çåæé»è¾ï¼ --> |
| | | <printView ref="printViewRef" @parentcall="parentcall"></printView> |
| | | </template> |
| | | |
| | |
| | | |
| | | // å¼¹çªæ¾ç¤ºç¶æ |
| | | const dialogVisible = ref(false); |
| | | // å½åéä¸çè¡æ°æ® |
| | | const currentRow = ref({}); |
| | | // è¦å±ç¤ºçæ°æ®å表 |
| | | const displayData = ref([]); |
| | | // éä¸çæ°æ®é¡¹ |
| | | const selectedItem = ref(null); |
| | | // æ¡ç è¾å
¥æ¡å¼ |
| | | const barcode = ref(""); |
| | | // å è½½ç¶æ |
| | | const loading = ref(false); |
| | | // 声ææå°ç»ä»¶çrefå¼ç¨ï¼å
³é®ï¼æ¿ä»£this.$refs.printViewï¼ |
| | | // æå°ç»ä»¶refå¼ç¨ |
| | | const printViewRef = ref(null); |
| | | |
| | | // æå¼å¼¹çªæ¹æ³ï¼ä¾ç¶ç»ä»¶è°ç¨ï¼ |
| | | const open = (row, data) => { |
| | | currentRow.value = row; |
| | | displayData.value = data; |
| | | selectedItem.value = null; // éç½®éæ© |
| | | // æå¼å¼¹çªæ¹æ³ï¼æ åæ°ï¼ä¾ç¶ç»ä»¶ç´æ¥è°ç¨ï¼ |
| | | const open = () => { |
| | | barcode.value = ""; // æ¯æ¬¡æå¼å¼¹çªéç½®æ¡ç |
| | | dialogVisible.value = true; |
| | | }; |
| | | |
| | | // å¤çåéæé®åå |
| | | const handleRadioChange = (item) => { |
| | | selectedItem.value = item; |
| | | }; |
| | | |
| | | // å¼¹çªå
³éæ¶çå¤ç |
| | | const handleDialogClosed = () => { |
| | | selectedItem.value = null; |
| | | barcode.value = ""; |
| | | loading.value = false; |
| | | }; |
| | | |
| | | // ç¶ç»ä»¶è°ç¨çåè°ï¼å¦æprintViewéè¦ï¼ |
| | | // ç¶ç»ä»¶è°ç¨çåè°ï¼ä¿çåæé»è¾ï¼ |
| | | const parentcall = (params) => { |
| | | console.log("printViewåè°åæ°ï¼", params); |
| | | }; |
| | | |
| | | // 确认平账æä½ |
| | | // å车触åå¹³è´¦ï¼æ«ç æªèªå¨å车æ¶è°ç¨ï¼ |
| | | const handleEnterConfirm = async () => { |
| | | if (!barcode.value) { |
| | | ElMessage.warning("请è¾å
¥æ¡ç ååæä½"); |
| | | return; |
| | | } |
| | | await handleConfirm(); |
| | | }; |
| | | |
| | | // 确认平账æä½ï¼æ ¸å¿é»è¾ï¼ |
| | | const handleConfirm = async () => { |
| | | if (!selectedItem.value) { |
| | | ElMessage.warning("è¯·éæ©ä¸æ¡æ°æ®è¿è¡å¹³è´¦å¤ç"); |
| | | if (!barcode.value) { |
| | | ElMessage.warning("请è¾å
¥æ¡ç è¿è¡å¹³è´¦å¤ç"); |
| | | return; |
| | | } |
| | | |
| | | try { |
| | | // 确认æç¤º |
| | | await ElMessageBox.confirm( |
| | | `ç¡®å®è¦å¯¹è®¢å ${selectedItem.value.id} è¿è¡å¹³è´¦å¤çåï¼`, |
| | | `ç¡®å®è¦å¯¹æ¡ç ${barcode.value} è¿è¡å¹³è´¦å¤çåï¼`, |
| | | "平账确认", |
| | | { |
| | | confirmButtonText: "ç¡®å®", |
| | |
| | | |
| | | loading.value = true; |
| | | |
| | | // è°ç¨å¹³è´¦æ¥å£ |
| | | // è°ç¨å¹³è´¦æ¥å£ï¼ä»
ä¼ ébarcodeåæ°ï¼ |
| | | const params = { |
| | | id: currentRow.value.id, // è¡ID |
| | | orderId: selectedItem.value.id, // éæ©çåæ®orderId |
| | | barcode: barcode.value, |
| | | }; |
| | | |
| | | const response = await axios.get( |
| | |
| | | } |
| | | ); |
| | | |
| | | console.log("æ¥å£å®æ´è¿åå¼ï¼", response); // è°è¯ç¨ï¼æå°å®æ´è¿å |
| | | console.log("æ¥å£å®æ´è¿åå¼ï¼", response); // è°è¯ç¨ |
| | | |
| | | // ç¬¬ä¸æ¥ï¼æ ¡éªæå¤å±ç¶æ |
| | | // æ ¡éªæ¥å£è¿åç¶æ |
| | | if (response.data?.status) { |
| | | ElMessage.success("平账æä½æå"); |
| | | |
| | | // ç¬¬äºæ¥ï¼è§£ææ£ç¡®çscannedDetailå±çº§ï¼ä¸å±dataï¼ |
| | | const thirdLayerData = response.data.data?.data; // å
³é®ä¿®å¤ï¼å第ä¸å±data |
| | | // è§£æè¿åæ°æ®ï¼ä¿çåææå°é»è¾ï¼ |
| | | const thirdLayerData = response.data.data?.data; |
| | | const scannedDetail = thirdLayerData?.scannedDetail; |
| | | |
| | | console.log("è§£æåçscannedDetailï¼", scannedDetail); // è°è¯ç¨ï¼æå°ç®æ æ°æ® |
| | | console.log("è§£æåçscannedDetailï¼", scannedDetail); |
| | | |
| | | // ç¬¬ä¸æ¥ï¼å¤ææå°æ¡ä»¶ |
| | | // 夿æå°æ¡ä»¶å¹¶è§¦åæå° |
| | | if (scannedDetail?.isUnpacked && scannedDetail?.materialCodes?.length > 0) { |
| | | // ç¡®ä¿æå°ç»ä»¶å®ä¾åå¨ |
| | | if (printViewRef.value) { |
| | | console.log("触åæå°æ¹æ³ï¼åæ°ï¼", scannedDetail.materialCodes); |
| | | printViewRef.value.open(scannedDetail.materialCodes); |
| | |
| | | ElMessage.info("æ éæå°ï¼æªæ»¡è¶³æå
æ¡ä»¶ææ ç©æç¼ç æ°æ®"); |
| | | } |
| | | |
| | | dialogVisible.value = false; |
| | | dialogVisible.value = false; // 平账æååå
³éå¼¹çª |
| | | } else { |
| | | ElMessage.error(response.data?.message || "平账æä½å¤±è´¥"); |
| | | } |
| | | } catch (error) { |
| | | // å®åé误å¤çï¼åºåç¨æ·åæ¶åçå®é误 |
| | | // åºåç¨æ·åæ¶åçå®é误 |
| | | if (error === "cancel" || error === "close") { |
| | | ElMessage.info("å·²åæ¶å¹³è´¦æä½"); |
| | | return; |
| | | } |
| | | // æå°é误æ¥å¿ï¼æ¹ä¾¿ææ¥ |
| | | console.error("平账æ¥å£è°ç¨å¤±è´¥ï¼", error); |
| | | ElMessage.error(`平账æä½å¤±è´¥ï¼${error.message || "ç½ç»å¼å¸¸"}`); |
| | | } finally { |
| | | loading.value = false; |
| | | loading.value = false; // æ 论æå失败ï¼ç»æå è½½ç¶æ |
| | | } |
| | | }; |
| | | |
| | |
| | | </script> |
| | | |
| | | <style scoped> |
| | | /* æ ·å¼é¨åä¸åï¼çç¥éå¤ä»£ç */ |
| | | .reconciliation-container { |
| | | padding: 10px 0; |
| | | } |
| | | |
| | | .order-info { |
| | | margin-bottom: 20px; |
| | | padding: 10px; |
| | | background: #f5f7fa; |
| | | border-radius: 4px; |
| | | display: flex; |
| | | flex-wrap: wrap; |
| | | gap: 20px; |
| | | /* æ¡ç è¾å
¥æ¡æ ·å¼ */ |
| | | .barcode-input-container { |
| | | margin: 20px 0; |
| | | } |
| | | |
| | | .info-row { |
| | | display: flex; |
| | | align-items: center; |
| | | } |
| | | |
| | | .label { |
| | | font-weight: 600; |
| | | color: #606266; |
| | | margin-right: 5px; |
| | | min-width: 80px; |
| | | text-align: right; |
| | | } |
| | | |
| | | .value { |
| | | color: #303133; |
| | | } |
| | | |
| | | .selected-order { |
| | | color: #409eff; |
| | | font-weight: 600; |
| | | } |
| | | |
| | | .custom-scrollbar { |
| | | border: 1px solid #e4e7ed; |
| | | border-radius: 4px; |
| | | } |
| | | |
| | | .data-item { |
| | | display: flex; |
| | | align-items: flex-start; |
| | | padding: 15px; |
| | | margin: 10px; |
| | | background: #fff; |
| | | border: 1px solid #e4e7ed; |
| | | border-radius: 4px; |
| | | transition: all 0.3s; |
| | | } |
| | | |
| | | .data-item:hover { |
| | | box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); |
| | | } |
| | | |
| | | .data-item.selected { |
| | | border-color: #409eff; |
| | | background-color: #f0f7ff; |
| | | } |
| | | |
| | | .radio-container { |
| | | margin-right: 12px; |
| | | margin-top: 4px; |
| | | } |
| | | |
| | | .data-detail { |
| | | display: grid; |
| | | grid-template-columns: repeat(2, 1fr); |
| | | gap: 10px; |
| | | flex: 1; |
| | | } |
| | | |
| | | .detail-row { |
| | | display: flex; |
| | | align-items: center; |
| | | .barcode-input { |
| | | width: 100%; |
| | | font-size: 16px; |
| | | height: 48px; |
| | | } |
| | | |
| | | .empty-tip { |
| | | text-align: center; |
| | | padding: 50px 0; |
| | | color: #909399; |
| | | } |
| | | |
| | | .data-item-transition-enter-from, |
| | | .data-item-transition-leave-to { |
| | | opacity: 0; |
| | | transform: translateY(10px); |
| | | } |
| | | |
| | | .data-item-transition-enter-active, |
| | | .data-item-transition-leave-active { |
| | | transition: all 0.3s ease; |
| | | } |
| | | |
| | | :deep(.el-radio__label) { |
| | | display: none; |
| | | } |
| | | </style> |