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

4
klp-ui/src/api/wms/coil.js
View File

@@ -116,8 +116,8 @@ export function splitMaterialCoil(data) {
// 钢卷合卷
export function mergeMaterialCoil(data) {
return request({
url: '/wms/materialCoil',
method: 'put',
url: '/wms/materialCoil/merge',
method: 'post',
data: data
})
}

165
klp-ui/src/views/wms/anneal/furnace/index.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="80px">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="60px">
<el-form-item label="炉编号" prop="furnaceCode">
<el-input v-model="queryParams.furnaceCode" placeholder="请输入炉编号" clearable @keyup.enter.native="handleQuery" />
</el-form-item>
@@ -38,36 +38,44 @@
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<KLPTable v-loading="loading" :data="furnaceList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="炉编号" align="center" prop="furnaceCode" />
<el-table-column label="名称" align="center" prop="furnaceName" />
<el-table-column label="状态" align="center" prop="status">
<template slot-scope="scope">
<el-tag v-if="scope.row.status === 1" type="success">启用</el-tag>
<el-tag v-else type="info">停用</el-tag>
</template>
</el-table-column>
<el-table-column label="忙碌" align="center" prop="busyFlag">
<template slot-scope="scope">
<el-tag v-if="scope.row.busyFlag === 1" type="warning">忙碌</el-tag>
<el-tag v-else type="success">空闲</el-tag>
</template>
</el-table-column>
<el-table-column label="备注" align="center" prop="remark" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
<el-button size="mini" type="text" icon="el-icon-setting" @click="handleToggleStatus(scope.row)">
{{ scope.row.status === 1 ? '停用' : '启用' }}
</el-button>
<el-button size="mini" type="text" icon="el-icon-time" @click="handleToggleBusy(scope.row)">
{{ scope.row.busyFlag === 1 ? '置闲' : '置忙' }}
</el-button>
</template>
</el-table-column>
</KLPTable>
<div class="furnace-container">
<div v-for="item in furnaceList" :key="item.furnaceId" class="furnace-card">
<div class="furnace-header">
<svg-icon icon-class="furnace" :class="item.busyFlag === 1 ? 'furnace-busy' : 'furnace-idle'" />
<div>
<div class="furnace-name">{{ item.furnaceName }}</div>
<div class="furnace-code">{{ item.furnaceCode }}</div>
</div>
</div>
<div class="furnace-body">
<div class="furnace-line">状态：<span :class="item.status === 1 ? 'active-text' : 'inactive-text'">{{ item.status === 1 ? '启用' : '停用' }}</span></div>
<div class="furnace-line">忙碌：<span :class="item.busyFlag === 1 ? 'busy-text' : 'idle-text'">{{ item.busyFlag === 1 ? '忙碌' : '空闲' }}</span></div>
<!-- <div v-if="item.busyFlag === 1" class="furnace-line">
计划：{{ item.currentPlanNo || '-' }}
</div>
<div v-if="item.busyFlag === 1" class="furnace-line">
当前钢卷：{{ item.coilCount || 0 }}
</div>
<div v-if="item.busyFlag === 1" class="furnace-line">
预计剩余：{{ formatCountdown(item.planEndTime) }}
</div> -->
<!-- <div v-else class="furnace-line">待入炉计划：{{ planQueueCount(item.furnaceId) }}</div> -->
<div class="furnace-line">
备注：{{ item.remark }}
</div>
<div class="furnace-actions">
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(item)">修改</el-button>
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(item)">删除</el-button>
<!-- <el-button size="mini" type="text" icon="el-icon-setting" @click="handleToggleStatus(item)">
{{ item.status === 1 ? '停用' : '启用' }}
</el-button>
<el-button size="mini" type="text" icon="el-icon-time" @click="handleToggleBusy(item)">
{{ item.busyFlag === 1 ? '置闲' : '置忙' }}
</el-button> -->
</div>
</div>
</div>
</div>
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
@@ -105,6 +113,7 @@
<script>
import { listAnnealFurnace, getAnnealFurnace, addAnnealFurnace, updateAnnealFurnace, delAnnealFurnace, changeAnnealFurnaceStatus, changeAnnealFurnaceBusy } from "@/api/wms/annealFurnace";
import { listAnnealPlan } from "@/api/wms/annealPlan";
export default {
name: "AnnealFurnace",
@@ -118,6 +127,7 @@ export default {
showSearch: true,
total: 0,
furnaceList: [],
planQueue: [],
title: "",
open: false,
queryParams: {
@@ -141,12 +151,36 @@ export default {
methods: {
getList() {
this.loading = true;
listAnnealFurnace(this.queryParams).then(response => {
this.furnaceList = response.rows;
this.total = response.total;
Promise.all([
listAnnealFurnace(this.queryParams),
listAnnealPlan({ pageNum: 1, pageSize: 100 })
]).then(([furnaceResponse, planResponse]) => {
this.furnaceList = furnaceResponse.rows;
this.total = furnaceResponse.total;
this.planQueue = planResponse.rows || [];
this.loading = false;
}).catch(() => {
this.loading = false;
});
},
planQueueCount(furnaceId) {
if (!this.planQueue) {
return 0;
}
return this.planQueue.filter(item => item.targetFurnaceId === furnaceId && item.status === 0).length;
},
formatCountdown(endTime) {
if (!endTime) return '-';
const end = new Date(endTime).getTime();
const now = Date.now();
let diff = Math.max(0, end - now);
const hours = Math.floor(diff / (1000 * 60 * 60));
diff %= 1000 * 60 * 60;
const minutes = Math.floor(diff / (1000 * 60));
diff %= 1000 * 60;
const seconds = Math.floor(diff / 1000);
return `${hours}小时${minutes}分${seconds}秒`;
},
cancel() {
this.open = false;
this.reset();
@@ -265,3 +299,66 @@ export default {
}
};
</script>
<style scoped>
.furnace-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 12px;
margin-bottom: 16px;
}
.furnace-card {
border: 1px solid #f0f2f5;
border-radius: 8px;
padding: 12px;
background: #ffffff;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}
.furnace-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 8px;
}
.furnace-name {
font-weight: 600;
color: #303133;
}
.furnace-code {
font-size: 12px;
color: #909399;
}
.furnace-body {
font-size: 13px;
color: #606266;
}
.furnace-line {
margin-bottom: 4px;
}
.furnace-actions {
margin-top: 12px;
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.furnace-idle {
font-size: 28px;
color: #303133;
}
.furnace-busy {
font-size: 28px;
color: #f56c6c;
}
.busy-text {
color: #f56c6c;
}
.idle-text {
color: #67c23a;
}
.active-text {
color: #67c23a;
}
.inactive-text {
color: #909399;
}
</style>

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;
}

1
klp-ui/src/views/wms/coil/do/correct.vue
View File

@@ -758,7 +758,6 @@ export default {
this.labelRender.type = type;
this.labelRender.data = {
...row,
itemName: itemName,
updateTime: row.updateTime?.split(' ')[0] || '',
};
},

4
klp-ui/src/views/wms/coil/merge.vue
View File

@@ -655,6 +655,8 @@ export default {
enterCoilNo: item.enterCoilNo,
currentCoilNo: item.currentCoilNo,
materialType: item.materialType,
actionId: item.actionId, // 保存待操作ID，用于后续完成操作
actionType: this.actionTypeCode, // 合卷操作类型
}))
};
@@ -663,7 +665,7 @@ export default {
text: '正在合卷，请稍后...',
background: 'rgba(0, 0, 0, 0.7)'
});
this.completeAllRelatedActions();
// this.completeAllRelatedActions();
await mergeMaterialCoil(mergeData);
this.$message.success('合卷保存成功');

2
klp-ui/src/views/wms/coil/panels/base.vue
View File

@@ -814,9 +814,9 @@ export default {
handlePrintLabel(row) {
const type = getCoilTagPrintType(row);
this.labelRender.type = type;
this.labelRender.data = {
...row,
itemName: itemName,
updateTime: row.updateTime?.split(' ')[0] || '',
};
this.$nextTick(() => {

1
klp-ui/src/views/wms/coil/panels/do.vue
View File

@@ -720,7 +720,6 @@ export default {
this.labelRender.type = type;
this.labelRender.data = {
...row,
itemName: itemName,
updateTime: row.updateTime?.split(' ')[0] || '',
};
this.$nextTick(() => {