647556386
5 天以前 91ead18d0e92b6e1ed916c5159f3431bf2071a56
ÏîÄ¿´úÂë/WIDESEA_WMSClient/src/extension/inbound/extend/EmptyTrayInbound.vue
¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,169 @@
<template>
    <vol-box v-model="show" title="空托入库" :width="800" :height="1200">
        <template #content>
            <el-form ref="form" :model="form" label-width="90px">
                <el-form-item label="入库区域:">
                    <el-select v-model="form.locationType" placeholder="请选择入库区域">
                        <el-option v-for="item in locationTypes" :key="item.locationType" :label="item.locationTypeDesc"
                            :value="item.locationType" />
                    </el-select>
                </el-form-item>
                <el-form-item label="托盘条码:">
                    <el-input v-model="form.palletCode" placeholder="请扫描/输入托盘条码" @keyup.enter="submit" @keyup.13="submit"
                        clearable maxlength="50" @paste="handlePaste" @input="handleInput" ref="boxCodeInput" />
                </el-form-item>
            </el-form>
        </template>
        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="submit">确认</el-button>
                <el-button @click="show = false">关闭</el-button>
            </div>
        </template>
    </vol-box>
</template>
<script>
import VolBox from '@/components/basic/VolBox.vue'
export default {
    components: { VolBox },
    props: {
        value: { type: Boolean, default: false }
    },
    data() {
        return {
            show: false,
            form: {
                palletCode: '',
                locationType: ''
            },
            locationTypes: []
        }
    },
    methods: {
        open() {
            this.show = true
            this.getData();
            this.$nextTick(() => {
                this.focusInput()
            })
        },
        async getData() {
            try {
                const { data } = await this.http.post("api/LocationInfo/GetLocationTypes")
                this.locationTypes = data
            } catch (e) {
                this.$message.error('获取区域类型失败')
            }
        },
        async submit() {
            if (!this.form.palletCode) {
                this.$message.warning('请输入托盘条码')
                this.focusInput()
                return
            }
            if (!this.form.locationType) {
                this.$message.warning('请选择入库区域')
                return
            }
            try {
                let param = {
                    WarehouseCode: this.form.locationType,
                    PalletCode: this.form.palletCode
                }
                const { status, message } = await this.http.post(
                    `/api/InboundOrder/EmptyMaterielGroup`,
                    param
                )
                if (status) {
                    this.$message.success("组盘成功");
                    // æ¸…空输入框数据
                    this.form.palletCode = '';
                    // èšç„¦å¹¶é€‰ä¸­è¾“入框
                    this.focusAndSelectInput();
                } else {
                    this.$message.error(message || '操作失败');
                    // å¤±è´¥æ—¶ä¸æ¸…理数据,但聚焦并选中输入框,方便修改
                    this.focusAndSelectInput();
                }
            } catch (error) {
                this.$message.error('请求异常');
                // å¼‚常时也不清理数据
                this.focusAndSelectInput();
            }
        },
        // æ‰«ææžªä¼˜åŒ–处理
        handleInput(value) {
            // è¿‡æ»¤éžæ•°å­—和条码常用字符
            this.form.palletCode = value.replace(/[^a-zA-Z0-9\-]/g, '')
        },
        handlePaste(e) {
            // ç²˜è´´æ—¶è‡ªåŠ¨æäº¤
            setTimeout(this.submit, 100)
        },
        // èšç„¦å¹¶é€‰ä¸­è¾“入框
        focusAndSelectInput() {
            this.$nextTick(() => {
                setTimeout(() => {
                    const inputRef = this.$refs.boxCodeInput;
                    if (inputRef) {
                        // Element Plus/Element UI çš„处理方式
                        const inputEl = inputRef.$el ? inputRef.$el.querySelector('input') : inputRef;
                        if (inputEl) {
                            inputEl.focus();
                            inputEl.select();
                        }
                    }
                }, 100);
            });
        },
        // åªèšç„¦è¾“入框(不清空数据)
        focusInput() {
            this.$nextTick(() => {
                const inputRef = this.$refs.boxCodeInput;
                if (inputRef) {
                    const inputEl = inputRef.$el ? inputRef.$el.querySelector('input') : inputRef;
                    inputEl?.focus();
                }
            });
        },
        // æ¸…空表单数据
        clearForm() {
            this.form.palletCode = '';
            // ä¸æ¸…空 locationType,保持区域选择
        }
    },
    watch: {
        show(val) {
            if (val) {
                this.$nextTick(() => {
                    this.focusInput()
                })
            } else {
                // å…³é—­å¼¹çª—时清空表单
                this.clearForm();
            }
        }
    }
}
</script>
<style scoped>
.dialog-footer {
    text-align: right;
}
</style>