refactor(aps/planSheet): 重构排产单详情页与列表页，替换可编辑表格为文件上传功能

1. 移除原排产单明细可编辑表格，替换为文件上传预览区域
2. 重构PlanSheetList组件，优化排产单筛选与展示UI
3. 新增排产单附件上传、预览、重新上传功能
4. 优化排产单列表的筛选、分页与操作交互

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>
+</style>

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>