From acc7ecd25a9df37f13379556e3965549a472d9f7 Mon Sep 17 00:00:00 2001
From: fengyuan_yang <1976974459@qq.com>
Date: Wed, 15 Apr 2026 11:20:32 +0800
Subject: [PATCH] =?UTF-8?q?2026-04-15=20=E5=90=AF=E7=94=A8=E7=94=B3?=
 =?UTF-8?q?=E8=AF=B7=E5=8D=95=E9=80=80=E4=BB=93=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/production/production-return2.js      |    4 +
 src/router/index.js                           |    8 +
 .../modules/production/production-return.vue  |    2 +-
 .../productionApplicationReturnList.vue       |  412 +++++
 .../productionApplicationReturnStorage.vue    | 1454 +++++++++++++++++
 5 files changed, 1879 insertions(+), 1 deletion(-)
 create mode 100644 src/views/modules/production/productionApplicationReturnList.vue
 create mode 100644 src/views/modules/production/productionApplicationReturnStorage.vue

diff --git a/src/api/production/production-return2.js b/src/api/production/production-return2.js
index 227bfde..4397b6d 100644
--- a/src/api/production/production-return2.js
+++ b/src/api/production/production-return2.js
@@ -1,6 +1,10 @@
 
 import { createAPI } from "@/utils/httpRequest.js";
 
+export const getApplicationReturnList = data => createAPI(`productionReturn/getApplicationReturnList`, 'post', data)
+
+export const getApplicationReturnDetails = data => createAPI(`productionReturn/getApplicationReturnDetails`, 'post', data)
+
 export const getQualifiedReturnList = data => createAPI(`productionReturn/getQualifiedReturnList`, 'post', data)
 
 export const getReturnDetails = data => createAPI(`productionReturn/getReturnDetails`, 'post', data)
diff --git a/src/router/index.js b/src/router/index.js
index f88fc43..db08384 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -75,6 +75,14 @@ const globalRoutes = [
     path: "/productionReturnStorage/:buNo/:inboundNo", name: "productionReturnStorage",
     component: resolve => require(["@/views/modules/production/productionReturnStorage.vue"], resolve), meta: { transition: 'instant', preload: true, keepAlive: true }
   },
