Files
klp-oa/klp-ui/src/views/aps/planSheet/PlanDetailForm.vue
砂糖 9c2d8cfb4a feat(计划单): 添加序号字段并在表格中显示
在计划单详情表单中添加序号输入字段,并在详情表格中新增序号列显示。移除不再使用的修改按钮代码。
2026-03-28 09:09:50 +08:00

243 lines
8.9 KiB
Vue

<template>
<el-form ref="form" :model="formData" :rules="rules" label-width="60px" :disabled="readonly">
<el-collapse v-model="activeNames" :accordion="false">
<!-- 订单信息组 -->
<el-collapse-item title="订单信息" name="1">
<!-- <el-form-item label="订单ID" prop="orderId">
<el-input v-model="formData.orderId" placeholder="请输入订单ID" />
</el-form-item> -->
<el-row>
<el-col :span="12">
<el-form-item label="订单号" prop="orderCode">
<el-input v-model="formData.orderCode" placeholder="请输入订单号" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="合同号" prop="contractCode">
<el-input v-model="formData.contractCode" placeholder="请输入合同号" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="客户" prop="customerName">
<el-input v-model="formData.customerName" placeholder="请输入客户名称" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="业务员" prop="salesman">
<el-input v-model="formData.salesman" placeholder="请输入业务员姓名" />
</el-form-item>
</el-col>
</el-row>
</el-collapse-item>
<!-- 原料信息组 -->
<el-collapse-item title="原料信息" name="2">
<el-row>
<el-col :span="12">
<el-form-item label="厂家" prop="rawManufacturer">
<el-input v-model="formData.rawManufacturer" placeholder="请输入原料厂家" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="材质" prop="rawMaterial">
<el-input v-model="formData.rawMaterial" placeholder="请输入原料材质" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="厚度" prop="rawThick">
<el-input v-model="formData.rawThick" placeholder="请输入原料厚度(mm)" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="宽度" prop="rawWidth">
<el-input v-model="formData.rawWidth" placeholder="请输入原料宽度(mm)" />
</el-form-item>
</el-col>
</el-row>
</el-collapse-item>
<!-- 成品信息组 -->
<el-collapse-item title="成品信息" name="3">
<el-row>
<el-col :span="12">
<el-form-item label="成品名称" prop="productName">
<el-input v-model="formData.productName" placeholder="请输入成品名称" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="材质" prop="productMaterial">
<el-input v-model="formData.productMaterial" placeholder="请输入成品材质" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="镀层(g)" prop="coatingG">
<el-input v-model="formData.coatingG" placeholder="请输入镀层重量" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="成品宽度" prop="productWidth">
<el-input v-model="formData.productWidth" placeholder="请输入成品宽度" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="轧制厚度" prop="rollingThick">
<el-input v-model="formData.rollingThick" placeholder="请输入轧制厚度" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="标签厚度" prop="markCoatThick">
<el-input v-model="formData.markCoatThick" placeholder="请输入标签厚度" />
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="吨钢长度区间" prop="tonSteelLengthRange">
<el-input v-model="formData.tonSteelLengthRange" placeholder="请输入吨钢长度区间(m)" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="数量" prop="planQty">
<el-input v-model="formData.planQty" placeholder="请输入成品数量" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="重量" prop="planWeight">
<el-input v-model="formData.planWeight" placeholder="请输入成品重量" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="表面处理" prop="surfaceTreatment">
<el-input v-model="formData.surfaceTreatment" placeholder="请输入表面处理要求" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="切边要求" prop="widthReq">
<el-input v-model="formData.widthReq" placeholder="请输入切边要求" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="包装要求" prop="productPackaging">
<el-input v-model="formData.productPackaging" placeholder="请输入包装要求" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="宽度要求" prop="productEdgeReq">
<el-input v-model="formData.productEdgeReq" placeholder="请输入宽度要求" />
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="用途" prop="usageReq">
<el-input v-model="formData.usageReq" placeholder="请输入成品用途" />
</el-form-item>
</el-col>
</el-row>
</el-collapse-item>
<!-- 其他信息组 -->
<el-collapse-item title="生产信息" name="4">
<el-row>
<el-col :span="12">
<el-form-item label="开始时间" prop="startTime">
<el-date-picker clearable v-model="formData.startTime" style="width: 100%" type="datetime"
value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择生产开始时间">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="结束时间" prop="endTime">
<el-date-picker clearable v-model="formData.endTime" style="width: 100%" type="datetime"
value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择生产结束时间">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="后处理" prop="postProcess">
<el-input v-model="formData.postProcess" placeholder="请输入后处理要求" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="下工序" prop="nextProcess">
<el-input v-model="formData.nextProcess" placeholder="请输入下工序" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="取样" prop="sampleReq">
<el-input v-model="formData.sampleReq" placeholder="请输入取样要求" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="序号" prop="bizSeqNo">
<el-input v-model="formData.bizSeqNo" placeholder="请输入序号" />
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="备注" prop="remark">
<el-input v-model="formData.remark" type="textarea" placeholder="请输入备注信息" />
</el-form-item>
</el-col>
</el-row>
</el-collapse-item>
</el-collapse>
</el-form>
</template>
<script>
export default {
name: "PlanDetailForm",
props: {
value: {
type: Object,
default: () => ({})
},
planSheetId: {
type: String,
required: true
},
readonly: {
type: Boolean,
default: false
}
},
computed: {
formData: {
get() {
return this.value || {};
},
set(newVal) {
const data = { ...newVal, planSheetId: this.planSheetId };
this.$emit('input', data);
this.$emit('change', data);
}
}
},
data() {
return {
// 折叠面板默认展开项(全部打开)
activeNames: ['1', '2', '3', '4'],
// 表单校验
rules: {
planSheetId: [
{ required: true, message: "关联排产单ID不能为空", trigger: "blur" }
]
}
};
},
methods: {
/** 表单验证 */
validate(callback) {
return this.$refs.form.validate(callback);
},
reset() {
this.$refs["form"].resetFields();
}
}
};
</script>