[个人项目] 用 1 个多月彻底解决困扰近 2 年的麻烦事——付款跟单管理工具

项目传送门: 还在整理，届时再放出来

1 前言

Hello 各位好，自从工作被调岗之后就许久未上来看看了。距离上次分享一个正儿八经的个人项目已经过去整整 2 年了，时间过得真快。

传送门：[个人项目] 用 Electron + Vue3 + TS + VME 又做了一个桌面 Markdown 笔记软件 - 掘金

这一次做的这个小项目是关于最近 2 年调岗工作中的一个麻烦事，不知道大家有没有同样的经历 ------ 写付款单。写付款单真是太麻烦了。要按照公司财务的要求填写对应的付款单模板，然后准备送货单、付款凭证、发票等等。偶尔一单两单的也就过去了，自从调岗了之后，多的时候应对的供应商有十好几个，有零售的，也有稳定的，有就合作一次的，也有长期的，又让公司转款的，也有个人垫付的，反正不管怎么样，都要写付款单找领导签字，再找财务操作转账或者报销。

最早接触这个业务的时候，跟我交接的同事跟我说要及时写单，或者攒在一起写。由于业务不熟嘛，所以只能一张张单及时写，及时整理好所有的附件，及时填写单据并打印出来。那么第一个问题来了，"及时" 二字非常有意思。对于一个程序员来说，"及时" 就是系统接口一对接，业务数据恰到好处，分毫不差的流进服务器的数据库里，然后看日志看看系统有没有 "及时" 写进去。而不是亲自上手去做这种 "及时" 的事情。当前我被调岗的是管理仓库的岗位，从业务流程的顶层，被下放到了业务流程的一线，"及时" 这种事情说实话是不太擅长的，因此我很佩服仓库里的所有同事，他们每个人都能做到，并且做的很好。

对于此时此刻 "曾经" 的程序员来说，"扬短避长" 是不明智的，因此我就自己分析了一下这个工作，被我找到了几个无法忍受的点：

单据无法自行溯源。所有人的付款单都是直接填写公司财务提供的那个标准 Excel 模板。一般情况下都是准备好附件，填完内容直接打印，然后再写下一张，然后如此往复。有经验被坑过的同事会另存一个文件到自己的电脑上，万一丢了单或者写错了，就得重新来。但正如前面所说的，我的同事们很擅长，他们从来不会在这个问题上出现过错误。
效率太低。月结合作供应商的单一般会有专属的固定模板，每次改一下金额，准备好附件，准备好发票(如果有)等等就好了，从写单到打印，耗时大概 3 分钟吧。这个速度其实还可以。但这样的供应商不多，更多的是要么采购先行垫付或者到货后公司安排转账这种，供应商的合作时间不规律，不会专门做个模板什么的，每次写单都得重新填一遍转款信息，要是时间久了忘了还得找聊天记录或者直接找人问。这种的单写一个最少得 5 分钟，一个小时 10 张单，我的妈呀，没见过这么低的效率。这还都是理论值，现在供应商都是微信沟通的，一两次合作的连面都没见过，送货单、付款、开发票都是在聊天框处理的，时间都花在复制粘贴保存各个附件上面了。这边的采购同事，每个月月底最后一周的主要工作都是整理各种付款单据、附件、手机截图。
基本信息留存困难。正如第 2 点中所说，经常合作的，留一个模板，不经常合作的就临时搞，能不能都搞一个模板呢？有这么干的！但每次写单之前都要搜一下看看有没有这个模板，也挺花时间的，而且很长没有产生合作突然合作的，还有模板重复的风险。有效留存供应商的基本信息，一方面是合作过程中最基本的尊重，另一方面也是提升相关业务开展的处理效率和准确性的手段。
打印效率低。前面说到。做一个单耗时很长，一单单写，一单单打，就得一直占用这个打印机。办公室里又不是只有写单的同事才能用打印机。你打一下，他打一下，出来的文件就乱了，所以在我第一次做优化之前，大家都是错峰打印的。
跟单效率不高。付完款之后，还要关注财务是否完成转款，避免出现重复付款和重复交单的情况。还有跟供应商对账的需要等等。

