feat(退火模块): 新增退火报表页面并优化现有功能

新增退火报表页面，支持按时间、炉号等条件查询统计信息
优化退火计划和性能页面，增加当前钢卷号和逻辑库区筛选
改进KLPTable浮层组件，支持嵌套属性访问和更智能的定位
重构退火计划控制页面布局和交互，提升用户体验

klp-ui/src/views/wms/anneal/plan/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="90px">
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="60px">
       <el-form-item label="计划号" prop="planNo">
         <el-input v-model="queryParams.planNo" placeholder="请输入计划号" clearable @keyup.enter.native="handleQuery" />
       </el-form-item>
@@ -20,27 +20,11 @@
       <el-form-item>
         <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-button type="success" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
       </el-form-item>
     </el-form>
 
-    <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
-        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single"
-          @click="handleUpdate">修改</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple"
-          @click="handleDelete">删除</el-button>
-      </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-    </el-row>
-
-    <KLPTable v-loading="loading" :data="planList" @selection-change="handleSelectionChange"
-      @row-click="handleRowClick">
-      <el-table-column type="selection" width="55" align="center" />
+    <KLPTable v-loading="loading" :data="planList" @row-click="handleRowClick">
       <el-table-column label="计划号" align="center" prop="planNo" />
       <el-table-column label="计划时间" align="center" prop="planStartTime" width="160">
         <template slot-scope="scope">
@@ -67,10 +51,6 @@
         <template slot-scope="scope">
           <el-button size="mini" type="text" icon="el-icon-edit" @click.stop="handleUpdate(scope.row)">修改</el-button>
           <el-button size="mini" type="text" icon="el-icon-delete" @click.stop="handleDelete(scope.row)">删除</el-button>
-          <!-- <el-button size="mini" type="text" icon="el-icon-s-operation"
-            @click.stop="openStatusDialog(scope.row)">状态</el-button> -->
-          <!-- <el-button v-if="scope.row.status === 0" size="mini" type="text" icon="el-icon-s-flag"
-            :disabled="!scope.row.coilCount" @click.stop="handleInFurnace(scope.row)">入炉</el-button> -->
           <el-button v-if="scope.row.status === 2" size="mini" type="text" icon="el-icon-check"
             @click.stop="handleComplete(scope.row)">完成</el-button>
         </template>
@@ -82,123 +62,108 @@
 
     <el-row :gutter="20" class="mt16">
       <el-col :span="12">
-        <el-card shadow="never" class="panel-card">
-          <div slot="header" class="panel-header">
-            <span>领料列表</span>
+        <div class="custom-panel">
+          <div class="panel-header">
+            <span class="panel-title">领料列表</span>
             <el-button size="mini" icon="el-icon-refresh" @click="getMaterialCoils">刷新</el-button>
           </div>
