随着数字化转型的深入,各类政府机构、企事业单位普遍需要将传统的“线下填表、人工流转、纸质审批”的业务流程,升级为全流程在线办理平台。核心目标是:
1.减少办事人跑腿次数
2.提升审批效率
3.实现流程可追溯、超时可预警
4.实现移动办公、进度提醒、办理通知
点击空白处退出提示
随着数字化转型的深入,各类政府机构、企事业单位普遍需要将传统的“线下填表、人工流转、纸质审批”的业务流程,升级为全流程在线办理平台。核心目标是:
1.减少办事人跑腿次数
2.提升审批效率
3.实现流程可追溯、超时可预警
4.实现移动办公、进度提醒、办理通知
在线申请:用户填写表单、上传材料、提交申请
待办事项:审批人收到待办任务,可查看详情、通过/驳回/退回
已办事项:已完成(通过/驳回)的申请记录,支持查询追溯
超时催办:配置审批时限,超时未处理自动触发催办流程
办理提醒:多通道消息推送,确保申请人和审批人及时获知流程状态变化
流程跟踪:申请人可实时查看当前审批节点、审批人、审批意见
数据统计:管理员查看各节点处理时长、超时率、办件量等指标
我作为前端负责人,独立完成三个端的技术选型、架构设计和核心功能开发。
技术架构:
Web端采用Vue2 + Element UI + Vite。App端使用uni-app基于Vue2,一套代码编译到iOS、Android、鸿蒙,集成极光推送。桌面端基于Electron,复用Web端代码,打包生成Windows和Mac安装包。
Web端实现:
登录与权限:JWT Token认证 + RBAC权限模型,实现动态菜单渲染和按钮级权限控制。
事务申请:基于JSON Schema的动态表单渲染,支持文本、日期、文件上传等组件类型,支持组件联动和条件显隐,文件上传支持断点续传,表单支持草稿保存。
待办已办:虚拟滚动支持万级数据流畅渲染,多条件筛选,状态标签区分,支持批量审批。审批弹窗封装统一组件,支持通过、驳回、退回、转交。
超时催办:可视化配置审批时限、催办阈值和提醒通道。消息中心:消息列表展示,已读未读状态,点击一键跳转详情。数据统计:ECharts可视化报表,支持Excel导出。
App端实现(uni-app):
跨端适配:iOS适配刘海屏和安全区;Android适配各厂商机型,处理运行时权限;鸿蒙通过uni-app原生兼容。
核心功能:登录支持手机号验证码、微信授权、指纹面容。申请支持表单填写、拍照上传、地理位置、手写签名。待办采用卡片式列表,下拉刷新、上拉加载、左滑通过/驳回。流程跟踪以流程图和时间轴展示进度。
消息推送:集成极光推送,配置APNs、华为、小米、鸿蒙厂商通道,点击通知跳转审批详情。个人中心包含我的申请、我的审批、版本更新检测。
桌面端实现(Electron):
系统托盘:最小化到托盘,待办消息时图标显示角标。本地缓存:electron-store存储审批草稿和本地缓存。
自动更新:electron-updater检测更新,静默下载完成





评论