# flow-vue **Repository Path**: gaoshiwen/flow-vue ## Basic Information - **Project Name**: flow-vue - **Description**: LogicFlow是一款流程图编辑框架，通过此框架实现BPMN流程绘制，配合自己开发的BPMN后端，实现一套完整的国产工作流解决方案 此外还实现了用户登录，用户列表及编辑用户信息； - **Primary Language**: Unknown - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 2 - **Forks**: 0 - **Created**: 2024-05-14 - **Last Updated**: 2025-02-25 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # flow-vue 国产审批流程绘制软件 ## 开源项目[electron+vite+vue3+elementplus] https://gitee.com/pan-qiping/electron-vite-vue3-elementplus >建议使用以下项目结构 ```text . ├──src │ ├──main │ │ ├──index.ts │ │ └──... │ ├──preload │ │ ├──index.ts │ │ └──... │ └──renderer # with vue, react, etc. │ ├──src │ ├──index.html │ └──... ├──electron.vite.config.ts ├──package.json └──... ``` ## 绘制流程图软件 https://site.logic-flow.cn/ ## LogicFlow自定义业务节点 https://1024code.com/collections/MO6KPPq/odupyrc ## Icon素材库 https://www.iconfont.cn/ ## 自定义节点参考 https://site.logic-flow.cn/api/model/graph-model https://gitee.com/xzs0822/logic-flow-project/blob/master/src/components/registerNode/registerStart.js ## 源码地址 https://github.com/didi/LogicFlow ## 登陆效果图 ![登陆](./img/login.gif "登陆") ## 流程图绘制效果图 ### 自定义节点 ![logicFlow](./img/flow.gif "自定义节点") ### 导出导入 ![logicFlow](./img/flow02.gif "导出导入") ### 节点自定义属性 ![logicFlow](./img/flow03.gif "节点自定义属性") ### 导出JSON数据示例 ![导出流程图示例](./img/flow-img.png "导出流程图示例") ```json { "nodes": [ { "id": "start_1165377", "type": "flow_start", "x": 237, "y": 128, "properties": { "width": 60, "height": 60 }, "text": { "x": 237, "y": 128, "value": "开始" } }, { "id": "user_task_9d8e98f", "type": "user_task", "x": 387, "y": 129, "properties": { "nodeType": "USER_TASK", "assignee": "#banzhuren", "candidateUsers": "#c_banzhuren", "formKey": "com.sx.flow.FormA1", "nodeName": "用户任务", "taskListener": "com.go.flow.MyTaskListenerA1", "targetRef": "", "width": 100, "height": 80, "targetNodeId": "e_gateway_f699ece" }, "text": { "x": 387, "y": 129, "value": "班主任审批" } }, { "id": "e_gateway_f699ece", "type": "exclusive_gateway", "x": 519, "y": 128, "properties": { "width": 50, "height": 50 } }, { "id": "user_task_4d980d8", "type": "user_task", "x": 684, "y": 49, "properties": { "nodeType": "USER_TASK", "assignee": "#xiaozhang", "candidateUsers": "#c_xiaozhang", "formKey": "com.sx.flow.FormB1", "nodeName": "用户任务", "taskListener": "com.go.flow.MyTaskListenerB1", "targetRef": "", "width": 100, "height": 80, "targetNodeId": "end_4d6b6d8" }, "text": { "x": 684, "y": 49, "value": "校长审批" } }, { "id": "user_task_783119a", "type": "user_task", "x": 682, "y": 209, "properties": { "nodeType": "USER_TASK", "assignee": "#fuxiangzhang", "candidateUsers": "#c_fuxiangzhang", "formKey": "com.sx.flow.FormB2", "nodeName": "用户任务", "taskListener": "com.go.flow.MyTaskListenerB2", "targetRef": "", "width": 100, "height": 80, "targetNodeId": "end_4d6b6d8" }, "text": { "x": 682, "y": 209, "value": "副校长审批" } }, { "id": "end_4d6b6d8", "type": "flow_end", "x": 835, "y": 130, "properties": { "width": 60, "height": 60 } } ], "edges": [ { "id": "2ccea8c7-7089-430a-8e6b-e84aef1da50d", "type": "flow_edge", "properties": {}, "sourceNodeId": "start_1165377", "targetNodeId": "user_task_9d8e98f", "startPoint": { "x": 267, "y": 128 }, "endPoint": { "x": 337, "y": 129 }, "pointsList": [ { "x": 267, "y": 128 }, { "x": 302, "y": 128 }, { "x": 302, "y": 129 }, { "x": 337, "y": 129 } ] }, { "id": "6dc7f747-16e8-4b5b-bd29-40c31d08f892", "type": "flow_edge", "properties": {}, "sourceNodeId": "user_task_9d8e98f", "targetNodeId": "e_gateway_f699ece", "startPoint": { "x": 437, "y": 129 }, "endPoint": { "x": 494, "y": 128 }, "pointsList": [ { "x": 437, "y": 129 }, { "x": 467, "y": 129 }, { "x": 467, "y": 128.5 }, { "x": 464, "y": 128.5 }, { "x": 464, "y": 128 }, { "x": 494, "y": 128 } ] }, { "id": "18c06db1-5adc-42a8-97ab-38d9cc611eaa", "type": "flow_edge", "properties": { "sourceNodeId": "e_gateway_f699ece", "targetNodeId": "user_task_4d980d8", "condition": "T(Integer).parseInt(#leaveDays) > 7" }, "sourceNodeId": "e_gateway_f699ece", "targetNodeId": "user_task_4d980d8", "startPoint": { "x": 544, "y": 128 }, "endPoint": { "x": 634, "y": 49 }, "pointsList": [ { "x": 544, "y": 128 }, { "x": 604, "y": 128 }, { "x": 604, "y": 49 }, { "x": 634, "y": 49 } ] }, { "id": "53c09093-a0ce-464b-917e-8d49a282ad9f", "type": "flow_edge", "properties": { "sourceNodeId": "e_gateway_f699ece", "targetNodeId": "user_task_783119a", "condition": "T(Integer).parseInt(#leaveDays) <= 7" }, "sourceNodeId": "e_gateway_f699ece", "targetNodeId": "user_task_783119a", "startPoint": { "x": 544, "y": 128 }, "endPoint": { "x": 632, "y": 209 }, "pointsList": [ { "x": 544, "y": 128 }, { "x": 602, "y": 128 }, { "x": 602, "y": 209 }, { "x": 632, "y": 209 } ] }, { "id": "2a985e3c-9475-4f42-8c0e-1f7c2c1b8da0", "type": "flow_edge", "properties": {}, "sourceNodeId": "user_task_4d980d8", "targetNodeId": "end_4d6b6d8", "startPoint": { "x": 734, "y": 49 }, "endPoint": { "x": 835, "y": 100 }, "pointsList": [ { "x": 734, "y": 49 }, { "x": 835, "y": 49 }, { "x": 835, "y": 100 } ] }, { "id": "54dc3ab0-9375-4be9-b009-68f92ab76e03", "type": "flow_edge", "properties": {}, "sourceNodeId": "user_task_783119a", "targetNodeId": "end_4d6b6d8", "startPoint": { "x": 732, "y": 209 }, "endPoint": { "x": 835, "y": 160 }, "pointsList": [ { "x": 732, "y": 209 }, { "x": 835, "y": 209 }, { "x": 835, "y": 160 } ] } ] } ``` ## 脚本命令 ```shell # 安装 logicflow npm install @logicflow/core --save npm uninstall @logicflow/core # 插件包（不使用插件时不需要引入） npm install @logicflow/extension --save npm uninstall @logicflow/extension # 安装及卸载 Font Awesome CSS npm install @fortawesome/fontawesome-free npm uninstall @fortawesome/fontawesome-free ``` ## 安装项目所需的依赖包 ```sh npm install ``` ### 用于开发的 编译 和 热加载 ```sh npm run dev ``` ### 安装axios ```sh npm install axios # 如果项目使用 TypeScript，还需要安装 axios 的类型声明文件 npm install @types/axios -D ``` ### 用于生产的类型检查、编译和缩小 ```sh npm run build ``` ## cnpm命令安装 >- npm config set strict-ssl false >- npm install cnpm -g --registry=https://registry.npm.taobao.org >- electron -v