不习惯的点还很多，只是上面几个更难忍受。接触了这项工作不久，就开始了对一小部分痛点进行优化。

2 第一次优化

不知道掘金里的小伙伴们有没有了解过在 MS Word 或者 WPS 文档中有一个功能叫 ------ 邮件合并。基于这个功能我准备了两个文件 ------ Excel 文件用于存储打印的数据、字段什么的；Word 文件用于批量生成模板。

下图所示是 Excel 文件里的字段和数据展示。用红色表示财务已经付款了。基本的单据溯源、信息留存和跟单可以更直观便捷易操作。

为了用上邮件合并的功能，直接把财务提供过来的 Excel 模板改成了 Word 版。这样就可以实现批量打印单据了。

这里如果办公套装用的比较溜的小伙伴可能会想了：

Q：都用 Excel 了为什么不用函数呢？
A：因为函数需要提前准备好足够多的模板，但每次写单的数量不固定，用函数不太适用。再者说，在那么多单元格里填各种各样的函数，后期不好维护。
Q：那为啥不用 VBA 啊？
A：好问题！因为 Word 直接邮件合并是现成的，一行代码不用写，简单配置一下就能用了，优化起来更快。

就这么着，这个E&W 的组合自从优化完，一用就是 1 年多，期间还教会了其他同事用，效率一起提升不少。虽然是解决了单据溯源、信息留存和跟单等问题，但也只不过是将工作批量化了而已。1 年多以来，付款单是批量打印了，附件却依然还需要一个单一个单的整理，由于付款单可以一次性批量生成了，这项 "技术的进步" 促使了我和同事们养成了统一在月底找足了所有附件之后再一起写单的 "坏习惯"。最后综合下来写 1 个单和写 10 个单的时间其实是差不多的，整体效率有提升，但却没有做到追求 "及时" 的初衷。

要做到 "及时"，必然每一个流程都应该是高效便捷的，否则坚持不了多久人就会懒散，进而会去想怎么样才能批量化，而批量化需要将时间要求转换为数量要求，就意味着不一定能做到 "及时"。

3 第二次优化

1 年多的使用下来，提升的地方很明显，但缺陷同样也不能回避：

每次都要同时打开 Excel 和 Word 两个软件。都用了 1 年多了，依然没法接受这一点。再有就是由于这两个软件没有做任何数据验证和约束，存在数据输入不规范的问题。有时换个电脑什么的，这两个文件之间的链接还会掉，得重新配置。
附件没有做到有效管理。虽然说只要管好单据内的基本信息就好了，但是单据的附件也应该是管理的一部分，假设出现因为出现纸质单据丢失，还有机会重新打印出来 (别问为什么知道，问就是我搞过这种事情，😅😅😅)；再有就是越来越多的单据都是通过微信发送的，实体单据越来越少了，如果附件不做针对性的管理，未来找起来可就难了；最后一个原因就是附件能随手登记管理，未来在打印单据的时候效率就会高很多。
跟单附件存储不便。一般来说，只要是财务付了款的，我们都要把银行的水单保存下来，避免供应商没看消息、短信或者流水就来找我们。现在我们的水单都是保存在 Excel 里的，这就会导致 Excel 文件越来越大，越来越难打开。
排款编制及跟进麻烦。正常来说，账上钱不够付，付款会有先后顺序 (这可不兴说啊，🤐🤐🤐)。那么每一周都要提交排款表给到财务，让财务部门无论如何都要将预计的货款付出去。然后付款时可能会一次性付完，有时可能先付一部分，那么就需要跟进，这里又涉及到了第三点中提到的跟单附件的管理。
发票管理不便。数电发票越来越好用了，供应商都不再开具纸质发票了，也就意味着又多了一个容易出错的点 ------ 重复提交电子发票。尤其是针对每批次的金额一致的款项，极为容易出现这个问题 (没错，又是我，😪😪😪)。
打印不方便。第一次优化的时候解决了一次性打印付款单的问题，附件单独打印，最后按照单据一个个找到付款单，然后再钉在一起，一直想有什么办法可以一次性解决这个问题，结果一直没找到省事儿的方法。

就以上出现的问题，这次花了 1 个多月的时间，做了一个小工具来解决 ------ 付款跟单工具 👇👇👇

