From 53e1d6bbea91ae96d34c920be99b6bac34598b7d Mon Sep 17 00:00:00 2001
From: shenzhouyu <zhouyu.shen@xujiesoft.com>
Date: Fri, 26 Sep 2025 17:13:03 +0800
Subject: [PATCH] =?UTF-8?q?MR=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/mr/mr.js                              |    8 +-
 src/router/index.js                           |    6 +-
 src/views/modules/mr-issue/mrPicking.vue      |    3 +
 .../modules/mr-issue/mrPickingDetail.vue      |    2 +-
 .../modules/mr-issue/mrPickingReturn.vue      |  544 ++++++
 .../modules/mr-issue/mrReturnIssueList.vue    |  144 ++
 .../mr-issue/mrReturnPickingDetail.vue        | 1607 +++++++++++++++++
 7 files changed, 2311 insertions(+), 3 deletions(-)
 create mode 100644 src/views/modules/mr-issue/mrPickingReturn.vue
 create mode 100644 src/views/modules/mr-issue/mrReturnIssueList.vue
 create mode 100644 src/views/modules/mr-issue/mrReturnPickingDetail.vue

diff --git a/src/api/mr/mr.js b/src/api/mr/mr.js
index 82f9e37..a226e4c 100644
--- a/src/api/mr/mr.js
+++ b/src/api/mr/mr.js
@@ -10,4 +10,10 @@ export const getMrMaterialLines = data => createAPI(`/pda/mr/getMrMaterialLines`
 export const scanMaterialLabel = data => createAPI(`/pda/mr/scanMaterialLabel`, 'post', data)
 
 // 确认MR发料
-export const confirmMrIssue = data => createAPI(`mr/confirmMrIssue`, 'post', data)
+export const confirmMrIssue = data => createAPI(`/pda/mr/confirmMrIssue`, 'post', data)
+
+export const getReturnMrInfo = data => createAPI(`/pda/mr/getReturnMrInfo`, 'post', data)
+
+export const getMrMaterials = data => createAPI(`/pda/mr/getMrMaterials`, 'post', data)
+
+export const getIssueForMaterialRequisition = data => createAPI(`/pda/mr/getIssueForMaterialRequisition`, 'post', data)
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index 820917c..04abbc0 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -94,7 +94,11 @@ const globalRoutes = [
   {path: "/mrissue",name: "mrissue", component: resolve => require(["@/views/modules/mr-issue/index.vue"], resolve), meta: { transition: 'instant' ,preload: true,keepAlive: true}},
   {path: "/mrPicking",name: "mrPicking", component: resolve => require(["@/views/modules/mr-issue/mrPicking.vue"], resolve), meta: { transition: 'instant' ,preload: true,keepAlive: true}},
   {path: "/mrPickingDetail/:orderNo/:lineNo/:partNo/:material",name: "mrPickingDetail", component: resolve => require(["@/views/modules/mr-issue/mrPickingDetail.vue"], resolve), meta: { transition: 'instant' ,preload: true,keepAlive: true}},
-
+  
+  // MR退料
+  {path: "/mrPickingReturn", name: "mrPickingReturn", component: resolve => require(["@/views/modules/mr-issue/mrPickingReturn.vue"], resolve), meta: { transition: 'instant', preload: true, keepAlive: true } },
+  {path: "/mrReturnIssueList", name: "mrReturnIssueList", component: resolve => require(["@/views/modules/mr-issue/mrReturnIssueList.vue"], resolve), meta: { transition: 'instant', preload: true, keepAlive: true } },
+  {path: "/mrReturnPickingDetail/:orderNo/:orderType/:partNo/:transactionId/:quantity/:batchNo", name: "mrReturnPickingDetail", component: resolve => require(["@/views/modules/mr-issue/mrReturnPickingDetail.vue"], resolve), meta: { transition: 'instant', preload: true, keepAlive: true } },
   // 盘点
   {path: "/stocktaking",name: "stocktaking", component: resolve => require(["@/views/modules/inventory/index.vue"], resolve), meta: { transition: 'instant' ,preload: true,keepAlive: true}},
 
diff --git a/src/views/modules/mr-issue/mrPicking.vue b/src/views/modules/mr-issue/mrPicking.vue
index 5ca82a1..f99f045 100644
--- a/src/views/modules/mr-issue/mrPicking.vue
+++ b/src/views/modules/mr-issue/mrPicking.vue
@@ -30,6 +30,9 @@
         <div class="part-desc-row">
           <span class="desc-text">目的地:{{ item.intDestDesc }}</span>
         </div>
+        <div class="part-desc-row">
+          <span class="desc-text">状态:{{ item.statusCode }}</span>
+        </div>
 
         <!-- <div class="card-details">
           <div class="detail-item">
diff --git a/src/views/modules/mr-issue/mrPickingDetail.vue b/src/views/modules/mr-issue/mrPickingDetail.vue
index c7fa731..df15760 100644
--- a/src/views/modules/mr-issue/mrPickingDetail.vue
+++ b/src/views/modules/mr-issue/mrPickingDetail.vue
@@ -308,7 +308,7 @@ export default {
         issueQty: this.totalIssueQty,
         selectedMaterials: this.labelList.map((label) => ({
           labelCode: label.labelCode,
-          quantity: label.quantity,
+          issueQty: label.quantity,
           batchNo: label.batchNo,
           partNo: label.partNo,
           locationId: label.locationId,
diff --git a/src/views/modules/mr-issue/mrPickingReturn.vue b/src/views/modules/mr-issue/mrPickingReturn.vue
new file mode 100644
index 0000000..b112e91
--- /dev/null
+++ b/src/views/modules/mr-issue/mrPickingReturn.vue
@@ -0,0 +1,544 @@
+<template>
+  <div class="pda-container">
+    <!-- 头部栏 -->
+    <div class="header-bar">
+      <div class="header-left" @click="$router.back()">
+        <i class="el-icon-arrow-left"></i>
+        <span>MR退料</span>
+      </div>
+      <div class="header-right" @click="$router.push({ path: '/' })">
+        首页
+      </div>
+    </div>
+
+    <!-- MR号输入 -->
+    <div class="search-container">
+      <el-input
+        clearable
+        v-model="orderNo"
+        placeholder="请输入MR号"
+        prefix-icon="el-icon-search"
+        @keyup.enter.native="handleSearchMr"
+        ref="mrInput"
+      />
+    </div>
+
+    <!-- MR信息卡片列表 -->
+    <div class="work-order-list" v-if="mrList.length > 0">
+      <div
+        v-for="(mr, index) in displayMrList"
+        :key="index"
+        :class="['work-order-card', { selected: selectedMr && isSameMr(selectedMr, mr) }]"
+        @click="selectMr(mr)"
+      >
+        <div class="card-title">
+          <span class="title-label">MR号：{{ mr.orderNo }} &nbsp;&nbsp; 客户号：{{ mr.intCustomerNo }}</span>
+          <span class="title-value">{{ mr.partNo }}</span>
+        </div>
+
+        <!-- 物料描述单独一行 -->
+        <div class="part-desc-row">
+          <span class="desc-text">目的地:{{ mr.intDestDesc }}</span>
+        </div>
+        <div class="part-desc-row">
+          <span class="desc-text">状态:{{ mr.statusCode }}</span>
+        </div>
+
+        <!-- <div class="card-details">
+          <div class="detail-item">
+            <div class="detail-label">需求数量</div>
+            <div class="detail-value">{{ mr.qtyRequired }}</div>
+          </div>
+          <div class="detail-item">
+            <div class="detail-label">已发数量</div>
+            <div class="detail-value">{{ mr.qtyIssued || 0 }}</div>
+          </div>
+          <div class="detail-item">
+            <div class="detail-label">单位</div>
+            <div class="detail-value">{{ mr.uom || "个" }}</div>
+          </div>
+        </div> -->
+      </div>
+    </div>
+
+    <!-- 材料列表 -->
+    <div
+      class="content-area"
+      v-if="selectedMr && materialList.length > 0"
+    >
+      <div
+        v-for="(material, index) in materialList"
+        :key="index"
+        class="material-card"
+        @click="openIssueList(material)"
+      >
+        <div class="card-title">
+          <span class="title-label"
+            >物料编码：{{ material.partNo }} &nbsp;&nbsp; 行号：{{ material.lineNo
+            }}</span
+          >
+        </div>
+
+        <!-- 物料描述单独一行 -->
+        <div class="part-desc-row">
+          <span class="desc-text">{{ material.partDesc }}</span>
+        </div>
+
+        <div class="card-details">
+          <div class="detail-item">
+            <div class="detail-label">退回数量</div>
+            <div class="detail-value">{{ material.qtyReturned }}</div>
+          </div>
+          <div class="detail-item">
+            <div class="detail-label">已发数量</div>
+            <div class="detail-value">{{ material.qtyIssued || 0 }}</div>
+          </div>
+          <div class="detail-item">
+            <div class="detail-label">单位</div>
+            <div class="detail-value">{{ material.unitMeas }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 空状态 -->
+    <div
+      v-if="selectedMr && materialList.length === 0"
+      class="empty-state"
+    >
+      <i class="el-icon-box"></i>
+      <p>该MR暂无材料清单</p>
+    </div>
+
+    <!-- 加载状态 -->
+    <div v-if="loading" class="loading-state">
+      <i class="el-icon-loading"></i>
+      <p>加载中...</p>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getMrMaterials,getReturnMrInfo } from '@/api/mr/mr';
+import moment from 'moment';
+
+export default {
+  data() {
+    return {
+      orderNo: "",
+      mrList: [],
+      selectedMr: null,
+      materialList: [],
+      selectedMaterial: null,
+      loading: false,
+      showOnlySelected: false,
+    };
+  },
+  computed: {
+    displayMrList() {
+      if (this.showOnlySelected && this.selectedMr) {
+        return [this.selectedMr]
+      }
+      return this.mrList
+    },
+  },
+  methods: {
+    formatDate(date) {
+      return date ? moment(date).format('YYYY-MM-DD') : '';
+    },
+    // 查询MR信息
+    handleSearchMr() {
+      if (!this.orderNo.trim()) {
+        this.$message.warning("请输入MR号");
+        return;
+      }
+
+      this.loading = true;
+      const params = {
+        orderNo: this.orderNo.trim(),
+        site: this.$store.state.user.site,
+      };
+
+      getReturnMrInfo(params).then(({ data }) => {
+          this.loading = false;
+          if (
+            data.list &&
+            data.list.length > 0 &&
+            data.code === 0
+          ) {
+            this.mrList = data.list;
+            this.selectedMr = null;
+            this.materialList = [];
+            this.showOnlySelected = false;
+          } else {
+            this.$message.error("未找到该MR信息");
+            this.mrList = [];
+            this.selectedMr = null;
+            this.materialList = [];
+            this.showOnlySelected = false;
+          }
+        })
+        .catch((error) => {
+          this.loading = false;
+          console.error("查询MR信息失败:", error);
+          this.$message.error("查询MR信息失败");
+        });
+    },
+
+    // 判断是否为同一MR
+    isSameMr(a, b) {
+      if (!a || !b) return false
+      return a.orderNo === b.orderNo && a.lineNo === b.lineNo
+    },
+
+    // 选择MR（支持再次点击切换显示所有）
+    selectMr(mr) {
+      if (
+        this.showOnlySelected &&
+        this.selectedMr &&
+        this.isSameMr(this.selectedMr, mr)
+      ) {
+        // 再次点击同一条，恢复显示所有主数据
+        this.selectedMr = null
+        this.materialList = []
+        this.showOnlySelected = false
+        return
+      }
+
+      // 选择并仅显示当前MR
+      this.selectedMr = mr
+      this.showOnlySelected = true
+      this.loadMaterialList()
+    },
+
+    // 加载材料清单（MR BOM）
+    loadMaterialList() {
+      if (!this.selectedMr) {
+        this.materialList = [];
+        return;
+      }
+
+      const params = {
+        orderNo: this.selectedMr.orderNo,
+        site: this.$store.state.user.site,
+      };
+
+      getMrMaterials(params)
+        .then(({ data }) => {
+          if (data && data.code === 0) {
+            this.materialList = (data.list || []).map((item, index) => ({
+              ...item,
+              id: index + 1,
+            }));
+          } else {
+            this.$message.error(data.msg || '获取材料清单失败');
+            this.materialList = [];
+          }
+        })
+        .catch((error) => {
+          console.error('获取材料清单失败:', error);
+          this.$message.error('获取材料清单失败');
+        });
+    },
+
+    // 打开退料记录列表（新页面）
+    openIssueList(material) {
+      this.$router.push({
+        name: 'mrReturnIssueList',
+        params: {
+          orderNo: this.selectedMr.orderNo,
+          partNo: material.partNo,
+        },
+      });
+    },
+
+  },
+
+  mounted() {
+    // 聚焦MR号输入框
+    this.$nextTick(() => {
+      if (this.$refs.mrInput) {
+        this.$refs.mrInput.focus();
+      }
+    });
+  },
+};
+</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 {
+  flex: 1;
+}
+
+/* MR列表 */
+.work-order-list {
+  overflow-y: auto;
+  padding: 12px 16px;
+}
+
+/* MR卡片 */
+.work-order-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;
+  border: 2px solid transparent;
+}
+
+.work-order-card:hover {
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+  transform: translateY(-1px);
+}
+
+.work-order-card.selected {
+  border: 2px solid #17b3a3;
+  background: #f0fffe;
+}
+
+.close-icon {
+  color: #17b3a3;
+  font-size: 16px;
+  margin-left: 8px;
+  cursor: pointer;
+  float: right;
+}
+
+.close-icon:hover {
+  color: #14a085;
+}
+
+
+.work-order-card:active {
+  transform: translateY(0);
+}
+
+/* 内容区域 */
+.content-area {
+  flex: 1;
+  overflow-y: auto;
+  padding: 12px 16px;
+}
+
+/* 材料卡片 */
+.material-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;
+  border: 2px solid transparent;
+}
+
+.material-card:hover {
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+  transform: translateY(-1px);
+}
+
+.material-card.selected {
+  border-color: #17b3a3;
+  background: #f0fffe;
+}
+
+.material-card:active {
+  transform: translateY(0);
+}
+
+/* 卡片标题 */
+.card-title {
+  margin-bottom: 12px;
+}
+
+.title-label {
+  font-size: 12px;
+  color: #666;
+  display: block;
+  margin-bottom: 4px;
+}
+
+.title-value {
+  font-size: 16px;
+  font-weight: bold;
+  color: #333;
+  margin-left: 16px;
+}
+
+/* 物料描述行 */
+.part-desc-row {
+  margin-bottom: 12px;
+  padding: 0 4px;
+}
+
+.desc-text {
+  font-size: 12px;
+  color: #666;
+  line-height: 1.3;
+  word-break: break-all;
+}
+
+/* 卡片详情 */
+.card-details {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 4px;
+}
+
+.detail-item {
+  flex: 1;
+  text-align: center;
+  min-width: 50px;
+  max-width: 70px;
+}
+
+.detail-label {
+  font-size: 11px;
+  color: #666;
+  margin-bottom: 4px;
+  line-height: 1.2;
+  margin-left: -12px;
+}
+
+.detail-value {
+  font-size: 13px;
+  color: #333;
+  line-height: 1.2;
+  margin-left: -12px;
+}
+
+/* 空状态 */
+.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;
+  }
+
+  .work-order-list {
+    padding: 8px 12px;
+  }
+
+  .work-order-card {
+    padding: 12px;
+  }
+
+  .content-area {
+    padding: 8px 12px;
+  }
+
+  .material-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/mr-issue/mrReturnIssueList.vue b/src/views/modules/mr-issue/mrReturnIssueList.vue
new file mode 100644
index 0000000..1f84e3c
--- /dev/null
+++ b/src/views/modules/mr-issue/mrReturnIssueList.vue
@@ -0,0 +1,144 @@
+<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="content-area">
+      <div class="work-order-list" v-if="issueList.length > 0">
+        <div
+          v-for="(item, index) in issueList"
+          :key="index"
+          class="material-card"
+          @click="goDetail(item)"
+        >
+          <div class="card-title">
+            <span class="title-label">
+              物料编码：{{ partNo }} &nbsp;&nbsp; 发料号：{{ item.TRANSACTION_ID }}
+            </span>
+          </div>
+          <div class="part-desc-row">
+            <span class="desc-text">批次号：{{ item.LOT_BATCH_NO || '-' }}</span>
+          </div>
+          <div class="card-details">
+            <div class="detail-item">
+              <div class="detail-label">发料数量</div>
+              <div class="detail-value">{{ item.QUANTITY }}</div>
+            </div>
+            <div class="detail-item">
+              <div class="detail-label">预留数量</div>
+              <div class="detail-value">{{ item.QTY_REVERSED || 0 }}</div>
+            </div>
+            <div class="detail-item">
+              <div class="detail-label">单位</div>
+              <div class="detail-value">{{ item.uom || '个' }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div v-if="!loading && issueList.length === 0" 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 { getIssueForMaterialRequisition } from "@/api/mr/mr";
+
+export default {
+  data() {
+    return {
+      orderNo: '',
+      partNo: '',
+      loading: false,
+      issueList: [],
+    };
+  },
+  methods: {
+    loadIssueList() {
+      console.log('加载发料记录', this.orderNo, this.partNo);
+      
+      if (!this.orderNo || !this.partNo) {
+        return;
+      }
+      this.loading = true;
+      const params = {
+        orderNo: '8715',
+        site: this.$store.state.user.site,
+        partNo: this.partNo,
+      };
+      getIssueForMaterialRequisition(params)
+        .then(({ data }) => {
+          this.loading = false;
+          if (data && data.code === 0) {
+            this.issueList = data.mrIssueList || [];
+          } else {
+            this.$message.error(data.msg || '获取发料记录失败');
+            this.issueList = [];
+          }
+        })
+        .catch(() => {
+          this.loading = false;
+          this.$message.error('获取发料记录失败');
+        });
+    },
+    goDetail(item) {
+      this.$router.push({
+        name: 'mrReturnPickingDetail',
+        params: {
+          orderNo: this.orderNo,
+          orderType: 'mr',
+          partNo: this.partNo,
+          transactionId: item.TRANSACTION_ID,
+          quantity: item.QUANTITY,
+          batchNo: item.LOT_BATCH_NO,
+        },
+      });
+    },
+  },
+  mounted() {
+    this.orderNo = this.$route.params.orderNo;
+    this.partNo = this.$route.params.partNo;
+    this.loadIssueList();
+  },
+};
+</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; }
+.content-area { flex: 1; overflow-y: auto; padding: 12px 16px; }
+.work-order-list { overflow-y: auto; padding: 12px 16px; }
+.material-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; border: 2px solid transparent; }
+.material-card:hover { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); transform: translateY(-1px); }
+.material-card:active { transform: translateY(0); }
+.card-title { margin-bottom: 12px; }
+.title-label { font-size: 12px; color: #666; display: block; margin-bottom: 4px; }
+.part-desc-row { margin-bottom: 12px; padding: 0 4px; }
+.desc-text { font-size: 12px; color: #666; line-height: 1.3; word-break: break-all; }
+.card-details { display: flex; justify-content: space-between; align-items: flex-start; gap: 4px; }
+.detail-item { flex: 1; text-align: center; min-width: 50px; max-width: 70px; }
+.detail-label { font-size: 11px; color: #666; margin-bottom: 4px; line-height: 1.2; margin-left: -12px; }
+.detail-value { font-size: 13px; color: #333; line-height: 1.2; margin-left: -12px; }
+.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; }
+.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); } }
+</style>
diff --git a/src/views/modules/mr-issue/mrReturnPickingDetail.vue b/src/views/modules/mr-issue/mrReturnPickingDetail.vue
new file mode 100644
index 0000000..cfb6564
--- /dev/null
+++ b/src/views/modules/mr-issue/mrReturnPickingDetail.vue
@@ -0,0 +1,1607 @@
+<template>
+  <div class="pda-container">
+    <!-- 头部栏 -->
+    <div class="header-bar">
+      <div class="header-left" @click="$router.back()">
+        <i class="el-icon-arrow-left"></i>
+        <span>MR退料</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="work-order-list" v-if="orderInfo.orderNo">
+      <div class="work-order-card">
+        <div class="card-title">
+          <span class="title-label"
+            >MR号：{{ orderInfo.orderNo }}</span
+          >
+        </div>
+
+        <!-- 关联信息单独一行 -->
+        <div class="part-desc-row">
+          <span class="desc-text"
+            >发料号：{{
+              orderInfo.transactionId
+            }}</span
+          >
+        </div>
+        <div class="part-desc-row">
+          <span class="desc-text">{{ orderInfo.partNo }}</span>
+        </div>
+        <div class="part-desc-row">
+          <span class="desc-text">{{ orderInfo.description }}</span>
+        </div>
+
+        <div class="card-details">
+          <div class="detail-item">
+            <div class="detail-label">已发数量</div>
+            <div class="detail-value">{{ orderInfo.quantity }}</div>
+          </div>
+          <div class="detail-item">
+            <div class="detail-label">本次</div>
+            <div class="detail-value">{{ totalScannedQty }}</div>
+          </div>
+        </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-batch">批次号</div>
+        <div class="col-qty">退料数量</div>
+      </div>
+
+      <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-batch">{{ label.batchNo }}</div>
+        <div class="col-qty">{{ label.quantity }}</div>
+      </div>
+
+      <!-- 空状态 -->
+      <div v-if="labelList.length === 0" class="empty-labels">
+        <p>暂无扫描标签</p>
+      </div>
+    </div>
+
+    <!-- 退料原因选择 -->
+    <div class="return-reason-section">
+      <div class="reason-title">退料原因</div>
+      <el-select
+        v-model="returnReason"
+        placeholder="请选择退料原因"
+        style="width: 100%"
+      >
+        <el-option label="质量问题" value="QUALITY_ISSUE"></el-option>
+        <el-option label="超发退料" value="OVER_ISSUE"></el-option>
+        <el-option label="错误物料" value="WRONG_MATERIAL"></el-option>
+        <el-option label="生产变更" value="PRODUCTION_CHANGE"></el-option>
+        <el-option label="其他原因" value="OTHER"></el-option>
+      </el-select>
+    </div>
+
+    <!-- 底部操作按钮 -->
+    <div class="bottom-actions">
+      <button class="action-btn primary" @click="printLabels">打印</button>
+      <button
+        class="action-btn primary"
+        style="margin-left: 10px"
+        @click="confirmReturn"
+      >
+        确定退料
+      </button>
+
+      <button
+        class="action-btn secondary"
+        style="margin-left: 10px"
+        @click="cancelReturn"
+      >
+        取消
+      </button>
+    </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-material-code">物料编码</div>
+              <div class="col-returnable-qty">可退数量</div>
+              <div class="col-returned-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-material-code">
+                  {{ item.materialCode || item.partNo }}
+                </div>
+                <div class="col-returnable-qty">
+                  {{ item.returnableQty || 0 }}
+                </div>
+                <div class="col-returned-qty">{{ item.returnedQty || 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>
+
+    <!-- 打印弹框 -->
+    <div v-if="showPrintDialog" class="print-overlay">
+      <div class="print-modal">
+        <div class="print-form">
+          <!-- 物料编码输入行 -->
+          <div class="form-row">
+            <div class="form-group">
+              <label class="form-label">物料编码</label>
+              <el-input
+                v-model="printData.materialCode1"
+                placeholder="请输入物料编码"
+                @input="handleMaterialCodeInput"
+                disabled
+                class="form-input"
+              />
+            </div>
+            <div class="form-group">
+              <label class="form-label">物料数量</label>
+              <el-input
+                v-model="printData.materialCode2"
+                placeholder="物料数量"
+                class="form-input"
+              />
+            </div>
+            <div class="add-btn">
+              <i class="el-icon-plus" @click="addWmsLabel"></i>
+            </div>
+          </div>
+
+          <!-- 物料名称和单位行 -->
+          <div class="form-row">
+            <div class="form-group">
+              <label class="form-label">物料名称</label>
+              <el-input
+                v-model="printData.materialName"
+                placeholder="物料名称自动带出"
+                disabled
+                class="form-input disabled-input"
+              />
+            </div>
+          </div>
+
+          <!-- 入库信息确认标题 -->
+          <div class="section-divider">
+            <div class="divider-dot"></div>
+            <span class="divider-text">标签信息确认</span>
+          </div>
+
+          <!-- 标签列表 -->
+          <div class="print-label-list">
+            <div class="print-list-header">
+              <div class="print-col-no">NO.</div>
+              <div class="print-col-label">标签条码</div>
+              <div class="print-col-material">物料编码</div>
+              <div class="print-col-qty">标签数量</div>
+            </div>
+
+            <div class="print-list-body">
+              <div
+                v-for="(item, index) in printLabelList"
+                :key="index"
+                class="print-list-item"
+              >
+                <div class="print-col-no">{{ index+1 }}</div>
+                <div class="print-col-label">{{ item.labelCode }}</div>
+                <div class="print-col-material">{{ item.partNo }}</div>
+                <div class="print-col-qty">{{ item.quantity }}</div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 底部按钮 -->
+          <div class="print-actions">
+            <button class="print-btn confirm-btn" @click="confirmPrint">
+              确定
+            </button>
+            <button class="print-btn cancel-btn" @click="closePrintDialog">
+              取消
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import moment from "moment";
+
+export default {
+  data() {
+    return {
+      scanCode: "",
+      orderInfo: {},
+      labelList: [],
+      orderNo: "",
+      orderType: "",
+      showMaterialDialog: false,
+      materialList: [],
+      materialListLoading: false,
+      isRemoveMode: false, // 默认为添加模式
+      returnReason: "",
+      showPrintDialog: false,
+      printData: {},
+      partNo:"", // 物料编码
+      transactionId:"", // 关联单号
+      quantity:"", // 本次退料数量
+      batchNo:"", // 批次号
+      printLabelList: [],
+    };
+  },
+  computed: {
+    totalScannedQty() {
+      return this.labelList.reduce(
+        (sum, l) => sum + (Number(l.quantity) || 0),
+        0
+      );
+    },
+  },
+  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,
+        orderNo: this.orderNo,
+        orderType: this.orderType,
+        site: this.$store.state.user.site,
+      };
+
+      // 模拟MR退料标签验证
+      this.simulateReturnLabelScan(params)
+        .then((result) => {
+          if (result.success) {
+            // 检查是否已经扫描过
+            const exists = this.labelList.find(
+              (item) => item.labelCode === labelCode
+            );
+            if (exists) {
+              this.$message.warning("该标签已扫描，请勿重复扫描");
+              return;
+            }
+
+            // 添加到列表
+            this.labelList.push({
+              id: Date.now(),
+              labelCode: labelCode,
+              partNo: result.data.partNo,
+              quantity: result.data.quantity,
+              batchNo: result.data.batchNo,
+              returnReason: result.data.returnReason,
+            });
+
+            this.$message.success("操作成功");
+          } else {
+            this.$message.error(
+              result.message || "该标签不符合退料要求，请检查"
+            );
+          }
+        })
+        .catch(() => {
+          this.$message.error("操作失败");
+        });
+    },
+
+    // 模拟MR退料标签扫描API
+    simulateReturnLabelScan() {
+      return new Promise((resolve) => {
+        setTimeout(() => {
+          // 模拟成功响应
+          resolve({
+            success: true,
+            data: {
+              partNo: "MAT" + Math.floor(Math.random() * 1000),
+              quantity: Math.floor(Math.random() * 50) + 1,
+              batchNo: "BATCH" + Math.floor(Math.random() * 100),
+              returnReason: "QUALITY_ISSUE",
+            },
+          });
+        }, 500);
+      });
+    },
+
+    // 通过条码移除标签
+    removeLabelByCode(labelCode) {
+      const index = this.labelList.findIndex(
+        (item) => item.labelCode === labelCode
+      );
+      if (index !== -1) {
+        this.labelList.splice(index, 1);
+        this.$message.success("操作成功");
+      } else {
+        this.$message.warning("未找到该标签");
+      }
+    },
+
+    // 确认MR退料
+    confirmReturn() {
+      if (this.labelList.length === 0) {
+        this.$message.warning("请先扫描退料标签");
+        return;
+      }
+
+      if (!this.returnReason) {
+        this.$message.warning("请选择退料原因");
+        return;
+      }
+
+      const returnParams = {
+        site: this.orderInfo.site,
+        orderNo: this.orderNo,
+        orderType: this.orderType,
+        returnReason: this.returnReason,
+        labels: this.labelList.map((label) => ({
+          labelCode: label.labelCode,
+          quantity: label.quantity,
+          batchNo: label.batchNo,
+          partNo: label.partNo,
+        })),
+      };
+
+      // 模拟MR退料确认API
+      this.simulateReturnConfirm(returnParams)
+        .then((result) => {
+          if (result.success) {
+            this.$message.success("MR退料成功");
+            this.$router.back();
+          } else {
+            this.$message.error(result.message || "操作失败");
+          }
+        })
+        .catch(() => {
+          this.$message.error("操作失败");
+        });
+    },
+
+    // 模拟MR退料确认API
+    simulateReturnConfirm() {
+      return new Promise((resolve) => {
+        setTimeout(() => {
+          resolve({
+            success: true,
+            message: "MR退料成功",
+          });
+        }, 1000);
+      });
+    },
+
+    // 打印标签
+    printLabels() {
+      this.showPrintDialog = true;
+      this.initPrintData();
+    },
+
+    // 初始化打印数据
+    initPrintData() {
+      this.printData = {
+        materialCode1: this.partNo,
+        materialCode2: 0,
+        materialName: this.orderInfo.description,
+        unit: "",
+        inboundQty: "",
+      };
+      this.printLabelList = [];
+    },
+
+    // 关闭打印弹框
+    closePrintDialog() {
+      this.showPrintDialog = false;
+      this.printData = {};
+    },
+
+    // 确认打印
+    confirmPrint() {
+      if (!this.printData.materialCode1.trim()) {
+        this.$message.warning("请输入物料编码");
+        return;
+      }
+
+      if (!this.printData.inboundQty || this.printData.inboundQty <= 0) {
+        this.$message.warning("请输入有效的入库数量");
+        return;
+      }
+
+      // 模拟打印操作
+      this.$message.success("打印成功");
+      this.closePrintDialog();
+    },
+
+    // 物料编码输入处理
+    handleMaterialCodeInput() {
+      if (this.printData.materialCode1.trim()) {
+        // 模拟根据物料编码获取物料名称和单位
+        this.printData.materialName = "物料名称自动带出";
+        this.printData.unit = "PCS";
+      } else {
+        this.printData.materialName = "";
+        this.printData.unit = "";
+      }
+    },
+
+    // 取消退料
+    cancelReturn() {
+      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() {
+      console.log("加载退料物料清单", this.orderInfo, this.orderNo);
+
+      if (!this.$store.state.user.site || !this.orderNo) {
+        this.$message.error("缺少必要参数，无法获取物料清单");
+        return;
+      }
+
+      this.materialListLoading = true;
+      const params = {
+        site: this.$store.state.user.site,
+        orderNo: this.orderNo,
+        orderType: this.orderType,
+      };
+
+      // 模拟获取物料清单
+      this.simulateMaterialList(params)
+        .then((data) => {
+          this.materialListLoading = false;
+          if (data && data.code === 0) {
+            this.materialList = data.materials || [];
+          } else {
+            this.$message.error(data.msg || "获取物料清单失败");
+            this.materialList = [];
+          }
+        })
+        .catch(() => {
+          this.materialListLoading = false;
+          this.$message.error("获取物料清单失败");
+          this.materialList = [];
+        });
+    },
+
+    // 模拟物料清单API
+    simulateMaterialList() {
+      return new Promise((resolve) => {
+        setTimeout(() => {
+          const mockMaterials = [
+            {
+              materialCode: "MAT001",
+              partNo: "MAT001",
+              returnableQty: 100,
+              returnedQty: 20,
+            },
+            {
+              materialCode: "MAT002",
+              partNo: "MAT002",
+              returnableQty: 200,
+              returnedQty: 50,
+            },
+            {
+              materialCode: "MAT003",
+              partNo: "MAT003",
+              returnableQty: 150,
+              returnedQty: 0,
+            },
+          ];
+
+          resolve({
+            code: 0,
+            materials: mockMaterials,
+          });
+        }, 500);
+      });
+    },
+
+    // 关闭物料清单弹窗
+    closeMaterialDialog() {
+      this.showMaterialDialog = false;
+    },
+
+    // 加载订单详情
+    loadOrderDetails() {
+      const params = {
+        orderNo: this.orderNo,
+        orderType: this.orderType,
+        site: this.$store.state.user.site,
+        partNo:this.partNo
+      };
+      console.log("加载订单详情参数:", params);
+
+      // 物料详情接口
+      getInventoryPart(params).then(({data}) => {
+          if (data && data.code === 0) {
+            this.orderInfo = data.inventoryPart[0]
+            this.orderInfo.type = this.orderType
+            this.orderInfo.orderNo = this.orderNo
+            this.orderInfo.transactionId = this.transactionId
+            this.orderInfo.quantity = this.quantity
+          } else {
+            this.$message.error(data.msg || "获取订单详情失败");
+          }
+        }).catch(() => {
+          this.$message.error("获取订单详情失败");
+        });
+    },
+    addWmsLabel(){
+      if(!this.printData.materialCode1.trim()){
+        this.$message.warning("请输入物料编码");
+        return;
+      }
+      if(!this.printData.materialCode2 || this.printData.materialCode2<=0){
+        this.$message.warning("请输入有效的物料数量");
+        return;
+      }
+      let newLabel = {
+        site: this.$store.state.user.site,
+        partNo: this.printData.materialCode1,
+        quantity: this.printData.materialCode2,
+        batchNo: this.batchNo,
+        warehouseId:"",
+        locationId:"",
+      }
+      console.log("添加标签:",newLabel);
+
+      // 添加到列表
+      this.printLabelList.push(newLabel);
+      this.$message.success("操作成功");
+      // 清空输入
+      this.printData.materialCode2 = 0;
+      this.printData.unit = "";
+    }
+  },
+
+  mounted() {
+    // 获取路由参数
+    this.orderNo = this.$route.params.orderNo;
+    this.orderType = this.$route.params.orderType || "mr";
+    this.partNo = this.$route.params.partNo
+    this.transactionId = this.$route.params.transactionId
+    this.quantity = this.$route.params.quantity
+    this.batchNo = this.$route.params.batchNo
+    console.log("订单号:", this.orderNo, "订单类型:", this.orderType,"物料编码:",this.partNo);
+
+    if (!this.orderNo) {
+      this.$message.error("参数错误");
+      this.$router.back();
+      return;
+    }
+
+    // 聚焦扫描框
+    this.$nextTick(() => {
+      if (this.$refs.scanInput) {
+        this.$refs.scanInput.focus();
+      }
+    });
+
+    // 加载订单详情
+    this.loadOrderDetails();
+  },
+};
+</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;
+}
+
+/* 物料信息卡片 */
+.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;
+  border-left: 4px solid #17b3a3;
+}
+
+.card-title {
+  margin-bottom: 16px;
+}
+
+.title-label {
+  font-size: 11px;
+  color: #999;
+  display: block;
+  margin-bottom: 6px;
+  font-weight: normal;
+}
+
+.title-value {
+  font-size: 18px;
+  font-weight: bold;
+  color: #333;
+  line-height: 1.2;
+  margin-left: 20px;
+}
+
+.card-details {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 4px;
+}
+
+.detail-item {
+  flex: 1;
+  text-align: center;
+  min-width: 60px;
+  max-width: 60px;
+}
+
+.detail-label {
+  font-size: 11px;
+  color: #999;
+  margin-bottom: 6px;
+  font-weight: normal;
+  line-height: 1.2;
+  margin-left: -12px;
+}
+
+.detail-value {
+  font-size: 13px;
+  color: #333;
+  font-weight: 500;
+  line-height: 1.2;
+  margin-left: -12px;
+}
+
+.detail-value .qualified {
+  color: #17b3a3;
+  font-weight: 500;
+}
+
+.detail-value .total {
+  color: #333;
+  font-weight: 500;
+}
+
+.detail-value .total::before {
+  content: "/";
+  color: #333;
+}
+
+/* 区域标题 */
+.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;
+}
+
+/* 对齐直接领料明细的工单卡片样式 */
+/* 工单列表容器背景与间距 */
+.work-order-list {
+  overflow-y: auto;
+  padding: 12px 16px;
+}
+
+/* 工单卡片具有白色背景、圆角、阴影与边框一致性 */
+.work-order-card {
+  background: white;
+  border-radius: 8px;
+  margin-bottom: 12px;
+  padding: 16px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  transition: all 0.2s ease;
+  border: 2px solid transparent;
+}
+
+.work-order-card:hover {
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+  transform: translateY(-1px);
+}
+
+.work-order-card:active {
+  transform: translateY(0);
+}
+
+/* 物料描述行（单独一行的小字说明） */
+.part-desc-row {
+  margin-bottom: 12px;
+  padding: 0 4px;
+}
+
+.desc-text {
+  font-size: 12px;
+  color: #666;
+  line-height: 1.3;
+  word-break: break-all;
+}
+
+.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;
+}
+
+.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: 1.5;
+  text-align: center;
+}
+
+.col-batch {
+  flex: 1.5;
+  text-align: center;
+}
+
+.col-qty {
+  width: 60px;
+  text-align: center;
+}
+
+.empty-labels {
+  padding: 40px 20px;
+  text-align: center;
+  color: #999;
+}
+
+.empty-labels p {
+  margin: 0;
+  font-size: 14px;
+}
+
+/* 退料原因选择 */
+.return-reason-section {
+  background: white;
+  margin: 0 16px 12px;
+  padding: 16px;
+  border-radius: 8px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.reason-title {
+  font-size: 14px;
+  font-weight: 500;
+  color: #333;
+  margin-bottom: 8px;
+}
+
+/* 底部操作按钮 */
+.bottom-actions {
+  display: flex;
+  padding: 16px;
+  gap: 20px;
+  background: white;
+  margin-top: auto;
+}
+
+.action-btn {
+  flex: 1;
+  padding: 12px;
+  border-radius: 20px;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.action-btn.primary {
+  border: 1px solid #17b3a3;
+  background: #17b3a3;
+  color: white;
+}
+
+.action-btn.primary:hover {
+  background: #13998c;
+  border-color: #13998c;
+}
+
+.action-btn.secondary {
+  border: 1px solid #17b3a3;
+  background: white;
+  color: #17b3a3;
+}
+
+.action-btn.secondary:hover {
+  background: #17b3a3;
+  color: white;
+}
+
+.action-btn:active {
+  transform: scale(0.98);
+}
+
+/* 物料清单弹窗样式 */
+.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 {
+  width: 100%;
+}
+
+.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 {
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+.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-material-code {
+  flex: 1.8;
+  text-align: center;
+  min-width: 100px;
+  font-size: 12px;
+  word-break: break-all;
+}
+
+.material-table .col-returnable-qty {
+  flex: 0.8;
+  text-align: center;
+  min-width: 65px;
+  font-size: 12px;
+}
+
+.material-table .col-returned-qty {
+  flex: 0.8;
+  text-align: center;
+  min-width: 65px;
+  font-size: 12px;
+}
+
+.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;
+}
+
+/* 打印弹框样式 */
+.print-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;
+}
+
+.print-modal {
+  background: #f5f5f5;
+  border-radius: 12px;
+  width: 100%;
+  max-width: 600px;
+  max-height: 90vh;
+  overflow: hidden;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+}
+
+.print-form {
+  padding: 10px;
+  overflow-y: auto;
+  max-height: 90vh;
+}
+
+.form-row {
+  display: flex;
+  align-items: flex-end;
+  gap: 12px;
+  margin-bottom: 16px;
+}
+
+.form-group {
+  flex: 1;
+}
+
+.form-label {
+  display: block;
+  font-size: 14px;
+  color: #333;
+  margin-bottom: 6px;
+  font-weight: 500;
+}
+
+.form-input {
+  width: 100%;
+}
+
+.form-input ::v-deep .el-input__inner {
+  height: 40px;
+  border: 2px solid #17b3a3;
+  border-radius: 6px;
+  font-size: 14px;
+}
+
+.disabled-input ::v-deep .el-input__inner {
+  background: #e8e8e8;
+  color: #666;
+  border-color: #ddd;
+}
+
+.add-btn {
+  width: 40px;
+  height: 40px;
+  background: #17b3a3;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: background-color 0.2s;
+  flex-shrink: 0;
+}
+
+.add-btn:hover {
+  background: #13998c;
+}
+
+.add-btn i {
+  color: white;
+  font-size: 20px;
+  font-weight: bold;
+}
+
+.section-divider {
+  display: flex;
+  align-items: center;
+  margin: 24px 0 16px;
+  padding-bottom: 8px;
+  border-bottom: 2px solid #17b3a3;
+}
+
+.divider-dot {
+  width: 8px;
+  height: 8px;
+  background: #17b3a3;
+  border-radius: 50%;
+  margin-right: 8px;
+}
+
+.divider-text {
+  font-size: 14px;
+  color: #17b3a3;
+  font-weight: 500;
+}
+
+.print-label-list {
+  background: white;
+  border-radius: 8px;
+  overflow: hidden;
+  margin-bottom: 20px;
+}
+
+.print-list-header {
+  display: flex;
+  background: #f8f9fa;
+  padding: 12px 8px;
+  border-bottom: 1px solid #e0e0e0;
+  font-size: 12px;
+  color: #666;
+  font-weight: 500;
+}
+
+.print-list-body {
+  max-height: 200px;
+  overflow-y: auto;
+}
+
+.print-list-item {
+  display: flex;
+  padding: 12px 8px;
+  border-bottom: 1px solid #f0f0f0;
+  font-size: 12px;
+  color: #333;
+}
+
+.print-list-item:last-child {
+  border-bottom: none;
+}
+
+.print-col-no {
+  width: 40px;
+  text-align: center;
+  flex-shrink: 0;
+}
+
+.print-col-label {
+  flex: 2;
+  text-align: center;
+  min-width: 100px;
+}
+
+.print-col-material {
+  flex: 2;
+  text-align: center;
+  min-width: 100px;
+}
+
+.print-col-qty {
+  width: 60px;
+  text-align: center;
+  flex-shrink: 0;
+}
+
+.print-actions {
+  display: flex;
+  gap: 20px;
+  justify-content: center;
+  margin-top: 20px;
+}
+
+.print-btn {
+  padding: 12px 30px;
+  border-radius: 25px;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  border: 2px solid #17b3a3;
+  min-width: 100px;
+}
+
+.confirm-btn {
+  background: #17b3a3;
+  color: white;
+}
+
+.confirm-btn:hover {
+  background: #13998c;
+  border-color: #13998c;
+}
+
+.cancel-btn {
+  background: white;
+  color: #17b3a3;
+}
+
+.cancel-btn:hover {
+  background: #17b3a3;
+  color: white;
+}
+
+.print-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;
+  }
+
+  .return-reason-section {
+    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,
+  .col-batch {
+    flex: 1.2;
+  }
+
+  .print-modal {
+    max-width: 95%;
+    margin: 10px;
+  }
+
+  .print-form {
+    padding: 15px;
+  }
+
+  .form-row {
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .add-btn {
+    align-self: center;
+    margin-top: 10px;
+  }
+
+  .print-actions {
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  .print-btn {
+    width: 100%;
+  }
+}
+</style>