1

647556386

2025-11-30 8639f19c82f6e263654db44286256bb8d028d2c2

 ÏîÄ¿´úÂë/WIDESEA_WMSClient/src/extension/inbound/extend/Pallet.vue

@@ -1,202 +1,162 @@
<template>
   <vol-box
    v-model="groupPalletVisible"
    :title="'组盘操作 - å•æ®å·ï¼š' + currentDocNo"
    :height="1000"  
    :width="1100"   
    :padding="20"  
    :modal="true"   
  
     @open="handleDialogOpen"
    @close="handleDialogClose"
  >
  <div class="barcode-scanner-container">
      
      <!-- æ‰˜ç›˜ä¿¡æ¯æ˜¾ç¤º -->
      <div class="tray-info" v-if="trayBarcode">
        <i class="el-icon-s-management"></i> å½“前托盘: {{ trayBarcode }}
       <!--  <el-button 
          class="small-button"
          type="text" 
          @click="clearTray"
          style="float: right;"
        >
          æ¸…除托盘
        </el-button> -->
  <vol-box v-model="groupPalletVisible" :title="'组盘操作 - å•æ®å·ï¼š' + currentDocNo" :height="1000" :width="1100" :padding="20"
    :modal="true" @open="handleDialogOpen" @close="handleDialogClose">
    <div class="barcode-scanner-container">

      <!-- ä»“库选择 - ç´§å‡‘布局 -->
      <div class="location-section compact">
        <el-form :model="form" :rules="rules" ref="locationForm" class="compact-form">
          <el-form-item label="仓库" prop="warehouseType" class="location-select compact-item">
            <el-select v-model="form.warehouseType" placeholder="请选择仓库" clearable filterable
              @change="handleWarehouseChange" style="width: 100%" :loading="warehouseLoading" size="medium">
              <el-option v-for="item in warehouseTypes" :key="item.warehouseType" :label="item.warehouseTypeDesc"
                :value="item.warehouseType" />
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      
      <!-- æ‰«ç æˆ–手动输入区域 -->
      <div class="input-section">
        <el-card shadow="hover">
          <div slot="header">
            <span><i class="el-icon-scanner"></i> </span>

      <!-- ä»“库区域选择 - ç´§å‡‘布局 -->
      <div class="location-section compact">
        <el-form :model="form" :rules="rules" ref="locationForm" class="compact-form">
          <el-form-item label="仓库区域" prop="locationType" class="location-select compact-item">
            <el-select v-model="form.locationType" placeholder="请先选择仓库" clearable filterable
              @change="handleLocationChange" style="width: 100%" :loading="locationLoading" size="medium">
              <el-option v-for="item in locationTypes" :key="item.locationType" :label="item.locationTypeDesc"
                :value="item.locationType" />
            </el-select>
          </el-form-item>
        </el-form>
      </div>

      <!-- æ‰˜ç›˜ä¿¡æ¯æ˜¾ç¤º - ç´§å‡‘布局 -->
      <div class="tray-info compact" v-if="trayBarcode">
        <i class="el-icon-s-management"></i> å½“前料箱: {{ trayBarcode }}
        <span class="location-info" v-if="form.warehouseType">
          | ä»“库: {{ currentWarehouseName }}
        </span>
        <span class="location-info" v-if="form.locationType">
          | ä»“库区域: {{ currentLocationDesc }}
        </span>
      </div>

      <!-- æ‰«ç åŒºåŸŸ - ç´§å‡‘布局 -->
      <div class="input-section compact">
        <el-card shadow="hover" class="compact-card">
          <div slot="header" class="compact-header">
            <span><i class="el-icon-scanner"></i> æ‰«ç åŒºåŸŸ</span>
            <span class="scan-status">
              <span class="scan-indicator"></span>扫码就绪
              <span class="scan-indicator"></span>
              {{ form.locationType && form.warehouseType ? '扫码就绪' : '请先选择仓库和仓库区域' }}
            </span>
          </div>
          

          <!-- æ‰˜ç›˜æ¡ç è¾“å…¥ -->
          <div class="input-wrapper custom-input-group">
    <div class="input-label">料箱码</div>
            <el-input
              ref="trayInput"
              v-model="trayBarcode"
              placeholder="请扫描或输入料箱码后按回车键"
              clearable
              @keyup.enter.native="handleTraySubmit"
              @clear="handleTrayClear"
              @input="handleTrayInput"
                 class="custom-input"
            >
              <template slot="prepend">
                <span>料箱码</span>
              </template>
          <div class="input-wrapper custom-input-group compact-input">
            <div class="input-label">料箱码</div>
            <el-input ref="trayInput" v-model="trayBarcode" placeholder="请扫描或输入料箱码后按回车键" clearable
              :disabled="!form.locationType || !form.warehouseType" @keyup.enter.native="handleTraySubmit"
              @clear="handleTrayClear" @input="handleTrayInput" class="custom-input" size="medium">
              <template slot="append">
                <el-button 
                  @click="handleTraySubmit"
                  type="primary"
                  icon="el-icon-position"
                >
                <el-button @click="handleTraySubmit" type="primary" icon="el-icon-position"
                  :disabled="!form.locationType || !trayBarcode || !form.warehouseType" size="medium">
                  ç¡®è®¤
                </el-button>
              </template>
            </el-input>
          </div>
          

          <!-- ç‰©æ–™æ¡ç è¾“å…¥ -->
          <div class="input-wrapper custom-input-group">
          <div class="input-wrapper custom-input-group compact-input">
            <div class="input-label">物料条码</div>
            <el-input
              ref="barcodeInput"
              v-model="barcode"
              placeholder="请扫描或输入物料条码后按回车键"
              clearable
              :disabled="!trayBarcode"
              @keyup.enter.native="handleBarcodeSubmit"
              @clear="handleClear"
              @input="handleBarcodeInput"
                    class="custom-input"
            >
              <template slot="prepend">
                <span>物料条码</span>
              </template>
            <el-input ref="barcodeInput" v-model="barcode" placeholder="请扫描或输入物料条码后按回车键" clearable
              :disabled="!form.locationType || !trayBarcode || !form.warehouseType"
              @keyup.enter.native="handleBarcodeSubmit" @clear="handleClear" @input="handleBarcodeInput"
              class="custom-input" size="medium">
              <template slot="append">
                <el-button 
                  :loading="loading" 
                  @click="handleBarcodeSubmit"
                  type="primary"
                  icon="el-icon-search"
                  :disabled="!trayBarcode"
                >
                <el-button :loading="loading" @click="handleBarcodeSubmit" type="primary" icon="el-icon-search"
                  :disabled="!form.locationType || !trayBarcode || !barcode || !from.warehouseType" size="medium">
                  {{ loading ? '查询中...' : '查询' }}
                </el-button>
              </template>
            </el-input>
          </div>
          
          <div class="input-tips">
            <p>提示：先输入托盘条码，然后输入物料条码</p>
       

          <div class="input-tips compact-tips">
            <p>提示：请先选择仓库 â†’ é€‰æ‹©ä»“库区域 â†’ è¾“入料箱码 â†’ è¾“入物料条码</p>
            <p v-if="!form.warehouseType" class="warning-text">⚠️ è¯·å…ˆé€‰æ‹©ä»“库</p>
            <p v-if="!form.locationType && !form.warehouseType" class="warning-text">⚠️ è¯·å…ˆé€‰æ‹©ä»“库区域</p>
            <p v-if="form.warehouseType && form.locationType && !trayBarcode" class="warning-text">⚠️ è¯·å…ˆè¾“入料箱码</p>
          </div>
        

        </el-card>
      </div>

      <!-- åŠ è½½çŠ¶æ€ -->
      <div v-if="loading" class="loading">
      <div v-if="loading" class="loading compact">
        <el-progress :percentage="100" status="success" :show-text="false" />
        <p>正在查询物料信息...</p>
      </div>

      <!-- é”™è¯¯æç¤º -->
      <div v-if="error" class="error-message">
        <el-alert
          :title="error"
          type="error"
          show-icon
          closable
          @close="error = ''"
        />
      <div v-if="error" class="error-message compact">
        <el-alert :title="error" type="error" show-icon closable @close="error = ''" />
      </div>

      <!-- ç‰©æ–™åˆ—表 -->
      <div class="material-list">
        <el-card shadow="hover">
          <div slot="header">
      <!-- ç‰©æ–™åˆ—表 - å›ºå®šé«˜åº¦å¸¦æ»šåŠ¨æ¡ -->
      <div class="material-list compact">
        <el-card shadow="hover" class="compact-card">
          <div slot="header" class="compact-header">
            <span><i class="el-icon-tickets"></i> ç»„盘数据</span>
            <span class="list-actions">
              <el-tag type="primary">共 {{ materials.length }} æ¡è®°å½•</el-tag>
              <el-tag v-if="trayBarcode" type="success">托盘: {{ trayBarcode }}</el-tag>
    <!--           <el-button 
                v-if="materials.length > 0"
                class="small-button clear-all-btn"
                type="danger" 
                icon="el-icon-delete" 
                @click="clearAllMaterials"
              >
                æ¸…空列表
              </el-button> -->
          <!--     <el-button 
                class="small-button clear-all-btn"
                @click="debugMode = !debugMode"
              >
                {{ debugMode ? '隐藏调试' : '显示调试' }}
              </el-button> -->
              <el-tag type="primary" size="small">共 {{ materials.length }} æ¡</el-tag>
              <el-tag type="primary" size="small">未组盘 {{ totalStockCount }}</el-tag>
              <el-tag type="primary" size="small">未入库数量 {{ totalStockSum }}{{ uniqueUnit }}</el-tag>
              <el-tag v-if="trayBarcode" type="success" size="small">托盘: {{ trayBarcode }}</el-tag>
              <el-tag v-if="form.warehouseType" type="info" size="small">仓库: {{ currentWarehouseName }}</el-tag>
              <el-tag v-if="form.locationType" type="info" size="small">区域: {{ currentLocationDesc }}</el-tag>
            </span>
          </div>
          
          <div v-if="materials.length === 0" class="empty-state">

          <div v-if="materials.length === 0" class="empty-state compact">
            <i class="el-icon-document"></i>
            <p v-if="!trayBarcode">请先输入托盘条码</p>
            <p v-if="!form.warehouseType">请先选择仓库</p>
            <p v-if="!form.locationType">请先选择仓库区域</p>
            <p v-else-if="!trayBarcode">请先输入料箱条码</p>
            <p v-else>暂无物料数据，请扫描或输入物料条码</p>
          </div>
          
          <el-table
            v-else
            :data="materials"
            stripe
            style="width: 100%"
          >
            <el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
              <el-table-column prop="barcode" label="条码" min-width="140"></el-table-column>
            <el-table-column prop="materielCode" label="物料编码" min-width="150"></el-table-column>
            <el-table-column prop="batchNo" label="批次" min-width="150"></el-table-column>
            <el-table-column prop="stockQuantity" label="数量" min-width="130"></el-table-column>
            <el-table-column prop="unit" label="单位" width="80" align="center"></el-table-column>
            <el-table-column prop="supplyCode" label="供应商" min-width="130"></el-table-column>
            <el-table-column prop="warehouseCode" label="仓库" min-width="120"></el-table-column>
         
     <!--        <el-table-column label="操作" width="100" align="center">
              <template slot-scope="scope">
                <el-button
                  v-if="scope"
                  class="small-button"
                  type="danger"
                  icon="el-icon-delete"
                  circle
                  @click="removeMaterial(scope.$index)"
                ></el-button>
              </template>
            </el-table-column> -->
          </el-table>

          <div class="table-container" v-else>
            <el-table :data="materials" stripe style="width: 100%" height="100%" size="small">
              <el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
              <el-table-column prop="barcode" label="条码" min-width="140" show-overflow-tooltip></el-table-column>
              <el-table-column prop="materielCode" label="物料编码" min-width="150" show-overflow-tooltip></el-table-column>
              <el-table-column prop="batchNo" label="批次" min-width="150" show-overflow-tooltip></el-table-column>
              <el-table-column prop="stockQuantity" label="数量" min-width="130" align="right"></el-table-column>
              <el-table-column prop="unit" label="单位" width="80" align="center"></el-table-column>
              <el-table-column prop="supplyCode" label="供应商" min-width="130" show-overflow-tooltip></el-table-column>
              <el-table-column prop="warehouseType" label="仓库" min-width="120" show-overflow-tooltip></el-table-column>
            </el-table>
          </div>
        </el-card>
      </div>
    </div>
 
   <!--      <div slot="footer" class="dialog-footer">

    <!--      <div slot="footer" class="dialog-footer">
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary" @click="handleConfirm">确认</el-button>
    </div> -->
    </vol-box>
  </vol-box>
