1

huangxiaoqiang

2025-12-18 8c3bde26990ff5f8dce1b5259d49e96d75dbd27b

 ÏîÄ¿´úÂë/WIDESEA_WMSClient/src/views/outbound/outPicking.vue

@@ -1,5 +1,6 @@
<template>
    <div class="picking-container">
    <div class="picking-container" v-loading="globalLoading" element-loading-text="处理中..."
        element-loading-background="rgba(255, 255, 255, 0.8)">
        <!-- é¡¶éƒ¨è®¢å•ä¿¡æ¯ -->
        <el-card class="order-info-card" shadow="never">
            <div class="order-header">
@@ -35,8 +36,8 @@
                    <el-row :gutter="20">
                        <el-col :span="8">
                            <el-form-item label="托盘码" prop="palletCode">
                                <el-input ref="palletInput" v-model="scanForm.palletCode" placeholder="请扫描托盘码"
                                    size="large" clearable @keyup.enter="handlePalletScan">
                                <el-input ref="palletInput" v-model="scanForm.palletCode" placeholder="请扫描托盘码" size="large"
                                    clearable @keyup.enter="handlePalletScan">
                                    <template #prefix>
                                        <i class="el-icon-box"></i>
                                    </template>
@@ -105,7 +106,7 @@
                            </el-tag>
                        </div>
                        <div class="stat-item">
                            <el-tag type="success" size="medium" effect="dark">
                            <el-tag :type="hasWholeOut() ? 'success' : 'warning'" size="medium" effect="dark">
                                <i class="el-icon-box"></i>
                                æ˜¯å¦æ•´å‡ºï¼š{{ hasWholeOut() ? '是' : '否' }}
                            </el-tag>
@@ -304,12 +305,91 @@
                </span>
            </template>
        </el-dialog>

        <!-- æ•´å‡ºç¡®è®¤å¯¹è¯æ¡† -->
        <el-dialog v-model="wholeOutDialogVisible" title="整出操作确认" width="500px" :before-close="handleWholeOutDialogClose"
            custom-class="whole-out-dialog" style="margin-right: 0px;">
            <div class="whole-out-content" v-if="wholeOutInfo">
                <!-- è­¦å‘Šæç¤º -->
                <el-alert title="该托盘包含需要整出的物料" type="warning" :closable="false" show-icon class="whole-out-alert">
                    <template #default>
                        <div>整出操作将一次性拣选该物料的所有库存，请确认信息无误后执行</div>
                    </template>
                </el-alert>

                <!-- æ‰˜ç›˜ä¿¡æ¯ -->
                <div class="info-section">
                    <h4 class="section-title">
                        <i class="el-icon-box"></i>
                        æ‰˜ç›˜ä¿¡æ¯
                    </h4>
                    <div class="info-grid">
                        <div class="info-item">
                            <label>托盘码：</label>
                            <span class="info-value">{{ wholeOutInfo.palletCode }}</span>
                        </div>
                        <div class="info-item">
                            <label>库位：</label>
                            <span class="info-value">{{ wholeOutInfo.locationCode || '未指定' }}</span>
                        </div>
                    </div>
                </div>

                <!-- æ•´å‡ºç‰©æ–™è¯¦æƒ… -->
                <div class="info-section">
                    <h4 class="section-title">
                        <i class="el-icon-s-grid"></i>
                        æ•´å‡ºç‰©æ–™è¯¦æƒ…
                    </h4>
                    <div class="info-grid">
                        <div class="info-item">
                            <label>物料编码：</label>
                            <span class="info-value">{{ wholeOutInfo.materielCode }}</span>
                        </div>
                        <div class="info-item">
                            <label>物料名称：</label>
                            <span class="info-value">{{ wholeOutInfo.materielName }}</span>
                        </div>
                        <div class="info-item">
                            <label>批次号：</label>
                            <span class="info-value">{{ wholeOutInfo.batchNo }}</span>
                        </div>
                        <div class="info-item">
                            <label>整出数量：</label>
                            <span class="info-value highlight">{{ wholeOutInfo.assignQuantity }} {{ wholeOutInfo.unit
                            }}</span>
                        </div>
                        <div class="info-item">
                            <label>当前库存：</label>
                            <span class="info-value">{{ wholeOutInfo.currentStock || wholeOutInfo.originalQuantity }} {{
                                wholeOutInfo.unit }}</span>
                        </div>
                    </div>
                </div>

                <!-- æ“ä½œæç¤º -->
                <div class="operation-tip">
                    <i class="el-icon-info"></i>
                    <span>确认执行整出操作吗？此操作将一次性拣选该物料的所有库存。</span>
                </div>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="wholeOutDialogVisible = false" size="medium">取消</el-button>
                    <el-button type="warning" @click="executeWholeOut" :loading="executeLoading" size="medium">
                        <i class="el-icon-check"></i>
                        ç¡®è®¤æ•´å‡º
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script>