这个工具将 2 年多在这个上面的所有不适应全都一并解决掉了。

这个工具的主界面主要分成三个部分：数据统计区 、功能及筛选区 、列表区 。界面很简洁，提供的功能也很简单：新建/复制单据 ，查看/编辑单据 ，生成PDF文件 ，生成排款表 ，导出列表数据。

一键打印出来的单据及附件长这样：

预留了可供溯源的二维码、模板化输出、必要的辅助信息 (打印时间，附件数量，附件名称，顺序号) 等等，附件图片还可以根据图片的方向自动调整为横向打印还是竖向打印，简直不要太方便。平常随手登记完，等领导有时间的时候，一键几秒钟打印出来，让他签字即可。

4 项目分享

技术栈依然是 Electron + Vue3 + Element-Plus + TS；这次不同的是新加入了 Vite，说实话确实比 webpack 快太多了。

插件方面，加入用于裁剪图片的 cropperjs，用于简单处理图片的 jimp，毕竟所要存储和管理的附件基本上都是以图片的形式存在的；预留未来可能会用到的溯源二维码，引入了 qrcode；为了提取发票二维码中的参数，引入了 jsqr；方便排款拖拽排序，使用了 vue-draggable-plus；数据导出成 Excel，则使用了 exceljs；生成 PDF 的工作交给了 pdfkit；最终所有数据的存储放在了 sqlite3 上。使出了自己 CV 缝合能力将这一大堆插件攒出了这个项目。

在单据新增/查看/编辑的功能上，提供了清晰的表单布局，供应商的基础信息可以通过输入/选择名称带出来，这些信息都是直接从列表中已经填写过的付款单中提取出来的，大大提升了供应商基础信息的维护效率。

在附件方面，加入了自动读取剪切板图片并调起图片裁剪的功能，直接省去了从微信复制粘贴的动作，这种信手拈来、得心应手的感觉简直就像牛马见到了大草原一样的兴奋。虽然技术难度不大，却是个人最得意的一个功能，很容易让人爱上写单这个业务。

既然能读取剪切板图片了，那电子发票也没必要手输了，直接识别二维码多棒呀，然后就给发票附件加上了，发票代码、开票日期，金额一并识别出来了。还能顺便检查一下发票金额是否符合付款单的金额，还可以顺便检查是否上传过重复的发票，一举多得，岂不美哉，我真是个天才 🤭🤭🤭。

排款上，直接读取当前筛选出来的单据列表，然后通过拖拽的方式排款，然后打勾，保存并生成 Excel 文件就可以了，行云流水。这里因为已经有实际的数据了，数据敏感，不便外传，拖拽的功能没办法给大家展示。

不过我从官方文档上找到了参考的使用示例，录屏给大家作为脑补的素材

传送门：指定目标容器 | vue-draggable-plus

还是很有意思的对吧 😁😁😁 。而且为了避免自己马大哈，还整了一个操作日志来帮助自己溯源：

一开始本来是打算用 JSON 文件来存储数据的，后面发现自己既要实时读取基本信息，又要检查发票重复性，还要有操作日志，文件操作太多了，还是用数据库来做增删改查的开发效率更高一点，最后使用了这个世界上目前装机量最多的数据库 ------ SQLite 来存储数据。轻量、简单、方便。

这样一套操作下来，随时产生了付款业务，随时打开这个软件，填一下业务内容，微信复制几下送货单、发票、付款截图，整个流程随手不到 1 分钟就登记完，完全满足 "及时" 的要求，然后想什么时候攒起来一起打印给领导签字就好了，反正生成打印文件也都是不用一分钟的事儿。

5 开发环境

信息	说明
操作系统	Microsoft Windows 11 专业工作站版
开发工具	Visual Studio Code
Node版本	18.19.1
Vite版本	5.4.1
Vue版本	3.4.37
Electron版本	32.0.2
NPM版本	10.2.4

6 主要引用组件/插件

7 后记

被调岗时隔 2 年了，所幸还没有忘记那个依然保持着技术好奇的自己，依然还走在抗争闷头只做重复机械劳作的道路上，会慢慢变好的，就如同这个小项目一样，忍了 2 年了，也是时候要做出一些好的改变了，加油吧！