feat(contract): 替换产品内容组件为订单详情组件并优化表单字段

重构合同预览和订单详情展示,使用新的OrderDetail组件替代原有的ProductContent组件
调整订单详情表单字段,增加宽度、厚度等必要字段,移除不必要字段
优化表单验证规则和显示逻辑
This commit is contained in:
2026-04-17 15:11:09 +08:00
parent c9742b08cf
commit 79ee9d572d
4 changed files with 373 additions and 48 deletions

View File

@@ -14,8 +14,10 @@
<el-table v-loading="loading" :data="orderItemList">
<el-table-column label="产品类型" align="center" prop="productType" />
<el-table-column label="成品宽度" align="center" prop="width" />
<el-table-column label="成品厚度" align="center" prop="thickness" />
<el-table-column label="成品规格" align="center" prop="finishedProductSpec" />
<el-table-column label="原料规格" align="center" prop="rawMaterialSpec" />
<!-- <el-table-column label="原料规格" align="center" prop="rawMaterialSpec" /> -->
<el-table-column label="宽度公差" align="center" prop="widthTolerance" />
<el-table-column label="厚度公差" align="center" prop="thicknessTolerance" />
@@ -29,6 +31,12 @@
</el-table-column>
<el-table-column label="无税单价(元/吨)" align="center" prop="itemAmount" />
<el-table-column label="卷数" align="center" prop="productNum" />
<el-table-column label="表面处理" align="center" prop="surfaceTreatment" />
<el-table-column label="包装要求" align="center" prop="packagingReq" />
<el-table-column label="切边要求" align="center" prop="edgeCuttingReq" />
<el-table-column label="用途" align="center" prop="purpose" />
<el-table-column label="特殊要求" align="center" prop="specialRequire" />
<el-table-column label="备注" align="center" prop="remark" />
@@ -50,18 +58,15 @@
<el-form-item label="产品类型" prop="productType">
<el-input v-model="form.productType" placeholder="请输入产品类型" />
</el-form-item>
<!-- <el-form-item label="产品数量" prop="productNum">
<el-input v-model="form.productNum" placeholder="请输入产品数量" />
</el-form-item> -->
<!-- <el-form-item label="明细金额" prop="itemAmount">
<el-input size="mini" v-model="form.itemAmount" placeholder="请输入明细金额" />
</el-form-item> -->
<el-form-item label="原料规格" prop="rawMaterialSpec">
<el-input v-model="form.rawMaterialSpec" placeholder="请输入原料规格" />
</el-form-item>
<el-form-item label="成品规格" prop="finishedProductSpec">
<el-input v-model="form.finishedProductSpec" placeholder="请输入成品规格" />
</el-form-item>
<el-form-item label="成品宽度" prop="width">
<el-input v-model="form.width" placeholder="请输入宽度" />
</el-form-item>
<el-form-item label="成品厚度" prop="thickness">
<el-input v-model="form.thickness" placeholder="请输入厚度" />
</el-form-item>
<el-form-item label="宽度公差" prop="widthTolerance">
<el-input v-model="form.widthTolerance" placeholder="请输入宽度公差" />
</el-form-item>
@@ -71,23 +76,34 @@
<el-form-item label="材质" prop="material">
<el-input v-model="form.material" placeholder="请输入材质" />
</el-form-item>
<el-form-item label="等级" prop="grade">
<el-input v-model="form.grade" placeholder="请输入等级" />
</el-form-item>
<el-form-item label="重量" prop="weight">
<el-input v-model="form.weight" placeholder="请输入重量" />
</el-form-item>
<el-form-item label="合同定价" prop="contractPrice">
<el-input v-model="form.contractPrice" placeholder="请输入合同定价" />
<el-form-item label="含税单价(元/吨)" prop="contractPrice">
<el-input v-model="form.contractPrice" placeholder="请输入含税单价" />
</el-form-item>
<el-form-item label="定制人" prop="customizer">
<el-input v-model="form.customizer" placeholder="请输入定制人" />
<el-form-item label="无税单价(元/吨)" prop="itemAmount">
<el-input v-model="form.itemAmount" placeholder="请输入无税单价" />
</el-form-item>
<el-form-item label="发货人" prop="shipper">
<el-input v-model="form.shipper" placeholder="请输入发货人" />
<el-form-item label="卷数" prop="productNum">
<el-input v-model="form.productNum" placeholder="请输入卷数" />
</el-form-item>
<el-form-item label="排产批次" prop="productionBatch">
<el-input v-model="form.productionBatch" placeholder="请输入排产批次" />
<el-form-item label="表面处理" prop="surfaceTreatment">
<el-input v-model="form.surfaceTreatment" placeholder="请输入表面处理" />
</el-form-item>
<el-form-item label="包装要求" prop="packagingReq">
<el-input v-model="form.packagingReq" placeholder="请输入包装要求" />
</el-form-item>
<el-form-item label="切边要求" prop="edgeCuttingReq">
<el-input v-model="form.edgeCuttingReq" placeholder="请输入切边要求" />
</el-form-item>
<el-form-item label="用途" prop="purpose">
<el-input v-model="form.purpose" placeholder="请输入用途" />
</el-form-item>
<el-form-item label="特殊要求" prop="specialRequire">
<el-input v-model="form.specialRequire" placeholder="请输入特殊要求" />
</el-form-item>
<el-form-item label="备注" prop="remark">
@@ -170,29 +186,29 @@ export default {
productType: [
{ required: true, message: "请输入产品类型", trigger: "blur" }
],
productNum: [
{ required: true, message: "请输入产品数量", trigger: "blur" }
],
rawMaterialSpec: [
{ required: true, message: "请输入原料规格", trigger: "blur" }
],
finishedProductSpec: [
{ required: true, message: "请输入成品规格", trigger: "blur" }
],
// productNum: [
// { required: true, message: "请输入产品数量", trigger: "blur" }
// ],
// rawMaterialSpec: [
// { required: true, message: "请输入原料规格", trigger: "blur" }
// ],
// finishedProductSpec: [
// { required: true, message: "请输入成品规格", trigger: "blur" }
// ],
// 重量和合同定价不能为空,且必须是数字,最多两位小数
weight: [
{ required: true, message: "请输入重量", trigger: "blur" },
// 必须是数字,最多两位小数,使用自定义的校验规则
{
validator: (rule, value, callback) => {
if (!/^\d+(\.\d{1,2,3})?$/.test(value)) {
callback(new Error("请输入最多三位小数的数字"));
} else {
callback();
}
}, trigger: "change"
}
],
// weight: [
// { required: true, message: "请输入重量", trigger: "blur" },
// // 必须是数字,最多两位小数,使用自定义的校验规则
// {
// validator: (rule, value, callback) => {
// if (!/^\d+(\.\d{1,2,3})?$/.test(value)) {
// callback(new Error("请输入最多三位小数的数字"));
// } else {
// callback();
// }
// }, trigger: "change"
// }
// ],
contractPrice: [
{ required: true, message: "请输入合同定价", trigger: "blur" },
// 必须是数字,最多两位小数,使用自定义的校验规则