</template>

<script>
import http from '@/api/http.js';
import VolBox from '@/components/basic/VolBox.vue';
import VolForm from '@/components/basic/VolForm.vue';
import VolTable from '@/components/basic/VolTable.vue';
import { ElLoading, ElMessage,ElMessageBox  } from 'element-plus';
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus';
import { ref, onMounted, onUnmounted } from 'vue'
import InboundOrder from '../../../views/inbound/inboundOrder.vue';
import { th } from 'element-plus/es/locales.mjs';

export default {
  name: 'BarcodeScanner',
@@ -208,23 +168,54 @@

  data() {
    return {
        palletVisible: this.visible,
         trayBarcode: '',
          barcode: '',
          materials: [],
          loading: false,
          error: '',
          debugMode: false,
          currentFocus: 'tray',
          
          // æ‰«ç æžªç›¸å…³å˜é‡
          scanCode: '',
          lastKeyTime: null,
          isManualInput: false,
          isScanning: false,
          scanTimer: null,
          manualInputTimer: null,
          scanTarget: 'tray', // å½“前扫码目标: tray æˆ– material
      palletVisible: this.visible,
      trayBarcode: '',
      barcode: '',
      materials: [],
      loading: false,
      error: '',
      debugMode: false,
      currentFocus: 'warehouse',

      // æ‰«ç æžªç›¸å…³å˜é‡
      scanCode: '',
      lastKeyTime: null,
      isManualInput: false,
      isScanning: false,
      scanTimer: null,
      manualInputTimer: null,
      scanTarget: 'tray', // å½“前扫码目标: tray æˆ– material

      // åº“存统计相关变量
      totalStockSum: 0,
      totalStockCount: 0,
      uniqueUnit: '',
      sumLoading: false,
      sumError: '',
      // ä»“库相关变量
      warehouseTypes: [],
      warehouseLoading: false,
      // ä»“库区域相关变量
      locationTypes: [],
      locationLoading: false,
      form: {
        warehouseType: null,
        locationType: null
      },
      rules: {
        locationType: [
          {
            validator: this.validateLocationType,
            trigger: 'change'
          }
        ],
        warehouseType: [
          {
            massage: '请选择仓库',
            trigger: 'change'
          }
        ]
      }
    }
  },
  computed: {
@@ -232,58 +223,324 @@
      get() { return this.visible; },
      set(newVal) { this.$emit('update:visible', newVal); }
    },
    currentDocNo() { return this.docNo; }
    currentDocNo() { return this.docNo; },
    // å½“前选择的仓库名称
    currentWarehouseName() {
      const warehouse = this.warehouseTypes.find(item => item.warehouseType === this.form.warehouseType);
      return warehouse ? warehouse.warehouseTypeDesc : '';
    },
    // å½“前选择的仓库区域描述
    currentLocationDesc() {
      const location = this.locationTypes.find(item => item.locationType === this.form.locationType)
      return location ? location.locationTypeDesc : ''
    }
  },
  watch: {
    visible(newVal, oldVal) {
    this.palletVisible = newVal;
    
    // å½“从 false å˜ä¸º true æ—¶ï¼Œè¡¨ç¤ºå¼¹æ¡†æ‰“å¼€
    if (newVal === true && oldVal === false) {
      console.log('弹框打开，重置数据');
      this.resetData();
      this.$nextTick(() => {
        setTimeout(() => {
          this.focusTrayInput();
        }, 300);
      });
    }
    
    // å½“从 true å˜ä¸º false æ—¶ï¼Œè¡¨ç¤ºå¼¹æ¡†å…³é—­
    if (newVal === false && oldVal === true) {
      console.log('弹框关闭，重置数据');
      this.resetData();
    }
  },
  palletVisible(newVal) {
    this.$emit('update:visible', newVal);
  },
      this.palletVisible = newVal;

      // å½“从 false å˜ä¸º true æ—¶ï¼Œè¡¨ç¤ºå¼¹æ¡†æ‰“å¼€
      if (newVal === true && oldVal === false) {
        console.log('弹框打开，重置数据');
        this.resetData();
        this.$nextTick(() => {
          setTimeout(() => {
            // this.focusTrayInput();
            this.initwarehouseTypes(); // åˆå§‹åŒ–仓库
            this.initLocationTypes(); // åˆå§‹åŒ–仓库区域
            this.fetchStockStatistics(); // åŠ è½½ç»Ÿè®¡æ•°æ®
          }, 300);
        });
      }

      // å½“从 true å˜ä¸º false æ—¶ï¼Œè¡¨ç¤ºå¼¹æ¡†å…³é—­
      if (newVal === false && oldVal === true) {
        console.log('弹框关闭，重置数据');
        this.resetData();
      }
    },
    palletVisible(newVal) {
      this.$emit('update:visible', newVal);
    },
    docNo(newVal) {
      if (newVal) {
        this.palletForm = { palletCode: '', barcode: '' };
        this.backData = [];
        this.$refs.palletForm?.reset();
        this.fetchStockStatistics(); // å•æ®å·å˜äº†ï¼Œåˆ·æ–°ç»Ÿè®¡
      }
    }
  },
  'form.warehouseType'(newVal) {
    if (newVal) {
      this.form.locationType = null;
    } else {
      this.locationTypes = [];
    }
  },

 mounted() {
 
        // æ·»åŠ å…¨å±€é”®ç›˜ç›‘听
        document.addEventListener('keypress', this.handleKeyPress);
        
        // ä½¿ç”¨setTimeout确保DOM完全渲染后再聚焦
        setTimeout(() => {
          this.focusTrayInput();
        }, 300);
      },
      beforeDestroy() {
        // æ¸…理事件监听
        document.removeEventListener('keypress', this.handleKeyPress);
         this.clearAllTimers();
      },
      methods: {
         // é‡ç½®æ‰€æœ‰æ•°æ®
  mounted() {

    // æ·»åŠ å…¨å±€é”®ç›˜ç›‘听
    document.addEventListener('keypress', this.handleKeyPress);

    // ä½¿ç”¨setTimeout确保DOM完全渲染后再聚焦
    setTimeout(() => {
      // this.focusTrayInput();
      this.focusLocationSelect();
    }, 300);
  },
  beforeDestroy() {
    // æ¸…理事件监听
    document.removeEventListener('keypress', this.handleKeyPress);
    this.clearAllTimers();
  },
  methods: {
    /**
* è‡ªå®šä¹‰ä»“库区域验证
* å…è®¸å€¼ä¸º0，因为0是合法的locationType
*/
    validateLocationType(rule, value, callback) {
      // æ£€æŸ¥å€¼æ˜¯å¦ä¸ºnull、undefined或空字符串，但允许数字0
      if (!this.form.warehouseType) {
        callback(new Error('请先选择仓库'));
      } else if (value === null || value === undefined || value === '') {
        callback(new Error('请选择仓库区域'));
      } else {
        callback();
      }
    },
    /**
    * åˆå§‹åŒ–仓库区域数据
    */
    async initLocationTypes() {
      this.locationLoading = true;
      this.error = '';

      try {
        const response = await http.post('/api/LocationInfo/GetLocationTypes');

        if (response.status && Array.isArray(response.data)) {
          this.locationTypes = response.data;
          if (this.locationTypes.length === 0) {
            this.error = '未获取到仓库区域数据';
          } else {
            // å¦‚果有默认区域，可以在这里设置
            // this.form.locationType = this.locationTypes[0].locationType;
          }
        } else {
          this.error = '获取仓库区域数据失败';
        }
      } catch (error) {
        console.error('获取仓库区域失败:', error);
        this.error = `获取仓库区域失败: ${error.message || '网络错误'}`;
      } finally {
        this.locationLoading = false;
      }
    },

    /**
     * åˆå§‹åŒ–仓库数据
     */
    async initwarehouseTypes() {
      this.warehouseLoading = true;
      this.error = '';

      try {
        const response = await http.post('/api/Warehouse/GetwarehouseTypes');

        if (response.status && Array.isArray(response.data)) {
          this.warehouseTypes = response.data;
          if (this.warehouseTypes.length === 0) {
            this.error = '未获取到仓库数据';
          } else {
            // å¦‚果有默认区域，可以在这里设置
            // this.form.locationType = this.locationTypes[0].locationType;
          }
        } else {
          this.error = '获取仓库数据失败';
        }
      } catch (error) {
        console.error('获取仓库失败:', error);
        this.error = `获取仓库失败: ${error.message || '网络错误'}`;
      } finally {
        this.warehouseLoading = false;
      }
    },


    /**
    * ä»“库区域变更处理
    */
    handleLocationChange(value) {
      console.log('选择仓库区域:', value, '类型:', typeof value, this.currentLocationDesc);

      // ç«‹å³æ¸…除错误信息
      this.error = '';

      // æ‰‹åŠ¨è§¦å‘表单验证更新
      this.$nextTick(() => {
        if (this.$refs.locationForm) {
          // æ¸…除该字段的验证状态，然后重新验证
          this.$refs.locationForm.clearValidate('locationType');

          // çŸ­æš‚延迟后重新验证，确保DOM已更新
          setTimeout(() => {
            this.$refs.locationForm.validateField('locationType', (errorMsg) => {
              if (!errorMsg && (value === 0 || value)) {
                console.log('仓库区域验证通过:', value);
                // åŒºåŸŸé€‰æ‹©åŽï¼Œè‡ªåŠ¨èšç„¦åˆ°æ‰˜ç›˜è¾“入框
                this.focusLocationSelect();
              }
            });
          }, 100);
        }
      });
    },

    /**
     * ä»“库变更处理
     */
    handleWarehouseChange(value) {
      console.log('选择仓库:', value, '类型:', typeof value, this.currentWarehouseName);

      // ç«‹å³æ¸…除错误信息
      this.error = '';

      // æ‰‹åŠ¨è§¦å‘表单验证更新
      this.$nextTick(() => {
        if (this.$refs.locationForm) {
          // æ¸…除该字段的验证状态，然后重新验证
          this.$refs.locationForm.clearValidate('warehouseType');

          // çŸ­æš‚延迟后重新验证，确保DOM已更新
          setTimeout(() => {
            this.$refs.locationForm.validateField('warehouseType', (errorMsg) => {
              if (!errorMsg && (value === 0 || value)) {
                console.log('仓库验证通过:', value);
                this.focusLocationSelect();
              }
            });
          }, 100);
        }
      });
    },

    async fetchStockStatistics() {
      // å•æ®å·ä¸ºç©ºæ—¶ä¸æŸ¥è¯¢
      if (!this.docNo) {
        this.sumError = '单据号为空，无法统计';
        return;
      }

      this.sumLoading = true;
      this.sumError = '';
      try {
        // è°ƒç”¨åŽç«¯ç»Ÿè®¡æŽ¥å£ï¼ˆæ›¿æ¢ä¸ºä½ çš„实际接口路径）
        const response = await http.post('/api/InboundOrder/UnPalletQuantity?orderNo=' + this.docNo, {

        });

        // ç»‘定数据（匹配 PalletSumQuantityDTO ç»“构）
        if (response.data) {
          this.totalStockSum = response.data.stockSumQuantity || 0; // æ€»åº“存数量
          this.totalStockCount = response.data.stockCount || 0;     // æ€»åº“存记录数
          this.uniqueUnit = response.data.uniqueUnit || '';               // è®¡é‡å•ä½
        }
      } catch (err) {
        this.sumError = '统计加载失败';
        this.totalStockSum = 0;
        this.totalStockCount = 0;
        console.error('库存统计查询异常：', err);
      } finally {
        this.sumLoading = false;
      }
    },
    /**
     * è¡¨å•éªŒè¯
     */
    async validateForm() {
      return new Promise((resolve) => {
        if (!this.$refs.locationForm) {
          this.error = '表单未初始化';
          this.$message.warning('请先选择仓库区域');
          resolve(false);
          return;
        }

        this.$refs.locationForm.validate((valid) => {
          if (valid) {
            this.error = '';
            resolve(true);
          } else {
            // æ‰‹åŠ¨æ£€æŸ¥locationType，正确处理值为0的情况
            if (!this.from.warehouseType) {
              this.error = '请先选择仓库';
            }
            else if (this.form.locationType === null || this.form.locationType === undefined || this.form.locationType === '') {
              this.error = '请先选择仓库区域';
              //this.$message.warning('请先选择仓库区域');
            } else {
              // å¦‚果值存在（包括0），但验证不通过，可能是其他验证错误
              this.error = '请检查表单填写是否正确';
            }
            resolve(false);
          }
        });
      });
    },
    focusWarehouseSelect() {
      if (this.$refs.locationForm) {
        const selectEl = this.$el.querySelector('.location-select:first-child .el-input__inner');
        if (selectEl) {
          selectEl.focus();
          this.currentFocus = 'warehouse';
        }
      }
    },
    // èšç„¦åˆ°ä»“库区域选择
    focusLocationSelect() {
      if (this.$refs.locationForm) {
        const selectEl = this.$el.querySelector('.location-select:nth-child(2) .el-input__inner');
        if (selectEl) {
          selectEl.focus();
          this.currentFocus = 'location';
        }
      }
    },
    // èšç„¦åˆ°æ‰˜ç›˜è¾“入框
    focusTrayInput() {
      if (this.$refs.trayInput && this.$refs.trayInput.$el) {
        const inputEl = this.$refs.trayInput.$el.querySelector('input');
        if (inputEl) {
          inputEl.focus();
          this.currentFocus = 'tray';
          this.scanTarget = 'tray';
        }
      }
    },

    // èšç„¦åˆ°ç‰©æ–™è¾“入框
    focusBarcodeInput() {
      if (this.$refs.barcodeInput && this.$refs.barcodeInput.$el) {
        const inputEl = this.$refs.barcodeInput.$el.querySelector('input');
        if (inputEl) {
          inputEl.focus();
          this.currentFocus = 'material';
          this.scanTarget = 'material';
          
          
            inputEl.select();
            console.log('物料输入框内容已选中');
          
        }
      }
    },

     
    
    
    // é‡ç½®æ‰€æœ‰æ•°æ®
    resetData() {
      console.log('重置弹框数据');
      this.trayBarcode = '';
@@ -295,11 +552,27 @@
      this.lastKeyTime = null;
      this.isManualInput = false;
      this.isScanning = false;
      this.currentFocus = 'tray';
      this.currentFocus = 'warehouse';
      this.scanTarget = 'tray';
      this.clearAllTimers();
      this.totalStockSum = 0;
      this.totalStockCount = 0;
      this.sumLoading = false;
      this.sumError = '';
      this.form = {
        warehouseType: null,
        locationType: null
      }
      this.warehouseTypes = [];
      this.locationTypes = [];
      // æ¸…除表单验证状态
      this.$nextTick(() => {
        if (this.$refs.locationForm) {
          this.$refs.locationForm.clearValidate();
        }
      });
    },
    

    // æ¸…除所有计时器
    clearAllTimers() {
      if (this.manualInputTimer) {
@@ -311,7 +584,7 @@
        this.scanTimer = null;
      }
    },
    

    // å¼¹æ¡†æ‰“开时重置数据
    handleDialogOpen() {
      console.log('弹框打开，重置数据');
@@ -319,464 +592,631 @@
      // ä½¿ç”¨setTimeout确保DOM完全渲染后再聚焦
      this.$nextTick(() => {
        setTimeout(() => {
          this.focusTrayInput();
          this.initwarehouseTypes();
          this.initLocationTypes(); // åˆå§‹åŒ–仓库区域
          // ç¡®ä¿è¡¨å•å¼•ç”¨å­˜åœ¨åŽå†èšç„¦
          if (this.$refs.locationForm) {
            this.focusWarehouseSelect();
          } else {
            // å¦‚果表单引用还不存在，稍后重试
            setTimeout(() => {
              this.focusWarehouseSelect();
            }, 500);
          }
        }, 300);
      });
    },
    

    // å¼¹æ¡†å…³é—­æ—¶é‡ç½®æ•°æ®
    handleDialogClose() {
      console.log('弹框关闭，重置数据');
      this.resetData();
    },
    

    // å–消按钮
    handleCancel() {
      this.palletVisible = false;
    },
    

    // ç¡®è®¤æŒ‰é’®
    handleConfirm() {
    async handleConfirm() {
      if (!await this.validateForm()) return;

      if (this.materials.length === 0) {
        this.$message.warning('请至少添加一个物料');
        return;
      }
      

      if (!this.trayBarcode) {
        this.$message.warning('请输入托盘条码');
        return;
      }
      

      const result = {
        warehouseType: this.form.warehouseType,
        warehouseName: this.currentWarehouseName,
        locationType: this.form.locationType,
        locationDesc: this.currentLocationDesc,
        trayBarcode: this.trayBarcode,
        materials: this.materials,
        docNo: this.docNo
      };
      

      // è§¦å‘父组件的 back-success äº‹ä»¶
      this.$emit('back-success', result);
      this.palletVisible = false;
    },
        // èšç„¦åˆ°æ‰˜ç›˜è¾“入框
        focusTrayInput() {
          if (this.$refs.trayInput && this.$refs.trayInput.$el) {
            const inputEl = this.$refs.trayInput.$el.querySelector('input');
            if (inputEl) {
              inputEl.focus();
              this.currentFocus = 'tray';
              this.scanTarget = 'tray';
            }
          }
        },
        
        // èšç„¦åˆ°ç‰©æ–™è¾“入框
        focusBarcodeInput() {
          if (this.$refs.barcodeInput && this.$refs.barcodeInput.$el) {
            const inputEl = this.$refs.barcodeInput.$el.querySelector('input');
            if (inputEl) {
              inputEl.focus();
              this.currentFocus = 'material';
              this.scanTarget = 'material';
            }
          }
        },
        
        // å¤„理托盘输入
        handleTrayInput() {
          // æ ‡è®°ä¸ºæ‰‹åŠ¨è¾“入模式
          this.isManualInput = true;
          this.isScanning = false;
          
          // æ¸…除之前的计时器
          if (this.manualInputTimer) {
            clearTimeout(this.manualInputTimer);
          }
          
          // è®¾ç½®è®¡æ—¶å™¨ï¼Œå¦‚果一段时间内没有输入，则重置为扫码模式
          this.manualInputTimer = setTimeout(() => {
            this.isManualInput = false;
          }, 1000);
        },
        
        // å¤„理物料输入
        handleBarcodeInput() {
          // æ ‡è®°ä¸ºæ‰‹åŠ¨è¾“入模式
          this.isManualInput = true;
          this.isScanning = false;
          
          // æ¸…除之前的计时器
          if (this.manualInputTimer) {
            clearTimeout(this.manualInputTimer);
          }
          
          // è®¾ç½®è®¡æ—¶å™¨ï¼Œå¦‚果一段时间内没有输入，则重置为扫码模式
          this.manualInputTimer = setTimeout(() => {
            this.isManualInput = false;
          }, 1000);
        },
        
        // å¤„理托盘条码提交
        handleTraySubmit() {
          const currentTrayBarcode = this.trayBarcode.trim();
          
          if (!currentTrayBarcode) {
            this.error = '请输入或扫描托盘条码';
            return;
          }
    // å¤„理托盘输入
    handleTrayInput() {
      // æ ‡è®°ä¸ºæ‰‹åŠ¨è¾“入模式
      this.isManualInput = true;
      this.isScanning = false;

          this.error = '';
      // æ¸…除之前的计时器
      if (this.manualInputTimer) {
        clearTimeout(this.manualInputTimer);
      }

      // è®¾ç½®è®¡æ—¶å™¨ï¼Œå¦‚果一段时间内没有输入，则重置为扫码模式
      this.manualInputTimer = setTimeout(() => {
        this.isManualInput = false;
      }, 1000);
    },

    // å¤„理物料输入
    handleBarcodeInput() {
      // æ ‡è®°ä¸ºæ‰‹åŠ¨è¾“入模式
      this.isManualInput = true;
      this.isScanning = false;

      // æ¸…除之前的计时器
      if (this.manualInputTimer) {
        clearTimeout(this.manualInputTimer);
      }

      // è®¾ç½®è®¡æ—¶å™¨ï¼Œå¦‚果一段时间内没有输入，则重置为扫码模式
      this.manualInputTimer = setTimeout(() => {
        this.isManualInput = false;
      }, 1000);
    },

    // å¤„理托盘条码提交
    async handleTraySubmit() {
      // å…ˆç›´æŽ¥æ£€æŸ¥locationType，避免表单验证的异步问题
      if (!this.form.warehouseType) {
        this.error = '请先选择仓库';
        return;
      }
      if (!this.form.locationType) {
        this.error = '请先选择仓库区域';
        //this.$message.warning('请先选择仓库区域');
        return;
      }

      // ç„¶åŽå†è¿›è¡Œå®Œæ•´çš„表单验证
      if (!await this.validateForm()) return;

      const currentTrayBarcode = this.trayBarcode.trim();

      if (!currentTrayBarcode) {
        this.error = '请输入或扫描托盘条码';
        return;
      }

      this.error = '';

      // è®¾ç½®æ‰˜ç›˜æ¡ç åŽï¼Œè‡ªåŠ¨èšç„¦åˆ°ç‰©æ–™è¾“入框
      this.focusBarcodeInput();

      this.$message({
        message: `托盘条码已设置: ${currentTrayBarcode}`,
        type: 'success',
        duration: 2000
      });
    },

    // æ¸…除托盘
    clearTray() {
      this.trayBarcode = '';
      this.materials = [];
      this.focusTrayInput();
      this.$message({
        message: '托盘条码已清除',
        type: 'info',
        duration: 2000
      });
    },

    // æ¸…空托盘输入
    handleTrayClear() {
      this.error = '';
    },

    // æ¸…空输入
    handleClear() {
      this.error = '';
      this.scanCode = '';
      this.isManualInput = false;
      this.isScanning = false;
    },
    

    // å¤„理物料条码提交
    async handleBarcodeSubmit() {
      if (!await this.validateForm()) return;
      const currentBarcode = this.barcode.trim();

      if (!this.trayBarcode) {
        this.error = '请先输入托盘条码';
        this.focusTrayInput();
        return;
      }

      if (!currentBarcode) {
        this.error = '请输入或扫描物料条码';
        return;
      }

      this.focusBarcodeInput();
      this.error = '';
      this.loading = true;

      try {
        // è°ƒç”¨API查询物料信息
        const materialData = await this.fetchMaterialData(currentBarcode);
        if (!materialData || materialData.length === 0) {


          return;
        }
        // æ£€æŸ¥æ˜¯å¦å·²å­˜åœ¨ç›¸åŒç‰©æ–™ç¼–码的记录
        const exists = this.materials.some(item =>
          item.barcode === this.trayBarcode
        );
        console.log('API:', materialData)
        if (exists) {
          this.$message({
            message: '该条码已存在当前托盘的列表中',
            type: 'warning',
            duration: 2000
          });
          
          // è®¾ç½®æ‰˜ç›˜æ¡ç åŽï¼Œè‡ªåŠ¨èšç„¦åˆ°ç‰©æ–™è¾“入框
          this.focusBarcodeInput();
        } else {

          materialData.forEach(item => {

            // å¦‚果不存在，添加新物料
            this.materials.push({
              ...item,
              trayCode: this.trayBarcode,
              locationType: this.form.locationType,
              locationDesc: this.currentLocationDesc,
              scanTime: this.formatTime(new Date())
            });
          });
          
          this.$message({
            message: `托盘条码已设置: ${currentTrayBarcode}`,
            message: `成功添加条码: ${currentBarcode}`,
            type: 'success',
            duration: 2000
          });
        },
        
        // æ¸…除托盘
        clearTray() {
          this.trayBarcode = '';
          this.materials = [];
          this.focusTrayInput();
          this.$message({
            message: '托盘条码已清除',
            type: 'info',
            duration: 2000
          });
        },
        
        // æ¸…空托盘输入
        handleTrayClear() {
          this.error = '';
        },
        
        // æ¸…空输入
        handleClear() {
          this.error = '';
          this.scanCode = '';
          this.isManualInput = false;

          this.fetchStockStatistics();
          // æ¸…空物料输入框并保持聚焦
          this.barcode = '';
          this.scanCode = ''; // æ¸…空扫码缓存
          this.isScanning = false;
        },
        
        // å¤„理物料条码提交
        async handleBarcodeSubmit() {
          const currentBarcode = this.barcode.trim();
          
          if (!this.trayBarcode) {
            this.error = '请先输入托盘条码';
            this.focusTrayInput();
            return;
          }
          
          if (!currentBarcode) {
            this.error = '请输入或扫描物料条码';
            return;
          }

          this.error = '';
          this.loading = true;
          setTimeout(() => {
            this.focusBarcodeInput();
          }, 100);
        }
      } catch (err) {
        this.error = err.message || '查询条码信息失败，请重试';
        this.focusBarcodeInput();
        setTimeout(() => {
      // é€‰ä¸­è¾“入框内的错误内容（确保focus完成后执行）
      const inputEl = this.$refs.barcodeInput?.$el?.querySelector('input');
      if (inputEl) inputEl.select();
    }, 100);
      } finally {
        this.loading = false;
      }
    },

          try { 
            // è°ƒç”¨API查询物料信息
            const materialData = await this.fetchMaterialData(currentBarcode);
                  if (!materialData  || materialData.length === 0) {
        
         
          return;
         }
            // æ£€æŸ¥æ˜¯å¦å·²å­˜åœ¨ç›¸åŒç‰©æ–™ç¼–码的记录
            const exists = this.materials.some(item => 
                 item.barcode === this.trayBarcode
            );
            console.log('API:',materialData)
            if (exists) {
              this.$message({
                message: '该条码已存在当前托盘的列表中',
                type: 'warning',
                duration: 2000
              });
            } else {

                materialData.forEach(item => {
    
          // å¦‚果不存在，添加新物料
          this.materials.push({
            ...item, 
             trayCode: this.trayBarcode,
               scanTime: this.formatTime(new Date())
          });
        });
            
        
 
              
              this.$message({
                message: `成功添加条码: ${currentBarcode}`,
                type: 'success',
                duration: 2000
              });
         
            
            // æ¸…空物料输入框并保持聚焦
            this.barcode = '';
            this.scanCode = ''; // æ¸…空扫码缓存
            this.isScanning = false;
            
            setTimeout(() => {
              this.focusBarcodeInput();
            }, 100);
          }
          } catch (err) {
            this.error = err.message || '查询条码信息失败，请重试';
          } finally {
            this.loading = false;
          }
        },
        
        // API请求 - æ›¿æ¢ä¸ºå®žé™…çš„API调用
      async  fetchMaterialData(barcode) {
         try {
        const response = await http.post('/api/InboundOrder/BarcodeMaterielGroup', 
           {
    // API请求 - æ›¿æ¢ä¸ºå®žé™…çš„API调用
    async fetchMaterialData(barcode) {
      try {
        const response = await http.post('/api/InboundOrder/BarcodeMaterielGroup',
          {
            palletCode: this.trayBarcode,
            orderNo: this.docNo,
            barcodes: barcode
          } 
            barcodes: barcode,
            locationTypeDesc: this.currentLocationDesc,
            locationType: this.form.locationType, // æ·»åŠ ä»“库区域信息
            warehouseType: this.form.warehouseType
          }
        );
        
      


        let materialData;
        

        if (typeof response.data === 'string') {
      

          try {
            materialData = JSON.parse(response.data);
          } catch (e) {
        

          }
        } else {
          // å¦‚果返回的是JSON对象，直接使用
          materialData = response.data;
        }
 if(!response.status){
   this.error = response.message || '查询条码信息失败，请重试';
 }
        // ç¡®ä¿è¿”回的数据包含所有必需的字段
        return  materialData;
        
        if (!response.status) {
          this.error = response.message || '查询条码信息失败，请重试';
        }

        return materialData;

      } catch (error) {
        console.error('API调用失败:', error);
        
 


      }
        },
        
        // å¤„理扫码枪输入
        handleKeyPress(event) {
          // å¦‚果是手动输入模式，不处理扫码枪逻辑
          if (this.isManualInput) {
            return;
    },

    // å¤„理扫码枪输入
    handleKeyPress(event) {
      // å¦‚果是手动输入模式，不处理扫码枪逻辑
      if (this.isManualInput) {
        return;
      }

      const key = event.key;
      const currentTime = new Date().getTime();

      // å¿½ç•¥ç›´æŽ¥æŒ‰ä¸‹çš„回车键（由handleBarcodeSubmit处理）
      if (key === 'Enter') {
        if (this.scanCode.length > 0) {
          // é˜»æ­¢é»˜è®¤å›žè½¦è¡Œä¸ºï¼Œé¿å…è¡¨å•æäº¤
          event.preventDefault();

          // æ‰«ç å®Œæˆï¼Œè‡ªåŠ¨è§¦å‘查询
          this.isScanning = false;

          // æ ¹æ®å½“前扫码目标设置相应的输入框值
          if (this.scanTarget === 'tray') {
            this.trayBarcode = this.scanCode;
            this.handleTraySubmit();
          } else if (this.scanTarget === 'material') {
            this.barcode = this.scanCode;
            this.handleBarcodeSubmit();
          }
          
          const key = event.key;
          const currentTime = new Date().getTime();
          
          // å¿½ç•¥ç›´æŽ¥æŒ‰ä¸‹çš„回车键（由handleBarcodeSubmit处理）
          if (key === 'Enter') {
            if (this.scanCode.length > 0) {
              // é˜»æ­¢é»˜è®¤å›žè½¦è¡Œä¸ºï¼Œé¿å…è¡¨å•æäº¤
              event.preventDefault();
              
              // æ‰«ç å®Œæˆï¼Œè‡ªåŠ¨è§¦å‘查询
              this.isScanning = false;
              
              // æ ¹æ®å½“前扫码目标设置相应的输入框值
              if (this.scanTarget === 'tray') {
                this.trayBarcode = this.scanCode;
                this.handleTraySubmit();
              } else if (this.scanTarget === 'material') {
                this.barcode = this.scanCode;
                this.handleBarcodeSubmit();
              }
            }
            this.scanCode = '';
            this.lastKeyTime = null;
            return;
          }
          
          // æž„建扫码内容（快速连续输入视为扫码）
          if (this.lastKeyTime && currentTime - this.lastKeyTime < 50) {
            this.scanCode += key;
            this.isScanning = true;
          } else {
            this.scanCode = key;
            this.isScanning = true;
          }
          
          // è®¾ç½®è®¡æ—¶å™¨ï¼Œå¦‚果一段时间内没有输入，则重置扫描状态
          if (this.scanTimer) {
            clearTimeout(this.scanTimer);
          }
          this.scanTimer = setTimeout(() => {
            this.isScanning = false;
          }, 100);
          
          this.lastKeyTime = currentTime;
        },
        
        // åˆ é™¤ç‰©æ–™
        removeMaterial(index) {
          this.$confirm('确定要删除这条物料记录吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.materials.splice(index, 1);
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }).catch(() => {
            // å–消删除
          });
        },
        
        // æ¸…空所有物料
        clearAllMaterials() {
          if (this.materials.length === 0) return;
          
          this.$confirm('确定要清空所有物料记录吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.materials = [];
            this.$message({
              type: 'success',
              message: '已清空所有记录!'
            });
          }).catch(() => {
            // å–消清空
          });
        },
        
        // æ ¼å¼åŒ–时间
        formatTime(date) {
          const year = date.getFullYear();
          const month = String(date.getMonth() + 1).padStart(2, '0');
          const day = String(date.getDate()).padStart(2, '0');
          const hours = String(date.getHours()).padStart(2, '0');
          const minutes = String(date.getMinutes()).padStart(2, '0');
          const seconds = String(date.getSeconds()).padStart(2, '0');
          
          return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
        }
        this.scanCode = '';
        this.lastKeyTime = null;
        return;
      }

      // æž„建扫码内容（快速连续输入视为扫码）
      if (this.lastKeyTime && currentTime - this.lastKeyTime < 50) {
        this.scanCode += key;
        this.isScanning = true;
      } else {
        this.scanCode = key;
        this.isScanning = true;
      }

      // è®¾ç½®è®¡æ—¶å™¨ï¼Œå¦‚果一段时间内没有输入，则重置扫描状态
      if (this.scanTimer) {
        clearTimeout(this.scanTimer);
      }
      this.scanTimer = setTimeout(() => {
        this.isScanning = false;
      }, 100);

      this.lastKeyTime = currentTime;
    },

    // åˆ é™¤ç‰©æ–™
    removeMaterial(index) {
      this.$confirm('确定要删除这条物料记录吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.materials.splice(index, 1);
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
        this.fetchStockStatistics();

      }).catch(() => {
        // å–消删除
      });
    },

    // æ¸…空所有物料
    clearAllMaterials() {
      if (this.materials.length === 0) return;

      this.$confirm('确定要清空所有物料记录吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.materials = [];
        this.$message({
          type: 'success',
          message: '已清空所有记录!'
        });
      }).catch(() => {
        // å–消清空
      });
    },

    // æ ¼å¼åŒ–时间
    formatTime(date) {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      const seconds = String(date.getSeconds()).padStart(2, '0');

      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    }
  }
}
</script>

<style scoped>
    .barcode-scanner-container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
    }
    .page-title {
      text-align: center;
      margin-bottom: 30px;
    }
    .input-section {
      margin-bottom: 30px;
    }
    .scan-status {
      float: right;
      font-size: 12px;
      color: #67C23A;
    }
    .scan-indicator {
      display: inline-block;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: #67C23A;
      margin-right: 5px;
      animation: pulse 1.5s infinite;
    }
    @keyframes pulse {
      0% { opacity: 1; }
      50% { opacity: 0.4; }
      100% { opacity: 1; }
    }
    .input-wrapper {
      position: relative;
      margin-bottom: 15px;
    }
    .input-tips {
      margin-top: 10px;
      font-size: 12px;
      color: #909399;
    }
    .loading {
      text-align: center;
      margin: 20px 0;
    }
    .loading p {
      margin-top: 10px;
      color: #409EFF;
    }
    .error-message {
      margin-bottom: 20px;
    }
    .material-list {
      margin-top: 30px;
    }
    .list-actions {
      float: right;
    }
    .clear-all-btn {
      margin-left: 10px;
    }
    .empty-state {
      text-align: center;
      padding: 40px 0;
      color: #909399;
    }
    .empty-state i {
      font-size: 48px;
      margin-bottom: 10px;
    }
    .material-code {
      font-family: 'Courier New', monospace;
      font-weight: bold;
      color: #409EFF;
    }
    .tray-info {
      background: #f0f9ff;
      padding: 10px 15px;
      border-radius: 4px;
      margin-bottom: 15px;
      border-left: 4px solid #409EFF;
    }
    .debug-info {
      background: #f5f7fa;
      padding: 10px;
      border-radius: 4px;
      margin-top: 10px;
      font-size: 12px;
      color: #909399;
    }
    .small-button {
      padding: 7px 9px;
      font-size: 12px;
    }