import printView from "@/extension/outbound/extend/printView.vue"
import { stationManager, STATION_STORAGE_KEY } from "@/../src/uitils/stationManager";
export default {
    components: { printView },
    name: 'OutPicking',
@@ -342,7 +422,10 @@
            confirmMessage: '',
            currentAction: null,
            executeLoading: false,
            matMixed: true
            matMixed: true,
            wholeOutDialogVisible: false,
            wholeOutInfo: null,
            globalLoading: false
        }
    },
    computed: {
@@ -370,30 +453,40 @@
            })
        },

        loadPalletData() {
        async loadPalletData() {
            if (!this.scanForm.palletCode) {
                this.unpickedData = []
                return
            }

            try {
                this.loadUnpickedData();
                this.loadPickedData();
                this.globalLoading = true
                await Promise.all([
                    this.loadUnpickedData(),
                    this.loadPickedData()
                ]);

            } catch (error) {
                console.error('加载托盘数据失败:', error)
                this.unpickedData = []
            } finally {
                this.globalLoading = false
            }
        },
        loadUnpickedData() {
            try {
            return new Promise((resolve, reject) => {
                this.http.post(`/api/Outbound/QueryPickingTasks?orderNo=${this.orderNo}&palletCode=${this.scanForm.palletCode}`, {}).then(response => {
                    if (response.status) {
                        if (response.data.outStockLockInfos.length > 0) {
                            this.unpickedData = response.data.outStockLockInfos;
                            this.matMixed = response.data.isMatMixed;
                            this.calculateUnpickedStats()

                            // æ£€æŸ¥æ˜¯å¦éœ€è¦æ•´å‡ºç¡®è®¤
                            this.$nextTick(() => {
                                if (this.hasWholeOut()) {
                                    this.showWholeOutConfirm()
                                }
                            })
                            // è‡ªåŠ¨èšç„¦åˆ°ç‰©æ–™æ¡ç è¾“入框
                            this.$nextTick(() => {
                                if (this.$refs.materialInput) {
@@ -404,20 +497,21 @@
                            this.$message.warning('该托盘无未拣选任务')
                            this.unpickedData = []
                        }
                        resolve()
                    } else {
                        this.$message.error(response.message || '获取托盘数据失败')
                        this.unpickedData = []
                        reject(response.message || '获取托盘数据失败')
                    }
                }
                )

            } catch (error) {
                console.error('加载未拣选数据失败:', error)
            }
                }).catch(error => {
                    console.error('加载未拣选数据失败:', error)
                    reject(error)
                })
            })
        },

        loadPickedData() {
            try {
            return new Promise((resolve, reject) => {
                this.http.post(`/api/Outbound/QueryPickedList?orderNo=${this.orderNo}&palletCode=${this.scanForm.palletCode}`, {}).then(response => {
                    if (response.status) {
                        if (response.data.length > 0) {
@@ -426,16 +520,17 @@
                        } else {
                            this.pickedData = []
                        }
                        resolve()
                    } else {
                        this.$message.error(response.message || '获取托盘数据失败')
                        this.pickedData = []
                        reject(response.message || '获取托盘数据失败')
                    }
                }
                )

            } catch (error) {
                console.error('加载已拣选数据失败:', error)
            }
                }).catch(error => {
                    console.error('加载已拣选数据失败:', error)
                    reject(error)
                })
            })
        },

        // è®¡ç®—未拣选
