按单拣货

故事是这样开始的。在从0-1的开发过程中,经历了几次产品迭代,这期按单拣货的模块我主动承担了起来,(之前交由另一个同事,由于他忙不过来,我主动帮着做了。)

一、需求

这期很简单,需求很明确,按单拣货增加以下小有需求:

1、确认拣货后,商品从库位移动到过渡库位。

过渡库位可以是:容器、拣货车等。

2、当拣货单取消拣货后,需要将库存从过渡库位移回到之前的库位上。

3、只有PC端操作的确认拣货,才能取消拣货。即手持端拣货,不能逆向操作。

二、填坑

坑一:库存表之前设计的只是针对库位,没有容器。容器和库位在数据库是两个表,两个独立的功能模块,没有任何关联关系。

库存转移到容器中,必定要更改库存。于是乎,修改容器模块。为了不影响前端调用,接口请求方法不做修改,只是修改接口内部逻辑:之前容器维护在容器表,现在改到库位表。库位表字段type:【0-地堆1-货架 2-周转箱 3-笼车 4-拣货车】,type【0-地堆1-货架】代表库位;type【2-周转箱 3-笼车 4-拣货车】代表容器。

坑二、按单拣货占用库存时,会生成库存分配明细。

库存分配明细表,记录该订单,每个订单明细,在哪个库位上,占用了多少商品。

当发货订单拣货完成后,开始发货交接,会修改该订单对应的库存分配明细 改为已发货,同时根据该表修改库存表(warehouse_inventory):假设发了10个,此时总库存减少10个,占用库存减少10个,可用库存和冻结库存不变。

商品SKU001 从库位 KW001转移到容器RQ001,移动数量是10。

步骤:

1、库存表warehouse_inventory,库位KW001,总库存减少10,占用库存减少10.

2. 库存表warehouse_inventory增加一个记录,容器RQ001(拷贝了一份库位KW001),总库存10,占用库存10.

3. 库存分配明细表,增加一条记录,warehouse_inventory_id指向 2新增的记录。

4.发货交接时,就会根据3 增加的这条库存分配明细记录扣减库存(从容器里扣减库存)。

坑三、释放占用库存

之前的库存占用逻辑,都是正品发货,占用可用库存。

这期占用库存,可以发次品,占用冻结库存。

所以释放库存时,不能将释放数量都加到可用库存上,而是要根据库存分配明细表的品质类型转移商品数量。

坑四、部分发货

同一个发货订单,先部分占用,生成拣货单1,部分发货。

继续完全占用库存,生成拣货单2,完全拣货。

此时界面上,这两个单据没有区别,SO状态完全拣货,拣货状态已完成。但实际上下面的单据已发货了,不能再取消拣货了。

 

 

三、建议优化

针对按单拣货功能模块(上个页面),为了增强用户使用的体验,建议做以下优化。
1.发货订单,新增一个字段,是否发货:【0-未发货,1-已发货】。
当发货交接后,修改发货订单 是否发货状态:【1-已发货】。

2. 前端按钮的控制。
占用库存:发货订单状态(非订单创建和部分发货状态),参数为:订单id。
释放占用库存:拣货单状态(0-待处理,1-已领用),参数改为:拣货单id。
分配拣货任务:按钮没有限制。(后台只会分配0-待处理)
确认拣货:拣货单状态【0-待处理,1-已领用】,参数:拣货单id
取消拣货:拣货单状态【4-已完成】,参数:拣货单id

四、因为要做这期的小需求,我把按单拣货整个模块都走了一下流程。由于这期又增了波次拣货、占用策略等需求,

所以按单拣货每个点基本上都做了改动。。。

之前有些改动是预想到了,还有一些没有考虑到,走到测试环境才发现的问题。需求迭代由产品主导,项目经理、开发人员、测试人员积极参与。但是经过了一系列需求评审、开发设计评审、测试用例评审,到最后还是出现了各种预测不到的问题。如何能把需求层层剥离出来?如何做到需求迭代时不牵一发而动全身呢?


 