+  {
+    path: "/productionApplicationReturnList", name: "productionApplicationReturnList",
+    component: resolve => require(["@/views/modules/production/productionApplicationReturnList.vue"], resolve), meta: { transition: 'instant', preload: true, keepAlive: true }
+  },
+  {
+    path: "/productionApplicationReturnStorage/:searchCode", name: "productionApplicationReturnStorage",
+    component: resolve => require(["@/views/modules/production/productionApplicationReturnStorage.vue"], resolve), meta: { transition: 'instant', preload: true, keepAlive: true }
+  },
 
   // 生产领退料
   {
diff --git a/src/views/modules/production/production-return.vue b/src/views/modules/production/production-return.vue
index 855ae9e..153afef 100644
--- a/src/views/modules/production/production-return.vue
+++ b/src/views/modules/production/production-return.vue
@@ -33,7 +33,7 @@ export default {
   data() {
     return {
       buttons: [
-        { icon: 'scan', label: '申请单退仓', iconClass: 'purchase', to: 'productionQualifiedReturn', disabled: true },
+        { icon: 'scan', label: '申请单退仓', iconClass: 'purchase', to: 'productionApplicationReturnList', disabled: false },
         { icon: 'records', label: '直接退仓', iconClass: 'qualified', to: 'productionQualifiedReturn', disabled: false },
       ]
     }
diff --git a/src/views/modules/production/productionApplicationReturnList.vue b/src/views/modules/production/productionApplicationReturnList.vue
new file mode 100644
index 0000000..b986d2c
--- /dev/null
+++ b/src/views/modules/production/productionApplicationReturnList.vue
@@ -0,0 +1,412 @@
+<template>
+  <div class="pda-container">
+    <!-- 头部栏 -->
+    <div class="header-bar">
+      <div class="header-left" @click="$router.back()">
+        <i class="el-icon-arrow-left"></i>
+        <span>退库扫描</span>
+      </div>
+      <div class="header-right" @click="$router.push({ path: '/' })">
+        首页
+      </div>
+    </div>
+
+    <!-- 搜索框 -->
+    <div class="search-container">
+      <el-input  clearable
+                 v-model="searchCode"
+                 placeholder="请扫描变动单号或标签条码"
+                 prefix-icon="el-icon-search"
+                 @keyup.enter.native="handleSearch"
+                 ref="searchInput"
+      />
+    </div>
+
+    <!-- 物料列表 -->
+    <div class="content-area">
+      <div
+        v-for="(item, index) in qualifiedList"
+        :key="index"
+        class="inbound-card"
+        @click="goToInboundPage(item)"
+      >
+        <div class="card-title">
+          <span class="title-label">变动单号</span>
+          <span class="title-value" style="margin-left: 20px; font-size: 16px; font-weight: bold; color: #333;">{{ item.transactionId }}</span>
+        </div>
+
+        <div class="card-info-row" style="display: flex; justify-content: space-between; border-top: 1px solid #f0f0f0; padding-top: 8px;">
+          <div class="info-item" style="display: flex; flex-direction: column; align-items: center;">
+            <span class="info-label" style="margin-bottom: 4px;">标签张数</span>
+            <span class="info-value highlight" style="color: #17B3A3; font-weight: bold;">{{ item.labelCount }}</span>
+          </div>
+          <div class="info-item" style="display: flex; flex-direction: column; align-items: center;">
+            <span class="info-label" style="margin-bottom: 4px;">物料总数</span>
+            <span class="info-value highlight" style="color: #17B3A3; font-weight: bold;">{{ item.totalQty }}</span>
+          </div>
+          <div class="info-item" style="display: flex; flex-direction: column; align-items: center;">
+            <span class="info-label" style="margin-bottom: 4px;">操作员</span>
+            <span class="info-value">{{ item.transactionBy }}</span>
+          </div>
+          <div class="info-item" style="display: flex; flex-direction: column; align-items: center;">
+            <span class="info-label" style="margin-bottom: 4px;">变动日期</span>
+            <span class="info-value" style="font-weight: bold;">{{ formatDate(item.transactionDate) }}</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- 空状态 -->
+      <div v-if="qualifiedList.length === 0 && !loading" class="empty-state">
+        <i class="el-icon-box"></i>
+        <p>暂无退仓数据</p>
+      </div>
+
+      <!-- 加载状态 -->
+      <div v-if="loading" class="loading-state">
+        <i class="el-icon-loading"></i>
+        <p>加载中...</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getApplicationReturnList } from "@/api/production/production-return2.js";
+import { getCurrentWarehouse } from '@/utils'
+import moment from 'moment';
+
+export default {
+  data() {
+    return {
+      searchCode: '',
+      qualifiedList: [],
+      loading: false
+    };
+  },
+  methods: {
+    formatDate(date) {
+      return date ? moment(date).format('YYYY-MM-DD') : '';
+    },
+
+    // 处理搜索
+    handleSearch() {
+      if (this.searchCode.trim()) {
+        this.searchQualifiedList(this.searchCode.trim());
+      } else {
+        this.loadQualifiedList();
+      }
+    },
+
+    // 加载待退仓列表
+    loadQualifiedList() {
+      this.loading = true;
+      const params = {
+        site:localStorage.getItem('site'),
+      };
+
+      getApplicationReturnList(params).then(({ data }) => {
+        this.loading = false;
+        if (data && data.code === 0) {
+          this.qualifiedList = data.data || [];
+        } else {
+          this.$message.error(data.msg || '获取数据失败');
+        }
+      }).catch(error => {
+        this.loading = false;
+        console.error('获取列表失败:', error);
+        this.$message.error('获取数据失败');
+      });
+    },
+
+    // 搜索特定记录
+    searchQualifiedList(searchCode) {
+      this.loading = true;
+      const params = {
+        searchCode: searchCode,
+        site:localStorage.getItem('site'),
+      };
+
+      getApplicationReturnList(params).then(({ data }) => {
+        this.loading = false;
+        if (data && data.code === 0) {
+          if (data.data.length === 0) {
+            this.$message.warning('未找到匹配的记录');
+          }
+          this.qualifiedList = data.data || [];
+        } else {
+          this.$message.error(data.msg || '查询失败');
+        }
+      }).catch(error => {
+        this.loading = false;
+        console.error('搜索失败:', error);
+        this.$message.error('查询失败');
+      });
+    },
+
+    // 跳转到明细页面
+    goToInboundPage(item) {
+      this.$router.push({
+        name: 'productionApplicationReturnStorage',
+        params: {
+          searchCode: item.transactionId
+        }
+      });
+    }
+  },
+
+  mounted() {
+    // 聚焦搜索框
+    this.$nextTick(() => {
+      if (this.$refs.searchInput) {
+        this.$refs.searchInput.focus();
+      }
+    });
+    // 加载数据
+    this.loadQualifiedList();
+  }
+};
+</script>
+
+<style scoped>
+.pda-container {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background: #f5f5f5;
+}
+
+/* 头部栏 */
+.header-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 16px;
+  background: #17B3A3;
+  color: white;
+  height: 40px;
+  min-height: 40px;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  font-size: 16px;
+  font-weight: 500;
+}
+
+.header-left i {
+  margin-right: 8px;
+  font-size: 18px;
+}
+
+.header-right {
+  cursor: pointer;
+  font-size: 16px;
+  font-weight: 500;
+}
+
+/* 搜索容器 */
+.search-container {
+  padding: 12px 16px;
+  background: white;
+}
+
+.search-box {
+  position: relative;
+  display: flex;
+  align-items: center;
+  background: #f8f9fa;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  padding: 0 12px;
+}
+
+.search-icon {
+  color: #999;
+  font-size: 16px;
+  margin-right: 8px;
+}
+
+.search-box input {
+  flex: 1;
+  border: none;
+  background: transparent;
+  padding: 12px 0;
+  font-size: 14px;
+  outline: none;
+}
+
+.search-box input::placeholder {
+  color: #999;
+}
+
+/* 内容区域 */
+.content-area {
+  flex: 1;
+  overflow-y: auto;
+  padding: 12px 16px;
+}
+
+/* 入库卡片 */
+.inbound-card {
+  background: white;
+  border-radius: 8px;
+  margin-bottom: 12px;
+  padding: 16px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.inbound-card:hover {
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+  transform: translateY(-1px);
+}
+
+.inbound-card:active {
+  transform: translateY(0);
+}
+
+/* 卡片标题 */
+.card-title {
+  margin-bottom: 0px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.title-label {
+  font-size: 12px;
+  color: #666;
+  display: block;
+  margin-bottom: 4px;
+}
+
+.title-value {
+  font-size: 16px;
+  font-weight: bold;
+  color: #333;
+  margin-left: 20px;
+}
+
+/* 卡片信息行 */
+.card-info-row {
+  margin-bottom: 8px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.card-info-row:last-child {
+  margin-bottom: 0;
+}
+
+.info-item {
+  display: flex;
+  align-items: baseline;
+  flex: 0 0 auto;
+  max-width: 100%;
+}
+
+.info-item.full-width {
+  flex: 1 1 100%;
+}
+
+.info-label {
+  font-size: 12px;
+  color: #666;
+  white-space: nowrap;
+  margin-right: 4px;
+}
+
+.info-value {
+  font-size: 13px;
+  color: #333;
+  font-weight: 500;
+  word-break: break-all;
+  line-height: 1.4;
+}
+
+.info-value.highlight {
+  color: #17B3A3;
+  font-weight: bold;
+  font-size: 14px;
+}
+
+/* 空状态 */
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 60px 20px;
+  color: #999;
+}
+
+.empty-state i {
+  font-size: 48px;
+  margin-bottom: 16px;
+}
+
+.empty-state p {
+  font-size: 14px;
+  margin: 0;
+}
+
+/* 加载状态 */
+.loading-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 60px 20px;
+  color: #17B3A3;
+}
+
+.loading-state i {
+  font-size: 24px;
+  margin-bottom: 12px;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+.loading-state p {
+  font-size: 14px;
+  margin: 0;
+}
+
+/* 响应式设计 */
+@media (max-width: 360px) {
+  .header-bar {
+    padding: 8px 12px;
+  }
+
+  .search-container {
+    padding: 8px 12px;
+  }
+
+  .content-area {
+    padding: 8px 12px;
+  }
+
+  .inbound-card {
+    padding: 12px;
+  }
+
+  .card-details {
+    flex-wrap: wrap;
+    gap: 6px;
+  }
+
+  .detail-item {
+    flex: 0 0 48%;
+    margin-bottom: 6px;
+    min-width: 50px;
+  }
+}
+</style>
diff --git a/src/views/modules/production/productionApplicationReturnStorage.vue b/src/views/modules/production/productionApplicationReturnStorage.vue
new file mode 100644
index 0000000..e84d87f
--- /dev/null
+++ b/src/views/modules/production/productionApplicationReturnStorage.vue
@@ -0,0 +1,1454 @@
+<template>
+  <div class="pda-container">
+    <!-- 头部栏 -->
+    <div class="header-bar">
+      <div class="header-left" @click="$router.back()">
+        <i class="el-icon-arrow-left"></i>
+        <span>退库扫描</span>
+      </div>
+      <div class="header-right" @click="$router.push({ path: '/' })">
+        首页
+      </div>
+    </div>
+
+    <!-- 搜索框 -->
+    <div class="search-container">
+      <el-input clearable class="compact-input"
+        v-model="scanCode"
+        placeholder="请扫描标签条码"
+        prefix-icon="el-icon-search"
+        @keyup.enter.native="handleScan"
+        ref="scanInput"
+      />
+      <div class="mode-switch">
+
+        <el-switch
+          class="custom-switch"
+          v-model="isRemoveMode"
+          active-color="#ff4949"
+          inactive-color="#13ce66">
+        </el-switch>
+        <span v-if="isRemoveMode" class="switch-text">{{ '移除' }}</span>
+        <span v-else class="switch-text2">{{ '添加' }}</span>
+      </div>
+    </div>
+
+    <!-- 物料信息卡片 -->
+    <div class="material-info-card" v-if="materialInfo.transactionId">
+      <div class="card-title">
+        <span class="title-label">变动单号</span>
+        <span class="title-value" style="margin-left: 20px; font-size: 16px; font-weight: bold; color: #333;">{{ materialInfo.transactionId }}</span>
+      </div>
+
+      <div class="card-info-row" style="display: flex; justify-content: space-between; border-top: 1px solid #f0f0f0; padding-top: 8px;">
+        <div class="info-item" style="display: flex; flex-direction: column; align-items: center;">
+          <span class="info-label" style="margin-bottom: 4px;">标签张数</span>
+          <span class="info-value highlight" style="color: #17B3A3; font-weight: bold;">{{ materialInfo.labelCount }}</span>
+        </div>
+        <div class="info-item" style="display: flex; flex-direction: column; align-items: center;">
+          <span class="info-label" style="margin-bottom: 4px;">物料总数</span>
+          <span class="info-value highlight" style="color: #17B3A3; font-weight: bold;">{{ materialInfo.totalQty }}</span>
+        </div>
+        <div class="info-item" style="display: flex; flex-direction: column; align-items: center;">
+          <span class="info-label" style="margin-bottom: 4px;">操作员</span>
+          <span class="info-value">{{ materialInfo.transactionBy }}</span>
+        </div>
+        <div class="info-item" style="display: flex; flex-direction: column; align-items: center;">
+          <span class="info-label" style="margin-bottom: 4px;">变动日期</span>
+          <span class="info-value" style="font-weight: bold;">{{ formatDate(materialInfo.transactionDate) }}</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- 入库信息确认标题 -->
+    <div class="section-title">
+      <div class="title-left">
+        <i class="el-icon-circle-check"></i>
+        <span>退料信息确认</span>
+      </div>
+<!--      <div class="title-right">-->
+<!--        <span class="material-list-link" @click="showMaterialListDialog">物料清单</span>-->
+<!--      </div>-->
+    </div>
+
+    <!-- 标签列表 -->
+    <div class="label-list">
+      <div class="list-header">
+        <div class="col-no">NO.</div>
+        <div class="col-label">标签条码</div>
+        <div class="col-part">物料编码</div>
+        <div class="col-qty">标签数量</div>
+      </div>
+
+      <div class="list-body">
+        <div
+          v-for="(label, index) in labelList"
+          :key="label.id"
+          class="list-item"
+        >
+          <div class="col-no">{{ labelList.length - index }}</div>
+          <div class="col-label">{{ label.labelCode }}</div>
+          <div class="col-part">{{ label.partNo }}</div>
+          <div class="col-qty">{{ label.quantity }}</div>
+        </div>
+
+        <!-- 空状态 -->
+        <div v-if="labelList.length === 0" class="empty-labels">
+          <p>暂无扫描标签</p>
+        </div>
+      </div>
+    </div>
+
+    <!-- 底部操作按钮 -->
+    <div class="bottom-actions">
+      <button class="action-btn secondary" @click="confirmInbound">
+        确定
+      </button>
+      <button class="action-btn secondary" style="margin-left: 10px;" @click="printLabels">
+        打印
+      </button>
+      <button class="action-btn secondary" style="margin-left: 10px;" @click="cancelInbound">
+        取消
+      </button>
+    </div>
+
+    <!-- 库位号输入覆盖层 -->
+    <div v-if="showLocationDialog" class="location-overlay">
+      <div class="location-modal">
+        <div class="modal-header">
+          <span class="modal-title">扫描库位号</span>
+        </div>
+
+        <div class="modal-body">
+          <div class="location-input-section">
+            <div class="input-wrapper">
+              <i class="el-icon-location-outline input-icon"></i>
+              <input
+                v-model="locationCode"
+                placeholder="请扫描库位号"
+                @keyup.enter="submitInbound"
+                ref="locationInput"
+                class="location-input"
+              />
+            </div>
+          </div>
+        </div>
+
+        <div class="modal-footer">
+          <button class="btn-cancel" @click="cancelLocationInput">取消</button>
+          <button class="btn-confirm" @click="submitInbound" :disabled="!locationCode.trim()">
+            确认上架
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 物料清单弹窗 -->
+    <div v-if="showMaterialDialog" class="material-overlay">
+      <div class="material-modal">
+        <div class="modal-header">
+          <span class="modal-title">物料清单</span>
+          <i class="el-icon-close close-btn" @click="closeMaterialDialog"></i>
+        </div>
+
+        <div class="modal-body">
+          <!-- 加载状态 -->
+          <div v-if="materialListLoading" class="loading-container">
+            <i class="el-icon-loading"></i>
+            <span>加载中...</span>
+          </div>
+
+          <!-- 物料表格 -->
+          <div v-else-if="materialList.length > 0" class="material-table">
+            <div class="table-header">
+              <div class="col-no">NO.</div>
+<!--              <div class="col-label-code">标签条码</div>-->
+              <div class="col-material-code">物料编码</div>
+              <div class="col-part-name">物料名称</div>
+              <div class="col-required-qty">需求数量</div>
+              <div class="col-inbound-qty">已入库数</div>
+              <div class="col-scans-qty">扫描数量</div>
+            </div>
+
+            <div class="table-body">
+              <div
+                v-for="(item, index) in materialList"
+                :key="index"
+                class="table-row"
+              >
+                <div class="col-no">{{ index + 1 }}</div>
+<!--                <div class="col-label-code">{{ item.labelCode || item.rollNo }}</div>-->
+                <div class="col-material-code">{{ item.materialCode || item.partNo }}</div>
+                <div class="col-part-name">
+                  <span class="part-name-text" @click.stop="showPartNameTip(item.materialName, $event)">{{ item.materialName || '-' }}</span>
+                </div>
+                <div class="col-required-qty">{{ item.requiredQty || 0 }}</div>
+                <div class="col-inbound-qty">{{ item.pickedQty || 0 }}</div>
+                <div class="col-scans-qty">{{ item.scansQty || 0 }}</div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 空数据状态 -->
+          <div v-else class="empty-material">
+            <i class="el-icon-document"></i>
+            <p>暂无物料数据</p>
+          </div>
+        </div>
+
+        <div class="modal-footer">
+          <button class="btn-close" @click="closeMaterialDialog">关闭</button>
+        </div>
+      </div>
+
+      <!-- 物料名称提示框 -->
+      <div v-if="showPartNameTooltip" class="part-name-tooltip" :style="tooltipStyle" @click.stop>
+        <div class="tooltip-content">{{ currentPartName }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  getApplicationReturnDetails,
+  validateLabelWithReturn,
+  confirmReturnStorage,
+  getMaterialList,
+  getScannedLabelList
+} from "@/api/production/production-return2.js";
+import { getCurrentWarehouse } from '@/utils'
+import moment from 'moment';
+export default {
+  data() {
+    return {
+      scanCode: '',
+      materialInfo: {},
+      labelList: [],
+      searchCode: '',
+      showLocationDialog: false,
+      locationCode: '',
+      showMaterialDialog: false,
+      materialList: [],
+      materialListLoading: false,
+      isRemoveMode: false, // 默认为添加模式
+      // 物料名称提示框相关
+      showPartNameTooltip: false,
+      currentPartName: '',
+      tooltipStyle: { top: '0px', left: '0px' }
+    };
+  },
+  methods: {
+    formatDate(date) {
+      return date ? moment(date).format('YYYY-MM-DD') : '';
+    },
+    // 处理扫描
+    handleScan() {
+      if (!this.scanCode.trim()) {
+        return;
+      }
+      if (this.isRemoveMode) {
+        this.removeLabelByCode(this.scanCode.trim());
+      } else {
+        this.validateAndAddLabel(this.scanCode.trim());
+      }
+      this.scanCode = '';
+    },
+
+    // 验证标签并添加到列表（通过存储过程）
+    validateAndAddLabel(labelCode) {
+      const params = {
+        labelCode: labelCode,
+        inboundNo: this.materialInfo.transactionId,
+        site: this.materialInfo.site,
+        buNo: this.materialInfo.buNo,
+        operationType: 'I', // I表示添加
+        warehouseId: getCurrentWarehouse(), // 当前仓库
+        actionType: '申请单退仓'
+      };
+      validateLabelWithReturn(params).then(({ data }) => {
+        if (data && data.code === 0) {
+          this.$message.success('操作成功');
+          // 重新加载已扫描标签列表
+          this.loadScannedLabelList();
+        } else {
+          this.$message.error(data.msg || '操作失败');
+        }
+      }).catch(error => {
+        console.error('标签验证失败:', error);
+        this.$message.error('操作失败');
+      });
+    },
+
+    // 通过条码移除标签（通过存储过程）
+    removeLabelByCode(labelCode) {
+      const params = {
+        labelCode: labelCode,
+        inboundNo: this.materialInfo.transactionId,
+        site: this.materialInfo.site,
+        buNo: this.materialInfo.buNo,
+        operationType: 'D', // D表示移除
+        warehouseId: getCurrentWarehouse(), // 当前仓库
+        actionType: '申请单退仓'
+      };
+      validateLabelWithReturn(params).then(({ data }) => {
+        if (data && data.code === 0) {
+          this.$message.success('操作成功');
+          // 重新加载已扫描标签列表
+          this.loadScannedLabelList();
+        } else {
+          this.$message.error(data.msg || '操作失败');
+        }
+      }).catch(error => {
+        console.error('标签移除失败:', error);
+        this.$message.error('操作失败');
+      });
+    },
+
+    // 确认入库
+    confirmInbound() {
+      if (this.labelList.length === 0) {
+        this.$message.warning('请先扫描标签');
+        return;
+      }
+
+      // 显示库位号输入对话框
+      this.showLocationDialog = true;
+      this.locationCode = '';
+
+      // 聚焦到库位号输入框
+      this.$nextTick(() => {
+        if (this.$refs.locationInput) {
+          this.$refs.locationInput.focus();
+        }
+      });
+    },
+
+
+    // 取消库位号输入
+    cancelLocationInput() {
+      this.showLocationDialog = false;
+      this.locationCode = '';
+    },
+
+    // 提交入库（通过存储过程）
+    submitInbound() {
+      if (!this.locationCode.trim()) {
+        this.$message.warning('请输入库位号');
+        return;
+      }
+      const params = {
+        site: this.materialInfo.site,
+        buNo: this.materialInfo.buNo,
+        inboundNo: this.materialInfo.transactionId,
+        locationCode: this.locationCode.trim()
+      };
+      confirmReturnStorage(params).then(({ data }) => {
+        if (data && data.code === 0) {
+          this.$message.success('操作成功');
+          this.showLocationDialog = false;
+          this.$router.back();
+        } else {
+          this.$message.error(data.msg || '操作失败');
+        }
+      }).catch(error => {
+        console.error('上架失败:', error);
+        this.$message.error('操作失败');
+      });
+    },
+
+    // 打印标签
+    printLabels() {
+      if (this.labelList.length === 0) {
+        this.$message.warning('暂无标签可打印');
+        return;
+      }
+
+      this.$message.warning('打印功能开发中...');
+    },
+
+    // 取消入库
+    cancelInbound() {
+      if (this.labelList.length > 0) {
+        this.$confirm('取消后将清空已扫描的标签，确定取消吗？', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '继续操作',
+          type: 'warning'
+        }).then(() => {
+          this.$router.back();
+        }).catch(() => {
+          // 用户选择继续操作
+        });
+      } else {
+        this.$router.back();
+      }
+    },
+
+    // 显示物料清单弹窗
+    showMaterialListDialog() {
+      this.showMaterialDialog = true;
+      this.loadMaterialList();
+    },
+
+    // 加载物料清单
+    loadMaterialList() {
+      if (!this.materialInfo.site || !this.materialInfo.buNo || !this.materialInfo.transactionId) {
+        this.$message.error('缺少必要参数，无法获取物料清单');
+        return;
+      }
+
+      this.materialListLoading = true;
+      const params = {
+        site: this.materialInfo.site,
+        buNo: this.materialInfo.buNo,
+        inboundNo: this.materialInfo.transactionId,
+        warehouseId: getCurrentWarehouse() // 当前仓库
+      };
+
+      getMaterialList(params).then(({ data }) => {
+        this.materialListLoading = false;
+        if (data && data.code === 0) {
+          this.materialList = data.data || [];
+        } else {
+          this.$message.error(data.msg || '获取物料清单失败');
+          this.materialList = [];
+        }
+      }).catch(error => {
+        this.materialListLoading = false;
+        console.error('获取物料清单失败:', error);
+        this.$message.error('获取物料清单失败');
+        this.materialList = [];
+      });
+    },
+
+    // 关闭物料清单弹窗
+    closeMaterialDialog() {
+      this.showMaterialDialog = false;
+      this.hidePartNameTip();
+    },
+
+    // 显示物料名称提示框
+    showPartNameTip(partName, event) {
+      if (!partName || partName === '-') return;
+      const rect = event.target.getBoundingClientRect();
+      this.tooltipStyle = { top: (rect.top - 5) + 'px', left: rect.left + 'px' };
+      this.currentPartName = partName;
+      this.showPartNameTooltip = true;
+      setTimeout(() => { document.addEventListener('click', this.hidePartNameTip); }, 0);
+    },
+
+    // 隐藏物料名称提示框
+    hidePartNameTip() {
+      this.showPartNameTooltip = false;
+      this.currentPartName = '';
+      document.removeEventListener('click', this.hidePartNameTip);
+    },
+
+    // 加载入库单详情
+    loadInboundDetails() {
+      const params = {
+        searchCode: this.searchCode,
+        site: localStorage.getItem('site'),
+      };
+      getApplicationReturnDetails(params).then(({ data }) => {
+        if (data && data.code === 0) {
+          this.materialInfo = data.data;
+          // 加载入库单详情成功后，加载已扫描标签列表
+          this.loadScannedLabelList();
+        } else {
+          this.$message.error(data.msg || '获取详情失败');
+        }
+      }).catch(error => {
+        console.error('获取详情失败:', error);
+        this.$message.error('获取详情失败');
+      });
+    },
+
+    // 加载已扫描标签列表（从缓存表）
+    loadScannedLabelList() {
+      if (!this.materialInfo.site || !this.materialInfo.buNo || !this.materialInfo.transactionId) {
+        return;
+      }
+
+      const params = {
+        site: this.materialInfo.site,
+        buNo: this.materialInfo.buNo,
+        inboundNo: this.materialInfo.transactionId
+      };
+
+      getScannedLabelList(params).then(({ data }) => {
+        if (data && data.code === 0) {
+          // 将查询结果转换为labelList格式
+          this.labelList = (data.data || []).map((item, index) => ({
+            id: Date.now() + index,
+            labelCode: item.labelCode,
+            partNo: item.partNo,
+            quantity: item.quantity,
+            buNo: item.buNo
+          }));
+        } else {
+          console.error('获取已扫描标签列表失败:', data.msg);
+        }
+      }).catch(error => {
+        console.error('获取已扫描标签列表失败:', error);
+      });
+    }
+  },
+
+  mounted() {
+    // 获取路由参数
+    this.searchCode = this.$route.params.searchCode;
+    if (!this.searchCode) {
+      this.$message.error('参数错误');
+      this.$router.back();
+      return;
+    }
+
+    // 聚焦扫描框
+    this.$nextTick(() => {
+      if (this.$refs.scanInput) {
+        this.$refs.scanInput.focus();
+      }
+    });
+
+    // 加载入库单详情
+    this.loadInboundDetails();
+  }
+};
+</script>
+
+<style scoped>
+.pda-container {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background: #f5f5f5;
+}
+
+/* 头部栏 */
+.header-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 16px;
+  background: #17B3A3;
+  color: white;
+  height: 40px;
+  min-height: 40px;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  font-size: 16px;
+  font-weight: 500;
+}
+
+.header-left i {
+  margin-right: 8px;
+  font-size: 18px;
+}
+
+.header-right {
+  cursor: pointer;
+  font-size: 16px;
+  font-weight: 500;
+}
+
+/* 搜索容器 */
+.search-container {
+  padding: 12px 16px;
+  background: white;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.search-container .el-input {
+  width: 240px;
+  margin-right: 12px;
+}
+
+/* 紧凑型输入框样式 */
+.compact-input ::v-deep .el-input__inner {
+  height: 36px;
+  padding: 0 12px 0 35px;
+  font-size: 14px;
+}
+
+.compact-input ::v-deep .el-input__prefix {
+  left: 10px;
+}
+
+.compact-input ::v-deep .el-input__suffix {
+  right: 30px;
+}
+
+/* 模式切换开关 */
+.mode-switch {
+  position: relative;
+  display: inline-block;
+}
+
+.custom-switch {
+  transform: scale(1.3);
+}
+/* 中间文字 */
+.switch-text {
+  position: absolute;
+  left: 25%;
+  transform: translateX(-50%);
+  top: 50%;
+  transform: translateY(-50%) translateX(-50%);
+  font-size: 12px;
+  font-weight: 500;
+  color: #606266;
+  white-space: nowrap;
+  pointer-events: none;
+  z-index: 1;
+  top: 53%;
+  transform: translate(-50%, -50%);
+  font-size: 12px;
+  font-weight: bold;
+  color: white;
+  pointer-events: none;
+  z-index: 2;
+}
+
+.switch-text2 {
+  position: absolute;
+  left: 75%;
+  transform: translateX(-50%);
+  top: 50%;
+  transform: translateY(-50%) translateX(-50%);
+  font-size: 12px;
+  font-weight: 500;
+  color: #606266;
+  white-space: nowrap;
+  pointer-events: none;
+  z-index: 1;
+  top: 53%;
+  transform: translate(-50%, -50%);
+  font-size: 12px;
+  font-weight: bold;
+  color: white;
+  pointer-events: none;
+  z-index: 2;
+}
+
+/* 调整 switch 尺寸以便容纳文字 */
+.custom-switch ::v-deep .el-switch__core {
+  width: 60px;
+  height: 28px;
+}
+.search-box {
+  position: relative;
+  display: flex;
+  align-items: center;
+  background: #f8f9fa;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  padding: 0 12px;
+}
+
+.search-icon {
+  color: #999;
+  font-size: 16px;
+  margin-right: 8px;
+}
+
+.search-box input {
+  flex: 1;
+  border: none;
+  background: transparent;
+  padding: 12px 0;
+  font-size: 14px;
+  outline: none;
+}
+
+.search-box input::placeholder {
+  color: #999;
+}
+
+/* 物料信息卡片 */
+.material-info-card {
+  background: white;
+  margin: 4px 16px;
+  padding: 6px 20px;
+  border-radius: 8px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  border: 1px solid #f0f0f0;
+}
+
+/* 卡片标题 */
+.card-title {
+  margin-bottom: 0px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.title-label {
+  font-size: 12px;
+  color: #666;
+  display: block;
+  margin-bottom: 4px;
+}
+
+.title-value {
+  font-size: 16px;
+  font-weight: bold;
+  color: #333;
+  margin-left: 20px;
+}
+
+/* 卡片信息行 */
+.card-info-row {
+  margin-bottom: 8px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.card-info-row:last-child {
+  margin-bottom: 0;
+}
+
+.info-item {
+  display: flex;
+  align-items: baseline;
+  flex: 0 0 auto;
+  max-width: 100%;
+}
+
+.info-item.full-width {
+  flex: 1 1 100%;
+}
+
+.info-label {
+  font-size: 12px;
+  color: #666;
+  white-space: nowrap;
+  margin-right: 4px;
+}
+
+.info-value {
+  font-size: 13px;
+  color: #333;
+  font-weight: 500;
+  word-break: break-all;
+  line-height: 1.4;
+}
+
+.info-value.highlight {
+  color: #17B3A3;
+  font-weight: bold;
+  font-size: 14px;
+}
+
+/* 区域标题 */
+.section-title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 6px 8px;
+  background: white;
+  margin: 0 16px;
+  margin-top: 4px;
+  border-radius: 8px 8px 0 0;
+  border-bottom: 2px solid #17B3A3;
+}
+
+.title-left {
+  display: flex;
+  align-items: center;
+}
+
+.title-left i {
+  color: #17B3A3;
+  font-size: 16px;
+  margin-right: 8px;
+}
+
+.title-left span {
+  color: #17B3A3;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.title-right {
+  display: flex;
+  align-items: center;
+}
+
+.material-list-link {
+  color: #17B3A3;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  text-decoration: underline;
+  transition: color 0.2s ease;
+}
+
+.material-list-link:hover {
+  color: #0d8f7f;
+}
+
+/* 标签列表 */
+.label-list {
+  background: white;
+  margin: 0 16px 12px;
+  border-radius: 0 0 8px 8px;
+  overflow: hidden;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  max-height: 300px; /* 限制最大高度 */
+}
+
+.label-list .list-body {
+  flex: 1;
+  overflow-y: auto; /* 允许垂直滚动 */
+  max-height: 250px; /* 内容区域最大高度 */
+}
+
+/* 滚动条样式优化 */
+.label-list .list-body::-webkit-scrollbar {
+  width: 4px;
+}
+
+.label-list .list-body::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 2px;
+}
+
+.label-list .list-body::-webkit-scrollbar-thumb {
+  background: #17B3A3;
+  border-radius: 2px;
+}
+
+.label-list .list-body::-webkit-scrollbar-thumb:hover {
+  background: #0d8f7f;
+}
+
+.list-header {
+  display: flex;
+  background: #f8f9fa;
+  padding: 12px 8px;
+  border-bottom: 1px solid #e0e0e0;
+  font-size: 12px;
+  color: #666;
+  font-weight: 500;
+}
+
+.list-item {
+  display: flex;
+  padding: 12px 8px;
+  border-bottom: 1px solid #f0f0f0;
+  font-size: 12px;
+  color: #333;
+}
+
+.list-item:last-child {
+  border-bottom: none;
+}
+
+.col-no {
+  width: 20px;
+  text-align: center;
+}
+
+.col-label {
+  flex: 2;
+  text-align: center;
+}
+
+.col-part {
+  flex: 2;
+  text-align: center;
+}
+
+.col-qty {
+  width: 60px;
+  text-align: right;
+  padding-right: 12px;
+}
+
+
+
+.empty-labels {
+  padding: 40px 20px;
+  text-align: center;
+  color: #999;
+}
+
+.empty-labels p {
+  margin: 0;
+  font-size: 14px;
+}
+
+/* 底部操作按钮 */
+.bottom-actions {
+  display: flex;
+  padding: 16px;
+  gap: 20px;
+  background: white;
+  margin-top: auto;
+}
+
+.action-btn {
+  flex: 1;
+  padding: 12px;
+  border: 1px solid #17B3A3;
+  background: white;
+  color: #17B3A3;
+  border-radius: 20px;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.action-btn:hover {
+  background: #17B3A3;
+  color: white;
+}
+
+.action-btn:active {
+  transform: scale(0.98);
+}
+
+/* 响应式设计 */
+@media (max-width: 360px) {
+  .header-bar {
+    padding: 8px 12px;
+  }
+
+  .search-container {
+    padding: 8px 12px;
+  }
+
+  .material-info-card {
+    margin: 4px 12px;
+    padding: 6px 16px;
+  }
+
+  .section-title {
+    margin: 0 12px;
+    margin-top: 4px;
+  }
+
+  .label-list {
+    margin: 0 12px 8px;
+  }
+
+  .card-details {
+    flex-wrap: wrap;
+    gap: 6px;
+  }
+
+  .detail-item {
+    flex: 0 0 48%;
+    margin-bottom: 6px;
+    min-width: 50px;
+  }
+
+  .list-header, .list-item {
+    font-size: 11px;
+  }
+
+  .col-label, .col-part {
+    flex: 1.5;
+  }
+}
+
+/* 库位号覆盖层样式 */
+.location-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+}
+
+.location-modal {
+  background: white;
+  border-radius: 12px;
+  width: 100%;
+  max-width: 400px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+  overflow: hidden;
+}
+
+.modal-header {
+  background: #17B3A3;
+  color: white;
+  padding: 16px 20px;
+  text-align: center;
+}
+
+.modal-title {
+  font-size: 16px;
+  font-weight: 500;
+}
+
+.modal-body {
+  padding: 20px;
+}
+
+.location-input-section {
+  margin-bottom: 20px;
+}
+
+.input-label {
+  font-size: 14px;
+  color: #333;
+  margin-bottom: 12px;
+  font-weight: 500;
+}
+
+.input-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.input-icon {
+  position: absolute;
+  left: 12px;
+  font-size: 18px;
+  color: #17B3A3;
+  z-index: 1;
+}
+
+.location-input {
+  width: 100%;
+  height: 48px;
+  padding: 0 16px 0 40px;
+  border: 1px solid #dcdfe6;
+  border-radius: 8px;
+  font-size: 16px;
+  outline: none;
+  transition: border-color 0.2s;
+}
+
+.location-input:focus {
+  border-color: #17B3A3;
+}
+
+.location-input::placeholder {
+  color: #c0c4cc;
+}
+
+.location-info {
+  background: #f8f9fa;
+  border-radius: 8px;
+  padding: 16px;
+  border-left: 4px solid #17B3A3;
+}
+
+.location-info .info-item {
+  display: flex;
+  align-items: center;
+}
+
+.location-info .label {
+  font-size: 14px;
+  color: #666;
+  margin-right: 12px;
+  min-width: 80px;
+}
+
+.location-info .value {
+  font-size: 14px;
+  color: #333;
+  font-weight: 500;
+}
+
+.modal-footer {
+  padding: 16px 20px;
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  border-top: 1px solid #f0f0f0;
+}
+
+.btn-cancel,
+.btn-confirm {
+  padding: 10px 20px;
+  border-radius: 6px;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.2s;
+  border: none;
+  outline: none;
+}
+
+.btn-cancel {
+  background: #f5f5f5;
+  color: #666;
+}
+
+.btn-cancel:hover {
+  background: #e6e6e6;
+}
+
+.btn-confirm {
+  background: #17B3A3;
+  color: white;
+}
+
+.btn-confirm:hover:not(:disabled) {
+  background: #0d8f7f;
+}
+
+.btn-confirm:disabled {
+  background: #c0c4cc;
+  cursor: not-allowed;
+}
+
+/* 物料清单弹窗样式 */
+.material-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+}
+
+.material-modal {
+  background: white;
+  border-radius: 12px;
+  width: 100%;
+  max-width: 800px;
+  max-height: 80vh;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.material-modal .modal-header {
+  background: #17B3A3;
+  color: white;
+  padding: 5px 16px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  min-height: 28px;
+}
+
+.close-btn {
+  font-size: 16px;
+  cursor: pointer;
+  color: white;
+  transition: color 0.2s ease;
+  padding: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.close-btn:hover {
+  color: #e0e0e0;
+}
+
+.material-modal .modal-title {
+  font-size: 16px;
+  font-weight: 500;
+  margin: 0;
+  line-height: 1.2;
+}
+
+.material-modal .modal-body {
+  flex: 1;
+  overflow: auto;
+  padding: 0;
+}
+
+.material-table {
+  min-width: 500px;
+  width: max-content;
+}
+
+.table-header {
+  display: flex;
+  background: #f8f9fa;
+  padding: 10px 6px;
+  border-bottom: 2px solid #17B3A3;
+  font-size: 12px;
+  color: #333;
+  font-weight: 600;
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+
+.table-body {
+  /* 垂直滚动由modal-body处理 */
+}
+
+.table-row {
+  display: flex;
+  padding: 10px 6px;
+  border-bottom: 1px solid #f0f0f0;
+  font-size: 12px;
+  color: #333;
+  transition: background-color 0.2s ease;
+}
+
+.table-row:hover {
+  background-color: #f8f9fa;
+}
+
+.table-row:last-child {
+  border-bottom: none;
+}
+
+.material-table .col-no {
+  width: 25px;
+  text-align: center;
+  flex-shrink: 0;
+  font-size: 12px;
+}
+
+.material-table .col-label-code {
+  flex: 1.8;
+  text-align: center;
+  min-width: 100px;
+  font-size: 12px;
+  word-break: break-all;
+}
+
+.material-table .col-material-code {
+  flex: 1.8;
+  text-align: center;
+  min-width: 100px;
+  font-size: 12px;
+  word-break: break-all;
+}
+
+.material-table .col-required-qty {
+  flex: 0.8;
+  text-align: right;
+  padding-right: 12px;
+  min-width: 65px;
+  font-size: 12px;
+}
+
+.material-table .col-inbound-qty {
+  flex: 0.8;
+  text-align: right;
+  padding-right: 12px;
+  min-width: 65px;
+  font-size: 12px;
+}
+
+.material-table .col-scans-qty {
+  flex: 0.8;
+  text-align: right;
+  padding-right: 12px;
+  min-width: 65px;
+  font-size: 12px;
+}
+
+/* 物料名称列样式 */
+.material-table .col-part-name {
+  flex: 1.2;
+  text-align: left;
+  min-width: 80px;
+  font-size: 12px;
+  overflow: hidden;
+}
+
+.material-table .col-part-name .part-name-text {
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  color: #17B3A3;
+  cursor: pointer;
+}
+
+.material-table .col-part-name .part-name-text:active {
+  color: #0d8f7f;
+}
+
+/* 物料名称提示框样式 */
+.part-name-tooltip {
+  position: fixed;
+  z-index: 10001;
+  transform: translateY(-100%);
+  max-width: 200px;
+  animation: tooltipFadeIn 0.2s ease;
+}
+
+@keyframes tooltipFadeIn {
+  from { opacity: 0; transform: translateY(-100%) translateY(5px); }
+  to { opacity: 1; transform: translateY(-100%) translateY(0); }
+}
+
+.part-name-tooltip .tooltip-content {
+  background: #303133;
+  color: #fff;
+  padding: 8px 12px;
+  border-radius: 4px;
+  font-size: 12px;
+  line-height: 1.4;
+  word-break: break-all;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
+}
+
+.part-name-tooltip::after {
+  content: '';
+  position: absolute;
+  bottom: -6px;
+  left: 15px;
+  border-width: 6px 6px 0 6px;
+  border-style: solid;
+  border-color: #303133 transparent transparent transparent;
+}
+
+.material-modal .modal-footer {
+  padding: 15px 20px;
+  display: flex;
+  justify-content: center;
+  border-top: 1px solid #f0f0f0;
+}
+
+.btn-close {
+  padding: 10px 20px;
+  border-radius: 6px;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.2s;
+  border: 1px solid #17B3A3;
+  background: white;
+  color: #17B3A3;
+}
+
+.btn-close:hover {
+  background: #17B3A3;
+  color: white;
+}
+
+/* 加载状态样式 */
+.loading-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 60px 20px;
+  color: #666;
+}
+
+.loading-container i {
+  font-size: 24px;
+  margin-bottom: 12px;
+  color: #17B3A3;
+}
+
+.loading-container span {
+  font-size: 14px;
+}
+
+/* 空数据状态样式 */
+.empty-material {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 60px 20px;
+  color: #999;
+}
+
+.empty-material i {
+  font-size: 48px;
+  margin-bottom: 16px;
+  color: #ddd;
+}
+
+.empty-material p {
+  margin: 0;
+  font-size: 14px;
+}
+
+/* 响应式设计 - 物料清单弹窗 */
+@media (max-width: 768px) {
+  .material-modal {
+    max-width: 98vw;
+    max-height: 85vh;
+  }
+
+  .material-table .col-no {
+    width: 25px;
+    font-size: 11px;
+  }
+
+  .material-table .col-label-code,
+  .material-table .col-material-code {
+    flex: 1.5;
+    min-width: 85px;
+    font-size: 11px;
+  }
+
+  .material-table .col-required-qty,
+  .material-table .col-inbound-qty {
+    flex: 0.7;
+    min-width: 50px;
+    font-size: 11px;
+  }
+
+  .table-header,
+  .table-row {
+    font-size: 11px;
+    padding: 8px 4px;
+  }
+}
+
+@media (max-width: 480px) {
+  .material-modal {
+    max-width: 100vw;
+    max-height: 90vh;
+    border-radius: 0;
+  }
+
+  .material-table .col-no {
+    width: 25px;
+    font-size: 10px;
+  }
+
+  .material-table .col-label-code,
+  .material-table .col-material-code {
+    flex: 1.3;
+    min-width: 65px;
+    font-size: 10px;
+  }
+
+  .material-table .col-required-qty,
+  .material-table .col-inbound-qty {
+    flex: 0.6;
+    min-width: 55px;
+    font-size: 10px;
+  }
+
+  .table-header,
+  .table-row {
+    font-size: 10px;
+    padding: 6px 2px;
+  }
+}
+</style>