<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>
|
