From 57d6702c99e7f6cd369149893381995bc32470a3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A0=82=E7=B3=96?= <2178503051@qq.com>
Date: Tue, 12 May 2026 11:21:04 +0800
Subject: [PATCH] =?UTF-8?q?feat(wms):=20=E6=96=B0=E5=A2=9E=E5=BA=94?=
 =?UTF-8?q?=E6=94=B6=E8=AE=A1=E5=88=92=E7=AE=A1=E7=90=86=E5=8F=8A=E5=85=A5?=
 =?UTF-8?q?=E5=BA=93=E6=A0=A1=E9=AA=8C=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1. 新增receivePlan.js API文件，实现应收货物计划的增删改查和钢卷校验接口
2. 入库页面新增签收前校验功能，支持差异弹窗确认后强行收货
3. 新增收货计划明细管理页面，支持增删改查、Excel导入导出和差异对比
---
 klp-ui/src/api/wms/receivePlan.js            |  53 +
 klp-ui/src/views/wms/coil/do/warehousing.vue | 146 ++-
 klp-ui/src/views/wms/receive/plan/index.vue  | 974 ++++++++++++++++++-
 3 files changed, 1093 insertions(+), 80 deletions(-)
 create mode 100644 klp-ui/src/api/wms/receivePlan.js

