feat(钢卷异常): 重构钢卷异常表单组件并集成到各相关页面
新增AbnormalForm组件统一管理钢卷异常表单，减少代码重复 在合卷、分条、打字等页面添加异常信息管理功能 优化异常信息展示样式，支持添加、编辑和删除操作
This commit is contained in:
砂糖
@@ -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>
|
||||
Reference in New Issue
Block a user