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