647556386
2 天以前 b680585c3a6d43f0c72a83a115ea537ce8c91a07
ÏîÄ¿´úÂë/WIDESEA_WMSClient/src/extension/inbound/extend/EmptyTrayInbound.vue
@@ -1,17 +1,17 @@
<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-form ref="form" :model="form" :rules="rules" label-width="90px">
                <el-form-item label="入库区域:" prop="locationType">
                    <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" />
                <el-form-item label="托盘条码:" prop="palletCode">
                    <el-input v-model="form.palletCode" placeholder="请扫描/输入托盘条码(A开头,后跟数字)" @keyup.enter="submit" clearable
                        @paste="handlePaste" @input="handleInput" ref="boxCodeInput" />
                </el-form-item>
            </el-form>
        </template>
@@ -34,19 +34,46 @@
        value: { type: Boolean, default: false }
    },
    data() {
        // è‡ªå®šä¹‰æ¡ç éªŒè¯è§„则
        const validatePalletCode = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('请输入托盘条码'));
            }
            // éªŒè¯æ¡ç æ ¼å¼ï¼šA开头,后面至少1位数字(不限制具体长度)
            const codePattern = /^A\d+$/;
            if (!codePattern.test(value)) {
                return callback(new Error('条码格式不正确!正确格式:A开头,后跟数字,如:A000008080'));
            }
            callback();
        };
        return {
            show: false,
            form: {
                palletCode: '',
                locationType: ''
            },
            locationTypes: []
            locationTypes: [],
            // è¡¨å•验证规则
            rules: {
                locationType: [
                    { required: true, message: '请选择入库区域', trigger: 'change' }
                ],
                palletCode: [
                    { validator: validatePalletCode, trigger: ['blur', 'change'] }
                ]
            }
        }
    },
    methods: {
        open() {
            this.show = true
            this.getData();
            this.$nextTick(() => {
                this.focusInput()
            })
        },
        async getData() {
@@ -59,14 +86,13 @@
        },
        async submit() {
            if (!this.form.palletCode) {
                this.$message.warning('请输入托盘条码')
                return
            }
            if (!this.form.locationType) {
                this.$message.warning('请选择入库区域')
                return
            // è¡¨å•验证
            try {
                await this.$refs.form.validate();
            } catch (error) {
                // éªŒè¯å¤±è´¥ï¼Œèšç„¦è¾“入框
                this.focusAndSelectInput();
                return;
            }
            try {
@@ -81,26 +107,108 @@
                )
                if (status) {
                    this.$message.success("组盘成功")
                    this.show = false
                    this.$emit('refresh')
                    this.$message.success("组盘成功");
                    // æ¸…空输入框数据
                    this.form.palletCode = '';
                    // é‡ç½®éªŒè¯çŠ¶æ€
                    this.$refs.form.clearValidate('palletCode');
                    // èšç„¦å¹¶é€‰ä¸­è¾“入框
                    this.focusAndSelectInput();
                } else {
                    this.$message.error(message || '操作失败')
                    this.$message.error(message || '操作失败');
                    // å¤±è´¥æ—¶ä¸æ¸…理数据,但聚焦并选中输入框,方便修改
                    this.focusAndSelectInput();
                }
            } catch (error) {
                this.$message.error('请求异常')
                this.$message.error('请求异常');
                // å¼‚常时也不清理数据
                this.focusAndSelectInput();
            }
        },
        // æ‰«ææžªä¼˜åŒ–处理
        handleInput(value) {
            // è¿‡æ»¤éžæ•°å­—和条码常用字符
            this.form.palletCode = value.replace(/[^a-zA-Z0-9\-]/g, '')
            // è¿‡æ»¤éžæ•°å­—和条码常用字符,允许A开头
            this.form.palletCode = value.replace(/[^a-zA-Z0-9]/g, '')
            // è‡ªåŠ¨è½¬æ¢ä¸ºå¤§å†™ï¼ˆæ¡ç é€šå¸¸ä¸ºå¤§å†™ï¼‰
            this.form.palletCode = this.form.palletCode.toUpperCase();
            // è‡ªåŠ¨è§¦å‘éªŒè¯
            this.$nextTick(() => {
                this.$refs.form.validateField('palletCode');
            });
        },
        handlePaste(e) {
            // ç²˜è´´æ—¶è‡ªåŠ¨æäº¤
            setTimeout(this.submit, 100)
            // èŽ·å–ç²˜è´´çš„å†…å®¹
            const clipboardData = e.clipboardData || window.clipboardData;
            const pastedText = clipboardData.getData('text');
            // å¤„理粘贴内容
            const cleanedText = pastedText.replace(/[^a-zA-Z0-9]/g, '').toUpperCase();
            // å¦‚果粘贴内容符合条码格式,自动填充并提交
            if (cleanedText.startsWith('A')) {
                this.form.palletCode = cleanedText;
                // å»¶è¿Ÿæäº¤ï¼Œç¡®ä¿è¡¨å•已更新
                setTimeout(() => {
                    this.submit();
                }, 50);
            }
            // é˜»æ­¢é»˜è®¤ç²˜è´´è¡Œä¸ºï¼Œä½¿ç”¨æˆ‘们处理后的值
            e.preventDefault();
        },
        // èšç„¦å¹¶é€‰ä¸­è¾“入框
        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 = '';
            // é‡ç½®éªŒè¯çŠ¶æ€
            if (this.$refs.form) {
                this.$refs.form.clearValidate();
            }
            // ä¸æ¸…空 locationType,保持区域选择
        }
    },
    watch: {
        show(val) {
            if (val) {
                this.$nextTick(() => {
                    this.focusInput()
                })
            } else {
                // å…³é—­å¼¹çª—时清空表单
                this.clearForm();
            }
        }
    }
}