This commit is contained in:
砂糖
2026-03-15 11:03:53 +08:00
56 changed files with 3783 additions and 0 deletions

View File

@@ -0,0 +1,267 @@
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="80px">
<el-form-item label="炉编号" prop="furnaceCode">
<el-input v-model="queryParams.furnaceCode" placeholder="请输入炉编号" clearable @keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item label="名称" prop="furnaceName">
<el-input v-model="queryParams.furnaceName" placeholder="请输入名称" clearable @keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item label="状态" prop="status">
<el-select v-model="queryParams.status" placeholder="请选择" clearable>
<el-option label="启用" :value="1" />
<el-option label="停用" :value="0" />
</el-select>
</el-form-item>
<el-form-item label="忙碌" prop="busyFlag">
<el-select v-model="queryParams.busyFlag" placeholder="请选择" clearable>
<el-option label="空闲" :value="0" />
<el-option label="忙碌" :value="1" />
</el-select>
</el-form-item>
<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-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="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>
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
<el-dialog :title="title" :visible.sync="open" width="450px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
<el-form-item label="炉编号" prop="furnaceCode">
<el-input v-model="form.furnaceCode" placeholder="请输入炉编号" />
</el-form-item>
<el-form-item label="名称" prop="furnaceName">
<el-input v-model="form.furnaceName" placeholder="请输入名称" />
</el-form-item>
<el-form-item label="状态" prop="status">
<el-radio-group v-model="form.status">
<el-radio :label="1">启用</el-radio>
<el-radio :label="0">停用</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="忙碌" prop="busyFlag">
<el-radio-group v-model="form.busyFlag">
<el-radio :label="1">忙碌</el-radio>
<el-radio :label="0">空闲</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" type="textarea" placeholder="请输入备注" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button :loading="buttonLoading" type="primary" @click="submitForm"> </el-button>
<el-button @click="cancel"> </el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { listAnnealFurnace, getAnnealFurnace, addAnnealFurnace, updateAnnealFurnace, delAnnealFurnace, changeAnnealFurnaceStatus, changeAnnealFurnaceBusy } from "@/api/wms/annealFurnace";
export default {
name: "AnnealFurnace",
data() {
return {
buttonLoading: false,
loading: true,
ids: [],
single: true,
multiple: true,
showSearch: true,
total: 0,
furnaceList: [],
title: "",
open: false,
queryParams: {
pageNum: 1,
pageSize: 20,
furnaceCode: undefined,
furnaceName: undefined,
status: undefined,
busyFlag: undefined,
},
form: {},
rules: {
furnaceCode: [{ required: true, message: "炉编号不能为空", trigger: "blur" }],
furnaceName: [{ required: true, message: "名称不能为空", trigger: "blur" }],
},
};
},
created() {
this.getList();
},
methods: {
getList() {
this.loading = true;
listAnnealFurnace(this.queryParams).then(response => {
this.furnaceList = response.rows;
this.total = response.total;
this.loading = false;
});
},
cancel() {
this.open = false;
this.reset();
},
reset() {
this.form = {
furnaceId: undefined,
furnaceCode: undefined,
furnaceName: undefined,
status: 1,
busyFlag: 0,
remark: undefined,
};
this.resetForm("form");
},
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
handleSelectionChange(selection) {
this.ids = selection.map(item => item.furnaceId);
this.single = selection.length !== 1;
this.multiple = !selection.length;
},
handleAdd() {
this.reset();
this.open = true;
this.title = "添加退火炉";
},
handleUpdate(row) {
this.loading = true;
this.reset();
const furnaceId = row.furnaceId || this.ids;
getAnnealFurnace(furnaceId).then(response => {
this.loading = false;
this.form = response.data;
if (this.form.status === null || this.form.status === undefined) {
this.form.status = 1;
}
if (this.form.busyFlag === null || this.form.busyFlag === undefined) {
this.form.busyFlag = 0;
}
this.open = true;
this.title = "修改退火炉";
});
},
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
this.buttonLoading = true;
if (this.form.furnaceId != null) {
updateAnnealFurnace(this.form).then(() => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
}).finally(() => {
this.buttonLoading = false;
});
} else {
addAnnealFurnace(this.form).then(() => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
}).finally(() => {
this.buttonLoading = false;
});
}
}
});
},
handleDelete(row) {
const ids = row.furnaceId || this.ids;
this.$modal.confirm('是否确认删除炉子编号为"' + ids + '"的数据项?').then(() => {
this.loading = true;
return delAnnealFurnace(ids);
}).then(() => {
this.loading = false;
this.getList();
this.$modal.msgSuccess("删除成功");
}).finally(() => {
this.loading = false;
});
},
async handleToggleStatus(row) {
await this.$confirm(`确定${row.status === 1 ? '停用' : '启用'}该炉子吗?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
});
this.loading = true;
await changeAnnealFurnaceStatus({
furnaceId: row.furnaceId,
status: row.status === 1 ? 0 : 1
});
this.loading = false;
this.getList();
},
async handleToggleBusy(row) {
await this.$confirm(`确定${row.busyFlag === 1 ? '置闲' : '置忙'}该炉子吗?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
});
this.loading = true;
await changeAnnealFurnaceBusy({
furnaceId: row.furnaceId,
busyFlag: row.busyFlag === 1 ? 0 : 1
});
this.loading = false;
this.getList();
}
}
};
</script>

