基于Electron-Egg框架开发发票报销记录软件简记

0. 前言

之前用JavaSprict基于electron-egg框架写了一个发票报销记录软件，现在在写相应的软著，顺便复盘记录一下。

1. Electron-Egg简介

electron-egg官网

总的来说就是对Electron这个框架进行了再一次封装，使得更易上手了。 

Electron是什么？

 2. 软件功能简介

2.1 软件登录页面

软件打开后需要进行登录才能使用功能，点击登录后，会和云端的MySQL数据库（SQL的地址信息是写在本地的某个json中，读写时均采用RSA和DES加密）信息进行对比，正确则放行进入软件主页面，否则根据错误情况弹出相应错误提示弹窗：

2.2 软件主页面 

2.3 发票录入 

如上图，发票录入有三种方式，PDF录入、OFD录入和JPG录入。

2.3.1 PDF录入

点击 按钮，则会弹出文件选择框，选择欲提交的PDF发票源文件后点击 按钮即可提交PDF文件进行云端PDF文本识别（PDF文本识别的设置在系统设置中，后面会讲到）：

识别成功后，会将发票信息自动填入对应的信息框中，便于用户核对： 

随后点击 按钮，即可将发票信息提交至云端数据库（数据库的设置同样在系统设置中）中： 

 2.3.2 OFD录入

OFD文件的录入方式和PDF文件的方式一样。点击 按钮，则会弹出文件选择框，选择欲提交的OFD发票源文件后点击 按钮即可提交OFD文件进行云端文本识别：

 随后点击 按钮，即可将发票信息提交至云端数据库中：

2.3.3  JPG录入

点击 按钮，则会弹出文件选择框，选择欲提交的JPG文件后点击 按钮即可提交JPG，随后页面跳转至图像提取页面，进行信息提取操作：

在图像提取页面中，点击”搜索模版”下拉框，选择相应的图像识别模版（图像识别模版可以自己制作也可以用别人制作好的，后面会提及）：

选择完成后点击 按钮，即可对图片进行OCR识别处理（OCR设置在系统设置中）。识别成功后软件会自动跳转回发票录入界面，并自动填入信息： 

 最后提交即可。

2.4 报销发票查询

点击系统主页面左侧的 按钮，即可进入报销发票查询界面：

2.4.1 新增发票数据 

点击 按钮，弹出如图的新增信息界面：

填入相应信息后，点击 即可将发票信息提交到云端数据库。

2.4.2 数据搜索功能 

点击 ，输入欲搜索的字符，则表格会实时显示匹配到的信息条目：

2.4.3 数据修改功能

 点击欲编辑的发票信息条目的 图标，则会弹出条目信息编辑页面：

 修改相应信息后，点击 即可将发票信息修改到云端数据库。

2.4.4 数据删除功能

点击欲删除的发票信息条目的 图标，则会弹出提示框：

点击 按钮，则会将该条发票信息从数据库中删除。

2.4.5 数据筛选功能

点击欲筛选数据的表头旁的 按钮，则会弹出该表头的筛选选项：

点击相应的选项，表格则会实时显示筛选的数据：

2.4.6 数据排序功能

 点击欲排序数据的表头旁的 按钮，则会自动对数据进行排序：

2.5 报销人员管理

 点击系统主页面左侧的 按钮，即可进入报销人员管理界面：

2.5.1 新增数据功能

 点击 按钮，弹出新增信息界面：

填入相应信息后，点击 即可将报销人员信息提交到云端数据库。

2.5.2 数据搜索功能

 点击 ，输入欲搜索的字符，则表格会实时显示匹配到的信息条目：

2.5.3 数据编辑功能

 点击欲编辑的发票信息条目的 图标，则会弹出条目信息编辑页面：

修改相应信息后，点击 即可将报销人员信息修改到云端数据库。 

2.5.4 数据删除功能

点击欲删除的发票信息条目的 图标，则会弹出提示框：

点击 按钮，则会将该条报销人员信息从数据库中删除。

2.5.5 数据筛选功能

点击欲筛选数据的表头旁的 按钮，则会弹出该表头的筛选选项：

点击相应的选项，表格则会实时显示筛选的数据：

2.6 录入人员管理

 点击系统主页面左侧的 按钮，即可进入录入人员管理界面：

2.6.1 新增数据功能 

点击 按钮，弹出新增信息界面：

 填入相应信息后，点击 即可将录入人员信息提交到云端数据库。