-          <el-form :model="materialQueryParams" ref="materialQueryForm" size="small" :inline="true" class="mb8">
-            <el-form-item label="入场钢卷号" prop="enterCoilNo">
-              <el-input v-model="materialQueryParams.enterCoilNo" placeholder="请输入入场钢卷号" clearable
-                style="width: 160px" />
-            </el-form-item>
-            <el-form-item label="当前钢卷号" prop="currentCoilNo">
-              <el-input v-model="materialQueryParams.currentCoilNo" placeholder="请输入当前钢卷号" clearable
-                style="width: 160px" />
-            </el-form-item>
-            <el-form-item>
-              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleMaterialQuery">搜索</el-button>
-              <el-button icon="el-icon-refresh" size="mini" @click="resetMaterialQuery">重置</el-button>
-            </el-form-item>
-          </el-form>
-          <div v-loading="materialLoading" class="material-grid">
-            <div v-if="materialList.length === 0" class="empty-tip">
-              <el-empty description="暂无待领物料" />
-            </div>
-            <div v-for="item in materialList" :key="item.coilId" class="material-card">
-              <div class="material-header">
-                <div class="material-text-wrap">
-                  <div class="material-title">{{ item.currentCoilNo || '-' }}</div>
-                  <div class="material-sub">入场：{{ item.enterCoilNo || '-' }}</div>
+          <div class="panel-content left-content">
+            <el-form :model="materialQueryParams" ref="materialQueryForm" size="small" :inline="true" class="mb8">
+              <el-form-item label="入场钢卷号" prop="enterCoilNo">
+                <el-input v-model="materialQueryParams.enterCoilNo" placeholder="请输入入场钢卷号" clearable
+                  style="width: 160px" />
+              </el-form-item>
+              <el-form-item label="当前钢卷号" prop="currentCoilNo">
+                <el-input v-model="materialQueryParams.currentCoilNo" placeholder="请输入当前钢卷号" clearable
+                  style="width: 160px" />
+              </el-form-item>
+              <el-form-item label="逻辑库区" prop="warehouseId">
+                <WarehouseSelect v-model="materialQueryParams.warehouseId" placeholder="请选择逻辑库区" clearable
+                  style="width: 160px" />
+              </el-form-item>
+              <el-form-item>
+                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleMaterialQuery">搜索</el-button>
+                <el-button icon="el-icon-refresh" size="mini" @click="resetMaterialQuery">重置</el-button>
+              </el-form-item>
+            </el-form>
+            <div v-loading="materialLoading" class="material-grid">
+              <div v-if="materialList.length === 0" class="empty-tip">
+                <el-empty description="暂无待领物料" />
+              </div>
+              <div v-for="item in materialList" :key="item.coilId" class="material-card">
+                <div class="material-header">
+                  <div class="material-text-wrap">
+                    <div class="material-title">{{ item.currentCoilNo || '-' }}</div>
+                    <div class="material-sub">入场：{{ item.enterCoilNo || '-' }}</div>
+                  </div>
+                  <el-button type="primary" size="mini" @click="handleAddToPlan(item)"
+                    :disabled="!currentPlan.planId || currentPlan.status !== 0">加入计划</el-button>
+                </div>
+                <div class="material-body">
+                  <div class="material-row">厂家：{{ item.supplierCoilNo || '-' }}</div>
+                  <div class="material-row">库位：{{ item.actualWarehouseName || '-' }}</div>
+                  <div class="material-row">重量：{{ item.netWeight || '-' }}t</div>
                 </div>
-                <el-button type="primary" size="mini" @click="handleAddToPlan(item)"
-                  :disabled="!currentPlan.planId || currentPlan.status !== 0">加入计划</el-button>
-              </div>
-              <div class="material-body">
-                <div class="material-row">厂家：{{ item.supplierCoilNo || '-' }}</div>
-                <div class="material-row">库位：{{ item.actualWarehouseName || '-' }}</div>
-                <div class="material-row">重量：{{ item.netWeight || '-' }}t</div>
               </div>
             </div>
+            <pagination v-show="materialTotal > 0" :total="materialTotal" :page.sync="materialQueryParams.pageNum"
+              :limit.sync="materialQueryParams.pageSize" @pagination="getMaterialCoils" />
           </div>
-          <pagination v-show="materialTotal > 0" :total="materialTotal" :page.sync="materialQueryParams.pageNum"
-            :limit.sync="materialQueryParams.pageSize" @pagination="getMaterialCoils" />
-        </el-card>
+        </div>
       </el-col>
       <el-col :span="12">
-        <el-card shadow="never" class="panel-card">
-          <div slot="header" class="panel-header">
-            <span>退火计划</span>
+        <div class="custom-panel">
+          <div class="panel-header">
+            <span class="panel-title">退火计划</span>
             <div>
               <el-button size="mini" icon="el-icon-refresh" @click="loadPlanCoils"
                 :disabled="!currentPlan.planId">刷新</el-button>
