流程管理系统产品系统

本流程管理系统旨在解决企业审批流程"定制成本高、响应慢、业务人员无法自助配置"的核心痛点，面向企事业单位日常办公自动化场景，提供一套可视化、零代码的流程搭建与自动化管理平台，让业务人员通过拖拽即可完成从表单设计到审批流转的全流程配置，实现审批全流程自动化、可追溯、可统计，广泛适用于行政审批、财务报销、采购申请、人事管理、合同会签等各类企业流程场景，帮助企业实现办公流程数字化转型，提升组织协同效率。

1 可视化流程设计器：用户通过拖拽方式自由搭建流程，支持三类核心节点——人员节点、计算节点、表单组件节点，节点间通过连线定义流转关系，画布支持缩放、平移、节点删除/复制等操作，提供所见即所得的设计体验；
2 节点属性配置：每个节点可动态配置操作权限，包括审批意见填写、表单字段可编辑范围控制、短信/站内消息通知设置、超时自动处理规则、跨流程触发等高级能力
3 流程执行引擎：流程发布后自动运行，根据节点配置自动流转，实时跟踪每个实例的当前节点、处理人、处理状态，支持通过/驳回/退回/转办/加签等审批操作；
4 待办管理：提供PC端和H5移动端双端待办列表，自动推送待审批事项给对应处理人，支持已办、抄送、我发起的等多维度筛选，待办事项实时消息提醒，确保审批不遗漏；
5 数据统计：提供流程发起量、平均审批时长、节点超时率、各部门流程效率等多维度统计看板，辅助管理层优化流程。

本人在项目中担任前端开发工程师，主要负责流程设计器计算流程组件的开发、PC端待办管理模块开发、H5移动端待办页面开发以及项目后期功能迭代与维护工作。
技术栈方面：前端采用Vue.js框架进行组件化开发，UI组件库使用Element UI，流程画布基于AntV X6图编辑引擎实现节点拖拽、连线和画布交互，H5移动端采用Vue+Vant UI实现响应式适配，数据可视化统计图表使用ECharts，前端工程化基于Vue CLI搭建，使用Vue Router管理路由、Vuex管理全局状态、Axios处理HTTP请求。架构设计上采用模块化分层架构，将流程设计器、表单引擎、流程运行时、待办中心等拆分为独立模块，通过组件注册机制实现节点类型的可扩展性。
实现亮点：（1）基于AntV X6自定义开发了计算节点组件，支持条件表达式可视化配置和数据运算规则设置，节点之间的数据依赖关系自动解析，实现表单字段联动计算；（2）流程设计器实现了撤销/重做、节点复制粘贴、自动布局等提升设计效率的交互功能；（3）待办列表支持虚拟滚动处理大量数据，结合WebSocket实现待办消息实时推送刷新。
实现难点：（1）流程画布中节点属性与表单字段的双向绑定，需要实时同步配置面板与画布上的节点状态；（2）条件分支节点的表达式编辑器，需要支持用户可视化选择字段、运算符和值，同时生成可被后端执行引擎解析的规则DSL；（3）PC端与H5端待办数据和操作逻辑的统一，通过抽象公共API层适配两端差异。