DeXun/klp-oa
10
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
新增退火报表页面，支持按时间、炉号等条件查询统计信息
优化退火计划和性能页面，增加当前钢卷号和逻辑库区筛选
改进KLPTable浮层组件，支持嵌套属性访问和更智能的定位
重构退火计划控制页面布局和交互，提升用户体验
This commit is contained in:
砂糖
2026-04-27 14:38:20 +08:00
parent 3c5c71408b
commit b3d33f4368
5 changed files with 537 additions and 327 deletions
Download Patch File Download Diff File Expand all files Collapse all files

263
klp-ui/src/views/wms/anneal/plan/ctrl.vue
View File

@@ -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>
@@ -23,24 +23,7 @@
</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">
@@ -63,18 +46,6 @@
{{ parseTime(scope.row.endTime, '{y}-{m}-{d} {h}:{i}') }}
</template>
</el-table-column>
<!-- <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="220">
<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>
</el-table-column> -->
</KLPTable>
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
@@ -82,110 +53,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">加入计划</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">加入计划</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"
:disabled="!currentPlan.planId || currentPlan.status !== 0 || coilList.length === 0"
@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>
<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="currentCoilNo" /> -->
<el-table-column label="创建时间" align="center" prop="createTime" width="200">
<template slot-scope="scope">
<el-date-picker style="width: 185px" v-model="scope.row.createTime" type="datetime"
value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择创建时间" @change="handlePLanCoilChange(scope.row)" />
</template>
</el-table-column>
<el-table-column label="钢卷去向" align="center" width="220">
<template slot-scope="scope">
<el-select v-model="scope.row.logicWarehouseId" @change="handlePLanCoilChange(scope.row)">
<el-option v-for="item in warehouseList" :key="item.warehouseId" :label="item.warehouseName"
:value="item.warehouseId" />
</el-select>
</template>
</el-table-column>
<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="coil.currentCoilNo" />
<!-- <el-table-column label="操作" align="center" width="100">
<template slot-scope="scope">
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleUnbind(scope.row)">
{{ unbindLabel(currentPlan.status) }}
</el-button>
</template>
</el-table-column> -->
</el-table>
<el-table-column label="创建时间" align="center" prop="action" width="200">
<template slot-scope="scope">
<el-date-picker style="width: 185px" v-model="scope.row.createTime" type="datetime"
value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择创建时间" @change="handlePLanCoilChange(scope.row)" />
</template>
</el-table-column>
<el-table-column label="钢卷去向" align="center" width="160" prop="action">
<template slot-scope="scope">
<el-select v-model="scope.row.logicWarehouseId" @change="handlePLanCoilChange(scope.row)">
<el-option v-for="item in warehouseList" :key="item.warehouseId" :label="item.warehouseName"
:value="item.warehouseId" />
</el-select>
</template>
</el-table-column>
</KLPTable>
</div>
</div>
</el-card>
</div>
</el-col>
</el-row>
@@ -320,6 +289,31 @@ export default {
completePlanId: null,
completeCoils: [],
warehouseList: [],
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() {
@@ -651,15 +645,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;
}
/* ========== 修复在这里 ========== */
@@ -749,12 +766,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),
@@ -765,4 +777,11 @@ export default {
:deep(.el-table::before) {
background-color: transparent;
}
/* 为浮层提供更好的展示空间 */
.app-container {
min-height: 100vh;
overflow-y: auto;
padding-bottom: 40px;
}
</style>