.barcode-scanner-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 8px;
}

/* ç´§å‡‘布局样式 */
.compact {
  margin-bottom: 0;
}

.compact-form {
  margin-bottom: 0;
}

.compact-item {
  margin-bottom: 0;
}

.compact-card {
  margin-bottom: 0;
}

.compact-card>>>.el-card__body {
  padding: 12px;
}

.compact-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 !important;
}

.compact-header>>>.el-card__header {
  padding: 8px 12px;
}

.compact-input {
  margin: 8px 0;
}

.compact-tips {
  margin-top: 8px;
  font-size: 11px;
}

/* ä»“库区域选择 - ç´§å‡‘ */
.location-section.compact {
  margin-bottom: 8px;
}

.location-section.compact>>>.el-form-item {
  margin-bottom: 0;
}

/* æ‰˜ç›˜ä¿¡æ¯ - ç´§å‡‘ */
.tray-info.compact {
  padding: 6px 10px;
  margin-bottom: 8px;
  font-size: 13px;
}

/* æ‰«ç åŒºåŸŸ - ç´§å‡‘ */
.input-section.compact {
  margin-bottom: 8px;
  flex-shrink: 0;
}

/* ç‰©æ–™åˆ—表 - å›ºå®šé«˜åº¦å¸¦æ»šåŠ¨ */
.material-list.compact {
  flex: 1;
  min-height: 0;
  /* é‡è¦ï¼šå…è®¸flex子项收缩 */
  display: flex;
  flex-direction: column;
}