2.6.2 数据搜索功能

 点击 ，输入欲搜索的字符，则表格会实时显示匹配到的信息条目：

2.6.3 数据编辑功能

 点击欲编辑的录入人员信息条目的 图标，则会弹出条目信息编辑页面：

 修改相应信息后，点击 即可将录入人员信息修改到云端数据库。

 2.6.4 数据删除功能

点击欲删除的录入人员信息条目的 图标，则会弹出提示框：

点击 按钮，则会将该条录入人员信息从数据库中删除。

2.6.5 数据筛选功能 

点击欲筛选数据的表头旁的 按钮，则会弹出该表头的筛选选项：

点击相应的选项，表格则会实时显示筛选的数据：

2.7 报销部门管理

点击系统主页面左侧的 按钮，即可进入报销部门管理界面：

2.7.1 新增数据功能

点击 按钮，弹出报销部门新增信息界面：

填入相应信息后，点击 即可将报销部门信息提交到云端数据库。 

2.7.2  数据编辑功能

点击欲编辑的发票信息条目的 图标，则会弹出条目信息编辑页面：

修改相应信息后，点击 即可将报销部门信息修改到云端数据库。

2.7.3 数据删除功能

 点击欲删除的发票信息条目的 图标，则会弹出提示框：

 点击 按钮，则会将该条报销部门信息从数据库中删除。

2.7.4 数据筛选功能

点击欲筛选数据的表头旁的 按钮，则会弹出该表头的筛选选项：

点击相应的选项，表格则会实时显示筛选的数据：

2.8 票据分类管理 

 点击系统主页面左侧的 按钮，即可进入票据分类管理界面：

 2.8.1 新增数据功能

 点击 按钮，弹出新增信息界面：

填入相应信息后，点击 即可将票据分类信息提交到云端数据库。

2.8.2 数据编辑功能

 点击欲编辑的票据分类信息条目的 图标，则会弹出条目信息编辑页面：

 修改相应信息后，点击 即可将票据分类信息修改到云端数据库。

2.8.3 数据删除功能

点击欲删除的发票信息条目的 图标，则会弹出提示框：

点击 按钮，则会将该条票据分类信息从数据库中删除。

2.8.4 数据筛选功能 

点击欲筛选数据的表头旁的 按钮，则会弹出该表头的筛选选项：

 点击相应的选项，表格则会实时显示筛选的数据：

2.9 图像模版管理

 点击系统主页面左侧的 按钮，即可进入图像模版管理界面：

2.9.1 数据搜索功能

 点击 ，输入欲搜索的字符，则表格会实时显示匹配到的信息条目：

2.9.2 数据删除功能

 点击欲删除的图像模版信息条目的 图标，则会弹出提示框：

点击 按钮，则会将该条图像模版信息从数据库中删除。

 2.10 个人中心设置

点击系统主页面左侧的 按钮，即可进入个人中心界面：

用户可在该界面编辑登录账号所使用的登录用户名和密码，用户修改完成后，点击 按钮即可将用户信息更新。若点击 按钮，则会跳转回登录页面，用户需重新登录才能进入系统主界面。

2.11 系统设置

 点击系统主页面左侧的 按钮，即可进入系统设置界面：

在该界面中，用户可设置数据库和WebDAV网盘登录名等信息，设置完成后，如图2-56点击页面最下方的 按钮即可将设置保存。若点击 按钮，则可将之前的数据缓存清除。

3. 总结 

3.1 MVC架构

总体感觉electron-egg这个框架还是非常好用的（虽然生成的exe大了一点，但这是electron框架的或者说跨平台开发框架的通病，没办法），开发软件整体上手也比较快。然后借助此框架也接触到了MVC架构：

基础 | 三层架构与MVC模式

超详细的！！！MVC架构模式说明

这对于全栈开发很有帮助。 

3.2 RPC通信

electron-egg采用RPC通信：

RPC是什么，看完你就知道了

3.3 PaddlePaddle飞桨

本项目的OCR使用的基于百度开源的PaddlePaddle深度学习平台开发的RapidOCR：

飞桨 (PaddlePaddle)

信创级开源OCR - 为世界内容安全贡献力量

3.4 annotorious-openseadragon

本项目的图像模版识别标注使用的是annotorious-openseadragon：

官网链接：

Annotorious | Getting Started