一、功能概述
订单批量打印功能是生鲜电商系统的重要模块,旨在提高订单处理效率,减少人工操作错误,特别适用于美菜这类B2B生鲜配送平台,需要处理大量企业客户订单的场景。
二、技术实现方案
1. 前端实现
```javascript
// 示例:Vue.js实现批量打印选择组件
:data="orderList"
@selection-change="handleSelectionChange"
ref="orderTable">
type="primary"
@click="handleBatchPrint"
:disabled="selectedOrders.length === 0">
批量打印({{selectedOrders.length}})
<script>
export default {
data() {
return {
orderList: [], // 从API获取的订单列表
selectedOrders: []
}
},
methods: {
handleSelectionChange(val) {
this.selectedOrders = val;
},
async handleBatchPrint() {
try {
const response = await this.$http.post(/api/order/batch-print, {
orderIds: this.selectedOrders.map(item => item.id)
});
// 调用打印服务
if (response.data.success) {
this.printOrders(response.data.printData);
}
} catch (error) {
console.error(批量打印失败:, error);
}
},
printOrders(printData) {
// 使用iframe或window.print()实现打印
const printWindow = window.open(, _blank);
printWindow.document.write(`
订单打印 <style>
/* 打印样式 */
@media print {
.no-print { display: none; }
table { width: 100%; border-collapse: collapse; }
th, td { border: 1px solid 000; padding: 5px; }
}
${this.generatePrintContent(printData)}
<script>
window.onload = function() {
window.print();
setTimeout(() => window.close(), 500);
};
<\/script>
`);
printWindow.document.close();
},
generatePrintContent(printData) {
// 生成打印HTML内容
let html =
美菜生鲜订单
;
printData.forEach(order => {
html += `
订单号: ${order.orderNo}
客户: ${order.customerName}
地址: ${order.address}
联系电话: ${order.phone}
| 商品 | 规格 | 数量 | 单价 |
|---|
${order.items.map(item => `
${item.productName} |
${item.spec} |
${item.quantity} |
${item.price} |
`).join()}
总计: ¥${order.totalAmount}
配送时间: ${order.deliveryTime}
`;
});
return html;
}
}
}
```
2. 后端实现(Spring Boot示例)
```java
@RestController
@RequestMapping("/api/order")
public class OrderPrintController {
@Autowired
private OrderService orderService;
@PostMapping("/batch-print")
public ResponseEntity