| ¶Ô±ÈÐÂÎļþ |
| | |
| | | <template> |
| | | <vol-box v-model="show" title="ç©æåºåæ¥è¯¢" :width="800" :height="600"> |
| | | <template #content> |
| | | <el-form ref="form" :model="form" :rules="rules" label-width="90px"> |
| | | <!-- ä»åºå·è¾å
¥æ¡ --> |
| | | <el-form-item label="ä»åºå·:" prop="warehouseCode"> |
| | | <el-input |
| | | v-model="form.warehouseCode" |
| | | placeholder="请è¾å
¥ä»åºå·ï¼å¦ï¼5053ï¼" |
| | | clearable |
| | | @input="handleWarehouseInput" |
| | | @keyup.enter="focusMaterielInput" |
| | | ref="warehouseCodeInput" |
| | | :disabled="loading" |
| | | /> |
| | | </el-form-item> |
| | | |
| | | <!-- ç©ææ¡ç è¾å
¥æ¡ --> |
| | | <el-form-item label="ç©ææ¡ç :" prop="materielBarcode"> |
| | | <el-input |
| | | v-model="form.materielBarcode" |
| | | placeholder="è¯·æ«æ/è¾å
¥ç©ææ¡ç ï¼å¦ï¼100401-01211ï¼" |
| | | @keyup.enter="getStockTotal" |
| | | clearable |
| | | @paste="handlePaste" |
| | | @input="handleInput" |
| | | ref="materielCodeInput" |
| | | :disabled="loading" |
| | | /> |
| | | <!-- åºåæ¥è¯¢å è½½ç¶æ --> |
| | | <el-icon class="ml-2" v-if="loading"><loading /></el-icon> |
| | | </el-form-item> |
| | | |
| | | <!-- åºåæ»åæ¾ç¤ºåºå --> |
| | | <el-form-item label="åºåæ»å:" prop="totalStockQuantity"> |
| | | <el-input |
| | | v-model="form.totalStockQuantity" |
| | | placeholder="请è¾å
¥ä»åºå·åç©ææ¡ç æ¥è¯¢" |
| | | disabled |
| | | prefix-icon="el-icon-s-data" |
| | | /> |
| | | <!-- æ æ°æ®æç¤º --> |
| | | <span v-if="form.totalStockQuantity === 0 && !loading && form.materielBarcode && form.warehouseCode" class="text-gray-500 ml-2"> |
| | | è¯¥ç©æå¨å½åä»åºææ åºå |
| | | </span> |
| | | </el-form-item> |
| | | </el-form> |
| | | </template> |
| | | |
| | | <template #footer> |
| | | <div class="dialog-footer"> |
| | | <el-button @click="resetForm">éç½®</el-button> |
| | | <el-button @click="show = false">å
³é</el-button> |
| | | </div> |
| | | </template> |
| | | </vol-box> |
| | | </template> |
| | | |
| | | <script> |
| | | import VolBox from '@/components/basic/VolBox.vue' |
| | | import { Loading } from '@element-plus/icons-vue' |
| | | |
| | | export default { |
| | | components: { VolBox, Loading }, |
| | | props: { |
| | | value: { type: Boolean, default: false } |
| | | }, |
| | | data() { |
| | | // ä»åºå·éªè¯è§å |
| | | const validateWarehouseCode = (rule, value, callback) => { |
| | | if (!value) { |
| | | return callback(new Error('请è¾å
¥ä»åºå·')); |
| | | } |
| | | callback(); |
| | | }; |
| | | |
| | | // ç©ææ¡ç éªè¯è§å |
| | | const validateMaterielBarcode = (rule, value, callback) => { |
| | | if (!value) { |
| | | return callback(new Error('请è¾å
¥ç©ææ¡ç ')); |
| | | } |
| | | callback(); |
| | | }; |
| | | |
| | | return { |
| | | show: false, |
| | | loading: false, // åºåæ¥è¯¢å è½½ç¶æ |
| | | form: { |
| | | warehouseCode: '', // ä»åºå· |
| | | materielBarcode: '', // ç©ææ¡ç |
| | | totalStockQuantity: 0 // åºåæ»å |
| | | }, |
| | | // 表åéªè¯è§å |
| | | rules: { |
| | | warehouseCode: [ |
| | | { validator: validateWarehouseCode, trigger: ['blur', 'change'] } |
| | | ], |
| | | materielBarcode: [ |
| | | { validator: validateMaterielBarcode, trigger: ['blur', 'change'] } |
| | | ] |
| | | } |
| | | } |
| | | }, |
| | | methods: { |
| | | // æå¼å¼¹çªåå§å |
| | | open() { |
| | | this.show = true |
| | | this.$nextTick(() => { |
| | | this.focusWarehouseInput() |
| | | }) |
| | | }, |
| | | async getStockTotal() { |
| | | // 表åéªè¯ |
| | | try { |
| | | await this.$refs.form.validate(); |
| | | } catch (error) { |
| | | if (!this.form.warehouseCode) { |
| | | this.focusWarehouseInput(); |
| | | } else { |
| | | this.focusAndSelectInput(); |
| | | } |
| | | return; |
| | | } |
| | | |
| | | this.loading = true; |
| | | try { |
| | | const res = await this.http.post('/api/StockDetailByMateriel/CalculateStock?warehouseCode=' + this.form.warehouseCode.trim() + '&materielCode=' + this.form.materielBarcode.trim()); |
| | | if (res.status && res.code === 0) { |
| | | this.form.totalStockQuantity = Number(res.data) || 0; |
| | | this.$message.success('åºåæ¥è¯¢æå'); |
| | | } else { |
| | | this.form.totalStockQuantity = 0; |
| | | this.$message.error(res.message || 'åºåæ¥è¯¢å¤±è´¥ï¼æ¥å£è¿åå¼å¸¸'); |
| | | } |
| | | } catch (error) { |
| | | this.form.totalStockQuantity = 0; |
| | | const errorMsg = error.response |
| | | ? `æ¥å£é误ï¼${error.response.status} - ${error.response.data?.message || 'æªç¥é误'}` |
| | | : `ç½ç»å¼å¸¸ï¼${error.message}`; |
| | | this.$message.error(`åºåæ¥è¯¢å¤±è´¥ï¼${errorMsg}`); |
| | | } finally { |
| | | this.loading = false; |
| | | } |
| | | }, |
| | | |
| | | // ä»åºå·è¾å
¥è¿æ»¤ |
| | | handleWarehouseInput(value) { |
| | | this.form.warehouseCode = value.replace(/[^a-zA-Z0-9]/g, '').toUpperCase(); |
| | | this.$nextTick(() => { |
| | | this.$refs.form.validateField('warehouseCode'); |
| | | }); |
| | | }, |
| | | |
| | | // ç©ææ¡ç è¾å
¥è¿æ»¤ |
| | | handleInput(value) { |
| | | this.form.materielBarcode = value.replace(/[^-a-zA-Z0-9]/g, ''); |
| | | this.$nextTick(() => { |
| | | this.$refs.form.validateField('materielBarcode'); |
| | | }); |
| | | }, |
| | | |
| | | // ç²è´´ç©ææ¡ç èªå¨æ¥è¯¢ |
| | | handlePaste(e) { |
| | | const clipboardData = e.clipboardData || window.clipboardData; |
| | | const pastedText = clipboardData.getData('text'); |
| | | const cleanedText = pastedText.replace(/[^-a-zA-Z0-9]/g, ''); |
| | | if (cleanedText) { |
| | | this.form.materielBarcode = cleanedText; |
| | | setTimeout(() => { |
| | | this.getStockTotal(); |
| | | }, 50); |
| | | } |
| | | e.preventDefault(); |
| | | }, |
| | | |
| | | // ä»åºå·å车èç¦ç©ææ¡ç |
| | | focusMaterielInput() { |
| | | this.$nextTick(() => { |
| | | const inputRef = this.$refs.materielCodeInput; |
| | | if (inputRef) { |
| | | const inputEl = inputRef.$el ? inputRef.$el.querySelector('input') : inputRef; |
| | | inputEl?.focus(); |
| | | } |
| | | }); |
| | | }, |
| | | |
| | | // èç¦ä»åºå·è¾å
¥æ¡ |
| | | focusWarehouseInput() { |
| | | this.$nextTick(() => { |
| | | const inputRef = this.$refs.warehouseCodeInput; |
| | | if (inputRef) { |
| | | const inputEl = inputRef.$el ? inputRef.$el.querySelector('input') : inputRef; |
| | | inputEl?.focus(); |
| | | } |
| | | }); |
| | | }, |
| | | |
| | | // èç¦å¹¶éä¸ç©ææ¡ç è¾å
¥æ¡ |
| | | focusAndSelectInput() { |
| | | this.$nextTick(() => { |
| | | setTimeout(() => { |
| | | const inputRef = this.$refs.materielCodeInput; |
| | | if (inputRef) { |
| | | const inputEl = inputRef.$el ? inputRef.$el.querySelector('input') : inputRef; |
| | | if (inputEl) { |
| | | inputEl.focus(); |
| | | inputEl.select(); |
| | | } |
| | | } |
| | | }, 100); |
| | | }); |
| | | }, |
| | | |
| | | // é置表å |
| | | resetForm() { |
| | | this.form = { |
| | | warehouseCode: '', |
| | | materielBarcode: '', |
| | | totalStockQuantity: 0 |
| | | }; |
| | | this.$refs.form.clearValidate(); |
| | | this.focusWarehouseInput(); |
| | | } |
| | | }, |
| | | watch: { |
| | | show(val) { |
| | | if (val) { |
| | | this.$nextTick(() => { |
| | | this.focusWarehouseInput() |
| | | }) |
| | | } else { |
| | | this.resetForm(); |
| | | } |
| | | } |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | <style scoped> |
| | | .dialog-footer { |
| | | text-align: right; |
| | | } |
| | | .text-gray-500 { |
| | | color: #909399; |
| | | font-size: 12px; |
| | | } |
| | | .ml-2 { |
| | | margin-left: 8px; |
| | | } |
| | | </style> |