-              <!-- <el-button size="mini" type="primary" icon="el-icon-s-flag"
-                :disabled="!currentPlan.planId || currentPlan.status !== 0 || !currentPlan.coilCount"
-                @click="handleInFurnace(currentPlan)">入炉</el-button> -->
-              <!-- <el-button size="mini" type="success" icon="el-icon-check"
-                :disabled="!currentPlan.planId || currentPlan.status !== 2" @click="openCompleteDialog">完成退火</el-button> -->
             </div>
           </div>
-          <div v-if="!currentPlan.planId" class="empty-tip">
-            <el-empty description="请点击上方选择一个计划" />
-          </div>
-          <div v-else>
-            <div class="plan-summary">
-              <div>计划号：{{ currentPlan.planNo }}</div>
-              <div>目标炉：{{ currentPlan.targetFurnaceName || '-' }}</div>
-              <div>状态：{{ statusLabel(currentPlan.status) }}</div>
-              <!-- <div>
-                <el-button size="mini" type="primary" icon="el-icon-s-flag" :disabled="currentPlan.status !== 0"
-                  @click="handleInFurnace(currentPlan)">入炉</el-button>
-              </div> -->
+          <div class="panel-content">
+            <div v-if="!currentPlan.planId" class="empty-tip">
+              <el-empty description="请点击上方选择一个计划" />
+            </div>
+            <div v-else>
+              <div class="plan-summary">
+                <div>计划号：{{ currentPlan.planNo }}</div>
+                <div>目标炉：{{ currentPlan.targetFurnaceName || '-' }}</div>
+                <div>状态：{{ statusLabel(currentPlan.status) }}</div>
+              </div>
+              <KLPTable :data="coilList" v-loading="coilLoading" class="light-table" :floatLayer="true"
+                :floatLayerConfig="floatLayerConfig">
+                <el-table-column label="钢卷层级" align="center" width="80" prop="action">
+                  <template slot-scope="scope">
+                    <el-input v-model="scope.row.furnaceLevel" placeholder="请输入钢卷层级"
+                      @change="handlePLanCoilChange(scope.row)" />
+                  </template>
+                </el-table-column>
+                <el-table-column label="入场钢卷号" align="center" prop="enterCoilNo" />
+                <el-table-column label="创建时间" align="center" prop="createTime">
+                  <template slot-scope="scope">
+                    {{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}') }}
+                  </template>
+                </el-table-column>
+                <el-table-column label="实际库位" align="center" width="220">
+                  <template slot-scope="scope">
+                    <span>{{ scope.row.coil.actualWarehouseName || '-' }}</span>
+                  </template>
+                </el-table-column>
+                <el-table-column label="操作" align="center" width="100" prop="action">
+                  <template slot-scope="scope">
+                    <el-button v-if="currentPlan.status === 0" size="mini" type="text" icon="el-icon-delete"
+                      @click="handleUnbind(scope.row)">
+                      {{ unbindLabel(currentPlan.status) }}
+                    </el-button>
+                  </template>
+                </el-table-column>
+              </KLPTable>
             </div>
-            <el-table :data="coilList" v-loading="coilLoading" class="light-table">
-              <el-table-column label="钢卷层级" align="center" width="80">
-                <template slot-scope="scope">
-                  <el-input v-model="scope.row.furnaceLevel" placeholder="请输入钢卷层级"
-                    @change="handlePLanCoilChange(scope.row)" />
-                </template>
-              </el-table-column>
-              <el-table-column label="入场钢卷号" align="center" prop="enterCoilNo" />
-              <el-table-column label="创建时间" align="center" prop="createTime">
-                <template slot-scope="scope">
-                  {{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}') }}
-                </template>
-              </el-table-column>
-              <el-table-column label="实际库位" align="center" width="220">
-                <template slot-scope="scope">
-                  <span>{{ scope.row.actualWarehouseName || '-' }}</span>
-                </template>
-              </el-table-column>
-              <el-table-column label="操作" align="center" width="100">
-                <template slot-scope="scope">
-                  <el-button v-if="currentPlan.status === 0" size="mini" type="text" icon="el-icon-delete" @click="handleUnbind(scope.row)">
-                    {{ unbindLabel(currentPlan.status) }}
-                  </el-button>
-                </template>
-              </el-table-column>
-            </el-table>
           </div>
-        </el-card>
+        </div>
       </el-col>
     </el-row>
 
-    <el-dialog title="完成退火" :visible.sync="completeOpen" width="720px" append-to-body>
-      <div class="complete-tip">请为每条钢卷分配实际库位，未分配将无法完成。</div>
-      <el-table :data="completeCoils" v-loading="completeLoading" height="360px">
-        <el-table-column label="入场钢卷号" prop="enterCoilNo" align="center" />
-        <el-table-column label="钢卷去向" align="center" width="240">
-          <template slot-scope="scope">
-            <WarehouseSelect v-model="scope.row.warehouseId" />
-          </template>
-        </el-table-column>
-      </el-table>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitComplete">确 定</el-button>
-        <el-button @click="completeOpen = false">取 消</el-button>
-      </div>
-    </el-dialog>
-
     <el-dialog :title="title" :visible.sync="open" width="520px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="110px">
         <el-form-item label="计划号" prop="planNo">
@@ -220,6 +185,14 @@
               :value="item.furnaceId" />
           </el-select>
         </el-form-item>
+        <el-form-item label="实际开始" prop="actualStartTime" v-if="form.planId">
+          <el-date-picker clearable v-model="form.actualStartTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
+            placeholder="请选择实际开始时间" />
+        </el-form-item>
+        <el-form-item label="实际结束" prop="endTime" v-if="form.planId">
+          <el-date-picker clearable v-model="form.endTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
+            placeholder="请选择实际结束时间" />
+        </el-form-item>
         <el-form-item label="备注" prop="remark">
           <el-input v-model="form.remark" type="textarea" placeholder="请输入备注" />
         </el-form-item>
@@ -233,7 +206,7 @@
 </template>
 
 <script>
-import { listAnnealPlan, getAnnealPlan, updateAnnealPlanCoil ,addAnnealPlan, updateAnnealPlan, delAnnealPlan, changeAnnealPlanStatus, inFurnace, completeAnnealPlan, listAnnealPlanCoils, bindAnnealPlanCoils, unbindAnnealPlanCoil } from "@/api/wms/annealPlan";
+import { listAnnealPlan, getAnnealPlan, updateAnnealPlanCoil, addAnnealPlan, updateAnnealPlan, delAnnealPlan, changeAnnealPlanStatus, inFurnace, completeAnnealPlan, listAnnealPlanCoils, bindAnnealPlanCoils, unbindAnnealPlanCoil } from "@/api/wms/annealPlan";
 import { listAnnealFurnace } from "@/api/wms/annealFurnace";
 import { listMaterialCoil } from "@/api/wms/coil";
 import WarehouseSelect from "@/components/KLPService/WarehouseSelect";
@@ -293,6 +266,31 @@ export default {
       completeLoading: false,
       completePlanId: null,
       completeCoils: [],
+      floatLayerConfig: {
+        columns: [
+          { label: '入场钢卷号', prop: 'enterCoilNo' },
+          { label: '当前钢卷号', prop: 'coil.currentCoilNo' },
+          { label: '厂家卷号', prop: 'coil.supplierCoilNo' },
+          { label: '逻辑库位', prop: 'coil.warehouseName' },
+          { label: '实际库位', prop: 'coil.actualWarehouseName' },
+          { label: '物料类型', prop: 'coil.materialType' },
+          { label: '班组', prop: 'coil.team' },
+          { label: '净重', prop: 'coil.netWeight' },
+          { label: '毛重', prop: 'coil.grossWeight' },
+          { label: '备注', prop: 'coil.remark' },
+          { label: '质量状态', prop: 'coil.qualityStatus' },
+          { label: '原料材质', prop: 'coil.packingStatus' },
+          { label: '切边要求', prop: 'coil.edgeRequirement' },
+          { label: '包装要求', prop: 'coil.packagingRequirement' },
+          { label: '厂家', prop: 'coil.itemManufacturer' },
+          { label: '调制度', prop: 'coil.temperGrade' },
+          { label: '镀层种类', prop: 'coil.coatingType' },
+          { label: '实测长度(m)', prop: 'coil.actualLength' },
+          { label: '实测宽度(mm)', prop: 'coil.actualWidth' },
+          { label: '实测厚度(mm)', prop: 'coil.actualThickness' },
+        ],
+        title: '详细信息'
+      },
     };
   },
   created() {
@@ -342,29 +340,6 @@ export default {
         this.loadPlanCoils();
       });
     },
