refactor(wms/coil): 拆分锁定异常页面,将分条退火锁定功能独立为新页面

1.  从typeError.vue中注释掉分条锁定、退火锁定的单选按钮
2.  新增lock.vue页面实现分条/退火锁定钢卷的管理功能
This commit is contained in:
2026-05-21 10:58:25 +08:00
parent 7b47403ae8
commit 015a3622d7
2 changed files with 580 additions and 2 deletions

View File

@@ -0,0 +1,578 @@
<template>
<div class="app-container" v-loading="loading">
<div style="display: flex; align-items: center; justify-content: flex-start; gap: 10px;">
<el-radio-group v-model="activeTab" @change="handleRefresh">
<!-- <el-radio-button label="missing">类型缺失</el-radio-button>
<el-radio-button label="rawMaterialMissing">原料类型缺失</el-radio-button>
<el-radio-button label="mismatch">匹配异常</el-radio-button> -->
<el-radio-button label="splitlock">分条锁定</el-radio-button>
<el-radio-button label="anneallock">退火锁定</el-radio-button>
</el-radio-group>
<el-button type="success" plain size="mini" icon="el-icon-refresh" @click="handleRefresh">刷新</el-button>
</div>
<KLPTable :data="materialCoilList" @selection-change="handleSelectionChange" height="calc(100vh - 220px)"
:floatLayer="true" :floatLayerConfig="floatLayerConfig">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="入场钢卷号" align="center" prop="enterCoilNo">
<template slot-scope="scope">
<coil-no :coil-no="scope.row.enterCoilNo"></coil-no>
</template>
</el-table-column>
<el-table-column label="当前钢卷号" align="center" prop="currentCoilNo">
<template slot-scope="scope">
<current-coil-no :current-coil-no="scope.row.currentCoilNo"></current-coil-no>
</template>
</el-table-column>
<!-- <el-table-column label="逻辑库位" align="center" prop="warehouseName" />
<el-table-column label="实际库区" align="center" prop="actualWarehouseName" /> -->
<el-table-column label="产品类型" align="center" width="180">
<template slot-scope="scope">
<ProductInfo v-if="scope.row.itemType == 'product'" :product="scope.row" />
<RawMaterialInfo v-else-if="scope.row.itemType === 'raw_material'" :material="scope.row" />
</template>
</el-table-column>
<!-- <el-table-column label="异常数量" align="center" prop="abnormalCount"></el-table-column> -->
<el-table-column label="净重" align="center" prop="netWeight" />
<el-table-column label="更新时间" align="center" prop="updateTime" />
<el-table-column label="更新人" align="center" prop="updateBy" />
<el-table-column label="操作" align="center" prop="action" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleCheck(scope.row)">修正</el-button>
<el-button size="mini" type="text" icon="el-icon-view" @click="handlePreviewLabel(scope.row)">
预览标签
</el-button>
<el-button size="mini" type="text" icon="el-icon-printer" @click="handlePrintLabel(scope.row)">
打印标签
</el-button>
<el-button size="mini" type="text" icon="el-icon-search" @click="handleTrace(scope.row)">追溯</el-button>
<el-button :loading="buttonLoading" v-if="activeTab === 'mismatch'" size="mini" type="text" icon="el-icon-close"
@click="handleFixType(scope.row)">一键修复类型</el-button>
<el-button :loading="buttonLoading" v-if="activeTab === 'splitlock' || activeTab === 'anneallock'" size="mini" type="text" icon="el-icon-close"
@click="handleExcludeLock(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="getListMismatched" />
<!-- 标签预览弹窗 -->
<el-dialog title="标签预览" :visible.sync="labelRender.visible" append-to-body>
<label-render :forceSpecialTag="forceSpecialTag" :content="labelRender.data" :labelType="labelRender.type" />
</el-dialog>
<label-render :forceSpecialTag="forceSpecialTag" ref="labelRender" v-show="false" :content="labelRender.data"
:labelType="labelRender.type" />
<!-- 钢卷追溯对话框使用封装的组件 -->
<el-dialog title="钢卷追溯" :visible.sync="traceOpen" width="90%" append-to-body>
<coil-trace-result v-loading="traceLoading" :trace-result="traceResult"></coil-trace-result>
</el-dialog>
<!-- 添加或修改钢卷物料对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
<el-form-item label="入场钢卷号" prop="enterCoilNo">
<el-input v-model="form.enterCoilNo" placeholder="请输入入场钢卷号" :disabled="form.coilId" />
</el-form-item>
<el-form-item label="当前钢卷号" prop="currentCoilNo">
<el-input v-model="form.currentCoilNo" placeholder="请输入当前钢卷号" />
</el-form-item>
<el-form-item label="厂家原料卷号" prop="supplierCoilNo">
<el-input v-model="form.supplierCoilNo" placeholder="请输入厂家原料卷号" />
</el-form-item>
<el-form-item label="所在库位" prop="warehouseId">
<warehouse-select v-model="form.warehouseId" placeholder="请选择仓库/库区/库位" style="width: 100%;" clearable />
</el-form-item>
<el-form-item label="实际库区" prop="actualWarehouseId">
<actual-warehouse-select v-model="form.actualWarehouseId" :clearInput="form.coilId != null"
placeholder="请选择实际库区" style="width: 100%;" clearable />
</el-form-item>
<el-form-item label="班组" prop="team">
<el-select v-model="form.team" placeholder="请选择班组" style="width: 100%">
<el-option key="甲" label="甲" value="甲" />
<el-option key="乙" label="乙" value="乙" />
</el-select>
</el-form-item>
<el-form-item label="材料类型" prop="materialType">
<el-select v-model="form.materialType" placeholder="请选择材料类型" @change="handleMaterialTypeChange">
<el-option label="成品" value="成品" />
<el-option label="原料" value="原料" />
</el-select>
</el-form-item>
<el-form-item :label="getItemLabel" prop="itemId">
<product-select v-if="form.itemType == 'product'" v-model="form.itemId" placeholder="请选择成品"
style="width: 100%;" clearable />
<raw-material-select v-else-if="form.itemType == 'raw_material'" v-model="form.itemId" placeholder="请选择原料"
style="width: 100%;" clearable />
<div v-else>请先选择材料类型</div>
</el-form-item>
<el-form-item label="切边要求" prop="trimmingRequirement">
<el-select v-model="form.trimmingRequirement" placeholder="请选择切边要求" style="width: 100%">
<el-option label="净边料" value="净边料" />
<el-option label="毛边料" value="毛边料" />
</el-select>
</el-form-item>
<el-form-item label="原料材质" prop="packingStatus">
<el-input v-model="form.packingStatus" placeholder="请输入原料材质">
</el-input>
</el-form-item>
<el-form-item label="包装要求" prop="packagingRequirement">
<el-select v-model="form.packagingRequirement" placeholder="请选择包装要求" style="width: 100%">
<el-option label="裸包" value="裸包" />
<el-option label="普包" value="普包" />
<el-option label="简包" value="简包" />
</el-select>
</el-form-item>
<el-form-item label="毛重" prop="grossWeight">
<el-input v-model="form.grossWeight" placeholder="请输入毛重" />
</el-form-item>
<el-form-item label="净重" prop="netWeight">
<el-input v-model="form.netWeight" placeholder="请输入净重" />
</el-form-item>
<el-form-item label="实测长度(m)" prop="actualLength">
<el-input-number :controls="false" v-model="form.actualLength" placeholder="请输入实测长度" type="number"
:step="0.01" />
</el-form-item>
<el-form-item label="实测厚度(mm)" prop="actualThickness" class="form-item-half">
<el-input-number :controls="false" v-model="form.actualThickness" placeholder="请输入实测厚度" type="number"
:step="0.01" />
</el-form-item>
<el-form-item label="实测宽度(mm)" prop="actualWidth">
<el-input-number :controls="false" v-model="form.actualWidth" placeholder="请输入实测宽度" type="number"
:step="0.01" />
</el-form-item>
<el-form-item label="调制度" prop="temperGrade">
<el-input v-model="form.temperGrade" placeholder="请输入调制度" />
</el-form-item>
<el-form-item label="镀层种类" prop="coatingType">
<el-input v-model="form.coatingType" placeholder="请输入镀层种类" />
</el-form-item>
<el-form-item label="钢卷表面处理" prop="coilSurfaceTreatment">
<el-input v-model="form.coilSurfaceTreatment" placeholder="请输入钢卷表面处理" />
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" 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 { listTypeErrorCoil, getMaterialCoilTrace, getMaterialCoil, updateMaterialCoilSimple, listMismatchedItemCoil, fixMismatchedItemCoil, listMaterialCoil, excludeLock } from "@/api/wms/coil";
import WarehouseSelect from "@/components/KLPService/WarehouseSelect";
import ProductSelect from "@/components/KLPService/ProductSelect";
import RawMaterialSelect from "@/components/KLPService/RawMaterialSelect";
import ProductInfo from "@/components/KLPService/Renderer/ProductInfo";
import RawMaterialInfo from "@/components/KLPService/Renderer/RawMaterialInfo";
import CoilTraceResult from "../panels/CoilTraceResult.vue";
import LabelRender from '../panels/LabelRender/index.vue';
import CoilNo from "@/components/KLPService/Renderer/CoilNo.vue";
import CurrentCoilNo from "@/components/KLPService/Renderer/CurrentCoilNo.vue";
import RightToolbar from "@/components/RightToolbar";
import ActualWarehouseSelect from "@/components/KLPService/ActualWarehouseSelect";
import { getCoilTagPrintType } from '@/views/wms/coil/js/coilPrint';
export default {
name: "TypeErrorCoil",
components: {
WarehouseSelect,
ProductSelect,
RawMaterialSelect,
ProductInfo,
RawMaterialInfo,
CoilTraceResult,
LabelRender,
CoilNo,
CurrentCoilNo,
RightToolbar,
ActualWarehouseSelect,
},
data() {
return {
// 遮罩层
loading: true,
// 追溯加载中
traceLoading: false,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 钢卷物料表格数据
materialCoilList: [],
// 追溯对话框显示
traceOpen: false,
// 追溯结果数据(传递给组件)
traceResult: null,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
enterCoilNo: undefined,
currentCoilNo: undefined,
},
labelRender: {
visible: false,
data: {},
type: '2'
},
forceSpecialTag: '',
floatLayerConfig: {
columns: [
{ label: '入场钢卷号', prop: 'enterCoilNo' },
{ label: '当前钢卷号', prop: 'currentCoilNo' },
{ label: '厂家卷号', prop: 'supplierCoilNo' },
{ label: '逻辑库位', prop: 'warehouseName' },
{ label: '实际库位', prop: 'actualWarehouseName' },
{ label: '物料类型', prop: 'materialType' },
{ label: '班组', prop: 'team' },
{ label: '净重', prop: 'netWeight' },
{ label: '毛重', prop: 'grossWeight' },
{ label: '备注', prop: 'remark' },
{ label: '质量状态', prop: 'qualityStatus' },
{ label: '原料材质', prop: 'packingStatus' },
{ label: '切边要求', prop: 'edgeRequirement' },
{ label: '包装要求', prop: 'packagingRequirement' },
{ label: '厂家', prop: 'itemManufacturer' },
{ label: '调制度', prop: 'temperGrade' },
{ label: '镀层种类', prop: 'coatingType' },
{ label: '实测长度(m)', prop: 'actualLength' },
{ label: '实测宽度(mm)', prop: 'actualWidth' },
{ label: '实测厚度(mm)', prop: 'actualThickness' },
{ label: '钢卷表面处理', prop: 'coilSurfaceTreatment' },
],
title: '详细信息'
},
// 按钮loading
buttonLoading: false,
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 表单参数
form: {},
// 表单校验
rules: {
enterCoilNo: [
{ required: true, message: "入场钢卷号不能为空", trigger: "blur" },
],
currentCoilNo: [
{ required: true, message: "当前钢卷号不能为空", trigger: "blur" },
],
itemId: [
{ required: true, message: "物品ID不能为空", trigger: "blur" }
],
itemType: [
{ required: true, message: "物品类型不能为空", trigger: "change" }
],
netWeight: [
{ required: true, message: "净重不能为空", trigger: "blur" }
],
grossWeight: [
{ required: true, message: "毛重不能为空", trigger: "blur" }
],
},
activeTab: 'splitlock',
};
},
computed: {
// 动态显示标签
getItemLabel() {
if (this.form.materialType === '成品') {
return '产品类型';
} else if (this.form.materialType === '原料') {
return '原料类型';
}
return '物品类型';
},
totalCoil() {
return this.materialCoilList.length;
}
},
created() {
this.handleRefresh();
},
methods: {
handleRefresh() {
if (this.activeTab === 'missing') {
this.getList();
} else if (this.activeTab === 'mismatch') {
this.getListMismatched();
} else if (this.activeTab === 'rawMaterialMissing') {
// this.getListRawMaterialMissing();
this.getListRawMaterialMissing();
} else if (this.activeTab === 'splitlock') {
this.getListSplitlock();
} else if (this.activeTab === 'anneallock') {
this.getListAnneallock();
}
},
/** 查询类型不匹配的钢卷列表 */
getList() {
this.loading = true;
listTypeErrorCoil().then(response => {
this.materialCoilList = response.data || [];
this.total = response.total || 0;
this.loading = false;
});
},
/** 查询原料材质与钢卷类型不匹配的钢卷列表 */
getListMismatched() {
this.loading = true;
listMismatchedItemCoil(this.queryParams).then(response => {
this.materialCoilList = response.rows || [];
this.total = response.total || 0;
this.loading = false;
});
},
// 查询原料类型缺失的钢卷列表
getListRawMaterialMissing() {
this.loading = true;
listMaterialCoil({ ...this.queryParams, dataType: 1, status: 0, onlyEmptyPackingStatus: true }).then(response => {
this.materialCoilList = response.rows || [];
this.total = response.total || 0;
this.loading = false;
});
},
// 查询分条锁定的钢卷列表
getListSplitlock() {
this.loading = true;
listMaterialCoil({ ...this.queryParams, exclusiveStatus: 1 }).then(response => {
this.materialCoilList = response.rows || [];
this.total = response.total || 0;
this.loading = false;
});
},
// 查询退火锁定的钢卷列表
getListAnneallock() {
this.loading = true;
listMaterialCoil({ ...this.queryParams, exclusiveStatus: 2 }).then(response => {
this.materialCoilList = response.rows || [];
this.total = response.total || 0;
this.loading = false;
});
},
/** 修复原料材质与钢卷类型不匹配的钢卷 */
handleFixType(row) {
this.buttonLoading = true;
this.$confirm('确认一键修复选中钢卷及其相关钢卷的原料材质吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
fixMismatchedItemCoil(row.coilId).then(response => {
if (response.code === 200) {
this.$message.success('修复成功');
this.getListMismatched();
} else {
this.$message.error(response.msg || '修复失败');
}
this.buttonLoading = false;
}).catch(err => {
console.error('修复失败:', err);
this.$message.error('修复失败,请重试');
this.buttonLoading = false;
});
})
},
/** 追溯按钮操作 */
handleTrace(row) {
this.traceOpen = true;
this.traceLoading = true;
this.traceResult = null; // 清空历史数据
getMaterialCoilTrace({
coilId: row.coilId,
currentCoilNo: row.currentCoilNo,
}).then(res => {
this.traceResult = res.data; // 将结果传递给组件
}).catch(err => {
console.error('溯源查询失败:', err);
this.$message.error('溯源查询失败,请重试');
}).finally(() => {
this.traceLoading = false;
});
},
/** 预览标签 */
handlePreviewLabel(row) {
this.labelRender.visible = true;
const itemName = row.itemName || '';
this.labelRender.type = row.itemType === 'product' ? '3' : '2';
this.labelRender.data = {
...row,
itemName: itemName,
updateTime: row.updateTime?.split(' ')[0] || '',
};
},
/** 打印标签 */
handlePrintLabel(row) {
const type = getCoilTagPrintType(row);
this.labelRender.type = type;
this.labelRender.data = {
...row,
updateTime: row.updateTime?.split(' ')[0] || '',
};
this.$nextTick(() => {
this.$refs.labelRender.printLabel();
})
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
/** 重置表单 */
resetForm(formName) {
this.$refs[formName]?.resetFields();
},
/** 导出按钮操作 */
handleExportAll() {
// 导出逻辑
const coilIds = this.materialCoilList.map(item => item.coilId).join(',')
this.download('wms/materialCoil/export', {
coilIds
}, `materialCoil_${new Date().getTime()}.xlsx`)
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.coilId)
this.single = selection.length !== 1
this.multiple = !selection.length
},
/** 处理材料类型变化 */
handleMaterialTypeChange(value) {
// 清空物品选择
this.form.itemId = null;
// 根据材料类型设置物品类型
if (value === '成品') {
this.form.itemType = 'product';
} else if (value === '原料') {
this.form.itemType = 'raw_material';
}
},
/** 修正按钮操作 */
handleCheck(row) {
this.reset();
const coilId = row.coilId || this.ids
getMaterialCoil(coilId).then(response => {
this.form = response.data;
// 设置 materialType优先级后端返回 > itemType推断
if (!this.form.materialType) {
if (this.form.itemType) {
// 根据 itemType 推断
if (this.form.itemType === 'product') {
this.form.materialType = '成品';
} else if (this.form.itemType === 'raw_material') {
this.form.materialType = '原料';
}
}
}
this.open = true;
this.title = "修正钢卷物料";
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
coilId: undefined,
enterCoilNo: undefined,
currentCoilNo: undefined,
supplierCoilNo: undefined,
dataType: 1,
warehouseId: undefined,
nextWarehouseId: undefined,
qrcodeRecordId: undefined,
actualWarehouseId: undefined,
team: undefined,
hasMergeSplit: undefined,
parentCoilNos: undefined,
itemId: undefined,
itemType: undefined,
status: undefined,
remark: undefined,
delFlag: undefined,
createTime: undefined,
createBy: undefined,
updateTime: undefined,
updateBy: undefined,
materialType: '原料',
temperGrade: undefined,
coatingType: undefined,
};
this.resetForm("form");
},
// 解除钢卷的锁定状态
handleExcludeLock(row) {
this.$confirm('确认解除该钢卷的锁定状态吗?请先检查该钢卷是否有其他操作在进行中,否则可能会导致系统数据异常', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}).then(() => {
this.buttonLoading = true;
excludeLock(row.coilId).then(res => {
this.buttonLoading = false;
this.$message({
message: '解除锁定成功',
type: 'success',
});
this.handleRefresh();
})
}).catch(() => {
// 取消操作
});
},
/** 提交表单 */
submitForm() {
this.$refs.form.validate((valid) => {
if (valid) {
this.buttonLoading = true;
updateMaterialCoilSimple(this.form).then(res => {
this.buttonLoading = false;
this.$message({
message: '更新成功',
type: 'success',
});
this.open = false;
this.getList();
}).catch(() => {
// 取消操作
this.buttonLoading = false;
});
} else {
return false;
}
})
},
}
};
</script>

View File

@@ -5,8 +5,8 @@
<el-radio-button label="missing">类型缺失</el-radio-button>
<el-radio-button label="rawMaterialMissing">原料类型缺失</el-radio-button>
<el-radio-button label="mismatch">匹配异常</el-radio-button>
<el-radio-button label="splitlock">分条锁定</el-radio-button>
<el-radio-button label="anneallock">退火锁定</el-radio-button>
<!-- <el-radio-button label="splitlock">分条锁定</el-radio-button>
<el-radio-button label="anneallock">退火锁定</el-radio-button> -->
</el-radio-group>
<el-button type="success" plain size="mini" icon="el-icon-refresh" @click="handleRefresh">刷新</el-button>