From a9b4d5ddd6f5b0c6c8bf5dd46326da018ffde0f6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A0=82=E7=B3=96?= <2178503051@qq.com>
Date: Thu, 25 Jun 2026 10:53:27 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E7=9B=98=E5=BA=93?=
 =?UTF-8?q?=E5=92=8C=E7=BB=B4=E4=BF=AE=E8=AE=A1=E5=88=92=E5=88=9D=E7=89=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../flow/domain/bo/EqpMaintenancePlanBo.java  |    5 +
 .../klp/flow/domain/bo/InvCountPlanBo.java    |    5 +
 klp-ui/src/api/flow/countDiscrepancy.js       |   44 +
 klp-ui/src/api/flow/countPlan.js              |   44 +
 klp-ui/src/api/flow/countPlanWarehouse.js     |   44 +
 klp-ui/src/api/flow/maintenancePlan.js        |   44 +
 .../src/api/flow/maintenancePlanAbnormal.js   |   44 +
 klp-ui/src/api/flow/maintenancePlanDetail.js  |   44 +
 klp-ui/src/api/flow/planExecuteRel.js         |    8 +-
 .../ActualWarehouseL1L2Select/index.vue       |  102 +
 .../src/views/wms/post/InvCount/approval.vue  |  661 ++++++
 .../InvCount/components/CountFlowSection.vue  |  149 ++
 .../src/views/wms/post/InvCount/execute.vue   |  759 ++++++
 klp-ui/src/views/wms/post/InvCount/index.vue  | 2062 +++++++++++++++++
 klp-ui/src/views/wms/post/eqp/approval.vue    |  282 +++
 klp-ui/src/views/wms/post/eqp/execute.vue     |  342 +++
 klp-ui/src/views/wms/post/eqp/index.vue       |  666 ++++++
 17 files changed, 5303 insertions(+), 2 deletions(-)
 create mode 100644 klp-ui/src/api/flow/countDiscrepancy.js
 create mode 100644 klp-ui/src/api/flow/countPlan.js
 create mode 100644 klp-ui/src/api/flow/countPlanWarehouse.js
 create mode 100644 klp-ui/src/api/flow/maintenancePlan.js
 create mode 100644 klp-ui/src/api/flow/maintenancePlanAbnormal.js
 create mode 100644 klp-ui/src/api/flow/maintenancePlanDetail.js
 create mode 100644 klp-ui/src/components/KLPService/ActualWarehouseL1L2Select/index.vue
 create mode 100644 klp-ui/src/views/wms/post/InvCount/approval.vue
 create mode 100644 klp-ui/src/views/wms/post/InvCount/components/CountFlowSection.vue
 create mode 100644 klp-ui/src/views/wms/post/InvCount/execute.vue
 create mode 100644 klp-ui/src/views/wms/post/InvCount/index.vue
 create mode 100644 klp-ui/src/views/wms/post/eqp/approval.vue
 create mode 100644 klp-ui/src/views/wms/post/eqp/execute.vue
 create mode 100644 klp-ui/src/views/wms/post/eqp/index.vue

diff --git a/klp-flow/src/main/java/com/klp/flow/domain/bo/EqpMaintenancePlanBo.java b/klp-flow/src/main/java/com/klp/flow/domain/bo/EqpMaintenancePlanBo.java
index ed8b44d1c..426112fc6 100644
--- a/klp-flow/src/main/java/com/klp/flow/domain/bo/EqpMaintenancePlanBo.java
+++ b/klp-flow/src/main/java/com/klp/flow/domain/bo/EqpMaintenancePlanBo.java
@@ -8,6 +8,7 @@ import javax.validation.constraints.*;
 import java.math.BigDecimal;
 import java.util.Date;
 import com.fasterxml.jackson.annotation.JsonFormat;
+import org.springframework.format.annotation.DateTimeFormat;
 
 /**
  * 维修计划主业务对象 eqp_maintenance_plan
@@ -58,11 +59,15 @@ public class EqpMaintenancePlanBo extends BaseEntity {
     /**
      * 计划开始时间
      */
+    @DateTimeFormat(pattern = "yyyy-MM-dd hh:mm:ss")
+    @JsonFormat(pattern = "yyyy-MM-dd hh:mm:ss")
     private Date plannedStartTime;
 
     /**
      * 计划结束时间
      */
+    @DateTimeFormat(pattern = "yyyy-MM-dd hh:mm:ss")
+    @JsonFormat(pattern = "yyyy-MM-dd hh:mm:ss")
     private Date plannedEndTime;
 
     /**
diff --git a/klp-flow/src/main/java/com/klp/flow/domain/bo/InvCountPlanBo.java b/klp-flow/src/main/java/com/klp/flow/domain/bo/InvCountPlanBo.java
index ce8bf1a3b..5864a1401 100644
--- a/klp-flow/src/main/java/com/klp/flow/domain/bo/InvCountPlanBo.java
+++ b/klp-flow/src/main/java/com/klp/flow/domain/bo/InvCountPlanBo.java
@@ -7,6 +7,7 @@ import javax.validation.constraints.*;
 
 import java.util.Date;
 import com.fasterxml.jackson.annotation.JsonFormat;
+import org.springframework.format.annotation.DateTimeFormat;
 
 /**
  * 盘库计划主业务对象 inv_count_plan
@@ -37,11 +38,15 @@ public class InvCountPlanBo extends BaseEntity {
     /**
      * 盘库日期
      */
+    @DateTimeFormat(pattern = "yyyy-MM-dd")
+    @JsonFormat(pattern = "yyyy-MM-dd")
     private Date countDate;
 
     /**
      * 截止时间
      */
