代码优化

heshaofeng

2026-03-09 557f7f6079c30cd6fe8d6005cea3d89468bbcd31

 ÏîÄ¿´úÂë/WIDESEA_WMSClient/src/extension/outbound/extend/DirectOutbound.vue

@@ -1,4 +1,7 @@
<template>
    <!-- å…¨å±€é®ç½©å±‚：在请求处理时显示 -->
    <div class="mask-layer" v-if="loading"></div>
    
    <vol-box v-model="show" title="直接出库" :width="800" :height="1200">
        <template #content>
            <el-form ref="form" :model="form" label-width="90px">
@@ -18,7 +21,7 @@
        </template>
        <template #footer>
            <div>
                <el-button type="danger" size="small" plain @click="submit">
                <el-button type="danger" size="small" plain @click="submit" :loading="loading">
                    <i class="el-icon-check">确认</i>
                </el-button>
                <el-button size="small" type="primary" plain @click="() => { this.show = false }">
@@ -48,6 +51,8 @@
            orderNo: "",
            keys: [],
            isBatch: "",
            loading: false, // æŽ§åˆ¶é®ç½©å’ŒæŒ‰é’®åŠ è½½çŠ¶æ€
            form: {} // è¡¥å……原代码中未定义的form
        }
    },
    methods: {
@@ -59,9 +64,19 @@
            if (params.isBatch == 1) {
                this.outboundQuantity = params.outboundQuantity
            }

        },
        submit() {
            // éªŒè¯å¿…填项
            if (!this.station) {
                this.$message.warning("请选择出库区域");
                return;
            }
            if (this.isBatch === 1 && !this.outboundQuantity) {
                this.$message.warning("请填写出库数量");
                return;
            }
            
            this.loading = true; // æ‰“开遮罩和加载状态
            this.$emit('parentCall', ($vue) => {
                const requestParams = {
                    detailIds: this.keys,
@@ -74,17 +89,63 @@
                console.log(requestParams);
                this.http.post("api/Outbound/ProcessPickingOutbound", requestParams, '数据处理中...')
                    .then((x) => {
                        this.loading = false; // å…³é—­é®ç½©å’ŒåŠ è½½çŠ¶æ€
                        if (!x.status) {
                            this.$message.error(x.message)
                        } else {
                            this.show = false
                            this.$Message.success(x.message)
                            $vue.refresh();
                            this.$message.success(x.message) // ä¿®æ­£$Message为$message
                            
                            // ä¿®å¤æ ¸å¿ƒï¼šå®‰å…¨è°ƒç”¨refresh方法
                            if ($vue && typeof $vue.refresh === 'function') {
                                $vue.refresh();
                            } else {
                                // å¤‡é€‰æ–¹æ¡ˆï¼šå¦‚果父组件没有refresh方法，触发自定义事件通知刷新
                                this.$emit('needRefresh');
                                console.warn('父组件未定义refresh方法，已触发needRefresh事件');
                            }
                        }
                    })
                    .catch((error) => {
                        this.loading = false; // å¼‚常时也要关闭遮罩
                        this.$message.error("请求失败：" + (error.message || "未知错误"));
                        console.error("请求异常：", error);
                    })
            })
        },
    }
}
</script>
  

<style scoped>
/* é®ç½©å±‚样式 */
.mask-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5); /* åŠé€æ˜Žé»‘色遮罩 */
    z-index: 9999; /* ç¡®ä¿é®ç½©åœ¨æœ€ä¸Šå±‚（高于弹窗） */
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: auto; /* é˜»æ­¢ç‚¹å‡»é®ç½©ä¸‹æ–¹çš„内容 */
}

/* åŠ è½½åŠ¨ç”» */
.mask-layer::after {
    content: "";
    width: 40px;
    height: 40px;
    border: 4px solid #ffffff;
    border-top: 4px solid #409eff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
</style>