DeXun/klp-oa
10
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(crm): 添加订单打印功能并优化订单明细展示

Browse Source 
- 新增订单打印功能，支持生成PDF格式的结算单
- 重构订单明细表格，增加原料规格、成品规格等字段
- 优化订单基本信息展示，添加交货日期字段
- 修改客户信息展示，使用公司名称替代客户ID
This commit is contained in:
砂糖
2026-02-03 09:50:07 +08:00
parent ca76147ee6
commit 7943318f26
4 changed files with 492 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

154
klp-ui/src/views/crm/components/OrderDetail.vue
View File

@@ -2,22 +2,35 @@
<div>
<el-empty v-if="!orderId || orderId == ''" description="未选中订单" />
<!-- <el-empty v-else-if="!orderItemList.length" description="暂无订单明细" /> -->
<div v-else>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-if="editable">新增</el-button>
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
v-if="editable">新增</el-button>
<el-button type="primary" plain icon="el-icon-printer" size="mini" @click="handlePrint">打印</el-button>
<el-button type="primary" plain icon="el-icon-refresh" size="mini" @click="getList">刷新</el-button>
</el-col>
</el-row>
<el-table v-loading="loading" :data="orderItemList">
<el-table-column label="产品类型" align="center" prop="productType" />
<el-table-column label="规格要求" align="center" prop="specRequire" />
<el-table-column label="产品数量" align="center" prop="productNum" />
<el-table-column label="特殊要求" align="center" prop="specialRequire" />
<el-table-column label="明细金额" align="center" prop="itemAmount" />
<el-table-column label="原料规格" align="center" prop="rawMaterialSpec" />
<el-table-column label="成品规格" align="center" prop="finishedProductSpec" />
<el-table-column label="材质" align="center" prop="material" />
<el-table-column label="等级" align="center" prop="grade" />
<el-table-column label="重量" align="center" prop="weight" />
<el-table-column label="合同定价" align="center" prop="contractPrice" />
<el-table-column label="金额（元）" align="center">
<template slot-scope="scope">
{{ scope.row.weight * scope.row.contractPrice }}
</template>
</el-table-column>
<el-table-column label="定制人" align="center" prop="customizer" />
<el-table-column label="发货人" align="center" prop="shipper" />
<el-table-column label="排产批次" align="center" prop="productionBatch" />
<!-- <el-table-column label="产品数量" align="center" prop="productNum" /> -->
<!-- <el-table-column label="特殊要求" align="center" prop="specialRequire" /> -->
<!-- <el-table-column label="明细金额" align="center" prop="itemAmount" /> -->
<el-table-column label="备注" align="center" prop="remark" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" v-if="editable">
<template slot-scope="scope">
@@ -37,19 +50,40 @@
<el-form-item label="产品类型" prop="productType">
<el-input v-model="form.productType" placeholder="请输入产品类型" />
</el-form-item>
<el-form-item label="产品数量" prop="productNum">
<!-- <el-form-item label="产品数量" prop="productNum">
<el-input v-model="form.productNum" placeholder="请输入产品数量" />
</el-form-item>
<el-form-item label="明细金额" prop="itemAmount">
</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="specRequire">
<el-input v-model="form.specRequire" placeholder="请输入规格要求" />
<el-form-item label="成品规格" prop="finishedProductSpec">
<el-input v-model="form.finishedProductSpec" placeholder="请输入成品规格" />
</el-form-item>
<el-form-item label="特殊要求" prop="specialRequire">
<el-input v-model="form.specialRequire" type="textarea" placeholder="请输入内容" />
<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>
<el-form-item label="定制人" prop="customizer">
<el-input v-model="form.customizer" placeholder="请输入定制人" />
</el-form-item>
<el-form-item label="发货人" prop="shipper">
<el-input v-model="form.shipper" placeholder="请输入发货人" />
</el-form-item>
<el-form-item label="排产批次" prop="productionBatch">
<el-input v-model="form.productionBatch" placeholder="请输入排产批次" />
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" placeholder="请输入备注" />
</el-form-item>
@@ -59,12 +93,22 @@
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
<el-dialog title="打印结算单" :loading="orderLoading" :visible.sync="orderOpen" width="1000px" append-to-body>
<OrderPrinter ref="printer" :orderContent="orderContent" :orderList="orderItemList" />
<el-button slot="footer">
<el-button :loading="buttonLoading" @click="printOrder">打印</el-button>
</el-button>
</el-dialog>
</div>
</template>
<script>
import { listOrderItem, getOrderItem, delOrderItem, addOrderItem, updateOrderItem } from "@/api/crm/orderItem";
import { actions, ORDER_ACTIONS } from "../js/actions";
import { getOrder } from "@/api/crm/order";
import OrderPrinter from "./OrderPrinter.vue";
export default {
name: "OrderItem",
@@ -77,6 +121,9 @@ export default {
default: true
},
},
components: {
OrderPrinter
},
data() {
return {
// 按钮loading
@@ -120,26 +167,51 @@ export default {
productNum: [
{ required: true, message: "请输入产品数量", trigger: "blur" }
],
itemAmount: [
{ required: true, message: "请输入明细金额", trigger: "blur" },
// 必须是数字，最多两位小数，使用自定义的校验规则
{ validator: (rule, value, callback) => {
if (!/^\d+(\.\d{1,2})?$/.test(value)) {
callback(new Error("请输入最多两位小数的数字"));
} else {
callback();
}
}, trigger: "input" }
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"
}
],
contractPrice: [
{ required: true, message: "请输入合同定价", trigger: "blur" },
// 必须是数字，最多两位小数，使用自定义的校验规则
{
validator: (rule, value, callback) => {
if (!/^\d+(\.\d{1,2,3})?$/.test(value)) {
callback(new Error("请输入最多三位小数的数字"));
} else {
callback();
}
}, trigger: "change"
}
],
},
orderContent: {},
orderLoading: false,
orderOpen: false,
};
},
watch: {
orderId: {
handler(newVal, oldVal) {
// if (newVal !== oldVal) {
this.queryParams.orderId = newVal;
this.getList();
this.queryParams.orderId = newVal;
this.getList();
// }
},
immediate: true
@@ -147,7 +219,7 @@ export default {
},
methods: {
/** 查询正式订单明细列表 */
getList() {
getList() {
if (!this.queryParams.orderId) {
this.orderItemList = [];
this.total = 0;
@@ -171,7 +243,15 @@ export default {
itemId: undefined,
orderId: this.orderId,
productType: undefined,
specRequire: undefined,
rawMaterialSpec: undefined,
finishedProductSpec: undefined,
material: undefined,
grade: undefined,
weight: undefined,
contractPrice: undefined,
customizer: undefined,
shipper: undefined,
productionBatch: undefined,
productNum: undefined,
specialRequire: undefined,
itemAmount: undefined,
@@ -189,6 +269,20 @@ export default {
this.queryParams.pageNum = 1;
this.getList();
},
/** 打印按钮操作 */
handlePrint() {
// 正在准备打印内容
this.orderLoading = true;
this.orderOpen = true;
getOrder(this.orderId).then(response => {
this.orderContent = response.data;
this.orderLoading = false;
});
},
printOrder() {
this.$refs["printer"].print();
this.orderOpen = false;
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");