@@ -473,8 +568,6 @@
            if (this.scanForm.palletCode) {
                // this.$message.success(`托盘码: ${this.scanForm.palletCode}`)
                this.loadPalletData()


            }
        },

@@ -501,6 +594,7 @@
            }

            this.confirmLoading = true
            this.globalLoading = true

            try {
                this.http.post('/api/Outbound/CompleteOutboundWithBarcode', {
@@ -527,6 +621,7 @@
                this.$message.error('拣选确认失败')
            } finally {
                this.confirmLoading = false
                this.globalLoading = false
            }
        },

@@ -554,14 +649,16 @@

        executeConfirm() {
            this.executeLoading = true
            this.globalLoading = true

            try {
                let apiUrl = ''
                let params = {
                    orderNo: this.orderNo,
                    palletCode: this.scanForm.palletCode
                    palletCode: this.scanForm.palletCode,
                    station: stationManager.getStation()
                }

                console.log(params);
                if (this.currentAction === 'emptyBox') {
                    apiUrl = '/api/Outbound/EmptyBox'
                } else if (this.currentAction === 'returnToWarehouse') {
@@ -585,12 +682,75 @@
                this.$message.error('操作失败')
            } finally {
                this.executeLoading = false
                this.globalLoading = false
            }
        },

        handleDialogClose() {
            if (!this.executeLoading) {
                this.confirmDialogVisible = false
            }
        },

        // æ•´å‡ºç¡®è®¤ç›¸å…³æ–¹æ³•
        showWholeOutConfirm() {
            // èŽ·å–需要整出的物料信息
            const wholeOutItem = this.unpickedData.find(item => item.assignQuantity === item.originalQuantity);
            console.log('wholeOutItem:', wholeOutItem);
            if (wholeOutItem) {
                this.wholeOutInfo = {
                    palletCode: this.scanForm.palletCode,
                    locationCode: wholeOutItem.locationCode,
                    materielCode: wholeOutItem.materielCode,
                    materielName: wholeOutItem.materielName,
                    batchNo: wholeOutItem.batchNo,
                    assignQuantity: wholeOutItem.assignQuantity,
                    currentStock: wholeOutItem.currentStock,
                    originalQuantity: wholeOutItem.originalQuantity,
                    unit: wholeOutItem.unit
                };
                this.wholeOutDialogVisible = true;
            }
        },

        handleWholeOutDialogClose() {
            if (!this.executeLoading) {
                this.wholeOutDialogVisible = false;
                this.wholeOutInfo = null;
            }
        },

        executeWholeOut() {
            if (!this.wholeOutInfo) {
                this.$message.error('整出信息无效');
                return;
            }

            this.executeLoading = true;
            this.globalLoading = true;

            try {
                // è°ƒç”¨æ•´å‡ºæŽ¥å£ï¼Œè¿™é‡Œä½¿ç”¨ç‰©æ–™ç¼–码作为条码
                this.http.post('/api/Outbound/CompleteOutboundWithPallet', {
                    orderNo: this.orderNo,
                    palletCode: this.scanForm.palletCode,
                    operator: this.getUserName()
                }).then(response => {
                    if (response.status) {
                        this.$message.success('整出操作成功');
                        this.wholeOutDialogVisible = false;
                        this.wholeOutInfo = null;
                        this.loadPalletData();
                    } else {
                        this.$message.error(response.message || '整出操作失败');
                    }
                });
            } catch (error) {
                console.error('整出操作失败:', error);
                this.$message.error('整出操作失败');
            } finally {
                this.executeLoading = false;
                this.globalLoading = false;
            }
        },

@@ -636,7 +796,9 @@
        },

        refreshPickedTable() {
            this.loadPickedData()
            this.loadPickedData().catch(error => {
                console.error('刷新已拣选列表失败:', error)
            })
        },

        resetMaterialBarcode() {
@@ -704,7 +866,8 @@

        // æ£€æŸ¥æ˜¯å¦åŒ…含整出
        hasWholeOut() {
            return this.unpickedData.some(item => item.assignQuantity === item.originalQuantity) && this.matMixed;
            console.log('检查整出状态:', this.unpickedData.some(item => item.assignQuantity === item.originalQuantity));
            return this.unpickedData.some(item => item.assignQuantity === item.originalQuantity) && !this.matMixed;
        },

        // è®¡ç®—剩余库存
@@ -758,11 +921,19 @@
}
</script>

<style>
.el-dialog__header {
    margin: 0;
}
</style>

<style scoped>
.picking-container {
    padding: 20px;
    background-color: #f5f5f5;
    min-height: 100vh;
    position: relative;
    overflow: hidden;
}

/* è®¢å•ä¿¡æ¯å¡ç‰‡ */
@@ -1071,4 +1242,154 @@
    height: 18px;
    line-height: 16px;
}

