From 97e0df7ae1d4d2aa14ca3d075dea9e321be66fea Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A0=82=E7=B3=96?= <2178503051@qq.com>
Date: Sat, 6 Jun 2026 17:56:13 +0800
Subject: [PATCH] =?UTF-8?q?refactor(aps/planSheet):=20=E9=87=8D=E6=9E=84?=
 =?UTF-8?q?=E6=8E=92=E4=BA=A7=E5=8D=95=E8=AF=A6=E6=83=85=E9=A1=B5=E4=B8=8E?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8=E9=A1=B5=EF=BC=8C=E6=9B=BF=E6=8D=A2=E5=8F=AF?=
 =?UTF-8?q?=E7=BC=96=E8=BE=91=E8=A1=A8=E6=A0=BC=E4=B8=BA=E6=96=87=E4=BB=B6?=
 =?UTF-8?q?=E4=B8=8A=E4=BC=A0=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1. 移除原排产单明细可编辑表格，替换为文件上传预览区域
2. 重构PlanSheetList组件，优化排产单筛选与展示UI
3. 新增排产单附件上传、预览、重新上传功能
4. 优化排产单列表的筛选、分页与操作交互
---
 .../src/views/aps/planSheet/PlanSheetList.vue |  675 +++---
 klp-ui/src/views/aps/planSheet/index copy.vue | 1854 +++++++++++++++++
 klp-ui/src/views/aps/planSheet/index.vue      |  432 ++--
 3 files changed, 2371 insertions(+), 590 deletions(-)
 create mode 100644 klp-ui/src/views/aps/planSheet/index copy.vue

diff --git a/klp-ui/src/views/aps/planSheet/PlanSheetList.vue b/klp-ui/src/views/aps/planSheet/PlanSheetList.vue
index 4d097f58..815e7310 100644
--- a/klp-ui/src/views/aps/planSheet/PlanSheetList.vue
+++ b/klp-ui/src/views/aps/planSheet/PlanSheetList.vue
@@ -1,91 +1,47 @@
 <template>
   <div v-loading="loading">
-    <div class="tab-container">
-      <div class="select-button" @click="openPlanSheetDialog">
-        <i class="el-icon-setting"></i>
-      </div>
-      <div class="custom-tabs">
-        <div class="tab-nav">
-          <button v-if="planSheetList.length > 0 && queryParams.pageNum > 1" class="nav-btn prev" @click="prevPage">
-            <i class="el-icon-arrow-left"></i>
-          </button>
-          <div class="tab-header">
-            <div v-for="planSheet in planSheetList" :key="planSheet.planSheetId" class="tab-item"
-              :class="{ active: activeTab === planSheet.planSheetId.toString() }" @click="handleTabClick(planSheet)">
-              <div class="tab-title">{{ planSheet.planCode }}</div>
-              <div class="tab-info">
-                <span>{{ planSheet.lineName }}</span>
-                <span class="date">{{ parseTime(planSheet.planDate, '{y}-{m}-{d}') }}</span>
-              </div>
-            </div>
-
-            <div v-if="planSheetList.length === 0" class="tab-item disabled">
-              <div class="tab-title">暂无排产单</div>
-              <div class="tab-info">请点击齿轮图标选择排产单</div>
-            </div>
-          </div>
-          <button v-if="planSheetList.length > 0 && queryParams.pageNum < totalPage" class="nav-btn next" @click="nextPage">
-            <i class="el-icon-arrow-right"></i>
-          </button>
+    <div class="filter-section">
+      <div class="filter-row">
+        <span class="filter-label">产线</span>
+        <div class="tab-scroll">
+          <span class="line-tab" :class="{ active: !filterParams.lineName }" @click="selectLine(undefined)">全部</span>
+          <span v-for="item in dict.type.sys_lines" :key="item.value" class="line-tab"
+            :class="{ active: filterParams.lineName === item.value }" @click="selectLine(item.value)">{{ item.label }}</span>
         </div>
       </div>
+
+      <div class="filter-row">
+        <span class="filter-label">日期</span>
+        <span class="date-tab" :class="{ active: !filterParams.planDate }" @click="selectDate(undefined)">全部</span>
+        <button class="arrow-btn" @click="prevDateWindow">
+          <i class="el-icon-arrow-left"></i>
+        </button>
+        <div class="tab-scroll">
+          <span v-for="date in dateTabs" :key="date" class="date-tab"
+            :class="{ active: filterParams.planDate === date, today: date === todayStr }"
+            @click="selectDate(date)">{{ formatDateShort(date) }}</span>
+        </div>
+        <button class="arrow-btn" @click="nextDateWindow">
+          <i class="el-icon-arrow-right"></i>
+        </button>
+        <el-button v-if="!readonly" type="success" icon="el-icon-plus" size="small" @click="handleAdd" style="margin-left:8px;">新增</el-button>
+      </div>
     </div>
 
-    <!-- 排产单选择对话框 -->
-    <el-dialog :title="'选择排产单'" :visible.sync="planSheetDialogVisible" width="900px" append-to-body>
-      <div class="dialog-toolbar">
-        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
-          <el-form-item label="排产日期" prop="planDate">
-            <el-date-picker clearable v-model="queryParams.planDate" type="date" value-format="yyyy-MM-dd"
-              placeholder="请选择排产日期">
-            </el-date-picker>
-          </el-form-item>
-          <el-form-item label="产线名称" prop="lineName">
-            <el-input v-model="queryParams.lineName" placeholder="请输入产线名称" clearable
-              @keyup.enter.native="handleQuery" />
-          </el-form-item>
-          <el-form-item label="排产单号" prop="planCode">
-            <el-input v-model="queryParams.planCode" placeholder="请输入排产单号" clearable
-              @keyup.enter.native="handleQuery" />
-          </el-form-item>
-          <el-form-item label="排产人" prop="scheduler">
-            <el-input v-model="queryParams.scheduler" placeholder="请输入排产人" clearable
-              @keyup.enter.native="handleQuery" />
-          </el-form-item>
-          <el-form-item>
-            <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
-              v-if="!readonly">新增</el-button>
-            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-          </el-form-item>
-        </el-form>
+    <div class="plan-tabs-container">
+      <div v-if="planSheetList.length > 0" class="plan-tabs">
+        <div v-for="ps in planSheetList" :key="ps.planSheetId" class="plan-tab"
+          :class="{ active: activeTab === ps.planSheetId.toString() }" @click="handlePlanClick(ps)">
+          <span class="plan-code-text">{{ ps.planCode }}</span>
+          <span v-if="!readonly" class="plan-icons">
+            <i class="el-icon-edit" title="编辑" @click.stop="handleUpdate(ps)"></i>
+            <i class="el-icon-delete" title="删除" @click.stop="handleDelete(ps)"></i>
+          </span>
+        </div>
       </div>
-      <el-table v-loading="loading" :data="allPlanSheetList" height="350px" @row-click="handleTabClick">
-        <el-table-column label="排产日期" align="center" prop="planDate" width="140">
-          <template slot-scope="scope">
-            <span>{{ parseTime(scope.row.planDate, '{y}-{m}-{d}') }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column label="产线名称" align="center" prop="lineName" />
-        <el-table-column label="排产单号" align="center" prop="planCode" />
-        <el-table-column label="排产人" align="center" prop="scheduler" />
-        <el-table-column label="备注" align="center" prop="remark" />
-        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200">
-          <template slot-scope="scope">
-            <el-button size="mini" type="text" icon="el-icon-download"
-              @click.stop="handleExport(scope.row)">导出</el-button>
-            <el-button v-if="!readonly" size="mini" type="text" icon="el-icon-edit"
-              @click.stop="handleUpdate(scope.row)">修改</el-button>
-            <el-button v-if="!readonly" size="mini" type="text" icon="el-icon-delete"
-              @click.stop="handleDelete(scope.row)">删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
-        @pagination="getList" />
-    </el-dialog>
+      <div v-else class="empty-hint">暂无排产单据</div>
+    </div>
 
-    <!-- 添加或修改排产单对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
         <el-form-item label="排产日期" prop="planDate">
@@ -131,165 +87,196 @@ export default {
       default: false
     }
   },
-  computed: {
-    totalPage() {
-      return Math.ceil(this.total / this.queryParams.pageSize)
-    }
-  },
   data() {
+    const now = new Date();
+    const y = now.getFullYear();
+    const m = String(now.getMonth() + 1).padStart(2, '0');
+    const d = String(now.getDate()).padStart(2, '0');
+    const today = `${y}-${m}-${d}`;
+    const start = new Date(now);
+    start.setDate(start.getDate() - 9);
+    const sy = start.getFullYear();
+    const sm = String(start.getMonth() + 1).padStart(2, '0');
+    const sd = String(start.getDate()).padStart(2, '0');
     return {
-      // 按钮loading
       buttonLoading: false,
-      // 遮罩层
-      loading: true,
-      // 总条数
-      total: 0,
-      // 排产单表格数据（用于tab展示）
-      planSheetList: [],
-      // 所有排产单数据（用于选择对话框）
-      allPlanSheetList: [],
-      // 弹出层标题
-      title: "",
-      // 是否显示添加/修改弹出层
-      open: false,
-      // 是否显示排产单选择弹出层
-      planSheetDialogVisible: false,
-      // 当前激活的tab
-      activeTab: '',
       loading: false,
-      // 查询参数
+      total: 0,
+      planSheetList: [],
+      title: "",
+      open: false,
+      activeTab: '',
+      dateWindowStart: `${sy}-${sm}-${sd}`,
+      filterParams: {
+        lineName: undefined,
+        planDate: today,
+      },
       queryParams: {
         pageNum: 1,
         pageSize: 10,
-        planDate: undefined,
-        lineId: undefined,
-        lineName: undefined,
-        planCode: undefined,
-        planType: undefined,
-        scheduler: undefined,
       },
-      // 表单参数
       form: {},
-      // 表单校验
       rules: {
-        planSheetId: [
-          { required: true, message: "排产单键ID不能为空", trigger: "blur" }
-        ],
         planDate: [
           { required: true, message: "排产日期不能为空", trigger: "blur" }
         ],
-        lineId: [
-          { required: true, message: "产线ID不能为空", trigger: "blur" }
-        ],
         lineName: [
           { required: true, message: "产线名称不能为空", trigger: "blur" }
         ],
         planCode: [
           { required: true, message: "排产单号不能为空", trigger: "blur" }
         ],
-        planType: [
-          { required: true, message: "排产类型不能为空", trigger: "change" }
-        ],
         scheduler: [
           { required: true, message: "排产人不能为空", trigger: "blur" }
         ],
       }
     };
   },
