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

feat(钢卷异常): 重构钢卷异常表单组件并集成到各相关页面

Browse Source 
新增AbnormalForm组件统一管理钢卷异常表单，减少代码重复
在合卷、分条、打字等页面添加异常信息管理功能
优化异常信息展示样式，支持添加、编辑和删除操作
This commit is contained in:
砂糖
2026-03-19 17:50:37 +08:00
parent f4518be3f4
commit 2c4f5b3e53
10 changed files with 1079 additions and 187 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
klp-ui/src/components/KLPService/Renderer/CoilNo.vue
View File

@@ -99,7 +99,16 @@ export default {
},
supplierCoilNo() {
return this.coilInfo.supplierCoilNo || '-'
}
},
length() {
return this.coilInfo.length || '-'
},
actualLength() {
return this.coilInfo.actualLength || '-'
},
actualWidth() {
return this.coilInfo.actualWidth || '-'
},
},
methods: {
getCoilInfo() {

43
klp-ui/src/views/wms/coil/abnormalCoil.vue
View File

@@ -111,38 +111,7 @@
<!-- 添加或修改钢卷异常信息对话框 -->
<el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="钢卷ID" prop="coilId" v-if="!form.abnormalId && showCoilSelector">
<coil-selector v-model="form.coilId"></coil-selector>
</el-form-item>
<el-form-item label="位置" prop="position">
<el-radio-group v-model="form.position">
<el-radio-button v-for="dict in dict.type.coil_abnormal_position" :key="dict.value" :label="dict.value">{{
dict.label }}</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item label="长度坐标" prop="lengthCoord">
<!-- <el-input v-model="form.lengthCoord" placeholder="请输入长度坐标" /> -->
<el-input v-model="form.startPosition" placeholder="请输入开始位置" />
<el-input v-model="form.endPosition" placeholder="请输入结束位置" />
<!-- <el-input v-model="form.length" placeholder="请输入缺陷长度" /> -->
</el-form-item>
<el-form-item label="缺陷代码" prop="defectCode">
<el-radio-group v-model="form.defectCode">
<el-radio-button v-for="dict in dict.type.coil_abnormal_code" :key="dict.value" :label="dict.value">{{
dict.label }}</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item label="程度" prop="degree">
<el-radio-group v-model="form.degree">
<el-radio-button v-for="dict in dict.type.coil_abnormal_degree" :key="dict.value" :label="dict.value">{{
dict.label }}</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input type="textarea" v-model="form.remark" placeholder="请输入备注" />
</el-form-item>
</el-form>
<abnormal-form ref="abnormalForm" v-model="form" :show-coil-selector="showCoilSelector"></abnormal-form>
<div slot="footer" class="dialog-footer">
<el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
@@ -173,6 +142,7 @@ import { listMaterialCoil } from "@/api/wms/coil";
import CoilSelector from '@/components/CoilSelector'
import CoilNo from '@/components/KLPService/Renderer/CoilNo'
import CoilList from "./components/CoilList.vue";
import AbnormalForm from './components/AbnormalForm';
export default {
name: "CoilAbnormal",
@@ -180,7 +150,8 @@ export default {
components: {
CoilSelector,
CoilNo,
CoilList
CoilList,
AbnormalForm
},
data() {
return {
@@ -294,7 +265,9 @@ export default {
updateTime: undefined,
updateBy: undefined
};
this.resetForm("form");
if (this.$refs.abnormalForm) {
this.$refs.abnormalForm.resetFields();
}
},
/** 搜索按钮操作 */
handleQuery() {
@@ -340,7 +313,7 @@ export default {
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
this.$refs["abnormalForm"].validate(valid => {
if (valid) {
this.buttonLoading = true;
if (this.form.abnormalId != null) {

65
klp-ui/src/views/wms/coil/abnormalDetail.vue
View File

@@ -98,62 +98,12 @@
<!-- 添加或修改钢卷异常信息对话框 -->
<el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="钢卷ID" prop="coilId" v-if="!form.abnormalId">
<coil-selector v-model="form.coilId"></coil-selector>
</el-form-item>
<el-form-item label="位置" prop="position">
<el-radio-group v-model="form.position">
<el-radio-button v-for="dict in dict.type.coil_abnormal_position" :key="dict.value" :label="dict.value">{{
dict.label }}</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item label="开始位置" prop="startPosition">
<el-input v-model="form.startPosition" prop="startPosition" />
</el-form-item>
<el-form-item label="结束位置" prop="endPosition">
<el-input v-model="form.endPosition" prop="endPosition" />
</el-form-item>
<!-- <el-form-item label="缺陷长度" prop="length">
<el-input v-model="form.length" placeholder="请输入缺陷长度" />
</el-form-item> -->
<el-form-item label="缺陷代码" prop="defectCode">
<el-radio-group v-model="form.defectCode">
<el-radio-button v-for="dict in dict.type.coil_abnormal_code" :key="dict.value" :label="dict.value">{{
dict.label }}</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item label="程度" prop="degree">
<el-radio-group v-model="form.degree">
<el-radio-button v-for="dict in dict.type.coil_abnormal_degree" :key="dict.value" :label="dict.value">{{
dict.label }}</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input type="textarea" v-model="form.remark" placeholder="请输入备注" />
</el-form-item>
</el-form>
<abnormal-form ref="abnormalForm" v-model="form" :show-coil-selector="!$route.query.coilId"></abnormal-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="title" :visible.sync="judgeOpen" width="600px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="判级" prop="judgeLevel">
<el-radio-group v-model="form.judgeLevel">
<el-radio-button v-for="dict in dict.type.coil_abnormal_level" :key="dict.value" :label="dict.value">{{
dict.label }}</el-radio-button>
</el-radio-group>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button :loading="buttonLoading" type="primary" @click="submitJudge">确 定</el-button>
<el-button @click="judgeOpen = false">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
@@ -161,13 +111,15 @@
import { listCoilAbnormal, getCoilAbnormal, delCoilAbnormal, addCoilAbnormal, updateCoilAbnormal, judgeAbnormalLevel } from "@/api/wms/coilAbnormal";
import CoilSelector from '@/components/CoilSelector'
import CoilNo from '@/components/KLPService/Renderer/CoilNo'
import AbnormalForm from './components/AbnormalForm'
export default {
name: "CoilAbnormal",
dicts: ['coil_abnormal_code', 'coil_abnormal_position', 'coil_abnormal_degree', 'coil_abnormal_level'],
components: {
CoilSelector,
CoilNo
CoilNo,
AbnormalForm
},
data() {
return {
@@ -205,9 +157,6 @@ export default {
},
// 表单参数
form: {},
// 表单校验
rules: {
},
judgeOpen: false,
};
},
@@ -259,7 +208,9 @@ export default {
updateTime: undefined,
updateBy: undefined
};
this.resetForm("form");
if (this.$refs.abnormalForm) {
this.$refs.abnormalForm.resetFields();
}
},
/** 搜索按钮操作 */
handleQuery() {
@@ -297,7 +248,7 @@ export default {
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
this.$refs["abnormalForm"].validate(valid => {
if (valid) {
this.buttonLoading = true;
if (this.form.abnormalId != null) {

113
klp-ui/src/views/wms/coil/components/AbnormalForm.vue Normal file
View File

@@ -0,0 +1,113 @@
<template>
<el-form ref="form" :model="formData" :rules="rules" label-width="80px">
<el-form-item label="钢卷ID" prop="coilId" v-if="!formData.abnormalId && showCoilSelector">
<coil-selector v-model="formData.coilId"></coil-selector>
</el-form-item>
<el-form-item label="位置" prop="position">
<el-radio-group v-model="formData.position">
<el-radio-button v-for="dict in dict.type.coil_abnormal_position" :key="dict.value" :label="dict.value">{{ dict.label }}</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item label="开始位置" prop="startPosition">
<el-input v-model="formData.startPosition" type="number" placeholder="请输入开始位置" />
</el-form-item>
<el-form-item label="结束位置" prop="endPosition">
<el-input v-model="formData.endPosition" type="number" placeholder="请输入结束位置" />
</el-form-item>
<el-form-item label="缺陷代码" prop="defectCode">
<el-radio-group v-model="formData.defectCode">
<el-radio-button v-for="dict in dict.type.coil_abnormal_code" :key="dict.value" :label="dict.value">{{ dict.label }}</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item label="程度" prop="degree">
<el-radio-group v-model="formData.degree">
<el-radio-button v-for="dict in dict.type.coil_abnormal_degree" :key="dict.value" :label="dict.value">{{ dict.label }}</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input type="textarea" v-model="formData.remark" placeholder="请输入备注" />
</el-form-item>
</el-form>
</template>
<script>
import CoilSelector from '@/components/CoilSelector'
export default {
name: "AbnormalForm",
components: {
CoilSelector
},
props: {
value: {
type: Object,
default: () => ({})
},
showCoilSelector: {
type: Boolean,
default: false
}
},
dicts: ['coil_abnormal_code', 'coil_abnormal_position', 'coil_abnormal_degree', 'coil_abnormal_level'],
data() {
return {
rules: {
position: [
{ required: true, message: '请选择位置', trigger: 'change' }
],
startPosition: [
{ required: true, message: '请输入开始位置', trigger: 'blur' },
// { type: 'number', message: '请输入数字', trigger: 'blur' }
],
endPosition: [
{ required: true, message: '请输入结束位置', trigger: 'blur' },
// { type: 'number', message: '请输入数字', trigger: 'blur' }
],
defectCode: [
{ required: true, message: '请选择缺陷代码', trigger: 'change' }
],
degree: [
{ required: true, message: '请选择程度', trigger: 'change' }
]
}
};
},
computed: {
formData: {
get() {
return this.value || {};
},
set(newVal) {
this.$emit('input', { ...newVal });
}
}
},
methods: {
/** 表单验证 */
validate(callback) {
return this.$refs.form.validate(callback);
},
/** 重置表单 */
resetFields() {
this.$refs.form.resetFields();
this.formData = {
abnormalId: undefined,
coilId: undefined,
position: undefined,
startPosition: undefined,
endPosition: undefined,
length: undefined,
defectCode: undefined,
degree: undefined,
remark: undefined
};
},
/** 计算缺陷长度 */
calculateLength() {
if (this.formData.startPosition && this.formData.endPosition) {
this.formData.length = this.formData.endPosition - this.formData.startPosition;
}
}
}
};
</script>

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

@@ -230,11 +230,61 @@
<el-input v-model="targetCoil.formattedDuration" placeholder="自动计算" disabled />
</el-form-item>
</div>
<div class="form-row">
<el-form-item label="异常信息" class="form-item-full">
<div class="abnormal-container">
<div
v-for="(abnormal, index) in abnormals"
:key="index"
class="abnormal-item"
@click="editAbnormal(index)"
>
<div class="abnormal-content">
<div class="abnormal-info">
<div class="abnormal-position">{{ getAbnormalPositionText(abnormal.position) }}</div>
<div class="abnormal-code">{{ getAbnormalCodeText(abnormal.defectCode) }}</div>
</div>
<el-button
type="danger"
size="mini"
icon="el-icon-close"
class="abnormal-delete"
@click.stop="deleteAbnormal(index)"
></el-button>
</div>
</div>
<div
class="abnormal-add"
@click="addAbnormal"
>
<i class="el-icon-plus"></i>
</div>
</div>
</el-form-item>
</div>
</el-form>
</div>
</div>
</div>
</div>
<!-- 异常表单弹窗 -->
<el-dialog
:title="currentAbnormalIndex === -1 ? '新增异常' : '编辑异常'"
:visible.sync="abnormalDialogVisible"
width="600px"
>
<abnormal-form
ref="abnormalForm"
v-model="abnormalForm"
:show-coil-selector="false"
></abnormal-form>
<div slot="footer" class="dialog-footer">
<el-button @click="abnormalDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="saveAbnormal">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
@@ -247,6 +297,7 @@ import RawMaterialSelector from "@/components/KLPService/RawMaterialSelect";
import ProductSelector from "@/components/KLPService/ProductSelect";
import WarehouseSelect from "@/components/KLPService/WarehouseSelect";
import TimeInput from "@/components/TimeInput";
import AbnormalForm from './components/AbnormalForm';
import { generateCoilNoPrefix } from "@/utils/coil/coilNo";
export default {
@@ -257,9 +308,10 @@ export default {
RawMaterialSelector,
ProductSelector,
WarehouseSelect,
TimeInput
TimeInput,
AbnormalForm
},
dicts: ['coil_quality_status'],
dicts: ['coil_quality_status', 'coil_abnormal_position', 'coil_abnormal_code', 'coil_abnormal_degree'],
data() {
const currentCoilNoPrefix = generateCoilNoPrefix()
return {
@@ -332,7 +384,24 @@ export default {
pendingLoading: false,
// 待操作ID
actionId: null,
currentAction: {}
currentAction: {},
// 异常信息
abnormals: [],
// 异常表单弹窗
abnormalDialogVisible: false,
// 当前编辑的异常索引
currentAbnormalIndex: -1,
// 异常表单数据
abnormalForm: {
coilId: null,
position: null,
startPosition: 0,
endPosition: 0,
length: 0,
defectCode: null,
degree: null,
remark: null
}
};
},
computed: {
@@ -681,6 +750,7 @@ export default {
...this.targetCoil,
enterCoilNo: enterCoilNos, // 拼接的入场钢卷号
hasMergeSplit: 2, // 2表示合卷
abnormals: this.abnormals,
newCoils: this.sourceCoils.map(item => ({
coilId: item.coilId,
enterCoilNo: item.enterCoilNo,
@@ -836,6 +906,78 @@ export default {
// closePage 关闭当前页面
closePage() {
this.$router.back();
},
// 新增异常
addAbnormal() {
this.currentAbnormalIndex = -1;
this.abnormalForm = {
coilId: null,
position: null,
startPosition: 0,
endPosition: 0,
length: 0,
defectCode: null,
degree: null,
remark: null
};
this.abnormalDialogVisible = true;
},
// 编辑异常
editAbnormal(index) {
this.currentAbnormalIndex = index;
this.abnormalForm = { ...this.abnormals[index] };
this.abnormalDialogVisible = true;
},
// 保存异常
saveAbnormal() {
this.$refs.abnormalForm.validate(valid => {
if (valid) {
// 计算缺陷长度
this.abnormalForm.length = this.abnormalForm.endPosition - this.abnormalForm.startPosition;
if (this.currentAbnormalIndex === -1) {
// 新增异常
this.abnormals.push({ ...this.abnormalForm });
} else {
// 编辑异常
this.abnormals[this.currentAbnormalIndex] = { ...this.abnormalForm };
}
this.abnormalDialogVisible = false;
}
});
},
// 删除异常
deleteAbnormal(index) {
this.$confirm('确定要删除这个异常信息吗？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.abnormals.splice(index, 1);
});
},
// 获取异常位置文本
getAbnormalPositionText(position) {
if (!position) return '';
const dict = this.dict.type.coil_abnormal_position;
if (!dict) return position;
const item = dict.find(item => item.value === position);
return item ? item.label : position;
},
// 获取异常代码文本
getAbnormalCodeText(code) {
if (!code) return '';
const dict = this.dict.type.coil_abnormal_code;
if (!dict) return code;
const item = dict.find(item => item.value === code);
return item ? item.label : code;
}
}
};
@@ -1256,4 +1398,86 @@ export default {
}
}
}
.abnormal-container {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 5px;
}
.abnormal-item {
width: 120px;
height: 80px;
background-color: #fff1f0;
border: 1px solid #ff4d4f;
border-radius: 4px;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
&:hover {
box-shadow: 0 2px 8px rgba(255, 77, 79, 0.2);
transform: translateY(-2px);
}
.abnormal-content {
padding: 8px;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.abnormal-info {
flex: 1;
}
.abnormal-position {
font-size: 12px;
font-weight: 500;
color: #ff4d4f;
margin-bottom: 4px;
}
.abnormal-code {
font-size: 11px;
color: #666;
line-height: 1.3;
}
.abnormal-delete {
position: absolute;
top: -8px;
right: -8px;
width: 20px;
height: 20px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: #fff;
}
}
.abnormal-add {
width: 120px;
height: 80px;
border: 2px dashed #ff4d4f;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
color: #ff4d4f;
font-size: 24px;
&:hover {
background-color: #fff1f0;
transform: translateY(-2px);
}
}
</style>

43
klp-ui/src/views/wms/coil/panels/abnormal.vue
View File

@@ -58,35 +58,7 @@
<!-- 添加或修改钢卷异常信息对话框 -->
<el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="位置" prop="position">
<el-radio-group v-model="form.position">
<el-radio-button v-for="dict in dict.type.coil_abnormal_position" :key="dict.value" :label="dict.value">{{
dict.label }}</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item label="长度坐标" prop="lengthCoord">
<!-- <el-input v-model="form.lengthCoord" placeholder="请输入长度坐标" /> -->
<el-input v-model="form.startPosition" placeholder="请输入开始位置" />
<el-input v-model="form.endPosition" placeholder="请输入结束位置" />
<!-- <el-input v-model="form.length" placeholder="请输入缺陷长度" /> -->
</el-form-item>
<el-form-item label="缺陷代码" prop="defectCode">
<el-radio-group v-model="form.defectCode">
<el-radio-button v-for="dict in dict.type.coil_abnormal_code" :key="dict.value" :label="dict.value">{{
dict.label }}</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item label="程度" prop="degree">
<el-radio-group v-model="form.degree">
<el-radio-button v-for="dict in dict.type.coil_abnormal_degree" :key="dict.value" :label="dict.value">{{
dict.label }}</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input type="textarea" v-model="form.remark" placeholder="请输入备注" />
</el-form-item>
</el-form>
<abnormal-form ref="abnormalForm" v-model="form" :show-coil-selector="false"></abnormal-form>
<div slot="footer" class="dialog-footer">
<el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
@@ -97,10 +69,14 @@
<script>
import { listCoilAbnormal, getCoilAbnormal, delCoilAbnormal, addCoilAbnormal, updateCoilAbnormal } from "@/api/wms/coilAbnormal";
import AbnormalForm from '../components/AbnormalForm';
export default {
name: "CoilAbnormal",
dicts: ['coil_abnormal_code', 'coil_abnormal_position', 'coil_abnormal_degree'],
components: {
AbnormalForm
},
data() {
return {
// 按钮loading
@@ -137,9 +113,6 @@ export default {
},
// 表单参数
form: {},
// 表单校验
rules: {
},
judgeOpen: false,
};
},
@@ -197,7 +170,9 @@ export default {
updateTime: undefined,
updateBy: undefined
};
this.resetForm("form");
if (this.$refs.abnormalForm) {
this.$refs.abnormalForm.resetFields();
}
},
/** 搜索按钮操作 */
handleQuery() {
@@ -229,7 +204,7 @@ export default {
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
this.$refs["abnormalForm"].validate(valid => {
if (valid) {
this.buttonLoading = true;
if (this.form.abnormalId != null) {

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

@@ -439,36 +439,7 @@
</el-row>
<el-dialog title="新增异常" :visible.sync="exceptionDialogVisible" width="600px">
<el-form ref="exceptionForm" :model="exceptionForm" label-width="80px">
<el-form-item label="位置" prop="position">
<el-radio-group v-model="exceptionForm.position">
<el-radio-button v-for="dict in dict.type.coil_abnormal_position" :key="dict.value" :label="dict.value">{{
dict.label }}</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item label="长度坐标" prop="lengthCoord">
<div style="display: flex; gap: 10px;">
<el-input v-model="exceptionForm.startPosition" placeholder="请输入开始位置" />
-
<el-input v-model="exceptionForm.endPosition" placeholder="请输入结束位置" />
</div>
</el-form-item>
<el-form-item label="缺陷代码" prop="defectCode">
<el-radio-group v-model="exceptionForm.defectCode">
<el-radio-button v-for="dict in dict.type.coil_abnormal_code" :key="dict.value" :label="dict.value">{{
dict.label }}</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item label="程度" prop="degree">
<el-radio-group v-model="exceptionForm.degree">
<el-radio-button v-for="dict in dict.type.coil_abnormal_degree" :key="dict.value" :label="dict.value">{{
dict.label }}</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input type="textarea" v-model="exceptionForm.remark" placeholder="请输入备注" />
</el-form-item>
</el-form>
<abnormal-form ref="abnormalForm" v-model="exceptionForm" :show-coil-selector="false"></abnormal-form>
<div slot="footer" class="dialog-footer">
<el-button type="info" @click="handleAbnormal">查看异常</el-button>
<el-button type="primary" @click="confirmException">确 定</el-button>
@@ -499,6 +470,7 @@ import RawMaterialInfo from '@/components/KLPService/Renderer/RawMaterialInfo'
import { addCoilAbnormal } from '@/api/wms/coilAbnormal'
import LabelRender from './LabelRender/index.vue'
import StepSplit from './stepSplit.vue'
import AbnormalForm from '../components/AbnormalForm'
import { getCoilTagPrintType } from '@/views/wms/coil/js/coilPrint'
export default {
@@ -522,7 +494,8 @@ export default {
ProductInfo,
RawMaterialInfo,
LabelRender,
StepSplit
StepSplit,
AbnormalForm
},
data() {
return {
@@ -982,19 +955,22 @@ export default {
this.exceptionDialogVisible = true
},
confirmException() {
addCoilAbnormal({
...this.exceptionForm,
length: this.exceptionForm.endPosition - this.exceptionForm.startPosition,
}).then(response => {
this.$message.success('异常记录添加成功')
this.cancelException();
// 重置表单
this.getMaterialCoil()
}).catch(error => {
console.error('异常记录添加失败:', error)
this.$message.error('异常记录添加失败: ' + (error.message || error))
})
this.$refs["abnormalForm"].validate(valid => {
if (valid) {
addCoilAbnormal({
...this.exceptionForm,
length: this.exceptionForm.endPosition - this.exceptionForm.startPosition,
}).then(response => {
this.$message.success('异常记录添加成功')
this.cancelException();
// 重置表单
this.getMaterialCoil()
}).catch(error => {
console.error('异常记录添加失败:', error)
this.$message.error('异常记录添加失败: ' + (error.message || error))
})
}
});
},
handleAbnormal() {
this.$router.push({

238
klp-ui/src/views/wms/coil/panels/stepSplit.vue
View File

@@ -162,6 +162,37 @@
<el-input v-model="splitForm.remark" placeholder="请输入备注" type="textarea" />
</el-form-item>
<el-form-item label="异常信息">
<div class="abnormal-container">
<div
v-for="(abnormal, index) in abnormals"
:key="index"
class="abnormal-item"
@click="editAbnormal(index)"
>
<div class="abnormal-content">
<div class="abnormal-info">
<div class="abnormal-position">{{ getAbnormalPositionText(abnormal.position) }}</div>
<div class="abnormal-code">{{ getAbnormalCodeText(abnormal.defectCode) }}</div>
</div>
<el-button
type="danger"
size="mini"
icon="el-icon-close"
class="abnormal-delete"
@click.stop="deleteAbnormal(index)"
></el-button>
</div>
</div>
<div
class="abnormal-add"
@click="addAbnormal"
>
<i class="el-icon-plus"></i>
</div>
</div>
</el-form-item>
<el-form-item>
<el-button :loading="buttonLoading" type="primary" @click="addSplit">提交分条</el-button>
<el-button :loading="buttonLoading" @click="resetSplitForm">重置</el-button>
@@ -210,6 +241,24 @@
</div>
</el-col>
</el-row>
<!-- 异常表单弹窗 -->
<el-dialog
:title="currentAbnormalIndex === -1 ? '新增异常' : '编辑异常'"
:visible.sync="abnormalDialogVisible"
width="600px"
append-to-body
>
<abnormal-form
ref="abnormalForm"
v-model="abnormalForm"
:show-coil-selector="false"
></abnormal-form>
<div slot="footer" class="dialog-footer">
<el-button @click="abnormalDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="saveAbnormal">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
@@ -221,6 +270,7 @@ import RawMaterialSelect from "@/components/KLPService/RawMaterialSelect";
import WarehouseSelect from "@/components/KLPService/WarehouseSelect";
import ActualWarehouseSelect from "@/components/KLPService/ActualWarehouseSelect";
import TimeInput from "@/components/TimeInput";
import AbnormalForm from '../components/AbnormalForm';
import { generateCoilNoPrefix } from "@/utils/coil/coilNo";
export default {
@@ -245,8 +295,9 @@ export default {
WarehouseSelect,
ActualWarehouseSelect,
TimeInput,
AbnormalForm
},
dicts: ['coil_quality_status'],
dicts: ['coil_quality_status', 'coil_abnormal_position', 'coil_abnormal_code', 'coil_abnormal_degree'],
data() {
const currentCoilNoPrefix = generateCoilNoPrefix()
return {
@@ -327,7 +378,24 @@ export default {
warehouseId: [{ required: true, message: '请选择所在库位', trigger: 'change' }],
},
buttonLoading: false,
currentAction: {}
currentAction: {},
// 异常信息
abnormals: [],
// 异常表单弹窗
abnormalDialogVisible: false,
// 当前编辑的异常索引
currentAbnormalIndex: -1,
// 异常表单数据
abnormalForm: {
coilId: null,
position: null,
startPosition: 0,
endPosition: 0,
length: 0,
defectCode: null,
degree: null,
remark: null
}
}
},
computed: {
@@ -470,6 +538,8 @@ export default {
formattedDuration: '',
parentCoilId: this.coilId,
}
// 重置异常信息
this.abnormals = [];
},
// 材料类型变更处理
@@ -506,12 +576,19 @@ export default {
// 区分新增/编辑：有coilId则为编辑，否则为新增
let res
this.buttonLoading = true
// 添加异常信息到表单数据
const splitData = {
...this.splitForm,
abnormals: this.abnormals
};
if (this.splitForm.coilId) {
// 编辑分条：调用更新接口
res = await updateMaterialCoilSimple(this.splitForm)
res = await updateMaterialCoilSimple(splitData)
} else {
// 新增分条：调用创建接口
res = await createSpecialChild(this.coilId, this.actionId, this.splitForm)
res = await createSpecialChild(this.coilId, this.actionId, splitData)
}
this.$message.success(this.splitForm.coilId ? '编辑分条成功' : '新增分条成功')
@@ -614,6 +691,78 @@ export default {
this.$set(this.splitForm, 'productionDuration', '');
this.$set(this.splitForm, 'formattedDuration', '');
}
},
// 新增异常
addAbnormal() {
this.currentAbnormalIndex = -1;
this.abnormalForm = {
coilId: this.splitForm.coilId || null,
position: null,
startPosition: 0,
endPosition: 0,
length: 0,
defectCode: null,
degree: null,
remark: null
};
this.abnormalDialogVisible = true;
},
// 编辑异常
editAbnormal(index) {
this.currentAbnormalIndex = index;
this.abnormalForm = { ...this.abnormals[index] };
this.abnormalDialogVisible = true;
},
// 保存异常
saveAbnormal() {
this.$refs.abnormalForm.validate(valid => {
if (valid) {
// 计算缺陷长度
this.abnormalForm.length = this.abnormalForm.endPosition - this.abnormalForm.startPosition;
if (this.currentAbnormalIndex === -1) {
// 新增异常
this.abnormals.push({ ...this.abnormalForm });
} else {
// 编辑异常
this.abnormals[this.currentAbnormalIndex] = { ...this.abnormalForm };
}
this.abnormalDialogVisible = false;
}
});
},
// 删除异常
deleteAbnormal(index) {
this.$confirm('确定要删除这个异常信息吗？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.abnormals.splice(index, 1);
});
},
// 获取异常位置文本
getAbnormalPositionText(position) {
if (!position) return '';
const dict = this.dict.type.coil_abnormal_position;
if (!dict) return position;
const item = dict.find(item => item.value === position);
return item ? item.label : position;
},
// 获取异常代码文本
getAbnormalCodeText(code) {
if (!code) return '';
const dict = this.dict.type.coil_abnormal_code;
if (!dict) return code;
const item = dict.find(item => item.value === code);
return item ? item.label : code;
}
},
}
@@ -643,4 +792,85 @@ export default {
height: 100%;
min-height: 400px;
}
.abnormal-container {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 5px;
}
.abnormal-item {
width: 120px;
height: 80px;
background-color: #fff1f0;
border: 1px solid #ff4d4f;
border-radius: 4px;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
&:hover {
box-shadow: 0 2px 8px rgba(255, 77, 79, 0.2);
transform: translateY(-2px);
}
.abnormal-content {
padding: 8px;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.abnormal-info {
flex: 1;
}
.abnormal-position {
font-size: 12px;
font-weight: 500;
color: #ff4d4f;
margin-bottom: 4px;
}
.abnormal-code {
font-size: 11px;
color: #666;
line-height: 1.3;
}
.abnormal-delete {
position: absolute;
top: -8px;
right: -8px;
width: 20px;
height: 20px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: #fff;
}
}
.abnormal-add {
width: 120px;
height: 80px;
border: 2px dashed #ff4d4f;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
color: #ff4d4f;
font-size: 24px;
&:hover {
background-color: #fff1f0;
transform: translateY(-2px);
}
}
</style>

228
klp-ui/src/views/wms/coil/split.vue
View File

@@ -230,12 +230,59 @@
<el-form-item label="备注">
<el-input v-model="item.remark" placeholder="请输入备注" :disabled="readonly" />
</el-form-item>
<el-form-item label="异常信息">
<div class="abnormal-container">
<div
v-for="(abnormal, abnormalIndex) in item.abnormals"
:key="abnormalIndex"
class="abnormal-item"
@click="editAbnormal(index, abnormalIndex)"
>
<div class="abnormal-content">
<div class="abnormal-info">
<div class="abnormal-position">{{ getAbnormalPositionText(abnormal.position) }}</div>
<div class="abnormal-code">{{ getAbnormalCodeText(abnormal.defectCode) }}</div>
</div>
<el-button
type="danger"
size="mini"
icon="el-icon-close"
class="abnormal-delete"
@click.stop="deleteAbnormal(index, abnormalIndex)"
></el-button>
</div>
</div>
<div
class="abnormal-add"
@click="addAbnormal(index)"
>
<i class="el-icon-plus"></i>
</div>
</div>
</el-form-item>
</el-form>
</div>
</div>
</div>
</div>
</div>
<!-- 异常表单弹窗 -->
<el-dialog
:title="currentAbnormalIndex === -1 ? '新增异常' : '编辑异常'"
:visible.sync="abnormalDialogVisible"
width="600px"
>
<abnormal-form
ref="abnormalForm"
v-model="abnormalForm"
:show-coil-selector="false"
></abnormal-form>
<div slot="footer" class="dialog-footer">
<el-button @click="abnormalDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="saveAbnormal">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
@@ -248,6 +295,7 @@ import RawMaterialSelect from "@/components/KLPService/RawMaterialSelect";
import ProductSelect from "@/components/KLPService/ProductSelect";
import WarehouseSelect from "@/components/KLPService/WarehouseSelect";
import TimeInput from "@/components/TimeInput";
import AbnormalForm from './components/AbnormalForm';
import { generateCoilNoPrefix } from "@/utils/coil/coilNo";
export default {
@@ -258,8 +306,9 @@ export default {
ProductSelect,
WarehouseSelect,
TimeInput,
AbnormalForm
},
dicts: ['coil_quality_status'],
dicts: ['coil_quality_status', 'coil_abnormal_position', 'coil_abnormal_code', 'coil_abnormal_degree'],
data() {
const currentCoilNoPrefix = generateCoilNoPrefix()
return {
@@ -304,6 +353,7 @@ export default {
productionEndTime: '',
productionDuration: '',
formattedDuration: '',
abnormals: []
}
],
loading: false,
@@ -319,7 +369,24 @@ export default {
readonly: false,
// 待操作ID
actionId: null,
currentAction: {}
currentAction: {},
// 异常表单弹窗
abnormalDialogVisible: false,
// 当前编辑的子卷索引
currentSubCoilIndex: -1,
// 当前编辑的异常索引
currentAbnormalIndex: -1,
// 异常表单数据
abnormalForm: {
coilId: null,
position: null,
startPosition: 0,
endPosition: 0,
length: 0,
defectCode: null,
degree: null,
remark: null
}
};
},
computed: {
@@ -502,6 +569,7 @@ export default {
productionEndTime: '',
productionDuration: '',
formattedDuration: '',
abnormals: []
});
},
@@ -684,6 +752,80 @@ export default {
this.$set(item, 'productionDuration', '');
this.$set(item, 'formattedDuration', '');
}
},
// 新增异常
addAbnormal(subCoilIndex) {
this.currentSubCoilIndex = subCoilIndex;
this.currentAbnormalIndex = -1;
this.abnormalForm = {
coilId: null,
position: null,
startPosition: 0,
endPosition: 0,
length: 0,
defectCode: null,
degree: null,
remark: null
};
this.abnormalDialogVisible = true;
},
// 编辑异常
editAbnormal(subCoilIndex, abnormalIndex) {
this.currentSubCoilIndex = subCoilIndex;
this.currentAbnormalIndex = abnormalIndex;
this.abnormalForm = { ...this.splitList[subCoilIndex].abnormals[abnormalIndex] };
this.abnormalDialogVisible = true;
},
// 保存异常
saveAbnormal() {
this.$refs.abnormalForm.validate(valid => {
if (valid) {
// 计算缺陷长度
this.abnormalForm.length = this.abnormalForm.endPosition - this.abnormalForm.startPosition;
if (this.currentAbnormalIndex === -1) {
// 新增异常
this.splitList[this.currentSubCoilIndex].abnormals.push({ ...this.abnormalForm });
} else {
// 编辑异常
this.splitList[this.currentSubCoilIndex].abnormals[this.currentAbnormalIndex] = { ...this.abnormalForm };
}
this.abnormalDialogVisible = false;
}
});
},
// 删除异常
deleteAbnormal(subCoilIndex, abnormalIndex) {
this.$confirm('确定要删除这个异常信息吗？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.splitList[subCoilIndex].abnormals.splice(abnormalIndex, 1);
});
},
// 获取异常位置文本
getAbnormalPositionText(position) {
if (!position) return '';
const dict = this.dict.type.coil_abnormal_position;
if (!dict) return position;
const item = dict.find(item => item.value === position);
return item ? item.label : position;
},
// 获取异常代码文本
getAbnormalCodeText(code) {
if (!code) return '';
const dict = this.dict.type.coil_abnormal_code;
if (!dict) return code;
const item = dict.find(item => item.value === code);
return item ? item.label : code;
}
}
};
@@ -1040,4 +1182,86 @@ export default {
}
}
}
// 异常信息样式
.abnormal-container {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 5px;
}
.abnormal-item {
width: 120px;
height: 80px;
background-color: #fff1f0;
border: 1px solid #ff4d4f;
border-radius: 4px;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
&:hover {
box-shadow: 0 2px 8px rgba(255, 77, 79, 0.2);
transform: translateY(-2px);
}
.abnormal-content {
padding: 8px;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.abnormal-info {
flex: 1;
}
.abnormal-position {
font-size: 12px;
font-weight: 500;
color: #ff4d4f;
margin-bottom: 4px;
}
.abnormal-code {
font-size: 11px;
color: #666;
line-height: 1.3;
}
.abnormal-delete {
position: absolute;
top: -8px;
right: -8px;
width: 20px;
height: 20px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: #fff;
}
}
.abnormal-add {
width: 120px;
height: 80px;
border: 2px dashed #ff4d4f;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
color: #ff4d4f;
font-size: 24px;
&:hover {
background-color: #fff1f0;
transform: translateY(-2px);
}
}
</style>

231
klp-ui/src/views/wms/coil/typing.vue
View File

@@ -208,6 +208,37 @@
<el-input v-model="updateForm.remark" type="textarea" :rows="4" placeholder="请输入备注信息（非必填）" maxlength="500"
show-word-limit />
</el-form-item>
<el-form-item label="异常信息">
<div class="abnormal-container">
<div
v-for="(abnormal, index) in abnormals"
:key="index"
class="abnormal-item"
@click="editAbnormal(index)"
>
<div class="abnormal-content">
<div class="abnormal-info">
<div class="abnormal-position">{{ getAbnormalPositionText(abnormal.position) }}</div>
<div class="abnormal-code">{{ getAbnormalCodeText(abnormal.defectCode) }}</div>
</div>
<el-button
type="danger"
size="mini"
icon="el-icon-close"
class="abnormal-delete"
@click.stop="deleteAbnormal(index)"
></el-button>
</div>
</div>
<div
class="abnormal-add"
@click="addAbnormal"
>
<i class="el-icon-plus"></i>
</div>
</div>
</el-form-item>
</el-form>
</el-card>
@@ -225,16 +256,28 @@
{{ scope.row.exitWeight ? scope.row.exitWeight + ' t' : '—' }}
</template>
</el-table-column>
<!-- <el-table-column prop="exitLength" label="出口长度(m)" width="120">
<template slot-scope="scope">
{{ scope.row.exitLength ? scope.row.exitLength + ' m' : '—' }}
</template>
</el-table-column> -->
<el-table-column prop="team" label="班组" width="80"></el-table-column>
</el-table>
</el-card>
</div>
</div>
<!-- 异常表单弹窗 -->
<el-dialog
:title="currentAbnormalIndex === -1 ? '新增异常' : '编辑异常'"
:visible.sync="abnormalDialogVisible"
width="600px"
>
<abnormal-form
ref="abnormalForm"
v-model="abnormalForm"
:show-coil-selector="false"
></abnormal-form>
<div slot="footer" class="dialog-footer">
<el-button @click="abnormalDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="saveAbnormal">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
@@ -250,6 +293,7 @@ import RawMaterialSelect from "@/components/KLPService/RawMaterialSelect";
import ProductSelect from "@/components/KLPService/ProductSelect";
import WarehouseSelect from "@/components/KLPService/WarehouseSelect";
import TimeInput from "@/components/TimeInput";
import AbnormalForm from './components/AbnormalForm';
import { generateCoilNoPrefix } from "@/utils/coil/coilNo";
export default {
@@ -260,8 +304,9 @@ export default {
ProductSelect,
WarehouseSelect,
TimeInput,
AbnormalForm
},
dicts: ['coil_quality_status'],
dicts: ['coil_quality_status', 'coil_abnormal_position', 'coil_abnormal_code', 'coil_abnormal_degree'],
data() {
return {
loading: false,
@@ -378,7 +423,24 @@ export default {
productList: [],
itemSearchLoading: false,
// 酸连轧最近记录
acidRecentRecords: []
acidRecentRecords: [],
// 异常信息
abnormals: [],
// 异常表单弹窗
abnormalDialogVisible: false,
// 当前编辑的异常索引
currentAbnormalIndex: -1,
// 异常表单数据
abnormalForm: {
coilId: null,
position: null,
startPosition: 0,
endPosition: 0,
length: 0,
defectCode: null,
degree: null,
remark: null
}
};
},
computed: {
@@ -813,6 +875,7 @@ export default {
coilId: this.currentInfo.coilId,
enterCoilNo: this.currentInfo.enterCoilNo,
supplierCoilNo: this.currentInfo.supplierCoilNo,
abnormals: this.abnormals,
// 注意：不要传newCoils，否则会走批量更新逻辑
};
@@ -890,6 +953,78 @@ export default {
// 取消操作
handleCancel() {
this.$router.back();
},
// 新增异常
addAbnormal() {
this.currentAbnormalIndex = -1;
this.abnormalForm = {
coilId: this.currentInfo.coilId,
position: null,
startPosition: 0,
endPosition: 0,
length: 0,
defectCode: null,
degree: null,
remark: null
};
this.abnormalDialogVisible = true;
},
// 编辑异常
editAbnormal(index) {
this.currentAbnormalIndex = index;
this.abnormalForm = { ...this.abnormals[index] };
this.abnormalDialogVisible = true;
},
// 保存异常
saveAbnormal() {
this.$refs.abnormalForm.validate(valid => {
if (valid) {
// 计算缺陷长度
this.abnormalForm.length = this.abnormalForm.endPosition - this.abnormalForm.startPosition;
if (this.currentAbnormalIndex === -1) {
// 新增异常
this.abnormals.push({ ...this.abnormalForm });
} else {
// 编辑异常
this.abnormals[this.currentAbnormalIndex] = { ...this.abnormalForm };
}
this.abnormalDialogVisible = false;
}
});
},
// 删除异常
deleteAbnormal(index) {
this.$confirm('确定要删除这个异常信息吗？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.abnormals.splice(index, 1);
});
},
// 获取异常位置文本
getAbnormalPositionText(position) {
if (!position) return '';
const dict = this.dict.type.coil_abnormal_position;
if (!dict) return position;
const item = dict.find(item => item.value === position);
return item ? item.label : position;
},
// 获取异常代码文本
getAbnormalCodeText(code) {
if (!code) return '';
const dict = this.dict.type.coil_abnormal_code;
if (!dict) return code;
const item = dict.find(item => item.value === code);
return item ? item.label : code;
}
}
};
@@ -1116,4 +1251,86 @@ export default {
color: #66b1ff;
}
}
// 异常信息样式
.abnormal-container {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 5px;
}
.abnormal-item {
width: 120px;
height: 80px;
background-color: #fff1f0;
border: 1px solid #ff4d4f;
border-radius: 4px;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
&:hover {
box-shadow: 0 2px 8px rgba(255, 77, 79, 0.2);
transform: translateY(-2px);
}
.abnormal-content {
padding: 8px;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.abnormal-info {
flex: 1;
}
.abnormal-position {
font-size: 12px;
font-weight: 500;
color: #ff4d4f;
margin-bottom: 4px;
}
.abnormal-code {
font-size: 11px;
color: #666;
line-height: 1.3;
}
.abnormal-delete {
position: absolute;
top: -8px;
right: -8px;
width: 20px;
height: 20px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: #fff;
}
}
.abnormal-add {
width: 120px;
height: 80px;
border: 2px dashed #ff4d4f;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
color: #ff4d4f;
font-size: 24px;
&:hover {
background-color: #fff1f0;
transform: translateY(-2px);
}
}
</style>