<template>
|
<vol-box v-model="show" title="撤销组盘" :width="500" :height="300">
|
<template #content>
|
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
|
<el-form-item label="托盘或条码:" prop="code">
|
<el-input
|
v-model="form.code"
|
placeholder="请扫描/输入托盘或条码"
|
@keydown.enter.prevent="submit"
|
clearable
|
@paste="handlePaste"
|
@input="handleInput"
|
ref="boxCodeInput"
|
autocomplete="off"
|
maxlength="50"
|
/>
|
</el-form-item>
|
</el-form>
|
</template>
|
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button @click="onCancel">取消</el-button>
|
<el-button type="primary" @click="submit">确认撤销</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: {
|
code: ''
|
},
|
rules: {
|
code: [
|
{ required: true, message: '请输入托盘号', trigger: ['blur', 'change'] },
|
{ min: 1, max: 50, message: '托盘号长度不能超过50个字符', trigger: ['blur', 'input'] }
|
]
|
}
|
}
|
},
|
methods: {
|
open() {
|
this.show = true
|
},
|
|
async submit() {
|
try {
|
await this.$refs.form.validate()
|
} catch (error) {
|
this.$message.warning('请输入有效的托盘号')
|
this.focusAndSelectInput()
|
return
|
}
|
|
try {
|
const response = await this.http.post(
|
`/api/InboundOrder/UndoPalletGroup?code=${encodeURIComponent(this.form.code.trim())}`
|
)
|
const { status, message, data } = response
|
|
if (status) {
|
this.$message.success(message || '撤销组盘成功')
|
this.refresh()
|
|
if (message && message.includes('托盘仍有剩余明细')) {
|
this.form.code = ''
|
this.$refs.form.clearValidate('code')
|
this.focusAndSelectInput()
|
} else {
|
this.show = false
|
}
|
} else {
|
this.$message.error(message || data?.message || '撤销组盘失败')
|
this.focusAndSelectInput()
|
}
|
} catch (error) {
|
console.error('撤销组盘请求异常：', error)
|
this.$message.error('网络异常或接口错误，请稍后重试')
|
this.focusAndSelectInput()
|
}
|
},
|
|
handleInput(value) {
|
this.form.code = value.replace(/[^a-zA-Z0-9]/g, '').toUpperCase()
|
},
|
|
handlePaste(e) {
|
const clipboardData = e.clipboardData || window.clipboardData
|
const pastedText = clipboardData.getData('text')
|
const cleanedText = pastedText.replace(/[^a-zA-Z0-9]/g, '').toUpperCase()
|
if (cleanedText) {
|
this.form.code = cleanedText
|
setTimeout(() => {
|
this.submit()
|
}, 50)
|
}
|
e.preventDefault()
|
},
|
|
focusAndSelectInput() {
|
this.$nextTick(() => {
|
setTimeout(() => {
|
const inputRef = this.$refs.boxCodeInput
|
if (inputRef) {
|
const inputEl = inputRef.$el ? inputRef.$el.querySelector('input') : inputRef
|
if (inputEl) {
|
inputEl.focus()
|
inputEl.select()
|
}
|
}
|
}, 100)
|
})
|
},
|
|
onCancel() {
|
this.$message.info('取消撤销组盘')
|
this.show = false
|
},
|
|
refresh() {
|
this.$emit('refresh')
|
}
|
},
|
watch: {
|
value(val) {
|
this.show = val
|
},
|
show(val) {
|
this.$emit('input', val)
|
if (val) {
|
// 弹窗打开时延迟聚焦，确保DOM已渲染
|
this.$nextTick(() => {
|
setTimeout(() => {
|
const inputRef = this.$refs.boxCodeInput
|
if (inputRef) {
|
const inputEl = inputRef.$el ? inputRef.$el.querySelector('input') : inputRef
|
if (inputEl) {
|
inputEl.focus()
|
inputEl.select() // 选中内容，方便直接扫码覆盖
|
}
|
}
|
}, 100)
|
})
|
} else {
|
this.form.code = ''
|
if (this.$refs.form) {
|
this.$refs.form.clearValidate()
|
}
|
}
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.dialog-footer {
|
text-align: right;
|
}
|
</style>
|
