| ¶Ô±ÈÐÂÎļþ |
| | |
| | | <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> |