-    openCompleteDialog() {
-      if (!this.currentPlan.planId) {
-        this.$message.warning('请先选择计划');
-        return;
-      }
-      if (this.currentPlan.status !== 2) {
-        this.$message.warning('计划未进行中，无法完成');
-        return;
-      }
-      this.completePlanId = this.currentPlan.planId;
-      this.completeOpen = true;
-      this.completeLoading = true;
-      listAnnealPlanCoils(this.currentPlan.planId).then(response => {
-        this.completeCoils = (response.data || []).map(item => ({
-          coilId: item.coilId,
-          enterCoilNo: item.enterCoilNo,
-          actualWarehouseId: item.actualWarehouseId || null
-        }));
-        this.completeLoading = false;
-      }).catch(() => {
-        this.completeLoading = false;
-      });
-    },
     handleAddToPlan(item) {
       if (!this.currentPlan.planId) {
         this.$message.warning('请先选择计划');
@@ -546,30 +521,6 @@ export default {
       this.getList();
       this.$message.success('已入炉');
     },
-    submitComplete() {
-      const locations = (this.completeCoils || []).map(item => ({
-        coilId: item.coilId,
-        actualWarehouseId: item.actualWarehouseId
-      }));
-      const missing = locations.filter(item => !item.actualWarehouseId);
-      if (missing.length > 0) {
-        this.$message.warning('请先为所有钢卷分配实际库位');
-        return;
-      }
-      this.completeLoading = true;
-      completeAnnealPlan({
-        planId: this.completePlanId,
-        locations: locations
-      }).then(() => {
-        this.$message.success('已完成');
-        this.completeOpen = false;
-        // anneal-todo: 新增操作事件
-        this.getList();
-        this.loadPlanCoils();
-      }).finally(() => {
-        this.completeLoading = false;
-      });
-    },
     handleUnbind(row) {
       this.$confirm('确定解绑该钢卷吗？', '提示', {
         confirmButtonText: '确定',
@@ -634,15 +585,38 @@ export default {
   margin-top: 10px;
 }
 
-.panel-card {
+/* 自定义卡片样式 */
+.custom-panel {
   border: 1px solid #f0f2f5;
+  border-radius: 4px;
   background: #ffffff;
+  /* 避免溢出隐藏，让浮层可以正常显示 */
+  overflow: visible;
 }
 
 .panel-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
+  padding: 16px 18px;
+  border-bottom: 1px solid #f0f2f5;
+}
+
+.panel-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.panel-content {
+  padding: 16px 18px;
+  /* 避免溢出隐藏 */
+  overflow: visible;
+}
+
+.panel-content.left-content {
+  height: calc(100vh - 400px);
+  overflow-y: auto;
 }
 
 /* ========== 修复在这里 ========== */
@@ -732,12 +706,7 @@ export default {
   gap: 8px;
   font-size: 12px;
   color: #606266;
-  margin-bottom: 8px;
-}
-
-:deep(.el-card__header) {
-  border-bottom: 1px solid #f0f2f5;
-  background: #ffffff;
+  margin-bottom: 12px;
 }
 
 :deep(.el-table th),
@@ -748,4 +717,11 @@ export default {
 :deep(.el-table::before) {
   background-color: transparent;
 }
+
+/* 为浮层提供更好的展示空间 */
+.app-container {
+  min-height: 100vh;
+  overflow-y: auto;
+  padding-bottom: 40px;
+}
 </style>