+    @DateTimeFormat(pattern = "yyyy-MM-dd hh:mm:ss")
+    @JsonFormat(pattern = "yyyy-MM-dd hh:mm:ss")
     private Date deadlineTime;
 
     /**
diff --git a/klp-ui/src/api/flow/countDiscrepancy.js b/klp-ui/src/api/flow/countDiscrepancy.js
new file mode 100644
index 000000000..448c2fb24
--- /dev/null
+++ b/klp-ui/src/api/flow/countDiscrepancy.js
@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 查询盘库差异记录列表
+export function listCountDiscrepancy(query) {
+  return request({
+    url: '/flow/countDiscrepancy/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询盘库差异记录详细
+export function getCountDiscrepancy(discrepancyId) {
+  return request({
+    url: '/flow/countDiscrepancy/' + discrepancyId,
+    method: 'get'
+  })
+}
+
+// 新增盘库差异记录
+export function addCountDiscrepancy(data) {
+  return request({
+    url: '/flow/countDiscrepancy',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改盘库差异记录
+export function updateCountDiscrepancy(data) {
+  return request({
+    url: '/flow/countDiscrepancy',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除盘库差异记录
+export function delCountDiscrepancy(discrepancyId) {
+  return request({
+    url: '/flow/countDiscrepancy/' + discrepancyId,
+    method: 'delete'
+  })
+}
diff --git a/klp-ui/src/api/flow/countPlan.js b/klp-ui/src/api/flow/countPlan.js
new file mode 100644
index 000000000..41324116c
--- /dev/null
+++ b/klp-ui/src/api/flow/countPlan.js
@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 查询盘库计划主列表
+export function listCountPlan(query) {
+  return request({
+    url: '/flow/countPlan/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询盘库计划主详细
+export function getCountPlan(planId) {
+  return request({
+    url: '/flow/countPlan/' + planId,
+    method: 'get'
+  })
+}
+
+// 新增盘库计划主
+export function addCountPlan(data) {
+  return request({
+    url: '/flow/countPlan',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改盘库计划主
+export function updateCountPlan(data) {
+  return request({
+    url: '/flow/countPlan',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除盘库计划主
+export function delCountPlan(planId) {
+  return request({
+    url: '/flow/countPlan/' + planId,
+    method: 'delete'
+  })
+}
diff --git a/klp-ui/src/api/flow/countPlanWarehouse.js b/klp-ui/src/api/flow/countPlanWarehouse.js
new file mode 100644
index 000000000..9d3d52f20
--- /dev/null
+++ b/klp-ui/src/api/flow/countPlanWarehouse.js
@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 查询盘库计划-库区关联列表
+export function listCountPlanWarehouse(query) {
+  return request({
+    url: '/flow/countPlanWarehouse/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询盘库计划-库区关联详细
+export function getCountPlanWarehouse(relId) {
+  return request({
+    url: '/flow/countPlanWarehouse/' + relId,
+    method: 'get'
+  })
+}
+
+// 新增盘库计划-库区关联
+export function addCountPlanWarehouse(data) {
+  return request({
+    url: '/flow/countPlanWarehouse',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改盘库计划-库区关联
+export function updateCountPlanWarehouse(data) {
+  return request({
+    url: '/flow/countPlanWarehouse',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除盘库计划-库区关联
+export function delCountPlanWarehouse(relId) {
+  return request({
+    url: '/flow/countPlanWarehouse/' + relId,
+    method: 'delete'
+  })
+}
diff --git a/klp-ui/src/api/flow/maintenancePlan.js b/klp-ui/src/api/flow/maintenancePlan.js
new file mode 100644
index 000000000..715229cd6
--- /dev/null
+++ b/klp-ui/src/api/flow/maintenancePlan.js
@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 查询维修计划主列表
+export function listMaintenancePlan(query) {
+  return request({
+    url: '/flow/maintenancePlan/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询维修计划主详细
+export function getMaintenancePlan(planId) {
+  return request({
+    url: '/flow/maintenancePlan/' + planId,
+    method: 'get'
+  })
+}
+
+// 新增维修计划主
+export function addMaintenancePlan(data) {
+  return request({
+    url: '/flow/maintenancePlan',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改维修计划主
+export function updateMaintenancePlan(data) {
+  return request({
+    url: '/flow/maintenancePlan',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除维修计划主
+export function delMaintenancePlan(planId) {
+  return request({
+    url: '/flow/maintenancePlan/' + planId,
+    method: 'delete'
+  })
+}
diff --git a/klp-ui/src/api/flow/maintenancePlanAbnormal.js b/klp-ui/src/api/flow/maintenancePlanAbnormal.js
new file mode 100644
index 000000000..3009abdb8
--- /dev/null
+++ b/klp-ui/src/api/flow/maintenancePlanAbnormal.js
@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 查询维修计划-异常记录关联列表
+export function listMaintenancePlanAbnormal(query) {
+  return request({
+    url: '/flow/maintenancePlanAbnormal/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询维修计划-异常记录关联详细
+export function getMaintenancePlanAbnormal(relId) {
+  return request({
+    url: '/flow/maintenancePlanAbnormal/' + relId,
+    method: 'get'
+  })
+}
+
+// 新增维修计划-异常记录关联
+export function addMaintenancePlanAbnormal(data) {
+  return request({
+    url: '/flow/maintenancePlanAbnormal',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改维修计划-异常记录关联
+export function updateMaintenancePlanAbnormal(data) {
+  return request({
+    url: '/flow/maintenancePlanAbnormal',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除维修计划-异常记录关联
+export function delMaintenancePlanAbnormal(relId) {
+  return request({
+    url: '/flow/maintenancePlanAbnormal/' + relId,
+    method: 'delete'
+  })
+}
diff --git a/klp-ui/src/api/flow/maintenancePlanDetail.js b/klp-ui/src/api/flow/maintenancePlanDetail.js
new file mode 100644
index 000000000..d055d4d94
--- /dev/null
+++ b/klp-ui/src/api/flow/maintenancePlanDetail.js
@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 查询维修计划明细列表
+export function listMaintenancePlanDetail(query) {
+  return request({
+    url: '/flow/maintenancePlanDetail/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询维修计划明细详细
+export function getMaintenancePlanDetail(detailId) {
+  return request({
+    url: '/flow/maintenancePlanDetail/' + detailId,
+    method: 'get'
+  })
+}
+
+// 新增维修计划明细
+export function addMaintenancePlanDetail(data) {
+  return request({
+    url: '/flow/maintenancePlanDetail',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改维修计划明细
+export function updateMaintenancePlanDetail(data) {
+  return request({
+    url: '/flow/maintenancePlanDetail',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除维修计划明细
+export function delMaintenancePlanDetail(detailId) {
+  return request({
+    url: '/flow/maintenancePlanDetail/' + detailId,
+    method: 'delete'
+  })
+}
diff --git a/klp-ui/src/api/flow/planExecuteRel.js b/klp-ui/src/api/flow/planExecuteRel.js
index 9a058f822..aba303bfd 100644
--- a/klp-ui/src/api/flow/planExecuteRel.js
+++ b/klp-ui/src/api/flow/planExecuteRel.js
@@ -16,18 +16,22 @@ export function getPlanExecuteRel(relId) {
 }
 
 export function addPlanExecuteRel(data) {
+  // 剔除掉rejectMark字段
+  const { rejectMark, ...payload } = { ...data };
   return request({
     url: '/flow/planExecuteRel',
     method: 'post',
-    data: data
+    data: payload
   })
 }
 
 export function updatePlanExecuteRel(data) {
+  // 剔除掉rejectMark字段
+  const { rejectMark, ...payload } = { ...data };
   return request({
     url: '/flow/planExecuteRel',
     method: 'put',
-    data: data
+    data: payload
   })
 }
 
diff --git a/klp-ui/src/components/KLPService/ActualWarehouseL1L2Select/index.vue b/klp-ui/src/components/KLPService/ActualWarehouseL1L2Select/index.vue
new file mode 100644
index 000000000..d415828b2
--- /dev/null
+++ b/klp-ui/src/components/KLPService/ActualWarehouseL1L2Select/index.vue
@@ -0,0 +1,102 @@
+<template>
+  <el-select
+    v-model="selected"
+    :placeholder="placeholder"
+    :clearable="clearable"
+    :disabled="disabled"
+    :size="size"
+    filterable
+    @change="onChange"
+    style="width: 100%"
+  >
+    <el-option
+      v-for="item in options"
+      :key="item.actualWarehouseId"
+      :label="item.actualWarehouseName"
+      :value="item.actualWarehouseId"
+      :disabled="item.isEnabled === 0"
+    >
+      <span :style="{ paddingLeft: item.level === 2 ? '20px' : '0' }">
+        {{ item.actualWarehouseName }}
+      </span>
+    </el-option>
+  </el-select>
+</template>
+
+<script>
+import { treeActualWarehouseTwoLevel } from '@/api/wms/actualWarehouse';
+
+export default {
+  name: 'ActualWarehouseL1L2Select',
+  props: {
+    value: {
+      type: [Number, String],
+      default: null
+    },
+    placeholder: {
+      type: String,
+      default: '请选择实际库区'
+    },
+    clearable: {
+      type: Boolean,
+      default: true
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    size: {
+      type: String,
+      default: 'mini'
+    }
+  },
+  data() {
+    return {
+      options: [],
+      selected: this.value
+    };
+  },
+  watch: {
+    value(val) {
+      this.selected = val;
+    }
+  },
+  mounted() {
+    this.loadOptions();
+  },
+  methods: {
+    loadOptions() {
+      var self = this;
+      treeActualWarehouseTwoLevel({}).then(function(response) {
+        var data = response.data || [];
+        self.options = self.flattenTree(data);
+      }).catch(function() {
+        self.options = [];
+      });
+    },
+    flattenTree(nodes, level) {
+      if (level === undefined) { level = 1; }
+      var result = [];
+      if (!nodes || nodes.length === 0) return result;
+      nodes.forEach(function(node) {
+        result.push({
+          actualWarehouseId: node.actualWarehouseId,
+          actualWarehouseName: node.actualWarehouseName,
+          isEnabled: node.isEnabled,
+          level: level
+        });
+        var children = node.children;
+        if (children && children.length > 0 && level < 2) {
+          var childResults = this.flattenTree(children, level + 1);
+          result = result.concat(childResults);
+        }
+      }, this);
+      return result;
+    },
+    onChange(val) {
+      this.$emit('input', val);
+      this.$emit('change', val);
+    }
+  }
+};
+</script>
diff --git a/klp-ui/src/views/wms/post/InvCount/approval.vue b/klp-ui/src/views/wms/post/InvCount/approval.vue
new file mode 100644
index 000000000..a12a0edb8
--- /dev/null
+++ b/klp-ui/src/views/wms/post/InvCount/approval.vue
@@ -0,0 +1,661 @@
+<template>
+  <div class="app-approval-wrapper">
+    <div class="app-container count-container">
+    <DragResizePanel :initialSize="280" :minSize="280" :maxSize="600">
+      <template #panelA>
+        <div class="left-panel">
+          <div class="panel-header">
+            <div class="header-title">
+              <i class="el-icon-s-check"></i>
+              <span>盘库审批</span>
+              <el-button size="mini" type="text" icon="el-icon-refresh" @click="getList" style="margin-left:4px;" title="刷新列表"></el-button>
+            </div>
+          </div>
+
+          <div class="search-row">
+            <el-input v-model="queryParams.planCode" placeholder="搜索计划编号..." clearable prefix-icon="el-icon-search"
+              size="small" @keyup.enter.native="handleQuery" @clear="handleQuery" />
+          </div>
+
+          <div v-loading="loading" class="list-body">
+            <div v-for="item in dataList" :key="item.planId" class="list-item"
+              :class="{ active: currentRow && currentRow.planId === item.planId }" @click="handleRowClick(item)">
+              <div class="item-main">
+                <span class="item-title">{{ item.planCode }}</span>
+                <span class="item-sub">{{ item.planName }}</span>
+              </div>
+              <div class="item-meta">
+                <el-tag size="mini">待审批</el-tag>
+              </div>
+              <div class="item-actions">
+                <el-button size="mini" type="text" icon="el-icon-view" @click.stop="handleRowClick(item)"></el-button>
+              </div>
+            </div>
+            <div v-if="dataList.length === 0 && !loading" class="list-empty">
+              <i class="el-icon-folder-opened"></i>
+              <span>暂无待审批盘库计划</span>
+            </div>
+          </div>
+
+          <div class="list-footer">
+            <pagination :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
+              @pagination="getList" />
+          </div>
+        </div>
+      </template>
+
+      <template #panelB>
+        <div class="right-panel">
+          <div v-if="!currentRow" class="empty-tip">
+            <i class="el-icon-info"></i>
+            <span>请在左侧列表中选择一条盘库计划进行审批</span>
+          </div>
+          <div v-else v-loading="detailLoading" class="detail-content">
+            <div class="doc-header">
+              <div class="doc-header-top">
+                <div class="doc-title-group">
+                  <div class="doc-title">{{ currentRow.planCode }}</div>
+                  <div class="doc-subtitle">Inventory Count Plan · Approval</div>
+                </div>
+                <div class="doc-header-right">
+                  <el-button size="mini" type="text" icon="el-icon-refresh" @click="handleRefreshDetail" title="刷新详情">刷新</el-button>
+                </div>
+              </div>
+              <div class="doc-status-row">
+                <span class="doc-status-label">Status / 状态：</span>
+                <el-tag size="small">待审批</el-tag>
+              </div>
+            </div>
+
+            <div class="detail-meta">
+              <span><i class="el-icon-document"></i>{{ currentRow.planName }}</span>
+              <span v-if="currentRow.countDate"><i class="el-icon-date"></i>盘库日期: {{ parseTime(currentRow.countDate, '{y}-{m}-{d}') }}</span>
+              <span v-if="currentRow.deadlineTime"><i class="el-icon-time"></i>截止: {{ parseTime(currentRow.deadlineTime, '{y}-{m}-{d} {h}:{i}') }}</span>
+              <span v-if="currentRow.countUserName"><i class="el-icon-user-solid"></i>盘点人: {{ currentRow.countUserName }}</span>
+              <span v-if="currentRow.principalUserName"><i class="el-icon-s-custom"></i>负责人: {{ currentRow.principalUserName }}</span>
+              <span v-if="currentRow.participantNames"><i class="el-icon-user"></i>参与人: {{ currentRow.participantNames }}</span>
+            </div>
+
+            <CountFlowSection :planStatus="currentRow.planStatus" />
+
+            <el-divider />
+
+            <div class="section-title">
+              <span>审批操作 <span class="en-sub">· Approval Actions</span></span>
+            </div>
+            <div class="flow-actions">
+              <el-button type="danger" size="small" icon="el-icon-close" :loading="rejectLoading" @click="handleReject">驳回</el-button>
+              <el-button type="primary" size="small" icon="el-icon-check" :loading="approveLoading" @click="handleApprove">审批通过</el-button>
+            </div>
+
+            <el-divider />
+
+            <div class="section-title">
+              <span>库区盘点明细 <span class="en-sub">· Warehouse Count Details</span></span>
+            </div>
+            <el-table v-loading="warehouseLoading" :data="warehouseList" border size="small" style="width:100%" row-key="relId">
+              <el-table-column label="逻辑库区" align="center" prop="warehouseName" />
+              <el-table-column label="实际库区" align="center" prop="actualWarehouseName" />
+              <el-table-column label="出入库查询起始" align="center" width="160">
+                <template slot-scope="scope">{{ parseTime(scope.row.ioStartTime, '{y}-{m}-{d} {h}:{i}') || '-' }}</template>
+              </el-table-column>
+              <el-table-column label="出入库查询截止" align="center" width="160">
+                <template slot-scope="scope">{{ parseTime(scope.row.ioEndTime, '{y}-{m}-{d} {h}:{i}') || '-' }}</template>
+              </el-table-column>
+            </el-table>
+
+            <div class="section-gap" />
+
+            <!-- 差异列表：审批人逐条标记需处理 -->
+            <div class="section-title">
+              <span>差异项标记 <span class="en-sub">· Mark Items for Resolution</span></span>
+            </div>
+            <el-table v-loading="discLoading" :data="discList" border size="small" style="width:100%">
+              <el-table-column label="差异类型" align="center" width="100">
+                <template slot-scope="scope">
+                  <el-tag v-if="scope.row.discrepancyType === 1" type="success" size="mini">盘盈</el-tag>
+                  <el-tag v-else-if="scope.row.discrepancyType === 2" type="danger" size="mini">盘亏</el-tag>
+                  <el-tag v-else-if="scope.row.discrepancyType === 3" type="warning" size="mini">状态不符</el-tag>
+                  <el-tag v-else-if="scope.row.discrepancyType === 4" size="mini">重量偏差</el-tag>
+                </template>
+              </el-table-column>
+              <el-table-column label="钢卷号" align="center" prop="enterCoilNo" width="160" />
+              <el-table-column label="差异详情" align="center" prop="discrepancyDetail" min-width="200" show-overflow-tooltip />
+              <el-table-column label="需处理" align="center" width="80">
+                <template slot-scope="scope">
+                  <el-tag v-if="scope.row.processStatus === 1" type="warning" size="mini">是</el-tag>
+                  <el-tag v-else type="info" size="mini">否</el-tag>
+                </template>
+              </el-table-column>
+              <el-table-column label="操作" align="center" width="100">
+                <template slot-scope="scope">
+                  <el-button size="mini" type="text" icon="el-icon-edit" @click="handleEditDiscMark(scope.row)">标记</el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+            <div v-if="discList.length === 0 && !discLoading" style="padding:12px 0;color:#909399;font-size:13px;">暂无差异记录</div>
+
+            <div class="section-gap" />
+            <div class="section-title">备注 <span class="en-sub">· Remarks</span></div>
+            <div class="remark-content">{{ currentRow.remark || '无' }}</div>
+          </div>
+        </div>
+      </template>
+    </DragResizePanel>
+  </div>
+
+  <!-- 标记需处理对话框 -->
+  <el-dialog title="标记差异项" :visible.sync="markDialogVisible" width="500px" append-to-body>
+    <el-form ref="markForm" :model="markForm" label-width="100px">
+      <el-form-item label="差异类型">
+        <el-tag v-if="markForm.discrepancyType === 1" type="success">盘盈</el-tag>
+        <el-tag v-else-if="markForm.discrepancyType === 2" type="danger">盘亏</el-tag>
+        <el-tag v-else-if="markForm.discrepancyType === 3" type="warning">状态不符</el-tag>
+        <el-tag v-else-if="markForm.discrepancyType === 4">重量偏差</el-tag>
+      </el-form-item>
+      <el-form-item label="钢卷号">{{ markForm.enterCoilNo }}</el-form-item>
+      <el-form-item label="差异详情">{{ markForm.discrepancyDetail }}</el-form-item>
+      <el-form-item label="需要处理">
+        <el-switch v-model="markForm.needResolve" active-text="是" inactive-text="否" />
+      </el-form-item>
+      <el-form-item label="审批意见">
+        <el-input v-model="markForm.approveRemark" type="textarea" :rows="3" placeholder="请输入审批意见" />
+      </el-form-item>
+    </el-form>
+    <div slot="footer">
+      <el-button type="primary" @click="submitDiscMark">确 定</el-button>
+      <el-button @click="markDialogVisible = false">取 消</el-button>
+    </div>
+  </el-dialog>
+  </div>
+</template>
+
+<script>
+import { listCountPlan, getCountPlan, updateCountPlan } from "@/api/flow/countPlan";
+import { listCountPlanWarehouse } from "@/api/flow/countPlanWarehouse";
+import { listCountDiscrepancy, updateCountDiscrepancy } from "@/api/flow/countDiscrepancy";
+import DragResizePanel from "@/components/DragResizePanel/index.vue";
+import CountFlowSection from "./components/CountFlowSection.vue";
+import { parseTime } from '@/utils/klp'
+
+export default {
+  name: "InvCountApproval",
+  components: { DragResizePanel, CountFlowSection },
+  data() {
+    return {
+      loading: false,
+      detailLoading: false,
+      warehouseLoading: false,
+      approveLoading: false,
+      rejectLoading: false,
+      discLoading: false,
+      total: 0,
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        planCode: undefined,
+        planStatus: 1
+      },
+      dataList: [],
+      currentRow: null,
+      warehouseList: [],
+      discList: [],
+      markDialogVisible: false,
+      markForm: {
+        discrepancyId: null,
+        discrepancyType: null,
+        enterCoilNo: '',
+        discrepancyDetail: '',
+        needResolve: false,
+        approveRemark: ''
+      }
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    parseTime,
+    getList() {
+      this.loading = true;
+      var self = this;
+      listCountPlan(this.queryParams).then(function(response) {
+        self.dataList = response.rows;
+        self.total = response.total;
+        self.loading = false;
+      });
+    },
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    handleRowClick(row) {
+      this.currentRow = row;
+      this.loadDetail(row.planId);
+    },
+    loadDetail(planId) {
+      this.detailLoading = true;
+      var self = this;
+      getCountPlan(planId).then(function(response) {
+        self.currentRow = response.data;
+        self.loadWarehouseList(planId);
+      }).finally(function() { self.detailLoading = false; });
+    },
+    loadWarehouseList(planId) {
+      this.warehouseLoading = true;
+      var self = this;
+      listCountPlanWarehouse({ planId: planId, pageNum: 1, pageSize: 999 }).then(function(r) {
+        self.warehouseList = r.rows || [];
+        self.loadDiscList(); // 仓库加载完成后加载差异
+      }).finally(function() { self.warehouseLoading = false; });
+    },
+    loadDiscList() {
+      this.discLoading = true;
+      this.discList = [];
+      var self = this;
+      if (this.warehouseList.length === 0) {
+        this.discLoading = false;
+        return;
+      }
+      var promises = this.warehouseList.map(function(wh) {
+        return listCountDiscrepancy({ relId: wh.relId, pageNum: 1, pageSize: 999 });
+      });
+      Promise.all(promises).then(function(results) {
+        var all = [];
+        results.forEach(function(r) { all = all.concat(r.rows || []); });
+        self.discList = all;
+      }).finally(function() { self.discLoading = false; });
+    },
+    handleRefreshDetail() {
+      if (this.currentRow && this.currentRow.planId) {
+        this.loadDetail(this.currentRow.planId);
+      }
+    },
+    handleEditDiscMark(row) {
+      this.markForm = {
+        discrepancyId: row.discrepancyId,
+        discrepancyType: row.discrepancyType,
+        enterCoilNo: row.enterCoilNo,
+        discrepancyDetail: row.discrepancyDetail,
+        needResolve: row.processStatus === 1,
+        approveRemark: row.remark || ''
+      };
+      this.markDialogVisible = true;
+    },
+    submitDiscMark() {
+      var self = this;
+      var newStatus = this.markForm.needResolve ? 1 : 0;
+      updateCountDiscrepancy({
+        discrepancyId: this.markForm.discrepancyId,
+        processStatus: newStatus,
+        remark: this.markForm.approveRemark
+      }).then(function() {
+        self.$modal.msgSuccess('标记已保存');
+        self.markDialogVisible = false;
+        self.loadDiscList();
+      }).catch(function() {
+        self.$modal.msgError('保存失败');
+      });
+    },
+    handleApprove() {
+      var self = this;
+      this.$modal.confirm('确认通过"' + this.currentRow.planCode + '"的审批？通过后盘库计划将进入差异处理阶段。').then(function() {
+        self.approveLoading = true;
+        return updateCountPlan({ planId: self.currentRow.planId, planStatus: 3 });
+      }).then(function() {
+        self.$modal.msgSuccess("审批通过，盘库计划已进入差异处理阶段");
+        self.approveLoading = false;
+        self.currentRow = null;
+        self.getList();
+      }).catch(function() { self.approveLoading = false; });
+    },
+    handleReject() {
+      var self = this;
+      this.$prompt('请输入驳回原因', '驳回审批', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        inputType: 'textarea',
+        inputValidator: function(val) { return val ? true : '驳回原因不能为空'; }
+      }).then(function({ value }) {
+        self.rejectLoading = true;
+        return updateCountPlan({ planId: self.currentRow.planId, planStatus: 0, remark: value });
+      }).then(function() {
+        self.$modal.msgSuccess("已驳回，盘库计划返回草稿状态");
+        self.rejectLoading = false;
+        self.currentRow = null;
+        self.getList();
+      }).catch(function() { self.rejectLoading = false; });
+    }
+  }
+};
+</script>
+
+<style scoped>
+.count-container {
+  height: calc(100vh - 84px);
+}
+
+/* ========== 左侧面板 ========== */
+.left-panel {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: #f5f7fa;
+  border-right: 1px solid #e4e7ed;
+}
+
+.panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 14px 8px;
+  background: #f5f7fa;
+}
+
+.header-title {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 14px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.header-title i {
+  color: #409eff;
+  font-size: 16px;
+}
+
+.search-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0 14px 10px;
+  background: #f5f7fa;
+}
+
+.list-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0 6px;
+}
+
+.list-item {
+  display: flex;
+  align-items: center;
+  padding: 10px 12px;
+  margin-bottom: 2px;
+  cursor: pointer;
+  border-radius: 6px;
+  transition: all 0.15s;
+}
+
+.list-item:hover {
+  background: #ebeef5;
+}
+
+.list-item.active {
+  background: #d9ecff;
+}
+
+.list-item.active .item-title {
+  color: #409eff;
+  font-weight: 600;
+}
+
+.item-main {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+
+.item-title {
+  font-size: 13px;
+  font-weight: 500;
+  color: #303133;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.item-sub {
+  font-size: 12px;
+  color: #909399;
+}
+
+.item-meta {
+  flex-shrink: 0;
+  margin: 0 8px;
+}
+
+.item-actions {
+  flex-shrink: 0;
+  opacity: 0;
+  transition: opacity 0.15s;
+}
+
+.list-item:hover .item-actions {
+  opacity: 1;
+}
+
+.list-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 60px 0;
+  color: #c0c4cc;
+  font-size: 13px;
+  gap: 8px;
+}
+
+.list-empty i {
+  font-size: 32px;
+}
+
+.list-footer {
+  border-top: 1px solid #e4e7ed;
+  padding: 2px 8px 0;
+  background: #f5f7fa;
+}
+
+/* ========== 右侧面板 — Word 文档风格 ========== */
+.right-panel {
+  height: 100%;
+  overflow-y: auto;
+  padding: 12px 16px;
+  background: #faf8f5;
+}
+
+.right-panel .detail-content {
+  margin: 0 auto;
+  background: #ffffff;
+  padding: 28px 32px 36px;
+  box-shadow: 0 1px 4px rgba(0,0,0,0.06), 0 2px 12px rgba(0,0,0,0.04);
+  min-height: 100%;
+}
+
+.empty-tip {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: #909399;
+  font-size: 14px;
+  gap: 8px;
+}
+
+.doc-header {
+  margin-bottom: 18px;
+  padding-bottom: 14px;
+  border-bottom: 2px solid #1a3c6e;
+}
+
+.doc-header-top {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.doc-title-group {
+  flex: 1;
+  min-width: 0;
+}
+
+.doc-title {
+  font-family: 'Georgia', 'Times New Roman', 'Noto Serif SC', 'SimSun', serif;
+  font-size: 24px;
+  font-weight: 700;
+  color: #1a1a1a;
+  line-height: 1.3;
+  letter-spacing: 0.5px;
+}
+
+.doc-subtitle {
+  font-family: 'Georgia', 'Times New Roman', serif;
+  font-size: 12px;
+  font-weight: 400;
+  color: #8c8c8c;
+  font-style: italic;
+  letter-spacing: 0.8px;
+  margin-top: 2px;
+}
+
+.doc-header-right {
+  flex-shrink: 0;
+}
+
+.doc-status-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 10px;
+}
+
+.doc-status-label {
+  font-family: 'Georgia', 'Times New Roman', serif;
+  font-size: 11px;
+  color: #8c8c8c;
+  letter-spacing: 0.3px;
+}
+
+.detail-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  font-size: 12px;
+  color: #909399;
+  margin-bottom: 16px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid #e0dcd6;
+}
+
+.detail-meta span {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.detail-meta i {
+  font-size: 13px;
+}
+
+.section-title {
+  font-family: 'Georgia', 'Times New Roman', 'Noto Serif SC', 'SimSun', serif;
+  width: 100%;
+  font-size: 15px;
+  font-weight: 700;
+  color: #1a1a1a;
+  margin: 22px 0 12px 0;
+  padding: 0 0 10px 0;
+  border-bottom: 1px solid #d4d0c8;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  letter-spacing: 0.3px;
+}
+
+.section-title:first-child {
+  margin-top: 0;
+}
+
+.section-title .en-sub {
+  font-size: 11px;
+  font-weight: 400;
+  color: #8c8c8c;
+  letter-spacing: 0.5px;
+  font-family: 'Georgia', 'Times New Roman', serif;
+  font-style: italic;
+}
+
+.flow-actions {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.remark-content {
+  padding: 12px 16px;
+  background: #faf8f5;
+  border: 1px solid #e8e4de;
+  border-radius: 2px;
+  font-size: 13px;
+  line-height: 1.8;
+  color: #1a1a1a;
+}
+
+.section-gap {
+  height: 16px;
+}
+
+.right-panel .el-table {
+  border: 1px solid #e8e4de !important;
+  border-radius: 2px !important;
+  font-size: 12px !important;
+}
+
+.right-panel .el-table thead th {
+  background-color: #2c3e50 !important;
+  color: #ffffff !important;
+  font-weight: 600 !important;
+  font-size: 11px !important;
+  letter-spacing: 0.5px !important;
+  border-bottom: none !important;
+  font-family: 'Georgia', 'Times New Roman', serif;
+}
+
+.right-panel .el-table thead th .cell {
+  color: #ffffff !important;
+}
+
+.right-panel .el-table__body tr:hover > td {
+  background-color: #f7f5f0 !important;
+}
+
+.right-panel .el-table--border td {
+  border-right: 1px solid #f0ece6 !important;
+}
+
+.right-panel .el-table--border th {
+  border-right: 1px solid #3a5166 !important;
+}
+
+.right-panel .el-table td {
+  padding: 6px 4px !important;
+  color: #3a3a3a !important;
+}
+
+.right-panel .el-divider--horizontal {
+  margin: 8px 0 4px;
+  background-color: #e0dcd6;
+}
+
+.right-panel .el-tag {
+  border-radius: 2px;
+  font-family: 'Georgia', 'Times New Roman', serif;
+  letter-spacing: 0.3px;
+}
+</style>
diff --git a/klp-ui/src/views/wms/post/InvCount/components/CountFlowSection.vue b/klp-ui/src/views/wms/post/InvCount/components/CountFlowSection.vue
new file mode 100644
index 000000000..2856a6bc7
--- /dev/null
+++ b/klp-ui/src/views/wms/post/InvCount/components/CountFlowSection.vue
@@ -0,0 +1,149 @@
+<template>
+  <div v-if="enabled" class="section-container">
+    <div class="section-title">
+      <i class="el-icon-s-order"></i>
+      <span>流程总览 <span class="en-sub">· Process Overview</span></span>
+    </div>
+    <el-steps :active="activeStep" align-center class="flow-steps">
+      <el-step title="创建计划" icon="el-icon-document" />
+      <el-step title="快照与对比" icon="el-icon-camera" />
+      <el-step title="提交审批" icon="el-icon-s-promotion" />
+      <el-step title="处理差异" icon="el-icon-warning" />
+      <el-step title="完成归档" icon="el-icon-circle-check" />
+    </el-steps>
+    <div class="current-status">
+      <span class="status-label">Current / 当前阶段：</span>
+      <el-tag :type="tagType" size="small">{{ flowStatusText }}</el-tag>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CountFlowSection',
+  props: {
+    enabled: {
+      type: Boolean,
+      default: true
+    },
+    planStatus: {
+      type: [Number, String],
+      default: undefined
+    }
+  },
+  computed: {
+    /**
+     * el-steps active 从 0 开始。
+     * 步骤：0=创建计划, 1=快照与对比, 2=提交审批, 3=处理差异, 4=完成归档
+     * status 0=草稿  -> active=0 (创建计划)
+     * status 1=待审批 -> active=2 (提交审批)
+     * status 2=执行中 -> active=3 (处理差异)
+     * status 3=差异处理 -> active=3 (处理差异)
+     * status 4=已归档 -> active=5 (全部finish)
+     */
+    activeStep() {
+      if (this.planStatus == null) return -1;
+      const v = Number(this.planStatus);
+      if (v >= 4) return 5;
+      if (v === 1) return 2;
+      if (v === 2 || v === 3) return 3;
+      return v;
+    },
+    flowStatusText() {
+      const map = {
+        0: '草稿',
+        1: '待审批',
+        2: '执行中',
+        3: '差异处理中',
+        4: '已归档'
+      };
+      return map[this.planStatus] || '未知';
+    },
+    tagType() {
+      const map = {
+        0: 'info',
+        1: '',
+        2: 'warning',
+        3: 'danger',
+        4: 'success'
+      };
+      return map[this.planStatus] || '';
+    }
+  }
+}
+</script>
+
+<style scoped>
+.section-container {
+  margin-bottom: 6px;
+}
+
+.section-title {
+  font-family: 'Georgia', 'Times New Roman', 'Noto Serif SC', 'SimSun', serif;
+  width: 100%;
+  font-size: 15px;
+  font-weight: 700;
+  color: #1a1a1a;
+  margin: 0 0 12px 0;
+  padding: 0 0 10px 0;
+  border-bottom: 1px solid #d4d0c8;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  letter-spacing: 0.3px;
+}
+
+.section-title .en-sub {
+  font-size: 11px;
+  font-weight: 400;
+  color: #8c8c8c;
+  letter-spacing: 0.5px;
+  font-family: 'Georgia', 'Times New Roman', serif;
+  font-style: italic;
+}
+
+.section-title i {
+  font-size: 16px;
+  color: #1a3c6e;
+}
+
+.flow-steps {
+  padding: 8px 0 4px;
+}
+
+.flow-steps >>> .el-step.is-wait .el-step__icon-inner,
+.flow-steps >>> .el-step.is-wait .el-step__title {
+  color: #c0c4cc;
+}
+
+.flow-steps >>> .el-step.is-process .el-step__icon-inner,
+.flow-steps >>> .el-step.is-process .el-step__title {
+  color: #409eff;
+}
+
+.flow-steps >>> .el-step.is-finish .el-step__icon-inner,
+.flow-steps >>> .el-step.is-finish .el-step__title {
+  color: #67c23a;
+}
+
+.flow-steps >>> .el-step__description {
+  display: none;
+}
+
+.current-status {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 6px;
+  margin-top: 6px;
+  padding-top: 8px;
+  border-top: 1px dashed #e0dcd6;
+}
+
+.status-label {
+  font-family: 'Georgia', 'Times New Roman', serif;
+  font-size: 11px;
+  color: #8c8c8c;
+  letter-spacing: 0.3px;
+}
+</style>
diff --git a/klp-ui/src/views/wms/post/InvCount/execute.vue b/klp-ui/src/views/wms/post/InvCount/execute.vue
new file mode 100644
index 000000000..ececc1d5a
--- /dev/null
+++ b/klp-ui/src/views/wms/post/InvCount/execute.vue
@@ -0,0 +1,759 @@
+<template>
+  <div class="app-container count-container">
+    <DragResizePanel :initialSize="280" :minSize="280" :maxSize="600">
+      <template #panelA>
+        <div class="left-panel">
+          <div class="panel-header">
+            <div class="header-title">
+              <i class="el-icon-s-data"></i>
+              <span>盘库执行</span>
+              <el-button size="mini" type="text" icon="el-icon-refresh" @click="getList" style="margin-left:4px;" title="刷新列表"></el-button>
+            </div>
+            <el-select v-model="queryParams.planStatus" placeholder="执行状态" clearable size="mini" @change="handleQuery" class="header-filter">
+              <el-option label="执行中" :value="2" />
+              <el-option label="差异处理中" :value="3" />
+            </el-select>
+          </div>
+
+          <div class="search-row">
+            <el-input v-model="queryParams.planCode" placeholder="搜索计划编号..." clearable prefix-icon="el-icon-search"
+              size="small" @keyup.enter.native="handleQuery" @clear="handleQuery" />
+          </div>
+
+          <div v-loading="loading" class="list-body">
+            <div v-for="item in dataList" :key="item.planId" class="list-item"
+              :class="{ active: currentRow && currentRow.planId === item.planId }" @click="handleRowClick(item)">
+              <div class="item-main">
+                <span class="item-title">{{ item.planCode }}</span>
+                <span class="item-sub">{{ item.planName }}</span>
+              </div>
+              <div class="item-meta">
+                <el-tag v-if="item.planStatus === 2" type="warning" size="mini">执行中</el-tag>
+                <el-tag v-else-if="item.planStatus === 3" type="danger" size="mini">差异处理中</el-tag>
+              </div>
+              <div class="item-actions">
+                <el-button size="mini" type="text" icon="el-icon-view" @click.stop="handleRowClick(item)"></el-button>
+              </div>
+            </div>
+            <div v-if="dataList.length === 0 && !loading" class="list-empty">
+              <i class="el-icon-folder-opened"></i>
+              <span>暂无执行中的盘库计划</span>
+            </div>
+          </div>
+
+          <div class="list-footer">
+            <pagination :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
+              @pagination="getList" />
+          </div>
+        </div>
+      </template>
+
+      <template #panelB>
+        <div class="right-panel">
+          <div v-if="!currentRow" class="empty-tip">
+            <i class="el-icon-info"></i>
+            <span>请在左侧列表中选择一条盘库计划执行操作</span>
+          </div>
+          <div v-else v-loading="detailLoading" class="detail-content">
+            <div class="doc-header">
+              <div class="doc-header-top">
+                <div class="doc-title-group">
+                  <div class="doc-title">{{ currentRow.planCode }}</div>
+                  <div class="doc-subtitle">Inventory Count Plan · Execution</div>
+                </div>
+                <div class="doc-header-right">
+                  <el-button size="mini" type="text" icon="el-icon-refresh" @click="handleRefreshDetail" title="刷新详情">刷新</el-button>
+                </div>
+              </div>
+              <div class="doc-status-row">
+                <span class="doc-status-label">Status / 状态：</span>
+                <el-tag v-if="currentRow.planStatus === 2" type="warning" size="small">执行中</el-tag>
+                <el-tag v-else-if="currentRow.planStatus === 3" type="danger" size="small">差异处理中</el-tag>
+              </div>
+            </div>
+
+            <div class="detail-meta">
+              <span><i class="el-icon-document"></i>{{ currentRow.planName }}</span>
+              <span v-if="currentRow.countDate"><i class="el-icon-date"></i>盘库日期: {{ parseTime(currentRow.countDate, '{y}-{m}-{d}') }}</span>
+              <span v-if="currentRow.deadlineTime"><i class="el-icon-time"></i>截止: {{ parseTime(currentRow.deadlineTime, '{y}-{m}-{d} {h}:{i}') }}</span>
+              <span v-if="currentRow.countUserName"><i class="el-icon-user-solid"></i>盘点人: {{ currentRow.countUserName }}</span>
+              <span v-if="currentRow.principalUserName"><i class="el-icon-s-custom"></i>负责人: {{ currentRow.principalUserName }}</span>
+              <span v-if="currentRow.participantNames"><i class="el-icon-user"></i>参与人: {{ currentRow.participantNames }}</span>
+            </div>
+
+            <CountFlowSection :planStatus="currentRow.planStatus" />
+
+            <el-divider />
+
+            <div class="section-title">
+              <span>执行操作 <span class="en-sub">· Execution Actions</span></span>
+            </div>
+            <div class="flow-actions">
+              <el-button v-if="currentRow.planStatus === 2" type="primary" size="small" icon="el-icon-upload2" @click="handleUploadForPlan">上传实盘Excel</el-button>
+              <el-button v-if="currentRow.planStatus === 2" type="warning" size="small" icon="el-icon-s-data" :loading="generateLoading" @click="handleGenerateDiscrepancy">核对并生成差异报告</el-button>
+              <el-button v-if="currentRow.planStatus === 3" type="success" size="small" icon="el-icon-circle-check" :loading="archiveLoading" @click="handleArchive">归档封存</el-button>
+            </div>
+
+            <el-divider />
+
+            <div class="section-title">
+              <span>库区盘点明细 <span class="en-sub">· Warehouse Count Details</span></span>
+            </div>
+            <el-table v-loading="warehouseLoading" :data="warehouseList" border size="small" style="width:100%" row-key="relId">
+              <el-table-column type="expand" width="40">
+                <template slot-scope="scope">
+                  <div v-loading="discrepancyLoadingMap[scope.row.relId]" style="padding: 8px 16px;">
+                    <el-table v-if="discrepancyMap[scope.row.relId] && discrepancyMap[scope.row.relId].length > 0"
+                      :data="discrepancyMap[scope.row.relId]" border size="small">
+                      <el-table-column label="差异类型" align="center" width="100">
+                        <template slot-scope="ds">
+                          <el-tag v-if="ds.row.discrepancyType === 1" type="success" size="mini">盘盈</el-tag>
+                          <el-tag v-else-if="ds.row.discrepancyType === 2" type="danger" size="mini">盘亏</el-tag>
+                          <el-tag v-else-if="ds.row.discrepancyType === 3" type="warning" size="mini">状态不符</el-tag>
+                          <el-tag v-else-if="ds.row.discrepancyType === 4" size="mini">重量偏差</el-tag>
+                        </template>
+                      </el-table-column>
+                      <el-table-column label="钢卷号" align="center" prop="enterCoilNo" width="160" />
+                      <el-table-column label="差异详情" align="center" prop="discrepancyDetail" min-width="200" show-overflow-tooltip />
+                      <el-table-column label="原因分析" align="center" prop="reasonAnalysis" min-width="150" show-overflow-tooltip />
+                      <el-table-column label="处理建议" align="center" prop="processSuggestion" min-width="150" show-overflow-tooltip />
+                      <el-table-column label="处理结果" align="center" prop="processResult" min-width="150" show-overflow-tooltip />
+                      <el-table-column label="处理状态" align="center" width="100">
+                        <template slot-scope="ds">
+                          <el-tag v-if="ds.row.processStatus === 0" type="info" size="mini">待处理</el-tag>
+                          <el-tag v-else-if="ds.row.processStatus === 1" type="warning" size="mini">处理中</el-tag>
+                          <el-tag v-else-if="ds.row.processStatus === 2" type="success" size="mini">已处理</el-tag>
+                        </template>
+                      </el-table-column>
+                      <el-table-column label="处理人" align="center" prop="processUserName" width="100" />
+                      <el-table-column label="操作" align="center" width="100" v-if="currentRow.planStatus === 3">
+                        <template slot-scope="ds">
+                          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleEditDiscrepancy(ds.row)">处理</el-button>
+                        </template>
+                      </el-table-column>
+                    </el-table>
+                    <span v-else style="color:#909399;font-size:13px;">暂无差异记录</span>
+                  </div>
+                </template>
+              </el-table-column>
+              <el-table-column label="逻辑库区" align="center" prop="warehouseName" />
+              <el-table-column label="实际库区" align="center" prop="actualWarehouseName" />
+              <el-table-column label="出入库查询起始" align="center" width="140">
+                <template slot-scope="scope">{{ parseTime(scope.row.ioStartTime, '{y}-{m}-{d} {h}:{i}') || '-' }}</template>
+              </el-table-column>
+              <el-table-column label="出入库查询截止" align="center" width="140">
+                <template slot-scope="scope">{{ parseTime(scope.row.ioEndTime, '{y}-{m}-{d} {h}:{i}') || '-' }}</template>
+              </el-table-column>
+              <el-table-column label="系统钢卷数量" align="center" prop="systemCoilCount" width="100" />
+              <el-table-column label="系统总重量(kg)" align="center" prop="systemTotalWeight" width="110" />
+              <el-table-column label="实盘钢卷数量" align="center" prop="actualCoilCount" width="100" />
+              <el-table-column label="实盘总重量(kg)" align="center" prop="actualTotalWeight" width="110" />
+              <el-table-column label="账实一致" align="center" width="80">
+                <template slot-scope="scope">
+                  <el-tag v-if="scope.row.isConsistent === 1" type="success" size="mini">一致</el-tag>
+                  <el-tag v-else-if="scope.row.isConsistent === 0" type="danger" size="mini">不一致</el-tag>
+                  <span v-else style="color:#909399">未盘点</span>
+                </template>
+              </el-table-column>
+              <el-table-column label="操作" align="center" width="120" fixed="right">
+                <template slot-scope="scope">
+                  <el-button v-if="currentRow.planStatus === 2" size="mini" type="text" icon="el-icon-upload2" @click="handleUploadExcel(scope.row)">上传Excel</el-button>
+                  <el-button size="mini" type="text" icon="el-icon-view" @click="handleViewDiscrepancy(scope.row)">差异</el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+
+            <div class="section-gap" />
+            <div class="section-title">备注 <span class="en-sub">· Remarks</span></div>
+            <div class="remark-content">{{ currentRow.remark || '无' }}</div>
+          </div>
+        </div>
+      </template>
+    </DragResizePanel>
+
+    <el-dialog title="上传实盘Excel" :visible.sync="uploadDialogVisible" width="500px" append-to-body>
+      <el-upload
+        ref="upload"
+        class="upload-demo"
+        drag
+        :action="uploadAction"
+        :headers="uploadHeaders"
+        :before-upload="beforeUpload"
+        :on-success="handleUploadSuccess"
+        :on-error="handleUploadError"
+        :data="{ relId: uploadingRelId }"
+        :file-list="uploadFileList"
+        :auto-upload="false"
+        accept=".xlsx,.xls">
+        <i class="el-icon-upload"></i>
+        <div class="el-upload__text">将实盘Excel文件拖到此处，或<em>点击上传</em></div>
+        <div class="el-upload__tip" slot="tip">仅支持 .xlsx / .xls 格式</div>
+      </el-upload>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="uploadDialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="submitUpload">上 传</el-button>
+      </div>
+    </el-dialog>
+
+    <el-dialog title="差异处理" :visible.sync="discDialogVisible" width="600px" append-to-body>
+      <el-form ref="discForm" :model="discForm" label-width="100px">
+        <el-form-item label="差异类型">
+          <el-tag v-if="discForm.discrepancyType === 1" type="success">盘盈</el-tag>
+          <el-tag v-else-if="discForm.discrepancyType === 2" type="danger">盘亏</el-tag>
+          <el-tag v-else-if="discForm.discrepancyType === 3" type="warning">状态不符</el-tag>
+          <el-tag v-else-if="discForm.discrepancyType === 4">重量偏差</el-tag>
+        </el-form-item>
+        <el-form-item label="钢卷号">
+          <span>{{ discForm.enterCoilNo }}</span>
+        </el-form-item>
+        <el-form-item label="差异详情">
+          <span>{{ discForm.discrepancyDetail }}</span>
+        </el-form-item>
+        <el-form-item label="原因分析" prop="reasonAnalysis">
+          <el-input v-model="discForm.reasonAnalysis" type="textarea" :rows="2" placeholder="请输入原因分析" />
+        </el-form-item>
+        <el-form-item label="处理建议" prop="processSuggestion">
+          <el-input v-model="discForm.processSuggestion" type="textarea" :rows="2" placeholder="请输入处理建议" />
+        </el-form-item>
+        <el-form-item label="处理结果" prop="processResult">
+          <el-input v-model="discForm.processResult" type="textarea" :rows="2" placeholder="请输入处理结果" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="discDialogVisible = false">取 消</el-button>
+        <el-button :loading="discButtonLoading" type="primary" @click="submitDiscrepancyForm">保 存</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { listCountPlan, getCountPlan, updateCountPlan } from "@/api/flow/countPlan";
+import { listCountPlanWarehouse } from "@/api/flow/countPlanWarehouse";
+import { listCountDiscrepancy, updateCountDiscrepancy } from "@/api/flow/countDiscrepancy";
+import DragResizePanel from "@/components/DragResizePanel/index.vue";
+import CountFlowSection from "./components/CountFlowSection.vue";
+import { getToken } from '@/utils/auth'
+import { parseTime } from '@/utils/klp'
+
+export default {
+  name: "InvCountExecute",
+  components: { DragResizePanel, CountFlowSection },
+  data() {
+    return {
+      loading: false,
+      detailLoading: false,
+      warehouseLoading: false,
+      generateLoading: false,
+      archiveLoading: false,
+      discButtonLoading: false,
+      total: 0,
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        planCode: undefined,
+        planStatus: undefined
+      },
+      dataList: [],
+      currentRow: null,
+      warehouseList: [],
+      discrepancyMap: {},
+      discrepancyLoadingMap: {},
+      // upload
+      uploadDialogVisible: false,
+      uploadFileList: [],
+      uploadingRelId: null,
+      // discrepancy dialog
+      discDialogVisible: false,
+      discForm: {}
+    };
+  },
+  computed: {
+    uploadAction() {
+      return process.env.VUE_APP_BASE_API + "/flow/countPlan/uploadExcel";
+    },
+    uploadHeaders() {
+      return { Authorization: "Bearer " + getToken() };
+    }
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    parseTime,
+    getList() {
+      this.loading = true;
+      var self = this;
+      listCountPlan(this.queryParams).then(function(response) {
+        self.dataList = response.rows;
+        self.total = response.total;
+        self.loading = false;
+      });
+    },
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    handleRowClick(row) {
+      this.currentRow = row;
+      this.loadDetail(row.planId);
+    },
+    loadDetail(planId) {
+      this.detailLoading = true;
+      var self = this;
+      getCountPlan(planId).then(function(response) {
+        self.currentRow = response.data;
+        self.loadWarehouseList(planId);
+      }).finally(function() { self.detailLoading = false; });
+    },
+    loadWarehouseList(planId) {
+      this.warehouseLoading = true;
+      var self = this;
+      listCountPlanWarehouse({ planId: planId, pageNum: 1, pageSize: 999 }).then(function(r) {
+        self.warehouseList = r.rows || [];
+      }).finally(function() { self.warehouseLoading = false; });
+    },
+    handleRefreshDetail() {
+      if (this.currentRow && this.currentRow.planId) {
+        this.loadDetail(this.currentRow.planId);
+      }
+    },
+    handleViewDiscrepancy(row) {
+      var relId = row.relId;
+      if (this.discrepancyMap[relId]) {
+        return;
+      }
+      this.$set(this.discrepancyLoadingMap, relId, true);
+      var self = this;
+      listCountDiscrepancy({ relId: relId, pageNum: 1, pageSize: 999 }).then(function(r) {
+        self.$set(self.discrepancyMap, relId, r.rows || []);
+      }).finally(function() {
+        self.$set(self.discrepancyLoadingMap, relId, false);
+      });
+    },
+    // ---- Upload ----
+    handleUploadExcel(row) {
+      this.uploadingRelId = row.relId;
+      this.uploadFileList = [];
+      this.uploadDialogVisible = true;
+    },
+    handleUploadForPlan() {
+      if (this.warehouseList.length === 0) {
+        this.$modal.msgWarning("无关联库区，无需上传");
+        return;
+      }
+      this.handleUploadExcel(this.warehouseList[0]);
+    },
+    beforeUpload(file) {
+      var isExcel = file.name.endsWith('.xlsx') || file.name.endsWith('.xls');
+      if (!isExcel) {
+        this.$modal.msgError("仅支持 .xlsx / .xls 格式文件");
+        return false;
+      }
+      return true;
+    },
+    submitUpload() {
+      this.$refs.upload.submit();
+    },
+    handleUploadSuccess(response, file, fileList) {
+      if (response.code === 200) {
+        this.$modal.msgSuccess("Excel上传成功");
+        this.uploadDialogVisible = false;
+        this.loadWarehouseList(this.currentRow.planId);
+      } else {
+        this.$modal.msgError(response.msg || "上传失败");
+      }
+    },
+    handleUploadError(err, file, fileList) {
+      this.$modal.msgError("文件上传失败，请重试");
+    },
+    // ---- Workflow actions ----
+    handleGenerateDiscrepancy() {
+      var self = this;
+      this.$modal.confirm('确认将系统库存快照与实盘Excel数据进行核对？系统将自动逐项比对并找出差异。').then(function() {
+        self.generateLoading = true;
+        return updateCountPlan({ planId: self.currentRow.planId, planStatus: 3 });
+      }).then(function() {
+        self.$modal.msgSuccess("差异报告已生成");
+        self.generateLoading = false;
+        self.loadDetail(self.currentRow.planId);
+        self.getList();
+      }).catch(function() { self.generateLoading = false; });
+    },
+    handleArchive() {
+      var self = this;
+      this.$modal.confirm('确认将盘库计划"' + this.currentRow.planCode + '"归档封存？归档后数据将不可修改。').then(function() {
+        self.archiveLoading = true;
+        return updateCountPlan({ planId: self.currentRow.planId, planStatus: 4 });
+      }).then(function() {
+        self.$modal.msgSuccess("盘库计划已归档");
+        self.archiveLoading = false;
+        self.currentRow = null;
+        self.getList();
+      }).catch(function() { self.archiveLoading = false; });
+    },
+    // ---- Discrepancy handling ----
+    handleEditDiscrepancy(row) {
+      this.discForm = Object.assign({}, row);
+      this.discDialogVisible = true;
+    },
+    submitDiscrepancyForm() {
+      var self = this;
+      this.discButtonLoading = true;
+      updateCountDiscrepancy({
+        discrepancyId: this.discForm.discrepancyId,
+        reasonAnalysis: this.discForm.reasonAnalysis,
+        processSuggestion: this.discForm.processSuggestion,
+        processResult: this.discForm.processResult,
+        processStatus: this.discForm.processResult ? 2 : this.discForm.processStatus
+      }).then(function() {
+        self.$modal.msgSuccess("差异处理保存成功");
+        self.discDialogVisible = false;
+        var relId = self.discForm.relId;
+        if (relId) {
+          self.$set(self.discrepancyMap, relId, undefined);
+          self.handleViewDiscrepancy({ relId: relId });
+        }
+      }).finally(function() { self.discButtonLoading = false; });
+    }
+  }
+};
+</script>
+
+<style scoped>
+.count-container {
+  height: calc(100vh - 84px);
+}
+
+/* ========== 左侧面板 ========== */
+.left-panel {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: #f5f7fa;
+  border-right: 1px solid #e4e7ed;
+}
+
+.panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 14px 8px;
+  background: #f5f7fa;
+}
+
+.header-title {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 14px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.header-title i {
+  color: #409eff;
+  font-size: 16px;
+}
+
+.header-filter {
+  width: 130px;
+}
+
+.search-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0 14px 10px;
+  background: #f5f7fa;
+}
+
+.list-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0 6px;
+}
+
+.list-item {
+  display: flex;
+  align-items: center;
+  padding: 10px 12px;
+  margin-bottom: 2px;
+  cursor: pointer;
+  border-radius: 6px;
+  transition: all 0.15s;
+}
+
+.list-item:hover {
+  background: #ebeef5;
+}
+
+.list-item.active {
+  background: #d9ecff;
+}
+
+.list-item.active .item-title {
+  color: #409eff;
+  font-weight: 600;
+}
+
+.item-main {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+
+.item-title {
+  font-size: 13px;
+  font-weight: 500;
+  color: #303133;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.item-sub {
+  font-size: 12px;
+  color: #909399;
+}
+
+.item-meta {
+  flex-shrink: 0;
+  margin: 0 8px;
+}
+
+.item-actions {
+  flex-shrink: 0;
+  opacity: 0;
+  transition: opacity 0.15s;
+}
+
+.list-item:hover .item-actions {
+  opacity: 1;
+}
+
+.list-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 60px 0;
+  color: #c0c4cc;
+  font-size: 13px;
+  gap: 8px;
+}
+
+.list-empty i {
+  font-size: 32px;
+}
+
+.list-footer {
+  border-top: 1px solid #e4e7ed;
+  padding: 2px 8px 0;
+  background: #f5f7fa;
+}
+
+/* ========== 右侧面板 — Word 文档风格 ========== */
+.right-panel {
+  height: 100%;
+  overflow-y: auto;
+  padding: 12px 16px;
+  background: #faf8f5;
+}
+
+.right-panel .detail-content {
+  margin: 0 auto;
+  background: #ffffff;
+  padding: 28px 32px 36px;
+  box-shadow: 0 1px 4px rgba(0,0,0,0.06), 0 2px 12px rgba(0,0,0,0.04);
+  min-height: 100%;
+}
+
+.empty-tip {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: #909399;
+  font-size: 14px;
+  gap: 8px;
+}
+
+.doc-header {
+  margin-bottom: 18px;
+  padding-bottom: 14px;
+  border-bottom: 2px solid #1a3c6e;
+}
+
+.doc-header-top {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.doc-title-group {
+  flex: 1;
+  min-width: 0;
+}
+
+.doc-title {
+  font-family: 'Georgia', 'Times New Roman', 'Noto Serif SC', 'SimSun', serif;
+  font-size: 24px;
+  font-weight: 700;
+  color: #1a1a1a;
+  line-height: 1.3;
+  letter-spacing: 0.5px;
+}
+
+.doc-subtitle {
+  font-family: 'Georgia', 'Times New Roman', serif;
+  font-size: 12px;
+  font-weight: 400;
+  color: #8c8c8c;
+  font-style: italic;
+  letter-spacing: 0.8px;
+  margin-top: 2px;
+}
+
+.doc-header-right {
+  flex-shrink: 0;
+}
+
+.doc-status-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 10px;
+}
+
+.doc-status-label {
+  font-family: 'Georgia', 'Times New Roman', serif;
+  font-size: 11px;
+  color: #8c8c8c;
+  letter-spacing: 0.3px;
+}
+
+.detail-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  font-size: 12px;
+  color: #909399;
+  margin-bottom: 16px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid #e0dcd6;
+}
+
+.detail-meta span {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.detail-meta i {
+  font-size: 13px;
+}
+
+.section-title {
+  font-family: 'Georgia', 'Times New Roman', 'Noto Serif SC', 'SimSun', serif;
+  width: 100%;
+  font-size: 15px;
+  font-weight: 700;
+  color: #1a1a1a;
+  margin: 22px 0 12px 0;
+  padding: 0 0 10px 0;
+  border-bottom: 1px solid #d4d0c8;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  letter-spacing: 0.3px;
+}
+
+.section-title:first-child {
+  margin-top: 0;
+}
+
+.section-title .en-sub {
+  font-size: 11px;
+  font-weight: 400;
+  color: #8c8c8c;
+  letter-spacing: 0.5px;
+  font-family: 'Georgia', 'Times New Roman', serif;
+  font-style: italic;
+}
+
+.flow-actions {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.remark-content {
+  padding: 12px 16px;
+  background: #faf8f5;
+  border: 1px solid #e8e4de;
+  border-radius: 2px;
+  font-size: 13px;
+  line-height: 1.8;
+  color: #1a1a1a;
+}
+
+.section-gap {
+  height: 16px;
+}
+
+.right-panel .el-table {
+  border: 1px solid #e8e4de !important;
+  border-radius: 2px !important;
+  font-size: 12px !important;
+}
+
+.right-panel .el-table thead th {
+  background-color: #2c3e50 !important;
+  color: #ffffff !important;
+  font-weight: 600 !important;
+  font-size: 11px !important;
+  letter-spacing: 0.5px !important;
+  border-bottom: none !important;
+  font-family: 'Georgia', 'Times New Roman', serif;
+}
+
+.right-panel .el-table thead th .cell {
+  color: #ffffff !important;
+}
+
+.right-panel .el-table__body tr:hover > td {
+  background-color: #f7f5f0 !important;
+}
+
+.right-panel .el-table--border td {
+  border-right: 1px solid #f0ece6 !important;
+}
+
+.right-panel .el-table--border th {
+  border-right: 1px solid #3a5166 !important;
+}
+
+.right-panel .el-table td {
+  padding: 6px 4px !important;
+  color: #3a3a3a !important;
+}
+
+.right-panel .el-divider--horizontal {
+  margin: 8px 0 4px;
+  background-color: #e0dcd6;
+}
+
+.right-panel .el-tag {
+  border-radius: 2px;
+  font-family: 'Georgia', 'Times New Roman', serif;
+  letter-spacing: 0.3px;
+}
+
+.upload-demo {
+  text-align: center;
+}
+</style>
diff --git a/klp-ui/src/views/wms/post/InvCount/index.vue b/klp-ui/src/views/wms/post/InvCount/index.vue
new file mode 100644
index 000000000..6b5b3c707
--- /dev/null
+++ b/klp-ui/src/views/wms/post/InvCount/index.vue
@@ -0,0 +1,2062 @@
+<template>
+  <div class="app-container count-container">
+    <DragResizePanel :initialSize="280" :minSize="280" :maxSize="600">
+      <template #panelA>
+        <div class="left-panel">
+          <div class="panel-header">
+            <div class="header-title">
+              <i class="el-icon-s-check"></i>
+              <span>盘库计划</span>
+              <el-button size="mini" type="text" icon="el-icon-refresh" @click="getList" style="margin-left:4px;" title="刷新列表"></el-button>
+            </div>
+            <el-select v-model="queryParams.planStatus" placeholder="全部状态" clearable size="mini" @change="handleQuery" class="header-filter">
+              <el-option label="草稿" :value="0" />
+              <el-option label="待审批" :value="1" />
+              <el-option label="执行中" :value="2" />
+              <el-option label="差异处理中" :value="3" />
+              <el-option label="已归档" :value="4" />
+            </el-select>
+          </div>
+
+          <div class="search-row">
+            <el-input v-model="queryParams.planCode" placeholder="搜索计划编号..." clearable prefix-icon="el-icon-search"
+              size="small" @keyup.enter.native="handleQuery" @clear="handleQuery" />
+            <el-button type="primary" size="small" @click="handleAdd">
+              <i class="el-icon-plus"></i>
+            </el-button>
+          </div>
+
+          <div v-loading="loading" class="list-body">
+            <div v-for="item in dataList" :key="item.planId" class="list-item"
+              :class="{ active: currentRow && currentRow.planId === item.planId }" @click="handleRowClick(item)">
+              <div class="item-main">
+                <span class="item-title">{{ item.planCode }}</span>
+                <span class="item-sub">{{ item.planName }}</span>
+              </div>
+              <div class="item-meta">
+                <el-tag v-if="item.planStatus === 0" type="info" size="mini">草稿</el-tag>
+                <el-tag v-else-if="item.planStatus === 1" size="mini">待审批</el-tag>
+                <el-tag v-else-if="item.planStatus === 2" type="warning" size="mini">执行中</el-tag>
+                <el-tag v-else-if="item.planStatus === 3" type="danger" size="mini">差异处理中</el-tag>
+                <el-tag v-else-if="item.planStatus === 4" type="success" size="mini">已归档</el-tag>
+              </div>
+              <div class="item-actions">
+                <el-button size="mini" type="text" icon="el-icon-edit" @click.stop="handleUpdate(item)"></el-button>
+                <el-button size="mini" type="text" icon="el-icon-delete" @click.stop="handleDelete(item)"></el-button>
+              </div>
+            </div>
+            <div v-if="dataList.length === 0 && !loading" class="list-empty">
+              <i class="el-icon-folder-opened"></i>
+              <span>暂无盘库计划数据</span>
+            </div>
+          </div>
+
+          <div class="list-footer">
+            <pagination :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
+              @pagination="getList" />
+          </div>
+        </div>
+      </template>
+
+      <template #panelB>
+        <div class="right-panel">
+          <div v-if="!currentRow" class="empty-tip">
+            <i class="el-icon-info"></i>
+            <span>请在左侧列表中选择一条盘库计划查看详情</span>
+          </div>
+          <div v-else v-loading="detailLoading" class="detail-content">
+            <div class="doc-header">
+              <div class="doc-header-top">
+                <div class="doc-title-group">
+                  <div class="doc-title">{{ currentRow.planCode }}</div>
+                  <div class="doc-subtitle">Inventory Count Plan</div>
+                </div>
+                <div class="doc-header-right">
+                  <el-button size="mini" type="text" icon="el-icon-refresh" @click="handleRefreshDetail" title="刷新详情">刷新</el-button>
+                  <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(currentRow)" v-if="currentRow.planStatus === 0">编辑</el-button>
+                  <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(currentRow)" v-if="currentRow.planStatus === 0">删除</el-button>
+                </div>
+              </div>
+              <div class="doc-status-row">
+                <span class="doc-status-label">Status / 状态：</span>
+                <el-tag v-if="currentRow.planStatus === 0" type="info" size="small">草稿</el-tag>
+                <el-tag v-else-if="currentRow.planStatus === 1" size="small">待审批</el-tag>
+                <el-tag v-else-if="currentRow.planStatus === 2" type="warning" size="small">执行中</el-tag>
+                <el-tag v-else-if="currentRow.planStatus === 3" type="danger" size="small">差异处理中</el-tag>
+                <el-tag v-else-if="currentRow.planStatus === 4" type="success" size="small">已归档</el-tag>
+              </div>
+            </div>
+
+            <div class="detail-meta">
+              <span><i class="el-icon-document"></i>{{ currentRow.planName }}</span>
+              <span v-if="currentRow.countDate"><i class="el-icon-date"></i>盘库日期: {{ parseTime(currentRow.countDate, '{y}-{m}-{d}') }}</span>
+              <span v-if="currentRow.deadlineTime"><i class="el-icon-time"></i>截止: {{ parseTime(currentRow.deadlineTime, '{y}-{m}-{d} {h}:{i}') }}</span>
+              <span v-if="currentRow.countUserName"><i class="el-icon-user-solid"></i>盘点人: {{ currentRow.countUserName }}</span>
+              <span v-if="currentRow.principalUserName"><i class="el-icon-s-custom"></i>负责人: {{ currentRow.principalUserName }}</span>
+              <span v-if="currentRow.participantNames"><i class="el-icon-user"></i>参与人: {{ currentRow.participantNames }}</span>
+            </div>
+
+            <CountFlowSection :planStatus="currentRow.planStatus" />
+
+            <el-divider />
+
+            <div class="section-title">
+              <span>流程操作 <span class="en-sub">· Workflow Actions</span></span>
+            </div>
+            <div class="flow-actions">
+              <el-button v-if="currentRow.planStatus === 0" type="primary" size="small" icon="el-icon-s-promotion" @click="handleSubmitApproval">提交审批</el-button>
+              <el-button v-if="currentRow.planStatus === 1" type="primary" size="small" icon="el-icon-s-promotion" @click="handleStartCount">审批通过，开始盘库</el-button>
+              <el-button v-if="currentRow.planStatus === 2" type="warning" size="small" icon="el-icon-s-data" @click="handleGenerateDiscrepancy">核对并生成差异报告</el-button>
+              <el-button v-if="currentRow.planStatus === 3" type="success" size="small" icon="el-icon-circle-check" @click="handleArchive">归档封存</el-button>
+            </div>
+
+            <el-divider />
+
+            <div class="section-title">
+              库区盘点明细 <span class="en-sub">· Warehouse Count Details</span>
+              <el-button v-if="currentRow.planStatus === 0" size="mini" type="primary" plain icon="el-icon-plus" style="margin-left: 8px;" @click="handleAddWarehouse">绑定库区</el-button>
+              <el-button v-if="warehouseList.length > 0 && currentRow.planStatus !== 2 && currentRow.planStatus !== 3 && currentRow.planStatus !== 4" size="mini" type="primary" plain icon="el-icon-camera" :loading="snapshotLoading" @click="handleGenerateAllSnapshots">全部生成快照</el-button>
+            </div>
+
+            <!-- ===== 自定义主 Tab：每个仓库一个 ===== -->
+            <div class="doc-tabs" v-loading="warehouseLoading">
+              <div class="doc-tabs-header">
+                <div v-for="(wh, idx) in warehouseList" :key="wh.relId"
+                  class="doc-tab-item"
+                  :class="{ active: activeWarehouseIndex === String(idx) }"
+                  @click="activeWarehouseIndex = String(idx); handleWarehouseTabChange(String(idx))">
+                  <span class="doc-tab-label">{{ wh.warehouseName || wh.actualWarehouseName || '库区' + (idx+1) }}</span>
+                  <span class="doc-tab-badge">{{ wh.systemCoilCount || 0 }}卷</span>
+                </div>
+                <div v-if="warehouseList.length === 0" class="doc-tabs-empty">暂无绑定库区</div>
+              </div>
+              <div class="doc-tabs-content">
+                <div v-for="(wh, idx) in warehouseList" :key="wh.relId"
+                  v-show="activeWarehouseIndex === String(idx)">
+
+                  <!-- ===== 自定义子 Tab：概览 / 快照 / 差异明细 ===== -->
+                  <div class="doc-sub-tabs">
+                    <div class="doc-sub-tabs-header">
+                      <div class="doc-sub-tab-item" :class="{ active: activeSubTab === 'console' }" @click="activeSubTab = 'console'">操作台</div>
+                      <div class="doc-sub-tab-item" :class="{ active: activeSubTab === 'overview' }" @click="activeSubTab = 'overview'">概览</div>
+                      <div class="doc-sub-tab-item" :class="{ active: activeSubTab === 'snapshot' }" @click="activeSubTab = 'snapshot'">快照</div>
+                      <div v-if="currentRow.planStatus === 2" class="doc-sub-tab-item" :class="{ active: activeSubTab === 'diff' }" @click="activeSubTab = 'diff'; handleCompareDiff(wh)">差异对比</div>
+                      <div class="doc-sub-tab-item" :class="{ active: activeSubTab === 'discrepancy' }" @click="activeSubTab = 'discrepancy'">差异明细</div>
+                    </div>
+                    <div class="doc-sub-tabs-content">
+
+                      <!-- ====== 操作台 ====== -->
+                      <div v-show="activeSubTab === 'console'">
+                        <div class="console-section">
+                          <!-- 步骤进度 -->
+                          <div class="console-steps">
+                            <div class="console-step" :class="{ done: wh.snapshotCoilLogic || wh.snapshotCoilActual }">
+                              <div class="step-icon"><i class="el-icon-camera"></i></div>
+                              <div class="step-info">
+                                <div class="step-title">生成快照</div>
+                                <div class="step-desc">{{ (wh.snapshotCoilLogic || wh.snapshotCoilActual) ? '已生成' : '未生成' }}</div>
+                              </div>
+                              <el-button size="mini" type="primary" plain :loading="snapshotLoading" @click="handleGenerateSnapshot(wh)">生成</el-button>
+                            </div>
+                            <div class="console-step" :class="{ done: wh.snapshotCoilStats }">
+                              <div class="step-icon"><i class="el-icon-upload2"></i></div>
+                              <div class="step-info">
+                                <div class="step-title">上传实盘</div>
+                                <div class="step-desc">{{ wh.snapshotCoilStats ? '已上传' : '未上传' }}</div>
+                              </div>
+                              <el-button size="mini" type="primary" plain @click="handleUploadExcel(wh)">上传</el-button>
+                            </div>
+                            <div class="console-step" :class="{ done: _diffDone[wh.relId] }">
+                              <div class="step-icon"><i class="el-icon-s-data"></i></div>
+                              <div class="step-info">
+                                <div class="step-title">执行对比</div>
+                                <div class="step-desc">{{ _diffDone[wh.relId] ? '已完成' : '未对比' }}</div>
+                              </div>
+                              <el-button size="mini" type="primary" plain :loading="diffLoading" @click="handleCompareDiff(wh)">对比</el-button>
+                            </div>
+                            <div class="console-step">
+                              <div class="step-icon"><i class="el-icon-document-checked"></i></div>
+                              <div class="step-info">
+                                <div class="step-title">保存结果</div>
+                                <div class="step-desc">对比后可保存</div>
+                              </div>
+                              <el-button size="mini" type="success" plain :disabled="!_diffDone[wh.relId]">保存</el-button>
+                            </div>
+                          </div>
+                          <!-- 对比结果摘要 -->
+                          <div v-if="_diffDone[wh.relId]" class="console-result">
+                            <div class="result-header">对比结果摘要</div>
+                            <div class="result-grid">
+                              <div class="result-item miss">盘亏：{{ diffMissing.length }}卷</div>
+                              <div class="result-item extra">盘盈：{{ diffExtra.length }}卷</div>
+                              <div class="result-item diff">不一致：{{ diffMismatch.length }}卷</div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+
+                      <!-- ====== 概览 ====== -->
+                      <div v-show="activeSubTab === 'overview'">
+                        <el-descriptions :column="3" border size="small">
+                          <el-descriptions-item label="逻辑库区">{{ wh.warehouseName || '-' }}</el-descriptions-item>
+                          <el-descriptions-item label="实际库区">{{ wh.actualWarehouseName || '-' }}</el-descriptions-item>
+                          <el-descriptions-item label="账实一致">
+                            <el-tag v-if="wh.isConsistent === 1" type="success" size="mini">一致</el-tag>
+                            <el-tag v-else-if="wh.isConsistent === 0" type="danger" size="mini">不一致</el-tag>
+                            <span v-else style="color:#909399">未盘点</span>
+                          </el-descriptions-item>
+                          <el-descriptions-item label="出入库查询起始">{{ parseTime(wh.ioStartTime, '{y}-{m}-{d} {h}:{i}') || '-' }}</el-descriptions-item>
+                          <el-descriptions-item label="出入库查询截止">{{ parseTime(wh.ioEndTime, '{y}-{m}-{d} {h}:{i}') || '-' }}</el-descriptions-item>
+                          <el-descriptions-item label="差异记录">
+                            <el-button type="text" size="mini" icon="el-icon-view" @click="handleViewDiscrepancy(wh)">查看差异 ({{ (discrepancyMap[wh.relId] || []).length }})</el-button>
+                          </el-descriptions-item>
+                          <el-descriptions-item label="系统钢卷数量">{{ wh.systemCoilCount || 0 }}</el-descriptions-item>
+                          <el-descriptions-item label="系统总重量(kg)">{{ wh.systemTotalWeight || 0 }}</el-descriptions-item>
+                          <el-descriptions-item label="操作">
+                            <el-button v-if="currentRow.planStatus !== 2 && currentRow.planStatus !== 3 && currentRow.planStatus !== 4" size="mini" type="primary" icon="el-icon-camera" :loading="snapshotLoading" @click="handleGenerateSnapshot(wh)">生成快照</el-button>
+                            <el-button v-if="currentRow.planStatus === 2" size="mini" type="primary" icon="el-icon-upload2" @click="handleUploadExcel(wh)">上传Excel</el-button>
+                            <el-button v-if="currentRow.planStatus === 0" size="mini" type="danger" plain icon="el-icon-delete" @click="handleRemoveWarehouse(wh)">移除</el-button>
+                          </el-descriptions-item>
+                          <el-descriptions-item label="实盘钢卷数量">{{ wh.actualCoilCount || 0 }}</el-descriptions-item>
+                          <el-descriptions-item label="实盘总重量(kg)">{{ wh.actualTotalWeight || 0 }}</el-descriptions-item>
+                          <el-descriptions-item />
+                        </el-descriptions>
+                      </div>
+
+                      <!-- ====== 快照 ====== -->
+                      <div v-show="activeSubTab === 'snapshot'">
+                        <el-descriptions :column="1" border size="small">
+                          <el-descriptions-item label="逻辑库区快照 (snapshotCoilLogic)">
+                            <span v-if="wh.snapshotCoilLogic">
+                              <el-tag type="success" size="mini" style="margin-right:8px;">已生成</el-tag>
+                              <el-button type="text" size="mini" icon="el-icon-view" @click="handlePreview(wh.snapshotCoilLogic, wh.warehouseName || '逻辑库区')">预览</el-button>
+                            </span>
+                            <span v-else style="color:#909399;">未生成</span>
+                          </el-descriptions-item>
+                          <el-descriptions-item label="实际库区快照 (snapshotCoilActual)">
+                            <span v-if="wh.snapshotCoilActual">
+                              <el-tag type="success" size="mini" style="margin-right:8px;">已生成</el-tag>
+                              <el-button type="text" size="mini" icon="el-icon-view" @click="handlePreview(wh.snapshotCoilActual, wh.actualWarehouseName || '实际库区')">预览</el-button>
+                            </span>
+                            <span v-else style="color:#909399;">未生成</span>
+                          </el-descriptions-item>
+                          <el-descriptions-item label="出入库记录快照 (snapshotIoRecord)">
+                            <span v-if="wh.snapshotIoRecord">
+                              <el-tag type="success" size="mini" style="margin-right:8px;">已生成</el-tag>
+                              <el-button type="text" size="mini" icon="el-icon-view" @click="handlePreview(wh.snapshotIoRecord, 'IO记录')">预览</el-button>
+                            </span>
+                            <span v-else style="color:#909399;">未生成</span>
+                          </el-descriptions-item>
+                        </el-descriptions>
+                      </div>
+
+                      <!-- ====== 差异对比（仅执行中阶段） ====== -->
+                      <div v-show="activeSubTab === 'diff'">
+                        <div v-loading="diffLoading" style="padding: 8px 0;">
+                          <div class="diff-config" v-if="!diffLoading && (diffMissing.length || diffExtra.length || diffMismatch.length)">
+                            <el-form :model="{ weightThreshold: diffWeightThreshold }" inline>
+                              <el-form-item label="重量差异阈值(kg)">
+                                <el-input-number v-model="diffWeightThreshold" :precision="2" :step="0.1" :min="0" style="width:120px;" />
+                              </el-form-item>
+                              <el-form-item>
+                                <el-button type="primary" size="mini" @click="handleCompareDiff(wh)">重新对比</el-button>
+                              </el-form-item>
+                            </el-form>
+                            <span style="font-size:12px;color:#909399;">重量差异在此阈值内视为相同</span>
+                          </div>
+                          <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">{{ diffMissing.length }}</span>
+                                </div>
+                                <el-table height="250" :data="diffMissing" border size="small" class="diff-table">
+                                  <el-table-column prop="enterCoilNo" label="入场钢卷号" />
+                                  <el-table-column prop="currentCoilNo" label="当前钢卷号" width="120" />
+                                  <el-table-column prop="netWeight" label="重量(kg)" width="90" />
+                                  <el-table-column prop="specification" label="规格" width="100" />
+                                  <el-table-column prop="material" label="材质" width="80" />
+                                </el-table>
+                                <div v-if="diffMissing.length === 0 && !diffLoading" 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">{{ diffExtra.length }}</span>
+                                </div>
+                                <el-table height="250" :data="diffExtra" border size="small" class="diff-table">
+                                  <el-table-column prop="enterCoilNo" label="入场钢卷号" />
+                                  <el-table-column prop="currentCoilNo" label="当前钢卷号" width="120" />
+                                  <el-table-column prop="netWeight" label="重量(kg)" width="90" />
+                                  <el-table-column prop="specification" label="规格" width="100" />
+                                  <el-table-column prop="material" label="材质" width="80" />
+                                </el-table>
+                                <div v-if="diffExtra.length === 0 && !diffLoading" 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">{{ diffMismatch.length }}</span>
+                            </div>
+                            <el-table height="300" :data="diffMismatch" border size="small" class="diff-table">
+                              <el-table-column prop="enterCoilNo" label="入场钢卷号" width="130" />
+                              <el-table-column prop="currentCoilNo" label="当前钢卷号" width="130" />
+                              <el-table-column label="字段差异" min-width="500">
+                                <template #default="scope">
+                                  <div class="diff-content">
+                                    <div v-for="(d, idx) in scope.row.diffs" :key="idx" class="diff-item">
+                                      <span class="field-label">{{ d.label }}</span>
+                                      <div class="value-row">
+                                        <span class="value-label">快照:</span>
+                                        <span class="plan-value">{{ d.snapshotValue }}</span>
+                                      </div>
+                                      <div class="value-row">
+                                        <span class="value-label">实盘:</span>
+                                        <span class="actual-value">{{ d.physicalValue }}</span>
+                                      </div>
+                                    </div>
+                                  </div>
+                                </template>
+                              </el-table-column>
+                            </el-table>
+                            <div v-if="diffMismatch.length === 0 && !diffLoading" class="empty-tip">无不一致卷</div>
+                          </div>
+                          <div v-if="!diffLoading && diffMissing.length === 0 && diffExtra.length === 0 && diffMismatch.length === 0" style="text-align:center;padding:40px;color:#909399;">
+                            请先生成快照并导入实盘Excel后进行对比
+                          </div>
+                        </div>
+                      </div>
+
+                      <!-- ====== 差异明细 ====== -->
+                      <div v-show="activeSubTab === 'discrepancy'">
+                        <div v-loading="discrepancyLoadingMap[wh.relId]" style="padding: 8px 0;">
+                          <el-table v-if="discrepancyMap[wh.relId] && discrepancyMap[wh.relId].length > 0"
+                            :data="discrepancyMap[wh.relId]" border size="small" style="width:100%">
+                            <el-table-column label="差异类型" align="center" width="100">
+                              <template slot-scope="ds">
+                                <el-tag v-if="ds.row.discrepancyType === 1" type="success" size="mini">盘盈</el-tag>
+                                <el-tag v-else-if="ds.row.discrepancyType === 2" type="danger" size="mini">盘亏</el-tag>
+                                <el-tag v-else-if="ds.row.discrepancyType === 3" type="warning" size="mini">状态不符</el-tag>
+                                <el-tag v-else-if="ds.row.discrepancyType === 4" size="mini">重量偏差</el-tag>
+                              </template>
+                            </el-table-column>
+                            <el-table-column label="钢卷号" align="center" prop="enterCoilNo" width="160" />
+                            <el-table-column label="差异详情" align="center" prop="discrepancyDetail" min-width="200" show-overflow-tooltip />
+                            <el-table-column label="原因分析" align="center" prop="reasonAnalysis" min-width="150" show-overflow-tooltip />
+                            <el-table-column label="处理建议" align="center" prop="processSuggestion" min-width="150" show-overflow-tooltip />
+                            <el-table-column label="处理结果" align="center" prop="processResult" min-width="150" show-overflow-tooltip />
+                            <el-table-column label="处理状态" align="center" width="100">
+                              <template slot-scope="ds">
+                                <el-tag v-if="ds.row.processStatus === 0" type="info" size="mini">待处理</el-tag>
+                                <el-tag v-else-if="ds.row.processStatus === 1" type="warning" size="mini">处理中</el-tag>
+                                <el-tag v-else-if="ds.row.processStatus === 2" type="success" size="mini">已处理</el-tag>
+                              </template>
+                            </el-table-column>
+                            <el-table-column label="处理人" align="center" prop="processUserName" width="100" />
+                            <el-table-column label="操作" align="center" width="100" v-if="currentRow.planStatus === 3">
+                              <template slot-scope="ds">
+                                <el-button size="mini" type="text" icon="el-icon-edit" @click="handleEditDiscrepancy(ds.row)">处理</el-button>
+                              </template>
+                            </el-table-column>
+                          </el-table>
+                          <span v-else style="color:#909399;font-size:13px;">暂无差异记录</span>
+                        </div>
+                      </div>
+
+                    </div>
+                  </div>
+                  <!-- ===== end 子Tab ===== -->
+
+                </div>
+              </div>
+            </div>
+            <!-- ===== end 自定义主Tab ===== -->
+
+            <!-- Excel 快照预览弹窗 -->
+            <el-dialog title="快照预览" :visible.sync="previewDialogVisible" width="80%" top="5vh" append-to-body
+              :before-close="function() { previewDialogVisible = false; previewUrl = ''; }">
+              <div slot="title">{{ previewTitle }}</div>
+              <div style="height:75vh;">
+                <vue-office-excel v-if="previewUrl" :src="previewUrl" @render-error="handleExcelError" />
+                <span v-else style="color:#909399;">加载中...</span>
+              </div>
+            </el-dialog>
+
+            <div class="section-gap" />
+
+            <div class="section-title">备注 <span class="en-sub">· Remarks</span></div>
+            <div class="remark-content">{{ currentRow.remark || '无' }}</div>
+          </div>
+        </div>
+      </template>
+    </DragResizePanel>
+
+    <el-dialog :title="title" :visible.sync="open" width="650px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+        <el-form-item label="计划名称" prop="planName">
+          <el-input v-model="form.planName" placeholder="请输入盘库计划名称" />
+        </el-form-item>
+        <el-form-item label="盘库日期" prop="countDate">
+          <el-date-picker clearable v-model="form.countDate" type="date" value-format="yyyy-MM-dd"
+            placeholder="请选择盘库日期" style="width:100%" />
+        </el-form-item>
+        <el-form-item label="截止时间" prop="deadlineTime">
+          <el-date-picker clearable v-model="form.deadlineTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
+            placeholder="请选择截止时间" style="width:100%" />
+        </el-form-item>
+        <el-form-item label="盘点人" prop="countUserId">
+          <el-input v-model="form.countUserName" placeholder="请选择盘点人" />
+        </el-form-item>
+        <el-form-item label="负责人" prop="principalUserId">
+          <el-input v-model="form.principalUserName" placeholder="请选择负责人" />
+        </el-form-item>
+        <el-form-item label="参与人员" prop="participantIds">
+          <el-input v-model="form.participantNames" placeholder="请输入参与人员" />
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="form.remark" type="textarea" :rows="3" placeholder="请输入备注" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+
+    <el-dialog title="绑定盘库库区" :visible.sync="warehouseDialogVisible" width="550px" append-to-body>
+      <el-form ref="warehouseForm" :model="warehouseForm" label-width="120px">
+        <el-form-item label="逻辑库区" prop="warehouseId">
+          <WarehouseSelect ref="whSelect" v-model="warehouseForm.warehouseId" placeholder="请选择逻辑库区" @change="handleWarehouseChange" />
+        </el-form-item>
+        <el-form-item label="实际库区" prop="actualWarehouseId">
+          <ActualWarehouseL1L2Select ref="actualWhSelect" v-model="warehouseForm.actualWarehouseId" placeholder="请选择实际库区（一级/二级）" @change="handleActualWarehouseChange" />
+        </el-form-item>
+        <el-form-item label="出入库查询起始" prop="ioStartTime">
+          <el-date-picker clearable v-model="warehouseForm.ioStartTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
+            placeholder="请选择起始时间" style="width:100%" />
+        </el-form-item>
+        <el-form-item label="出入库查询截止" prop="ioEndTime">
+          <el-date-picker clearable v-model="warehouseForm.ioEndTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
+            placeholder="请选择截止时间" style="width:100%" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button :loading="whButtonLoading" type="primary" @click="submitWarehouseForm">确 定</el-button>
+        <el-button @click="warehouseDialogVisible = false">取 消</el-button>
+      </div>
+    </el-dialog>
+
+    <!-- 实盘Excel导入对话框（固定模板） -->
+    <el-dialog title="导入实盘Excel" :visible.sync="importDialogVisible" width="1000px" append-to-body
+      @close="resetImportState">
+      <div class="import-container">
+        <div class="file-upload-area">
+          <el-upload ref="invUpload" class="upload-excel" action="" :auto-upload="false" :show-file-list="false"
+            :on-change="handleImportFileChange" accept=".xlsx,.xls" :disabled="importing">
+            <el-button type="primary" icon="el-icon-upload2">选择Excel文件</el-button>
+          </el-upload>
+          <el-button type="success" icon="el-icon-check" @click="handleValidatePhysical"
+            :disabled="!importFile || importValidated || importing" :loading="importing">
+            校验数据
+          </el-button>
+          <el-button type="warning" icon="el-icon-circle-check" @click="handleImportPhysical"
+            :disabled="!importFile || !importValidated || importErrorList.length > 0 || importing" :loading="importing">
+            开始对比
+          </el-button>
+          <el-button type="default" icon="el-icon-refresh" @click="resetImportState" :disabled="importing">重置</el-button>
+        </div>
+        <div class="template-download">
+          <el-link type="primary" icon="el-icon-download" @click="downloadInvCountTemplate">下载实盘导入模板</el-link>
+          <span class="template-tip">请按照模板格式填写实盘数据</span>
+        </div>
+        <div v-if="importErrorList.length > 0" class="error-list">
+          <el-alert title="数据校验失败" type="error" :description="'共发现' + importErrorList.length + '条错误，请修正后重新导入'" show-icon />
+          <el-table :data="importErrorList" 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="importTableData.length > 0 && importValidated && importErrorList.length === 0" class="data-preview">
+          <el-alert title="数据预览" type="info" :description="'共解析出 ' + importTableData.length + ' 条有效数据'" show-icon :closable="false" />
+          <el-table :data="importTableData" border size="small" max-height="300" stripe>
+            <el-table-column prop="enterCoilNo" label="入场钢卷号" width="140" />
+            <el-table-column prop="currentCoilNo" label="当前钢卷号" width="140" />
+            <el-table-column prop="netWeight" label="重量(kg)" width="100" />
+            <el-table-column prop="specification" label="规格" width="120" />
+            <el-table-column prop="material" label="材质" width="100" />
+            <el-table-column prop="manufacturer" label="生产厂家" width="120" />
+            <el-table-column prop="qualityStatus" label="品质" width="100" />
+            <el-table-column prop="actualWarehouseName" label="实际库区" width="100" />
+            <el-table-column prop="length" label="长度" width="80" />
+          </el-table>
+        </div>
+      </div>
+    </el-dialog>
+
+    <el-dialog :title="'差异处理 - ' + discForm.enterCoilNo" :visible.sync="discDialogVisible" width="600px" append-to-body>
+      <el-form ref="discForm" :model="discForm" label-width="100px">
+        <el-form-item label="差异类型">
+          <el-tag v-if="discForm.discrepancyType === 1" type="success">盘盈</el-tag>
+          <el-tag v-else-if="discForm.discrepancyType === 2" type="danger">盘亏</el-tag>
+          <el-tag v-else-if="discForm.discrepancyType === 3" type="warning">状态不符</el-tag>
+          <el-tag v-else-if="discForm.discrepancyType === 4">重量偏差</el-tag>
+        </el-form-item>
+        <el-form-item label="原因分析" prop="reasonAnalysis">
+          <el-input v-model="discForm.reasonAnalysis" type="textarea" :rows="3" placeholder="请输入原因分析" />
+        </el-form-item>
+        <el-form-item label="处理建议" prop="processSuggestion">
+          <el-input v-model="discForm.processSuggestion" type="textarea" :rows="3" placeholder="请输入处理建议" />
+        </el-form-item>
+        <el-form-item label="处理结果" prop="processResult">
+          <el-input v-model="discForm.processResult" type="textarea" :rows="3" placeholder="请输入处理结果" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button :loading="discButtonLoading" type="primary" @click="submitDiscrepancyForm">确 定</el-button>
+        <el-button @click="discDialogVisible = false">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { listCountPlan, getCountPlan, addCountPlan, updateCountPlan, delCountPlan } from "@/api/flow/countPlan";
+import { listCountPlanWarehouse, addCountPlanWarehouse, delCountPlanWarehouse, updateCountPlanWarehouse } from "@/api/flow/countPlanWarehouse";
+import { listCountDiscrepancy, updateCountDiscrepancy } from "@/api/flow/countDiscrepancy";
+import { exportCoilWithAll } from "@/api/wms/coil";
+import { uploadFile } from "@/api/system/oss";
+import DragResizePanel from "@/components/DragResizePanel/index.vue";
+import CountFlowSection from "./components/CountFlowSection.vue";
+import WarehouseSelect from "@/components/KLPService/WarehouseSelect/index.vue";
+import ActualWarehouseL1L2Select from "@/components/KLPService/ActualWarehouseL1L2Select/index.vue";
+import { parseTime } from '@/utils/klp'
+import * as XLSX from 'xlsx';
+import VueOfficeExcel from '@vue-office/excel'
+import '@vue-office/excel/lib/index.css'
+import { listByIds } from '@/api/system/oss'
+
+// 实盘Excel固定模板表头
+const INV_COUNT_TEMPLATE_HEADERS = [
+  '入场钢卷号', '当前钢卷号', '重量(kg)', '规格', '材质', '生产厂家', '品质', '实际库区', '长度', '备注'
+];
+const INV_COUNT_HEADER_MAP = {
+  '入场钢卷号': 'enterCoilNo',
+  '当前钢卷号': 'currentCoilNo',
+  '重量(kg)': 'netWeight',
+  '规格': 'specification',
+  '材质': 'material',
+  '生产厂家': 'manufacturer',
+  '品质': 'qualityStatus',
+  '实际库区': 'actualWarehouseName',
+  '长度': 'length',
+  '备注': 'remark'
+};
+// 对比用字段映射
+const COMPARE_FIELDS = [
+  { label: '重量(kg)', snapshotField: 'netWeight', physicalField: 'netWeight', isNumber: true },
+  { label: '规格', snapshotField: 'specification', physicalField: 'specification' },
+  { label: '材质', snapshotField: 'material', physicalField: 'material' },
+  { label: '生产厂家', snapshotField: 'manufacturer', physicalField: 'manufacturer' },
+  { label: '品质', snapshotField: 'qualityStatus', physicalField: 'qualityStatus' },
+  { label: '长度', snapshotField: 'length', physicalField: 'length', isNumber: true },
+];
+// 快照Excel中文表头 → 驼峰字段名
+const SNAPSHOT_COL_MAP = {
+  '入场卷号': 'enterCoilNo',
+  '成品卷号': 'currentCoilNo',
+  '重量': 'netWeight',
+  '规格': 'specification',
+  '材质': 'material',
+  '厂家': 'manufacturer',
+  '产品质量': 'qualityStatus',
+  '长度': 'length',
+  '逻辑库区': 'warehouseName',
+  '实际库区': 'actualWarehouseName',
+  '名称': 'itemName',
+  '班组': 'team',
+  '类型': 'itemTypeDesc',
+  '厂家卷号': 'supplierCoilNo',
+  '日期': 'createTime',
+  '备注': 'remark',
+  '锌层': 'zincLayer',
+  '表面处理': 'surfaceTreatmentDesc',
+  '调制度': 'temperGrade',
+  '镀层种类': 'coatingType',
+  '销售人员': 'saleName',
+  '合同编号': 'contractNo',
+  '库存状态': 'statusDesc',
+  '实测厚度': 'actualThickness',
+  '原料厚度': 'rawMaterialThickness',
+  '是否与订单相关': 'isRelatedToOrderText',
+  '发货时间': 'exportTime',
+  '发货人': 'exportBy',
+  '用途': 'purpose',
+  '切边要求': 'trimmingRequirement',
+  '包装种类': 'packagingRequirement',
+  '原料材质': 'packingStatus',
+  '物品ID': 'itemId',
+  '数据类型': 'dataTypeText',
+  '业务用途': 'businessPurpose',
+  '调拨类型': 'transferType',
+};
+
+export default {
+  name: "CountPlan",
+  components: { DragResizePanel, WarehouseSelect, ActualWarehouseL1L2Select, CountFlowSection, VueOfficeExcel },
+  data() {
+    return {
+      buttonLoading: false,
+      whButtonLoading: false,
+      discButtonLoading: false,
+      snapshotLoading: false,
+      loading: true,
+      detailLoading: false,
+      warehouseLoading: false,
+      total: 0,
+      dataList: [],
+      currentRow: null,
+      title: "",
+      open: false,
+      warehouseDialogVisible: false,
+      activeWarehouseIndex: '0',
+      activeSubTab: 'console',
+      previewDialogVisible: false,
+      previewUrl: '',
+      previewTitle: '',
+      _physicalDataCache: [],
+      _diffDone: {},
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        planCode: undefined,
+        planStatus: undefined
+      },
+      form: {},
+      warehouseList: [],
+      discrepancyMap: {},
+      discrepancyLoadingMap: {},
+      warehouseForm: {
+        warehouseId: undefined,
+        actualWarehouseId: undefined,
+        warehouseName: '',
+        actualWarehouseName: '',
+        ioStartTime: undefined,
+        ioEndTime: undefined
+      },
+      discForm: {},
+      uploadFileList: [],
+      // 实盘导入相关
+      importDialogVisible: false,
+      importWarehouse: null,
+      importFile: null,
+      importRawData: [],
+      importTableData: [],
+      importErrorList: [],
+      importValidated: false,
+      importing: false,
+      // 差异对比相关
+      diffLoading: false,
+      diffMissing: [],
+      diffExtra: [],
+      diffMismatch: [],
+      diffWeightThreshold: 0.5,
+      rules: {
+        planName: [{ required: true, message: "请输入盘库计划名称", trigger: "blur" }],
+        countDate: [{ required: true, message: "请选择盘库日期", trigger: "blur" }],
+        deadlineTime: [{ required: true, message: "请选择截止时间", trigger: "blur" }]
+      }
+    };
+  },
+  computed: {
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    parseTime,
+    getList() {
+      this.loading = true;
+      var self = this;
+      listCountPlan(this.queryParams).then(function(response) {
+        self.dataList = response.rows;
+        self.total = response.total;
+        self.loading = false;
+      });
+    },
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    handleRowClick(row) {
+      this.currentRow = row;
+      this.loadDetail(row.planId);
+    },
+    loadDetail(planId) {
+      this.detailLoading = true;
+      var self = this;
+      getCountPlan(planId).then(function(response) {
+        self.currentRow = response.data;
+        self.loadWarehouseList(planId);
+      }).finally(function() { self.detailLoading = false; });
+    },
+    loadWarehouseList(planId) {
+      this.warehouseLoading = true;
+      var self = this;
+      listCountPlanWarehouse({ planId: planId, pageNum: 1, pageSize: 999 }).then(function(r) {
+        self.warehouseList = r.rows || [];
+      }).finally(function() { self.warehouseLoading = false; });
+    },
+    handleViewDiscrepancy(row) {
+      var relId = row.relId;
+      if (this.discrepancyMap[relId]) {
+        return;
+      }
+      this.$set(this.discrepancyLoadingMap, relId, true);
+      var self = this;
+      listCountDiscrepancy({ relId: relId, pageNum: 1, pageSize: 999 }).then(function(r) {
+        self.$set(self.discrepancyMap, relId, r.rows || []);
+      }).finally(function() {
+        self.$set(self.discrepancyLoadingMap, relId, false);
+      });
+    },
+    handleRefreshDetail() {
+      if (this.currentRow && this.currentRow.planId) {
+        this.loadDetail(this.currentRow.planId);
+      }
+    },
+    handleAdd() {
+      this.reset();
+      this.open = true;
+      this.title = "新增盘库计划";
+    },
+    handleUpdate(row) {
+      this.reset();
+      var self = this;
+      var planId = row.planId;
+      getCountPlan(planId).then(function(response) {
+        self.form = response.data;
+        self.open = true;
+        self.title = "修改盘库计划";
+      });
+    },
+    reset() {
+      this.form = {
+        planId: undefined,
+        planCode: undefined,
+        planName: undefined,
+        countDate: undefined,
+        deadlineTime: undefined,
+        countUserId: undefined,
+        countUserName: undefined,
+        principalUserId: undefined,
+        principalUserName: undefined,
+        participantIds: undefined,
+        participantNames: undefined,
+        planStatus: undefined,
+        remark: undefined
+      };
+      this.resetForm("form");
+    },
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    submitForm() {
+      var self = this;
+      this.$refs["form"].validate(function(valid) {
+        if (valid) {
+          self.buttonLoading = true;
+          self.form.planCode = self.form.planName;
+          if (self.form.planId != null) {
+            updateCountPlan(self.form).then(function() {
+              self.$modal.msgSuccess("修改成功");
+              self.open = false;
+              self.getList();
+              if (self.currentRow && self.currentRow.planId === self.form.planId) {
+                self.loadDetail(self.currentRow.planId);
+              }
+            }).finally(function() { self.buttonLoading = false; });
+          } else {
+            addCountPlan(self.form).then(function() {
+              self.$modal.msgSuccess("新增成功");
+              self.open = false;
+              self.getList();
+            }).finally(function() { self.buttonLoading = false; });
+          }
+        }
+      });
+    },
+    handleDelete(row) {
+      var self = this;
+      this.$modal.confirm('是否确认删除盘库计划编号为"' + row.planCode + '"的数据项？').then(function() {
+        self.loading = true;
+        return delCountPlan(row.planId);
+      }).then(function() {
+        self.loading = false;
+        self.getList();
+        if (self.currentRow && self.currentRow.planId === row.planId) {
+          self.currentRow = null;
+          self.warehouseList = [];
+          self.discrepancyMap = {};
+        }
+        self.$modal.msgSuccess("删除成功");
+      }).catch(function() { }).finally(function() { self.loading = false; });
+    },
+    handleSubmitApproval() {
+      var self = this;
+      if (this.warehouseList.length === 0) {
+        this.$modal.msgWarning("请先绑定库区");
+        return;
+      }
+      this.$modal.confirm('确认提交盘库计划"' + this.currentRow.planCode + '"进行审批？').then(function() {
+        return updateCountPlan({ planId: self.currentRow.planId, planStatus: 1 });
+      }).then(function() {
+        self.$modal.msgSuccess("提交审批成功");
+        self.loadDetail(self.currentRow.planId);
+        self.getList();
+      }).catch(function() { });
+    },
+    handleStartCount() {
+      var self = this;
+      this.$modal.confirm('确认开始执行盘库计划"' + this.currentRow.planCode + '"？系统将自动保存当前时间节点的库存快照并统计系统总重量和总数量。').then(function() {
+        return updateCountPlan({ planId: self.currentRow.planId, planStatus: 2 });
+      }).then(function() {
+        self.$modal.msgSuccess("盘库已开始执行，系统已生成库存快照");
+        self.loadDetail(self.currentRow.planId);
+        self.getList();
+      }).catch(function() { });
+    },
+    // 打开导入实盘Excel对话框
+    handleUploadExcel(wh) {
+      this.importWarehouse = wh;
+      this.resetImportState();
+      this.importDialogVisible = true;
+    },
+    // ---- 导入相关方法 ----
+    handleImportFileChange(file) {
+      if (this.importing) return;
+      this.importFile = file.raw;
+      this.importValidated = false;
+      this.importRawData = [];
+      this.importTableData = [];
+      this.importErrorList = [];
+      this.readPhysicalExcel();
+    },
+    async readPhysicalExcel() {
+      if (!this.importFile) return;
+      try {
+        var fileReader = new FileReader();
+        fileReader.readAsArrayBuffer(this.importFile);
+        var self = this;
+        fileReader.onload = async function(e) {
+          try {
+            var data = new Uint8Array(e.target.result);
+            var workbook = XLSX.read(data, { type: 'array' });
+            var sheetName = workbook.SheetNames[0];
+            var worksheet = workbook.Sheets[sheetName];
+            var jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
+            self.validateInvHeaders(jsonData[0]);
+            self.importRawData = jsonData.slice(1).filter(function(row) { return row.length > 0; });
+            self.formatPhysicalExcel();
+            if (self.importErrorList.length === 0) {
+              self.$message.success('成功解析Excel，共读取到 ' + self.importRawData.length + ' 条数据');
+            }
+          } catch (error) {
+            self.$message.error('解析Excel失败：' + error.message);
+          }
+        };
+      } catch (error) {
+        this.$message.error('读取文件失败：' + error.message);
+      }
+    },
+    validateInvHeaders(headers) {
+      this.importErrorList = [];
+      if (!headers || headers.length < INV_COUNT_TEMPLATE_HEADERS.length) {
+        this.importErrorList.push({ rowNum: 1, errorMsg: '表头数量不匹配，要求至少' + INV_COUNT_TEMPLATE_HEADERS.length + '列' });
+        return;
+      }
+      for (var i = 0; i < INV_COUNT_TEMPLATE_HEADERS.length; i++) {
+        if (headers[i] !== INV_COUNT_TEMPLATE_HEADERS[i]) {
+          this.importErrorList.push({ rowNum: 1, errorMsg: '第' + (i + 1) + '列表头错误，要求："' + INV_COUNT_TEMPLATE_HEADERS[i] + '"，实际："' + (headers[i] || '') + '"' });
+        }
+      }
+      if (this.importErrorList.length > 0) {
+        this.$message.error('Excel表头格式不符合要求，请检查！');
+      }
+    },
+    formatPhysicalExcel() {
+      this.importTableData = [];
+      if (this.importRawData.length === 0) return;
+      var self = this;
+      this.importRawData.forEach(function(row, index) {
+        var rowNum = index + 2;
+        var rowObj = {};
+        INV_COUNT_TEMPLATE_HEADERS.forEach(function(header, colIdx) {
+          var field = INV_COUNT_HEADER_MAP[header];
+          rowObj[field] = row[colIdx] != null ? String(row[colIdx]).trim() : '';
+        });
+        rowObj.rowNum = rowNum;
+        self.importTableData.push(rowObj);
+      });
+    },
+    handleValidatePhysical() {
+      if (!this.importFile) { this.$message.warning('请先选择Excel文件'); return; }
+      if (this.importRawData.length === 0) { this.$message.warning('暂无数据可校验'); return; }
+      this.importValidated = true;
+      this.importErrorList = [];
+      var self = this;
+      this.importRawData.forEach(function(row, i) {
+        var rowNum = i + 2;
+        var rowObj = {};
+        INV_COUNT_TEMPLATE_HEADERS.forEach(function(header, colIdx) {
+          var field = INV_COUNT_HEADER_MAP[header];
+          rowObj[field] = row[colIdx] != null ? String(row[colIdx]).trim() : '';
+        });
+        if (!rowObj.enterCoilNo || rowObj.enterCoilNo.trim() === '') {
+          self.importErrorList.push({ rowNum: rowNum, errorMsg: '入场钢卷号不能为空' });
+        }
+        if (rowObj.netWeight && isNaN(Number(rowObj.netWeight))) {
+          self.importErrorList.push({ rowNum: rowNum, errorMsg: '重量必须是数字' });
+        }
+      });
+      if (this.importErrorList.length > 0) {
+        this.$message.error('数据校验失败，共发现' + this.importErrorList.length + '条错误');
+      } else {
+        this.$message.success('数据校验通过，可以导入');
+      }
+    },
+    async handleImportPhysical() {
+      if (this.importing) return;
+      if (!this.importFile || this.importTableData.length === 0) {
+        this.$message.warning('暂无数据');
+        return;
+      }
+      var self = this;
+      var confirmed = await this.$confirm('确认将实盘数据与快照进行对比？', '对比确认', {
+        confirmButtonText: '确认对比', cancelButtonText: '取消', type: 'warning'
+      }).catch(function() { return false; });
+      if (!confirmed) return;
+      this.importing = true;
+      try {
+        // 上传实盘Excel到MinIO并保存ossId到snapshotCoilStats
+        var uploadResp = await uploadFile(this.importFile);
+        var physicalOssId = uploadResp.data.ossId;
+        await updateCountPlanWarehouse({
+          relId: self.importWarehouse.relId,
+          snapshotCoilStats: physicalOssId
+        });
+        // 计算并保存实盘钢卷数量和总重量
+        var actualCount = this.importTableData.length;
+        var actualWeight = 0;
+        for (var k = 0; k < this.importTableData.length; k++) {
+          var w = this.importTableData[k].netWeight || 0;
+          actualWeight += Number(w) || 0;
+        }
+        await updateCountPlanWarehouse({
+          relId: self.importWarehouse.relId,
+          actualCoilCount: actualCount,
+          actualTotalWeight: Math.round(actualWeight * 100) / 100
+        });
+        // 保存实盘数据备份（对话框关闭时 resetImportState 会清空 importTableData）
+        this._physicalDataCache = this.importTableData.slice();
+        this.importDialogVisible = false;
+        this.activeSubTab = 'diff';
+        await self.handleCompareDiff(self.importWarehouse);
+      } catch (error) {
+        this.$message.error('对比失败：' + (error.message || '未知错误'));
+      } finally {
+        this.importing = false;
+      }
+    },
+    resetImportState() {
+      this.importFile = null;
+      this.importRawData = [];
+      this.importTableData = [];
+      this.importErrorList = [];
+      this.importValidated = false;
+      this.importing = false;
+      if (this.$refs.invUpload) {
+        this.$refs.invUpload.clearFiles();
+      }
+    },
+    downloadInvCountTemplate() {
+      var templateData = [INV_COUNT_TEMPLATE_HEADERS, ['LOT001', 'COIL001', 1000.5, '1.0*1000', 'Q235', '宝钢', '正品', 'A库区', 2000, '示例数据']];
+      var wb = XLSX.utils.book_new();
+      var ws = XLSX.utils.aoa_to_sheet(templateData);
+      ws['!cols'] = [{ wch: 14 }, { wch: 14 }, { wch: 12 }, { wch: 12 }, { wch: 10 }, { wch: 12 }, { wch: 10 }, { wch: 10 }, { wch: 10 }, { wch: 15 }];
+      XLSX.utils.book_append_sheet(wb, ws, '实盘导入模板');
+      XLSX.writeFile(wb, '盘库实盘导入模板.xlsx');
+    },
+    // ---- 差异对比方法 ----
+    async handleCompareDiff(wh) {
+      if (!wh) return;
+      var self = this;
+      // 必须有快照（逻辑或实际）和实盘文件才能对比
+      var snapOssId = wh.snapshotCoilLogic || wh.snapshotCoilActual;
+      if (!snapOssId) {
+        this.$message.warning('该库区尚未生成快照，请先生成快照');
+        return;
+      }
+      if (!wh.snapshotCoilStats) {
+        this.$message.warning('该库区尚未上传实盘数据，请先导入实盘Excel');
+        return;
+      }
+      this.diffLoading = true;
+      this.diffMissing = [];
+      this.diffExtra = [];
+      this.diffMismatch = [];
+      try {
+        // 1) 下载快照Excel（通过snapshotCoilLogic或snapshotCoilActual的ossId）
+        var ossRes = await listByIds(snapOssId);
+        var ossList = ossRes.data || ossRes.rows || [];
+        if (ossList.length === 0) throw new Error('未找到快照文件');
+        var snapshotUrl = ossList[0].url;
+        // 2) 下载并解析快照Excel
+        var snapResp = await fetch(snapshotUrl);
+        var snapBlob = await snapResp.blob();
+        var snapArrayBuf = await snapBlob.arrayBuffer();
+        var snapWorkbook = XLSX.read(new Uint8Array(snapArrayBuf), { type: 'array' });
+        var snapSheet = snapWorkbook.Sheets[snapWorkbook.SheetNames[0]];
+        var snapData = XLSX.utils.sheet_to_json(snapSheet);
+        // 快照Excel使用中文表头，转为驼峰字段名
+        snapData = snapData.map(function(row) {
+          var newRow = {};
+          Object.keys(SNAPSHOT_COL_MAP).forEach(function(zhKey) {
+            var camelKey = SNAPSHOT_COL_MAP[zhKey];
+            if (row[zhKey] !== undefined) {
+              newRow[camelKey] = row[zhKey];
+            }
+          });
+          return newRow;
+        });
+        // 3) 解析实盘Excel数据（已转为驼峰字段名）
+        var physicalData = this._physicalDataCache || this.importTableData.slice();
+        // 4) 以入场钢卷号+当前钢卷号做复合键（两个都一致才视为同一卷）
+        var snapMap = {};
+        snapData.forEach(function(item) {
+          var key = (item.enterCoilNo || '') + '|' + (item.currentCoilNo || '');
+          if (key !== '|') snapMap[key] = item;
+        });
+        var physicalMap = {};
+        physicalData.forEach(function(item) {
+          var key = (item.enterCoilNo || '') + '|' + (item.currentCoilNo || '');
+          if (key !== '|') physicalMap[key] = item;
+        });
+        // 5) 盘亏：快照有、实盘无
+        self.diffMissing = [];
+        Object.keys(snapMap).forEach(function(key) {
+          if (!physicalMap[key]) {
+            self.diffMissing.push(snapMap[key]);
+          }
+        });
+        // 6) 盘盈：实盘有、快照无
+        self.diffExtra = [];
+        Object.keys(physicalMap).forEach(function(key) {
+          if (!snapMap[key]) {
+            self.diffExtra.push(physicalMap[key]);
+          }
+        });
+        // 7) 字段不一致
+        self.diffMismatch = [];
+        Object.keys(snapMap).forEach(function(key) {
+          var snapItem = snapMap[key];
+          var physItem = physicalMap[key];
+          if (snapItem && physItem) {
+            var diffs = [];
+            COMPARE_FIELDS.forEach(function(f) {
+              var snapVal = snapItem[f.snapshotField];
+              var physVal = physItem[f.physicalField];
+              var isDiff = false;
+              if (f.isNumber) {
+                var sn = Number(snapVal) || 0;
+                var pn = Number(physVal) || 0;
+                isDiff = Math.abs(sn - pn) > self.diffWeightThreshold;
+              } else {
+                isDiff = String(snapVal || '').trim() !== String(physVal || '').trim();
+              }
+              if (isDiff) {
+                diffs.push({ label: f.label, snapshotValue: snapVal, physicalValue: physVal });
+              }
+            });
+            if (diffs.length > 0) {
+              self.diffMismatch.push({ enterCoilNo: snapItem.enterCoilNo || physItem.enterCoilNo, currentCoilNo: snapItem.currentCoilNo || physItem.currentCoilNo, diffs: diffs });
+            }
+          }
+        });
+      } catch (error) {
+        this.$message.error('对比失败：' + (error.message || '未知错误'));
+      } finally {
+        this.diffLoading = false;
+        // 标记对比完成
+        if (wh && wh.relId) {
+          this.$set(this._diffDone, wh.relId, true);
+        }
+      }
+    },
+    handleArchive() {
+      var self = this;
+      this.$modal.confirm('确认将盘库计划"' + this.currentRow.planCode + '"归档封存？归档后数据将不可修改。').then(function() {
+        return updateCountPlan({ planId: self.currentRow.planId, planStatus: 4 });
+      }).then(function() {
+        self.$modal.msgSuccess("盘库计划已归档");
+        self.loadDetail(self.currentRow.planId);
+        self.getList();
+      }).catch(function() { });
+    },
+    // 为单个库区生成快照
+    handleGenerateSnapshot(wh) {
+      var self = this;
+      var label = wh.warehouseName || wh.actualWarehouseName || '库区';
+      this.$modal.confirm('确认为库区"' + label + '"生成库存快照？').then(function() {
+        self.snapshotLoading = true;
+        return self.generateWarehouseSnapshot(wh);
+      }).then(function() {
+        self.$modal.msgSuccess('库区"' + label + '"快照已生成');
+        self.loadWarehouseList(self.currentRow.planId);
+      }).catch(function(err) {
+        if (err !== 'cancel') {
+          self.$modal.msgError(err.message || '快照生成失败');
+        }
+      }).finally(function() {
+        self.snapshotLoading = false;
+      });
+    },
+    // 为所有库区生成快照
+    handleGenerateAllSnapshots() {
+      var self = this;
+      this.$modal.confirm('确认为所有库区生成库存快照？').then(function() {
+        self.snapshotLoading = true;
+        return self.createSnapshot();
+      }).then(function() {
+        self.$modal.msgSuccess('全部库区快照已生成');
+        self.loadWarehouseList(self.currentRow.planId);
+      }).catch(function(err) {
+        if (err !== 'cancel') {
+          self.$modal.msgError(err.message || '快照生成失败');
+        }
+      }).finally(function() {
+        self.snapshotLoading = false;
+      });
+    },
+    // 生成库存快照（参考 action.vue 的 saveReportFile 逻辑）
+    // 支持传入单个 warehouse 单独生成，或不传则全部生成
+    async generateWarehouseSnapshot(warehouse) {
+      // 先收集所有需要导出的参数
+      var exports = [];
+      // 1) 逻辑库区钢卷明细快照 → snapshotCoilLogic
+      if (warehouse.warehouseId) {
+        exports.push({ key: 'snapshotCoilLogic', params: { warehouseIds: String(warehouse.warehouseId) }, label: '逻辑库区', isMain: true });
+      }
+      // 2) 实际库区钢卷明细快照 → snapshotCoilActual
+      if (warehouse.actualWarehouseId) {
+        exports.push({ key: 'snapshotCoilActual', params: { actualWarehouseIds: String(warehouse.actualWarehouseId) }, label: '实际库区', isMain: !warehouse.warehouseId });
+      }
+      // 3) 实际库区出入库记录快照 → snapshotIoRecord
+      if (warehouse.actualWarehouseId && warehouse.ioStartTime && warehouse.ioEndTime) {
+        exports.push({ key: 'snapshotIoRecord', params: { actualWarehouseIds: String(warehouse.actualWarehouseId), startTime: warehouse.ioStartTime, endTime: warehouse.ioEndTime }, label: 'IO记录' });
+      }
+
+      var mainResponse = null;
+      for (var exp of exports) {
+        var response = await exportCoilWithAll({
+          ...exp.params,
+          dataType: 1,
+          status: 0
+        });
+        var labelName = warehouse.warehouseName || warehouse.actualWarehouseName || warehouse.warehouseId || warehouse.actualWarehouseId || '';
+        var ossId = await this.uploadSnapshotBlob(
+          response,
+          this.currentRow.planCode + '_' + labelName + '_' + exp.label,
+          {}
+        );
+        var updateData = { relId: warehouse.relId };
+        updateData[exp.key] = ossId;
+        await updateCountPlanWarehouse(updateData);
+
+        if (exp.isMain) mainResponse = response;
+      }
+
+      // 计算并保存系统钢卷数量和总重量
+      if (mainResponse) {
+        var stats = await this.calcExcelStats(mainResponse);
+        await updateCountPlanWarehouse({
+          relId: warehouse.relId,
+          systemCoilCount: stats.count,
+          systemTotalWeight: stats.totalWeight
+        });
+      }
+    },
+    // 全部生成快照（可用于批量操作）
+    async createSnapshot() {
+      if (!this.warehouseList || this.warehouseList.length === 0) {
+        throw new Error('无可用的库区条件');
+      }
+      for (const warehouse of this.warehouseList) {
+        await this.generateWarehouseSnapshot(warehouse);
+      }
+    },
+    // 上传快照Excel到MinIO并保存文件记录，返回ossId
+    async uploadSnapshotBlob(response, label, extraParams) {
+      var file = new Blob([response], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
+      var fileName = label + '.xlsx';
+      var excelFile = new File([file], fileName, { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
+
+      var uploadResponse = await uploadFile(excelFile);
+
+      return uploadResponse.data.ossId;
+    },
+    // 解析导出Excel blob，计算钢卷数量和总重量
+    async calcExcelStats(response) {
+      var arrayBuf = await response.arrayBuffer();
+      var workbook = XLSX.read(new Uint8Array(arrayBuf), { type: 'array' });
+      var sheet = workbook.Sheets[workbook.SheetNames[0]];
+      var rows = XLSX.utils.sheet_to_json(sheet);
+      var count = rows.length;
+      var totalWeight = 0;
+      for (var i = 0; i < rows.length; i++) {
+        // 快照Excel用中文"重量"列，实盘导入用"重量(kg)"列
+        var w = rows[i]['重量'] || rows[i]['重量(kg)'] || rows[i].netWeight || 0;
+        totalWeight += Number(w) || 0;
+      }
+      return { count: count, totalWeight: Math.round(totalWeight * 100) / 100 };
+    },
+    handleAddWarehouse() {
+      this.warehouseForm = {
+        warehouseId: undefined,
+        actualWarehouseId: undefined,
+        warehouseName: '',
+        actualWarehouseName: '',
+        ioStartTime: undefined,
+        ioEndTime: undefined
+      };
+      this.warehouseDialogVisible = true;
+    },
+    // 切换仓库主tab时自动加载差异数据
+    handleWarehouseTabChange(tab) {
+      var idx = tab.name || tab;
+      var wh = this.warehouseList[parseInt(idx)];
+      if (wh) {
+        // 切换到概览子tab
+        this.activeSubTab = 'overview';
+        // 如果差异数据尚未加载，后台预加载
+        if (!this.discrepancyMap[wh.relId]) {
+          this.$nextTick(function() {
+            // 延迟加载，避免阻塞界面
+          });
+        }
+      }
+    },
+    // 快照预览：根据ossId获取URL并打开预览弹窗
+    handlePreview(ossId, label) {
+      var self = this;
+      this.previewTitle = '快照预览 - ' + label;
+      this.previewDialogVisible = true;
+      this.previewUrl = '';
+      listByIds(ossId).then(function(res) {
+        var list = res.data || res.rows || [];
+        if (list.length > 0) {
+          self.previewUrl = list[0].url;
+        } else {
+          self.$modal.msgError('未找到快照文件');
+          self.previewDialogVisible = false;
+        }
+      }).catch(function() {
+        self.$modal.msgError('获取快照文件失败');
+        self.previewDialogVisible = false;
+      });
+    },
+    handleExcelError(err) {
+      console.error('快照预览失败:', err);
+      this.$modal.msgError('Excel预览失败，请下载查看');
+    },
+    submitWarehouseForm() {
+      if (!this.warehouseForm.warehouseId && !this.warehouseForm.actualWarehouseId) {
+        this.$modal.msgWarning("请至少选择一个库区（逻辑库区或实际库区）");
+        return;
+      }
+      this.whButtonLoading = true;
+      var self = this;
+      var data = {
+        planId: this.currentRow.planId,
+        warehouseId: this.warehouseForm.warehouseId || undefined,
+        actualWarehouseId: this.warehouseForm.actualWarehouseId || undefined,
+        warehouseName: this.warehouseForm.warehouseName || undefined,
+        actualWarehouseName: this.warehouseForm.actualWarehouseName || undefined,
+        ioStartTime: this.warehouseForm.ioStartTime,
+        ioEndTime: this.warehouseForm.ioEndTime
+      };
+      addCountPlanWarehouse(data).then(function() {
+        self.$modal.msgSuccess("绑定库区成功");
+        self.warehouseDialogVisible = false;
+        self.loadWarehouseList(self.currentRow.planId);
+      }).finally(function() { self.whButtonLoading = false; });
+    },
+    // 选择逻辑库区时记录名称
+    handleWarehouseChange(val) {
+      if (val && this.$refs.whSelect) {
+        var options = this.$refs.whSelect.warehouseOptions || [];
+        var found = options.find(function(item) { return item.warehouseId === val; });
+        this.warehouseForm.warehouseName = found ? found.warehouseName : '';
+      } else {
+        this.warehouseForm.warehouseName = '';
+      }
+    },
+    // 选择实际库区时记录名称
+    handleActualWarehouseChange(val) {
+      if (val && this.$refs.actualWhSelect) {
+        var options = this.$refs.actualWhSelect.options || [];
+        var found = options.find(function(item) { return item.actualWarehouseId === val; });
+        this.warehouseForm.actualWarehouseName = found ? found.actualWarehouseName : '';
+      } else {
+        this.warehouseForm.actualWarehouseName = '';
+      }
+    },
+    handleRemoveWarehouse(row) {
+      var self = this;
+      this.$modal.confirm('确认移除库区关联"' + (row.warehouseName || row.actualWarehouseName || row.relId) + '"？').then(function() {
+        return delCountPlanWarehouse(row.relId);
+      }).then(function() {
+        self.$modal.msgSuccess("移除成功");
+        self.loadWarehouseList(self.currentRow.planId);
+      }).catch(function() { });
+    },
+    handleEditDiscrepancy(row) {
+      this.discForm = Object.assign({}, row);
+      this.discDialogVisible = true;
+    },
+    submitDiscrepancyForm() {
+      var self = this;
+      this.discButtonLoading = true;
+      updateCountDiscrepancy({
+        discrepancyId: this.discForm.discrepancyId,
+        reasonAnalysis: this.discForm.reasonAnalysis,
+        processSuggestion: this.discForm.processSuggestion,
+        processResult: this.discForm.processResult,
+        processStatus: this.discForm.processResult ? 2 : this.discForm.processStatus
+      }).then(function() {
+        self.$modal.msgSuccess("差异处理保存成功");
+        self.discDialogVisible = false;
+        var relId = self.discForm.relId;
+        if (relId) {
+          self.$set(self.discrepancyMap, relId, undefined);
+          self.handleViewDiscrepancy({ relId: relId });
+        }
+      }).finally(function() { self.discButtonLoading = false; });
+    }
+  }
+};
+</script>
+
+<style scoped>
+.count-container {
+  height: calc(100vh - 84px);
+}
+
+/* ========== 左侧面板 ========== */
+.left-panel {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: #f5f7fa;
+  border-right: 1px solid #e4e7ed;
+}
+
+.panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 14px 8px;
+  background: #f5f7fa;
+}
+
+.header-title {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 14px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.header-title i {
+  color: #409eff;
+  font-size: 16px;
+}
+
+.header-filter {
+  width: 130px;
+}
+
+.search-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0 14px 10px;
+  background: #f5f7fa;
+}
+
+.list-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0 6px;
+}
+
+.list-item {
+  display: flex;
+  align-items: center;
+  padding: 10px 12px;
+  margin-bottom: 2px;
+  cursor: pointer;
+  border-radius: 6px;
+  transition: all 0.15s;
+}
+
+.list-item:hover {
+  background: #ebeef5;
+}
+
+.list-item.active {
+  background: #d9ecff;
+}
+
+.list-item.active .item-title {
+  color: #409eff;
+  font-weight: 600;
+}
+
+.item-main {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+
+.item-title {
+  font-size: 13px;
+  font-weight: 500;
+  color: #303133;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.item-sub {
+  font-size: 12px;
+  color: #909399;
+}
+
+.item-meta {
+  flex-shrink: 0;
+  margin: 0 8px;
+}
+
+.item-actions {
+  flex-shrink: 0;
+  opacity: 0;
+  transition: opacity 0.15s;
+}
+
+.list-item:hover .item-actions {
+  opacity: 1;
+}
+
+.list-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 60px 0;
+  color: #c0c4cc;
+  font-size: 13px;
+  gap: 8px;
+}
+
+.list-empty i {
+  font-size: 32px;
+}
+
+.list-footer {
+  border-top: 1px solid #e4e7ed;
+  padding: 2px 8px 0;
+  background: #f5f7fa;
+}
+
+/* ========== 右侧面板 — Word 文档风格 ========== */
+.right-panel {
+  height: 100%;
+  overflow-y: auto;
+  padding: 12px 16px;
+  background: #faf8f5;
+}
+
+.right-panel .detail-content {
+  margin: 0 auto;
+  background: #ffffff;
+  padding: 28px 32px 36px;
+  box-shadow: 0 1px 4px rgba(0,0,0,0.06), 0 2px 12px rgba(0,0,0,0.04);
+  min-height: 100%;
+}
+
+.empty-tip {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: #909399;
+  font-size: 14px;
+  gap: 8px;
+}
+
+/* ===== 文档标题 ===== */
+.doc-header {
+  margin-bottom: 18px;
+  padding-bottom: 14px;
+  border-bottom: 2px solid #1a3c6e;
+}
+
+.doc-header-top {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.doc-title-group {
+  flex: 1;
+  min-width: 0;
+}
+
+.doc-title {
+  font-family: 'Georgia', 'Times New Roman', 'Noto Serif SC', 'SimSun', serif;
+  font-size: 24px;
+  font-weight: 700;
+  color: #1a1a1a;
+  line-height: 1.3;
+  letter-spacing: 0.5px;
+}
+
+.doc-subtitle {
+  font-family: 'Georgia', 'Times New Roman', serif;
+  font-size: 12px;
+  font-weight: 400;
+  color: #8c8c8c;
+  font-style: italic;
+  letter-spacing: 0.8px;
+  margin-top: 2px;
+}
+
+.doc-header-right {
+  flex-shrink: 0;
+}
+
+.doc-status-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 10px;
+}
+
+.doc-status-label {
+  font-family: 'Georgia', 'Times New Roman', serif;
+  font-size: 11px;
+  color: #8c8c8c;
+  letter-spacing: 0.3px;
+}
+
+/* ===== 元信息行 ===== */
+.detail-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  font-size: 12px;
+  color: #909399;
+  margin-bottom: 16px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid #e0dcd6;
+}
+
+.detail-meta span {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.detail-meta i {
+  font-size: 13px;
+}
+
+/* ===== 文档级通用 section 标题 ===== */
+.section-title {
+  font-family: 'Georgia', 'Times New Roman', 'Noto Serif SC', 'SimSun', serif;
+  width: 100%;
+  font-size: 15px;
+  font-weight: 700;
+  color: #1a1a1a;
+  margin: 22px 0 12px 0;
+  padding: 0 0 10px 0;
+  border-bottom: 1px solid #d4d0c8;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  letter-spacing: 0.3px;
+}
+
+.section-title:first-child {
+  margin-top: 0;
+}
+
+.section-title .en-sub {
+  font-size: 11px;
+  font-weight: 400;
+  color: #8c8c8c;
+  letter-spacing: 0.5px;
+  font-family: 'Georgia', 'Times New Roman', serif;
+  font-style: italic;
+}
+
+.section-title i {
+  font-size: 16px;
+  color: #1a3c6e;
+}
+
+/* ===== 流程操作按钮区 ===== */
+.flow-actions {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+/* ===== 备注区 ===== */
+.remark-content {
+  padding: 12px 16px;
+  background: #faf8f5;
+  border: 1px solid #e8e4de;
+  border-radius: 2px;
+  font-size: 13px;
+  line-height: 1.8;
+  color: #1a1a1a;
+}
+
+.section-gap {
+  height: 16px;
+}
+
+/* ===== 正式表格覆写 ===== */
+.right-panel .el-table {
+  border: 1px solid #e8e4de !important;
+  border-radius: 2px !important;
+  font-size: 12px !important;
+}
+
+.right-panel .el-table thead th {
+  background-color: #2c3e50 !important;
+  color: #ffffff !important;
+  font-weight: 600 !important;
+  font-size: 11px !important;
+  letter-spacing: 0.5px !important;
+  border-bottom: none !important;
+  font-family: 'Georgia', 'Times New Roman', serif;
+}
+
+.right-panel .el-table thead th .cell {
+  color: #ffffff !important;
+}
+
+.right-panel .el-table__body tr:hover > td {
+  background-color: #f7f5f0 !important;
+}
+
+.right-panel .el-table--border td {
+  border-right: 1px solid #f0ece6 !important;
+}
+
+.right-panel .el-table--border th {
+  border-right: 1px solid #3a5166 !important;
+}
+
+.right-panel .el-table td {
+  padding: 6px 4px !important;
+  color: #3a3a3a !important;
+}
+
+.right-panel .el-divider--horizontal {
+  margin: 8px 0 4px;
+  background-color: #e0dcd6;
+}
+
+.right-panel .el-tag {
+  border-radius: 2px;
+  font-family: 'Georgia', 'Times New Roman', serif;
+  letter-spacing: 0.3px;
+}
+
+.right-panel .el-tag--mini {
+  padding: 0 6px;
+  line-height: 20px;
+  height: 20px;
+}
+
+.right-panel .el-tag--small {
+  padding: 0 8px;
+}
+/* ===== 自定义 Tab — 完全原生 DOM ===== */
+
+/* 主Tab：仓库切换 */
+.doc-tabs {
+  font-family: 'Microsoft YaHei', '微软雅黑', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+}
+.doc-tabs-header {
+  display: flex;
+  align-items: stretch;
+  border-bottom: 1px solid #d4d0c8;
+  margin-bottom: 14px;
+  gap: 0;
+}
+.doc-tab-item {
+  position: relative;
+  padding: 8px 18px;
+  cursor: pointer;
+  color: #8c8c8c;
+  font-size: 13px;
+  font-weight: 500;
+  letter-spacing: 0.3px;
+  border-bottom: 2px solid transparent;
+  margin-bottom: -1px;
+  transition: color 0.2s, border-color 0.2s;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  user-select: none;
+}
+.doc-tab-item:hover {
+  color: #1a3c6e;
+}
+.doc-tab-item.active {
+  color: #1a3c6e;
+  font-weight: 600;
+  border-bottom-color: #1a3c6e;
+}
+.doc-tab-label {
+  white-space: nowrap;
+}
+.doc-tab-badge {
+  font-size: 11px;
+  color: #909399;
+  font-weight: 400;
+}
+.doc-tab-item.active .doc-tab-badge {
+  color: #1a3c6e;
+}
+.doc-tabs-empty {
+  padding: 8px 0;
+  color: #909399;
+  font-size: 13px;
+}
+.doc-tabs-content {
+  min-height: 100px;
+}
+
+/* 子Tab：概览 / 快照 / 差异明细 */
+.doc-sub-tabs {
+  font-family: 'Microsoft YaHei', '微软雅黑', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+}
+.doc-sub-tabs-header {
+  display: flex;
+  align-items: stretch;
+  border-bottom: 1px solid #e0dcd6;
+  margin-bottom: 0;
+  gap: 0;
+  padding-left: 0;
+}
+.doc-sub-tab-item {
+  position: relative;
+  padding: 5px 18px;
+  cursor: pointer;
+  color: #8c8c8c;
+  font-size: 12px;
+  font-weight: 400;
+  letter-spacing: 0.3px;
+  background: #f7f5f0;
+  border: 1px solid #e0dcd6;
+  border-bottom: 1px solid #e0dcd6;
+  margin-bottom: -1px;
+  margin-right: -1px;
+  transition: color 0.2s, background 0.2s, border-bottom-color 0.2s;
+  user-select: none;
+}
+.doc-sub-tab-item:first-child {
+  border-radius: 2px 0 0 0;
+}
+.doc-sub-tab-item:last-child {
+  border-radius: 0 2px 0 0;
+  margin-right: 0;
+}
+.doc-sub-tab-item:hover {
+  color: #1a3c6e;
+}
+.doc-sub-tab-item.active {
+  color: #1a3c6e;
+  font-weight: 600;
+  background: #ffffff;
+  border-bottom-color: #ffffff;
+}
+.doc-sub-tabs-content {
+  padding: 14px 0 0;
+}
+
+/* 概览/快照中 el-descriptions 与文档风格统一 */
+.right-panel .el-descriptions {
+  font-family: 'Georgia', 'Times New Roman', 'Noto Serif SC', serif;
+}
+.right-panel .el-descriptions__title {
+  font-family: 'Georgia', 'Times New Roman', 'Noto Serif SC', serif;
+  font-size: 13px;
+  color: #1a1a1a;
+  letter-spacing: 0.3px;
+}
+.right-panel .el-descriptions .is-bordered .el-descriptions__header {
+  background: #f7f5f0;
+}
+.right-panel .el-descriptions--small.is-bordered .el-descriptions__cell {
+  padding: 6px 12px;
+}
+.right-panel .el-descriptions__body .el-descriptions__table.is-bordered {
+  border-color: #e8e4de;
+}
+.right-panel .el-descriptions__body .el-descriptions__table.is-bordered td.el-descriptions__cell {
+  border-right: 1px solid #f0ece6;
+  color: #3a3a3a;
+  font-size: 12px;
+}
+.right-panel .el-descriptions__body .el-descriptions__table.is-bordered th.el-descriptions__cell {
+  background-color: #f7f5f0;
+  color: #1a1a1a;
+  font-weight: 600;
+  font-size: 11px;
+  letter-spacing: 0.3px;
+}
+
+/* ===== 导入对话框与差异对比 ===== */
+.import-container {
+  padding: 10px 0;
+}
+.file-upload-area {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+  margin-bottom: 16px;
+}
+.template-download {
+  margin-bottom: 16px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.template-tip {
+  font-size: 12px;
+  color: #909399;
+}
+.error-list {
+  margin-bottom: 16px;
+}
+.data-preview {
+  margin-bottom: 16px;
+}
+.diff-config {
+  background: #faf8f5;
+  border-radius: 2px;
+  padding: 10px 14px;
+  margin-bottom: 14px;
+  border: 1px solid #e8e4de;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+.diff-row {
+  margin-bottom: 14px;
+}
+.diff-section {
+  background: #fafafa;
+  border-radius: 2px;
+  padding: 12px;
+  margin-bottom: 14px;
+  border: 1px solid #e8e4de;
+}
+.section-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+  padding-bottom: 8px;
+  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: 13px;
+  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 {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+.diff-item {
+  display: flex;
+  gap: 12px;
+  padding: 4px 8px;
+  background: #f8f9fa;
+  border-radius: 2px;
+  border-left: 3px solid #e6a23c;
+  align-items: center;
+}
+.diff-item .field-label {
+  font-weight: 600;
+  color: #606266;
+  min-width: 60px;
+}
+.value-row {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.value-label {
+  color: #909399;
+  font-size: 11px;
+}
+.plan-value {
+  color: #606266;
+}
+.actual-value {
+  color: #f56c6c;
+}
+.empty-tip {
+  text-align: center;
+  padding: 20px;
+  color: #909399;
+  font-size: 13px;
+}
+
+/* ===== 操作台 ===== */
+.console-section {
+  padding: 4px 0;
+}
+.console-steps {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-bottom: 16px;
+}
+.console-step {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 12px 16px;
+  background: #faf8f5;
+  border: 1px solid #e8e4de;
+  border-radius: 2px;
+  transition: background 0.2s;
+}
+.console-step.done {
+  background: #f0f9eb;
+  border-color: #c2e7b0;
+}
+.step-icon {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  background: #e4e7ed;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  color: #909399;
+  flex-shrink: 0;
+}
+.console-step.done .step-icon {
+  background: #67c23a;
+  color: #fff;
+}
+.step-info {
+  flex: 1;
+  min-width: 0;
+}
+.step-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #303133;
+}
+.step-desc {
+  font-size: 12px;
+  color: #909399;
+  margin-top: 2px;
+}
+.console-step.done .step-desc {
+  color: #67c23a;
+}
+.console-result {
+  background: #faf8f5;
+  border: 1px solid #e8e4de;
+  border-radius: 2px;
+  padding: 14px 16px;
+}
+.result-header {
+  font-size: 13px;
+  font-weight: 600;
+  color: #1a1a1a;
+  margin-bottom: 10px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #e0dcd6;
+}
+.result-grid {
+  display: flex;
+  gap: 16px;
+}
+.result-item {
+  flex: 1;
+  padding: 10px;
+  border-radius: 2px;
+  font-size: 13px;
+  font-weight: 500;
+  text-align: center;
+}
+.result-item.miss {
+  background: #fef0f0;
+  color: #f56c6c;
+}
+.result-item.extra {
+  background: #f0f9eb;
+  color: #67c23a;
+}
+.result-item.diff {
+  background: #fdf6ec;
+  color: #e6a23c;
+}
+
+</style>
diff --git a/klp-ui/src/views/wms/post/eqp/approval.vue b/klp-ui/src/views/wms/post/eqp/approval.vue
new file mode 100644
index 000000000..5cdfa9ab2
--- /dev/null
+++ b/klp-ui/src/views/wms/post/eqp/approval.vue
@@ -0,0 +1,282 @@
+<template>
+  <div class="app-container count-container">
+    <DragResizePanel :initialSize="280" :minSize="280" :maxSize="600">
+      <template #panelA>
+        <div class="left-panel">
+          <div class="panel-header">
+            <div class="header-title">
+              <i class="el-icon-s-check"></i>
+              <span>维修审批</span>
+              <el-button size="mini" type="text" icon="el-icon-refresh" @click="getList" style="margin-left:4px;" title="刷新列表"></el-button>
+            </div>
+          </div>
+
+          <div class="search-row">
+            <el-input v-model="queryParams.planNo" placeholder="搜索计划编号..." clearable prefix-icon="el-icon-search"
+              size="small" @keyup.enter.native="handleQuery" @clear="handleQuery" />
+          </div>
+
+          <div v-loading="loading" class="list-body">
+            <div v-for="item in dataList" :key="item.planId" class="list-item"
+              :class="{ active: currentRow && currentRow.planId === item.planId }" @click="handleRowClick(item)">
+              <div class="item-main">
+                <span class="item-title">{{ item.planNo }}</span>
+                <span class="item-sub">{{ item.planName }}</span>
+              </div>
+              <div class="item-meta">
+                <el-tag size="mini">待审批</el-tag>
+              </div>
+              <div class="item-actions">
+                <el-button size="mini" type="text" icon="el-icon-view" @click.stop="handleRowClick(item)"></el-button>
+              </div>
+            </div>
+            <div v-if="dataList.length === 0 && !loading" class="list-empty">
+              <i class="el-icon-folder-opened"></i>
+              <span>暂无待审批维修计划</span>
+            </div>
+          </div>
+
+          <div class="list-footer">
+            <pagination :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
+              @pagination="getList" />
+          </div>
+        </div>
+      </template>
+
+      <template #panelB>
+        <div class="right-panel">
+          <div v-if="!currentRow" class="empty-tip">
+            <i class="el-icon-info"></i>
+            <span>请在左侧列表中选择一条维修计划进行审批</span>
+          </div>
+          <div v-else v-loading="detailLoading" class="detail-content">
+            <div class="doc-header">
+              <div class="doc-header-top">
+                <div class="doc-title-group">
+                  <div class="doc-title">{{ currentRow.planNo }}</div>
+                  <div class="doc-subtitle">Maintenance Plan · Approval</div>
+                </div>
+                <div class="doc-header-right">
+                  <el-button size="mini" type="text" icon="el-icon-refresh" @click="handleRefreshDetail" title="刷新详情">刷新</el-button>
+                </div>
+              </div>
+              <div class="doc-status-row">
+                <span class="doc-status-label">Approval / 状态：</span>
+                <el-tag size="small">待审批</el-tag>
+              </div>
+            </div>
+
+            <div class="detail-meta">
+              <span><i class="el-icon-document"></i>{{ currentRow.planName }}</span>
+              <span v-if="currentRow.repairType === 1">定期保养</span>
+              <span v-else-if="currentRow.repairType === 2">安全整改</span>
+              <span v-else-if="currentRow.repairType === 3">专项检修</span>
+              <span v-else-if="currentRow.repairType === 4">故障维修</span>
+              <span v-if="currentRow.priorityLevel === 2"><el-tag size="mini" type="danger">重要</el-tag></span>
+              <span v-if="currentRow.plannedStartTime"><i class="el-icon-time"></i>开始: {{ parseTime(currentRow.plannedStartTime, '{y}-{m}-{d}') }}</span>
+              <span v-if="currentRow.plannedEndTime"><i class="el-icon-time"></i>结束: {{ parseTime(currentRow.plannedEndTime, '{y}-{m}-{d}') }}</span>
+              <span v-if="currentRow.dutyDept"><i class="el-icon-s-home"></i>{{ currentRow.dutyDept }}</span>
+              <span v-if="currentRow.planOwner"><i class="el-icon-user-solid"></i>{{ currentRow.planOwner }}</span>
+              <span v-if="currentRow.budgetAmount"><i class="el-icon-money"></i>¥{{ currentRow.budgetAmount }}</span>
+            </div>
+
+            <el-divider />
+
+            <div class="section-title">
+              <span>计划说明 <span class="en-sub">· Description</span></span>
+            </div>
+            <div class="remark-content">{{ currentRow.planDescription || '无' }}</div>
+
+            <el-divider />
+
+            <div class="section-title">
+              <span>审批操作 <span class="en-sub">· Approval Actions</span></span>
+            </div>
+            <div class="flow-actions">
+              <el-button type="danger" size="small" icon="el-icon-close" :loading="rejectLoading" @click="handleReject">驳回</el-button>
+              <el-button type="primary" size="small" icon="el-icon-check" :loading="approveLoading" @click="handleApprove">审批通过</el-button>
+            </div>
+
+            <el-divider />
+
+            <div class="section-title">
+              <span>维修明细 <span class="en-sub">· Maintenance Details</span></span>
+            </div>
+            <el-table :data="detailList" border size="small" style="width:100%">
+              <el-table-column label="设备部件" align="center" prop="componentName" width="130" />
+              <el-table-column label="产线" align="center" prop="productionLine" width="110" />
+              <el-table-column label="类型" align="center" width="70">
+                <template slot-scope="scope">
+                  <el-tag v-if="scope.row.maintenanceCategory === 0" size="mini">保养</el-tag>
+                  <el-tag v-else-if="scope.row.maintenanceCategory === 1" size="mini" type="warning">维修</el-tag>
+                </template>
+              </el-table-column>
+              <el-table-column label="维修内容" align="center" prop="repairContent" min-width="150" show-overflow-tooltip />
+              <el-table-column label="负责人" align="center" prop="repairUser" width="90" />
+              <el-table-column label="计划日期" align="center" width="100">
+                <template slot-scope="scope">{{ parseTime(scope.row.itemPlanDate, '{y}-{m}-{d}') }}</template>
+              </el-table-column>
+              <el-table-column label="目标厂家" align="center" prop="targetManufacturer" width="110" />
+            </el-table>
+            <div v-if="detailList.length === 0" class="empty-data" style="margin-top:8px;">暂无维修明细</div>
+
+            <div class="section-gap" />
+            <div class="section-title">备注 <span class="en-sub">· Remarks</span></div>
+            <div class="remark-content">{{ currentRow.remark || '无' }}</div>
+          </div>
+        </div>
+      </template>
+    </DragResizePanel>
+  </div>
+</template>
+
+<script>
+import { listMaintenancePlan, getMaintenancePlan, updateMaintenancePlan } from "@/api/flow/maintenancePlan";
+import { listMaintenancePlanDetail } from "@/api/flow/maintenancePlanDetail";
+import DragResizePanel from "@/components/DragResizePanel/index.vue";
+import { parseTime } from '@/utils/klp'
+
+export default {
+  name: "EqpApproval",
+  components: { DragResizePanel },
+  data() {
+    return {
+      loading: false,
+      detailLoading: false,
+      approveLoading: false,
+      rejectLoading: false,
+      total: 0,
+      queryParams: { pageNum: 1, pageSize: 10, planNo: undefined, approvalStatus: 1 },
+      dataList: [],
+      currentRow: null,
+      detailList: []
+    };
+  },
+  created() { this.getList(); },
+  methods: {
+    parseTime,
+    getList() {
+      this.loading = true;
+      var self = this;
+      listMaintenancePlan(this.queryParams).then(function(response) {
+        self.dataList = response.rows;
+        self.total = response.total;
+        self.loading = false;
+      });
+    },
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    handleRowClick(row) {
+      this.currentRow = row;
+      this.loadDetail(row.planId);
+    },
+    loadDetail(planId) {
+      this.detailLoading = true;
+      var self = this;
+      getMaintenancePlan(planId).then(function(response) {
+        self.currentRow = response.data;
+        self.loadDetailList(planId);
+      }).finally(function() { self.detailLoading = false; });
+    },
+    loadDetailList(planId) {
+      var self = this;
+      listMaintenancePlanDetail({ planId: planId, pageNum: 1, pageSize: 999 }).then(function(r) {
+        self.detailList = r.rows || [];
+      });
+    },
+    handleRefreshDetail() {
+      if (this.currentRow && this.currentRow.planId) this.loadDetail(this.currentRow.planId);
+    },
+    handleApprove() {
+      var self = this;
+      this.$modal.confirm('确认通过"' + this.currentRow.planNo + '"的审批？').then(function() {
+        self.approveLoading = true;
+        return updateMaintenancePlan({ planId: self.currentRow.planId, approvalStatus: 2, planStatus: 1 });
+      }).then(function() {
+        self.$modal.msgSuccess("审批通过，维修计划已进入待维修状态");
+        self.approveLoading = false;
+        self.currentRow = null;
+        self.getList();
+      }).catch(function() { self.approveLoading = false; });
+    },
+    handleReject() {
+      var self = this;
+      this.$prompt('请输入驳回原因', '驳回审批', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        inputType: 'textarea',
+        inputValidator: function(val) { return val ? true : '驳回原因不能为空'; }
+      }).then(function({ value }) {
+        self.rejectLoading = true;
+        return updateMaintenancePlan({ planId: self.currentRow.planId, approvalStatus: 3, remark: value });
+      }).then(function() {
+        self.$modal.msgSuccess("已驳回");
+        self.rejectLoading = false;
+        self.currentRow = null;
+        self.getList();
+      }).catch(function() { self.rejectLoading = false; });
+    }
+  }
+};
+</script>
+
+<style scoped>
+.count-container { height: calc(100vh - 84px); }
+.left-panel { display: flex; flex-direction: column; height: 100%; background: #f5f7fa; border-right: 1px solid #e4e7ed; }
+.panel-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 8px; background: #f5f7fa; }
+.header-title { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: #303133; }
+.header-title i { color: #409eff; font-size: 16px; }
+.search-row { display: flex; align-items: center; gap: 6px; padding: 0 14px 10px; background: #f5f7fa; }
+.list-body { flex: 1; overflow-y: auto; padding: 0 6px; }
+.list-item { display: flex; align-items: center; padding: 10px 12px; margin-bottom: 2px; cursor: pointer; border-radius: 6px; transition: all 0.15s; }
+.list-item:hover { background: #ebeef5; }
+.list-item.active { background: #d9ecff; }
+.list-item.active .item-title { color: #409eff; font-weight: 600; }
+.item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
+.item-title { font-size: 13px; font-weight: 500; color: #303133; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.item-sub { font-size: 12px; color: #909399; }
+.item-meta { flex-shrink: 0; margin: 0 8px; }
+.item-actions { flex-shrink: 0; opacity: 0; transition: opacity 0.15s; }
+.list-item:hover .item-actions { opacity: 1; }
+.list-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 0; color: #c0c4cc; font-size: 13px; gap: 8px; }
+.list-empty i { font-size: 32px; }
+.list-footer { border-top: 1px solid #e4e7ed; padding: 2px 8px 0; background: #f5f7fa; }
+
+.right-panel { height: 100%; overflow-y: auto; padding: 12px 16px; background: #faf8f5; }
+.right-panel .detail-content { margin: 0 auto; background: #ffffff; padding: 28px 32px 36px; box-shadow: 0 1px 4px rgba(0,0,0,0.06), 0 2px 12px rgba(0,0,0,0.04); min-height: 100%; }
+.empty-tip { display: flex; align-items: center; justify-content: center; height: 100%; color: #909399; font-size: 14px; gap: 8px; }
+
+.doc-header { margin-bottom: 18px; padding-bottom: 14px; border-bottom: 2px solid #1a3c6e; }
+.doc-header-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
+.doc-title-group { flex: 1; min-width: 0; }
+.doc-title { font-family: 'Georgia', 'Times New Roman', 'Noto Serif SC', 'SimSun', serif; font-size: 24px; font-weight: 700; color: #1a1a1a; line-height: 1.3; letter-spacing: 0.5px; }
+.doc-subtitle { font-family: 'Georgia', 'Times New Roman', serif; font-size: 12px; font-weight: 400; color: #8c8c8c; font-style: italic; letter-spacing: 0.8px; margin-top: 2px; }
+.doc-header-right { flex-shrink: 0; }
+.doc-status-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
+.doc-status-label { font-family: 'Georgia', 'Times New Roman', serif; font-size: 11px; color: #8c8c8c; letter-spacing: 0.3px; }
+
+.detail-meta { display: flex; flex-wrap: wrap; gap: 16px; font-size: 12px; color: #909399; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid #e0dcd6; }
+.detail-meta span { display: inline-flex; align-items: center; gap: 4px; }
+.detail-meta i { font-size: 13px; }
+
+.section-title { font-family: 'Georgia', 'Times New Roman', 'Noto Serif SC', 'SimSun', serif; width: 100%; font-size: 15px; font-weight: 700; color: #1a1a1a; margin: 22px 0 12px 0; padding: 0 0 10px 0; border-bottom: 1px solid #d4d0c8; display: flex; align-items: center; gap: 10px; letter-spacing: 0.3px; }
+.section-title:first-child { margin-top: 0; }
+.section-title .en-sub { font-size: 11px; font-weight: 400; color: #8c8c8c; letter-spacing: 0.5px; font-family: 'Georgia', 'Times New Roman', serif; font-style: italic; }
+
+.flow-actions { display: flex; gap: 10px; flex-wrap: wrap; }
+.remark-content { padding: 12px 16px; background: #faf8f5; border: 1px solid #e8e4de; border-radius: 2px; font-size: 13px; line-height: 1.8; color: #1a1a1a; }
+.section-gap { height: 16px; }
+.empty-data { color: #8c8c8c; font-size: 13px; font-style: italic; }
+
+.right-panel .el-table { border: 1px solid #e8e4de !important; border-radius: 2px !important; font-size: 12px !important; }
+.right-panel .el-table thead th { background-color: #2c3e50 !important; color: #ffffff !important; font-weight: 600 !important; font-size: 11px !important; letter-spacing: 0.5px !important; border-bottom: none !important; font-family: 'Georgia', 'Times New Roman', serif; }
+.right-panel .el-table thead th .cell { color: #ffffff !important; }
+.right-panel .el-table__body tr:hover > td { background-color: #f7f5f0 !important; }
+.right-panel .el-table--border td { border-right: 1px solid #f0ece6 !important; }
+.right-panel .el-table--border th { border-right: 1px solid #3a5166 !important; }
+.right-panel .el-table td { padding: 6px 4px !important; color: #3a3a3a !important; }
+.right-panel .el-divider--horizontal { margin: 8px 0 4px; background-color: #e0dcd6; }
+.right-panel .el-tag { border-radius: 2px; font-family: 'Georgia', 'Times New Roman', serif; letter-spacing: 0.3px; }
+</style>
diff --git a/klp-ui/src/views/wms/post/eqp/execute.vue b/klp-ui/src/views/wms/post/eqp/execute.vue
new file mode 100644
index 000000000..ddb6af688
--- /dev/null
+++ b/klp-ui/src/views/wms/post/eqp/execute.vue
@@ -0,0 +1,342 @@
+<template>
+  <div class="app-container count-container">
+    <DragResizePanel :initialSize="280" :minSize="280" :maxSize="600">
+      <template #panelA>
+        <div class="left-panel">
+          <div class="panel-header">
+            <div class="header-title">
+              <i class="el-icon-s-promotion"></i>
+              <span>维修执行</span>
+              <el-button size="mini" type="text" icon="el-icon-refresh" @click="getList" style="margin-left:4px;" title="刷新列表"></el-button>
+            </div>
+            <el-select v-model="queryParams.planStatus" placeholder="执行状态" clearable size="mini" @change="handleQuery" class="header-filter">
+              <el-option label="待维修" :value="1" />
+              <el-option label="维修中" :value="2" />
+              <el-option label="已完成" :value="3" />
+            </el-select>
+          </div>
+
+          <div class="search-row">
+            <el-input v-model="queryParams.planNo" placeholder="搜索计划编号..." clearable prefix-icon="el-icon-search"
+              size="small" @keyup.enter.native="handleQuery" @clear="handleQuery" />
+          </div>
+
+          <div v-loading="loading" class="list-body">
+            <div v-for="item in dataList" :key="item.planId" class="list-item"
+              :class="{ active: currentRow && currentRow.planId === item.planId }" @click="handleRowClick(item)">
+              <div class="item-main">
+                <span class="item-title">{{ item.planNo }}</span>
+                <span class="item-sub">{{ item.planName }}</span>
+              </div>
+              <div class="item-meta">
+                <el-tag v-if="item.planStatus === 1" type="info" size="mini">待维修</el-tag>
+                <el-tag v-else-if="item.planStatus === 2" type="warning" size="mini">维修中</el-tag>
+                <el-tag v-else-if="item.planStatus === 3" type="success" size="mini">已完成</el-tag>
+              </div>
+              <div class="item-actions">
+                <el-button size="mini" type="text" icon="el-icon-view" @click.stop="handleRowClick(item)"></el-button>
+              </div>
+            </div>
+            <div v-if="dataList.length === 0 && !loading" class="list-empty">
+              <i class="el-icon-folder-opened"></i>
+              <span>暂无执行中的维修计划</span>
+            </div>
+          </div>
+
+          <div class="list-footer">
+            <pagination :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
+              @pagination="getList" />
+          </div>
+        </div>
+      </template>
+
+      <template #panelB>
+        <div class="right-panel">
+          <div v-if="!currentRow" class="empty-tip">
+            <i class="el-icon-info"></i>
+            <span>请在左侧列表中选择一条维修计划执行操作</span>
+          </div>
+          <div v-else v-loading="detailLoading" class="detail-content">
+            <div class="doc-header">
+              <div class="doc-header-top">
+                <div class="doc-title-group">
+                  <div class="doc-title">{{ currentRow.planNo }}</div>
+                  <div class="doc-subtitle">Maintenance Plan · Execution</div>
+                </div>
+                <div class="doc-header-right">
+                  <el-button size="mini" type="text" icon="el-icon-refresh" @click="handleRefreshDetail" title="刷新详情">刷新</el-button>
+                </div>
+              </div>
+              <div class="doc-status-row">
+                <span class="doc-status-label">Status / 状态：</span>
+                <el-tag v-if="currentRow.planStatus === 1" type="info" size="small">待维修</el-tag>
+                <el-tag v-else-if="currentRow.planStatus === 2" type="warning" size="small">维修中</el-tag>
+                <el-tag v-else-if="currentRow.planStatus === 3" type="success" size="small">已完成</el-tag>
+                <el-button v-if="canComplete" size="mini" type="success" plain icon="el-icon-circle-check" style="margin-left:12px;" @click="handleCompletePlan">完成计划</el-button>
+              </div>
+            </div>
+
+            <div class="detail-meta">
+              <span><i class="el-icon-document"></i>{{ currentRow.planName }}</span>
+              <span v-if="currentRow.repairType === 1">定期保养</span>
+              <span v-else-if="currentRow.repairType === 2">安全整改</span>
+              <span v-else-if="currentRow.repairType === 3">专项检修</span>
+              <span v-else-if="currentRow.repairType === 4">故障维修</span>
+              <span v-if="currentRow.dutyDept"><i class="el-icon-s-home"></i>{{ currentRow.dutyDept }}</span>
+              <span v-if="currentRow.planOwner"><i class="el-icon-user-solid"></i>{{ currentRow.planOwner }}</span>
+            </div>
+
+            <el-divider />
+
+            <div class="section-title">
+              <span>维修明细进度 <span class="en-sub">· Detail Progress</span></span>
+            </div>
+            <el-table :data="detailList" border size="small" style="width:100%">
+              <el-table-column label="设备部件" align="center" prop="componentName" width="120" />
+              <el-table-column label="产线" align="center" prop="productionLine" width="100" />
+              <el-table-column label="类型" align="center" width="60">
+                <template slot-scope="scope">
+                  <el-tag v-if="scope.row.maintenanceCategory === 0" size="mini">保养</el-tag>
+                  <el-tag v-else-if="scope.row.maintenanceCategory === 1" size="mini" type="warning">维修</el-tag>
+                </template>
+              </el-table-column>
+              <el-table-column label="维修内容" align="center" prop="repairContent" min-width="130" show-overflow-tooltip />
+              <el-table-column label="负责人" align="center" prop="repairUser" width="80" />
+              <el-table-column label="进度" align="center" width="160">
+                <template slot-scope="scope">
+                  <el-progress :percentage="scope.row.progressRate || 0" :status="scope.row.detailStatus === 2 ? 'success' : ''" :stroke-width="12" style="padding: 4px 0;" />
+                </template>
+              </el-table-column>
+              <el-table-column label="状态" align="center" width="80">
+                <template slot-scope="scope">
+                  <el-tag v-if="scope.row.detailStatus === 0" type="info" size="mini">未开始</el-tag>
+                  <el-tag v-else-if="scope.row.detailStatus === 1" type="warning" size="mini">进行中</el-tag>
+                  <el-tag v-else-if="scope.row.detailStatus === 2" type="success" size="mini">已完成</el-tag>
+                </template>
+              </el-table-column>
+              <el-table-column label="实际成本" align="center" width="100">
+                <template slot-scope="scope">¥{{ scope.row.actualCost || 0 }}</template>
+              </el-table-column>
+              <el-table-column label="操作" align="center" width="80" fixed="right" v-if="currentRow.planStatus !== 3">
+                <template slot-scope="scope">
+                  <el-button size="mini" type="text" icon="el-icon-edit" @click="handleEditProgress(scope.row)">进度</el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+            <div v-if="detailList.length === 0" class="empty-data" style="margin-top:8px;">暂无维修明细</div>
+
+            <div class="section-gap" />
+            <div class="section-title">备注 <span class="en-sub">· Remarks</span></div>
+            <div class="remark-content">{{ currentRow.remark || '无' }}</div>
+          </div>
+        </div>
+      </template>
+    </DragResizePanel>
+
+    <!-- 进度编辑弹窗 -->
+    <el-dialog title="更新维修进度" :visible.sync="progressDialogVisible" width="550px" append-to-body>
+      <el-form ref="progressForm" :model="progressForm" label-width="100px">
+        <el-form-item label="设备部件">
+          <span>{{ progressForm.componentName }}</span>
+        </el-form-item>
+        <el-form-item label="维修内容">
+          <span>{{ progressForm.repairContent }}</span>
+        </el-form-item>
+        <el-form-item label="完成进度" prop="progressRate">
+          <el-slider v-model="progressForm.progressRate" :min="0" :max="100" :step="5" show-input style="padding:0 10px;" />
+        </el-form-item>
+        <el-form-item label="完成状态" prop="detailStatus">
+          <el-select v-model="progressForm.detailStatus" placeholder="请选择" style="width:100%">
+            <el-option label="未开始" :value="0" />
+            <el-option label="进行中" :value="1" />
+            <el-option label="已完成" :value="2" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="实际成本(元)" prop="actualCost">
+          <el-input-number v-model="progressForm.actualCost" :min="0" :precision="2" style="width:100%" />
+        </el-form-item>
+        <el-form-item label="负责人" prop="repairUser">
+          <el-input v-model="progressForm.repairUser" placeholder="请输入维修负责人" />
+        </el-form-item>
+        <el-form-item label="完成时间" prop="completeTime" v-if="progressForm.detailStatus === 2">
+          <el-date-picker clearable v-model="progressForm.completeTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择完成时间" style="width:100%" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="progressDialogVisible = false">取 消</el-button>
+        <el-button type="primary" :loading="progressButtonLoading" @click="submitProgressForm">保 存</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { listMaintenancePlan, getMaintenancePlan, updateMaintenancePlan } from "@/api/flow/maintenancePlan";
+import { listMaintenancePlanDetail, updateMaintenancePlanDetail } from "@/api/flow/maintenancePlanDetail";
+import DragResizePanel from "@/components/DragResizePanel/index.vue";
+import { parseTime } from '@/utils/klp'
+
+export default {
+  name: "EqpExecute",
+  components: { DragResizePanel },
+  data() {
+    return {
+      loading: false,
+      detailLoading: false,
+      progressButtonLoading: false,
+      total: 0,
+      queryParams: { pageNum: 1, pageSize: 10, planNo: undefined, approvalStatus: 2, planStatus: undefined },
+      dataList: [],
+      currentRow: null,
+      detailList: [],
+      progressDialogVisible: false,
+      progressForm: {}
+    };
+  },
+  computed: {
+    canComplete() {
+      if (!this.currentRow || this.currentRow.planStatus === 3) return false;
+      if (this.detailList.length === 0) return false;
+      return this.detailList.every(function(d) { return d.detailStatus === 2; });
+    }
+  },
+  created() { this.getList(); },
+  methods: {
+    parseTime,
+    getList() {
+      this.loading = true;
+      var self = this;
+      listMaintenancePlan(this.queryParams).then(function(response) {
+        self.dataList = response.rows;
+        self.total = response.total;
+        self.loading = false;
+      });
+    },
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    handleRowClick(row) {
+      this.currentRow = row;
+      this.loadDetail(row.planId);
+    },
+    loadDetail(planId) {
+      this.detailLoading = true;
+      var self = this;
+      getMaintenancePlan(planId).then(function(response) {
+        self.currentRow = response.data;
+        self.loadDetailList(planId);
+      }).finally(function() { self.detailLoading = false; });
+    },
+    loadDetailList(planId) {
+      var self = this;
+      listMaintenancePlanDetail({ planId: planId, pageNum: 1, pageSize: 999 }).then(function(r) {
+        self.detailList = r.rows || [];
+      });
+    },
+    handleRefreshDetail() {
+      if (this.currentRow && this.currentRow.planId) this.loadDetail(this.currentRow.planId);
+    },
+    // ---- Progress editing ----
+    handleEditProgress(row) {
+      this.progressForm = Object.assign({}, row, {
+        completeTime: row.completeTime || undefined
+      });
+      this.progressDialogVisible = true;
+    },
+    submitProgressForm() {
+      var self = this;
+      var data = {
+        detailId: this.progressForm.detailId,
+        progressRate: this.progressForm.progressRate,
+        detailStatus: this.progressForm.detailStatus,
+        actualCost: this.progressForm.actualCost,
+        repairUser: this.progressForm.repairUser
+      };
+      if (this.progressForm.detailStatus === 2) {
+        data.completeTime = this.progressForm.completeTime || this.parseTime(new Date(), '{y}-{m}-{d} {h}:{i}:{s}');
+      }
+      this.progressButtonLoading = true;
+      updateMaintenancePlanDetail(data).then(function() {
+        self.$modal.msgSuccess("进度更新成功");
+        self.progressDialogVisible = false;
+        self.loadDetailList(self.currentRow.planId);
+      }).finally(function() { self.progressButtonLoading = false; });
+    },
+    // ---- Complete plan ----
+    handleCompletePlan() {
+      var self = this;
+      this.$modal.confirm('确认完成维修计划"' + this.currentRow.planNo + '"？').then(function() {
+        return updateMaintenancePlan({
+          planId: self.currentRow.planId,
+          planStatus: 3,
+          actualCompleteTime: self.parseTime(new Date(), '{y}-{m}-{d} {h}:{i}:{s}')
+        });
+      }).then(function() {
+        self.$modal.msgSuccess("维修计划已完成");
+        self.loadDetail(self.currentRow.planId);
+        self.getList();
+      }).catch(function() { });
+    }
+  }
+};
+</script>
+
+<style scoped>
+.count-container { height: calc(100vh - 84px); }
+.left-panel { display: flex; flex-direction: column; height: 100%; background: #f5f7fa; border-right: 1px solid #e4e7ed; }
+.panel-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 8px; background: #f5f7fa; }
+.header-title { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: #303133; }
+.header-title i { color: #409eff; font-size: 16px; }
+.header-filter { width: 120px; }
+.search-row { display: flex; align-items: center; gap: 6px; padding: 0 14px 10px; background: #f5f7fa; }
+.list-body { flex: 1; overflow-y: auto; padding: 0 6px; }
+.list-item { display: flex; align-items: center; padding: 10px 12px; margin-bottom: 2px; cursor: pointer; border-radius: 6px; transition: all 0.15s; }
+.list-item:hover { background: #ebeef5; }
+.list-item.active { background: #d9ecff; }
+.list-item.active .item-title { color: #409eff; font-weight: 600; }
+.item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
+.item-title { font-size: 13px; font-weight: 500; color: #303133; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.item-sub { font-size: 12px; color: #909399; }
+.item-meta { flex-shrink: 0; margin: 0 8px; }
+.item-actions { flex-shrink: 0; opacity: 0; transition: opacity 0.15s; }
+.list-item:hover .item-actions { opacity: 1; }
+.list-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 0; color: #c0c4cc; font-size: 13px; gap: 8px; }
+.list-empty i { font-size: 32px; }
+.list-footer { border-top: 1px solid #e4e7ed; padding: 2px 8px 0; background: #f5f7fa; }
+
+.right-panel { height: 100%; overflow-y: auto; padding: 12px 16px; background: #faf8f5; }
+.right-panel .detail-content { margin: 0 auto; background: #ffffff; padding: 28px 32px 36px; box-shadow: 0 1px 4px rgba(0,0,0,0.06), 0 2px 12px rgba(0,0,0,0.04); min-height: 100%; }
+.empty-tip { display: flex; align-items: center; justify-content: center; height: 100%; color: #909399; font-size: 14px; gap: 8px; }
+
+.doc-header { margin-bottom: 18px; padding-bottom: 14px; border-bottom: 2px solid #1a3c6e; }
+.doc-header-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
+.doc-title-group { flex: 1; min-width: 0; }
+.doc-title { font-family: 'Georgia', 'Times New Roman', 'Noto Serif SC', 'SimSun', serif; font-size: 24px; font-weight: 700; color: #1a1a1a; line-height: 1.3; letter-spacing: 0.5px; }
+.doc-subtitle { font-family: 'Georgia', 'Times New Roman', serif; font-size: 12px; font-weight: 400; color: #8c8c8c; font-style: italic; letter-spacing: 0.8px; margin-top: 2px; }
+.doc-header-right { flex-shrink: 0; }
+.doc-status-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
+.doc-status-label { font-family: 'Georgia', 'Times New Roman', serif; font-size: 11px; color: #8c8c8c; letter-spacing: 0.3px; }
+
+.detail-meta { display: flex; flex-wrap: wrap; gap: 16px; font-size: 12px; color: #909399; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid #e0dcd6; }
+.detail-meta span { display: inline-flex; align-items: center; gap: 4px; }
+.detail-meta i { font-size: 13px; }
+
+.section-title { font-family: 'Georgia', 'Times New Roman', 'Noto Serif SC', 'SimSun', serif; width: 100%; font-size: 15px; font-weight: 700; color: #1a1a1a; margin: 22px 0 12px 0; padding: 0 0 10px 0; border-bottom: 1px solid #d4d0c8; display: flex; align-items: center; gap: 10px; letter-spacing: 0.3px; }
+.section-title:first-child { margin-top: 0; }
+.section-title .en-sub { font-size: 11px; font-weight: 400; color: #8c8c8c; letter-spacing: 0.5px; font-family: 'Georgia', 'Times New Roman', serif; font-style: italic; }
+
+.remark-content { padding: 12px 16px; background: #faf8f5; border: 1px solid #e8e4de; border-radius: 2px; font-size: 13px; line-height: 1.8; color: #1a1a1a; }
+.section-gap { height: 16px; }
+.empty-data { color: #8c8c8c; font-size: 13px; font-style: italic; }
+
+.right-panel .el-table { border: 1px solid #e8e4de !important; border-radius: 2px !important; font-size: 12px !important; }
+.right-panel .el-table thead th { background-color: #2c3e50 !important; color: #ffffff !important; font-weight: 600 !important; font-size: 11px !important; letter-spacing: 0.5px !important; border-bottom: none !important; font-family: 'Georgia', 'Times New Roman', serif; }
+.right-panel .el-table thead th .cell { color: #ffffff !important; }
+.right-panel .el-table__body tr:hover > td { background-color: #f7f5f0 !important; }
+.right-panel .el-table--border td { border-right: 1px solid #f0ece6 !important; }
+.right-panel .el-table--border th { border-right: 1px solid #3a5166 !important; }
+.right-panel .el-table td { padding: 6px 4px !important; color: #3a3a3a !important; }
+.right-panel .el-divider--horizontal { margin: 8px 0 4px; background-color: #e0dcd6; }
+.right-panel .el-tag { border-radius: 2px; font-family: 'Georgia', 'Times New Roman', serif; letter-spacing: 0.3px; }
+</style>
diff --git a/klp-ui/src/views/wms/post/eqp/index.vue b/klp-ui/src/views/wms/post/eqp/index.vue
new file mode 100644
index 000000000..a3b573f35
--- /dev/null
+++ b/klp-ui/src/views/wms/post/eqp/index.vue
@@ -0,0 +1,666 @@
+<template>
+  <div class="app-container count-container">
+    <DragResizePanel :initialSize="280" :minSize="280" :maxSize="600">
+      <template #panelA>
+        <div class="left-panel">
+          <div class="panel-header">
+            <div class="header-title">
+              <i class="el-icon-s-tools"></i>
+              <span>维修计划</span>
+              <el-button size="mini" type="text" icon="el-icon-refresh" @click="getList" style="margin-left:4px;" title="刷新列表"></el-button>
+            </div>
+            <el-select v-model="queryParams.approvalStatus" placeholder="审批状态" clearable size="mini" @change="handleQuery" class="header-filter">
+              <el-option label="草稿" :value="0" />
+              <el-option label="已驳回" :value="3" />
+            </el-select>
+          </div>
+
+          <div class="search-row">
+            <el-input v-model="queryParams.planNo" placeholder="搜索计划编号..." clearable prefix-icon="el-icon-search"
+              size="small" @keyup.enter.native="handleQuery" @clear="handleQuery" />
+            <el-button type="primary" size="small" @click="handleAdd">
+              <i class="el-icon-plus"></i>
+            </el-button>
+          </div>
+
+          <div v-loading="loading" class="list-body">
+            <div v-for="item in dataList" :key="item.planId" class="list-item"
+              :class="{ active: currentRow && currentRow.planId === item.planId }" @click="handleRowClick(item)">
+              <div class="item-main">
+                <span class="item-title">{{ item.planNo }}</span>
+                <span class="item-sub">{{ item.planName }}</span>
+              </div>
+              <div class="item-meta">
+                <el-tag v-if="item.approvalStatus === 0" type="info" size="mini">草稿</el-tag>
+                <el-tag v-else-if="item.approvalStatus === 3" type="danger" size="mini">已驳回</el-tag>
+              </div>
+              <div class="item-actions">
+                <el-button size="mini" type="text" icon="el-icon-edit" @click.stop="handleUpdate(item)"></el-button>
+                <el-button size="mini" type="text" icon="el-icon-delete" @click.stop="handleDelete(item)"></el-button>
+              </div>
+            </div>
+            <div v-if="dataList.length === 0 && !loading" class="list-empty">
+              <i class="el-icon-folder-opened"></i>
+              <span>暂无维修计划数据</span>
+            </div>
+          </div>
+
+          <div class="list-footer">
+            <pagination :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
+              @pagination="getList" />
+          </div>
+        </div>
+      </template>
+
+      <template #panelB>
+        <div class="right-panel">
+          <div v-if="!currentRow" class="empty-tip">
+            <i class="el-icon-info"></i>
+            <span>请在左侧列表中选择一条维修计划查看详情</span>
+          </div>
+          <div v-else v-loading="detailLoading" class="detail-content">
+            <div class="doc-header">
+              <div class="doc-header-top">
+                <div class="doc-title-group">
+                  <div class="doc-title">{{ currentRow.planNo }}</div>
+                  <div class="doc-subtitle">Maintenance Plan</div>
+                </div>
+                <div class="doc-header-right">
+                  <el-button size="mini" type="text" icon="el-icon-refresh" @click="handleRefreshDetail" title="刷新详情">刷新</el-button>
+                  <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(currentRow)" v-if="currentRow.approvalStatus !== 2">编辑</el-button>
+                  <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(currentRow)" v-if="currentRow.approvalStatus !== 2">删除</el-button>
+                </div>
+              </div>
+              <div class="doc-status-row">
+                <span class="doc-status-label">Approval / 状态：</span>
+                <el-tag v-if="currentRow.approvalStatus === 0" type="info" size="small">草稿</el-tag>
+                <el-tag v-else-if="currentRow.approvalStatus === 1" size="small">待审批</el-tag>
+                <el-tag v-else-if="currentRow.approvalStatus === 2" type="success" size="small">已审批</el-tag>
+                <el-tag v-else-if="currentRow.approvalStatus === 3" type="danger" size="small">已驳回</el-tag>
+              </div>
+            </div>
+
+            <div class="detail-meta">
+              <span><i class="el-icon-document"></i>{{ currentRow.planName }}</span>
+              <span v-if="currentRow.repairType === 1">定期保养</span>
+              <span v-else-if="currentRow.repairType === 2">安全整改</span>
+              <span v-else-if="currentRow.repairType === 3">专项检修</span>
+              <span v-else-if="currentRow.repairType === 4">故障维修</span>
+              <span v-if="currentRow.priorityLevel === 1"><el-tag size="mini" type="info">普通</el-tag></span>
+              <span v-if="currentRow.priorityLevel === 2"><el-tag size="mini" type="danger">重要</el-tag></span>
+              <span v-if="currentRow.plannedStartTime"><i class="el-icon-time"></i>开始: {{ parseTime(currentRow.plannedStartTime, '{y}-{m}-{d}') }}</span>
+              <span v-if="currentRow.plannedEndTime"><i class="el-icon-time"></i>结束: {{ parseTime(currentRow.plannedEndTime, '{y}-{m}-{d}') }}</span>
+              <span v-if="currentRow.dutyDept"><i class="el-icon-s-home"></i>{{ currentRow.dutyDept }}</span>
+              <span v-if="currentRow.planOwner"><i class="el-icon-user-solid"></i>{{ currentRow.planOwner }}</span>
+              <span v-if="currentRow.budgetAmount"><i class="el-icon-money"></i>预算: ¥{{ currentRow.budgetAmount }}</span>
+            </div>
+
+            <el-divider />
+
+            <div class="section-title">
+              <span>计划说明 <span class="en-sub">· Description</span></span>
+            </div>
+            <div class="remark-content">{{ currentRow.planDescription || '无' }}</div>
+
+            <el-divider />
+
+            <div class="section-title">
+              <span>关联异常记录 <span class="en-sub">· Related Abnormal Records</span></span>
+              <el-button v-if="currentRow.approvalStatus === 0 || currentRow.approvalStatus === 3" size="mini" type="primary" plain icon="el-icon-plus" style="margin-left:8px;" @click="handleSelectAbnormalRecords">选择记录</el-button>
+            </div>
+            <el-table :data="abnormalList" border size="small" style="width:100%" v-loading="abnormalLoading">
+              <el-table-column label="设备部件" align="center" prop="partName" width="140" />
+              <el-table-column label="产线" align="center" prop="productionLine" width="120" />
+              <el-table-column label="班次" align="center" width="80">
+                <template slot-scope="scope">{{ scope.row.shift == 1 ? '白班' : '夜班' }}</template>
+              </el-table-column>
+              <el-table-column label="巡检时间" align="center" width="150">
+                <template slot-scope="scope">{{ parseTime(scope.row.inspectTime, '{y}-{m}-{d} {h}:{i}') }}</template>
+              </el-table-column>
+              <el-table-column label="异常描述" align="center" prop="abnormalDesc" min-width="160" show-overflow-tooltip />
+              <el-table-column label="操作" align="center" width="70" v-if="currentRow.approvalStatus === 0 || currentRow.approvalStatus === 3">
+                <template slot-scope="scope">
+                  <el-button size="mini" type="text" icon="el-icon-delete" @click="handleRemoveAbnormal(scope.row)"></el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+            <div v-if="abnormalList.length === 0 && !abnormalLoading" class="empty-data" style="margin-top:8px;">暂无关联异常记录</div>
+
+            <div class="section-gap" />
+
+            <div class="section-title">
+              <span>维修明细 <span class="en-sub">· Maintenance Details</span></span>
+              <el-button v-if="currentRow.approvalStatus === 0 || currentRow.approvalStatus === 3" size="mini" type="primary" plain icon="el-icon-plus" style="margin-left:8px;" @click="handleAddDetail">添加</el-button>
+            </div>
+            <el-table :data="detailList" border size="small" style="width:100%" v-loading="detailLoading">
+              <el-table-column label="设备部件" align="center" prop="componentName" width="130" />
+              <el-table-column label="产线" align="center" prop="productionLine" width="110" />
+              <el-table-column label="类型" align="center" width="70">
+                <template slot-scope="scope">
+                  <el-tag v-if="scope.row.maintenanceCategory === 0" size="mini">保养</el-tag>
+                  <el-tag v-else-if="scope.row.maintenanceCategory === 1" size="mini" type="warning">维修</el-tag>
+                </template>
+              </el-table-column>
+              <el-table-column label="维修内容" align="center" prop="repairContent" min-width="150" show-overflow-tooltip />
+              <el-table-column label="负责人" align="center" prop="repairUser" width="90" />
+              <el-table-column label="计划日期" align="center" width="100">
+                <template slot-scope="scope">{{ parseTime(scope.row.itemPlanDate, '{y}-{m}-{d}') }}</template>
+              </el-table-column>
+              <el-table-column label="目标厂家" align="center" prop="targetManufacturer" width="110" />
+              <el-table-column label="操作" align="center" width="100" fixed="right" v-if="currentRow.approvalStatus === 0 || currentRow.approvalStatus === 3">
+                <template slot-scope="scope">
+                  <el-button size="mini" type="text" icon="el-icon-edit" @click="handleEditDetail(scope.row)"></el-button>
+                  <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDeleteDetail(scope.row)"></el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+            <div v-if="detailList.length === 0 && !detailLoading" class="empty-data" style="margin-top:8px;">暂无维修明细，请关联异常记录后自动生成或手动添加</div>
+
+            <div class="section-gap" />
+
+            <div v-if="currentRow.approvalStatus === 0 || currentRow.approvalStatus === 3" class="form-actions">
+              <el-button type="primary" :loading="submitLoading" icon="el-icon-s-promotion" @click="handleSubmitApproval">提交审批</el-button>
+            </div>
+          </div>
+        </div>
+      </template>
+    </DragResizePanel>
+
+    <!-- 新增/编辑计划弹窗 -->
+    <el-dialog :title="title" :visible.sync="open" width="650px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="110px">
+        <el-form-item label="计划名称" prop="planName">
+          <el-input v-model="form.planName" placeholder="请输入计划名称" />
+        </el-form-item>
+        <el-form-item label="维修类型" prop="repairType">
+          <el-select v-model="form.repairType" placeholder="请选择" style="width:100%">
+            <el-option label="定期保养" :value="1" />
+            <el-option label="安全整改" :value="2" />
+            <el-option label="专项检修" :value="3" />
+            <el-option label="故障维修" :value="4" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="优先级" prop="priorityLevel">
+          <el-select v-model="form.priorityLevel" placeholder="请选择" style="width:100%">
+            <el-option label="普通" :value="1" />
+            <el-option label="重要" :value="2" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="计划开始时间" prop="plannedStartTime">
+          <el-date-picker clearable v-model="form.plannedStartTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择" style="width:100%" />
+        </el-form-item>
+        <el-form-item label="计划结束时间" prop="plannedEndTime">
+          <el-date-picker clearable v-model="form.plannedEndTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择" style="width:100%" />
+        </el-form-item>
+        <el-form-item label="负责部门" prop="dutyDept">
+          <el-input v-model="form.dutyDept" placeholder="请输入负责部门" />
+        </el-form-item>
+        <el-form-item label="计划负责人" prop="planOwner">
+          <el-input v-model="form.planOwner" placeholder="请输入负责人" />
+        </el-form-item>
+        <el-form-item label="预算金额(元)" prop="budgetAmount">
+          <el-input-number v-model="form.budgetAmount" :min="0" :precision="2" style="width:100%" placeholder="请输入预算金额" />
+        </el-form-item>
+        <el-form-item label="计划说明" prop="planDescription">
+          <el-input v-model="form.planDescription" type="textarea" :rows="3" placeholder="请输入计划说明" />
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="form.remark" type="textarea" :rows="2" placeholder="请输入备注" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+
+    <!-- 选择异常巡检记录弹窗 -->
+    <el-dialog title="选择异常巡检记录" :visible.sync="abnormalSelectorVisible" width="800px" append-to-body>
+      <el-form :model="abnormalQuery" size="small" :inline="true" style="margin-bottom:12px;">
+        <el-form-item label="产线">
+          <el-select v-model="abnormalQuery.productionLine" placeholder="请选择" clearable @change="loadAbnormalRecords" style="width:140px;">
+            <el-option v-for="item in lineList" :key="item.lineId" :label="item.lineName" :value="item.lineId" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="巡检人">
+          <el-input v-model="abnormalQuery.inspector" placeholder="搜索" clearable style="width:120px;" @keyup.enter.native="loadAbnormalRecords" />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" size="mini" @click="loadAbnormalRecords">搜索</el-button>
+        </el-form-item>
+      </el-form>
+      <el-table ref="abnormalTable" :data="abnormalRecordList" border size="small" @selection-change="handleAbnormalSelectionChange" max-height="400">
+        <el-table-column type="selection" width="45" />
+        <el-table-column label="设备部件" align="center" prop="partName" width="130" />
+        <el-table-column label="产线" align="center" prop="productionLine" width="110" />
+        <el-table-column label="班次" align="center" width="70">
+          <template slot-scope="scope">{{ scope.row.shift == 1 ? '白班' : '夜班' }}</template>
+        </el-table-column>
+        <el-table-column label="巡检时间" align="center" prop="inspectTime" width="150">
+          <template slot-scope="scope">{{ parseTime(scope.row.inspectTime, '{y}-{m}-{d} {h}:{i}') }}</template>
+        </el-table-column>
+        <el-table-column label="异常描述" align="center" prop="abnormalDesc" min-width="160" show-overflow-tooltip />
+      </el-table>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="abnormalSelectorVisible = false">取 消</el-button>
+        <el-button type="primary" @click="confirmAbnormalSelection">确 定（已选 {{ abnormalSelectedRecords.length }} 条）</el-button>
+      </div>
+    </el-dialog>
+
+    <!-- 明细编辑弹窗 -->
+    <el-dialog :title="detailDialogTitle" :visible.sync="detailDialogVisible" width="550px" append-to-body>
+      <el-form ref="detailForm" :model="detailForm" label-width="110px">
+        <el-form-item label="设备部件" prop="componentName">
+          <el-input v-model="detailForm.componentName" placeholder="请输入设备部件名称" />
+        </el-form-item>
+        <el-form-item label="产线" prop="productionLine">
+          <el-select v-model="detailForm.productionLine" placeholder="请选择" clearable style="width:100%">
+            <el-option v-for="item in lineList" :key="item.lineId" :label="item.lineName" :value="item.lineName" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="明细类型" prop="maintenanceCategory">
+          <el-select v-model="detailForm.maintenanceCategory" placeholder="请选择" style="width:100%">
+            <el-option label="保养" :value="0" />
+            <el-option label="维修" :value="1" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="维修内容" prop="repairContent">
+          <el-input v-model="detailForm.repairContent" type="textarea" :rows="2" placeholder="请输入维修内容" />
+        </el-form-item>
+        <el-form-item label="负责人" prop="repairUser">
+          <el-input v-model="detailForm.repairUser" placeholder="请输入维修负责人" />
+        </el-form-item>
+        <el-form-item label="计划日期" prop="itemPlanDate">
+          <el-date-picker clearable v-model="detailForm.itemPlanDate" type="date" value-format="yyyy-MM-dd" placeholder="请选择" style="width:100%" />
+        </el-form-item>
+        <el-form-item label="目标厂家" prop="targetManufacturer">
+          <el-input v-model="detailForm.targetManufacturer" placeholder="请输入目标厂家" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="detailDialogVisible = false">取 消</el-button>
+        <el-button type="primary" :loading="detailButtonLoading" @click="submitDetailForm">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { listMaintenancePlan, getMaintenancePlan, addMaintenancePlan, updateMaintenancePlan, delMaintenancePlan } from "@/api/flow/maintenancePlan";
+import { listMaintenancePlanDetail, addMaintenancePlanDetail, updateMaintenancePlanDetail, delMaintenancePlanDetail } from "@/api/flow/maintenancePlanDetail";
+import { listMaintenancePlanAbnormal, addMaintenancePlanAbnormal, delMaintenancePlanAbnormal } from "@/api/flow/maintenancePlanAbnormal";
+import { listEquipmentInspectionRecord } from "@/api/mes/eqp/equipmentInspectionRecord";
+import { listProductionLine } from "@/api/wms/productionLine";
+import DragResizePanel from "@/components/DragResizePanel/index.vue";
+import { parseTime } from '@/utils/klp'
+
+export default {
+  name: "EqpMaintenance",
+  components: { DragResizePanel },
+  data() {
+    return {
+      loading: false,
+      detailLoading: false,
+      buttonLoading: false,
+      submitLoading: false,
+      abnormalLoading: false,
+      detailButtonLoading: false,
+      total: 0,
+      dataList: [],
+      currentRow: null,
+      title: "",
+      open: false,
+      form: {},
+      rules: {
+        planName: [{ required: true, message: "请输入计划名称", trigger: "blur" }],
+        repairType: [{ required: true, message: "请选择维修类型", trigger: "change" }]
+      },
+      queryParams: { pageNum: 1, pageSize: 10, planNo: undefined, approvalStatus: undefined },
+      // Abnormal records
+      abnormalList: [],
+      abnormalSelectorVisible: false,
+      abnormalQuery: { productionLine: undefined, inspector: undefined },
+      abnormalRecordList: [],
+      abnormalSelectedRecords: [],
+      lineList: [],
+      // Details
+      detailList: [],
+      detailDialogVisible: false,
+      detailDialogTitle: "",
+      detailForm: {},
+      editingDetailId: null
+    };
+  },
+  created() {
+    this.loadLineList();
+  },
+  methods: {
+    parseTime,
+    async loadLineList() {
+      try {
+        const res = await listProductionLine({ pageSize: 999 });
+        if (res.rows) this.lineList = res.rows;
+        this.getList();
+      } catch (e) { console.error('加载产线列表失败', e); }
+    },
+    getList() {
+      this.loading = true;
+      var self = this;
+      listMaintenancePlan(this.queryParams).then(function(response) {
+        self.dataList = response.rows;
+        self.total = response.total;
+        self.loading = false;
+      });
+    },
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    handleRowClick(row) {
+      this.currentRow = row;
+      this.loadDetail(row.planId);
+    },
+    loadDetail(planId) {
+      this.detailLoading = true;
+      var self = this;
+      getMaintenancePlan(planId).then(function(response) {
+        self.currentRow = response.data;
+        self.loadAbnormalList(planId);
+        self.loadDetailList(planId);
+      }).finally(function() { self.detailLoading = false; });
+    },
+    loadAbnormalList(planId) {
+      this.abnormalLoading = true;
+      var self = this;
+      listMaintenancePlanAbnormal({ planId: planId, pageNum: 1, pageSize: 999 }).then(function(r) {
+        var rows = r.rows || [];
+        // Enrich with inspection record info — query each record
+        self.abnormalList = rows;
+        self.abnormalLoading = false;
+      }).catch(function() { self.abnormalLoading = false; });
+    },
+    loadDetailList(planId) {
+      var self = this;
+      listMaintenancePlanDetail({ planId: planId, pageNum: 1, pageSize: 999 }).then(function(r) {
+        self.detailList = r.rows || [];
+      });
+    },
+    handleRefreshDetail() {
+      if (this.currentRow && this.currentRow.planId) {
+        this.loadDetail(this.currentRow.planId);
+      }
+    },
+    // ---- Plan CRUD ----
+    handleAdd() {
+      this.reset();
+      this.open = true;
+      this.title = "新增维修计划";
+    },
+    handleUpdate(row) {
+      this.reset();
+      var self = this;
+      getMaintenancePlan(row.planId).then(function(response) {
+        self.form = response.data;
+        self.open = true;
+        self.title = "修改维修计划";
+      });
+    },
+    reset() {
+      this.form = {
+        planId: undefined, planNo: undefined, planName: undefined,
+        repairType: undefined, priorityLevel: 1,
+        plannedStartTime: undefined, plannedEndTime: undefined,
+        dutyDept: undefined, planOwner: undefined,
+        budgetAmount: undefined, planDescription: undefined,
+        approvalStatus: 0, remark: undefined
+      };
+      this.resetForm("form");
+    },
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    submitForm() {
+      var self = this;
+      this.$refs["form"].validate(function(valid) {
+        if (valid) {
+          self.buttonLoading = true;
+          self.form.planNo = self.form.planNo || self.form.planName;
+          if (self.form.planId != null) {
+            updateMaintenancePlan(self.form).then(function() {
+              self.$modal.msgSuccess("修改成功");
+              self.open = false;
+              self.getList();
+              if (self.currentRow && self.currentRow.planId === self.form.planId) {
+                self.loadDetail(self.currentRow.planId);
+              }
+            }).finally(function() { self.buttonLoading = false; });
+          } else {
+            addMaintenancePlan(self.form).then(function(response) {
+              self.$modal.msgSuccess("新增成功");
+              self.open = false;
+              self.getList();
+            }).finally(function() { self.buttonLoading = false; });
+          }
+        }
+      });
+    },
+    handleDelete(row) {
+      var self = this;
+      this.$modal.confirm('是否确认删除维修计划"' + row.planNo + '"？').then(function() {
+        self.loading = true;
+        return delMaintenancePlan(row.planId);
+      }).then(function() {
+        self.loading = false;
+        self.getList();
+        if (self.currentRow && self.currentRow.planId === row.planId) {
+          self.currentRow = null;
+          self.abnormalList = [];
+          self.detailList = [];
+        }
+        self.$modal.msgSuccess("删除成功");
+      }).catch(function() { }).finally(function() { self.loading = false; });
+    },
+    // ---- Submit for approval ----
+    handleSubmitApproval() {
+      var self = this;
+      if (this.detailList.length === 0) {
+        this.$modal.msgWarning("请至少添加一条维修明细");
+        return;
+      }
+      this.$modal.confirm('确认提交维修计划"' + this.currentRow.planNo + '"进行审批？').then(function() {
+        self.submitLoading = true;
+        return updateMaintenancePlan({ planId: self.currentRow.planId, approvalStatus: 1 });
+      }).then(function() {
+        self.$modal.msgSuccess("提交审批成功");
+        self.submitLoading = false;
+        self.loadDetail(self.currentRow.planId);
+        self.getList();
+      }).catch(function() { self.submitLoading = false; });
+    },
+    // ---- Abnormal records selection ----
+    handleSelectAbnormalRecords() {
+      this.abnormalSelectedRecords = [];
+      this.abnormalQuery = { productionLine: undefined, inspector: undefined };
+      this.loadAbnormalRecords();
+      this.abnormalSelectorVisible = true;
+    },
+    loadAbnormalRecords() {
+      var self = this;
+      var params = {
+        pageNum: 1, pageSize: 999,
+        productionLine: this.abnormalQuery.productionLine,
+        inspector: this.abnormalQuery.inspector,
+        runStatus: 0 // 异常记录
+      };
+      listEquipmentInspectionRecord(params).then(function(response) {
+        self.abnormalRecordList = response.rows || [];
+      });
+    },
+    handleAbnormalSelectionChange(selection) {
+      this.abnormalSelectedRecords = selection;
+    },
+    confirmAbnormalSelection() {
+      if (this.abnormalSelectedRecords.length === 0) {
+        this.$modal.msgWarning("请至少选择一条异常记录");
+        return;
+      }
+      var self = this;
+      var planId = this.currentRow.planId;
+      var addPromises = this.abnormalSelectedRecords.map(function(rec) {
+        return addMaintenancePlanAbnormal({ planId: planId, recordId: rec.recordId });
+      });
+      // Also auto-create detail rows from selected records
+      this.$modal.loading("正在关联异常记录并生成维修明细...");
+      Promise.all(addPromises).then(function() {
+        // Create detail rows
+        var detailPromises = self.abnormalSelectedRecords.map(function(rec) {
+          return addMaintenancePlanDetail({
+            planId: planId,
+            recordId: rec.recordId,
+            componentName: rec.partName || '',
+            productionLine: rec.productionLine || '',
+            maintenanceCategory: 1,
+            detailStatus: 0
+          });
+        });
+        return Promise.all(detailPromises);
+      }).then(function() {
+        self.$modal.closeLoading();
+        self.$modal.msgSuccess("关联成功，已生成维修明细");
+        self.abnormalSelectorVisible = false;
+        self.loadAbnormalList(planId);
+        self.loadDetailList(planId);
+      }).catch(function() {
+        self.$modal.closeLoading();
+        self.$modal.msgError("操作失败");
+      });
+    },
+    handleRemoveAbnormal(row) {
+      var self = this;
+      this.$modal.confirm('确认移除该异常记录关联？').then(function() {
+        return delMaintenancePlanAbnormal(row.relId);
+      }).then(function() {
+        self.$modal.msgSuccess("移除成功");
+        self.loadAbnormalList(self.currentRow.planId);
+      }).catch(function() { });
+    },
+    // ---- Detail management ----
+    handleAddDetail() {
+      this.detailForm = {
+        planId: this.currentRow.planId,
+        componentName: '', productionLine: '',
+        maintenanceCategory: 1, repairContent: '',
+        repairUser: '', itemPlanDate: undefined,
+        targetManufacturer: '', detailStatus: 0
+      };
+      this.editingDetailId = null;
+      this.detailDialogTitle = "添加维修明细";
+      this.detailDialogVisible = true;
+    },
+    handleEditDetail(row) {
+      this.detailForm = Object.assign({}, row);
+      this.editingDetailId = row.detailId;
+      this.detailDialogTitle = "编辑维修明细";
+      this.detailDialogVisible = true;
+    },
+    submitDetailForm() {
+      if (!this.detailForm.componentName) {
+        this.$modal.msgWarning("请输入设备部件名称");
+        return;
+      }
+      var self = this;
+      this.detailButtonLoading = true;
+      if (this.editingDetailId) {
+        updateMaintenancePlanDetail(this.detailForm).then(function() {
+          self.$modal.msgSuccess("修改成功");
+          self.detailDialogVisible = false;
+          self.loadDetailList(self.currentRow.planId);
+        }).finally(function() { self.detailButtonLoading = false; });
+      } else {
+        addMaintenancePlanDetail(this.detailForm).then(function() {
+          self.$modal.msgSuccess("添加成功");
+          self.detailDialogVisible = false;
+          self.loadDetailList(self.currentRow.planId);
+        }).finally(function() { self.detailButtonLoading = false; });
+      }
+    },
+    handleDeleteDetail(row) {
+      var self = this;
+      this.$modal.confirm('确认删除该维修明细？').then(function() {
+        return delMaintenancePlanDetail(row.detailId);
+      }).then(function() {
+        self.$modal.msgSuccess("删除成功");
+        self.loadDetailList(self.currentRow.planId);
+      }).catch(function() { });
+    }
+  }
+};
+</script>
+
+<style scoped>
+.count-container { height: calc(100vh - 84px); }
+
+/* ========== 左侧面板 ========== */
+.left-panel { display: flex; flex-direction: column; height: 100%; background: #f5f7fa; border-right: 1px solid #e4e7ed; }
+.panel-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 8px; background: #f5f7fa; }
+.header-title { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: #303133; }
+.header-title i { color: #409eff; font-size: 16px; }
+.header-filter { width: 120px; }
+.search-row { display: flex; align-items: center; gap: 6px; padding: 0 14px 10px; background: #f5f7fa; }
+.list-body { flex: 1; overflow-y: auto; padding: 0 6px; }
+.list-item { display: flex; align-items: center; padding: 10px 12px; margin-bottom: 2px; cursor: pointer; border-radius: 6px; transition: all 0.15s; }
+.list-item:hover { background: #ebeef5; }
+.list-item.active { background: #d9ecff; }
+.list-item.active .item-title { color: #409eff; font-weight: 600; }
+.item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
+.item-title { font-size: 13px; font-weight: 500; color: #303133; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.item-sub { font-size: 12px; color: #909399; }
+.item-meta { flex-shrink: 0; margin: 0 8px; }
+.item-actions { flex-shrink: 0; opacity: 0; transition: opacity 0.15s; }
+.list-item:hover .item-actions { opacity: 1; }
+.list-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 0; color: #c0c4cc; font-size: 13px; gap: 8px; }
+.list-empty i { font-size: 32px; }
+.list-footer { border-top: 1px solid #e4e7ed; padding: 2px 8px 0; background: #f5f7fa; }
+
+/* ========== 右侧面板 — Word 文档风格 ========== */
+.right-panel { height: 100%; overflow-y: auto; padding: 12px 16px; background: #faf8f5; }
+.right-panel .detail-content { margin: 0 auto; background: #ffffff; padding: 28px 32px 36px; box-shadow: 0 1px 4px rgba(0,0,0,0.06), 0 2px 12px rgba(0,0,0,0.04); min-height: 100%; }
+.empty-tip { display: flex; align-items: center; justify-content: center; height: 100%; color: #909399; font-size: 14px; gap: 8px; }
+
+.doc-header { margin-bottom: 18px; padding-bottom: 14px; border-bottom: 2px solid #1a3c6e; }
+.doc-header-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
+.doc-title-group { flex: 1; min-width: 0; }
+.doc-title { font-family: 'Georgia', 'Times New Roman', 'Noto Serif SC', 'SimSun', serif; font-size: 24px; font-weight: 700; color: #1a1a1a; line-height: 1.3; letter-spacing: 0.5px; }
+.doc-subtitle { font-family: 'Georgia', 'Times New Roman', serif; font-size: 12px; font-weight: 400; color: #8c8c8c; font-style: italic; letter-spacing: 0.8px; margin-top: 2px; }
+.doc-header-right { flex-shrink: 0; }
+.doc-status-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
+.doc-status-label { font-family: 'Georgia', 'Times New Roman', serif; font-size: 11px; color: #8c8c8c; letter-spacing: 0.3px; }
+
+.detail-meta { display: flex; flex-wrap: wrap; gap: 16px; font-size: 12px; color: #909399; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid #e0dcd6; }
+.detail-meta span { display: inline-flex; align-items: center; gap: 4px; }
+.detail-meta i { font-size: 13px; }
+
+.section-title { font-family: 'Georgia', 'Times New Roman', 'Noto Serif SC', 'SimSun', serif; width: 100%; font-size: 15px; font-weight: 700; color: #1a1a1a; margin: 22px 0 12px 0; padding: 0 0 10px 0; border-bottom: 1px solid #d4d0c8; display: flex; align-items: center; gap: 10px; letter-spacing: 0.3px; }
+.section-title:first-child { margin-top: 0; }
+.section-title .en-sub { font-size: 11px; font-weight: 400; color: #8c8c8c; letter-spacing: 0.5px; font-family: 'Georgia', 'Times New Roman', serif; font-style: italic; }
+.section-title i { font-size: 16px; color: #1a3c6e; }
+
+.remark-content { padding: 12px 16px; background: #faf8f5; border: 1px solid #e8e4de; border-radius: 2px; font-size: 13px; line-height: 1.8; color: #1a1a1a; }
+.section-gap { height: 16px; }
+.empty-data { color: #8c8c8c; font-size: 13px; font-style: italic; }
+
+.form-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 0; border-top: 1px solid #e0dcd6; margin-top: 8px; }
+
+.right-panel .el-table { border: 1px solid #e8e4de !important; border-radius: 2px !important; font-size: 12px !important; }
+.right-panel .el-table thead th { background-color: #2c3e50 !important; color: #ffffff !important; font-weight: 600 !important; font-size: 11px !important; letter-spacing: 0.5px !important; border-bottom: none !important; font-family: 'Georgia', 'Times New Roman', serif; }
+.right-panel .el-table thead th .cell { color: #ffffff !important; }
+.right-panel .el-table__body tr:hover > td { background-color: #f7f5f0 !important; }
+.right-panel .el-table--border td { border-right: 1px solid #f0ece6 !important; }
+.right-panel .el-table--border th { border-right: 1px solid #3a5166 !important; }
+.right-panel .el-table td { padding: 6px 4px !important; color: #3a3a3a !important; }
+.right-panel .el-divider--horizontal { margin: 8px 0 4px; background-color: #e0dcd6; }
+.right-panel .el-tag { border-radius: 2px; font-family: 'Georgia', 'Times New Roman', serif; letter-spacing: 0.3px; }
+.right-panel .el-tag--mini { padding: 0 6px; line-height: 20px; height: 20px; }
+.right-panel .el-tag--small { padding: 0 8px; }
+</style>