diff --git a/klp-ui/src/api/wms/receivePlan.js b/klp-ui/src/api/wms/receivePlan.js
new file mode 100644
index 00000000..48ca3419
--- /dev/null
+++ b/klp-ui/src/api/wms/receivePlan.js
@@ -0,0 +1,53 @@
+import request from '@/utils/request'
+
+// 查询应收货物计划列表
+export function listReceivePlan(query) {
+  return request({
+    url: '/wms/receivePlan/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询应收货物计划详细
+export function getReceivePlan(receiveId) {
+  return request({
+    url: '/wms/receivePlan/' + receiveId,
+    method: 'get'
+  })
+}
+
+// 新增应收货物计划
+export function addReceivePlan(data) {
+  return request({
+    url: '/wms/receivePlan',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改应收货物计划
+export function updateReceivePlan(data) {
+  return request({
+    url: '/wms/receivePlan',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除应收货物计划
+export function delReceivePlan(receiveId) {
+  return request({
+    url: '/wms/receivePlan/' + receiveId,
+    method: 'delete'
+  })
+}
+
+// 校验要签收的钢卷是否在代收计划中
+export function checkReceivePlan(data) {
+  return request({
+    url: '/wms/receivePlan/validateCoil',
+    method: 'post',
+    data: data
+  })
+}
diff --git a/klp-ui/src/views/wms/coil/do/warehousing.vue b/klp-ui/src/views/wms/coil/do/warehousing.vue
index 4cddca14..124e4521 100644
--- a/klp-ui/src/views/wms/coil/do/warehousing.vue
+++ b/klp-ui/src/views/wms/coil/do/warehousing.vue
@@ -137,8 +137,10 @@
               </el-col>
               <el-col :span="24">
                 <el-form-item :label="getItemLabel" prop="itemId" v-if="!form.coilId">
-                  <product-select v-if="form.itemType == 'product'" @change="handleProductChange" v-model="form.itemId" clearable />
-                  <raw-material-select v-else-if="form.itemType == 'raw_material'" @change="handleProductChange" v-model="form.itemId" clearable />
+                  <product-select v-if="form.itemType == 'product'" @change="handleProductChange" v-model="form.itemId"
+                    clearable />
+                  <raw-material-select v-else-if="form.itemType == 'raw_material'" @change="handleProductChange"
+                    v-model="form.itemId" clearable />
                   <div v-else>请先选择材料类型</div>
                 </el-form-item>
               </el-col>
@@ -170,8 +172,10 @@
             <el-form-item label="钢卷号" prop="currentCoilNo">
               <el-input v-model="queryForm.currentCoilNo" placeholder="请输入钢卷号" />
             </el-form-item>
+
             <el-form-item>
-              <el-button type="primary" @click="getList">查询</el-button>
+              <el-checkbox v-model="validateBeforeReceipt" label="在签收前校验">在签收前校验</el-checkbox>
+              <el-button type="primary" @click="getList" style="margin-left: 10px;">查询</el-button>
             </el-form-item>
           </el-form>
 
@@ -249,7 +253,8 @@
       </el-form>
 
       <template slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="confirmReceipt" v-loading="buttonLoading">签收</el-button>
+        <el-checkbox v-model="validateBeforeReceipt" label="在签收前校验">在签收前校验</el-checkbox>
+        <el-button style="margin-left: 10px;" type="primary" @click="confirmReceipt" v-loading="buttonLoading">签收</el-button>
         <el-button @click="receiptModalVisible = false">取消</el-button>
       </template>
     </el-dialog>
@@ -259,7 +264,24 @@
       <label-render :content="labelRender.data" :labelType="labelRender.type" v-loading="labelRender.loading" />
     </el-dialog>
 
-    <label-render ref="labelRender" v-show="false" :content="labelRender.data" :labelType="labelRender.type" v-loading="labelRender.loading" />
+    <label-render ref="labelRender" v-show="false" :content="labelRender.data" :labelType="labelRender.type"
+      v-loading="labelRender.loading" />
+
+    <!-- 差异确认弹窗 -->
+    <el-dialog title="钢卷信息差异确认" :visible.sync="differenceModalVisible" width="50%" :close-on-click-modal="false">
+      <el-alert :title="differenceMessage" type="warning" :closable="false" show-icon>
+      </el-alert>
+      <el-table :data="differenceTableData" border style="margin-top: 20px;">
+        <el-table-column prop="field" label="字段" width="150"></el-table-column>
+        <el-table-column prop="frontendValue" label="实际值"></el-table-column>
+        <el-table-column prop="databaseValue" label="计划值"></el-table-column>
+      </el-table>
+      <template slot="footer" class="dialog-footer">
+        <el-button style="margin-left: 10px;" type="primary" @click="confirmDifference"
+          v-loading="buttonLoading">确认差异并强行收货</el-button>
+        <el-button @click="differenceModalVisible = false">取消收货</el-button>
+      </template>
+    </el-dialog>
 
     <el-dialog v-loading="editCoil.loading" title="入库钢卷信息编辑" :visible.sync="editCoil.dialogVisible" width="30%">
       <el-form ref="form" :model="editCoil.form" :rules="rules" label-width="100px">
@@ -366,9 +388,7 @@ import { listDeliveryPlan } from '@/api/wms/deliveryPlan'
 import handleCoil, { COIL_ACTIONS } from '../js/coilActions'
 import LabelRender from '../panels/LabelRender/index.vue'
 import CoilNo from "@/components/KLPService/Renderer/CoilNo.vue";
-import { delCoilWarehouseOperationLogByCoilId } from '@/api/wms/coilWarehouseOperationLog'
-
-// 键值为[400, 500), 不包含在字典中，但后续可以加入的特殊操作，这类操作录入后会立刻完成，例如入库（401）和发货（402）
+import { checkReceivePlan } from '@/api/wms/receivePlan'
 
 export default {
   components: {
@@ -455,20 +475,15 @@ export default {
         ],
         currentCoilNo: [
           { required: true, message: "当前钢卷号不能为空", trigger: "blur" },
-          // 远程校验，当前钢卷号不能重复
-          // {
-          //   validator: (rule, value, callback) => {
-          //     checkCoilNo({ currentCoilNo: value, coilId: this.form.coilId }).then(res => {
-          //       const { duplicateType } = res.data;
-          //       if (duplicateType === 'current' || duplicateType === 'both') {
-          //         // alert('当前钢卷号重复，请重新输入');
-          //         callback(new Error('当前钢卷号重复，请重新输入'));
-          //       } else {
-          //         callback();
-          //       }
-          //     })
-          //   }, trigger: 'blur'
-          // },
+          {
+            validator: (rule, value, callback) => {
+              if (!/^\d{8}$/.test(value)) {
+                callback(new Error('当前钢卷号必须是8位的阿拉伯数字'));
+              } else {
+                callback();
+              }
+            }, trigger: 'blur'
+          },
         ],
         supplierCoilNo: [
           { required: true, message: "厂家原料卷号不能为空", trigger: "blur" },
@@ -529,13 +544,21 @@ export default {
       },
       coilInfo: {},
       todayPlanId: null,
+      // 是否在签收前进行验证
+      validateBeforeReceipt: false,
       editCoil: {
         form: {
 
         },
         dialogVisible: false,
         loading: false,
-      }
+      },
+      // 差异确认相关数据
+      differenceModalVisible: false,
+      differenceMessage: '',
+      differenceTableData: [],
+      dbData: null,
+      checkResult: null
     }
   },
   mounted() {
@@ -693,20 +716,62 @@ export default {
       })
     },
     // 确认收货
-    confirmReceipt() {
+    async confirmReceipt() {
+      await this.$modal.confirm("确认收货后刚钢卷会进入库存并占用所选的实际库区,是否继续?")
       // 二次确认
-      this.$modal.confirm("收货后刚钢卷会进入库存并占用所选的实际库区,是否继续?").then(() => {
+      try {
         this.buttonLoading = true;
-        // 更新操作记录状态 actionStatus: 2
-        handleCoil(COIL_ACTIONS.STORE, this.coilInfo, this.receiptForm)
-          .then(_ => {
-            this.$message.success("确认收货成功");
-            this.getList()
-            this.receiptModalVisible = false;
-          }).finally(() => {
+        if (this.validateBeforeReceipt) {
+          // 先检验是否在代收卷中存在当前的信息
+          const res = await checkReceivePlan(this.coilInfo)
+          const { found, message, differences, dbData } = res.data
+          this.checkResult = res.data
+          if (!found) {
             this.buttonLoading = false;
-          });
-      })
+            this.$modal.msgError("钢卷不在代收计划中");
+            return;
+          }
+          // 检查是否有差异
+          if (differences && Object.keys(differences).length > 0) {
+            // 有差异，展示差异弹窗
+            this.differenceMessage = message || '钢卷信息存在差异，请确认后继续收货'
+            // 处理差异数据，转换为表格格式
+            this.differenceTableData = Object.entries(differences).map(([field, value]) => {
+              // 使用正则表达式提取前端值和数据库值
+              const regex = /前端值[：:]\s*(.+?)\s*[，,]\s*数据库值[：:]\s*(.+)/
+              const match = value.match(regex)
+              const frontendValue = match ? match[1] : ''
+              const databaseValue = match ? match[2] : ''
+              return { field, frontendValue, databaseValue }
+            })
+            this.dbData = dbData
+            this.buttonLoading = false
+            this.differenceModalVisible = true
+            return
+          }
+        }
+        // 没有差异或不需要校验，直接收货
+        this.doReceipt()
+      } catch (error) {
+        this.buttonLoading = false;
+      }
+    },
+    // 执行收货操作
+    doReceipt() {
+      this.buttonLoading = true;
+      handleCoil(COIL_ACTIONS.STORE, this.coilInfo, this.receiptForm)
+        .then(_ => {
+          this.$message.success("确认收货成功");
+          this.getList()
+          this.receiptModalVisible = false;
+          this.differenceModalVisible = false;
+        }).finally(() => {
+          this.buttonLoading = false;
+        });
+    },
+    // 确认差异并继续收货
+    confirmDifference() {
+      this.doReceipt()
     },
     handleReject(row) {
       this.$modal.confirm("确认拒签吗？", "拒签确认", {
@@ -812,14 +877,11 @@ export default {
       })
     },
     // 检查钢卷号是否合法（后端检查）
-    checkCoilNo() {
-      checkCoilNo({ currentCoilNo: this.form.currentCoilNo, entryCoilNo: this.form.enterCoilNo }).then(res => {
-        console.log(res)
-        // if (res.data) {
-        //   this.$modal.msgError("钢卷号已存在");
-        // }
-      })
-    },
+    // checkCoilNo() {
+    //   checkCoilNo({ currentCoilNo: this.form.currentCoilNo, entryCoilNo: this.form.enterCoilNo }).then(res => {
+    //     console.log(res)
+    //   })
+    // },
     // 取消操作
     cancel() {
       this.form = {};
diff --git a/klp-ui/src/views/wms/receive/plan/index.vue b/klp-ui/src/views/wms/receive/plan/index.vue
index e01de7df..fef0361b 100644
--- a/klp-ui/src/views/wms/receive/plan/index.vue
+++ b/klp-ui/src/views/wms/receive/plan/index.vue
@@ -60,6 +60,8 @@
           </div>
           <div class="card-actions">
             <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(row)">修改</el-button>
+            <el-button size="mini" type="text" icon="el-icon-upload2" @click="openImportDialog(row)">导入</el-button>
+            <el-button size="mini" type="text" icon="el-icon-notebook-2" @click="openDetailDialog(row)">明细</el-button>
             <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(row)">删除</el-button>
           </div>
         </el-card>
@@ -89,37 +91,338 @@
         <el-button @click="cancel">取 消</el-button>
       </div>
     </el-dialog>
+
+    <!-- 待收货明细管理对话框 -->
+    <el-dialog title="待收货明细管理" :visible.sync="detailOpen" width="1400px" append-to-body @close="resetDetail">
+      <el-tabs v-model="activeTab" @tab-click="handleTabClick">
+        <el-tab-pane label="计划入库" name="plan">
+          <el-row :gutter="10" class="mb8">
+            <el-col :span="1.5">
+              <el-button type="primary" plain icon="el-icon-plus" size="mini"
+                @click="openDetailAddDialog">新增</el-button>
+            </el-col>
+          </el-row>
+          <el-table v-loading="detailLoading" :data="detailList" border>
+            <el-table-column type="selection" width="55" />
+            <el-table-column prop="warehouseArea" label="逻辑库区" width="120" />
+            <el-table-column prop="lotNo" label="入场卷号" width="120" />
+            <el-table-column prop="supplierLotNo" label="厂家卷号" width="120" />
+            <el-table-column prop="productLotNo" label="成品卷号" width="120" />
+            <el-table-column prop="productionDate" label="生产/发货日期" width="150">
+              <template slot-scope="scope">
+                {{ parseTime(scope.row.productionDate, '{y}-{m}-{d}') }}
+              </template>
+            </el-table-column>
+            <el-table-column prop="weight" label="重量(kg)" width="100" />
+            <el-table-column prop="goodsName" label="名称" width="120" />
+            <el-table-column prop="spec" label="规格" width="120" />
+            <el-table-column prop="length" label="长度(mm)" width="100" />
+            <el-table-column prop="materialType" label="材质" width="100" />
+            <el-table-column prop="manufacturer" label="生产厂家" width="120" />
+            <el-table-column prop="surfaceTreatment" label="表面处理" width="100" />
+            <el-table-column prop="zincCoating" label="锌层" width="80" />
+            <el-table-column prop="teamGroup" label="班组" width="100" />
+            <el-table-column prop="temperRolling" label="调制度" width="100" />
+            <el-table-column prop="coatingType" label="镀层种类" width="100" />
+            <el-table-column prop="goodsType" label="类型" width="100" />
+            <el-table-column prop="receiveStatus" label="状态" width="80">
+              <template slot-scope="scope">
+                <el-tag
+                  :type="scope.row.receiveStatus === '0' ? 'info' : scope.row.receiveStatus === '1' ? 'success' : 'danger'">
+                  {{ scope.row.receiveStatus === '0' ? '待收货' : scope.row.receiveStatus === '1' ? '已收货' : '异常' }}
+                </el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column label="操作" fixed="right">
+              <template slot-scope="scope">
+                <el-button size="mini" type="text" @click="openDetailEditDialog(scope.row)">修改</el-button>
+                <el-button size="mini" type="text" class="btn-danger"
+                  @click="handleDetailDelete(scope.row)">删除</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+          <pagination v-show="detailTotal > 0" :total="detailTotal" :page.sync="detailQueryParams.pageNum"
+            :limit.sync="detailQueryParams.pageSize" @pagination="getDetailList" />
+        </el-tab-pane>
+        <el-tab-pane label="实际入库表格" name="actual">
+          <el-table v-loading="actualLoading" :data="actualList" border>
+            <el-table-column prop="enterCoilNo" label="入场卷号" />
+            <el-table-column prop="currentCoilNo" label="成品卷号" />
+            <el-table-column prop="itemName" label="名称" width="120" />
+            <el-table-column prop="specification" label="规格" width="120" />
+            <el-table-column prop="materialType" label="材质" width="100" />
+            <el-table-column prop="netWeight" label="重量(kg)" width="100" />
+            <el-table-column prop="manufacturer" label="生产厂家" width="120" />
+            <el-table-column prop="zincLayer" label="锌层" width="80" />
+            <el-table-column prop="warehouseName" label="库区" width="100" />
+            <el-table-column prop="qualityStatus" label="质量状态" width="100" />
+            <el-table-column prop="createTime" label="入库时间">
+              <template slot-scope="scope">
+                {{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-tab-pane>
+        <el-tab-pane label="差异对比" name="diff">
+          <el-row :gutter="16" class="diff-row">
+            <el-col :span="12">
+              <div class="diff-section">
+                <div class="section-header">
+                  <span class="section-icon missing-icon">●</span>
+                  <span class="section-title">计划有实际无（少收）</span>
+                  <span class="section-count">{{ missingCoils.length }}</span>
+                </div>
+                <el-table v-loading="diffLoading" height="300" :data="missingCoils" border size="small" class="diff-table">
+                  <el-table-column prop="lotNo" label="入场卷号" />
+                  <el-table-column prop="goodsName" label="名称" width="100" />
+                  <el-table-column prop="spec" label="规格" width="100" />
+                  <el-table-column prop="materialType" label="材质" width="80" />
+                  <el-table-column prop="weight" label="重量(kg)" width="90" />
+                </el-table>
+                <div v-if="missingCoils.length === 0" class="empty-tip">暂无少收卷</div>
+              </div>
+            </el-col>
+            <el-col :span="12">
+              <div class="diff-section">
+                <div class="section-header">
+                  <span class="section-icon extra-icon">●</span>
+                  <span class="section-title">实际有计划无（多收）</span>
+                  <span class="section-count">{{ extraCoils.length }}</span>
+                </div>
+                <el-table v-loading="diffLoading" height="300" :data="extraCoils" border size="small" class="diff-table">
+                  <el-table-column prop="enterCoilNo" label="入场卷号" />
+                  <el-table-column prop="itemName" label="名称" width="100" />
+                  <el-table-column prop="specification" label="规格" width="100" />
+                  <el-table-column prop="materialType" label="材质" width="80" />
+                  <el-table-column prop="netWeight" label="重量(kg)" width="90" />
+                </el-table>
+                <div v-if="extraCoils.length === 0" class="empty-tip">暂无多收卷</div>
+              </div>
+            </el-col>
+          </el-row>
+          
+          <div class="diff-section">
+            <div class="section-header">
+              <span class="section-icon diff-icon">●</span>
+              <span class="section-title">字段不一致</span>
+              <span class="section-count">{{ diffCoils.length }}</span>
+            </div>
+            <el-table v-loading="diffLoading" height="300" :data="diffCoils" border size="small" class="diff-table">
+              <el-table-column prop="lotNo" label="入场卷号" width="120" />
+              <el-table-column label="字段差异" min-width="500">
+                <template #default="scope">
+                  <div class="diff-content">
+                    <div v-for="(diff, index) in scope.row.diffs" :key="index" class="diff-item">
+                      <span class="field-label">{{ diff.fieldName }}</span>
+                      <div class="value-row">
+                        <span class="value-label">计划:</span>
+                        <span class="plan-value">{{ diff.planValue }}</span>
+                      </div>
+                      <div class="value-row">
+                        <span class="value-label">实际:</span>
+                        <span class="actual-value">{{ diff.actualValue }}</span>
+                      </div>
+                    </div>
+                  </div>
+                </template>
+              </el-table-column>
+            </el-table>
+            <div v-if="diffCoils.length === 0" class="empty-tip">暂无字段不一致的卷</div>
+          </div>
+        </el-tab-pane>
+      </el-tabs>
+    </el-dialog>
+
+    <!-- 添加或修改待收货明细对话框 -->
+    <el-dialog :title="detailFormTitle" :visible.sync="detailFormOpen" width="600px" append-to-body
+      @close="resetDetailForm">
+      <el-form ref="detailForm" :model="detailForm" :rules="detailRules" label-width="100px">
+        <el-form-item label="逻辑库区" prop="warehouseArea">
+          <el-input v-model="detailForm.warehouseArea" placeholder="请输入逻辑库区" />
+        </el-form-item>
+        <el-form-item label="入场卷号" prop="lotNo">
+          <el-input v-model="detailForm.lotNo" placeholder="请输入入场卷号" />
+        </el-form-item>
+        <el-form-item label="厂家卷号" prop="supplierLotNo">
+          <el-input v-model="detailForm.supplierLotNo" placeholder="请输入厂家卷号" />
+        </el-form-item>
+        <el-form-item label="成品卷号" prop="productLotNo">
+          <el-input v-model="detailForm.productLotNo" placeholder="请输入成品卷号" />
+        </el-form-item>
+        <el-form-item label="生产/发货日期" prop="productionDate">
+          <el-date-picker clearable v-model="detailForm.productionDate" type="date" value-format="yyyy-MM-dd"
+            placeholder="请选择生产/发货日期" style="width: 100%;">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="重量(kg)" prop="weight">
+          <el-input-number v-model="detailForm.weight" :precision="2" :step="0.01" style="width: 100%;" />
+        </el-form-item>
+        <el-form-item label="名称" prop="goodsName">
+          <el-input v-model="detailForm.goodsName" placeholder="请输入名称" />
+        </el-form-item>
+        <el-form-item label="规格" prop="spec">
+          <el-input v-model="detailForm.spec" placeholder="请输入规格" />
+        </el-form-item>
+        <el-form-item label="长度(mm)" prop="length">
+          <el-input-number v-model="detailForm.length" :precision="2" :step="0.01" style="width: 100%;" />
+        </el-form-item>
+        <el-form-item label="材质" prop="materialType">
+          <el-input v-model="detailForm.materialType" placeholder="请输入材质" />
+        </el-form-item>
+        <el-form-item label="生产厂家" prop="manufacturer">
+          <el-input v-model="detailForm.manufacturer" placeholder="请输入生产厂家" />
+        </el-form-item>
+        <el-form-item label="表面处理" prop="surfaceTreatment">
+          <el-input v-model="detailForm.surfaceTreatment" placeholder="请输入表面处理" />
+        </el-form-item>
+        <el-form-item label="锌层" prop="zincCoating">
+          <el-input v-model="detailForm.zincCoating" placeholder="请输入锌层" />
+        </el-form-item>
+        <el-form-item label="班组" prop="teamGroup">
+          <el-input v-model="detailForm.teamGroup" placeholder="请输入班组" />
+        </el-form-item>
+        <el-form-item label="调制度" prop="temperRolling">
+          <el-input v-model="detailForm.temperRolling" placeholder="请输入调制度" />
+        </el-form-item>
+        <el-form-item label="镀层种类" prop="coatingType">
+          <el-input v-model="detailForm.coatingType" placeholder="请输入镀层种类" />
+        </el-form-item>
+        <el-form-item label="类型" prop="goodsType">
+          <el-input v-model="detailForm.goodsType" placeholder="请输入类型" />
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="detailForm.remark" type="textarea" placeholder="请输入备注" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button :loading="detailButtonLoading" type="primary" @click="submitDetailForm">确 定</el-button>
+        <el-button @click="detailFormOpen = false">取 消</el-button>
+      </div>
+    </el-dialog>
+
+    <!-- 待收货明细导入对话框 -->
+    <el-dialog title="待收货明细导入" :visible.sync="importOpen" width="1000px" append-to-body>
+      <div class="import-container">
+        <div class="file-upload-area" :class="{ disabled: importStatus === 'processing' }">
+          <el-upload ref="upload" class="upload-excel" action="" :auto-upload="false" :show-file-list="false"
+            :on-change="handleFileChange" accept=".xlsx,.xls"
+            :disabled="importStatus === 'processing' || validateLoading || importLoading">
+            <el-button type="primary" icon="el-icon-upload2">选择Excel文件</el-button>
+          </el-upload>
+
+          <el-button type="success" icon="el-icon-check" @click="handleValidate" v-if="file && importStatus === 'idle'"
+            :disabled="!file || validateLoading" :loading="validateLoading">
+            校验数据
+          </el-button>
+          <el-button type="warning" icon="el-icon-circle-check" @click="startImport"
+            v-if="file && importStatus === 'idle'"
+            :disabled="!file || !isValidated || errorList.length > 0 || importLoading" :loading="importLoading">
+            开始导入
+          </el-button>
+          <el-button type="default" icon="el-icon-refresh" @click="resetImport"
+            :disabled="importStatus === 'processing' || validateLoading || importLoading">
+            重置
+          </el-button>
+        </div>
+
+        <div class="template-download">
+          <el-link type="primary" icon="el-icon-download" @click="downloadTemplate">下载导入模板</el-link>
+          <span class="template-tip">请按照模板格式填写数据</span>
+        </div>
+
+        <div v-if="errorList.length > 0" class="error-list">
+          <el-alert title="数据校验失败" type="error" :description="`共发现${errorList.length}条错误，请修正后重新导入`" show-icon />
+          <el-table :data="errorList" border size="small" max-height="200">
+            <el-table-column prop="rowNum" label="行号" width="80" />
+            <el-table-column prop="errorMsg" label="错误信息" />
+          </el-table>
+        </div>
+
+        <div v-if="tableData.length > 0 && importStatus === 'idle'" class="data-preview">
+          <el-alert title="数据预览" type="info" :description="`共解析出 ${tableData.length} 条有效数据`" show-icon
+            :closable="false" />
+          <el-table :data="tableData" border size="small" max-height="300" stripe>
+            <el-table-column prop="warehouseArea" label="逻辑库区" width="100" />
+            <el-table-column prop="lotNo" label="入场卷号" width="100" />
+            <el-table-column prop="supplierLotNo" label="厂家卷号" width="100" />
+            <el-table-column prop="productLotNo" label="成品卷号" width="100" />
+            <el-table-column prop="productionDate" label="生产/发货日期" width="120" />
+            <el-table-column prop="weight" label="重量(kg)" width="100" />
+            <el-table-column prop="goodsName" label="名称" width="120" />
+            <el-table-column prop="spec" label="规格" width="100" />
+            <el-table-column prop="length" label="长度(mm)" width="100" />
+            <el-table-column prop="materialType" label="材质" width="100" />
+            <el-table-column prop="manufacturer" label="生产厂家" width="120" />
+          </el-table>
+        </div>
+
+        <div v-if="importStatus === 'processing'" class="import-progress">
+          <el-alert title="正在导入数据" type="warning" :description="`当前进度：${progress}%`" show-icon :closable="false" />
+          <el-progress :percentage="progress" status="success" />
+          <p class="progress-tip">已导入 {{ importedCount }} / {{ totalCount }} 条数据</p>
+        </div>
+
+        <div v-if="importStatus === 'finished'" class="import-finished">
+          <el-alert title="导入完成" type="success" :description="`共成功导入 ${importedCount} 条数据，总计 ${totalCount} 条`"
+            show-icon />
+        </div>
+
+        <div v-if="importStatus === 'error'" class="import-error">
+          <el-alert title="导入失败" type="error" :description="importErrorMsg" show-icon />
+        </div>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
+import * as XLSX from 'xlsx';
 import { listDeliveryPlan, getDeliveryPlan, delDeliveryPlan, addDeliveryPlan, updateDeliveryPlan } from "@/api/wms/deliveryPlan";
+import { listReceivePlan, getReceivePlan, delReceivePlan, addReceivePlan, updateReceivePlan, checkReceivePlan } from "@/api/wms/receivePlan";
+import { listCoilWithIds } from "@/api/wms/coil";
+import { listPendingAction } from "@/api/wms/pendingAction";
+
+const TEMPLATE_HEADERS = [
+  '逻辑库区', '入场卷号', '厂家卷号', '成品卷号', '生产/发货日期', '重量(kg)',
+  '名称', '规格', '长度(mm)', '材质', '生产厂家', '表面处理', '锌层',
+  '班组', '调制度', '镀层种类', '类型', '备注'
+];
+
+const HEADER_MAP = {
+  '逻辑库区': 'warehouseArea',
+  '入场卷号': 'lotNo',
+  '厂家卷号': 'supplierLotNo',
+  '成品卷号': 'productLotNo',
+  '生产/发货日期': 'productionDate',
+  '重量(kg)': 'weight',
+  '名称': 'goodsName',
+  '规格': 'spec',
+  '长度(mm)': 'length',
+  '材质': 'materialType',
+  '生产厂家': 'manufacturer',
+  '表面处理': 'surfaceTreatment',
+  '锌层': 'zincCoating',
+  '班组': 'teamGroup',
+  '调制度': 'temperRolling',
+  '镀层种类': 'coatingType',
+  '类型': 'goodsType',
+  '备注': 'remark'
+};
 
 export default {
   name: "DeliveryPlan",
   data() {
     return {
-      // 按钮loading
       buttonLoading: false,
-      // 遮罩层
       loading: true,
-      // 选中数组
       ids: [],
-      // 非单个禁用
       single: true,
-      // 非多个禁用
       multiple: true,
-      // 显示搜索条件
       showSearch: true,
-      // 总条数
       total: 0,
-      // 收货计划表格数据
       deliveryPlanList: [],
-      // 弹出层标题
       title: "",
-      // 是否显示弹出层
       open: false,
-      // 查询参数
       queryParams: {
         pageNum: 1,
         pageSize: 10,
@@ -127,21 +430,57 @@ export default {
         planDate: undefined,
         planType: 1
       },
-      // 表单参数
       form: {
         planName: '',
         planDate: '',
       },
-      // 表单校验
-      rules: {
-      }
+      rules: {},
+
+      detailOpen: false,
+      detailLoading: false,
+      detailList: [],
+      detailTotal: 0,
+      currentPlanId: null,
+      detailQueryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        planId: null
+      },
+      detailFormOpen: false,
+      detailFormTitle: '',
+      detailButtonLoading: false,
+      detailForm: {},
+      detailRules: {
+        lotNo: [{ required: true, message: '入场卷号不能为空', trigger: 'blur' }]
+      },
+
+      activeTab: 'plan',
+      actualLoading: false,
+      actualList: [],
+      diffLoading: false,
+      missingCoils: [],
+      extraCoils: [],
+      diffCoils: [],
+
+      importOpen: false,
+      file: null,
+      rawData: [],
+      tableData: [],
+      errorList: [],
+      isValidated: false,
+      progress: 0,
+      importedCount: 0,
+      totalCount: 0,
+      importStatus: 'idle',
+      importErrorMsg: '',
+      validateLoading: false,
+      importLoading: false
     };
   },
   created() {
     this.getList();
   },
   methods: {
-    /** 查询收货计划列表 */
     getList() {
       this.loading = true;
       listDeliveryPlan(this.queryParams).then(response => {
@@ -151,18 +490,15 @@ export default {
         }));
         this.total = response.total;
         this.loading = false;
-        // 重置选择状态
         this.ids = [];
         this.single = true;
         this.multiple = true;
       });
     },
-    // 取消按钮
     cancel() {
       this.open = false;
       this.reset();
     },
-    // 表单重置
     reset() {
       this.form = {
         planId: undefined,
@@ -178,41 +514,30 @@ export default {
       };
       this.resetForm("form");
     },
-    /** 搜索按钮操作 */
     handleQuery() {
       this.queryParams.pageNum = 1;
       this.getList();
     },
-    /** 重置按钮操作 */
     resetQuery() {
       this.resetForm("queryForm");
       this.handleQuery();
     },
-    // 卡片选择处理
     handleCardSelectionChange(row) {
-      // 重新计算选中的ID数组
       this.ids = this.deliveryPlanList.filter(item => item.selected).map(item => item.planId);
       this.single = this.ids.length !== 1;
       this.multiple = !this.ids.length;
     },
-    /** 新增按钮操作 */
     handleAdd() {
-      // this.reset();
-      // 默认选中今天的日期和时间, 格式化未yyyy-MM-dd HH:mm:ss
-      this.form.planDate = new Date().toLocaleString().substring(0, 19).replace(/\//g, '-').replace('T', ' ')
-      console.log(this.form.planDate, 'this.form.planDate')
-      // 收货计划名称格式为年-月-日命名
-      this.form.planName = new Date().toLocaleDateString().replace(/\//g, '-') + '收货计划'
-      // 计划类型为收货计划
-      this.form.planType = 1
+      this.form.planDate = new Date().toLocaleString().substring(0, 19).replace(/\//g, '-').replace('T', ' ');
+      this.form.planName = new Date().toLocaleDateString().replace(/\//g, '-') + '收货计划';
+      this.form.planType = 1;
       this.open = true;
       this.title = "添加收货计划";
     },
-    /** 修改按钮操作 */
     handleUpdate(row) {
       this.loading = true;
       this.reset();
-      const planId = row.planId || this.ids
+      const planId = row.planId || this.ids[0];
       getDeliveryPlan(planId).then(response => {
         this.loading = false;
         this.form = response.data;
@@ -220,7 +545,6 @@ export default {
         this.title = "修改收货计划";
       });
     },
-    /** 提交按钮 */
     submitForm() {
       this.$refs["form"].validate(valid => {
         if (valid) {
@@ -245,7 +569,6 @@ export default {
         }
       });
     },
-    /** 删除按钮操作 */
     handleDelete(row) {
       const planIds = row.planId || this.ids;
       this.$modal.confirm('是否确认删除收货计划编号为"' + planIds + '"的数据项？').then(() => {
@@ -260,11 +583,436 @@ export default {
         this.loading = false;
       });
     },
-    /** 导出按钮操作 */
     handleExport() {
       this.download('wms/deliveryPlan/export', {
         ...this.queryParams
-      }, `deliveryPlan_${new Date().getTime()}.xlsx`)
+      }, `deliveryPlan_${new Date().getTime()}.xlsx`);
+    },
+
+    openDetailDialog(row) {
+      this.currentPlanId = row.planId;
+      this.detailQueryParams.planId = row.planId;
+      this.detailOpen = true;
+      this.getDetailList();
+    },
+    resetDetail() {
+      this.detailList = [];
+      this.currentPlanId = null;
+      this.activeTab = 'plan';
+      this.actualList = [];
+      this.missingCoils = [];
+      this.extraCoils = [];
+      this.diffCoils = [];
+    },
+    handleTabClick(tab) {
+      if (tab.name === 'actual' && this.actualList.length === 0) {
+        this.getActualList();
+      } else if (tab.name === 'diff' && (this.missingCoils.length === 0 && this.extraCoils.length === 0 && this.diffCoils.length === 0)) {
+        this.calculateDiff();
+      }
+    },
+    getActualList() {
+      this.actualLoading = true;
+      listPendingAction({
+        warehouseId: this.currentPlanId,
+        actionType: 401,
+        pageSize: 99999,
+        pageNum: 1,
+      }).then(response => {
+        const coilIds = response.rows.map(item => item.coilId).join(',');
+        listCoilWithIds({ coilIds }).then(actualRes => {
+          this.actualList = actualRes.rows;
+          this.actualLoading = false;
+        });
+      }).catch(() => {
+        this.actualLoading = false;
+      });
+    },
+    calculateDiff() {
+      this.diffLoading = true;
+      Promise.all([
+        listReceivePlan({ pageNum: 1, pageSize: 1000, planId: this.currentPlanId }),
+        listPendingAction({
+          warehouseId: this.currentPlanId,
+          actionType: 401,
+          pageSize: 99999,
+          pageNum: 1,
+        }).then(response => {
+          const coilIds = response.rows.map(item => item.coilId).join(',');
+          return listCoilWithIds({ coilIds }).then(actualRes => {
+            this.actualLoading = false;
+            return actualRes;
+          });
+        })
+      ]).then(([planRes, actualRes]) => {
+        const planList = planRes.rows;
+        const actualList = actualRes.rows;
+
+        const planLotNoMap = new Map();
+        planList.forEach(item => {
+          planLotNoMap.set(item.lotNo, item);
+        });
+
+        const actualLotNoMap = new Map();
+        actualList.forEach(item => {
+          actualLotNoMap.set(item.enterCoilNo, item);
+        });
+
+        this.missingCoils = planList.filter(item => !actualLotNoMap.has(item.lotNo));
+
+        this.extraCoils = actualList.filter(item => !planLotNoMap.has(item.enterCoilNo));
+
+        this.diffCoils = [];
+        const compareFields = [
+          { planField: 'goodsName', actualField: 'itemName', fieldName: '名称' },
+          { planField: 'spec', actualField: 'specification', fieldName: '规格' },
+          { planField: 'materialType', actualField: 'materialType', fieldName: '材质' },
+          { planField: 'weight', actualField: 'netWeight', fieldName: '重量' },
+          { planField: 'manufacturer', actualField: 'manufacturer', fieldName: '生产厂家' },
+          { planField: 'zincCoating', actualField: 'zincLayer', fieldName: '锌层' }
+        ];
+
+        const diffMap = new Map();
+        planList.forEach(planItem => {
+          const actualItem = actualLotNoMap.get(planItem.lotNo);
+          if (actualItem) {
+            const diffs = [];
+            compareFields.forEach(field => {
+              const planValue = String(planItem[field.planField] || '');
+              const actualValue = String(actualItem[field.actualField] || '');
+              if (planValue !== actualValue) {
+                diffs.push({
+                  fieldName: field.fieldName,
+                  planValue,
+                  actualValue
+                });
+              }
+            });
+            if (diffs.length > 0) {
+              diffMap.set(planItem.lotNo, {
+                lotNo: planItem.lotNo,
+                diffs
+              });
+            }
+          }
+        });
+        this.diffCoils = Array.from(diffMap.values());
+
+        this.diffLoading = false;
+      }).catch(() => {
+        this.diffLoading = false;
+      });
+    },
+    getDetailList() {
+      this.detailLoading = true;
+      listReceivePlan(this.detailQueryParams).then(response => {
+        this.detailList = response.rows;
+        this.detailTotal = response.total;
+        this.detailLoading = false;
+      });
+    },
+    openDetailAddDialog() {
+      this.detailForm = {
+        planId: this.currentPlanId,
+        receiveStatus: '0'
+      };
+      this.detailFormTitle = '新增待收货明细';
+      this.detailFormOpen = true;
+      this.$nextTick(() => {
+        this.$refs.detailForm && this.$refs.detailForm.clearValidate();
+      });
+    },
+    openDetailEditDialog(row) {
+      this.detailForm = { ...row };
+      this.detailFormTitle = '修改待收货明细';
+      this.detailFormOpen = true;
+      this.$nextTick(() => {
+        this.$refs.detailForm && this.$refs.detailForm.clearValidate();
+      });
+    },
+    resetDetailForm() {
+      this.detailForm = {};
+    },
+    submitDetailForm() {
+      this.$refs.detailForm.validate(valid => {
+        if (valid) {
+          this.detailButtonLoading = true;
+          if (this.detailForm.receiveId != null) {
+            updateReceivePlan(this.detailForm).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.detailFormOpen = false;
+              this.getDetailList();
+            }).finally(() => {
+              this.detailButtonLoading = false;
+            });
+          } else {
+            addReceivePlan(this.detailForm).then(response => {
+              this.$modal.msgSuccess("新增成功");
+              this.detailFormOpen = false;
+              this.getDetailList();
+            }).finally(() => {
+              this.detailButtonLoading = false;
+            });
+          }
+        }
+      });
+    },
+    handleDetailDelete(row) {
+      this.$modal.confirm('是否确认删除该待收货明细？').then(() => {
+        return delReceivePlan(row.receiveId);
+      }).then(() => {
+        this.getDetailList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => { });
+    },
+
+    openImportDialog(row) {
+      this.currentPlanId = row.planId;
+      this.importOpen = true;
+    },
+    handleFileChange(file) {
+      if (this.validateLoading || this.importLoading || this.importStatus === 'processing') {
+        this.$message.warning('当前有操作正在进行中，请完成后再选择新文件');
+        return;
+      }
+      this.file = file.raw;
+      this.isValidated = false;
+      this.readExcel();
+    },
+    async readExcel() {
+      if (!this.file) return;
+      try {
+        const fileReader = new FileReader();
+        fileReader.readAsArrayBuffer(this.file);
+        fileReader.onload = async (e) => {
+          try {
+            const data = new Uint8Array(e.target.result);
+            const workbook = XLSX.read(data, { type: 'array' });
+            const sheetName = workbook.SheetNames[0];
+            const worksheet = workbook.Sheets[sheetName];
+            const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
+            this.validateHeaders(jsonData[0]);
+            this.rawData = jsonData.slice(1).filter(row => row.length > 0);
+            this.formatExcel();
+            this.$message.success(`成功解析Excel，共读取到 ${this.rawData.length} 条数据`);
+          } catch (error) {
+            this.handleError(`解析Excel失败：${error.message}`);
+          }
+        };
+      } catch (error) {
+        this.handleError(`读取文件失败：${error.message}`);
+      }
+    },
+    validateHeaders(headers) {
+      this.errorList = [];
+      if (!headers || headers.length < TEMPLATE_HEADERS.length) {
+        this.errorList.push({
+          rowNum: 1,
+          errorMsg: `表头数量不匹配，要求至少${TEMPLATE_HEADERS.length}列`
+        });
+        return;
+      }
+      TEMPLATE_HEADERS.forEach((header, index) => {
+        if (headers[index] !== header) {
+          this.errorList.push({
+            rowNum: 1,
+            errorMsg: `第${index + 1}列表头错误，要求："${header}"，实际："${headers[index] || ''}"`
+          });
+        }
+      });
+      if (this.errorList.length > 0) {
+        this.$message.error('Excel表头格式不符合要求，请检查！');
+      }
+    },
+    async handleValidate() {
+      if (this.validateLoading) {
+        this.$message.warning('正在校验数据，请稍候...');
+        return;
+      }
+      if (!this.file) {
+        this.$message.warning('请先选择Excel文件');
+        return;
+      }
+      this.isValidated = true;
+      if (this.rawData.length === 0) {
+        this.$message.warning('暂无数据可校验');
+        return;
+      }
+      this.validateLoading = true;
+      this.errorList = [];
+      try {
+        for (let i = 0; i < this.rawData.length; i++) {
+          const row = this.rawData[i];
+          const rowNum = i + 2;
+          const rowObj = this.formatRowData(row, rowNum);
+          if (!rowObj.lotNo || rowObj.lotNo.trim() === '') {
+            this.errorList.push({ rowNum, errorMsg: '入场卷号不能为空' });
+          }
+          if (rowObj.weight && isNaN(Number(rowObj.weight))) {
+            this.errorList.push({ rowNum, errorMsg: '重量必须是数字' });
+          }
+          if (rowObj.length && isNaN(Number(rowObj.length))) {
+            this.errorList.push({ rowNum, errorMsg: '长度必须是数字' });
+          }
+        }
+        if (this.errorList.length > 0) {
+          this.$message.error(`数据校验失败，共发现${this.errorList.length}条错误`);
+        } else {
+          this.$message.success('数据校验通过，可以开始导入');
+        }
+      } catch (error) {
+        this.handleError(`校验数据时发生错误：${error.message}`);
+      } finally {
+        this.validateLoading = false;
+      }
+    },
+    formatExcel() {
+      this.tableData = [];
+      if (this.rawData.length === 0) return;
+      this.rawData.forEach((row, index) => {
+        const rowNum = index + 2;
+        const rowObj = this.formatRowData(row, rowNum);
+        this.tableData.push(rowObj);
+      });
+    },
+    formatRowData(row, rowNum) {
+      const rowObj = {};
+      TEMPLATE_HEADERS.forEach((header, index) => {
+        const field = HEADER_MAP[header];
+        rowObj[field] = row[index] != null ? row[index].toString().trim() : '';
+      });
+      rowObj.rowNum = rowNum;
+      return rowObj;
+    },
+    async startImport() {
+      if (this.importLoading) {
+        this.$message.warning('正在导入数据，请勿重复操作...');
+        return;
+      }
+      if (!this.file || this.tableData.length === 0) {
+        this.$message.warning('暂无数据可导入');
+        return;
+      }
+      const confirm = await this.$confirm(
+        '确认导入已校验通过的数据？导入过程中请勿刷新页面或关闭浏览器！',
+        '导入确认',
+        {
+          confirmButtonText: '确认导入',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }
+      ).catch(() => false);
+      if (!confirm) return;
+      this.importLoading = true;
+      this.importStatus = 'processing';
+      this.progress = 0;
+      this.importedCount = 0;
+      this.totalCount = this.tableData.length;
+      this.importErrorMsg = '';
+      try {
+        await this.batchImport();
+        this.importStatus = 'finished';
+        this.$message.success(`导入完成！共成功导入${this.importedCount}条数据`);
+      } catch (error) {
+        this.handleError(`导入失败：${error.message}，已导入${this.importedCount}条数据`);
+      } finally {
+        this.importLoading = false;
+      }
+    },
+    async batchImport() {
+      for (let i = 0; i < this.tableData.length; i++) {
+        if (this.importStatus === 'error') break;
+        const row = this.tableData[i];
+        try {
+          await this.importOneRow(row);
+          this.importedCount++;
+          const currentProgress = Math.round(((i + 1) / this.totalCount) * 100);
+          this.progress = currentProgress;
+          await new Promise(resolve => setTimeout(resolve, 50));
+        } catch (error) {
+          throw new Error(`第${row.rowNum}行导入失败：${error.message}`);
+        }
+      }
+    },
+    async importOneRow(row) {
+      const params = {
+        planId: this.currentPlanId,
+        warehouseArea: row.warehouseArea,
+        lotNo: row.lotNo,
+        supplierLotNo: row.supplierLotNo,
+        productLotNo: row.productLotNo,
+        productionDate: row.productionDate,
+        weight: row.weight ? Number(row.weight) : null,
+        receiveStatus: '0',
+        goodsName: row.goodsName,
+        spec: row.spec,
+        length: row.length ? Number(row.length) : null,
+        materialType: row.materialType,
+        manufacturer: row.manufacturer,
+        surfaceTreatment: row.surfaceTreatment,
+        zincCoating: row.zincCoating,
+        teamGroup: row.teamGroup,
+        temperRolling: row.temperRolling,
+        coatingType: row.coatingType,
+        goodsType: row.goodsType,
+        remark: row.remark
+      };
+      const res = await addReceivePlan(params);
+      if (res.code !== 200) {
+        throw new Error(res.msg || '接口返回异常');
+      }
+    },
+    resetImport() {
+      if (this.validateLoading || this.importLoading || this.importStatus === 'processing') {
+        this.$message.warning('当前有操作正在进行中，无法重置');
+        return;
+      }
+      if (this.file || this.tableData.length > 0 || this.errorList.length > 0) {
+        const confirm = this.$confirm(
+          '确认重置所有状态？已选择的文件、解析的数据和校验结果将被清空！',
+          '重置确认',
+          {
+            confirmButtonText: '确认重置',
+            cancelButtonText: '取消',
+            type: 'info'
+          }
+        ).catch(() => false);
+        if (!confirm) return;
+      }
+      this.file = null;
+      this.rawData = [];
+      this.tableData = [];
+      this.errorList = [];
+      this.isValidated = false;
+      this.progress = 0;
+      this.importedCount = 0;
+      this.totalCount = 0;
+      this.importStatus = 'idle';
+      this.importErrorMsg = '';
+      this.$refs.upload?.clearFiles();
+      this.$message.success('已重置所有状态');
+    },
+    downloadTemplate() {
+      const templateData = [
+        TEMPLATE_HEADERS,
+        ['A库区', 'LOT001', 'SUP001', 'PROD001', '2024-01-01', 1000.50, '钢板', '1.0*1000', 2000, 'Q235', '宝钢', '镀锌', '80', '甲班', '1.5', 'GI', '原材料', '示例备注']
+      ];
+      const wb = XLSX.utils.book_new();
+      const ws = XLSX.utils.aoa_to_sheet(templateData);
+      ws['!cols'] = [
+        { wch: 12 }, { wch: 12 }, { wch: 12 }, { wch: 12 }, { wch: 15 }, { wch: 12 },
+        { wch: 15 }, { wch: 12 }, { wch: 12 }, { wch: 12 }, { wch: 15 }, { wch: 12 },
+        { wch: 10 }, { wch: 10 }, { wch: 10 }, { wch: 12 }, { wch: 10 }, { wch: 15 }
+      ];
+      XLSX.utils.book_append_sheet(wb, ws, '导入模板');
+      XLSX.writeFile(wb, '待收货明细导入模板.xlsx');
+    },
+    handleError(message) {
+      this.$message.error(message);
+      this.importStatus = 'error';
+      this.importErrorMsg = message;
+      this.validateLoading = false;
+      this.importLoading = false;
     }
   }
 };
@@ -315,4 +1063,154 @@ export default {
   justify-content: flex-end;
   gap: 10px;
 }
+
+.btn-danger {
+  color: #f56c6c;
+}
+
+.import-container {
+  padding: 20px;
+}
+
+.file-upload-area {
+  margin-bottom: 20px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.file-upload-area.disabled {
+  opacity: 0.6;
+  pointer-events: none;
+}
+
+.template-download {
+  margin-bottom: 20px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.template-tip {
+  font-size: 12px;
+  color: #909399;
+}
+
+.error-list {
+  margin-bottom: 20px;
+}
+
+.data-preview {
+  margin-bottom: 20px;
+}
+
+.import-progress {
+  margin-bottom: 20px;
+  padding: 10px;
+  background: #f5f7fa;
+  border-radius: 4px;
+}
+
+.progress-tip {
+  margin: 10px 0 0 0;
+  color: #666;
+  font-size: 14px;
+}
+
+.import-finished,
+.import-error {
+  margin-bottom: 20px;
+}
+
+.diff-section {
+  background: #fafafa;
+  border-radius: 8px;
+  padding: 16px;
+  margin-bottom: 16px;
+  border: 1px solid #e4e7ed;
+}
+
+.section-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 12px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #e4e7ed;
+}
+
+.section-icon {
+  font-size: 10px;
+  margin-right: 8px;
+}
+
+.missing-icon {
+  color: #f56c6c;
+}
+
+.extra-icon {
+  color: #67c23a;
+}
+
+.diff-icon {
+  color: #e6a23c;
+}
+
+.section-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.section-count {
+  margin-left: auto;
+  background: #e4e7ed;
+  color: #606266;
+  font-size: 12px;
+  padding: 2px 8px;
+  border-radius: 10px;
+}
+
+.diff-table {
+  background: #fff;
+}
+
+.diff-content {
+  padding: 8px 0;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
+.diff-item {
+  padding: 0;
+  display: flex;
+  gap: 20px;
+  background: #f8f9fa;
+  border-radius: 4px;
+  margin-bottom: 8px;
+  border-left: 3px solid #e6a23c;
+}
+
+.value-label {
+  color: #909399;
+  margin-right: 8px;
+  width: 36px;
+}
+
+.plan-value {
+  color: #606266;
+  font-family: monospace;
+}
+
+.actual-value {
+  color: #f56c6c;
+  font-family: monospace;
+}
+
+.empty-tip {
+  text-align: center;
+  padding: 20px;
+  color: #909399;
+  font-size: 14px;
+}
 </style>