DeXun/tiandihe
10
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(PdiList): 重构表单布局并优化字段组织

Browse Source 
- 重新组织表单字段为更合理的分组结构
- 调整标签宽度和输入框样式
- 移除不必要的化学元素字段
- 更新表单验证规则
- 添加新的字段如钢卷状态、分卷模式等
This commit is contained in:
Joshi
2026-04-27 18:34:40 +08:00
parent d2d445eff1
commit 0b07c2a2f1
1 changed files with 136 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files

283
frontend/src/views/PdiList.vue
View File

@@ -72,156 +72,139 @@
<div style="display:flex;gap:20px;">
<!-- 左侧表单 -->
<div style="flex:1;">
<el-form :model="form" :rules="rules" ref="pdiForm" label-width="100px" size="small">
<el-form :model="form" :rules="rules" ref="pdiForm" label-width="120px" size="small">
<div class="section-title">基本信息</div>
<div class="section-title">基本数据</div>
<el-row :gutter="14">
<el-col :span="12"><el-form-item label="卷号" prop="coilid">
<el-input v-model="form.coilid" :disabled="isEdit" />
<el-col :span="12"><el-form-item label="批次编号" prop="rollprogramnb">
<el-input-number v-model="form.rollprogramnb" :controls="false" style="width:200px" />
</el-form-item></el-col>
<el-col :span="12"><el-form-item label="计划号">
<el-input v-model="form.schedule_code" />
<el-col :span="12"><el-form-item label="顺序" prop="sequencenb">
<el-input-number v-model="form.sequencenb" :controls="false" style="width:200px" />
</el-form-item></el-col>
<el-col :span="12"><el-form-item label="轧制程序号">
<el-input-number v-model="form.rollprogramnb" :controls="false" style="width:100%" />
<el-col :span="12"><el-form-item label="计划编号">
<el-input v-model="form.schedule_code" style="width:200px" />
</el-form-item></el-col>
<el-col :span="12"><el-form-item label="顺序号">
<el-input-number v-model="form.sequencenb" :controls="false" style="width:100%" />
<el-col :span="12"><el-form-item label="下道机组">
<el-input v-model="form.next_process_code" style="width:200px" />
</el-form-item></el-col>
<el-col :span="12"><el-form-item label="来料钢种">
<el-select v-model="form.steel_grade" placeholder="请选择来料钢种" clearable filterable style="width:100%">
</el-row>
<div class="section-title">来料数据基本信息</div>
<el-row :gutter="14">
<!-- 左列：来料物理参数 -->
<el-col :span="12">
<el-form-item label="来料卷号">
<el-input v-model="form.coilid" style="width:200px" />
</el-form-item>
<el-form-item label="来料厚度[mm]">
<el-input-number v-model="form.entry_coil_thickness" :precision="3" :controls="false" style="width:200px" />
</el-form-item>
<el-form-item label="来料宽度[mm]">
<el-input-number v-model="form.entry_coil_width" :precision="3" :controls="false" style="width:200px" />
</el-form-item>
<el-form-item label="来料内径[mm]">
<el-input-number v-model="form.entry_of_coil_inner_diameter" :precision="3" :controls="false" style="width:200px" />
</el-form-item>
<el-form-item label="来料外径[mm]">
<el-input-number v-model="form.entry_of_coil_outer_diameter" :precision="3" :controls="false" style="width:200px" />
</el-form-item>
<el-form-item label="来料长度[mm]">
<el-input-number v-model="form.entry_of_coil_length" :precision="3" :controls="false" style="width:200px" />
</el-form-item>
<el-form-item label="来料重量[kg]">
<el-input-number v-model="form.entry_coil_weight" :precision="3" :controls="false" style="width:200px" />
</el-form-item>
<el-form-item label="来料凸度">
<el-input-number v-model="form.crown_average" :precision="3" :controls="false" style="width:200px" />
</el-form-item>
</el-col>
<!-- 右列：钢种和订单信息 -->
<el-col :span="12">
<el-form-item label="来料钢种">
<el-select v-model="form.steel_grade" placeholder="请选择来料钢种" clearable filterable style="width:200px">
<el-option v-for="g in entryGrades" :key="g" :label="g" :value="g" />
</el-select>
</el-form-item></el-col>
</el-form-item>
<el-form-item label="钢卷状态">
<el-select v-model="form.status" placeholder="请选择钢卷状态" style="width:200px">
<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-option label="待轧" :value="5" />
<el-option label="轧制" :value="6" />
<el-option label="拒绝" :value="9" />
</el-select>
</el-form-item>
<el-form-item label="成品钢种">
<el-select v-model="form.sg_sign" placeholder="请选择成品钢种" clearable filterable style="width:200px">
<el-option v-for="g in productGrades" :key="g" :label="g" :value="g" />
</el-select>
</el-form-item>
<el-form-item label="订单厚度[mm]">
<el-input-number v-model="form.order_thickness" :precision="3" :controls="false" style="width:200px" />
</el-form-item>
<el-form-item label="订单宽度[mm]">
<el-input-number v-model="form.order_width" :precision="3" :controls="false" style="width:200px" />
</el-form-item>
<el-form-item label="屈服强度[MPa]">
<el-input-number v-model="form.material_yield_point" :precision="3" :controls="false" style="width:200px" />
</el-form-item>
<el-form-item label="焊接代码">
<el-input v-model="form.welding_code" style="width:200px" />
</el-form-item>
<el-form-item label="是否切边">
<el-select v-model="form.trimming" placeholder="请选择" style="width:200px">
<el-option label="切边" :value="1" />
<el-option label="不切边" :value="0" />
</el-select>
</el-form-item>
<el-form-item label="切边后宽度[mm]">
<el-input-number v-model="form.trimming_width" :precision="3" :controls="false" style="width:200px" />
</el-form-item>
</el-col>
</el-row>
<div class="section-title">主数据</div>
<el-row :gutter="14">
<el-col :span="12"><el-form-item label="二级模型钢种">
<el-select v-model="form.l2_grade" placeholder="请选择二级模型钢种" clearable filterable style="width:100%">
<el-select v-model="form.l2_grade" placeholder="请选择二级模型钢种" clearable filterable style="width:200px">
<el-option v-for="g in l2ModelGrades" :key="g" :label="g" :value="g" />
</el-select>
</el-form-item></el-col>
<el-col :span="12"><el-form-item label="合同号">
<el-input v-model="form.work_order_no" />
</el-form-item></el-col>
<el-col :span="12"><el-form-item label="成品钢种">
<el-select v-model="form.sg_sign" placeholder="请选择成品钢种" clearable filterable style="width:100%">
<el-option v-for="g in productGrades" :key="g" :label="g" :value="g" />
<el-col :span="12"><el-form-item label="分卷模式">
<el-select v-model="form.slitting_mode" placeholder="请选择分卷模式" style="width:200px">
<el-option label="不分卷" :value="0" />
<el-option label="分卷" :value="1" />
</el-select>
</el-form-item></el-col>
<el-col :span="12">
<el-form-item label="包装类型">
<el-input v-model="form.packing_type_code" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="卷筒直径">
<el-input-number v-model="form.coiler_diameter" :controls="false" style="width:100%" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="重量模式">
<el-input v-model="form.weight_mode" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="订单质量">
<el-input v-model="form.order_quality" />
</el-form-item>
</el-col>
</el-row>
<div class="section-title">入口参数</div>
<el-row :gutter="14">
<el-col :span="8"><el-form-item label="厚度(mm)">
<el-input-number v-model="form.entry_coil_thickness" :precision="3" :controls="false"
style="width:100%" />
<el-col :span="12"><el-form-item label="成品重量">
<el-input-number v-model="form.exit_coil_weight" :precision="3" :controls="false" style="width:200px" />
<span style="margin-left:8px;color:#666;">千克</span>
</el-form-item></el-col>
<el-col :span="8"><el-form-item label="厚度最大">
<el-input-number v-model="form.entry_coil_thickness_max" :precision="3" :controls="false"
style="width:100%" />
<el-col :span="12"><el-form-item label="成品卷号">
<el-input v-model="form.exit_coil_no" style="width:200px" />
</el-form-item></el-col>
<el-col :span="8"><el-form-item label="厚度最小">
<el-input-number v-model="form.entry_coil_thickness_min" :precision="3" :controls="false"
style="width:100%" />
<el-col :span="12"><el-form-item label="成品厚度">
<el-input-number v-model="form.exit_coil_thickness" :precision="3" :controls="false" style="width:200px" />
<span style="margin-left:8px;color:#666;">毫米</span>
</el-form-item></el-col>
<el-col :span="8"><el-form-item label="宽度(mm)">
<el-input-number v-model="form.entry_coil_width" :precision="3" :controls="false"
style="width:100%" />
<el-col :span="12"><el-form-item label="成品宽度">
<el-input-number v-model="form.exit_coil_width" :precision="3" :controls="false" style="width:200px" />
<span style="margin-left:8px;color:#666;">毫米</span>
</el-form-item></el-col>
<el-col :span="8"><el-form-item label="宽度最大">
<el-input-number v-model="form.entry_coil_width_max" :precision="3" :controls="false"
style="width:100%" />
<el-col :span="12"><el-form-item label="成品套筒">
<el-input v-model="form.sleeve_code_of_cold_coil" placeholder="例如：无套筒" style="width:200px" />
</el-form-item></el-col>
<el-col :span="8"><el-form-item label="宽度最小">
<el-input-number v-model="form.entry_coil_width_min" :precision="3" :controls="false"
style="width:100%" />
<el-col :span="12"><el-form-item label="成品卷芯">
<el-input-number v-model="form.coiler_diameter" :precision="3" :controls="false" style="width:200px" />
<span style="margin-left:8px;color:#666;">毫米</span>
</el-form-item></el-col>
<el-col :span="8"><el-form-item label="重量(kg)">
<el-input-number v-model="form.entry_coil_weight" :precision="3" :controls="false"
style="width:100%" />
<el-col :span="12"><el-form-item label="包装类型">
<el-input v-model="form.packing_type_code" placeholder="例如：裸包A01" style="width:200px" />
</el-form-item></el-col>
<el-col :span="8"><el-form-item label="长度(m)">
<el-input-number v-model="form.entry_of_coil_length" :precision="3" :controls="false"
style="width:100%" />
</el-form-item></el-col>
<el-col :span="8"><el-form-item label="外径(mm)">
<el-input-number v-model="form.entry_of_coil_outer_diameter" :precision="3" :controls="false"
style="width:100%" />
</el-form-item></el-col>
</el-row>
<div class="section-title">出口 / 订单参数</div>
<el-row :gutter="14">
<el-col :span="8"><el-form-item label="出口卷号">
<el-input v-model="form.exit_coil_no" />
</el-form-item></el-col>
<el-col :span="8"><el-form-item label="出口厚度(mm)">
<el-input-number v-model="form.exit_coil_thickness" :precision="3" :controls="false"
style="width:100%" />
</el-form-item></el-col>
<el-col :span="8"><el-form-item label="出口宽度(mm)">
<el-input-number v-model="form.exit_coil_width" :precision="3" :controls="false" style="width:100%" />
</el-form-item></el-col>
<el-col :span="8"><el-form-item label="出口重量(kg)">
<el-input-number v-model="form.exit_coil_weight" :precision="3" :controls="false"
style="width:100%" />
</el-form-item></el-col>
<el-col :span="8"><el-form-item label="订单厚度(mm)">
<el-input-number v-model="form.order_thickness" :precision="3" :controls="false" style="width:100%" />
</el-form-item></el-col>
<el-col :span="8"><el-form-item label="订单宽度(mm)">
<el-input-number v-model="form.order_width" :precision="3" :controls="false" style="width:100%" />
</el-form-item></el-col>
</el-row>
<div class="section-title">张力参数</div>
<el-row :gutter="14">
<el-col :span="8"><el-form-item label="开卷张力(kN)">
<el-input-number v-model="form.uncoiler_tension" :precision="3" :controls="false"
style="width:100%" />
</el-form-item></el-col>
<el-col :span="8"><el-form-item label="活套1张力(kN)">
<el-input-number v-model="form.looper_tension_1" :precision="3" :controls="false"
style="width:100%" />
</el-form-item></el-col>
<el-col :span="8"><el-form-item label="平整张力(kN)">
<el-input-number v-model="form.pl_tension" :precision="3" :controls="false" style="width:100%" />
</el-form-item></el-col>
<el-col :span="8"><el-form-item label="活套2张力(kN)">
<el-input-number v-model="form.looper_tension_2" :precision="3" :controls="false"
style="width:100%" />
</el-form-item></el-col>
<el-col :span="8"><el-form-item label="活套3张力(kN)">
<el-input-number v-model="form.looper_tension_3" :precision="3" :controls="false"
style="width:100%" />
</el-form-item></el-col>
</el-row>
<div class="section-title">化学成分 (%)</div>
<el-row :gutter="14">
<el-col :span="6" v-for="el in chemElements" :key="el">
<el-form-item :label="el.toUpperCase()" label-width="60px">
<el-input-number v-model="form[el]" :precision="3" :controls="false" style="width:100%" />
</el-form-item>
</el-col>
</el-row>
</el-form>
@@ -258,20 +241,17 @@
import { pdiApi, syncApi, gradeApi } from '../api/index'
const EMPTY = () => ({
coilid: '', rollprogramnb: null, sequencenb: null,
schedule_code: '', steel_grade: '', l2_grade: '',
work_order_no: '', order_quality: '', sg_sign: '',
packing_type_code: '', coiler_diameter: null, weight_mode: '',
entry_coil_thickness: null, entry_coil_thickness_max: null, entry_coil_thickness_min: null,
entry_coil_width: null, entry_coil_width_max: null, entry_coil_width_min: null,
entry_coil_weight: null, entry_of_coil_length: null, entry_of_coil_outer_diameter: null,
exit_coil_no: '', exit_coil_thickness: null, exit_coil_width: null, exit_coil_weight: null,
order_thickness: null, order_width: null,
uncoiler_tension: null, looper_tension_1: null, pl_tension: null,
looper_tension_2: null, looper_tension_3: null,
c: null, si: null, mn: null, p: null, s: null, cu: null,
ni: null, cr: null, mo: null, v: null, ti: null, sol_al: null,
nb: null, n: null, b: null, fe: null
rollprogramnb: null, sequencenb: null,
status: 0, schedule_code: '', coilid: '', next_process_code: '', steel_grade: '', l2_grade: '',
sg_sign: '', packing_type_code: '', coiler_diameter: null,
entry_coil_thickness: null, entry_coil_width: null,
entry_of_coil_inner_diameter: null, entry_of_coil_outer_diameter: null,
entry_of_coil_length: null, entry_coil_weight: null, crown_average: null,
order_thickness: null, order_width: null, material_yield_point: null,
welding_code: '', trimming: 0, trimming_width: null,
exit_coil_weight: null, exit_coil_no: '',
exit_coil_thickness: null, exit_coil_width: null,
sleeve_code_of_cold_coil: '', work_order_no: '', order_quality: ''
})
export default {
@@ -295,9 +275,11 @@ export default {
autoRefreshTimer: null, // 定时器句柄
autoRefreshCountdown: 0, // 倒计时秒数
rules: {
coilid: [
{ required: true, message: '卷号不能为空', trigger: 'blur' },
{ min: 12, max: 12, message: '卷号必须为12位', trigger: 'blur' }
rollprogramnb: [
{ required: true, message: '批次编号不能为空', trigger: 'blur' }
],
sequencenb: [
{ required: true, message: '顺序不能为空', trigger: 'blur' }
]
},
chemElements: ['c', 'si', 'mn', 'p', 's', 'cu', 'ni', 'cr', 'mo', 'v', 'ti', 'sol_al', 'nb', 'n', 'b', 'fe'],
@@ -555,5 +537,12 @@ export default {
</script>
<style>
.section-title {
font-size: 16px;
font-weight: bold;
color: #333;
margin: 20px 0 15px 0;
padding-bottom: 8px;
border-bottom: 2px solid #409EFF;
}
</style>