+  computed: {
+    todayStr() {
+      return this.formatISODate(new Date());
+    },
+    dateTabs() {
+      const dates = [];
+      for (let i = 0; i < 20; i++) {
+        dates.push(this.shiftDate(this.dateWindowStart, i));
+      }
+      return dates;
+    }
+  },
   created() {
     this.getList().then((list) => {
-      // 如果有数据，选中第一个
       if (list.length > 0) {
         this.activeTab = list[0].planSheetId.toString();
         if (this.selectFirst) {
-          this.handleRowClick(list[0]);
+          this.emitRowClick(list[0]);
         }
       }
     });
   },
   methods: {
-    parseTime(time, pattern) {
-      if (!time) return '';
-      const format = pattern || '{y}-{m}-{d} {h}:{i}:{s}';
-      const date = new Date(time);
-      const year = date.getFullYear();
-      const month = date.getMonth() + 1;
-      const day = date.getDate();
-      const hour = date.getHours();
-      const minute = date.getMinutes();
-      const second = date.getSeconds();
-      return format.replace('{y}', year)
-        .replace('{m}', month.toString().padStart(2, '0'))
-        .replace('{d}', day.toString().padStart(2, '0'))
-        .replace('{h}', hour.toString().padStart(2, '0'))
-        .replace('{i}', minute.toString().padStart(2, '0'))
-        .replace('{s}', second.toString().padStart(2, '0'));
+    formatISODate(date) {
+      const y = date.getFullYear();
+      const m = String(date.getMonth() + 1).padStart(2, '0');
+      const d = String(date.getDate()).padStart(2, '0');
+      return `${y}-${m}-${d}`;
+    },
+    shiftDate(dateStr, days) {
+      const d = new Date(dateStr);
+      d.setDate(d.getDate() + days);
+      return this.formatISODate(d);
+    },
+    formatDateShort(dateStr) {
+      const d = new Date(dateStr);
+      return `${d.getMonth() + 1}/${d.getDate()}`;
     },
-    /** 查询排产单列表 */
     async getList() {
       this.loading = true;
-      const response = await listPlanSheet(this.queryParams);
-      this.allPlanSheetList = response.rows;
-      this.total = response.total;
-      // 默认显示所有排产单
+      const params = { ...this.queryParams };
+      if (this.filterParams.lineName) {
+        params.lineName = this.filterParams.lineName;
+      }
+      if (this.filterParams.planDate) {
+        params.planDate = this.filterParams.planDate;
+      }
+      const response = await listPlanSheet(params);
       this.planSheetList = response.rows;
+      this.total = response.total;
       this.loading = false;
       return this.planSheetList;
     },
-    // 点击排产单行
-    handleRowClick(row) {
+    selectLine(lineName) {
+      this.filterParams.lineName = lineName;
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    selectDate(date) {
+      this.filterParams.planDate = date;
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    prevDateWindow() {
+      this.dateWindowStart = this.shiftDate(this.dateWindowStart, -7);
+    },
+    nextDateWindow() {
+      this.dateWindowStart = this.shiftDate(this.dateWindowStart, 7);
+    },
+    handlePlanClick(ps) {
+      this.activeTab = ps.planSheetId.toString();
+      this.emitRowClick(ps);
+    },
+    emitRowClick(row) {
       this.$emit('row-click', row);
     },
-    // 点击tab
-    handleTabClick(planSheet) {
-      this.activeTab = planSheet.planSheetId.toString();
-      this.planSheetDialogVisible = false;
-      this.handleRowClick(planSheet);
+    handleAdd() {
+      this.reset();
+      if (this.filterParams.lineName) {
+        this.form.lineName = this.filterParams.lineName;
+      }
+      if (this.filterParams.planDate) {
+        this.form.planDate = this.filterParams.planDate;
+      }
+      this.open = true;
+      this.title = "添加排产单";
     },
-    // 上一页
-    prevPage() {
-      if (this.queryParams.pageNum > 1) {
-        this.queryParams.pageNum--;
+    handleUpdate(row) {
+      this.loading = true;
+      this.reset();
+      const planSheetId = row.planSheetId;
+      getPlanSheet(planSheetId).then(response => {
+        this.loading = false;
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改排产单";
+      });
+    },
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          this.buttonLoading = true;
+          if (this.form.planSheetId != null) {
+            updatePlanSheet(this.form).then(() => {
+              this.$message({ message: "修改成功", type: "success" });
+              this.open = false;
+              this.getList();
+            }).finally(() => {
+              this.buttonLoading = false;
+            });
+          } else {
+            addPlanSheet(this.form).then(() => {
+              this.$message({ message: "新增成功", type: "success" });
+              this.open = false;
+              this.getList();
+            }).finally(() => {
+              this.buttonLoading = false;
+            });
+          }
+        }
+      });
+    },
+    handleDelete(row) {
+      const planSheetIds = row.planSheetId;
+      this.$confirm('是否确认删除排产单编号为"' + planSheetIds + '"的数据项？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.loading = true;
+        return delPlanSheet(planSheetIds);
+      }).then(() => {
+        this.loading = false;
         this.getList();
-      }
+        this.$message({ message: "删除成功", type: "success" });
+      }).catch(() => {
+      }).finally(() => {
+        this.loading = false;
+      });
     },
-    // 下一页
-    nextPage() {
-      if (this.queryParams.pageNum < this.totalPage) {
-        this.queryParams.pageNum++;
-        this.getList();
-      }
-
-    },
-    // 打开排产单选择对话框
-    openPlanSheetDialog() {
-      this.getList();
-      this.planSheetDialogVisible = true;
-    },
-    // 选择排产单行
-    handlePlanSheetSelect(row) {
-      this.$refs['queryForm'].$refs.table.toggleRowSelection(row);
-    },
-    // 确认选择排产单
-    confirmSelect() {
-      const selectedRows = this.$refs['queryForm'].$refs.table.selection;
-      if (selectedRows.length > 0) {
-        this.planSheetList = selectedRows;
-        this.activeTab = selectedRows[0].planSheetId.toString();
-        this.handleRowClick(selectedRows[0]);
-      }
-      this.planSheetDialogVisible = false;
-    },
-    // 取消按钮
     cancel() {
       this.open = false;
       this.reset();
     },
-    // 表单重置
     reset() {
-      // 日期默认选中今天 yyyy-MM-dd格式，北京时间
-      // planCode与日期格式一致，添加-HHmmss
-      // 排产人默认当前登录用户 this.$store.getters.nickName
       const now = new Date();
       const year = now.getFullYear();
       const month = String(now.getMonth() + 1).padStart(2, '0');
@@ -318,249 +305,173 @@ export default {
       };
       this.resetForm("form");
     },
-    // 重置表单
     resetForm(formName) {
       if (this.$refs[formName]) {
         this.$refs[formName].resetFields();
       }
     },
-    /** 搜索按钮操作 */
-    handleQuery() {
-      this.queryParams.pageNum = 1;
-      this.getList();
-    },
-    /** 重置按钮操作 */
-    resetQuery() {
-      this.resetForm("queryForm");
-      this.handleQuery();
-    },
-    /** 新增按钮操作 */
-    handleAdd() {
-      this.reset();
-      this.open = true;
-      this.title = "添加排产单";
-    },
-    /** 修改按钮操作 */
-    handleUpdate(row) {
-      this.loading = true;
-      this.reset();
-      const planSheetId = row.planSheetId;
-      getPlanSheet(planSheetId).then(response => {
-        this.loading = false;
-        this.form = response.data;
-        this.open = true;
-        this.title = "修改排产单";
-      });
-    },
-    /** 提交按钮 */
-    submitForm() {
-      this.$refs["form"].validate(valid => {
-        if (valid) {
-          this.buttonLoading = true;
-          if (this.form.planSheetId != null) {
-            updatePlanSheet(this.form).then(response => {
-              this.$message({
-                message: "修改成功",
-                type: "success"
-              });
-              this.open = false;
-              this.getList();
-            }).finally(() => {
-              this.buttonLoading = false;
-            });
-          } else {
-            addPlanSheet(this.form).then(response => {
-              this.$message({
-                message: "新增成功",
-                type: "success"
-              });
-              this.open = false;
-              this.getList();
-            }).finally(() => {
-              this.buttonLoading = false;
-            });
-          }
-        }
-      });
-    },
-    /** 删除按钮操作 */
-    handleDelete(row) {
-      const planSheetIds = row.planSheetId;
-      this.$confirm('是否确认删除排产单编号为"' + planSheetIds + '"的数据项？', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(() => {
-        this.loading = true;
-        return delPlanSheet(planSheetIds);
-      }).then(() => {
-        this.loading = false;
-        this.getList();
-        this.$message({
-          message: "删除成功",
-          type: "success"
-        });
-      }).catch(() => {
-      }).finally(() => {
-        this.loading = false;
-      });
-    },
-    /** 导出按钮操作 */
-    handleExport(row) {
-      this.download('aps/planSheet/exportAll', {
-        ...this.queryParams,
-        planSheetId: row.planSheetId,
-      }, `planSheet_${new Date().getTime()}.xlsx`);
-    },
   }
 };
 </script>
 
 <style scoped>
-.tab-container {
-  display: flex;
-  align-items: center;
-  margin-bottom: 20px;
+.filter-section {
+  margin-bottom: 10px;
 }
 
-.select-button {
+.filter-row {
   display: flex;
   align-items: center;
-  gap: 8px;
-  padding: 10px 16px;
-  border: 1px solid #e4e7ed;
-  border-radius: 4px;
+  margin-bottom: 4px;
+}
+
+.filter-label {
+  font-size: 12px;
+  color: #909399;
+  min-width: 32px;
+  margin-right: 6px;
+  flex-shrink: 0;
+}
+
+.tab-scroll {
+  display: flex;
+  align-items: center;
+  gap: 3px;
+  flex-wrap: wrap;
+}
+
+.line-tab,
+.date-tab {
+  padding: 2px 8px;
+  border: 1px solid #e8e8e8;
+  border-radius: 2px;
+  font-size: 12px;
   cursor: pointer;
-  transition: all 0.3s ease;
-  background-color: #f9f9f9;
-  color: #606266;
-  font-size: 14px;
+  color: #666;
+  background: #fff;
+  white-space: nowrap;
   user-select: none;
-  margin-right: 10px;
+  transition: all 0.15s;
+  line-height: 1.6;
+}
+
+.date-tab {
+  min-width: 44px;
+  text-align: center;
+}
+
+.line-tab:hover,
+.date-tab:hover {
   color: #409eff;
+  border-color: #409eff;
 }
 
-.select-button:hover {
-  background-color: #ecf5ff;
-  border-color: #c6e2ff;
+.line-tab.active,
+.date-tab.active {
   color: #409eff;
+  border-color: #409eff;
+  background: #ecf5ff;
 }
 
-.custom-tabs {
-  flex: 1;
-  border-bottom: 1px solid #e4e7ed;
+.date-tab.today:not(.active) {
+  border-color: #b3d8ff;
 }
 
-.tab-nav {
-  display: flex;
-  align-items: flex-end;
-  gap: 4px;
-}
-
-.nav-btn {
+.arrow-btn {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 32px;
-  height: 52px;
-  border: 1px solid #e4e7ed;
-  border-bottom: none;
-  border-radius: 4px 4px 0 0;
-  background-color: #f9f9f9;
+  width: 22px;
+  height: 22px;
+  border: 1px solid #e8e8e8;
+  border-radius: 2px;
+  background: #fff;
   cursor: pointer;
-  transition: all 0.3s ease;
-  color: #606266;
+  color: #999;
+  font-size: 10px;
+  flex-shrink: 0;
+  transition: all 0.15s;
+  margin: 0 2px;
 }
 
-.nav-btn:hover {
-  background-color: #ecf5ff;
-  border-color: #c6e2ff;
+.arrow-btn:hover {
   color: #409eff;
+  border-color: #409eff;
 }
 
-.nav-btn:disabled {
-  cursor: not-allowed;
-  opacity: 0.5;
+.plan-tabs-container {
+  margin-top: 8px;
 }
 
-.tab-header {
+.plan-tabs {
   display: flex;
   flex-wrap: wrap;
   gap: 4px;
-  flex: 1;
-  overflow: hidden;
 }
 
-.tab-pagination {
-  text-align: right;
+.plan-tab {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  padding: 3px 10px;
+  border: 1px solid #e8e8e8;
+  border-radius: 2px;
   font-size: 12px;
-  color: #909399;
-  margin-top: 4px;
-  margin-right: 8px;
-}
-
-.tab-item {
-  padding: 4px 4px;
-  border: 1px solid #e4e7ed;
-  border-bottom: none;
-  border-radius: 4px 4px 0 0;
   cursor: pointer;
-  transition: all 0.3s ease;
-  background-color: #f9f9f9;
-  min-width: 200px;
-}
-
-.tab-item:hover {
-  background-color: #ecf5ff;
-  border-color: #c6e2ff;
-}
-
-.tab-item.active {
-  background-color: #ffffff;
-  border-color: #409eff;
-  border-bottom-color: #ffffff;
-  color: #409eff;
-  box-shadow: 0 -2px 0 0 #409eff inset;
-}
-
-.tab-item.disabled {
-  cursor: not-allowed;
-  background-color: #f5f7fa;
-  color: #c0c4cc;
-  border-color: #ebeef5;
-}
-
-.tab-title {
-  font-size: 14px;
-  font-weight: 500;
-  margin-bottom: 1px;
+  background: #fff;
+  color: #333;
   white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  user-select: none;
+  transition: all 0.15s;
 }
 
-.tab-info {
-  font-size: 12px;
-  color: #909399;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
+.plan-tab:hover {
+  border-color: #c6e2ff;
+  background: #f5f7fa;
 }
 
-.tab-info .date {
-  color: #606266;
-  font-weight: 400;
+.plan-tab.active {
+  color: #409eff;
+  border-color: #409eff;
+  background: #ecf5ff;
 }
 
-.empty-content {
-  padding: 40px;
+.plan-code-text {
+  font-weight: 500;
+}
+
+.plan-icons {
+  display: inline-flex;
+  gap: 1px;
+  margin-left: 1px;
+}
+
+.plan-icons i {
+  font-size: 11px;
+  color: #bbb;
+  padding: 1px;
+  border-radius: 2px;
+  transition: all 0.15s;
+}
+
+.plan-icons i:hover {
+  color: #409eff;
+  background: rgba(64, 158, 255, 0.08);
+}
+
+.plan-tab.active .plan-icons i {
+  color: #79bbff;
+}
+
+.plan-tab.active .plan-icons i:hover {
+  color: #fff;
+  background: rgba(255, 255, 255, 0.2);
+}
+
+.empty-hint {
   text-align: center;
-  color: #999;
+  color: #c0c4cc;
+  font-size: 12px;
+  padding: 24px 0;
 }
-
-.dialog-toolbar {
-  display: flex;
-  align-items: center;
-  margin-bottom: 15px;
-}
-</style>
\ No newline at end of file
+</style>
diff --git a/klp-ui/src/views/aps/planSheet/index copy.vue b/klp-ui/src/views/aps/planSheet/index copy.vue
new file mode 100644
index 00000000..1a4da1d6
--- /dev/null
+++ b/klp-ui/src/views/aps/planSheet/index copy.vue	
@@ -0,0 +1,1854 @@
+<template>
+  <div class="app-container">
+    <!-- 增加操作列用于打开弹窗选择排产单，选择后展示选择的排产单的信息 -->
+    <PlanSheetList @row-click="handleRowClick" />
+
+    <div v-if="currentPlanSheetId" class="plan-detail-container">
+      <!-- 排产单信息 -->
+      <div class="card-header">
+        <h3>{{ currentPlanSheetInfo.planSheetName || '排产单详情' }}</h3>
+        <div>
+          <el-button type="primary" plain @click="handleAdd">新增明细</el-button>
+          <el-button type="success" plain @click="handleBatchAdd">批量新增</el-button>
+          <el-button type="info" plain @click="handleImport">导入</el-button>
+          <el-button type="danger" plain @click="handleBatchDelete"
+            :disabled="selectedRows.length === 0">批量删除</el-button>
+          <el-button type="warning" plain @click="handleBatchTransfer"
+            :disabled="selectedRows.length === 0">批量转单</el-button>
+          <el-button type="info" plain @click="getList">刷新</el-button>
+        </div>
+      </div>
+      <div class="plan-info">
+        <el-row :gutter="20">
+          <el-col :span="6">
+            <span class="label">排产单号：</span>
+            <span>{{ currentPlanSheetInfo.planCode }}</span>
+          </el-col>
+          <el-col :span="6">
+            <span class="label">排产人：</span>
+            <span>{{ currentPlanSheetInfo.scheduler }}</span>
+          </el-col>
+          <el-col :span="6">
+            <span class="label">排产时间：</span>
+            <span>{{ currentPlanSheetInfo.planDate }}</span>
+          </el-col>
+          <el-col :span="6">
+            <span class="label">产线：</span>
+            <span>{{ currentPlanSheetInfo.lineName }}</span>
+          </el-col>
+        </el-row>
+      </div>
+
+      <!-- 可编辑表格 -->
+      <el-table v-loading="loading" :data="planDetailList" style="width: 100%" border
+        @selection-change="handleSelectionChange">
+        <!-- 多选列 -->
+        <el-table-column type="selection" width="55" fixed="left" />
+        <!-- 操作列 -->
+        <el-table-column label="操作" align="center" width="160" fixed="left">
+          <template slot-scope="scope">
+            <el-button type="primary" size="mini" @click="handleSave(scope.row)">保存</el-button>
+            <el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
+            <el-button type="success" size="mini" @click="handleTransfer(scope.row)">转单</el-button>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="序号" align="center" prop="bizSeqNo" width="80" fixed="left">
+          <template slot-scope="scope">
+            <el-input v-model="scope.row.bizSeqNo" style="background-color: #f5f7fa;" />
+            <!-- {{ scope.$index + 1 }} -->
+          </template>
+        </el-table-column>
+
+        <!-- 订单信息 -->
+        <el-table-column label="排产日期" align="center" prop="detailDate" width="120">
+          <template slot-scope="scope">
+            <el-input v-model="scope.row.detailDate" style="background-color: #fff3e6;" />
+          </template>
+        </el-table-column>
+        <el-table-column label="订单号" align="center" prop="orderCode" width="200">
+          <template slot-scope="scope">
+            <el-input v-model="scope.row.orderCode" style="background-color: #fff3e6;">
+              <template slot="append">
+                <el-button size="mini" @click.stop="openOrderDialog(scope.row)">选择</el-button>
+              </template>
+            </el-input>
+          </template>
+        </el-table-column>
+        <el-table-column label="合同号" align="center" prop="contractCode" width="150">
+          <template slot-scope="scope">
+            <el-input v-model="scope.row.contractCode" style="background-color: #fff3e6;" />
+          </template>
+        </el-table-column>
+        <el-table-column label="客户" align="center" prop="customerName" width="180">
+          <template slot-scope="scope">
+            <el-input v-model="scope.row.customerName" style="background-color: #fff3e6;" />
+          </template>
+        </el-table-column>
+        <el-table-column label="业务员" align="center" prop="salesman" width="120">
+          <template slot-scope="scope">
+            <el-input v-model="scope.row.salesman" style="background-color: #fff3e6;" />
+          </template>
+        </el-table-column>
+
+        <!-- 原料信息 -->
+        <el-table-column label="原料厂家" align="center" prop="rawManufacturer" width="120">
+          <template slot-scope="scope">
+            <el-input v-model="scope.row.rawManufacturer" style="background-color: #e6f7ff;" />
+          </template>
+        </el-table-column>
+        <el-table-column label="原料材质" align="center" prop="rawMaterial" width="120">
+          <template slot-scope="scope">
+            <el-input v-model="scope.row.rawMaterial" style="background-color: #e6f7ff;" />
+          </template>
+        </el-table-column>
+        <el-table-column label="原料厚度" align="center" prop="rawThick" width="100">
+          <template slot-scope="scope">
+            <el-input v-model="scope.row.rawThick" style="background-color: #e6f7ff;" />
+          </template>
+        </el-table-column>
+        <el-table-column label="原料宽度" align="center" prop="rawWidth" width="100">
+          <template slot-scope="scope">
+            <el-input v-model="scope.row.rawWidth" style="background-color: #e6f7ff;" />
+          </template>
+        </el-table-column>
+
+        <!-- 成品信息 -->
+        <el-table-column label="成品名称" align="center" prop="productName" width="170">
+          <template slot-scope="scope">
+            <el-input v-model="scope.row.productName" style="background-color: #f6ffed;">
+              <template slot="append">
+                <el-button size="mini" @click.stop="openOrderItemDialog(scope.row)"
+                  :disabled="!scope.row.orderId">选择</el-button>
+              </template>
+            </el-input>
+          </template>
+        </el-table-column>
+        <el-table-column label="成品材质" align="center" prop="productMaterial" width="120">
+          <template slot-scope="scope">
+            <el-input v-model="scope.row.productMaterial" style="background-color: #f6ffed;" />
+          </template>
+        </el-table-column>
+        <el-table-column label="成品镀层" align="center" prop="coatingG" width="120">
+          <template slot-scope="scope">
+            <el-input v-model="scope.row.coatingG" style="background-color: #f6ffed;" />
+          </template>
+        </el-table-column>
+
+        <el-table-column label="成品宽度" align="center" prop="productWidth" width="100">
+          <template slot-scope="scope">
+            <el-input v-model="scope.row.productWidth" style="background-color: #f6ffed;" />
+          </template>
+        </el-table-column>
+        <el-table-column label="轧制厚度" align="center" prop="rollingThick" width="100">
+          <template slot-scope="scope">
+            <el-input v-model="scope.row.rollingThick" style="background-color: #f6ffed;" />
+          </template>
+        </el-table-column>
+        <el-table-column label="标签厚度" align="center" prop="markCoatThick" width="120">
+          <template slot-scope="scope">
+            <el-input v-model="scope.row.markCoatThick" style="background-color: #f6ffed;" />
+          </template>
+        </el-table-column>
+        <el-table-column label="吨钢长度区间" align="center" prop="tonSteelLengthRange" width="120">
+          <template slot-scope="scope">
+            <el-input v-model="scope.row.tonSteelLengthRange" style="background-color: #f6ffed;" />
+          </template>
+        </el-table-column>
+        <el-table-column label="数量" align="center" prop="planQty" width="100">
+          <template slot-scope="scope">
+            <el-input v-model="scope.row.planQty" style="background-color: #f6ffed;" />
+          </template>
+        </el-table-column>
+        <el-table-column label="重量" align="center" prop="planWeight" width="100">
+          <template slot-scope="scope">
+            <el-input v-model="scope.row.planWeight" style="background-color: #f6ffed;" />
+          </template>
+        </el-table-column>
+        <el-table-column label="表面处理" align="center" prop="surfaceTreatmentDesc" width="100">
+          <template slot-scope="scope">
+            <MemoInput storageKey="surfaceTreatmentDesc" v-model="scope.row.surfaceTreatment"
+              style="background-color: #f6ffed;" />
+          </template>
+        </el-table-column>
+        <el-table-column label="切边要求" align="center" prop="widthReq" width="100">
+          <template slot-scope="scope">
+            <el-select v-model="scope.row.widthReq" style="width: 100%; background-color: #f6ffed;">
+              <el-option label="净边料" value="净边料" />
+              <el-option label="毛边料" value="毛边料" />
+            </el-select>
+          </template>
+        </el-table-column>
+        <el-table-column label="包装要求" align="center" prop="productPackaging" width="100">
+          <template slot-scope="scope">
+            <el-select v-model="scope.row.productPackaging" style="width: 100%; background-color: #f6ffed;">
+              <el-option label="裸包" value="裸包" />
+              <el-option label="普包" value="普包" />
+              <el-option label="简包" value="简包" />
+            </el-select>
+          </template>
+        </el-table-column>
+        <el-table-column label="宽度要求" align="center" prop="productEdgeReq" width="100">
+          <template slot-scope="scope">
+            <el-input v-model="scope.row.productEdgeReq" style="background-color: #f6ffed;" />
+          </template>
+        </el-table-column>
+        <el-table-column label="用途" align="center" prop="usageReq" width="100">
+          <template slot-scope="scope">
+            <el-input v-model="scope.row.usageReq" style="background-color: #f6ffed;" />
+          </template>
+        </el-table-column>
+
+        <!-- 生产信息 -->
+        <el-table-column label="开始时间" align="center" prop="startTime" width="180">
+          <template slot-scope="scope">
+            <el-date-picker v-model="scope.row.startTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
+              style="width: 100%; background-color: #fff0f6;" />
+          </template>
+        </el-table-column>
+        <el-table-column label="结束时间" align="center" prop="endTime" width="180">
+          <template slot-scope="scope">
+            <el-date-picker v-model="scope.row.endTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
+              style="width: 100%; background-color: #fff0f6;" />
+          </template>
+        </el-table-column>
+        <el-table-column label="后处理" align="center" prop="postProcess" width="100">
+          <template slot-scope="scope">
+            <el-input v-model="scope.row.postProcess" style="background-color: #fff0f6;" />
+          </template>
+        </el-table-column>
+        <el-table-column label="下工序" align="center" prop="nextProcess" width="100">
+          <template slot-scope="scope">
+            <el-input v-model="scope.row.nextProcess" style="background-color: #fff0f6;" />
+          </template>
+        </el-table-column>
+        <el-table-column label="取样" align="center" prop="sampleReq" width="100">
+          <template slot-scope="scope">
+            <el-select v-model="scope.row.sampleReq" style="width: 100%; background-color: #fff0f6;">
+              <el-option label="是" value="是" />
+              <el-option label="否" value="否" />
+            </el-select>
+          </template>
+        </el-table-column>
+        <el-table-column label="备注" align="center" prop="remark">
+          <template slot-scope="scope">
+            <el-input v-model="scope.row.remark" style="background-color: #fff0f6;" />
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
+        @pagination="getList" />
+    </div>
+    <el-empty v-else class="appempty" description="选择排产单查看详情" />
+
+    <!-- 选择订单对话框 -->
+    <el-dialog title="选择订单" :visible.sync="orderDialogVisible" width="80%" append-to-body>
+      <div class="order-dialog-content">
+        <!-- 筛选条件 -->
+        <el-form :model="orderQueryParams" ref="orderQueryForm" size="small" :inline="true" label-width="80px">
+          <el-form-item label="合同号" prop="contractCode">
+            <el-input v-model="orderQueryParams.contractCode" placeholder="请输入合同号" style="width: 180px" />
+          </el-form-item>
+          <el-form-item label="客户">
+            <el-input v-model="orderQueryParams.customerName" placeholder="请输入客户名称" style="width: 180px" />
+          </el-form-item>
+          <el-form-item label="业务员">
+            <el-input v-model="orderQueryParams.salesman" placeholder="请输入业务员" style="width: 120px" />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" icon="el-icon-search" @click="getOrderList">搜索</el-button>
+            <el-button icon="el-icon-refresh" @click="resetOrderQuery">重置</el-button>
+          </el-form-item>
+        </el-form>
+
+        <!-- 订单列表 -->
+        <el-table v-loading="orderLoading" :data="orderList" style="width: 100%" @row-click="handleOrderSelect">
+          <el-table-column type="selection" width="55" />
+          <el-table-column prop="contractCode" label="合同号" width="150" />
+          <el-table-column prop="signTime" label="签订时间" width="150" />
+          <el-table-column prop="signLocation" label="签订地点" />
+          <el-table-column prop="companyName" label="客户" width="180" />
+          <el-table-column prop="salesman" label="业务员" width="100" />
+          <el-table-column prop="orderAmount" label="订单金额" width="120" align="right" />
+          <el-table-column prop="deliveryDate" label="交货日期" width="150" />
+          <el-table-column prop="createTime" label="创建时间" width="180" />
+          <el-table-column label="操作" width="80" fixed="right">
+            <template slot-scope="scope">
+              <el-button type="text" size="small" @click.stop="selectOrder(scope.row)">选择</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <!-- 分页 -->
+        <div class="pagination-container">
+          <el-pagination background layout="prev, pager, next, jumper" :total="orderTotal"
+            :page-size="orderQueryParams.pageSize" :current-page.sync="orderQueryParams.pageNum"
+            @current-change="getOrderList" />
+        </div>
+      </div>
+    </el-dialog>
+
+    <!-- 选择订单明细对话框 -->
+    <el-dialog title="选择订单明细" :visible.sync="orderItemDialogVisible" width="80%" append-to-body>
+      <el-table v-loading="orderItemLoading" :data="orderItemList" @row-click="selectOrderItem">
+        <el-table-column label="产品类型" align="center" prop="productType" />
+        <el-table-column label="成品宽度" align="center" prop="width" />
+        <el-table-column label="成品厚度" align="center" prop="thickness" />
+        <el-table-column label="成品规格" align="center" prop="finishedProductSpec" />
+        <el-table-column label="材质" align="center" prop="material" />
+        <el-table-column label="重量" align="center" prop="weight" />
+        <el-table-column label="卷数" align="center" prop="productNum" />
+        <el-table-column label="表面处理" align="center" prop="surfaceTreatment" />
+        <el-table-column label="包装要求" align="center" prop="packagingReq" />
+        <el-table-column label="切边要求" align="center" prop="edgeCuttingReq" />
+        <el-table-column label="用途" align="center" prop="purpose" />
+        <el-table-column label="备注" align="center" prop="remark" />
+      </el-table>
+    </el-dialog>
+
+    <!-- 转单对话框 -->
+    <el-dialog title="转单" :visible.sync="transferDialogVisible" width="60%" append-to-body>
+      <div class="transfer-content">
+        <div class="section-title">选择目标排产单</div>
+        <el-form :model="transferQueryParams" ref="transferQueryForm" size="small" :inline="true" label-width="68px">
+          <el-form-item label="排产日期" prop="planDate">
+            <el-date-picker clearable v-model="transferQueryParams.planDate" type="date" value-format="yyyy-MM-dd"
+              placeholder="请选择排产日期">
+            </el-date-picker>
+          </el-form-item>
+          <el-form-item label="产线名称" prop="lineName">
+            <el-input v-model="transferQueryParams.lineName" placeholder="请输入产线名称" clearable />
+          </el-form-item>
+          <el-form-item label="排产单号" prop="planCode">
+            <el-input v-model="transferQueryParams.planCode" placeholder="请输入排产单号" clearable />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" icon="el-icon-search" size="mini" @click="getTransferPlanSheetList">搜索</el-button>
+            <el-button icon="el-icon-refresh" size="mini" @click="resetTransferQuery">重置</el-button>
+          </el-form-item>
+        </el-form>
+        <el-table v-loading="transferLoading" :data="transferPlanSheetList" style="width: 100%" border
+          :highlight-current-row="true" @row-click="selectTransferPlanSheet">
+          <el-table-column label="排产日期" align="center" prop="planDate" width="140">
+            <template slot-scope="scope">
+              <span>{{ parseTime(scope.row.planDate, '{y}-{m}-{d}') }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="产线名称" align="center" prop="lineName" />
+          <el-table-column label="排产单号" align="center" prop="planCode" />
+          <el-table-column label="排产人" align="center" prop="scheduler" />
+          <el-table-column label="备注" align="center" prop="remark" />
+        </el-table>
+        <div class="pagination-container">
+          <el-pagination background layout="prev, pager, next, jumper" :total="transferTotal"
+            :page-size="transferQueryParams.pageSize" :current-page.sync="transferQueryParams.pageNum"
+            @current-change="getTransferPlanSheetList" />
+        </div>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <div v-if="isBatchTransfer">
+          <el-button @click="transferDialogVisible = false">取消</el-button>
+          <el-button type="primary" @click="confirmTransfer" :disabled="!selectedTransferPlanSheet"
+            :loading="buttonLoading">确认批量转单</el-button>
+        </div>
+        <div v-if="transferRowData && !isBatchTransfer">
+          <el-button @click="transferDialogVisible = false">取消</el-button>
+          <el-button type="primary" @click="confirmSingleTransfer" :disabled="!selectedTransferPlanSheet"
+            :loading="buttonLoading">确认转单</el-button>
+        </div>
+
+      </div>
+    </el-dialog>
+
+    <!-- 批量新增对话框 -->
+    <el-dialog title="批量新增" :visible.sync="batchAddDialogVisible" width="80%" append-to-body>
+      <div class="batch-add-content">
+        <el-tabs v-model="activeBatchTab">
+          <el-tab-pane label="合同选择" name="contract">
+            <div class="contract-section">
+              <div class="section-title">选择合同</div>
+              <el-form :model="batchQueryParams" ref="batchQueryForm" size="small" :inline="true" label-width="80px">
+                <el-form-item label="合同号" prop="contractCode">
+                  <el-input v-model="batchQueryParams.contractCode" placeholder="请输入合同号" style="width: 180px" />
+                </el-form-item>
+                <el-form-item label="客户">
+                  <el-input v-model="batchQueryParams.customerName" placeholder="请输入客户名称" style="width: 180px" />
+                </el-form-item>
+                <el-form-item label="业务员">
+                  <el-input v-model="batchQueryParams.salesman" placeholder="请输入业务员" style="width: 120px" />
+                </el-form-item>
+                <el-form-item>
+                  <el-button type="primary" icon="el-icon-search" @click="getBatchOrderList">搜索</el-button>
+                  <el-button icon="el-icon-refresh" @click="resetBatchQuery">重置</el-button>
+                </el-form-item>
+              </el-form>
+              <el-table v-loading="batchOrderLoading" :data="batchOrderList" style="width: 100%" border
+                @row-click="selectBatchContract" highlight-current-row>
+                <el-table-column prop="contractCode" label="合同号" />
+                <el-table-column prop="signTime" label="签订时间" width="150" />
+                <el-table-column prop="signLocation" label="签订地点" />
+                <el-table-column prop="companyName" label="客户公司" />
+                <el-table-column prop="salesman" label="业务员" width="100" />
+                <el-table-column prop="deliveryDate" label="交货日期" width="150" />
+                <el-table-column label="操作" width="80" fixed="right">
+                  <template slot-scope="scope">
+                    <el-button type="text" size="small" @click.stop="selectBatchContract(scope.row)">选择</el-button>
+                  </template>
+                </el-table-column>
+              </el-table>
+              <div class="pagination-container">
+                <el-pagination background layout="prev, pager, next, jumper" :total="batchOrderTotal"
+                  :page-size="batchQueryParams.pageSize" :current-page.sync="batchQueryParams.pageNum"
+                  @current-change="getBatchOrderList" />
+              </div>
+            </div>
+
+            <div class="item-section" v-if="selectedContract">
+              <div class="section-title">选择明细（多选）</div>
+              <el-table v-loading="batchItemLoading" :data="batchItemList" style="width: 100%" border
+                @selection-change="handleBatchItemSelectionChange">
+                <el-table-column type="selection" width="55" />
+                <el-table-column label="产品类型" align="center" prop="productType" />
+                <el-table-column label="成品宽度" align="center" prop="width" />
+                <el-table-column label="成品厚度" align="center" prop="thickness" />
+                <el-table-column label="成品规格" align="center" prop="finishedProductSpec" />
+                <el-table-column label="材质" align="center" prop="material" />
+                <el-table-column label="重量" align="center" prop="weight" />
+                <el-table-column label="卷数" align="center" prop="productNum" />
+                <el-table-column label="表面处理" align="center" prop="surfaceTreatment" />
+                <el-table-column label="包装要求" align="center" prop="packagingReq" />
+                <el-table-column label="切边要求" align="center" prop="edgeCuttingReq" />
+                <el-table-column label="用途" align="center" prop="purpose" />
+                <el-table-column label="备注" align="center" prop="remark" />
+              </el-table>
+            </div>
+          </el-tab-pane>
+          <el-tab-pane label="明细选择" name="orderItem">
+            <el-form :model="itemQueryParams" ref="itemQueryForm" size="small" :inline="true" label-width="60px">
+              <el-form-item label="产品类型">
+                <el-input clearable v-model="itemQueryParams.productType" placeholder="请输入产品类型" style="width: 120px" />
+              </el-form-item>
+              <el-form-item label="成品宽度">
+                <el-input clearable v-model="itemQueryParams.width" placeholder="请输入成品宽度" style="width: 120px" />
+              </el-form-item>
+              <el-form-item label="成品厚度">
+                <el-input clearable v-model="itemQueryParams.thickness" placeholder="请输入成品厚度" style="width: 120px" />
+              </el-form-item>
+              <el-form-item label="成品规格">
+                <el-input clearable v-model="itemQueryParams.finishedProductSpec" placeholder="请输入成品规格"
+                  style="width: 120px" />
+              </el-form-item>
+              <el-form-item label="材质">
+                <el-input clearable v-model="itemQueryParams.material" placeholder="请输入材质" style="width: 120px" />
+              </el-form-item>
+              <el-form-item label="表面处理">
+                <el-input clearable v-model="itemQueryParams.surfaceTreatment" placeholder="请输入表面处理"
+                  style="width: 120px" />
+              </el-form-item>
+              <el-form-item label="包装要求">
+                <el-input clearable v-model="itemQueryParams.packagingReq" placeholder="请输入包装要求" style="width: 120px" />
+              </el-form-item>
+              <el-form-item label="切边要求">
+                <el-input clearable v-model="itemQueryParams.edgeCuttingReq" placeholder="请输入切边要求"
+                  style="width: 120px" />
+              </el-form-item>
+              <el-form-item label="用途">
+                <el-input clearable v-model="itemQueryParams.purpose" placeholder="请输入用途" style="width: 120px" />
+              </el-form-item>
+              <el-form-item>
+                <el-button type="primary" icon="el-icon-search" @click="getBatchItemList">搜索</el-button>
+                <el-button icon="el-icon-refresh" @click="resetItemQuery">重置</el-button>
+              </el-form-item>
+            </el-form>
+            <div class="item-section">
+              <div class="section-title">选择明细（多选）</div>
+              <el-table v-loading="batchItemLoading" :data="batchItemList" style="width: 100%" border
+                @selection-change="handleBatchItemSelectionChange">
+                <el-table-column type="selection" width="55" />
+                <el-table-column label="合同号" align="center" prop="orderInfo.contractCode" width="120" />
+                <el-table-column label="客户" align="center" prop="orderInfo.companyName" width="150" />
+                <el-table-column label="产品类型" align="center" prop="productType" />
+                <el-table-column label="成品宽度" align="center" prop="width" />
+                <el-table-column label="成品厚度" align="center" prop="thickness" />
+                <el-table-column label="成品规格" align="center" prop="finishedProductSpec" />
+                <el-table-column label="材质" align="center" prop="material" />
+                <el-table-column label="重量" align="center" prop="weight" />
+                <el-table-column label="卷数" align="center" prop="productNum" />
+                <el-table-column label="表面处理" align="center" prop="surfaceTreatment" />
+                <el-table-column label="包装要求" align="center" prop="packagingReq" />
+                <el-table-column label="切边要求" align="center" prop="edgeCuttingReq" />
+                <el-table-column label="用途" align="center" prop="purpose" />
+                <el-table-column label="备注" align="center" prop="remark" />
+              </el-table>
+              <div class="pagination-container">
+                <el-pagination background layout="prev, pager, next, jumper" :total="batchItemTotal"
+                  :page-size="itemQueryParams.pageSize" :current-page.sync="itemQueryParams.pageNum"
+                  @current-change="getBatchItemList" />
+              </div>
+            </div>
+          </el-tab-pane>
+        </el-tabs>
+
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="batchAddDialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="confirmBatchAdd" :disabled="selectedBatchItems.length === 0"
+          :loading="buttonLoading">确认新增</el-button>
+      </div>
+    </el-dialog>
+
+    <!-- 导入对话框 -->
+    <el-dialog title="导入排产单明细" :visible.sync="importDialogVisible" width="900px" append-to-body
+      :close-on-click-modal="false" @close="resetImportState">
+      <div class="import-container">
+        <el-steps :active="importStep" align-center finish-status="success">
+          <el-step title="下载模板" description="下载并填写Excel模板" />
+          <el-step title="上传文件" description="选择填好的文件" />
+          <el-step title="校验数据" description="验证数据完整性" />
+          <el-step title="开始导入" description="预览并确认导入" />
+        </el-steps>
+
+        <div class="import-step-content">
+          <!-- Step 0: 下载模板 -->
+          <div v-show="importStep === 0" class="step-body">
+            <div class="step-download">
+              <i class="el-icon-download step-icon"></i>
+              <p>请先下载Excel模板，按格式填写排产单明细数据</p>
+              <el-button type="primary" icon="el-icon-download" @click="downloadTemplate">下载导入模板</el-button>
+            </div>
+          </div>
+
+          <!-- Step 1: 上传文件 -->
+          <div v-show="importStep === 1" class="step-body">
+            <div class="step-upload">
+              <el-upload ref="importUpload" class="custom-upload" drag :auto-upload="false" :show-file-list="false"
+                :on-change="handleImportFileChange" accept=".xlsx,.xls">
+                <div class="upload-zone-body">
+                  <div class="upload-zone-icon">
+                    <i class="el-icon-upload2"></i>
+                  </div>
+                  <p class="upload-zone-title">将文件拖到此处，或<span>点击选择</span></p>
+                  <p class="upload-zone-tip">支持 .xlsx / .xls 格式</p>
+                </div>
+              </el-upload>
+              <div v-if="importFile" class="parse-result" :class="errorList.length > 0 ? 'parse-error' : 'parse-ok'">
+                <div class="parse-result-header">
+                  <i :class="errorList.length > 0 ? 'el-icon-warning' : 'el-icon-circle-check'"></i>
+                  <span class="parse-result-filename">{{ importFile.name }}</span>
+                  <span class="parse-result-count">解析 {{ rawData.length }} 条数据</span>
+                </div>
+                <div v-if="errorList.length > 0" class="error-list">
+                  <el-table :data="errorList" border max-height="150">
+                    <el-table-column prop="rowNum" label="行号" width="80" />
+                    <el-table-column prop="errorMsg" label="错误信息" />
+                  </el-table>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Step 2: 校验数据 -->
+          <div v-show="importStep === 2" class="step-body">
+            <div class="step-validate">
+              <p class="step-desc">点击下方按钮校验数据完整性，已解析 {{ rawData.length }} 条数据</p>
+              <el-button type="success" icon="el-icon-check" @click="handleValidateData"
+                :loading="validateLoading" size="medium" style="margin-bottom: 16px">
+                校验数据
+              </el-button>
+              <div v-if="errorList.length > 0" class="error-list">
+                <el-alert :title="'校验失败，共 ' + errorList.length + ' 条错误'" type="error" show-icon :closable="false" style="margin-bottom: 10px" />
+                <el-table :data="errorList" border max-height="200">
+                  <el-table-column prop="rowNum" label="行号" width="80" />
+                  <el-table-column prop="errorMsg" label="错误信息" />
+                </el-table>
+              </div>
+              <div v-if="isValidated && errorList.length === 0" class="validate-ok">
+                <el-alert title="数据校验通过！" type="success" show-icon :closable="false" />
+              </div>
+            </div>
+          </div>
+
+          <!-- Step 3: 预览并导入 -->
+          <div v-show="importStep === 3" class="step-body">
+            <div class="step-import-container">
+              <div class="data-preview">
+                <div class="section-title">数据预览（共 {{ tableData.length }} 条）</div>
+                <el-table :data="tableData" border max-height="280" style="margin-top: 10px">
+                  <el-table-column type="index" label="#" width="50" />
+                  <el-table-column prop="detailDate" label="排产日期" width="100" />
+                  <el-table-column prop="contractCode" label="合同号" width="120" />
+                  <el-table-column prop="deliveryDate" label="交货期" width="100" />
+                  <el-table-column prop="customerName" label="客户名称" width="120" />
+                  <el-table-column prop="productName" label="产品名称" width="100" show-overflow-tooltip />
+                  <el-table-column prop="usageReq" label="客户用途" width="100" show-overflow-tooltip />
+                  <el-table-column prop="productMaterial" label="材质" width="80" />
+                  <el-table-column prop="rollingThick" label="成品厚度" width="80" />
+                  <el-table-column prop="productWidth" label="成品宽度" width="80" />
+                  <el-table-column prop="planWeight" label="数量（吨）" width="90" />
+                  <el-table-column prop="surfaceTreatment" label="表面处理" width="80" />
+                  <el-table-column prop="productPackaging" label="包装要求" width="80" />
+                  <el-table-column prop="remark" label="其他要求" width="120" show-overflow-tooltip />
+                </el-table>
+              </div>
+
+              <div v-if="importStatus === 'processing'" class="import-progress">
+                <el-progress :percentage="importProgress" />
+                <p>正在导入：{{ importedCount }} / {{ totalCount }}</p>
+              </div>
+
+              <div v-if="importStatus === 'finished'" class="import-result">
+                <el-alert :title="'导入完成！共成功导入 ' + importedCount + ' 条数据'" type="success" show-icon :closable="false" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button v-if="importStep > 0" @click="importStep--" :disabled="importStatus === 'processing'">上一步</el-button>
+        <el-button @click="importDialogVisible = false">关闭</el-button>
+        <el-button v-if="importStep === 0" type="primary" @click="downloadTemplate">下载模板</el-button>
+        <el-button v-if="importStep === 0" type="primary" @click="importStep = 1">已下载，下一步</el-button>
+        <el-button v-if="importStep === 1" type="primary" @click="goValidateStep" :disabled="!importFile || rawData.length === 0">
+          下一步
+        </el-button>
+        <el-button v-if="importStep === 2" type="primary" @click="goImportStep" :disabled="!isValidated || errorList.length > 0">
+          下一步
+        </el-button>
+        <el-button v-if="importStep === 3 && importStatus !== 'finished'" type="primary" @click="startImport"
+          :loading="importLoading">
+          开始导入
+        </el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import * as XLSX from 'xlsx'
+import { updatePlanDetail, listPlanDetail, addPlanDetail, addPlanDetailBatch, delPlanDetail } from "@/api/aps/planDetail";
+import { getPlanSheet, listPlanSheet } from "@/api/aps/planSheet";
+import { listOrder } from '@/api/crm/order';
+import { listOrderItem } from '@/api/crm/orderItem'
+import PlanSheetList from "@/views/aps/planSheet/PlanSheetList.vue";
+
+const TEMPLATE_HEADERS = [
+  '排产日期', '合同号', '交货期', '业务员', '客户名称', '产品名称',
+  '客户用途', '材质', '成品厚度', '成品宽度', '数量（吨）',
+  '厚度范围', '宽度范围', '表面质量', '表面处理', '包装要求',
+  '切边要求', '其他要求'
+]
+
+const HEADER_MAP = {
+  '排产日期': 'detailDate',
+  '合同号': 'contractCode',
+  '交货期': 'deliveryDate',
+  '业务员': 'salesman',
+  '客户名称': 'customerName',
+  '产品名称': 'productName',
+  '客户用途': 'usageReq',
+  '材质': 'productMaterial',
+  '成品厚度': 'rollingThick',
+  '成品宽度': 'productWidth',
+  '数量（吨）': 'planWeight',
+  '厚度范围': 'markCoatThick',
+  '宽度范围': 'productEdgeReq',
+  '表面质量': 'coatingG',
+  '表面处理': 'surfaceTreatment',
+  '包装要求': 'productPackaging',
+  '切边要求': 'widthReq',
+  '其他要求': 'remark'
+}
+
+export default {
+  name: "PlanSheet",
+  dicts: ['sys_lines'],
+  components: {
+    PlanSheetList
+  },
+  data() {
+    return {
+      // 当前选中的排产单ID
+      currentPlanSheetId: undefined,
+      // 当前选中的明细数据
+      currentPlanDetail: {},
+      // 对话框可见状态
+      dialogVisible: false,
+      // 当前排产单详情信息
+      currentPlanSheetInfo: {},
+      // 最近选择的排产单列表
+      recentPlanSheets: [],
+      // 排产单明细表格数据
+      planDetailList: [],
+
+      // 总条数
+      total: 0,
+      // 加载状态
+      loading: false,
+      buttonLoading: false,
+
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 50,
+        planSheetId: undefined
+      },
+      // 订单对话框
+      orderDialogVisible: false,
+      // 订单明细对话框
+      orderItemDialogVisible: false,
+      // 订单列表
+      orderList: [],
+      // 订单总数
+      orderTotal: 0,
+      // 订单加载状态
+      orderLoading: false,
+      // 订单查询参数
+      orderQueryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        contractCode: undefined,
+        customerName: undefined,
+        salesman: undefined
+      },
+      // 订单明细列表
+      orderItemList: [],
+      // 订单明细加载状态
+      orderItemLoading: false,
+      // 当前编辑的行
+      currentEditingRow: null,
+      // 批量新增对话框
+      batchAddDialogVisible: false,
+      // 当前激活的批量新增tab
+      activeBatchTab: 'orderItem',
+      // 批量查询参数（合同选择模式）
+      batchQueryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        contractCode: undefined,
+        customerName: undefined,
+        salesman: undefined
+      },
+      // 明细查询参数（直接明细选择模式）
+      itemQueryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        productType: undefined,
+        width: undefined,
+        thickness: undefined,
+        finishedProductSpec: undefined,
+        material: undefined,
+        surfaceTreatment: undefined,
+        packagingReq: undefined,
+        edgeCuttingReq: undefined,
+        purpose: undefined
+      },
+      // 批量订单列表
+      batchOrderList: [],
+      // 批量订单总数
+      batchOrderTotal: 0,
+      // 批量订单加载状态
+      batchOrderLoading: false,
+      // 批量明细列表
+      batchItemList: [],
+      // 批量明细总数
+      batchItemTotal: 0,
+      // 批量明细加载状态
+      batchItemLoading: false,
+      // 选中的合同
+      selectedContract: null,
+      // 选中的明细
+      selectedBatchItems: [],
+      // 转单对话框
+      transferDialogVisible: false,
+      // 转单查询参数
+      transferQueryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        planDate: undefined,
+        lineName: undefined,
+        planCode: undefined,
+        scheduler: undefined
+      },
+      // 转单排产单列表
+      transferPlanSheetList: [],
+      // 转单排产单总数
+      transferTotal: 0,
+      // 转单加载状态
+      transferLoading: false,
+      // 选中的转单目标排产单
+      selectedTransferPlanSheet: null,
+      // 当前要转单的行数据
+      transferRowData: null,
+      // 选中的行（用于批量操作）
+      selectedRows: [],
+      // 是否批量操作（批量转单）
+      isBatchTransfer: false,
+      // 导入对话框
+      importDialogVisible: false,
+      importStep: 0,
+      importFile: null,
+      rawData: [],
+      tableData: [],
+      errorList: [],
+      isValidated: false,
+      importProgress: 0,
+      importedCount: 0,
+      totalCount: 0,
+      importStatus: 'idle',
+      validateLoading: false,
+      importLoading: false,
+    };
+  },
+  created() {
+    // 从本地存储加载最近选择的排产单
+    this.loadRecentPlanSheets();
+  },
+  methods: {
+    parseTime(time, pattern) {
+      if (!time) return '';
+      const format = pattern || '{y}-{m}-{d} {h}:{i}:{s}';
+      const date = new Date(time);
+      const year = date.getFullYear();
+      const month = date.getMonth() + 1;
+      const day = date.getDate();
+      const hour = date.getHours();
+      const minute = date.getMinutes();
+      const second = date.getSeconds();
+      return format.replace('{y}', year)
+        .replace('{m}', month.toString().padStart(2, '0'))
+        .replace('{d}', day.toString().padStart(2, '0'))
+        .replace('{h}', hour.toString().padStart(2, '0'))
+        .replace('{i}', minute.toString().padStart(2, '0'))
+        .replace('{s}', second.toString().padStart(2, '0'));
+    },
+    // 打开管理排产单对话框
+    openDialog() {
+      this.dialogVisible = true;
+    },
+    // 点击排产单行，显示详情
+    handleRowClick(row) {
+      this.currentPlanSheetId = row.planSheetId;
+      this.currentPlanDetail = {};
+      this.dialogVisible = false;
+
+      // 获取排产单详情
+      this.getPlanSheetDetail(row.planSheetId);
+
+      // 添加到最近选择的列表
+      this.addToRecentPlanSheets(row);
+
+      // 更新查询参数
+      this.queryParams.planSheetId = row.planSheetId;
+
+      // 获取排产单明细列表
+      this.getList();
+    },
+    // 获取排产单详情
+    getPlanSheetDetail(planSheetId) {
+      getPlanSheet(planSheetId).then(response => {
+        this.currentPlanSheetInfo = response.data;
+      });
+    },
+    // 添加到最近选择的排产单列表
+    addToRecentPlanSheets(planSheet) {
+      // 移除已存在的相同排产单
+      this.recentPlanSheets = this.recentPlanSheets.filter(item => item.planSheetId !== planSheet.planSheetId);
+
+      // 添加到列表开头
+      this.recentPlanSheets.unshift(planSheet);
+
+      // 限制最近选择的数量为5个
+      if (this.recentPlanSheets.length > 5) {
+        this.recentPlanSheets = this.recentPlanSheets.slice(0, 5);
+      }
+
+      // 保存到本地存储
+      this.saveRecentPlanSheets();
+    },
+    // 从本地存储加载最近选择的排产单
+    loadRecentPlanSheets() {
+      try {
+        const stored = localStorage.getItem('recentPlanSheets');
+        if (stored) {
+          this.recentPlanSheets = JSON.parse(stored);
+        }
+      } catch (error) {
+        console.error('Failed to load recent plan sheets:', error);
+        this.recentPlanSheets = [];
+      }
+    },
+    // 保存最近选择的排产单到本地存储
+    saveRecentPlanSheets() {
+      try {
+        localStorage.setItem('recentPlanSheets', JSON.stringify(this.recentPlanSheets));
+      } catch (error) {
+        console.error('Failed to save recent plan sheets:', error);
+      }
+    },
+    // 选择最近的排产单
+    selectRecentPlanSheet(item) {
+      this.currentPlanSheetId = item.planSheetId;
+      this.currentPlanDetail = {};
+      this.currentPlanSheetInfo = item;
+
+      // 更新查询参数
+      this.queryParams.planSheetId = item.planSheetId;
+
+      // 获取排产单明细列表
+      this.getList();
+    },
+    // 处理排产明细行点击事件
+    handlePlanDetailChange(row) {
+      this.currentPlanDetail = row;
+    },
+    // 提交排产明细变更
+    submitDetail() {
+      updatePlanDetail(this.currentPlanDetail).then(response => {
+        this.$message({
+          message: "变更保存成功",
+          type: "success"
+        });
+      });
+    },
+    // 获取排产单明细列表
+    getList() {
+      this.loading = true;
+      listPlanDetail({
+        ...this.queryParams,
+        planSheetId: this.currentPlanSheetId,
+      }).then(response => {
+        // 按照序号正序排序
+        this.planDetailList = response.rows.sort((a, b) => {
+          return parseInt(a.bizSeqNo) - parseInt(b.bizSeqNo);
+        });
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    // 新增明细
+    handleAdd() {
+      const newRow = {
+        planSheetId: this.currentPlanSheetId,
+        bizSeqNo: this.planDetailList.length + 1
+      };
+
+      addPlanDetail(newRow).then(response => {
+        this.$message({
+          message: "新增成功",
+          type: "success"
+        });
+        this.getList();
+      });
+    },
+    // 保存行
+    handleSave(row) {
+      updatePlanDetail(row).then(response => {
+        this.$message({
+          message: "保存成功",
+          type: "success"
+        });
+      }).catch(error => {
+        this.$message({
+          message: "保存失败，正在重新获取数据",
+          type: "error"
+        });
+        // 保存失败时获取正确数据
+        this.getList();
+      });
+    },
+    // 删除行
+    handleDelete(row) {
+      this.$confirm('是否确认删除该排产单明细？', '警告', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.buttonLoading = true;
+        delPlanDetail(row.planDetailId).then(response => {
+          this.$message({
+            message: "删除成功",
+            type: "success"
+          });
+          this.buttonLoading = false;
+          this.getList();
+        });
+      });
+    },
+    // 打开订单选择对话框
+    openOrderDialog(row) {
+      this.currentEditingRow = row;
+      this.orderDialogVisible = true;
+      this.getOrderList();
+    },
+    // 打开订单明细选择对话框
+    openOrderItemDialog(row) {
+      this.currentEditingRow = row;
+      this.orderItemDialogVisible = true;
+      this.orderItemLoading = true;
+      listOrderItem({ orderId: row.orderId }).then(res => {
+        this.orderItemList = res.rows;
+        this.orderItemLoading = false;
+      });
+    },
+    // 获取订单列表
+    getOrderList() {
+      this.orderLoading = true;
+      listOrder(this.orderQueryParams).then(response => {
+        this.orderList = response.rows;
+        this.orderTotal = response.total;
+        this.orderLoading = false;
+      });
+    },
+    // 重置订单查询参数
+    resetOrderQuery() {
+      this.orderQueryParams = {
+        pageNum: 1,
+        pageSize: 10,
+        contractCode: undefined,
+        customerName: undefined,
+        salesman: undefined
+      };
+      this.getOrderList();
+    },
+    // 选择订单
+    selectOrder(row) {
+      this.currentEditingRow.orderCode = row.orderCode;
+      this.currentEditingRow.contractCode = row.contractCode;
+      this.currentEditingRow.customerName = row.companyName;
+      this.currentEditingRow.salesman = row.salesman;
+      this.currentEditingRow.orderId = row.orderId;
+      this.orderDialogVisible = false;
+
+      // 保存修改
+      this.handleSave(this.currentEditingRow);
+    },
+    // 选择订单明细
+    selectOrderItem(row) {
+      this.currentEditingRow.productName = row.productType;
+      this.currentEditingRow.productMaterial = row.material;
+      this.currentEditingRow.productWidth = row.width;
+      this.currentEditingRow.rollingThick = row.thickness;
+      this.currentEditingRow.markCoatThick = row.thickness;
+      this.currentEditingRow.tonSteelLengthRange = 0;
+      this.currentEditingRow.planQty = row.productNum;
+      this.currentEditingRow.planWeight = row.weight;
+      this.currentEditingRow.surfaceTreatment = row.surfaceTreatment;
+      this.currentEditingRow.productPackaging = row.packagingReq;
+      this.currentEditingRow.widthReq = row.edgeCuttingReq;
+      this.currentEditingRow.productEdgeReq = row.widthTolerance;
+      this.currentEditingRow.usageReq = row.purpose;
+
+      this.orderItemDialogVisible = false;
+
+      // 保存修改
+      this.handleSave(this.currentEditingRow);
+    },
+    // 处理订单行点击
+    handleOrderSelect(row) {
+      this.selectOrder(row);
+    },
+    // 打开批量新增对话框
+    handleBatchAdd() {
+      this.batchAddDialogVisible = true;
+      this.activeBatchTab = 'orderItem';
+      this.selectedContract = null;
+      this.selectedBatchItems = [];
+      this.getBatchOrderList();
+      this.getBatchItemList();
+    },
+    // 获取批量订单列表
+    getBatchOrderList() {
+      this.batchOrderLoading = true;
+      listOrder(this.batchQueryParams).then(response => {
+        this.batchOrderList = response.rows;
+        this.batchOrderTotal = response.total;
+        this.batchOrderLoading = false;
+      });
+    },
+    // 重置批量查询参数
+    resetBatchQuery() {
+      this.batchQueryParams = {
+        pageNum: 1,
+        pageSize: 10,
+        contractCode: undefined,
+        customerName: undefined,
+        salesman: undefined
+      };
+      this.getBatchOrderList();
+    },
+    // 获取批量明细列表（直接选择模式）
+    getBatchItemList() {
+      this.batchItemLoading = true;
+      listOrderItem(this.itemQueryParams).then(response => {
+        this.batchItemList = response.rows;
+        this.batchItemTotal = response.total;
+        this.batchItemLoading = false;
+      });
+    },
+    // 重置明细查询参数
+    resetItemQuery() {
+      this.itemQueryParams = {
+        pageNum: 1,
+        pageSize: 10,
+        productType: undefined,
+        width: undefined,
+        thickness: undefined,
+        finishedProductSpec: undefined,
+        material: undefined,
+        surfaceTreatment: undefined,
+        packagingReq: undefined,
+        edgeCuttingReq: undefined,
+        purpose: undefined
+      };
+      this.getBatchItemList();
+    },
+    // 选择批量合同
+    selectBatchContract(row) {
+      this.selectedContract = row;
+      this.selectedBatchItems = [];
+      this.batchItemLoading = true;
+      listOrderItem({ orderId: row.orderId }).then(res => {
+        this.batchItemList = res.rows;
+        this.batchItemLoading = false;
+      });
+    },
+    // 处理批量明细选择变更
+    handleBatchItemSelectionChange(selection) {
+      this.selectedBatchItems = selection;
+    },
+    // 打开转单对话框
+    handleTransfer(row) {
+      this.transferRowData = row;
+      this.selectedTransferPlanSheet = null;
+      this.isBatchTransfer = false;
+      this.transferDialogVisible = true;
+      this.getTransferPlanSheetList();
+    },
+    // 获取转单排产单列表
+    getTransferPlanSheetList() {
+      this.transferLoading = true;
+      listPlanSheet(this.transferQueryParams).then(response => {
+        this.transferPlanSheetList = response.rows;
+        this.transferTotal = response.total;
+        this.transferLoading = false;
+      });
+    },
+    // 重置转单查询参数
+    resetTransferQuery() {
+      this.transferQueryParams = {
+        pageNum: 1,
+        pageSize: 10,
+        planDate: undefined,
+        lineName: undefined,
+        planCode: undefined,
+        scheduler: undefined
+      };
+      this.getTransferPlanSheetList();
+    },
+    // 选择转单目标排产单
+    selectTransferPlanSheet(row) {
+      this.selectedTransferPlanSheet = row;
+    },
+    // 确认批量转单
+    confirmTransfer() {
+      if (!this.selectedTransferPlanSheet) {
+        this.$message.warning('请选择目标排产单');
+        return;
+      }
+
+      if (this.selectedTransferPlanSheet.planSheetId === this.currentPlanSheetId) {
+        this.$message.warning('目标排产单不能与当前排产单相同');
+        return;
+      }
+
+      this.$confirm(`确认将选中的 ${this.selectedRows.length} 条明细转单到排产单 ${this.selectedTransferPlanSheet.planCode} ？`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        listPlanDetail({
+          pageNum: 1,
+          pageSize: 1,
+          planSheetId: this.selectedTransferPlanSheet.planSheetId
+        }).then(response => {
+          const targetList = response.rows;
+          let currentMaxSeqNo = targetList.length > 0
+            ? Math.max(...targetList.map(item => parseInt(item.bizSeqNo) || 0))
+            : 0;
+
+          let successCount = 0;
+          let failCount = 0;
+
+          const transferPromises = [];
+          for (let i = 0; i < this.selectedRows.length; i++) {
+            const row = this.selectedRows[i];
+            const newRow = {
+              ...row,
+              planDetailId: undefined,
+              planSheetId: this.selectedTransferPlanSheet.planSheetId,
+              bizSeqNo: currentMaxSeqNo + i + 1
+            };
+            transferPromises.push(addPlanDetail(newRow));
+          }
+          this.buttonLoading = true;
+          Promise.all(transferPromises).then(() => {
+            this.$message.success(`批量转单成功，共转单 ${this.selectedRows.length} 条`);
+            this.transferDialogVisible = false;
+            this.getList();
+            this.buttonLoading = false;
+          }).catch(error => {
+            this.$message.error('批量转单失败');
+            this.buttonLoading = false;
+          });
+        });
+      });
+    },
+    // 确认单行转单
+    confirmSingleTransfer() {
+      if (!this.selectedTransferPlanSheet) {
+        this.$message.warning('请选择目标排产单');
+        return;
+      }
+
+      if (this.selectedTransferPlanSheet.planSheetId === this.currentPlanSheetId) {
+        this.$message.warning('目标排产单不能与当前排产单相同');
+        return;
+      }
+
+      this.$confirm(`确认将当前明细转单到排产单 ${this.selectedTransferPlanSheet.planCode} ？`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        listPlanDetail({
+          pageNum: 1,
+          pageSize: 1,
+          planSheetId: this.selectedTransferPlanSheet.planSheetId
+        }).then(response => {
+          const targetList = response.rows;
+          const currentMaxSeqNo = targetList.length > 0
+            ? Math.max(...targetList.map(item => parseInt(item.bizSeqNo) || 0))
+            : 0;
+
+          const newRow = {
+            ...this.transferRowData,
+            planDetailId: undefined,
+            planSheetId: this.selectedTransferPlanSheet.planSheetId,
+            bizSeqNo: currentMaxSeqNo + 1
+          };
+
+          addPlanDetail(newRow).then(() => {
+            this.$message.success('转单成功');
+            this.transferDialogVisible = false;
+            this.getList();
+          }).catch(error => {
+            this.$message.error('转单失败');
+          });
+        });
+      });
+    },
+    // 处理表格选择变化
+    handleSelectionChange(selection) {
+      this.selectedRows = selection;
+    },
+    // 批量删除
+    handleBatchDelete() {
+      if (this.selectedRows.length === 0) {
+        this.$message.warning('请至少选择一条明细');
+        return;
+      }
+
+      this.$confirm(`确认删除选中的 ${this.selectedRows.length} 条明细？`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        const ids = this.selectedRows.map(row => row.planDetailId).join(',');
+        this.buttonLoading = true;
+        delPlanDetail(ids).then(() => {
+          this.$message.success('批量删除成功');
+          this.getList();
+          this.buttonLoading = false;
+        }).catch(error => {
+          this.$message.error('批量删除失败');
+          this.buttonLoading = false;
+        });
+      });
+    },
+    // 批量转单
+    handleBatchTransfer() {
+      if (this.selectedRows.length === 0) {
+        this.$message.warning('请至少选择一条明细');
+        return;
+      }
+      this.isBatchTransfer = true;
+
+      this.selectedTransferPlanSheet = null;
+      this.transferDialogVisible = true;
+      this.getTransferPlanSheetList();
+    },
+    // 确认批量新增
+    confirmBatchAdd() {
+      if (this.selectedBatchItems.length === 0) {
+        this.$message.warning('请至少选择一条明细');
+        return;
+      }
+
+      this.$confirm(`确认新增 ${this.selectedBatchItems.length} 条明细？`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        const currentMaxSeqNo = this.planDetailList.length > 0
+          ? Math.max(...this.planDetailList.map(item => parseInt(item.bizSeqNo) || 0))
+          : 0;
+
+        const addPromises = this.selectedBatchItems.map((item, index) => {
+          const contract = this.selectedContract || item;
+          const newRow = {
+            planSheetId: this.currentPlanSheetId,
+            bizSeqNo: currentMaxSeqNo + index + 1,
+            orderCode: contract.orderCode,
+            contractCode: contract.contractCode,
+            customerName: contract.companyName || contract.customerName,
+            salesman: contract.salesman,
+            orderId: contract.orderId,
+            productName: item.productType,
+            productMaterial: item.material,
+            productWidth: item.width,
+            rollingThick: item.thickness,
+            markCoatThick: item.thickness,
+            tonSteelLengthRange: 0,
+            planQty: item.productNum,
+            planWeight: item.weight,
+            surfaceTreatment: item.surfaceTreatment,
+            productPackaging: item.packagingReq,
+            widthReq: item.edgeCuttingReq,
+            productEdgeReq: item.widthTolerance,
+            usageReq: item.purpose
+          };
+          return addPlanDetail(newRow);
+        });
+
+        Promise.all(addPromises).then(() => {
+          this.$message.success('批量新增成功');
+          this.batchAddDialogVisible = false;
+          this.getList();
+        }).catch(error => {
+          this.$message.error('批量新增失败');
+        });
+      });
+    },
+    // 打开导入对话框
+    handleImport() {
+      this.importDialogVisible = true
+      this.resetImportState()
+    },
+    // 重置导入状态
+    resetImportState() {
+      this.importStep = 0
+      this.importFile = null
+      this.rawData = []
+      this.tableData = []
+      this.errorList = []
+      this.isValidated = false
+      this.importProgress = 0
+      this.importedCount = 0
+      this.totalCount = 0
+      this.importStatus = 'idle'
+      this.validateLoading = false
+      this.importLoading = false
+      this.$nextTick(() => {
+        if (this.$refs.importUpload) {
+          this.$refs.importUpload.clearFiles()
+        }
+      })
+    },
+    // 跳转到校验步骤
+    goValidateStep() {
+      if (!this.importFile || this.rawData.length === 0) return
+      this.importStep = 2
+    },
+    // 跳转到导入步骤
+    goImportStep() {
+      if (!this.isValidated || this.errorList.length > 0) return
+      this.importStep = 3
+    },
+    // 下载导入模板
+    downloadTemplate() {
+      const templateData = [
+        TEMPLATE_HEADERS,
+        ['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '']
+      ]
+      const wb = XLSX.utils.book_new()
+      const ws = XLSX.utils.aoa_to_sheet(templateData)
+      ws['!cols'] = TEMPLATE_HEADERS.map(() => ({ wch: 14 }))
+      XLSX.utils.book_append_sheet(wb, ws, '排产单明细')
+      XLSX.writeFile(wb, '排产单明细导入模板.xlsx')
+    },
+    // 导入文件选择变化
+    handleImportFileChange(file) {
+      this.isValidated = false
+      this.errorList = []
+      this.tableData = []
+      this.importStatus = 'idle'
+      this.importFile = file.raw
+      this.readExcel()
+    },
+    // 读取Excel文件内容
+    readExcel() {
+      if (!this.importFile) return
+      try {
+        const fileReader = new FileReader()
+        fileReader.readAsArrayBuffer(this.importFile)
+        fileReader.onload = (e) => {
+          try {
+            const data = new Uint8Array(e.target.result)
+            const workbook = XLSX.read(data, { type: 'array' })
+            const sheetName = workbook.SheetNames[0]
+            const worksheet = workbook.Sheets[sheetName]
+            const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 })
+            this.validateHeaders(jsonData[0])
+            this.rawData = jsonData.slice(1).filter(row => row.some(cell => cell !== undefined && cell !== null && cell !== ''))
+            this.formatExcel()
+            if (this.errorList.length === 0) {
+              this.importStatus = 'parsed'
+              this.$message.success(`成功解析Excel，共读取到 ${this.rawData.length} 条数据`)
+            }
+          } catch (error) {
+            this.errorList = [{ rowNum: 0, errorMsg: '解析Excel失败：' + error.message }]
+          }
+        }
+      } catch (error) {
+        this.errorList = [{ rowNum: 0, errorMsg: '读取文件失败：' + error.message }]
+      }
+    },
+    // 校验表头
+    validateHeaders(headers) {
+      if (headers.length !== TEMPLATE_HEADERS.length) {
+        this.errorList.push({
+          rowNum: 1,
+          errorMsg: `表头列数不匹配，要求${TEMPLATE_HEADERS.length}列，实际${headers.length}列`
+        })
+        return
+      }
+      headers.forEach((header, index) => {
+        if (String(header || '').trim() !== TEMPLATE_HEADERS[index]) {
+          this.errorList.push({
+            rowNum: 1,
+            errorMsg: `第${index + 1}列表头错误，要求："${TEMPLATE_HEADERS[index]}"，实际："${header}"`
+          })
+        }
+      })
+      if (this.errorList.length > 0) {
+        this.$message.error('Excel表头格式不符合要求，请检查！')
+      }
+    },
+    // 格式化Excel数据
+    formatExcel() {
+      this.tableData = []
+      if (this.rawData.length === 0) return
+      const currentMaxSeqNo = this.planDetailList.length > 0
+        ? Math.max(...this.planDetailList.map(item => parseInt(item.bizSeqNo) || 0))
+        : 0
+      this.rawData.forEach((row, index) => {
+        const rowObj = { bizSeqNo: currentMaxSeqNo + index + 1 }
+        TEMPLATE_HEADERS.forEach((header, colIndex) => {
+          const field = HEADER_MAP[header]
+          const cellValue = row[colIndex]
+          if (cellValue !== undefined && cellValue !== null && cellValue !== '') {
+            rowObj[field] = String(cellValue).trim()
+          }
+        })
+        this.tableData.push(rowObj)
+      })
+    },
+    // 校验数据
+    handleValidateData() {
+      if (this.validateLoading) return
+      if (this.rawData.length === 0) {
+        this.$message.warning('暂无数据可校验')
+        return
+      }
+      this.validateLoading = true
+      this.errorList = []
+      try {
+        this.tableData.forEach((row, i) => {
+          const rowNum = i + 2
+          if (!row.contractCode || row.contractCode.trim() === '') {
+            this.errorList.push({ rowNum, errorMsg: '合同号不能为空' })
+          }
+          if (!row.customerName || row.customerName.trim() === '') {
+            this.errorList.push({ rowNum, errorMsg: '客户名称不能为空' })
+          }
+          if (!row.productName || row.productName.trim() === '') {
+            this.errorList.push({ rowNum, errorMsg: '产品名称不能为空' })
+          }
+          if (!row.productMaterial || row.productMaterial.trim() === '') {
+            this.errorList.push({ rowNum, errorMsg: '材质不能为空' })
+          }
+          if (row.planWeight && isNaN(Number(row.planWeight))) {
+            this.errorList.push({ rowNum, errorMsg: '数量（吨）必须是数字' })
+          }
+        })
+        this.isValidated = true
+        if (this.errorList.length > 0) {
+          this.$message.error(`数据校验失败，共 ${this.errorList.length} 条错误`)
+        } else {
+          this.$message.success('数据校验通过，可以开始导入')
+          this.importStep = 3
+        }
+      } catch (error) {
+        this.errorList.push({ rowNum: 0, errorMsg: '校验数据时发生错误：' + error.message })
+      } finally {
+        this.validateLoading = false
+      }
+    },
+    // 开始导入
+    startImport() {
+      if (this.importLoading) return
+      if (!this.isValidated) {
+        this.$message.warning('请先校验数据')
+        return
+      }
+      if (this.errorList.length > 0) {
+        this.$message.warning('请先修正校验错误后再导入')
+        return
+      }
+      if (this.tableData.length === 0) {
+        this.$message.warning('暂无数据可导入')
+        return
+      }
+      this.$confirm(`确认导入 ${this.tableData.length} 条排产单明细？`, '导入确认', {
+        confirmButtonText: '确认导入',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.doImport()
+      }).catch(() => {})
+    },
+    // 执行导入
+    doImport() {
+      this.importLoading = true
+      this.importStatus = 'processing'
+      this.totalCount = this.tableData.length
+      this.importedCount = 0
+      this.importProgress = 0
+      const boList = this.tableData.map(row => ({
+        ...row,
+        planSheetId: this.currentPlanSheetId
+      }))
+      addPlanDetailBatch(boList).then(() => {
+        this.importedCount = this.totalCount
+        this.importProgress = 100
+        this.importStatus = 'finished'
+        this.$message.success(`导入完成！共成功导入 ${this.importedCount} 条数据`)
+        this.getList()
+      }).catch(error => {
+        this.importStatus = 'idle'
+        this.$message.error('导入失败：' + (error.message || '未知错误'))
+      }).finally(() => {
+        this.importLoading = false
+      })
+    }
+  }
+};
+</script>
+
+<style scoped>
+.header {
+  margin-bottom: 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.plan-info {
+  margin-bottom: 20px;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 15px;
+}
+
+.card-header h3 {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.plan-info .label {
+  font-weight: 600;
+  margin-right: 5px;
+}
+
+.mb20 {
+  margin-bottom: 20px;
+}
+
+.plan-detail-container {
+  margin-top: 20px;
+}
+
+.el-table {
+  margin-top: 10px;
+}
+
+.el-table .cell {
+  white-space: normal;
+  word-break: break-word;
+}
+
+.order-dialog-content {
+  padding: 10px 0;
+}
+
+.pagination-container {
+  margin-top: 20px;
+  text-align: right;
+}
+
+.appempty {
+  margin-top: 20px;
+}
+
+::v-deep .el-table .cell {
+  padding: 0;
+}
+
+/* ::v-deep .el-input__inner {
+  padding: 0 1px;
+} */
+
+.batch-add-content {
+  padding: 10px 0;
+}
+
+.contract-section {
+  margin-bottom: 30px;
+  padding-bottom: 20px;
+  border-bottom: 1px solid #eee;
+}
+
+.item-section {
+  margin-top: 20px;
+}
+
+.section-title {
+  font-size: 14px;
+  font-weight: 600;
+  margin-bottom: 15px;
+  color: #303133;
+}
+
+.import-container {
+  padding: 10px 0;
+}
+
+.import-step-content {
+  margin-top: 24px;
+  min-height: 320px;
+}
+
+.step-body {
+  padding: 20px 0;
+}
+
+.step-download {
+  text-align: center;
+  padding: 40px 0;
+}
+
+.step-download .step-icon {
+  font-size: 48px;
+  color: #409eff;
+  margin-bottom: 16px;
+}
+
+.step-download p {
+  font-size: 14px;
+  color: #606266;
+  margin-bottom: 20px;
+}
+
+.step-upload {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.custom-upload {
+  width: 100%;
+}
+
+.custom-upload ::v-deep .el-upload {
+  width: 100%;
+}
+
+.custom-upload ::v-deep .el-upload-dragger {
+  width: 100%;
+  height: auto;
+  padding: 40px 20px;
+  border: 2px dashed #dcdfe6;
+  border-radius: 8px;
+  background: #fafbfc;
+  transition: all .3s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.custom-upload ::v-deep .el-upload-dragger:hover {
+  border-color: #409eff;
+  background: #ecf5ff;
+}
+
+.custom-upload ::v-deep .el-upload-dragger.is-dragover {
+  border-color: #409eff;
+  background: #ecf5ff;
+  box-shadow: 0 0 0 3px rgba(64, 158, 255, 0.15);
+}
+
+.upload-zone-body {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+}
+
+.upload-zone-icon {
+  width: 64px;
+  height: 64px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #ecf5ff 0%, #d9ecff 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 8px;
+}
+
+.upload-zone-icon i {
+  font-size: 28px;
+  color: #409eff;
+}
+
+.upload-zone-title {
+  font-size: 15px;
+  color: #606266;
+  margin: 0;
+}
+
+.upload-zone-title span {
+  color: #409eff;
+  cursor: pointer;
+}
+
+.upload-zone-tip {
+  font-size: 12px;
+  color: #c0c4cc;
+  margin: 0;
+}
+
+.parse-result {
+  width: 100%;
+  margin-top: 16px;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.parse-result-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 16px;
+  font-size: 13px;
+}
+
+.parse-result-header i {
+  font-size: 18px;
+}
+
+.parse-result-filename {
+  font-weight: 500;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.parse-result-count {
+  white-space: nowrap;
+  font-weight: 500;
+}
+
+.parse-result.parse-ok {
+  border: 1px solid #b7eb8f;
+}
+
+.parse-result.parse-ok .parse-result-header {
+  background: #f6ffed;
+  color: #52c41a;
+}
+
+.parse-result.parse-ok i {
+  color: #52c41a;
+}
+
+.parse-result.parse-error {
+  border: 1px solid #ffa39e;
+}
+
+.parse-result.parse-error .parse-result-header {
+  background: #fff1f0;
+  color: #f5222d;
+}
+
+.parse-result.parse-error i {
+  color: #f5222d;
+}
+
+.step-validate {
+  padding: 0 40px;
+  text-align: center;
+}
+
+.step-validate .step-desc {
+  font-size: 14px;
+  color: #606266;
+  margin-bottom: 16px;
+}
+
+.validate-ok {
+  margin-top: 16px;
+}
+
+.step-import-container {
+  padding: 0;
+}
+
+.error-list {
+  margin-top: 16px;
+}
+
+.data-preview {
+  margin-top: 0;
+}
+
+.import-progress {
+  margin-top: 20px;
+  text-align: center;
+}
+
+.import-progress p {
+  margin-top: 8px;
+  color: #606266;
+}
+
+.import-result {
+  margin-top: 20px;
+}
+</style>
diff --git a/klp-ui/src/views/aps/planSheet/index.vue b/klp-ui/src/views/aps/planSheet/index.vue
index 1a4da1d6..9f1c4e60 100644
--- a/klp-ui/src/views/aps/planSheet/index.vue
+++ b/klp-ui/src/views/aps/planSheet/index.vue
@@ -7,16 +7,6 @@
       <!-- 排产单信息 -->
       <div class="card-header">
         <h3>{{ currentPlanSheetInfo.planSheetName || '排产单详情' }}</h3>
-        <div>
-          <el-button type="primary" plain @click="handleAdd">新增明细</el-button>
-          <el-button type="success" plain @click="handleBatchAdd">批量新增</el-button>
-          <el-button type="info" plain @click="handleImport">导入</el-button>
-          <el-button type="danger" plain @click="handleBatchDelete"
-            :disabled="selectedRows.length === 0">批量删除</el-button>
-          <el-button type="warning" plain @click="handleBatchTransfer"
-            :disabled="selectedRows.length === 0">批量转单</el-button>
-          <el-button type="info" plain @click="getList">刷新</el-button>
-        </div>
       </div>
       <div class="plan-info">
         <el-row :gutter="20">
@@ -39,206 +29,42 @@
         </el-row>
       </div>
 
-      <!-- 可编辑表格 -->
-      <el-table v-loading="loading" :data="planDetailList" style="width: 100%" border
-        @selection-change="handleSelectionChange">
-        <!-- 多选列 -->
-        <el-table-column type="selection" width="55" fixed="left" />
-        <!-- 操作列 -->
-        <el-table-column label="操作" align="center" width="160" fixed="left">
-          <template slot-scope="scope">
-            <el-button type="primary" size="mini" @click="handleSave(scope.row)">保存</el-button>
-            <el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
-            <el-button type="success" size="mini" @click="handleTransfer(scope.row)">转单</el-button>
-          </template>
-        </el-table-column>
+      <!-- 排产文件上传区域 -->
+      <div class="upload-section">
+        <div v-if="!currentPlanSheetInfo.apsUrl" class="upload-zone" v-loading="uploadLoading">
+          <el-upload class="file-uploader" drag :action="uploadUrl" :headers="uploadHeaders"
+            :on-success="handleUploadSuccess" :on-error="handleUploadError" :before-upload="beforeUpload"
+            accept=".jpg,.jpeg,.png,.gif,.bmp,.webp,.xlsx,.xls" :show-file-list="false">
+            <div class="upload-inner">
+              <i class="el-icon-upload2 upload-icon"></i>
+              <p class="upload-text">将文件拖到此处，或<span>点击上传</span></p>
+              <p class="upload-hint">支持 jpg / png / gif / bmp / webp 图片及 xlsx / xls 表格文件</p>
+            </div>
+          </el-upload>
+        </div>
 
-        <el-table-column label="序号" align="center" prop="bizSeqNo" width="80" fixed="left">
-          <template slot-scope="scope">
-            <el-input v-model="scope.row.bizSeqNo" style="background-color: #f5f7fa;" />
-            <!-- {{ scope.$index + 1 }} -->
-          </template>
-        </el-table-column>
+        <div v-else class="preview-panel">
+          <div class="preview-header">
+            <span class="preview-label">已上传文件</span>
+            <el-button type="text" icon="el-icon-refresh" @click="handleReupload">重新上传</el-button>
+          </div>
 
-        <!-- 订单信息 -->
-        <el-table-column label="排产日期" align="center" prop="detailDate" width="120">
-          <template slot-scope="scope">
-            <el-input v-model="scope.row.detailDate" style="background-color: #fff3e6;" />
-          </template>
-        </el-table-column>
-        <el-table-column label="订单号" align="center" prop="orderCode" width="200">
-          <template slot-scope="scope">
-            <el-input v-model="scope.row.orderCode" style="background-color: #fff3e6;">
-              <template slot="append">
-                <el-button size="mini" @click.stop="openOrderDialog(scope.row)">选择</el-button>
-              </template>
-            </el-input>
-          </template>
-        </el-table-column>
-        <el-table-column label="合同号" align="center" prop="contractCode" width="150">
-          <template slot-scope="scope">
-            <el-input v-model="scope.row.contractCode" style="background-color: #fff3e6;" />
-          </template>
-        </el-table-column>
-        <el-table-column label="客户" align="center" prop="customerName" width="180">
-          <template slot-scope="scope">
-            <el-input v-model="scope.row.customerName" style="background-color: #fff3e6;" />
-          </template>
-        </el-table-column>
-        <el-table-column label="业务员" align="center" prop="salesman" width="120">
-          <template slot-scope="scope">
-            <el-input v-model="scope.row.salesman" style="background-color: #fff3e6;" />
-          </template>
-        </el-table-column>
+          <div v-if="isImage" class="image-preview">
+            <el-image :src="currentPlanSheetInfo.apsUrl" fit="contain" :preview-src-list="[currentPlanSheetInfo.apsUrl]"
+              style="max-height: 500px;" />
+          </div>
 
-        <!-- 原料信息 -->
-        <el-table-column label="原料厂家" align="center" prop="rawManufacturer" width="120">
-          <template slot-scope="scope">
-            <el-input v-model="scope.row.rawManufacturer" style="background-color: #e6f7ff;" />
-          </template>
-        </el-table-column>
-        <el-table-column label="原料材质" align="center" prop="rawMaterial" width="120">
-          <template slot-scope="scope">
-            <el-input v-model="scope.row.rawMaterial" style="background-color: #e6f7ff;" />
-          </template>
-        </el-table-column>
-        <el-table-column label="原料厚度" align="center" prop="rawThick" width="100">
-          <template slot-scope="scope">
-            <el-input v-model="scope.row.rawThick" style="background-color: #e6f7ff;" />
-          </template>
-        </el-table-column>
-        <el-table-column label="原料宽度" align="center" prop="rawWidth" width="100">
-          <template slot-scope="scope">
-            <el-input v-model="scope.row.rawWidth" style="background-color: #e6f7ff;" />
-          </template>
-        </el-table-column>
+          <div v-else-if="isExcel" class="excel-preview">
+            <xlsx-preview :src="currentPlanSheetInfo.apsUrl" height="420px" />
+          </div>
 
-        <!-- 成品信息 -->
-        <el-table-column label="成品名称" align="center" prop="productName" width="170">
-          <template slot-scope="scope">
-            <el-input v-model="scope.row.productName" style="background-color: #f6ffed;">
-              <template slot="append">
-                <el-button size="mini" @click.stop="openOrderItemDialog(scope.row)"
-                  :disabled="!scope.row.orderId">选择</el-button>
-              </template>
-            </el-input>
-          </template>
-        </el-table-column>
-        <el-table-column label="成品材质" align="center" prop="productMaterial" width="120">
-          <template slot-scope="scope">
-            <el-input v-model="scope.row.productMaterial" style="background-color: #f6ffed;" />
-          </template>
-        </el-table-column>
-        <el-table-column label="成品镀层" align="center" prop="coatingG" width="120">
-          <template slot-scope="scope">
-            <el-input v-model="scope.row.coatingG" style="background-color: #f6ffed;" />
-          </template>
-        </el-table-column>
-
-        <el-table-column label="成品宽度" align="center" prop="productWidth" width="100">
-          <template slot-scope="scope">
-            <el-input v-model="scope.row.productWidth" style="background-color: #f6ffed;" />
-          </template>
-        </el-table-column>
-        <el-table-column label="轧制厚度" align="center" prop="rollingThick" width="100">
-          <template slot-scope="scope">
-            <el-input v-model="scope.row.rollingThick" style="background-color: #f6ffed;" />
-          </template>
-        </el-table-column>
-        <el-table-column label="标签厚度" align="center" prop="markCoatThick" width="120">
-          <template slot-scope="scope">
-            <el-input v-model="scope.row.markCoatThick" style="background-color: #f6ffed;" />
-          </template>
-        </el-table-column>
-        <el-table-column label="吨钢长度区间" align="center" prop="tonSteelLengthRange" width="120">
-          <template slot-scope="scope">
-            <el-input v-model="scope.row.tonSteelLengthRange" style="background-color: #f6ffed;" />
-          </template>
-        </el-table-column>
-        <el-table-column label="数量" align="center" prop="planQty" width="100">
-          <template slot-scope="scope">
-            <el-input v-model="scope.row.planQty" style="background-color: #f6ffed;" />
-          </template>
-        </el-table-column>
-        <el-table-column label="重量" align="center" prop="planWeight" width="100">
-          <template slot-scope="scope">
-            <el-input v-model="scope.row.planWeight" style="background-color: #f6ffed;" />
-          </template>
-        </el-table-column>
-        <el-table-column label="表面处理" align="center" prop="surfaceTreatmentDesc" width="100">
-          <template slot-scope="scope">
-            <MemoInput storageKey="surfaceTreatmentDesc" v-model="scope.row.surfaceTreatment"
-              style="background-color: #f6ffed;" />
-          </template>
-        </el-table-column>
-        <el-table-column label="切边要求" align="center" prop="widthReq" width="100">
-          <template slot-scope="scope">
-            <el-select v-model="scope.row.widthReq" style="width: 100%; background-color: #f6ffed;">
-              <el-option label="净边料" value="净边料" />
-              <el-option label="毛边料" value="毛边料" />
-            </el-select>
-          </template>
-        </el-table-column>
-        <el-table-column label="包装要求" align="center" prop="productPackaging" width="100">
-          <template slot-scope="scope">
-            <el-select v-model="scope.row.productPackaging" style="width: 100%; background-color: #f6ffed;">
-              <el-option label="裸包" value="裸包" />
-              <el-option label="普包" value="普包" />
-              <el-option label="简包" value="简包" />
-            </el-select>
-          </template>
-        </el-table-column>
-        <el-table-column label="宽度要求" align="center" prop="productEdgeReq" width="100">
-          <template slot-scope="scope">
-            <el-input v-model="scope.row.productEdgeReq" style="background-color: #f6ffed;" />
-          </template>
-        </el-table-column>
-        <el-table-column label="用途" align="center" prop="usageReq" width="100">
-          <template slot-scope="scope">
-            <el-input v-model="scope.row.usageReq" style="background-color: #f6ffed;" />
-          </template>
-        </el-table-column>
-
-        <!-- 生产信息 -->
-        <el-table-column label="开始时间" align="center" prop="startTime" width="180">
-          <template slot-scope="scope">
-            <el-date-picker v-model="scope.row.startTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
-              style="width: 100%; background-color: #fff0f6;" />
-          </template>
-        </el-table-column>
-        <el-table-column label="结束时间" align="center" prop="endTime" width="180">
-          <template slot-scope="scope">
-            <el-date-picker v-model="scope.row.endTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
-              style="width: 100%; background-color: #fff0f6;" />
-          </template>
-        </el-table-column>
-        <el-table-column label="后处理" align="center" prop="postProcess" width="100">
-          <template slot-scope="scope">
-            <el-input v-model="scope.row.postProcess" style="background-color: #fff0f6;" />
-          </template>
-        </el-table-column>
-        <el-table-column label="下工序" align="center" prop="nextProcess" width="100">
-          <template slot-scope="scope">
-            <el-input v-model="scope.row.nextProcess" style="background-color: #fff0f6;" />
-          </template>
-        </el-table-column>
-        <el-table-column label="取样" align="center" prop="sampleReq" width="100">
-          <template slot-scope="scope">
-            <el-select v-model="scope.row.sampleReq" style="width: 100%; background-color: #fff0f6;">
-              <el-option label="是" value="是" />
-              <el-option label="否" value="否" />
-            </el-select>
-          </template>
-        </el-table-column>
-        <el-table-column label="备注" align="center" prop="remark">
-          <template slot-scope="scope">
-            <el-input v-model="scope.row.remark" style="background-color: #fff0f6;" />
-          </template>
-        </el-table-column>
-      </el-table>
-
-      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
-        @pagination="getList" />
+          <div v-else class="file-link">
+            <a :href="currentPlanSheetInfo.apsUrl" target="_blank">
+              <i class="el-icon-document"></i> {{ getFileName(currentPlanSheetInfo.apsUrl) }}
+            </a>
+          </div>
+        </div>
+      </div>
     </div>
     <el-empty v-else class="appempty" description="选择排产单查看详情" />
 
@@ -627,10 +453,12 @@
 <script>
 import * as XLSX from 'xlsx'
 import { updatePlanDetail, listPlanDetail, addPlanDetail, addPlanDetailBatch, delPlanDetail } from "@/api/aps/planDetail";
-import { getPlanSheet, listPlanSheet } from "@/api/aps/planSheet";
+import { getPlanSheet, listPlanSheet, updatePlanSheet } from "@/api/aps/planSheet";
 import { listOrder } from '@/api/crm/order';
 import { listOrderItem } from '@/api/crm/orderItem'
+import { getToken } from '@/utils/auth'
 import PlanSheetList from "@/views/aps/planSheet/PlanSheetList.vue";
+import XlsxPreview from "@/components/FilePreview/preview/xlsx/index.vue";
 
 const TEMPLATE_HEADERS = [
   '排产日期', '合同号', '交货期', '业务员', '客户名称', '产品名称',
@@ -664,7 +492,8 @@ export default {
   name: "PlanSheet",
   dicts: ['sys_lines'],
   components: {
-    PlanSheetList
+    PlanSheetList,
+    XlsxPreview
   },
   data() {
     return {
@@ -798,8 +627,23 @@ export default {
       importStatus: 'idle',
       validateLoading: false,
       importLoading: false,
+
+      // 上传相关
+      uploadUrl: process.env.VUE_APP_BASE_API + "/system/oss/upload",
+      uploadHeaders: { Authorization: "Bearer " + getToken() },
+      uploadLoading: false,
     };
   },
+  computed: {
+    isImage() {
+      const url = this.currentPlanSheetInfo.apsUrl || '';
+      return /\.(jpg|jpeg|png|gif|bmp|webp)(\?|$)/i.test(url);
+    },
+    isExcel() {
+      const url = this.currentPlanSheetInfo.apsUrl || '';
+      return /\.(xlsx|xls)(\?|$)/i.test(url);
+    }
+  },
   created() {
     // 从本地存储加载最近选择的排产单
     this.loadRecentPlanSheets();
@@ -1424,6 +1268,53 @@ export default {
         this.errorList = [{ rowNum: 0, errorMsg: '读取文件失败：' + error.message }]
       }
     },
+    beforeUpload(file) {
+      const allowed = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'xlsx', 'xls'];
+      const ext = file.name.split('.').pop().toLowerCase();
+      if (!allowed.includes(ext)) {
+        this.$message.error('仅支持 jpg/png/gif/bmp/webp 图片及 xlsx/xls 文件');
+        return false;
+      }
+      this.uploadLoading = true;
+      return true;
+    },
+    handleUploadSuccess(response) {
+      if (response.code === 200) {
+        const url = response.data.url;
+        updatePlanSheet({
+          planSheetId: this.currentPlanSheetId,
+          apsUrl: url
+        }).then(() => {
+          this.$message.success('文件上传成功');
+          this.currentPlanSheetInfo.apsUrl = url;
+          this.uploadLoading = false;
+        }).catch(() => {
+          this.uploadLoading = false;
+        });
+      } else {
+        this.$message.error(response.msg || '上传失败');
+        this.uploadLoading = false;
+      }
+    },
+    handleUploadError() {
+      this.uploadLoading = false;
+      this.$message.error('文件上传失败，请重试');
+    },
+    handleReupload() {
+      this.$confirm('确认重新上传？当前文件将被替换。', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.currentPlanSheetInfo.apsUrl = '';
+        this.excelData = [];
+      }).catch(() => {});
+    },
+    getFileName(url) {
+      if (!url) return '';
+      const parts = url.split('/');
+      return parts[parts.length - 1] || '文件';
+    },
     // 校验表头
     validateHeaders(headers) {
       if (headers.length !== TEMPLATE_HEADERS.length) {
@@ -1851,4 +1742,129 @@ export default {
 .import-result {
   margin-top: 20px;
 }
+
+.upload-section {
+  margin-top: 20px;
+}
+
+.upload-zone {
+  width: 100%;
+}
+
+.file-uploader {
+  width: 100%;
+}
+
+.file-uploader ::v-deep .el-upload {
+  width: 100%;
+}
+
+.file-uploader ::v-deep .el-upload-dragger {
+  width: 100%;
+  min-height: 320px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 2px dashed #dcdfe6;
+  border-radius: 8px;
+  background: #fafbfc;
+  transition: all 0.3s;
+}
+
+.file-uploader ::v-deep .el-upload-dragger:hover {
+  border-color: #409eff;
+  background: #ecf5ff;
+}
+
+.file-uploader ::v-deep .el-upload-dragger.is-dragover {
+  border-color: #409eff;
+  background: #ecf5ff;
+  box-shadow: 0 0 0 3px rgba(64, 158, 255, 0.12);
+}
+
+.upload-inner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 60px 20px;
+}
+
+.upload-icon {
+  font-size: 56px;
+  color: #c0c4cc;
+  margin-bottom: 20px;
+  transition: color 0.3s;
+}
+
+.file-uploader ::v-deep .el-upload-dragger:hover .upload-icon {
+  color: #409eff;
+}
+
+.upload-text {
+  font-size: 15px;
+  color: #606266;
+  margin: 0 0 10px 0;
+}
+
+.upload-text span {
+  color: #409eff;
+  cursor: pointer;
+}
+
+.upload-hint {
+  font-size: 12px;
+  color: #c0c4cc;
+  margin: 0;
+}
+
+.preview-panel {
+  border: 1px solid #e8e8e8;
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.preview-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 16px;
+  border-bottom: 1px solid #e8e8e8;
+  background: #fafbfc;
+}
+
+.preview-label {
+  font-size: 13px;
+  color: #606266;
+  font-weight: 500;
+}
+
+.image-preview {
+  padding: 20px;
+  display: flex;
+  justify-content: center;
+  background: #f5f7fa;
+}
+
+.excel-preview {
+  padding: 12px;
+}
+
+.file-link {
+  padding: 30px;
+  text-align: center;
+}
+
+.file-link a {
+  font-size: 14px;
+  color: #409eff;
+  text-decoration: none;
+}
+
+.file-link a i {
+  margin-right: 6px;
+}
+
+.file-link a:hover {
+  text-decoration: underline;
+}
 </style>