View File

@@ -0,0 +1,336 @@
·<template>
<div class="app-container">
<el-row :gutter="12" class="summary-row">
<el-col :xs="24" :sm="12" :md="6">
<div class="summary-card">
<div class="summary-title">当前计划数</div>
<div class="summary-value">{{ overview.totalPlanCount || 0 }}</div>
</div>
</el-col>
<el-col :xs="24" :sm="12" :md="6">
<div class="summary-card">
<div class="summary-title">退火炉(忙碌/全部)</div>
<div class="summary-value">{{ overview.furnaceBusyCount || 0 }}/{{ overview.furnaceTotal || 0 }}</div>
</div>
</el-col>
<el-col :xs="24" :sm="12" :md="6">
<div class="summary-card">
<div class="summary-title">待退火钢卷</div>
<div class="summary-value">{{ overview.pendingCoilCount || 0 }}</div>
</div>
</el-col>
<el-col :xs="24" :sm="12" :md="6">
<div class="summary-card">
<div class="summary-title">今日已完成</div>
<div class="summary-value">
计划 {{ overview.todayDonePlanCount || 0 }} | 钢卷 {{ overview.todayDoneCoilCount || 0 }}
</div>
</div>
</el-col>
</el-row>
<el-card shadow="never" class="panel">
<div slot="header" class="panel-title">退火炉状态</div>
<div class="furnace-grid">
<div v-for="item in overview.furnaces" :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.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>
</div>
</div>
</el-card>
<el-card shadow="never" class="panel">
<div slot="header" class="panel-title">计划队列</div>
<el-table :data="overview.planQueue" v-loading="loading">
<el-table-column label="计划号" prop="planNo" align="center" />
<el-table-column label="目标炉子" prop="targetFurnaceName" align="center" />
<el-table-column label="状态" prop="status" align="center">
<template slot-scope="scope">
<el-tag :type="statusTag(scope.row.status)">{{ statusLabel(scope.row.status) }}</el-tag>
</template>
</el-table-column>
<el-table-column label="计划时间" prop="planStartTime" align="center" width="160">
<template slot-scope="scope">
{{ parseTime(scope.row.planStartTime, '{y}-{m}-{d} {h}:{i}') }}
</template>
</el-table-column>
<el-table-column label="钢卷数" prop="coilCount" align="center" />
<el-table-column label="操作" align="center" width="160">
<template slot-scope="scope">
<el-button v-if="scope.row.status === 0" size="mini" type="primary" @click="handleInFurnace(scope.row)">入炉</el-button>
<el-button v-if="scope.row.status === 2" size="mini" type="success" @click="openCompleteDialog(scope.row)">完成</el-button>
</template>
</el-table-column>
</el-table>
</el-card>
<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">
<el-select v-model="scope.row.actualWarehouseId" placeholder="请选择" filterable>
<el-option v-for="item in actualWarehouseOptions" :key="item.actualWarehouseId" :label="item.name" :value="item.actualWarehouseId" />
</el-select>
</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>
</div>
</template>
<script>
import { getAnnealOverview } from "@/api/wms/annealOverview";
import { inFurnace, completeAnnealPlan, listAnnealPlanCoils } from "@/api/wms/annealPlan";
import { listActualWarehouse } from "@/api/wms/actualWarehouse";
export default {
name: "AnnealOverview",
data() {
return {
loading: true,
overview: {
furnaces: [],
planQueue: []
},
timer: null,
completeOpen: false,
completeLoading: false,
completeCoils: [],
completePlanId: null,
actualWarehouseOptions: []
};
},
created() {
this.fetchOverview();
this.startTimer();
this.loadActualWarehouses();
},
beforeDestroy() {
this.stopTimer();
},
methods: {
fetchOverview() {
this.loading = true;
getAnnealOverview().then(response => {
this.overview = response.data || { furnaces: [], planQueue: [] };
this.loading = false;
});
},
startTimer() {
this.stopTimer();
this.timer = setInterval(() => {
this.$forceUpdate();
}, 1000);
},
stopTimer() {
if (this.timer) {
clearInterval(this.timer);
this.timer = null;
}
},
loadActualWarehouses() {
listActualWarehouse({ pageNum: 1, pageSize: 999, actualWarehouseType: 2, isEnabled: 1 }).then(response => {
this.actualWarehouseOptions = response.rows || [];
});
},
openCompleteDialog(row) {
this.completePlanId = row.planId;
this.completeOpen = true;
this.completeLoading = true;
listAnnealPlanCoils(row.planId).then(response => {
this.completeCoils = (response.data || []).map(item => ({
coilId: item.coilId,
enterCoilNo: item.enterCoilNo,
actualWarehouseId: null
}));
this.completeLoading = false;
}).catch(() => {
this.completeLoading = false;
});
},
submitComplete() {
const missing = this.completeCoils.filter(item => !item.actualWarehouseId);
if (missing.length > 0) {
this.$message.warning('请先为所有钢卷分配实际库位');
return;
}
this.completeLoading = true;
completeAnnealPlan({
planId: this.completePlanId,
locations: this.completeCoils.map(item => ({
coilId: item.coilId,
actualWarehouseId: item.actualWarehouseId
}))
}).then(() => {
this.$message.success('已完成');
this.completeOpen = false;
this.fetchOverview();
}).finally(() => {
this.completeLoading = false;
});
},
planQueueCount(furnaceId) {
if (!this.overview.planQueue) {
return 0;
}
return this.overview.planQueue.filter(item => item.targetFurnaceId === furnaceId && item.status !== 2).length;
},
statusLabel(status) {
const map = { 0: '草稿', 1: '已下发', 2: '执行中', 3: '已完成', 4: '已取消' };
return map[status] || '-';
},
statusTag(status) {
const map = { 0: 'info', 1: 'warning', 2: 'success', 3: 'success', 4: 'danger' };
return map[status] || 'info';
},
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}`;
},
handleInFurnace(row) {
const furnace = this.overview.furnaces.find(item => item.furnaceId === row.targetFurnaceId);
if (furnace && furnace.busyFlag === 1) {
this.$message.warning(`炉子正忙:计划${furnace.currentPlanNo || ''},钢卷${furnace.coilCount || 0}`);
return;
}
this.$confirm('确定入炉该计划吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
return inFurnace({ planId: row.planId });
}).then(() => {
this.$message.success('入炉成功');
this.fetchOverview();
});
}
}
};
</script>
<style scoped>
.summary-row {
margin-bottom: 12px;
}
.summary-card {
border: 1px solid #f0f2f5;
border-radius: 6px;
padding: 12px 16px;
height: 90px;
display: flex;
flex-direction: column;
justify-content: center;
background: #ffffff;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}
.summary-title {
font-size: 13px;
color: #909399;
}
.summary-value {
margin-top: 8px;
font-size: 18px;
font-weight: 600;
color: #303133;
}
.panel {
margin-bottom: 16px;
border: 1px solid #f0f2f5;
background: #ffffff;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}
.panel-title {
font-weight: 500;
color: #606266;
}
.furnace-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 12px;
}
.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-idle {
font-size: 28px;
color: #303133;
}
.furnace-busy {
font-size: 28px;
color: #f56c6c;
}
.busy-text {
color: #f56c6c;
}
.idle-text {
color: #67c23a;
}
:deep(.el-table th),
:deep(.el-table td) {
border-bottom: 1px solid #f0f2f5;
}
:deep(.el-table::before) {
background-color: transparent;
}
:deep(.el-card__header) {
border-bottom: 1px solid #f0f2f5;
background: #ffffff;
}
</style>

View File

@@ -0,0 +1,106 @@
<template>
<div class="app-container" v-loading="loading">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="90px">
<el-form-item label="开始时间" prop="startTime">
<el-date-picker v-model="queryParams.startTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择开始时间" />
</el-form-item>
<el-form-item label="结束时间" prop="endTime">
<el-date-picker v-model="queryParams.endTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择结束时间" />
</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-select>
</el-form-item>
<el-form-item label="计划号" prop="planNo">
<el-input v-model="queryParams.planNo" placeholder="请输入计划号" clearable />
</el-form-item>
<el-form-item label="入场钢卷号" prop="enterCoilNo">
<el-input v-model="queryParams.enterCoilNo" placeholder="请输入入场钢卷号" clearable />
</el-form-item>
<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-form-item>
</el-form>
<el-descriptions title="统计信息" :column="3" class="summary-block" border>
<el-descriptions-item label="计划数量">{{ summary.planCount || 0 }}</el-descriptions-item>
<el-descriptions-item label="钢卷数量">{{ summary.coilCount || 0 }}</el-descriptions-item>
<el-descriptions-item label="总重量">{{ summary.totalWeight || 0 }} t</el-descriptions-item>
</el-descriptions>
<el-table :data="detailList" border height="calc(100vh - 330px)">
<el-table-column label="计划号" prop="planNo" align="center" />
<el-table-column label="目标炉" prop="targetFurnaceName" align="center" />
<el-table-column label="开始时间" prop="actualStartTime" align="center" width="160">
<template slot-scope="scope">
{{ parseTime(scope.row.actualStartTime, '{y}-{m}-{d} {h}:{i}') }}
</template>
</el-table-column>
<el-table-column label="结束时间" prop="endTime" align="center" width="160">
<template slot-scope="scope">
{{ parseTime(scope.row.endTime, '{y}-{m}-{d} {h}:{i}') }}
</template>
</el-table-column>
<el-table-column label="入场钢卷号" prop="enterCoilNo" align="center" />
<el-table-column label="当前钢卷号" prop="currentCoilNo" align="center" />
<el-table-column label="重量(t)" prop="netWeight" align="center" />
</el-table>
</div>
</template>
<script>
import { getAnnealPerformance } from "@/api/wms/annealPerformance";
import { listAnnealFurnace } from "@/api/wms/annealFurnace";
export default {
name: "AnnealPerformance",
data() {
return {
loading: false,
queryParams: {
startTime: undefined,
endTime: undefined,
targetFurnaceId: undefined,
planNo: undefined,
enterCoilNo: undefined,
},
summary: {},
detailList: [],
furnaceOptions: [],
};
},
created() {
this.loadFurnaces();
},
methods: {
loadFurnaces() {
listAnnealFurnace({ pageNum: 1, pageSize: 999, status: 1 }).then(response => {
this.furnaceOptions = response.rows || [];
});
},
handleQuery() {
this.loading = true;
getAnnealPerformance(this.queryParams).then(response => {
const data = response.data || {};
this.summary = data.summary || {};
this.detailList = data.details || [];
this.loading = false;
}).catch(() => {
this.loading = false;
});
},
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
}
}
};
</script>
<style scoped>
.summary-block {
margin: 12px 0 16px;
}
</style>

View File

@@ -0,0 +1,610 @@
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="90px">
<el-form-item label="计划号" prop="planNo">
<el-input v-model="queryParams.planNo" placeholder="请输入计划号" clearable @keyup.enter.native="handleQuery" />
</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-select>
</el-form-item>
<el-form-item label="状态" prop="status">
<el-select v-model="queryParams.status" placeholder="请选择" clearable>
<el-option label="未开始" :value="0" />
<el-option label="进行中" :value="2" />
<el-option label="已完成" :value="3" />
</el-select>
</el-form-item>
<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-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" />
<el-table-column label="计划号" align="center" prop="planNo" />
<el-table-column label="计划时间" align="center" prop="planStartTime" width="160">
<template slot-scope="scope">
{{ parseTime(scope.row.planStartTime, '{y}-{m}-{d} {h}:{i}') }}
</template>
</el-table-column>
<el-table-column label="目标炉" align="center" prop="targetFurnaceName" />
<el-table-column label="状态" align="center" prop="status">
<template slot-scope="scope">
<el-tag :type="statusTag(scope.row.status)">{{ statusLabel(scope.row.status) }}</el-tag>
</template>
</el-table-column>
<el-table-column label="开始时间" align="center" prop="actualStartTime" width="160">
<template slot-scope="scope">
{{ parseTime(scope.row.actualStartTime || scope.row.planStartTime, '{y}-{m}-{d} {h}:{i}') }}
</template>
</el-table-column>
<el-table-column label="结束时间" align="center" prop="endTime" width="160">
<template slot-scope="scope">
{{ 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" @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" />
<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>
<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>
<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 === 2">加入计划</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>
</div>
<pagination v-show="materialTotal > 0" :total="materialTotal" :page.sync="materialQueryParams.pageNum"
:limit.sync="materialQueryParams.pageSize" @pagination="getMaterialCoils" />
</el-card>
</el-col>
<el-col :span="12">
<el-card shadow="never" class="panel-card">
<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="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-table :data="coilList" v-loading="coilLoading" class="light-table">
<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="180">
<template slot-scope="scope">
<el-select v-model="scope.row.actualWarehouseId" placeholder="选择库位" clearable size="mini" filterable>
<el-option v-for="item in actualWarehouseOptions" :key="item.actualWarehouseId" :label="item.actualWarehouseName" :value="item.actualWarehouseId" />
</el-select>
</template>
</el-table-column>
<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)" :disabled="currentPlan.status === 2">解绑</el-button>
</template>
</el-table-column>
</el-table>
</div>
</el-card>
</el-col>
</el-row>
<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">
<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-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-select>
</el-form-item>
<el-form-item label="状态" prop="status">
<el-select v-model="form.status" placeholder="请选择">
<el-option label="草稿" :value="0" />
<el-option label="已下发" :value="1" />
<el-option label="执行中" :value="2" />
<el-option label="已完成" :value="3" />
<el-option label="已取消" :value="4" />
</el-select>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" type="textarea" placeholder="请输入备注" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button :loading="buttonLoading" type="primary" @click="submitForm"> </el-button>
<el-button @click="cancel"> </el-button>
</div>
</el-dialog>
<el-dialog title="更新状态" :visible.sync="statusOpen" width="360px" append-to-body>
<el-form label-width="90px">
<el-form-item label="状态">
<el-select v-model="statusForm.status" placeholder="请选择">
<el-option label="未开始" :value="0" />
<el-option label="进行中" :value="2" />
<el-option label="已完成" :value="3" />
</el-select>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitStatus"> </el-button>
<el-button @click="statusOpen = false"> </el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { listAnnealPlan, getAnnealPlan, 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 { listActualWarehouse } from "@/api/wms/actualWarehouse";
export default {
name: "AnnealPlan",
data() {
return {
buttonLoading: false,
loading: true,
coilLoading: false,
ids: [],
single: true,
multiple: true,
showSearch: true,
total: 0,
planList: [],
furnaceOptions: [],
title: "",
open: false,
statusOpen: false,
queryParams: {
pageNum: 1,
pageSize: 20,
planNo: undefined,
targetFurnaceId: undefined,
status: undefined,
},
form: {},
rules: {
planNo: [{ required: true, message: "计划号不能为空", trigger: "blur" }],
targetFurnaceId: [{ required: true, message: "目标炉子不能为空", trigger: "change" }],
},
currentPlan: {},
coilList: [],
materialLoading: false,
materialTotal: 0,
materialList: [],
materialQueryParams: {
pageNum: 1,
pageSize: 10,
enterCoilNo: undefined,
currentCoilNo: undefined,
status: 0,
dataType: 1,
},
actualWarehouseOptions: [],
statusForm: {
planId: undefined,
status: undefined,
},
};
},
created() {
this.getList();
this.loadFurnaces();
this.getMaterialCoils();
this.loadActualWarehouses();
},
methods: {
getList() {
this.loading = true;
listAnnealPlan(this.queryParams).then(response => {
this.planList = response.rows;
this.total = response.total;
this.loading = false;
});
},
loadFurnaces() {
listAnnealFurnace({ pageNum: 1, pageSize: 999, status: 1 }).then(response => {
this.furnaceOptions = response.rows || [];
});
},
handleRowClick(row) {
this.currentPlan = row;
this.loadPlanCoils();
},
getMaterialCoils() {
this.materialLoading = true;
listMaterialCoil(this.materialQueryParams).then(response => {
this.materialList = response.rows || [];
this.materialTotal = response.total || 0;
this.materialLoading = false;
});
},
handleMaterialQuery() {
this.materialQueryParams.pageNum = 1;
this.getMaterialCoils();
},
resetMaterialQuery() {
this.resetForm("materialQueryForm");
this.resetMaterialForm();
this.handleMaterialQuery();
},
loadActualWarehouses() {
listActualWarehouse({ pageNum: 1, pageSize: 999, actualWarehouseType: 2, isEnabled: 1 }).then(response => {
this.actualWarehouseOptions = response.rows || [];
});
},
openCompleteDialog() {
if (!this.currentPlan.planId) {
this.$message.warning('请先选择计划');
return;
}
if (this.currentPlan.status !== 2) {
this.$message.warning('计划未进行中,无法完成');
return;
}
this.$confirm('完成计划前请为每条钢卷选择实际库位,确认继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.handleComplete(this.currentPlan);
});
},
handleAddToPlan(item) {
if (!this.currentPlan.planId) {
this.$message.warning('请先选择计划');
return;
}
if (this.currentPlan.status === 2) {
this.$message.warning('当前计划进行中,无法再领料');
return;
}
this.coilLoading = true;
bindAnnealPlanCoils({
planId: this.currentPlan.planId,
coilId: item.coilId
}).then(() => {
this.$message.success('已加入计划');
this.loadPlanCoils();
}).finally(() => {
this.coilLoading = false;
});
},
loadPlanCoils() {
if (!this.currentPlan.planId) {
this.coilList = [];
return;
}
this.coilLoading = true;
listAnnealPlanCoils(this.currentPlan.planId).then(response => {
this.coilList = response.data || [];
this.coilLoading = false;
});
},
cancel() {
this.open = false;
this.reset();
},
reset() {
this.form = {
planId: undefined,
planNo: undefined,
planStartTime: undefined,
targetFurnaceId: undefined,
status: 0,
remark: undefined,
};
this.resetForm("form");
},
resetMaterialForm() {
this.materialQueryParams = {
pageNum: 1,
pageSize: 10,
enterCoilNo: undefined,
currentCoilNo: undefined,
status: 0,
dataType: 1,
};
},
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
handleSelectionChange(selection) {
this.ids = selection.map(item => item.planId);
this.single = selection.length !== 1;
this.multiple = !selection.length;
},
handleAdd() {
this.reset();
this.open = true;
this.title = "添加退火计划";
},
handleUpdate(row) {
this.loading = true;
this.reset();
const planId = row.planId || this.ids;
getAnnealPlan(planId).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.planId != null) {
updateAnnealPlan(this.form).then(() => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
}).finally(() => {
this.buttonLoading = false;
});
} else {
addAnnealPlan(this.form).then(() => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
}).finally(() => {
this.buttonLoading = false;
});
}
}
});
},
handleDelete(row) {
const ids = row.planId || this.ids;
this.$modal.confirm('是否确认删除计划编号为"' + ids + '"的数据项?').then(() => {
this.loading = true;
return delAnnealPlan(ids);
}).then(() => {
this.loading = false;
this.getList();
this.$modal.msgSuccess("删除成功");
}).finally(() => {
this.loading = false;
});
},
openStatusDialog(row) {
this.statusForm = {
planId: row.planId,
status: row.status,
};
this.statusOpen = true;
},
submitStatus() {
changeAnnealPlanStatus(this.statusForm).then(() => {
this.$modal.msgSuccess("状态已更新");
this.statusOpen = false;
this.getList();
});
},
async handleInFurnace(row) {
await this.$confirm('确定执行入炉操作吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
});
this.loading = true;
await inFurnace({ planId: row.planId });
this.loading = false;
this.getList();
if (this.currentPlan.planId === row.planId) {
this.loadPlanCoils();
}
this.$message.success('已入炉');
},
async handleComplete(row) {
const locations = (this.coilList || []).map(item => ({
coilId: item.coilId,
actualWarehouseId: item.actualWarehouseId
}));
const missing = locations.filter(item => !item.actualWarehouseId);
if (missing.length > 0) {
this.$message.warning('请先为所有钢卷分配实际库位');
return;
}
this.loading = true;
await completeAnnealPlan({
planId: row.planId,
locations: locations
});
this.loading = false;
this.getList();
this.loadPlanCoils();
this.$message.success('已完成');
},
handleUnbind(row) {
this.$confirm('确定解绑该钢卷吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
return unbindAnnealPlanCoil({
planId: this.currentPlan.planId,
coilId: row.coilId
});
}).then(() => {
this.$message.success('解绑成功');
this.loadPlanCoils();
});
},
statusLabel(status) {
if (status === 2) {
return '进行中';
}
if (status === 3) {
return '已完成';
}
return '未开始';
},
statusTag(status) {
if (status === 2) {
return 'success';
}
if (status === 3) {
return 'info';
}
return 'warning';
}
}
};
</script>
<style scoped>
.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(auto-fill, minmax(220px, 1fr));
gap: 12px;
min-height: 120px;
}
.material-card {
border: 1px solid #e9ecf2;
border-radius: 8px;
padding: 12px;
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;
}
.material-title {
font-weight: 600;
color: #303133;
}
.material-sub {
font-size: 12px;
color: #909399;
}
.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));
gap: 8px;
font-size: 12px;
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;
}
</style>