功能概述
快驴生鲜系统需要实现订单批量打印功能,以提高订单处理效率,减少人工操作时间,特别适用于高峰期大量订单处理的场景。
技术实现方案
1. 前端实现
订单选择界面
```javascript
// React示例代码
function OrderBatchPrint() {
const [selectedOrders, setSelectedOrders] = useState([]);
const [orders, setOrders] = useState([]);
// 获取订单列表
useEffect(() => {
fetch(/api/orders?status=pending)
.then(res => res.json())
.then(data => setOrders(data));
}, []);
const toggleOrderSelection = (orderId) => {
setSelectedOrders(prev =>
prev.includes(orderId)
? prev.filter(id => id !== orderId)
: [...prev, orderId]
);
};
const handleBatchPrint = () => {
if (selectedOrders.length === 0) {
alert(请至少选择一个订单);
return;
}
window.open(`/api/orders/batch-print?orderIds=${selectedOrders.join(,)}`, _blank);
};
return (
订单批量打印
{orders.map(order => (
type="checkbox"
checked={selectedOrders.includes(order.id)}
onChange={() => toggleOrderSelection(order.id)}
/>
{order.id} - {order.customerName} - {order.totalAmount}
))}
);
}
```
2. 后端实现
批量打印API (Node.js示例)
```javascript
const express = require(express);
const router = express.Router();
const pdf = require(html-pdf);
const { Order } = require(../models);
// 批量打印订单
router.get(/batch-print, async (req, res) => {
try {
const orderIds = req.query.orderIds.split(,);
const orders = await Order.findAll({
where: { id: orderIds },
include: [customer, orderItems]
});
if (orders.length === 0) {
return res.status(404).send(未找到订单);
}
// 生成HTML模板
const htmlContent = generatePrintHtml(orders);
// 配置PDF选项
const options = {
format: A4,
orientation: portrait,
border: 10mm
};
// 生成PDF
pdf.create(htmlContent, options).toBuffer((err, buffer) => {
if (err) {
console.error(PDF生成错误:, err);
return res.status(500).send(打印生成失败);
}
res.set({
Content-Type: application/pdf,
Content-Disposition: attachment; filename=orders.pdf
});
res.send(buffer);
});
} catch (error) {
console.error(批量打印错误:, error);
res.status(500).send(服务器错误);
}
});
function generatePrintHtml(orders) {
let html = `
<style>
body { font-family: Arial; margin: 0; padding: 20px; }
.order { page-break-after: always; margin-bottom: 30px; }
.order-header { border-bottom: 1px solid 000; padding-bottom: 10px; margin-bottom: 15px; }
.order-items { width: 100%; border-collapse: collapse; }
.order-items th, .order-items td { border: 1px solid ddd; padding: 8px; text-align: left; }
.order-items th { background-color: f2f2f2; }
`;
orders.forEach(order => {
html += `
商品名称 |
规格 |
单价 |
数量 |
小计 |
|---|
`;
order.orderItems.forEach(item => {
html += `
${item.productName} |
${item.specification} |
¥${item.price.toFixed(2)} |
${item.quantity} |
¥${(item.price * item.quantity).toFixed(2)} |
`;
});
html += `
`;
});
html += ``;
return html;
}
module.exports = router;
```
3. 打印优化方案
1. 分页控制:使用CSS的`page-break-after: always`确保每个订单打印在不同页面
2. 打印样式:添加专门的打印CSS,隐藏不需要的元素,优化布局
3. 批量处理:支持一次性打印多个订单,减少用户操作次数
4. 预览功能:提供打印预览,让用户确认后再实际打印
4. 高级功能扩展
1. 打印模板自定义:允许管理员配置不同的打印模板
2. 条形码/二维码支持:在打印订单上添加条形码或二维码便于扫码分拣
3. 批量打印状态跟踪:记录哪些订单已打印,避免重复打印
4. 打印机选择:支持选择特定打印机进行打印
实施步骤
1. 需求分析:与业务部门确认具体打印需求和格式要求
2. UI设计:设计订单选择界面和打印预览界面
3. 后端开发:实现批量查询和PDF生成API
4. 前端开发:实现订单选择和批量打印触发功能
5. 测试:进行功能测试和打印效果测试
6. 部署:将功能部署到测试环境,最终上线
注意事项
1. 考虑高并发情况下批量打印的性能问题
2. 确保PDF生成的安全性和稳定性
3. 提供友好的错误提示,如网络问题、打印机问题等
4. 考虑移动端打印的兼容性问题
通过以上方案,快驴生鲜系统可以实现高效、可靠的订单批量打印功能,显著提升订单处理效率。