.material-list.compact>>>.el-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.material-list.compact>>>.el-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0;
  min-height: 0;
}

.table-container {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.material-list.compact>>>.el-table {
  flex: 1;
}

.material-list.compact>>>.el-table__body-wrapper {
  overflow-y: auto;
}

/* ç´§å‡‘的空状态 */
.empty-state.compact {
  padding: 20px 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.empty-state.compact i {
  font-size: 36px;
  margin-bottom: 8px;
}

.empty-state.compact p {
  font-size: 13px;
}

/* å…¶ä»–原有样式调整 */
.page-title {
  text-align: center;
  margin-bottom: 15px;
}

.scan-status {
  font-size: 12px;
  color: #67C23A;
}

.scan-indicator {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #67C23A;
  margin-right: 5px;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.4;
  }

  100% {
    opacity: 1;
  }
}

.input-wrapper {
  position: relative;
}

.input-tips {
  margin-top: 6px;
  color: #909399;
}

.warning-text {
  color: #E6A23C;
  font-weight: bold;
}

.loading.compact {
  text-align: center;
  margin: 10px 0;
  padding: 5px;
}

.loading.compact p {
  margin-top: 5px;
  color: #409EFF;
  font-size: 12px;
}

.error-message.compact {
  margin: 5px 0;
}

.error-message.compact>>>.el-alert {
  padding: 6px 12px;
}

.list-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.list-actions>>>.el-tag {
  height: 24px;
  line-height: 22px;
  padding: 0 6px;
}

.clear-all-btn {
  margin-left: 8px;
}

.material-code {
  font-family: 'Courier New', monospace;
  font-weight: bold;
  color: #409EFF;
}

.location-info {
  color: #606266;
  font-weight: normal;
}

.debug-info {
  background: #f5f7fa;
  padding: 8px;
  border-radius: 4px;
  margin-top: 8px;
  font-size: 11px;
  color: #909399;
}

.small-button {
  padding: 6px 8px;
  font-size: 11px;
}

/* è¾“入框组样式调整 */
.custom-input-group {
  display: flex;
  align-items: center;
  width: 100%;
  margin: 20px 0;
  margin: 8px 0;
  border: 1px solid #DCDFE6;
  border-radius: 4px;
  overflow: hidden;
@@ -784,15 +1224,17 @@
}

.input-label {
  padding: 0 15px;
  padding: 0 12px;
  background: #F5F7FA;
  border-right: 1px solid #DCDFE6;
  color: #606266;
  font-size: 14px;
  font-size: 13px;
  white-space: nowrap;
  height: 40px;
  line-height: 40px;
  height: 36px;
  line-height: 36px;
  flex-shrink: 0;
  min-width: 70px;
  text-align: center;
}

.input-container {
@@ -805,12 +1247,36 @@
  flex: 1;
}

.custom-input ::v-deep .el-input__inner {
.custom-input>>>.el-input__inner {
  border: none;
  border-radius: 0;
  height: 40px;
  line-height: 40px;
  height: 36px;
  line-height: 36px;
  font-size: 13px;
}

 
/* å“åº”式调整 */
@media (max-width: 768px) {
  .barcode-scanner-container {
    padding: 5px;
  }

  .custom-input-group {
    flex-direction: column;
    border: none;
  }

  .input-label {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #DCDFE6;
    margin-bottom: 5px;
  }

  .input-container {
    width: 100%;
    border: 1px solid #DCDFE6;
    border-radius: 4px;
  }
}
</style>