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

feat(wms): 优化退火炉界面和修复钢卷合卷功能

Browse Source 
- 重构退火炉界面为卡片式布局，增加可视化状态展示
- 修复钢卷合卷API路径和方法，添加操作ID和类型参数
- 移除标签打印中冗余的itemName字段
- 修复退火计划物料卡片布局自适应问题
This commit is contained in:
砂糖
2026-03-16 15:38:11 +08:00
parent e5821a3f68
commit 71e2467572
7 changed files with 218 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -6,7 +6,8 @@
</el-form-item>
<el-form-item label="目标炉" prop="targetFurnaceId">
<el-select v-model="queryParams.targetFurnaceId" placeholder="请选择" clearable filterable>
<el-option v-for="item in furnaceOptions" :key="item.furnaceId" :label="item.furnaceName" :value="item.furnaceId" />
<el-option v-for="item in furnaceOptions" :key="item.furnaceId" :label="item.furnaceName"
:value="item.furnaceId" />
</el-select>
</el-form-item>
<el-form-item label="状态" prop="status">
@@ -27,15 +28,18 @@
<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-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-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">
<KLPTable v-loading="loading" :data="planList" @selection-change="handleSelectionChange"
@row-click="handleRowClick">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="计划号" align="center" prop="planNo" />
<el-table-column label="计划时间" align="center" prop="planStartTime" width="160">
@@ -63,14 +67,18 @@
<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>
<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" @pagination="getList" />
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
@pagination="getList" />
<el-row :gutter="20" class="mt16">
<el-col :span="12">
@@ -81,10 +89,12 @@
</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-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-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>
@@ -97,11 +107,12 @@
</div>
<div v-for="item in materialList" :key="item.coilId" class="material-card">
<div class="material-header">
<div>
<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>
<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>
@@ -119,9 +130,13 @@
<div slot="header" class="panel-header">
<span>退火计划</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>
<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">
@@ -133,7 +148,8 @@
<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>
<el-button size="mini" type="primary" icon="el-icon-s-flag" :disabled="currentPlan.status !== 0"
@click="handleInFurnace(currentPlan)">入炉</el-button>
</div>
</div>
<el-table :data="coilList" v-loading="coilLoading" class="light-table">
@@ -183,11 +199,13 @@
<el-input v-model="form.planNo" placeholder="请输入计划号" />
</el-form-item>
<el-form-item label="计划开始" prop="planStartTime">
<el-date-picker clearable v-model="form.planStartTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择计划时间" />
<el-date-picker clearable v-model="form.planStartTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
placeholder="请选择计划时间" />
</el-form-item>
<el-form-item label="目标炉" prop="targetFurnaceId">
<el-select v-model="form.targetFurnaceId" placeholder="请选择" filterable>
<el-option v-for="item in furnaceOptions" :key="item.furnaceId" :label="item.furnaceName" :value="item.furnaceId" />
<el-option v-for="item in furnaceOptions" :key="item.furnaceId" :label="item.furnaceName"
:value="item.furnaceId" />
</el-select>
</el-form-item>
<el-form-item label="状态" prop="status">
@@ -578,39 +596,43 @@ export default {
.mt16 {
margin-top: 16px;
}
.empty-tip {
margin-top: 10px;
}
.panel-card {
border: 1px solid #f0f2f5;
background: #ffffff;
}
.panel-header {
display: flex;
align-items: center;
justify-content: space-between;
}
/* ========== 修复在这里 ========== */
.material-grid {
display: grid;
grid-template-columns: repeat(4, minmax(220px, 1fr));
/* 核心修复：去掉固定 4 列，改用自动填充，实现真正自适应 */
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 12px;
min-height: 120px;
/* 必须加，让 grid 不受父级弹性压缩影响 */
width: 100%;
box-sizing: border-box;
}
@media (max-width: 1400px) {
.material-grid {
grid-template-columns: repeat(3, minmax(220px, 1fr));
}
}
@media (max-width: 1100px) {
.material-grid {
grid-template-columns: repeat(2, minmax(220px, 1fr));
}
}
/* 媒体查询只需要控制最小宽度即可，不用写死列数 */
@media (max-width: 768px) {
.material-grid {
grid-template-columns: 1fr;
}
}
/* =============================== */
.material-card {
border: 1px solid #e9ecf2;
border-radius: 8px;
@@ -618,32 +640,59 @@ export default {
background: #ffffff;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}
.material-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 8px;
/* 新增：让文字区域和按钮分行适配小宽度 */
flex-wrap: wrap;
}
/* 新增：文字容器，限制宽度并溢出省略 */
.material-text-wrap {
flex: 1;
min-width: 0;
/* 关键：让flex子元素遵守宽度限制 */
}
.material-title {
font-weight: 600;
color: #303133;
/* 新增：标题溢出省略 */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 180px;
/* 可根据需要调整最大宽度 */
}
.material-sub {
font-size: 12px;
color: #909399;
/* 核心：入场钢卷号溢出省略 */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 180px;
/* 限制最大长度，避免挤压按钮 */
}
.material-body {
font-size: 12px;
color: #606266;
display: grid;
gap: 4px;
}
.material-row {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.plan-summary {
display: grid;
grid-template-columns: repeat(3, minmax(120px, 1fr));
@@ -652,14 +701,17 @@ export default {
color: #606266;
margin-bottom: 8px;
}
:deep(.el-card__header) {
border-bottom: 1px solid #f0f2f5;
background: #ffffff;
}
:deep(.el-table th),
:deep(.el-table td) {
border-bottom: 1px solid #f0f2f5;
}
:deep(.el-table::before) {
background-color: transparent;
}