在前端开发中实现的打印功能,可以通过多种方式完成,具体取决于项目需求、浏览器兼容性以及是否需要自定义打印内容。以下是几种常见的实现方案: ### 使用 `window.print()` 实现基础打印功能 如果的内容较为简,可以直接使用浏览器自带的打印功能 `window.print()` 来实现。该方法无需额外引入库,直接调用即可打印当前页面。 ```javascript function printPickingList() { window.print(); } ``` 此方法适用于页面内容与打印内容一致的场景,但在实际业务中,通常需要去除页面中不必要的元素(如导航栏、页脚等),仅打印核心内容。因此,可以将需要打印的内容独放入一个隐藏的 `<div>` 中,并通过 JavaScript 替换当前页面内容后调用打印功能。 ```javascript function printPickingList() { const printContent = document.getElementById("picking-list").innerHTML; const originalContent = document.body.innerHTML; document.body.innerHTML = printContent; window.print(); document.body.innerHTML = originalContent; } ``` 该方法简高效,但不适用于复杂布局或需要导出为 PDF 的场景[^1]。 --- ### 使用 `html2canvas` + `jsPDF` 实现更精细的打印控制 如果需要对打印内容进行更精细的控制,例如导出为 PDF、设置纸张大小、调整样式等,可以结合 `html2canvas` 和 `jsPDF` 库实现。 ```javascript import html2canvas from 'html2canvas'; import jsPDF from 'jspdf'; function exportPickingListToPDF() { const element = document.getElementById("picking-list"); html2canvas(element).then(canvas => { const imgData = canvas.toDataURL('image/png'); const pdf = new jsPDF(); pdf.addImage(imgData, 'PNG', 10, 10); pdf.save("picking-list.pdf"); }); } ``` 此方案适用于需要将导出为 PDF 或进行更复杂打印控制的场景,但实现过程较为复杂,且对性能有一定影响[^1]。 --- ### 处理 Canvas 内容的打印问题 如果中包含二维码等内容,且使用了 `canvas` 元素生成,需要注意浏览器打印时无法直接识别 `canvas` 内容。可以先将 `canvas` 转换为 `img` 格式再进行打印。 ```javascript async function convertCanvasToImage() { const canvas = document.querySelector("canvas"); const image = new Image(); image.src = canvas.toDataURL("image/png"); canvas.parentNode.replaceChild(image, canvas); } ``` 在打印前调用该函数,确保二维码等内容能正常显示在打印结果中[^2]。 --- ### 使用 iframe 加载打印样式 为了保证打印时样式不丢失,可以将打印内容与样式一同注入到一个隐藏的 `iframe` 中,并通过该 `iframe` 调用打印功能。 ```javascript function printWithIframe() { const iframe = document.createElement("iframe"); iframe.style.display = "none"; document.body.appendChild(iframe); const doc = iframe.contentWindow.document; const styles = Array.from(document.querySelectorAll("link[rel='stylesheet'], style")) .map(style => style.outerHTML) .join("\n"); doc.open(); doc.write(` <html> <head>${styles}</head> <body>${document.getElementById("picking-list").innerHTML}</body> </html> `); doc.close(); iframe.contentWindow.print(); } ``` 该方法可以有效保留打印内容的样式,适用于样式要求较高的场景[^4]。 --- ### 使用报表控件实现复杂打印 对于需要高度定制化打印内容(如套打、固定格式、批量打印等)的场景,可以使用专业的报表控件,如 ActiveReports。这类工具通常提供可视化设计界面,支持加载背景图片、绑定数据源等功能,适用于企业级打印需求[^3]。 --- ### 总结 实现打印功能的方式多样,开发者可以根据具体需求选择合适方案。对于简场景,直接使用 `window.print()` 即可;若需更复杂控制,可结合 `html2canvas` 和 `jsPDF`;涉及 `canvas` 内容时需注意转换;样式要求高则可使用 `iframe` 注入样式;企业级应用可考虑专业报表控件。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值