/* æ•´å‡ºç¡®è®¤å¼¹çª—样式 */
::v-deep .whole-out-dialog {
    border-radius: 8px;
}

::v-deep .whole-out-dialog .el-dialog__header {
    background: linear-gradient(135deg, #E6A23C 0%, #d9971a 100%);
    color: white;
    padding: 15px 20px;
    border-radius: 8px 8px 0 0;
}

::v-deep .whole-out-dialog .el-dialog__title {
    color: white;
    font-weight: bold;
    font-size: 16px;
}

::v-deep .whole-out-dialog .el-dialog__headerbtn .el-dialog__close {
    color: white;
    font-size: 18px;
}

.whole-out-content {
    padding: 0 10px;
}

.whole-out-alert {
    margin-bottom: 20px;
}

.whole-out-alert ::v-deep .el-alert__description {
    margin-top: 5px;
    font-size: 14px;
    color: #666;
}

.info-section {
    margin-bottom: 20px;
}

.section-title {
    color: #303133;
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 2px solid #E6A23C;
    display: flex;
    align-items: center;
}

.section-title i {
    margin-right: 8px;
    color: #E6A23C;
    font-size: 16px;
}

.info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.info-item {
    display: flex;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
}

.info-item label {
    font-weight: 500;
    color: #606266;
    min-width: 80px;
    font-size: 14px;
}

.info-item .info-value {
    color: #303133;
    font-size: 14px;
    flex: 1;
}

.info-item .info-value.highlight {
    color: #E6A23C;
    font-weight: bold;
    font-size: 15px;
}

.operation-tip {
    background-color: #fff7e6;
    border: 1px solid #ffd591;
    border-radius: 6px;
    padding: 12px 15px;
    margin-top: 20px;
    display: flex;
    align-items: center;
}

.operation-tip i {
    color: #E6A23C;
    margin-right: 8px;
    font-size: 16px;
    flex-shrink: 0;
}

.operation-tip span {
    color: #606266;
    font-size: 14px;
    line-height: 1.5;
}

/* å“åº”式调整 */
@media (max-width: 768px) {
    .info-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .info-item {
        padding: 6px 0;
    }

    .info-item label {
        min-width: 70px;
        font-size: 13px;
    }

    .info-item .info-value {
        font-size: 13px;
    }
}

/* Element Plus Loading é®ç½©å±‚样式修复 */
::v-deep .el-loading-mask {
    background-color: rgba(255, 255, 255, 0.8);
    z-index: 2000;
}

::v-deep .el-loading-spinner {
    z-index: 2001;
}

::v-deep .el-loading-text {
    color: #409EFF;
    font-weight: bold;
    font-size: 14px;
}
</style>