├── .github
    └── workflows
    │   └── CI.yml
├── .gitignore
├── README.md
├── babel.config.js
├── package-lock.json
├── package.json
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── App.vue
    ├── assets
    │   ├── images
    │   │   └── home.png
    │   └── logo.png
    ├── components
    │   ├── editor.vue
    │   ├── imageLoad.vue
    │   ├── info.vue
    │   ├── node.vue
    │   ├── node_detail.vue
    │   ├── node_form.vue
    │   ├── node_menu.vue
    │   ├── uploadData.vue
    │   └── utils.js
    ├── data
    │   ├── data_A.js
    │   ├── data_A.json
    │   ├── data_B.js
    │   ├── data_B.json
    │   ├── data_B.yaml
    │   ├── data_C.js
    │   ├── data_C.json
    │   ├── data_D.js
    │   ├── data_D.json
    │   └── detail_data.js
    ├── main.js
    ├── style
    │   ├── iconfont.css
    │   └── index.css
    └── utils
    │   ├── canvg.js
    │   └── jsplumb.js
└── vue.config.js


/.github/workflows/CI.yml:
--------------------------------------------------------------------------------
 1 | # This is a basic workflow to help you get started with Actions
 2 | 
 3 | name: CI
 4 | 
 5 | # Controls when the workflow will run
 6 | on:
 7 |   # Triggers the workflow on push or pull request events but only for the V1.0-beat branch
 8 |   push:
 9 |     branches: [ master ]
10 |   pull_request:
11 |     branches: [ master ]
12 | 
13 |   # Allows you to run this workflow manually from the Actions tab
14 |   workflow_dispatch:
15 | 
16 | # jobs 表示要执行的一项或者多项任务
17 | jobs:
18 |   # 任务名，可自定义
19 |   build-and-deploy:
20 |     # runs-on字段指定运行所需要的虚拟机环境。它是必填字段。目前可用的虚拟机如下。
21 |     runs-on: ubuntu-latest
22 |     # steps表示执行步骤
23 |     steps:
24 |     # 检出代码，这里用了 actions/checkout@master 库来完成
25 |     - name: Checkout
26 |       uses: actions/checkout@master
27 |    # 这里展示了如何执行多条命令
28 |     - name: Install and Build
29 |       run: |
30 |         yarn
31 |         yarn build
32 |     # 这里引用了别人写好的发布库，具体参数信息可以查阅上面的链接
33 |     - name: Deploy to GitHub Pages
34 |       uses: JamesIves/github-pages-deploy-action@4.0.0
35 |       with: 
36 |         branch: gh-pages
37 |         folder: dist
38 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | pnpm-debug.log*
14 | 
15 | # Editor directories and files
16 | .idea
17 | .vscode
18 | *.suo
19 | *.ntvs*
20 | *.njsproj
21 | *.sln
22 | *.sw?
23 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Easy editor
  2 | 
  3 | ## 项目介绍
  4 | 
  5 | `Easy Editor` 是基于 VUE+ElementUI+JsPlumb 的拓扑编辑器，通过该编辑器你可以实现拓扑图绘制,拓扑图的修改等功能
  6 | 
  7 | **节点拖拽功能实现流程**
  8 | 
  9 | 通过 vuedraggable 插件来实现左侧菜单的拖拽，拖拽结束后回调 end 方法,根据鼠标所在的位置添加一个节点信息，使用 jsplumb 来管理该节点，设置该节点可拖拽、连线 并注册相关的事件。
 10 | 
 11 | ## 效果图
 12 | 
 13 | ![https://gitee.com/save_money/Easy-Editor/raw/master/src/assets/images/home.png](https://gitee.com/save_money/Easy-Editor/raw/master/src/assets/images/home.png)
 14 | 
 15 | ## 功能
 16 | 
 17 | - 支持拖拽添加节点
 18 | - 鼠标移入到节点中显示 编辑、删除 操作
 19 | - 鼠标单击线可进行设置条件,双击可进行连线删除
 20 | - 支持预设的流程图案例切换展示
 21 | - 支持画布拖拽,控制画布网格背景
 22 | - 支持放大缩小
 23 | - 支持一键生成流程图图片
 24 | - 支持数据文件导入(目前只支持yaml文件和json文件)
 25 | - 支持显示节点内部详情
 26 | - 支持节点间回环连接,但不支持节点线连接自己
 27 | 
 28 | ## 操作说明
 29 | 
 30 | - 左侧菜单子节点可以拖拽，将其拖拽到右侧画板中松开鼠标即可添加一个节点
 31 | - 鼠标点击画板中的节点上，画布右侧出现可编辑的节点详情表单,上方工具栏删除按钮功能开启，点击对应的图标可进行删除、编辑操作
 32 | - 节点分为 3 部分，节点图标在左侧，文字在中间，状态图标在右侧，鼠标从节点图标上可以拖拽出连线，可以连接其他节点，拖动图标意外位置可以改变节点在页面的位置
 33 | 
 34 | ## 使用说明
 35 | 
 36 | - 【自定义节点】:左侧的节点名称以及图标可以自定义，在 node_menu.vue 页面 menuList 变量中
 37 | - 【节点添加】:左侧的菜单栏展开时，子节点可以拖拽到右侧画布中即可添加
 38 | - 【节点修改】:鼠标移动到画布中节点上，画布右侧显示用户【修改】节点的表单
 39 | - 【连线添加】:将鼠标从画布节点的左侧图标上拖动时可以拖拽出连线，然后将鼠标移动到其他节点上即可连接
 40 | - 【连线删除】:双击画布中节点之间的连线，可以进行连线删除
 41 | 
 42 | ## 流程图数据格式
 43 | 
 44 | ```json
 45 | {
 46 |   "name": "流程C",
 47 |   "nodeList": [
 48 |     {
 49 |       "id": "nodeA",
 50 |       "name": "流程B-节点A",
 51 |       "type": "task",
 52 |       "left": "18px",
 53 |       "top": "223px",
 54 |       "ico": "el-icon-user-solid",
 55 |       "state": "success"
 56 |     },
 57 |     {
 58 |       "id": "nodeB",
 59 |       "type": "task",
 60 |       "name": "流程B-节点B",
 61 |       "left": "351px",
 62 |       "top": "96px",
 63 |       "ico": "el-icon-goods",
 64 |       "state": "error"
 65 |     },
 66 |     {
 67 |       "id": "nodeC",
 68 |       "name": "流程B-节点C",
 69 |       "type": "task",
 70 |       "left": "354px",
 71 |       "top": "351px",
 72 |       "ico": "el-icon-present",
 73 |       "state": "warning"
 74 |     },
 75 |     {
 76 |       "id": "nodeD",
 77 |       "name": "流程B-节点D",
 78 |       "type": "task",
 79 |       "left": "723px",
 80 |       "top": "215px",
 81 |       "ico": "el-icon-present",
 82 |       "state": "running"
 83 |     }
 84 |   ],
 85 |   "lineList": [
 86 |     {
 87 |     "from": "nodeA",
 88 |     "to": "nodeB",
 89 |     "label": "条件AB",
 90 |     "connector": "Bezier",
 91 |     "paintStyle": { "strokeWidth": 2, "stroke": "#1879FF" }
 92 |     },
 93 |     {
 94 |       "from": "nodeB",
 95 |       "to": "nodeC",
 96 |       "label": "条件B"
 97 |       "connector": "Bezier",
 98 |       "paintStyle": { "strokeWidth": 2, "stroke": "#1879FF" }
 99 |     }
100 |   ]
101 | }
102 | ```
103 | 
104 | ### data 参数说明
105 | 
106 | | 参数 |    描述    |
107 | | :--: | :--------: |
108 | | name | 流程图名称 |
109 | 
110 | ### nodeList 参数说明
111 | 
112 | | 参数  |         描述          |              可选值              |
113 | | :---: | :-------------------: | :------------------------------: |
114 | |  id   |    标识唯一的节点     |                                  |
115 | | name  |       节点名称        |                                  |
116 | | type  |       节点类型        |                                  |
117 | | left  | 节点在页面上的 X 坐标 |                                  |
118 | |  top  | 节点在页面上的 Y 坐标 |                                  |
119 | |  ico  |    节点显示的图标     |        element上的icon名         |
120 | | state |       节点状态        | success、error、warning、running |
121 | 
122 | ### lineList 参数说明
123 | 
124 | |    参数    |        描述         |                            可选值                            |
125 | | :--------: | :-----------------: | :----------------------------------------------------------: |
126 | |    from    | 连线的起始节点的 ID |                                                              |
127 | |     to     |  连线的终点节点 ID  |                                                              |
128 | |   label    |      连线说明       |                                                              |
129 | | connector  |      连线风格       |  StateMachine、Flowchart，Bezier、Straight(默认为Flowchart)  |
130 | | paintStyle |      连线样式       | 如:{ "strokeWidth": 2, "stroke": "#1879FF" } strokeWidth为连线宽度,stroke为连线颜色 |
131 | 
132 | ## **自定义节点列表数据格式**
133 | 
134 | 自定义的节点列表数据写在node_menu.vue文件中的menuList变量中
135 | 
136 | ```js
137 |  menuList: [
138 |         {
139 |           id: "1",
140 |           type: "group",
141 |           name: "接口节点",
142 |           ico: "el-icon-video-play",
143 |           children: [
144 |             {
145 |               id: "11",
146 |               level: "1-1",
147 |               type: "task1",
148 |               name: "数据接入",
149 |               ico: "el-icon-time",
150 |               state: "success",
151 |               // 自定义覆盖样式
152 |               style: {
153 |                 "backgroundColor": "red"
154 |               }
155 |             }, {
156 |               id: "12",
157 |               level: "1-2",
158 |               type: "task2",
159 |               name: "接口调用",
160 |               ico: "el-icon-odometer",
161 |               state: "success",
162 |               // 自定义覆盖样式
163 |               style: {}
164 |             }
165 |           ]
166 |         },
167 |         {
168 |           id: "2",
169 |           type: "group",
170 |           name: "工具节点",
171 |           ico: "el-icon-video-pause",
172 |           children: [
173 |             {
174 |               id: "21",
175 |               level: "2-1",
176 |               type: "end",
177 |               name: "流程结束",
178 |               ico: "el-icon-caret-right",
179 |               state: "success",
180 |               // 自定义覆盖样式
181 |               style: {}
182 |             }, {
183 |               id: "22",
184 |               level: "2-2",
185 |               type: "over",
186 |               name: "数据重置",
187 |               ico: "el-icon-shopping-cart-full",
188 |               state: "success",
189 |               // 自定义覆盖样式
190 |               style: {}
191 |             }
192 |           ]
193 |         }
194 |       ]
195 | ```
196 | 
197 | ### menuList参数说明
198 | 
199 | |   参数   |         描述         |                 可选值                 |
200 | | :------: | :------------------: | :------------------------------------: |
201 | |    id    |    节点分组的id名    |                                        |
202 | |   type   |         类别         |                 group                  |
203 | |   name   |    节点分组的名称    |                                        |
204 | |   ico    |    节点分组的图标    | element-ui中的icon名或iconfont上的名称 |
205 | | children | 节点分组下的所有节点 |                                        |
206 | 
207 | ### children参数说明
208 | 
209 | | 参数  |      描述      |                         可选值                         |
210 | | :---: | :------------: | :----------------------------------------------------: |
211 | |  id   | 节点分组的id名 |                                                        |
212 | | level |    节点层级    |                                                        |
213 | | type  |    节点类别    | 注意:这里的type值需要是唯一的,否则无法正常新增节点元素 |
214 | | name  | 节点分组的图标 |         element-ui中的icon名或iconfont上的名称         |
215 | | state |    节点状态    |            success、error、warning、running            |
216 | | style | 自定义覆盖样式 |                                                        |
217 | 
218 | ## 使用方式:
219 | 
220 | #### 一、以独立项目使用
221 | 
222 | ```bash
223 | # 下载工程
224 | git clone  https://gitee.com/save_money/Easy-Editor.git
225 | 
226 | # 安装依赖包
227 | npm install
228 | 
229 | # 启动
230 | npm run dev
231 | 
232 | # 访问地址
233 |  http://localhost:8080
234 | ```
235 | 
236 | ##### 
237 | 
238 | ## Gitee
239 | 
240 | <https://gitee.com/save_money/Easy-Editor>
241 | 
242 | 
243 | 
244 | ## 参考资料
245 | 
246 | | 名称            | 地址                                                         | 说明         |
247 | | --------------- | ------------------------------------------------------------ | ------------ |
248 | | jsplumb         | <http://jsplumb.github.io/jsplumb/connections.html#sourcefilter> | 官网API文档  |
249 | | vue-codemirror  | <https://github.surmon.me/vue-codemirror/>                   | 代码编辑器   |
250 | | vuedraggable    | <<https://sortablejs.github.io/Vue.Draggable/#/simple>>      | 节点拖拽     |
251 | | vue-json-viewer | <https://github.com/chenfengjw163/vue-json-viewer>           | json数据查看 |
252 | | domtoimage      | <https://github.com/tsayen/dom-to-image#readme>              | web截图工具  |
253 | | js-yaml         | <https://github.com/nodeca/js-yaml>                          | yaml数据转换 |
254 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "Easyeditor",
 3 |   "version": "1.0.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "cache-loader": "^4.1.0",
12 |     "canvg": "^3.0.6",
13 |     "core-js": "^3.6.5",
14 |     "dom-to-image": "^2.6.0",
15 |     "element-ui": "^2.13.2",
16 |     "html2canvas": "^1.0.0-rc.5",
17 |     "jquery": "^3.5.1",
18 |     "js-yaml": "^3.14.0",
19 |     "jsplumb": "^2.13.2",
20 |     "less": "^3.11.3",
21 |     "less-loader": "^6.1.0",
22 |     "loadsh": "0.0.4",
23 |     "vue": "^2.6.11",
24 |     "vue-codemirror": "^4.0.6",
25 |     "vue-json-viewer": "^2.2.12",
26 |     "vuedraggable": "^2.23.2"
27 |   },
28 |   "devDependencies": {
29 |     "@vue/cli-plugin-babel": "~4.4.0",
30 |     "@vue/cli-plugin-eslint": "~4.4.0",
31 |     "@vue/cli-service": "~4.4.0",
32 |     "babel-eslint": "^10.1.0",
33 |     "eslint": "^6.7.2",
34 |     "eslint-plugin-vue": "^6.2.2",
35 |     "vue-template-compiler": "^2.6.11"
36 |   },
37 |   "eslintConfig": {
38 |     "root": true,
39 |     "env": {
40 |       "node": true
41 |     },
42 |     "extends": [
43 |       "plugin:vue/essential",
44 |       "eslint:recommended"
45 |     ],
46 |     "parserOptions": {
47 |       "parser": "babel-eslint"
48 |     },
49 |     "rules": {}
50 |   },
51 |   "browserslist": [
52 |     "> 1%",
53 |     "last 2 versions",
54 |     "not dead"
55 |   ]
56 | }
57 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jason-chen-coder/JsPlumb-EasyFlowEditor/620a93f0c77cf7eb438f3bb2bfc0f7ea653557cf/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="utf-8">
 6 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |   <meta name="viewport" content="width=device-width,initial-scale=1.0">
 8 |   <!-- <link rel="icon" href="<%= BASE_URL %>favicon.ico"> -->
 9 |   <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
10 |   <link rel="icon" href="favicon.ico" type="image/x-icon" type="image/x-icon" />
11 |   <title>Easy editor</title>
12 | </head>
13 | 
14 | <body>
15 |   <noscript>
16 |     <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
17 |       Please enable it to continue.</strong>
18 |   </noscript>
19 |   <div id="app"></div>
20 |   <!-- built files will be auto injected -->
21 | </body>
22 | 
23 | </html>


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <flow-editor></flow-editor>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | import FlowEditor from '@/components/editor'
 9 | 
10 | export default {
11 |   name: 'App',
12 |   components: {
13 |     FlowEditor
14 |   }
15 | }
16 | </script>
17 | 


--------------------------------------------------------------------------------
/src/assets/images/home.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jason-chen-coder/JsPlumb-EasyFlowEditor/620a93f0c77cf7eb438f3bb2bfc0f7ea653557cf/src/assets/images/home.png


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jason-chen-coder/JsPlumb-EasyFlowEditor/620a93f0c77cf7eb438f3bb2bfc0f7ea653557cf/src/assets/logo.png


--------------------------------------------------------------------------------
/src/components/editor.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div v-if="flowVisible" style="height: calc(100vh);over-flow:hidden" id="editor">
  3 |     <el-row>
  4 |       <!--顶部工具菜单-->
  5 |       <el-col :span="24">
  6 |         <div class="ee-tooltar">
  7 |           <el-link type="primary" :underline="false">
  8 |             <h2>Easy Editor</h2>
  9 |           </el-link>
 10 |           <span class="tooltar-center">
 11 |             <el-link type="primary" :underline="false">{{data.name}}</el-link>
 12 |             <el-divider direction="vertical"></el-divider>
 13 |             <el-popover placement="bottom" style="text-align:center" width="150" trigger="hover">
 14 |               <div style="text-align:center">生成图片</div>
 15 |               <el-button
 16 |                 type="text"
 17 |                 icon="el-icon-picture-outline"
 18 |                 slot="reference"
 19 |                 size="large"
 20 |                 @click="saveAsImage"
 21 |               ></el-button>
 22 |             </el-popover>
 23 |             <el-divider direction="vertical"></el-divider>
 24 |             <el-popover placement="bottom" style="text-align:center" trigger="hover" width="150">
 25 |               <div style="text-align:center">删除节点</div>
 26 |               <el-button
 27 |                 type="text"
 28 |                 icon="el-icon-delete"
 29 |                 slot="reference"
 30 |                 size="large"
 31 |                 @click="deleteElement"
 32 |                 :disabled="!this.activeElement.type"
 33 |               ></el-button>
 34 |             </el-popover>
 35 |             <el-divider direction="vertical"></el-divider>
 36 |             <el-popover placement="bottom" style="text-align:center" trigger="hover" width="150">
 37 |               <div style="text-align:center">{{isShowGrid ? '隐藏网格线':'显示网格线'}}</div>
 38 |               <el-button
 39 |                 type="text"
 40 |                 :icon="(isShowGrid?'icon-dituleiwanggequ-copy ':'icon-fangxingweixuanzhong-copy ')+'iconfont'"
 41 |                 style="vertical-align: middle;"
 42 |                 slot="reference"
 43 |                 size="large"
 44 |                 @click="isShowGrid=!isShowGrid"
 45 |               ></el-button>
 46 |             </el-popover>
 47 |             <el-divider direction="vertical"></el-divider>
 48 |             <el-popover placement="bottom" style="text-align:center" trigger="hover" width="150">
 49 |               <div style="text-align:center">下载数据</div>
 50 |               <el-button
 51 |                 slot="reference"
 52 |                 type="text"
 53 |                 icon="el-icon-download"
 54 |                 size="large"
 55 |                 @click="downloadData"
 56 |               ></el-button>
 57 |             </el-popover>
 58 |             <el-divider direction="vertical"></el-divider>
 59 |             <el-popover placement="bottom" style="text-align:center" trigger="hover" width="150">
 60 |               <div style="text-align:center">上传数据</div>
 61 |               <el-button
 62 |                 slot="reference"
 63 |                 type="text"
 64 |                 icon="el-icon-upload2"
 65 |                 size="large"
 66 |                 @click="uploadDataVisible=true"
 67 |               ></el-button>
 68 |             </el-popover>
 69 |           </span>
 70 |           <div style="float: right;margin-right: 5px">
 71 |             <el-button plain round icon="el-icon-document" @click="dataInfo" size="mini">流程图数据</el-button>
 72 |             <el-button plain round @click="dataReloadA" icon="el-icon-refresh" size="mini">切换流程A</el-button>
 73 |             <el-button plain round @click="dataReloadB" icon="el-icon-refresh" size="mini">切换流程B</el-button>
 74 |             <el-button plain round @click="dataReloadC" icon="el-icon-refresh" size="mini">切换流程C</el-button>
 75 |             <el-button plain round @click="dataReloadD" icon="el-icon-refresh" size="mini">切换流程D</el-button>
 76 |           </div>
 77 |         </div>
 78 |       </el-col>
 79 |     </el-row>
 80 |     <!-- 工具栏下方区域 -->
 81 |     <div style="display: flex;height: calc(100% - 47px);">
 82 |       <!-- 左侧节点实例 -->
 83 |       <div style="width: 230px;border-right: 1px solid #dce3e8;">
 84 |         <node-menu @addNode="addNode" ref="nodeMenu"></node-menu>
 85 |       </div>
 86 |       <!-- 放大缩小工具 -->
 87 |       <div class="zoom-tool" @mousedown.stop>
 88 |         <i class="el-icon-plus enlarged-btn"></i>
 89 |         <el-slider
 90 |           @dblclick="scaleValue=1"
 91 |           @input="startScale"
 92 |           :step="0.001"
 93 |           :max="1.3"
 94 |           :min="0.7"
 95 |           v-model="scaleValue"
 96 |           vertical
 97 |           height="90px"
 98 |         ></el-slider>
 99 |         <i class="el-icon-minus shrink-btn"></i>
100 |       </div>
101 |       <!-- 中间画布部分 -->
102 |       <div
103 |         class="center-container"
104 |         :class="{'background-grid':isShowGrid}"
105 |         id="center-container"
106 |         ref="centerContainer"
107 |         v-flowDrag
108 |       >
109 |         <!-- jsplumb的容器 -->
110 |         <div id="eeContainer" ref="eeContainer" class="container">
111 |           <div class="all-nodes" ref="allnodes">
112 |             <template v-for="node in data.nodeList">
113 |               <!-- 每个节点元素 -->
114 |               <flow-node
115 |                 :id="node.id"
116 |                 :key="node.id"
117 |                 :node="node"
118 |                 :activeElement="activeElement"
119 |                 @changeNodeSite="changeNodeSite"
120 |                 @nodeRightMenu="nodeRightMenu"
121 |                 @clickNode="clickNode"
122 |               ></flow-node>
123 |             </template>
124 |           </div>
125 |         </div>
126 |       </div>
127 |       <!-- 右侧表单 -->
128 |       <div :class="{'node-form-active':isNodeFormActive}" class="node-detail">
129 |         <flow-node-form
130 |           ref="nodeForm"
131 |           @repaintEverything="repaintEverything"
132 |           @changeNodeForm="changeNodeForm"
133 |           @setLineLabel="setLineLabel"
134 |           @changeNodeSite="changeNodeSite"
135 |         ></flow-node-form>
136 |       </div>
137 |     </div>
138 |     <!-- 流程数据详情 -->
139 |     <flow-info v-if="flowInfoVisible" ref="flowInfo" :data="data"></flow-info>
140 |     <!-- 节点详情 -->
141 |     <node-detail v-if="nodeDetailVisible" :currentNode="currentNode"></node-detail>
142 |     <!-- 上传数据 -->
143 |     <upload-data v-if="uploadDataVisible" @uploadPaintFlow="uploadPaintFlow"></upload-data>
144 |     <!-- 一键生成图片 -->
145 |     <image-load v-if="imageLoadVisible" :imgUrl="imgUrl" ref="imageLoad" :isShowGrid="isShowGrid"></image-load>
146 |   </div>
147 | </template>
148 | 
149 | <script>
150 | import { jsPlumb } from 'jsplumb'
151 | //  2.使用domtoimage 转换图片
152 | import domtoimage from 'dom-to-image';
153 | import flowNode from '@/components/node'
154 | import nodeMenu from '@/components/node_menu'
155 | import FlowInfo from '@/components/info'
156 | import nodeDetail from '@/components/node_detail'
157 | import uploadData from '@/components/uploadData'
158 | import imageLoad from '@/components/imageLoad'
159 | import $ from "jquery"
160 | import FlowNodeForm from './node_form'
161 | import lodash from 'lodash'
162 | import { data_A } from '../data/data_A'
163 | import { data_B } from '../data/data_B'
164 | import { data_C } from '../data/data_C'
165 | import { data_D } from '../data/data_D'
166 | 
167 | export default {
168 |   data () {
169 |     return {
170 |       // jsPlumb 实例
171 |       jsPlumb: null,
172 |       // 控制画布销毁
173 |       flowVisible: true,
174 |       // 控制流程数据显示与隐藏
175 |       flowInfoVisible: false,
176 |       // 是否加载完毕标志位
177 |       loadEasyFlowFinish: false,
178 |       // 数据
179 |       data: {},
180 |       // 激活的元素、可能是节点、可能是连线
181 |       activeElement: {
182 |         // 可选值 node 、line
183 |         type: undefined,
184 |         // 节点ID
185 |         nodeId: undefined,
186 |         // 连线ID
187 |         sourceId: undefined,
188 |         targetId: undefined
189 |       },
190 |       // 基础配置
191 |       jsplumbSetting: {
192 |         // 动态锚点、位置自适应
193 |         Anchors: ['Top', 'TopCenter', 'TopRight', 'TopLeft', 'Right', 'RightMiddle', 'Bottom', 'BottomCenter', 'BottomRight', 'BottomLeft', 'Left', 'LeftMiddle'],
194 |         Container: 'eeContainer',
195 |         // 连线的样式 StateMachine、Flowchart，Bezier、Straight
196 |         // Connector: ['Bezier', {curviness: 100}],
197 |         // Connector: ['Straight', {stub: 20, gap: 1}],
198 |         Connector: ['Flowchart', { stub: 30, gap: 1, alwaysRespectStubs: false, midpoint: 0.5, cornerRadius: 10 }],
199 |         // Connector: ['StateMachine', {margin: 5, curviness: 10, proximityLimit: 80}],
200 |         // 鼠标是否拖动删除线
201 |         ConnectionsDetachable: true,
202 |         // 删除线的时候节点不删除
203 |         DeleteEndpointsOnDetach: false,
204 |         // 连线的两端端点类型：矩形 eight: 矩形的高 ，idth: 矩形的宽
205 |         // Endpoint: ['Rectangle', {height: 20, width: 20, cssClass: 'ee-rectangle', hoverClass: 'ee-rectangle-hover'}],
206 |         //  空白端点
207 |         Endpoint: ['Blank', { Overlays: '' }],
208 |         // Endpoints: [['Dot', {radius: 5, cssClass: 'ee-dot', hoverClass: 'ee-dot-hover'}], ['Rectangle', {height: 20, width: 20, cssClass: 'ee-rectangle', hoverClass: 'ee-rectangle-hover'}]],
209 |         // 线端点的样式
210 |         EndpointStyle: { fill: '#1879ffa1', outlineWidth: 1 },
211 |         // 是否打开jsPlumb的内部日志记录
212 |         LogEnabled: true,
213 |         // 绘制连线
214 |         PaintStyle: {
215 |           stroke: '#000000',
216 |           strokeWidth: 1,
217 |           outlineStroke: 'transparent',
218 |           // 设定线外边的宽，单位px
219 |           outlineWidth: 10
220 |         },
221 |         // 绘制连线箭头
222 |         Overlays: [// 箭头叠加
223 |           ['Arrow', {
224 |             width: 10, // 箭头尾部的宽度
225 |             length: 8, // 从箭头的尾部到头部的距离
226 |             location: 1, // 位置，建议使用0～1之间
227 |             direction: 1, // 方向，默认值为1（表示向前），可选-1（表示向后）
228 |             foldback: 0.623 // 折回，也就是尾翼的角度，默认0.623，当为1时，为正三角
229 |           }],
230 |           ['Label', {
231 |             label: '',
232 |             location: 2.2,
233 |             cssClass: 'aLabel'
234 |           }]
235 |         ],
236 |         // 绘制图的模式 svg、canvas
237 |         RenderMode: 'svg',
238 |         DragOptions: { cursor: 'pointer', zIndex: 2000 },
239 |         // 鼠标滑过线的样式
240 |         HoverPaintStyle: { stroke: '#1879ff', strokeWidth: 3, cursor: 'pointer' },
241 |         // 滑过锚点效果
242 |         // EndpointHoverStyle: { fill: 'red' }
243 |         Scope: 'jsPlumb_DefaultScope' // 范围，具有相同scope的点才可连接
244 |       },
245 |       // jsplumb连接参数
246 |       jsplumbConnectOptions: {
247 |         isSource: true,
248 |         isTarget: true,
249 |         // 动态锚点、提供了4个方向 Continuous、AutoDefault
250 |         anchor: 'Continuous',
251 |         // 设置连线上面的label样式
252 |         labelStyle: {
253 |           cssClass: 'flowLabel'
254 |         },
255 |         // 修改了jsplumb 源码，支持label 为空传入自定义style
256 |         emptyLabelStyle: {
257 |           cssClass: 'emptyFlowLabel'
258 |         }
259 |       },
260 |       jsplumbSourceOptions: {
261 |         // 设置可以拖拽的类名，只要鼠标移动到该类名上的DOM，就可以拖拽连线
262 |         filter: '.flow-node-drag',
263 |         filterExclude: false,
264 |         anchor: 'Continuous',
265 |         allowLoopback: false,
266 |         maxConnections: -1,
267 |         onMaxConnections: function (info) {
268 |           console.log(`超过了最大值连线: ${info.maxConnections}`)
269 |         }
270 |       },
271 |       // 参考 https://www.cnblogs.com/mq0036/p/7942139.html
272 |       jsplumbSourceOptions2: {
273 |         // 设置可以拖拽的类名，只要鼠标移动到该类名上的DOM，就可以拖拽连线
274 |         filter: '.flow-node-drag',
275 |         filterExclude: false,
276 |         // anchor: 'Continuous',
277 |         allowLoopback: false,
278 |         connector: ['Flowchart', { curviness: 50 }],
279 |         connectorStyle: {
280 |           // 线的颜色
281 |           stroke: 'red',
282 |           // 线的粗细，值越大线越粗
283 |           strokeWidth: 1,
284 |           // 设置外边线的颜色，默认设置透明，这样别人就看不见了，点击线的时候可以不用精确点击，参考 https://blog.csdn.net/roymno2/article/details/72717101
285 |           outlineStroke: 'transparent',
286 |           // 线外边的宽，值越大，线的点击范围越大
287 |           outlineWidth: 10
288 |         },
289 |         connectorHoverStyle: { stroke: 'red', strokeWidth: 2 }
290 |       },
291 |       jsplumbTargetOptions: {
292 |         // 设置可以拖拽的类名，只要鼠标移动到该类名上的DOM，就可以拖拽连线
293 |         filter: '.flow-node-drag',
294 |         filterExclude: false,
295 |         anchor: 'Continuous',
296 |         allowLoopback: false,
297 |         dropOptions: { hoverClass: 'ee-drop-hover' }
298 |       },
299 |       isNodeFormActive: false,
300 |       // 当前的数据
301 |       currentData: {},
302 |       scaleValue: 1,
303 |       // 鼠标点击的当前节点
304 |       currentNode: {},
305 |       // 节点详情显示
306 |       nodeDetailVisible: false,
307 |       // 数据文件上传显示
308 |       uploadDataVisible: false,
309 |       imageLoadVisible: false,
310 |       // 图片预览
311 |       imgUrl: "../assets/images/2.5D-2.jpg",
312 |       // 网格线显示控制 
313 |       isShowGrid: true
314 |     }
315 |   },
316 |   components: {
317 |     uploadData,
318 |     imageLoad,
319 |     flowNode,
320 |     nodeMenu,
321 |     FlowInfo,
322 |     FlowNodeForm,
323 |     nodeDetail
324 |   },
325 |   directives: {
326 |     // 鼠标在画布中进行拖拽时，动态修改流程图在画布的位置
327 |     'flowDrag': {
328 |       bind (el, binding, vnode, oldNode) {
329 |         console.log("flowDrag", vnode, oldNode)
330 |         if (!binding) {
331 |           return
332 |         }
333 |         el.onmousedown = (e) => {
334 |           if (e.button == 2) {
335 |             // 右键需求待完成
336 |             console.log("右键需求待完成")
337 |             return
338 |           }
339 |           //  鼠标按下，计算鼠标在当前可视区的坐标
340 |           let disX = e.clientX
341 |           let disY = e.clientY
342 |           // 移除被选中节点的样式
343 |           $(".ee-node-active").removeClass("ee-node-active")
344 |           el.style.cursor = 'move'
345 |           document.onmousemove = function (e) {
346 |             // 移动时禁止默认事件
347 |             e.preventDefault()
348 |             // e.clientX/e.clientY为在鼠标移动中的最新坐标
349 |             // left为触发一次移动事件横向移动的距离
350 |             const left = e.clientX - disX
351 |             el.scrollLeft += -left
352 |             // top为触发一次移动事件竖直移动的距离
353 |             const top = e.clientY - disY
354 |             el.scrollTop += -top
355 |             // 更新当前鼠标在可视区域的坐标,便于下次触发移动事件计算
356 |             disX = e.clientX
357 |             disY = e.clientY
358 |           }
359 | 
360 |           document.onmouseup = function () {
361 |             el.style.cursor = 'auto'
362 |             document.onmousemove = null
363 |             document.onmouseup = null
364 |           }
365 |         }
366 |       }
367 |     }
368 |   },
369 |   mounted () {
370 |     // 实例化,生成一个jsPlumb实例
371 |     this.jsPlumb = jsPlumb.getInstance()
372 |     this.$nextTick(() => {
373 |       // 默认加载流程A的数据、在这里可以根据具体的业务返回符合流程数据格式的数据即可
374 |       this.currentData = data_A
375 |       this.dataReload(this.currentData)
376 |     })
377 |     //  加载版本提示框
378 |     this.$notify({
379 |       title: '欢迎使用 Easy Editor',
380 |       dangerouslyUseHTMLString: true,
381 |       message: "<p> 当前版本：1.0.0 <br /> Powered by Jason chen<br /> Gitee:<a target='blank' href='https://gitee.com/save_money/Easy-Editor'>  Easy Editor  </a> </p>",
382 |       showClose: true,
383 |       iconClass: "icon-workflow-copy iconfont",
384 |       position: 'bottom-right',
385 |       offset: 100,
386 |       customClass: "notify-tip"
387 |     });
388 |   },
389 |   methods: {
390 |     saveAsImage () {
391 |       // 将流程图保存为图片并将图片地址传递给子组件（使用dom2image）
392 |       // var node = document.getElementById('center-container');
393 |       var node = document.getElementById('eeContainer');
394 |       domtoimage.toPng(node)
395 |         .then((dataUrl) => {
396 |           this.imgUrl = dataUrl
397 |           this.$refs.imageLoad.loading = false
398 |         })
399 |         .catch(function (error) {
400 |           console.error('oops, something went wrong!', error);
401 |         });
402 |       this.imageLoadVisible = true;
403 | 
404 |     },
405 |     //点击了某个节点
406 |     showNodeDetail (node) {
407 |       this.nodeDetailVisible = true
408 |       this.currentNode = Object.create(node)
409 |     },
410 |     //开始放大缩小
411 |     startScale () {
412 |       this.$refs.eeContainer.style.transform = `scale(${this.scaleValue})`
413 |       this.jsPlumb.setZoom(`${this.scaleValue}`);
414 |       // 获取center-container的宽高作为原始宽高,然后以放大/缩小倍数计算后给eecontainer
415 |       var containWidth = $("#center-container").width()
416 |       var containHeight = $("#center-container").height()
417 |       if (this.scaleValue < 1) {
418 |         $("#eeContainer").width(containWidth / this.scaleValue)
419 |         $("#eeContainer").height(containHeight / this.scaleValue)
420 |       } else {
421 |         $("#eeContainer").width(containWidth * this.scaleValue)
422 |         $("#eeContainer").height(containHeight * this.scaleValue)
423 |       }
424 |     },
425 |     // 返回唯一标识
426 |     getUUID () {
427 |       return Math.random().toString(36).substr(3, 10)
428 |     },
429 |     jsPlumbInit () {
430 |       // 初始化jsplumb容器
431 |       this.jsPlumb.ready(() => {
432 |         // 导入默认配置
433 |         this.jsPlumb.importDefaults(this.jsplumbSetting)
434 |         // 会使整个jsPlumb立即重绘。
435 |         this.jsPlumb.setSuspendDrawing(false, true);
436 |         // 初始化节点
437 |         this.loadEasyFlow()
438 |         // 给连接线添加点击事件
439 |         this.jsPlumb.bind('click', (conn, originalEvent) => {
440 |           console.log(originalEvent)
441 |           this.activeElement.type = 'line'
442 |           this.activeElement.sourceId = conn.sourceId
443 |           this.activeElement.targetId = conn.targetId
444 |           this.$refs.nodeForm.lineInit({
445 |             from: conn.sourceId,
446 |             to: conn.targetId,
447 |             label: conn.getLabel(),
448 |             type: conn.connector.type
449 |           })
450 |         })
451 |         this.jsPlumb.bind("dblclick", (conn) => {
452 |           this.$confirm('确定删除所点击的线吗?', '提示', {
453 |             confirmButtonText: '确定',
454 |             cancelButtonText: '取消',
455 |             type: 'warning'
456 |           }).then(() => {
457 |             this.jsPlumb.deleteConnection(conn)
458 |             this.$message.success("删除成功")
459 |           }).catch(() => {
460 |             this.$message.info("取消删除")
461 |           })
462 |         })
463 |         // 连线成功回调
464 |         this.jsPlumb.bind("connection", (evt) => {
465 |           let from = evt.source.id
466 |           let to = evt.target.id
467 |           if (this.loadEasyFlowFinish) {
468 |             // 向数据列表中保存刚刚建立的连线数据
469 |             this.data.lineList.push({ from: from, to: to })
470 |           }
471 |         })
472 | 
473 |         // 删除连线回调
474 |         this.jsPlumb.bind("connectionDetached", (evt) => {
475 |           // 向数据源更新数据,即在数据源中清除当前的关系
476 |           this.deleteLine(evt.sourceId, evt.targetId)
477 |         })
478 | 
479 |         // 改变线的连接节点
480 |         this.jsPlumb.bind("connectionMoved", (evt) => {
481 |           // 向数据源更新数据
482 |           this.changeLine(evt.originalSourceId, evt.originalTargetId)
483 |         })
484 | 
485 |         // 连线右击
486 |         this.jsPlumb.bind("contextmenu", (evt) => {
487 |           console.log('contextmenu', evt)
488 |         })
489 | 
490 |         // 绑定建立连线前的回调事件
491 |         this.jsPlumb.bind("beforeDrop", (evt) => {
492 |           let from = evt.sourceId
493 |           let to = evt.targetId
494 |           // 连线情况判断分析
495 |           if (from === to) {
496 |             this.$message.error('节点不支持连接自己')
497 |             return false
498 |           }
499 |           if (this.hasLine(from, to)) {
500 |             this.$message.error('该关系已存在,不允许重复创建')
501 |             return false
502 |           }
503 |           // 回环控制
504 |           // if (this.hashOppositeLine(from, to)) {
505 |           //   this.$message.error('不支持两个节点之间连线回环');
506 |           //   return false
507 |           // }
508 |           this.$message.success('连接成功')
509 |           return true
510 |         })
511 | 
512 |         // beforeDetach
513 |         this.jsPlumb.bind("beforeDetach", (evt) => {
514 |           console.log('beforeDetach', evt)
515 |         })
516 |         // 建立一个容器，并将它作为默认容器,jsplumb的实例要绑定在一个div上，我们管这个div叫容器;因为容器里要放绝对定位的元素,所以容器要给相对定位属性
517 |         this.jsPlumb.setContainer(this.$refs.eeContainer)
518 |       })
519 |     },
520 |     // 加载流程图
521 |     loadEasyFlow () {
522 |       // 初始化节点
523 |       for (var i = 0; i < this.data.nodeList.length; i++) {
524 |         let node = this.data.nodeList[i]
525 |         let _this = this
526 |         // 设置源点，可以拖出线连接其他节点
527 |         this.jsPlumb.makeSource(node.id, this.jsplumbSourceOptions)
528 |         // 设置目标点，其他源点拖出的线可以连接该节点
529 |         this.jsPlumb.makeTarget(node.id, this.jsplumbTargetOptions)
530 |         this.jsPlumb.draggable(node.id, {
531 |           containment: 'parent',
532 |           stop: (el) => {
533 |             _this.currentData = _this.data
534 |             console.log('停止拖拽', el)
535 |           }
536 |         })
537 |         this.jsPlumb.bind("click", function (conn, originalEvent) {
538 |           console.log(conn, originalEvent)
539 |           // this.showNodeDetail(conn)
540 |         });
541 |       }
542 |       // 初始化连线
543 |       for (var j = 0; j < this.data.lineList.length; j++) {
544 |         let line = this.data.lineList[j]
545 |         var connParam = {
546 |           source: line.from,
547 |           target: line.to,
548 |           label: line.label ? line.label : '',
549 |           connector: line.connector ? line.connector : '',
550 |           anchors: line.anchors ? line.anchors : undefined,
551 |           paintStyle: line.paintStyle ? line.paintStyle : undefined,
552 |         }
553 |         this.jsPlumb.connect(connParam, this.jsplumbConnectOptions)
554 |       }
555 |       this.$nextTick(function () {
556 |         this.loadEasyFlowFinish = true
557 |       })
558 |     },
559 |     // 子组件上触发的设置连接线属性
560 |     setLineLabel (from, to, label, type) {
561 |       var conn = this.jsPlumb.getConnections({
562 |         source: from,
563 |         target: to
564 |       })[0]
565 |       if (!label || label === '' || label == null) {
566 |         // 如果准备修改的连接线上文字内容为空
567 |         //如果原来就没有文字就直接返回
568 |         if (!conn.getLabel()) {
569 |           return
570 |         }
571 |         // 原来就有文字就添加类名
572 |         conn.removeClass('flowLabel')
573 |         conn.addClass('emptyFlowLabel')
574 |       } else {
575 |         conn.addClass('flowLabel')
576 |         conn.removeClass('emptyFlowLabel')
577 |         console.log(type)
578 |         // 修改连接线的样式
579 |         // conn.setConnector(eval(type));
580 |         //  修改连接线上的文字
581 |         conn.setLabel({
582 |           label: label,
583 |         })
584 |       }
585 |     },
586 |     // 删除激活的元素
587 |     deleteElement () {
588 |       if (this.activeElement.type === 'node') {
589 |         // 当我们点击节点时,会将this.activeElement.type设置为node
590 |         this.deleteNode(this.activeElement.nodeId)
591 |       } else if (this.activeElement.type === 'line') {
592 |         this.$confirm('确定删除所点击的线吗?', '提示', {
593 |           confirmButtonText: '确定',
594 |           cancelButtonText: '取消',
595 |           type: 'warning'
596 |         }).then(() => {
597 |           var conn = this.jsPlumb.getConnections({
598 |             source: this.activeElement.sourceId,
599 |             target: this.activeElement.targetId
600 |           })[0]
601 |           this.jsPlumb.deleteConnection(conn)
602 |         }).catch(() => {
603 |         })
604 |       }
605 |     },
606 |     // 删除线
607 |     deleteLine (from, to) {
608 |       this.data.lineList = this.data.lineList.filter(function (line) {
609 |         if (line.from == from && line.to == to) {
610 |           return false
611 |         }
612 |         return true
613 |       })
614 |     },
615 |     // 改变连线
616 |     changeLine (oldFrom, oldTo) {
617 |       this.deleteLine(oldFrom, oldTo)
618 |     },
619 |     // 改变节点的位置
620 |     changeNodeSite (data) {
621 |       for (var i = 0; i < this.data.nodeList.length; i++) {
622 |         let node = this.data.nodeList[i]
623 |         if (node.id === data.nodeId) {
624 |           node.left = data.left
625 |           node.top = data.top
626 |         }
627 |       }
628 |     },
629 |     changeNodeForm () {
630 |       this.isNodeFormActive = !this.isNodeFormActive
631 |     },
632 |     /**
633 |      * 拖拽结束后添加新的节点
634 |      * @param evt
635 |      * @param nodeMenu 被添加的节点对象
636 |      * @param mousePosition 鼠标拖拽结束的坐标
637 |      */
638 |     addNode (evt, nodeMenu, mousePosition) {
639 |       console.log(mousePosition)
640 |       var screenX = evt.originalEvent.clientX
641 |       let screenY = evt.originalEvent.clientY
642 |       let eeContainer = this.$refs.eeContainer
643 |       var containerRect = eeContainer.getBoundingClientRect()// 获取eeContainer的大小及其相对于视口的位置
644 |       var left = screenX
645 |       var top = screenY
646 |       // 计算是否拖入到容器中
647 |       if (left < containerRect.x || left > containerRect.width + containerRect.x || top < containerRect.y || containerRect.y > containerRect.y + containerRect.height) {
648 |         this.$message.error("请把节点拖入到画布中")
649 |         return
650 |       }
651 |       left = left - containerRect.x + eeContainer.scrollLeft
652 |       top = top - containerRect.y + eeContainer.scrollTop
653 |       // 让节点放在画布上时让鼠标在节点中间
654 |       left -= 85
655 |       top -= 16
656 |       var nodeId = this.getUUID() // 准备唯一的id给节点
657 |       // 动态生成名字
658 |       var origName = nodeMenu.name
659 |       var nodeName = origName
660 |       var index = 1
661 |       while (index < 10000) {
662 |         var repeat = false
663 |         for (var i = 0; i < this.data.nodeList.length; i++) {
664 |           let node = this.data.nodeList[i]
665 |           if (node.name === nodeName) {
666 |             nodeName = origName + index
667 |             repeat = true
668 |           }
669 |         }
670 |         if (repeat) {
671 |           index++
672 |           continue
673 |         }
674 |         break
675 |       }
676 |       var node = {
677 |         id: nodeId,
678 |         name: nodeName,
679 |         type: nodeMenu.type,
680 |         left: left + 'px',
681 |         top: top + 'px',
682 |         ico: nodeMenu.ico,
683 |         state: nodeMenu.state
684 |       }
685 |       /**
686 |        * 这里可以进行业务判断、是否能够添加该节点
687 |        */
688 |       //向节点数据列表添加节点
689 |       this.data.nodeList.push(node)
690 |       this.$nextTick(function () {
691 |         // 当节点为源点时，可以拖出线连接其他节点
692 |         this.jsPlumb.makeSource(nodeId, this.jsplumbSourceOptions)
693 |         // 当节点目标点时，其他源点拖出的线可以连接该节点
694 |         this.jsPlumb.makeTarget(nodeId, this.jsplumbTargetOptions)
695 |         // 使当前节点可以被拖拽
696 |         this.jsPlumb.draggable(nodeId)
697 |       })
698 |     },
699 |     /**
700 |      * 删除节点
701 |      * @param nodeId 被删除节点的ID
702 |      */
703 |     deleteNode (nodeId) {
704 |       this.$confirm('确定要删除节点' + nodeId + '?', '提示', {
705 |         confirmButtonText: '确定',
706 |         cancelButtonText: '取消',
707 |         type: 'warning',
708 |         closeOnClickModal: false
709 |       }).then(() => {
710 |         /**
711 |          * 这里需要进行业务判断，是否可以删除
712 |          */
713 |         this.data.nodeList = this.data.nodeList.filter(function (node) {
714 |           if (node.id === nodeId) {
715 |             // 将当前被删除的节点过滤掉
716 |             return false
717 |           }
718 |           return true
719 |         })
720 |         this.$nextTick(function () {
721 |           //  在jsplumb实例中删除当前节点
722 |           this.jsPlumb.removeAllEndpoints(nodeId);
723 |         })
724 |       }).catch(() => {
725 |       })
726 |       return true
727 |     },
728 |     // 点击了子组件node后,子组件触发的事件
729 |     clickNode (nodeId) {
730 |       this.activeElement.type = 'node'
731 |       this.activeElement.nodeId = nodeId
732 |       // 点击了节点之后,触发node_form下的nodeInit方法
733 |       this.$refs.nodeForm.nodeInit(this.data, nodeId)
734 |     },
735 |     // 是否具有该线
736 |     hasLine (from, to) {
737 |       for (var i = 0; i < this.data.lineList.length; i++) {
738 |         var line = this.data.lineList[i]
739 |         if (line.from === from && line.to === to) {
740 |           return true
741 |         }
742 |       }
743 |       return false
744 |     },
745 |     // 是否含有相反的线
746 |     hashOppositeLine (from, to) {
747 |       return this.hasLine(to, from)
748 |     },
749 |     nodeRightMenu (nodeId, evt) {
750 |       this.menu.show = true
751 |       this.menu.curNodeId = nodeId
752 |       this.menu.left = evt.x + 'px'
753 |       this.menu.top = evt.y + 'px'
754 |     },
755 |     repaintEverything () {
756 |       console.log('重绘')
757 |       this.jsPlumb.repaint()
758 |     },
759 |     // 流程数据信息
760 |     dataInfo () {
761 |       this.flowInfoVisible = true
762 |       this.$nextTick(function () {
763 |         this.$refs.flowInfo.init()
764 |       })
765 |     },
766 |     // 加载流程图
767 |     dataReload (data) {
768 |       this.flowVisible = false
769 |       this.data.nodeList = []
770 |       this.data.lineList = []
771 |       this.$nextTick(() => {
772 |         data = lodash.cloneDeep(data)
773 |         this.flowVisible = true
774 |         this.data = data
775 |         this.currentData = data
776 |         this.$nextTick(() => {
777 |           this.jsPlumb = jsPlumb.getInstance()
778 |           this.$nextTick(() => {
779 |             this.jsPlumbInit()
780 |           })
781 |         })
782 |       })
783 |     },
784 |     // 模拟载入数据dataA
785 |     dataReloadA () {
786 |       this.currentData = data_A
787 |       this.dataReload(data_A)
788 |     },
789 |     // 模拟载入数据dataB
790 |     dataReloadB () {
791 |       this.currentData = data_B
792 |       this.dataReload(data_B)
793 |     },
794 |     // 模拟载入数据dataC
795 |     dataReloadC () {
796 |       this.currentData = data_C
797 |       console.log(data_C)
798 |       this.dataReload(data_C)
799 |     },
800 |     // 模拟载入数据dataD
801 |     dataReloadD () {
802 |       this.currentData = data_D
803 |       this.dataReload(data_D)
804 |     },
805 |     // 文件上传子组件触发的重绘事件
806 |     uploadPaintFlow (data) {
807 |       try {
808 |         console.log(JSON.parse(data))
809 |         this.currentData = JSON.parse(data)
810 |         this.dataReload(this.currentData)
811 |       } catch (error) {
812 |         console.log("出错啦", error)
813 |       }
814 |     },
815 |     // 下载数据
816 |     downloadData () {
817 |       this.$confirm('确定要下载该流程数据吗？', '提示', {
818 |         confirmButtonText: '确定',
819 |         cancelButtonText: '取消',
820 |         type: 'warning',
821 |         closeOnClickModal: false
822 |       }).then(() => {
823 |         var datastr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(this.data, null, '\t'));
824 |         var downloadAnchorNode = document.createElement('a')
825 |         downloadAnchorNode.setAttribute("href", datastr);
826 |         downloadAnchorNode.setAttribute("download", 'data.json')
827 |         downloadAnchorNode.click();
828 |         downloadAnchorNode.remove();
829 |         this.$message.success("正在下载中,请稍后...")
830 |       }).catch(() => {
831 |       })
832 |     },
833 |   }
834 | }
835 | </script>
836 | <style lang="less">
837 | /*顶部工具栏*/
838 | .ee-tooltar {
839 |   padding-left: 30px;
840 |   box-sizing: border-box;
841 |   height: 45px;
842 |   line-height: 40px;
843 |   z-index: 3;
844 |   background-color: #fff;
845 |   border-bottom: 1px solid #dadce0;
846 | }
847 | 
848 | /* 缩放工具 */
849 | .zoom-tool {
850 |   opacity: 0.3;
851 |   position: fixed;
852 |   left: 270px;
853 |   /* top: 74px; */
854 |   bottom: 60px;
855 |   z-index: 1;
856 |   .enlarged-btn {
857 |     position: absolute;
858 |     top: -30px;
859 |     left: 50%;
860 |     transform: translateX(-50%);
861 |   }
862 |   .shrink-btn {
863 |     position: absolute;
864 |     bottom: -30px;
865 |     left: 50%;
866 |     transform: translateX(-50%);
867 |   }
868 | }
869 | .zoom-tool:hover {
870 |   opacity: 1;
871 | }
872 | .zoom-tool::before {
873 |   content: "";
874 | }
875 | .jtk-overlay {
876 |   cursor: pointer;
877 |   color: #4a4a4a;
878 | }
879 | 
880 | .node-form-active {
881 |   transform: translateX(100%);
882 |   /* width: 0 !important; */
883 | }
884 | .tooltar-center {
885 |   position: absolute;
886 |   left: 50%;
887 |   top: 50%;
888 |   transform: translate(-50%, -50%);
889 | }
890 | 
891 | /* 中间画布的容器*/
892 | .center-container {
893 |   flex: 1;
894 |   background-color: #fff;
895 |   overflow: hidden;
896 |   /*画布容器*/
897 |   .container {
898 |     height: 100%;
899 |   }
900 |   .all-nodes {
901 |     width: 100%;
902 |     height: 100%;
903 |   }
904 |   #eeContainer {
905 |     position: relative;
906 |     overflow: hidden;
907 |     flex: 1;
908 |     transform-origin: 0% 0%;
909 |   }
910 | }
911 | // 背景网格
912 | .background-grid {
913 |   // background-color: #fff !important;
914 |   background-image: linear-gradient(#ddd 1px, transparent 0),
915 |     linear-gradient(90deg, #ddd 1px, transparent 0),
916 |     linear-gradient(#f6f6f6 1px, transparent 0),
917 |     linear-gradient(90deg, #f6f6f6 1px, transparent 0);
918 |   background-size: 75px 75px, 75px 75px, 15px 15px, 15px 15px;
919 | }
920 | #center-container::-webkit-scrollbar,
921 | #eeContainer::-webkit-scrollbar,
922 | #editor::-webkit-scrollbar {
923 |   display: none;
924 | }
925 | 
926 | /* 节点详情部分 */
927 | .node-detail {
928 |   width: 300px;
929 |   height: 100%;
930 |   border: 1px solid #dce3e8;
931 |   background-color: #fbfbfb;
932 |   transition: all 0.3s linear !important;
933 |   position: fixed;
934 |   // position: absolute;
935 |   right: 0;
936 |   background-color: #fff;
937 |   /* box-sizing: border-box; */
938 |   .ee-node-form-header {
939 |     text-align: center;
940 |   }
941 | }
942 | .notify-tip {
943 |   margin-right: 300px;
944 | }
945 | // .imagebackground {
946 | //   background-color: #fff;
947 | //   background-image: linear-gradient(#eee 1px, transparent 0),
948 | //     linear-gradient(90deg, #eee 1px, transparent 0),
949 | //     linear-gradient(#f5f5f5 1px, transparent 0),
950 | //     linear-gradient(90deg, #f5f5f5 1px, transparent 0);
951 | //   background-size: 75px 75px, 75px 75px, 15px 15px, 15px 15px;
952 | // }
953 | </style>


--------------------------------------------------------------------------------
/src/components/imageLoad.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <el-dialog
 3 |     title="流程图"
 4 |     :visible.sync="dialogVisible"
 5 |     width="60%"
 6 |     class="image-load-dialog"
 7 |     top="10vh"
 8 |     center
 9 |     @close="closeImageLoad"
10 |   >
11 |     <div
12 |       class="load-image-box"
13 |       :class="{'show-grid':isShowGrid}"
14 |       v-loading="loading"
15 |       element-loading-text="流程图生成中"
16 |     >
17 |       <img :src="imgUrl" alt class="load-image" v-if="!loading" />
18 |     </div>
19 |     <span slot="footer" class="dialog-footer">
20 |       <el-button @click="dialogVisible = false">取 消</el-button>
21 |       <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
22 |     </span>
23 |   </el-dialog>
24 | </template>
25 | 
26 | <script>
27 | export default {
28 |   props: {
29 |     imgUrl: String,
30 |     isShowGrid: Boolean
31 |   },
32 |   mounted () {
33 |     this.dialogVisible = true
34 |     setTimeout(() => { }, 1000)
35 |   },
36 |   data () {
37 |     return {
38 |       dialogVisible: false,
39 |       loading: true
40 |     }
41 |   },
42 |   components: {
43 | 
44 |   },
45 |   methods: {
46 |     closeImageLoad () {
47 |       this.dialogVisible = false
48 |       this.$parent.imageLoadVisible = false
49 |       this.isloading = false
50 |     }
51 |   }
52 | }
53 | </script>
54 | <style lang="less">
55 | .image-load-dialog {
56 |   .load-image-box {
57 |     width: 1102px;
58 |     height: 580px;
59 |     .load-image {
60 |       width: 100%;
61 |       height: 100%;
62 |       // overflow: hidden;
63 |       display: block;
64 |       transition: all 0.5s linear;
65 |     }
66 |     .load-image:hover {
67 |       box-shadow: 0px 0px 10px 4px #dddddd;
68 |     }
69 |     .el-loading-mask {
70 |       background-color: rgba(255, 255, 255, 1);
71 |     }
72 |   }
73 |   .show-grid {
74 |     background-color: #fff;
75 |     background-image: linear-gradient(#eee 1px, transparent 0),
76 |       linear-gradient(90deg, #eee 1px, transparent 0),
77 |       linear-gradient(#f5f5f5 1px, transparent 0),
78 |       linear-gradient(90deg, #f5f5f5 1px, transparent 0);
79 |     background-size: 75px 75px, 75px 75px, 15px 15px, 15px 15px;
80 |   }
81 | }
82 | </style>


--------------------------------------------------------------------------------
/src/components/info.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <el-dialog title="流程数据信息" :visible.sync="dialogVisible" width="70%">
 3 |     <!--一个高亮显示的插件-->
 4 |     <!-- <codemirror :value="flowJsonData" :options="options" class="code"></codemirror> -->
 5 |     <json-viewer :value="data" :expand-depth="5" copyable boxed sort class="code"></json-viewer>
 6 |   </el-dialog>
 7 | </template>
 8 | 
 9 | <script>
10 | // import 'codemirror/lib/codemirror.css'
11 | // import { codemirror } from 'vue-codemirror'
12 | // require("codemirror/mode/javascript/javascript.js")
13 | import JsonViewer from 'vue-json-viewer'
14 | import jsyaml from "js-yaml"
15 | export default {
16 |   props: {
17 |     data: Object,
18 |   },
19 |   mounted () {
20 |     console.log(this.data)
21 |     // console.log(this.jsonToYaml(this.data))
22 |   },
23 |   data () {
24 |     return {
25 |       dialogVisible: false,
26 |       flowJsonData: {},
27 |       // options: {
28 |       //   mode: { name: "javascript", json: true },
29 |       //   lineNumbers: true
30 |       // }
31 |     }
32 |   },
33 |   components: {
34 |     // codemirror,
35 |     JsonViewer
36 |   },
37 |   methods: {
38 |     init () {
39 |       this.dialogVisible = true
40 |       // this.flowJsonData = JSON.stringify(this.data, null, 4).toString()
41 |     },
42 |     jsonToYaml (data) {
43 |       // json转换为yaml
44 |       return jsyaml.safeDump(data)
45 |     },
46 |     yamlToJson (data) {
47 | 
48 |       // yaml转换为json
49 |       return jsyaml.safeLoad(data)
50 |     }
51 |   }
52 | }
53 | </script>
54 | 


--------------------------------------------------------------------------------
/src/components/node.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div
 3 |     ref="node"
 4 |     :style="nodeContainerStyle"
 5 |     @click="clickNode"
 6 |     @mouseup="changeNodeSite"
 7 |     :class="nodeContainerClass"
 8 |   >
 9 |     <!-- 最左侧的那条竖线 -->
10 |     <div class="ee-node-left"></div>
11 |     <!-- 节点类型的图标 -->
12 |     <div class="ee-node-left-ico flow-node-drag">
13 |       <i :class="nodeIcoClass"></i>
14 |     </div>
15 |     <!-- 节点名称 -->
16 |     <div class="ee-node-text" :show-overflow-tooltip="true">{{node.name}}</div>
17 |     <!-- 节点状态图标 -->
18 |     <div class="ee-node-right-ico">
19 |       <i class="el-icon-circle-check el-node-state-success" v-show="node.state === 'success'"></i>
20 |       <i class="el-icon-circle-close el-node-state-error" v-show="node.state === 'error'"></i>
21 |       <i class="el-icon-warning-outline el-node-state-warning" v-show="node.state === 'warning'"></i>
22 |       <i class="el-icon-loading el-node-state-running" v-show="node.state === 'running'"></i>
23 |     </div>
24 |   </div>
25 | </template>
26 | 
27 | <script>
28 | export default {
29 |   props: {
30 |     node: Object,
31 |     activeElement: Object
32 |   },
33 |   data () {
34 |     return {}
35 |   },
36 |   computed: {
37 |     nodeContainerClass () {
38 |       return {
39 |         // 设置节点容器的样式
40 |         'ee-node-container': true,
41 |         // 被点击的节点样式
42 |         'ee-node-active': this.activeElement.type == 'node' ? this.activeElement.nodeId === this.node.id : false
43 |       }
44 |     },
45 |     // 节点容器样式(节点的位置)
46 |     nodeContainerStyle () {
47 |       return {
48 |         top: this.node.top,
49 |         left: this.node.left
50 |       }
51 |     },
52 |     nodeIcoClass () {
53 |       var nodeIcoClass = {}
54 |       // 确认节点的图标,使用类名进行设置(我们也可以自定义iconfont文件,或者使用不同类名添加不同背景图片)
55 |       nodeIcoClass[this.node.ico] = true
56 |       // 添加该class可以推拽连线出来
57 |       nodeIcoClass['flow-node-drag'] = true
58 |       return nodeIcoClass
59 |     }
60 |   },
61 |   methods: {
62 |     // 点击节点
63 |     clickNode () {
64 |       this.$emit('clickNode', this.node.id)
65 |       this.$parent.currentNode = this.node
66 |     },
67 |     // 鼠标移动后抬起
68 |     changeNodeSite () {
69 |       // 避免抖动
70 |       if (this.node.left == this.$refs.node.style.left && this.node.top == this.$refs.node.style.top) {
71 |         return;
72 |       }
73 |       this.$emit('changeNodeSite', {
74 |         nodeId: this.node.id,
75 |         left: this.$refs.node.style.left,
76 |         top: this.$refs.node.style.top,
77 |       })
78 |     }
79 |   }
80 | }
81 | </script>
82 | 


--------------------------------------------------------------------------------
/src/components/node_detail.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <el-dialog
 3 |     :title="currentNodeDetail.name"
 4 |     @closed="handleclose"
 5 |     center
 6 |     :visible.sync="nodeDialogVisible"
 7 |     width="50%"
 8 |   >
 9 |     <div id="detailContainer" ref="detailContainer" class="nodeDetailInfo">
10 |       <div id="detailbox">
11 |         <span
12 |           v-for="(item, index) in currentNodeDetail.nodeList"
13 |           :id="item.id"
14 |           :key="index"
15 |           :ref="item.id"
16 |           :style="{left:item.left,top:item.top}"
17 |           class="sub-node"
18 |         >
19 |           <i :class="item.ico" style="color:#409eff"></i>
20 |           <div>{{item.name}}</div>
21 |         </span>
22 |       </div>
23 |     </div>
24 |     <span slot="footer" class="dialog-footer">
25 |       <el-button type="primary" @click="handleclose">确 定</el-button>
26 |     </span>
27 |   </el-dialog>
28 | </template>
29 | <script>
30 | import { node_data } from "../data/detail_data"
31 | export default {
32 |   props: {
33 |     currentNode: Object,
34 |   },
35 |   data () {
36 |     return {
37 |       nodeDialogVisible: false,
38 |       currentNodeDetail: {}
39 |     }
40 |   },
41 |   mounted () {
42 |     this.currentNodeDetail = node_data
43 |     this.nodeDialogVisible = true
44 |   },
45 |   methods: {
46 |     handleclose () {
47 |       console.log("关闭节点详情")
48 |       this.nodeDialogVisible = false
49 |       this.$parent.nodeDetailVisible = false
50 |     }
51 |   },
52 | }
53 | </script>
54 | <style lang="less">
55 | .nodeDetailInfo {
56 |   position: relative;
57 |   margin: 0 auto;
58 |   width: 99%;
59 |   height: 376px;
60 |   background-image: linear-gradient(#eee 1px, transparent 0),
61 |     linear-gradient(90deg, #eee 1px, transparent 0),
62 |     linear-gradient(#f5f5f5 1px, transparent 0),
63 |     linear-gradient(90deg, #f5f5f5 1px, transparent 0);
64 |   background-size: 75px 75px, 75px 75px, 15px 15px, 15px 15px;
65 | }
66 | .sub-node {
67 |   // position: absolute;
68 |   // top: 50px;
69 |   float: left;
70 |   width: 50px;
71 |   height: 50px;
72 |   // border: red 1px solid;
73 |   text-align: center;
74 |   margin: 20px;
75 |   i {
76 |     display: inline-block;
77 |     font-size: 30px;
78 |     margin: 20px 0px;
79 |   }
80 | }
81 | #detailbox {
82 |   position: absolute;
83 |   left: 55%;
84 |   top: 50%;
85 |   width: 80%;
86 |   height: 80%;
87 |   transform: translate(-50%, -50%);
88 |   margin: 0 auto;
89 |   display: inline-block;
90 | }
91 | </style>


--------------------------------------------------------------------------------
/src/components/node_form.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <div class="ee-node-form">
  4 |       <div class="ee-node-form-header" v-if="type === 'line'">连线属性</div>
  5 |       <div class="ee-node-form-header" v-if="type === 'node'">节点属性</div>
  6 |       <div class="ee-node-form-body">
  7 |         <el-form :model="node" ref="dataForm" label-width="80px" v-if="type === 'node'">
  8 |           <el-form-item label="类型">
  9 |             <el-input v-model="node.type" :disabled="true"></el-input>
 10 |           </el-form-item>
 11 |           <el-form-item label="left坐标">
 12 |             <el-input disabled v-model="node.left"></el-input>
 13 |           </el-form-item>
 14 |           <el-form-item label="top坐标">
 15 |             <el-input disabled v-model="node.top"></el-input>
 16 |           </el-form-item>
 17 |           <el-form-item label="节点名称">
 18 |             <el-input v-model="node.name"></el-input>
 19 |           </el-form-item>
 20 |           <el-form-item label="ico图标">
 21 |             <el-input v-model="node.ico"></el-input>
 22 |           </el-form-item>
 23 |           <el-form-item label="节点状态">
 24 |             <el-input v-model="node.state"></el-input>
 25 |           </el-form-item>
 26 |           <el-form-item class="nodeFormButton">
 27 |             <el-button icon="el-icon-connection" class="nodeInfo" @click="showNodeInfo">节点详情</el-button>
 28 |             <el-button type="primary" icon="el-icon-check" class="save" @click="save">保存</el-button>
 29 |           </el-form-item>
 30 |         </el-form>
 31 | 
 32 |         <el-form :model="line" ref="dataForm" label-width="80px" v-if="type === 'line'">
 33 |           <el-form-item label="条件">
 34 |             <el-input v-model="line.label"></el-input>
 35 |           </el-form-item>
 36 |           <!-- 选择节点连接线样式 -->
 37 |           <!-- <el-form-item label="连线样式">
 38 |             <el-select @change="selectLineStyle" v-model="line.type">
 39 |               <el-option
 40 |                 v-for="item in options"
 41 |                 :key="item.value"
 42 |                 :label="item.label"
 43 |                 :value="item.value"
 44 |               ></el-option>
 45 |             </el-select>
 46 |           </el-form-item>-->
 47 |           <el-form-item class="nodeFormButton">
 48 |             <el-button type="primary" icon="el-icon-check" class="saveLine" @click="saveLine">保存</el-button>
 49 |           </el-form-item>
 50 |         </el-form>
 51 |       </div>
 52 |       <div class="el-node-form-tag" @click="showNodeForm">
 53 |         <i class="el-icon-arrow-right" v-if="isShowNodeForm"></i>
 54 |         <i v-else class="el-icon-arrow-left"></i>
 55 |       </div>
 56 |     </div>
 57 |   </div>
 58 | </template>
 59 | 
 60 | <script>
 61 | import { cloneDeep } from 'lodash'
 62 | export default {
 63 |   data () {
 64 |     return {
 65 |       visible: true,
 66 |       // node 或 line
 67 |       type: 'node',
 68 |       node: {},
 69 |       line: { label: "", from: "", to: "" },
 70 |       data: {},
 71 |       isShowNodeForm: true,
 72 |       isEmpty: false,
 73 |       // 连接线的样式值
 74 |       lineValue: '',
 75 |       // 连接线的样式选项
 76 |       options: [{
 77 |         value: '["StateMachine", { curviness: 50 }]',
 78 |         label: 'StateMachine'
 79 |       }, {
 80 |         value: '["Flowchart", { curviness: 50 }]',
 81 |         label: 'Flowchart'
 82 |       }, {
 83 |         value: '["Bezier", { stub: [0, 0], gap: 1, cornerRadius: 50, alwaysRespectStubs: true }]',
 84 |         label: 'Bezier'
 85 |       }, {
 86 |         value: '["Straight", { curviness: 50 }]',
 87 |         label: 'Straight'
 88 |       }],
 89 | 
 90 |     }
 91 |   },
 92 |   methods: {
 93 |     // 设置连接线的风格
 94 |     selectLineStyle () {
 95 |       // this.jsplumbSetting.Connector = eval(this.line.type)
 96 |       // this.dataReload(this.currentData)
 97 |       // console.log(this.data)
 98 |     },
 99 |     /**
100 |      * 表单修改，这里可以根据传入的ID进行业务信息获取
101 |      * @param data
102 |      * @param id
103 |      */
104 |     nodeInit (data, id) {
105 |       this.type = 'node'
106 |       // 将父组件中的所有节点数据进行浅拷贝,实现在子组件中实时修改节点数据
107 |       this.data = data
108 |       data.nodeList.filter((node) => {
109 |         if (node.id === id) {
110 |           this.node = cloneDeep(node)
111 |         }
112 |       })
113 |     },
114 |     lineInit (line) {
115 |       this.type = 'line'
116 |       if (this.isEmpty) {
117 |         line.label = ''
118 |       }
119 |       this.line = line
120 |       console.log(line)
121 |     },
122 |     // 修改连线
123 |     saveLine () {
124 |       console.log(this.line)
125 |       if (this.line.label === "") {
126 |         this.isEmpty = true
127 |       } else {
128 |         this.isEmpty = false
129 |       }
130 |       this.$emit('setLineLabel', this.line.from, this.line.to, this.line.label, this.line.type)
131 |     },
132 |     save () {
133 |       this.data.nodeList.filter((node) => {
134 |         if (node.id === this.node.id) {
135 |           node.name = this.node.name
136 |           node.left = this.node.left
137 |           node.top = this.node.top
138 |           node.icon = this.node.icon
139 |           node.state = this.node.state
140 |           this.$emit('repaintEverything')
141 |         }
142 |       })
143 |     },
144 |     showNodeInfo () {
145 |       if (this.node.id) {
146 |         this.$parent.nodeDetailVisible = true
147 |       } else {
148 |         this.$message.error("请先选择节点")
149 |       }
150 | 
151 |     },
152 |     showNodeForm () {
153 |       this.$emit("changeNodeForm", this.isShowNodeForm)
154 |       setTimeout(() => {
155 |         this.isShowNodeForm = !this.isShowNodeForm
156 |       }, 300)
157 |     }
158 |   }
159 | }
160 | </script>
161 | 
162 | <style lang="less">
163 | .el-node-form-tag {
164 |   position: absolute;
165 |   top: 43%;
166 |   margin-left: -10px;
167 |   height: 50px;
168 |   font-size: 10px;
169 |   width: 10px;
170 |   background-color: #409eff;
171 |   display: flex;
172 |   border-radius: 10px 0 0 10px;
173 |   color: #fff;
174 |   justify-content: center;
175 |   align-items: center;
176 | }
177 | 
178 | .nodeFormButton {
179 |   position: relative;
180 |   float: left;
181 |   .el-form-item__content {
182 |     margin-left: 40px !important;
183 |   }
184 | }
185 | .nodeFormButton .nodeInfo {
186 |   position: absolute;
187 |   left: 40px;
188 | }
189 | .nodeFormButton .save {
190 |   position: absolute;
191 |   left: 150px;
192 | }
193 | .nodeFormButton .saveLine {
194 |   position: absolute;
195 |   left: 50%;
196 |   transform: translateX(100%);
197 | }
198 | </style>
199 | 


--------------------------------------------------------------------------------
/src/components/node_menu.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="flow-menu" ref="tool">
  3 |     <!-- 使用原生html结构 -->
  4 |     <!-- <div v-for="menu  in  menuList" :key="menu.id">
  5 |       <span class="ee-node-pmenu" @click="menu.open = !menu.open">
  6 |         <i :class="{'el-icon-caret-bottom': menu.open,'el-icon-caret-right': !menu.open}"></i>
  7 |         &nbsp;{{menu.name}}
  8 |       </span>
  9 |       <ul v-show="menu.open" class="ee-node-menu-ul">
 10 |         <draggable @end="end" @start="move" v-model="menu.children" :options="draggableOptions">
 11 |           <li
 12 |             v-for="subMenu in menu.children"
 13 |             class="ee-node-menu-li"
 14 |             :key="subMenu.id"
 15 |             :type="subMenu.type"
 16 |           >
 17 |             <i :class="subMenu.ico"></i>
 18 |             {{subMenu.name}}
 19 |           </li>
 20 |         </draggable>
 21 |       </ul>
 22 |     </div>-->
 23 |     <!-- 使用element导航菜单 -->
 24 |     <el-menu
 25 |       class="el-menu-vertical-demo"
 26 |       @open="handleOpen"
 27 |       @close="handleClose"
 28 |       :default-openeds="['1','2']"
 29 |     >
 30 |       <el-submenu :index="menu.id" v-for="menu  in  menuList" :key="menu.id">
 31 |         <template slot="title">
 32 |           <i class="el-icon-s-help"></i>
 33 |           <span>{{menu.name}}</span>
 34 |         </template>
 35 |         <el-menu-item-group>
 36 |           <draggable @end="end" @start="move" v-model="menu.children" :options="draggableOptions">
 37 |             <el-menu-item
 38 |               :index="subMenu.level"
 39 |               v-for="subMenu in menu.children"
 40 |               :key="subMenu.id"
 41 |               :type="subMenu.type"
 42 |             >
 43 |               <i :class="subMenu.ico" style="color:#1879ff"></i>
 44 |               {{subMenu.name}}
 45 |             </el-menu-item>
 46 |           </draggable>
 47 |         </el-menu-item-group>
 48 |       </el-submenu>
 49 |     </el-menu>
 50 |   </div>
 51 | </template>
 52 | <script>
 53 | import draggable from 'vuedraggable'
 54 | 
 55 | var mousePosition = {
 56 |   left: -1,
 57 |   top: -1
 58 | }
 59 | 
 60 | export default {
 61 |   data () {
 62 |     return {
 63 |       activeNames: '1',
 64 |       // draggable配置参数参考 https://www.cnblogs.com/weixin186/p/10108679.html
 65 |       draggableOptions: {
 66 |         preventOnFilter: false,
 67 |         //定义是否列表单元是否可以在列表容器内进行拖拽排序
 68 |         sort: false,
 69 |         disabled: false,
 70 |         // 当拖动列表单元时会生成一个副本作为影子单元来模拟被拖动单元排序的情况，此配置项就是来给这个影子单元添加一个class，我们可以通过这种方式来给影子元素进行编辑样式
 71 |         ghostClass: 'tt',
 72 |         chosenClass: 'choosen',//当选中列表单元时会给该单元增加一个class
 73 |         // 不使用H5原生的配置
 74 |         forceFallback: true,
 75 |         // 拖放过程中鼠标附着单元的样式
 76 |         fallbackClass: 'flow-node-draggable'
 77 |       },
 78 |       // 默认打开的左侧菜单的id
 79 |       defaultOpeneds: ['1', '2'],
 80 |       menuList: [
 81 |         {
 82 |           id: '1',
 83 |           type: 'group',
 84 |           name: '接口节点',
 85 |           ico: 'el-icon-video-play',
 86 |           // open: true,
 87 |           // 注意type值要唯一!!!!
 88 |           children: [
 89 |             {
 90 |               id: '11',
 91 |               level: "1-1",
 92 |               type: 'timer',
 93 |               name: '数据接入',
 94 |               ico: 'el-icon-time',
 95 |               state: "success",
 96 |               // 自定义覆盖样式
 97 |               style: {
 98 |                 'backgroundColor': 'red'
 99 |               }
100 |             }, {
101 |               id: '12',
102 |               level: "1-2",
103 |               type: 'task1',
104 |               name: '接口调用',
105 |               ico: 'el-icon-odometer',
106 |               state: "success",
107 |               // 自定义覆盖样式
108 |               style: {}
109 |             }, {
110 |               id: '13',
111 |               level: "1-3",
112 |               type: 'task2',
113 |               name: '接口调试',
114 |               ico: 'el-icon-c-scale-to-original',
115 |               state: "success",
116 |               // 自定义覆盖样式
117 |               style: {}
118 |             }, {
119 |               id: '14',
120 |               level: "1-4",
121 |               type: 'timer2',
122 |               name: '接口配置',
123 |               ico: 'el-icon-files',
124 |               state: "success",
125 |               // 自定义覆盖样式
126 |               style: {}
127 |             }
128 |           ]
129 |         },
130 |         {
131 |           id: '2',
132 |           type: 'group',
133 |           name: '工具节点',
134 |           ico: 'el-icon-video-pause',
135 |           // open: true,
136 |           children: [
137 |             {
138 |               id: '21',
139 |               level: "2-1",
140 |               type: 'end',
141 |               name: '流程结束',
142 |               ico: 'el-icon-caret-right',
143 |               state: "success",
144 |               // 自定义覆盖样式
145 |               style: {}
146 |             }, {
147 |               id: '22',
148 |               level: "2-2",
149 |               type: 'over',
150 |               name: '数据重置',
151 |               ico: 'el-icon-shopping-cart-full',
152 |               state: "success",
153 |               // 自定义覆盖样式
154 |               style: {}
155 |             }, {
156 |               id: '23',
157 |               level: "2-3",
158 |               type: 'clean',
159 |               name: '数据清理',
160 |               ico: 'el-icon-takeaway-box',
161 |               state: "success",
162 |               // 自定义覆盖样式
163 |               style: {}
164 |             }, {
165 |               id: '24',
166 |               level: "2-4",
167 |               type: 'middle',
168 |               name: '中间件',
169 |               ico: 'el-icon-mobile',
170 |               state: "success",
171 |               // 自定义覆盖样式
172 |               style: {}
173 |             }, {
174 |               id: '25',
175 |               level: "2-5",
176 |               type: 'system',
177 |               name: '系统配置',
178 |               ico: 'el-icon-coordinate',
179 |               state: "success",
180 |               // 自定义覆盖样式
181 |               style: {}
182 |             }
183 |           ]
184 |         }
185 |       ],
186 |       nodeMenu: {}
187 |     }
188 |   },
189 |   components: {
190 |     draggable
191 |   },
192 |   created () {
193 |     /**
194 |      * 以下是为了解决在火狐浏览器上推拽时弹出tab页到搜索问题
195 |      * @param event
196 |      */
197 |     if (this.isFirefox()) {
198 |       document.body.ondrop = function (event) {
199 |         // 解决火狐浏览器无法获取鼠标拖拽结束的坐标问题
200 |         mousePosition.left = event.layerX
201 |         mousePosition.top = event.clientY - 50
202 |         event.preventDefault();
203 |         event.stopPropagation();
204 |       }
205 |     }
206 |   },
207 |   methods: {
208 |     handleOpen (key, keyPath) {
209 |       console.log(key, keyPath);
210 |     },
211 |     handleClose (key, keyPath) {
212 |       console.log(key, keyPath);
213 |     },
214 |     // 根据类型获取左侧菜单被拖动的节点
215 |     getMenuByType (type) {
216 |       for (let i = 0; i < this.menuList.length; i++) {
217 |         let children = this.menuList[i].children;
218 |         for (let j = 0; j < children.length; j++) {
219 |           if (children[j].type === type) {
220 |             return children[j]
221 |           }
222 |         }
223 |       }
224 |     },
225 |     // 拖拽开始时触发
226 |     move (evt) {
227 |       var type = evt.item.attributes.type.nodeValue
228 |       // console.log(type)
229 |       this.nodeMenu = this.getMenuByType(type)
230 |       console.log(this.nodeMenu)
231 |     },
232 |     // 拖拽结束时触发
233 |     end (evt) {
234 |       this.$emit('addNode', evt, this.nodeMenu, mousePosition)
235 |     },
236 |     // 是否是火狐浏览器
237 |     isFirefox () {
238 |       var userAgent = navigator.userAgent
239 |       if (userAgent.indexOf("Firefox") > -1) {
240 |         return true
241 |       }
242 |       return false
243 |     }
244 |   }
245 | }
246 | </script>
247 | <style lang="less">
248 | .choosen {
249 |   border: 1px solid #e0e3e7;
250 |   border-radius: 5px;
251 |   background-color: #fff;
252 | }
253 | </style>


--------------------------------------------------------------------------------
/src/components/uploadData.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <el-dialog title="数据上传" :visible.sync="centerDialogVisible" width="70%" center>
  3 |     <el-upload
  4 |       class="upload-box"
  5 |       drag
  6 |       accept=".yaml, .json, .js"
  7 |       action
  8 |       :file-list="uploadFiles"
  9 |       :on-change="fileChange"
 10 |       :auto-upload="false"
 11 |       :limit="1"
 12 |       :on-exceed="exceedFile"
 13 |     >
 14 |       <i class="el-icon-upload"></i>
 15 |       <div class="el-upload__text">
 16 |         将文件拖到此处，或
 17 |         <em>点击上传</em>
 18 |         <div slot="tip" class="el-upload__tip">
 19 |           只能上传
 20 |           <em>yaml / json</em> 文件，且最大文件数量不超过
 21 |           <em>1</em> 个
 22 |         </div>
 23 |       </div>
 24 |     </el-upload>
 25 |     <!--codemirror插件-->
 26 |     <codemirror
 27 |       :value="currentNodeData"
 28 |       v-model="currentNodeData"
 29 |       :options="options"
 30 |       class="codemirror"
 31 |       height="500px"
 32 |     ></codemirror>
 33 |     <span slot="footer" class="dialog-footer">
 34 |       <el-button @click="cancelUpload">取 消</el-button>
 35 |       <el-button type="primary" @click="confirmUpload">确 定</el-button>
 36 |     </span>
 37 |   </el-dialog>
 38 | </template>
 39 | <script>
 40 | import 'codemirror/lib/codemirror.css'
 41 | import { codemirror } from 'vue-codemirror'
 42 | // 导入主题样式
 43 | import 'codemirror/theme/mdn-like.css'
 44 | // 导入数据类型识别文件
 45 | import "codemirror/mode/yaml/yaml.js"
 46 | import "codemirror/mode/javascript/javascript.js"
 47 | import jsyaml from "js-yaml"
 48 | export default {
 49 |   data () {
 50 |     return {
 51 |       uploadFiles: [],
 52 |       centerDialogVisible: false,
 53 |       currentNodeData: "",
 54 |       // codemirror配置项
 55 |       options: {
 56 |         tabSize: 4,
 57 |         styleActiveLine: true,
 58 |         matchBrackets: true,
 59 |         lineNumbers: true,
 60 |         lineWrapping: false,
 61 |         line: true,
 62 |         mode: 'text/yaml',
 63 |         theme: 'mdn-like'
 64 |       }
 65 |     }
 66 |   },
 67 |   components: {
 68 |     codemirror
 69 |   },
 70 |   watch: {
 71 |     currentNodeData: {
 72 |       handler (newvalue) {
 73 |         this.currentNodeData = newvalue
 74 |       },
 75 |       immediate: true,
 76 |       deep: true
 77 |     }
 78 |   },
 79 |   mounted () {
 80 |     this.centerDialogVisible = true
 81 |   },
 82 |   methods: {
 83 |     confirmUpload () {
 84 |       // 触发父组件重绘函数
 85 |       this.$emit("uploadPaintFlow", this.currentNodeData)
 86 |       this.$message.success("渲染成功")
 87 |       this.centerDialogVisible = false
 88 |       this.$parent.uploadDataVisible = false
 89 |     },
 90 |     cancelUpload () {
 91 |       console.log(this.currentNodeData)
 92 |       this.centerDialogVisible = false
 93 |       this.$parent.uploadDataVisible = false
 94 |       this.currentNodeData = ""
 95 |     },
 96 |     jsonToYaml (data) {
 97 |       // json转换为yaml
 98 |       return jsyaml.safeDump(data)
 99 |     },
100 |     yamlToJson (data) {
101 |       // yaml转换为json
102 |       return jsyaml.safeLoad(data)
103 |     },
104 |     tirggerFile () {
105 | 
106 |     },
107 |     fileChange (file) {
108 |       if (file) {
109 |         let reader = new FileReader()
110 |         reader.readAsText(file.raw) //注意读取中文的是用这个编码，不是utf-8
111 |         reader.onload = () => {
112 |           this.$message.success("文件上传成功")
113 |           var result = reader.result;
114 |           // 获取文件类型
115 |           var fileType = file.name.split(".").pop()
116 |           if (fileType == 'yaml') {
117 |             result = JSON.stringify(this.yamlToJson(result), null, "\t");
118 |           }
119 |           this.currentNodeData = result
120 |         }
121 |       }
122 |     },
123 |     exceedFile () {
124 |       this.$message.error("超出文件可上传数量,请先清除文件")
125 |     }
126 |   },
127 | }
128 | </script>
129 | <style lang="less">
130 | .upload-box {
131 |   .el-upload {
132 |     display: block;
133 |     width: 360px;
134 |     margin: 0 auto;
135 |   }
136 | }
137 | .codemirror {
138 |   margin-top: 40px;
139 |   border-style: solid;
140 |   border-color: #578dbf;
141 |   border-width: 2px 2px 2px 0;
142 |   position: relative;
143 | }
144 | .codemirror::before {
145 |   position: absolute;
146 |   font-size: 17px;
147 |   top: -30px;
148 |   left: 10px;
149 |   content: "数据预览 :";
150 | }
151 | </style>


--------------------------------------------------------------------------------
/src/components/utils.js:
--------------------------------------------------------------------------------
 1 | // 是否具有该线
 2 | export function hasLine (data, from, to) {
 3 |   for (let i = 0; i < data.lineList.length; i++) {
 4 |     let line = data.lineList[i]
 5 |     if (line.from === from && line.to === to) {
 6 |       return true
 7 |     }
 8 |   }
 9 |   return false
10 | }
11 | 
12 | // 是否含有相反的线
13 | export function hashOppositeLine (data, from, to) {
14 |   return hasLine(data, to, from)
15 | }
16 | 
17 | // 获取连线
18 | export function getConnector (jsp, from, to) {
19 |   let connection = jsp.getConnections({
20 |     source: from,
21 |     target: to
22 |   })[0]
23 |   return connection
24 | }
25 | 
26 | // 获取唯一标识
27 | export function uuid () {
28 |   return Math.random().toString(36).substr(3, 10)
29 | }


--------------------------------------------------------------------------------
/src/data/data_A.js:
--------------------------------------------------------------------------------
 1 | 
 2 | export var data_A = {
 3 |   "name": "流程A",
 4 |   "nodeList": [
 5 |     {
 6 |       "id": "nodeA",
 7 |       "name": "流程A-节点A",
 8 |       "type": "task",
 9 |       "left": "26px",
10 |       "top": "161px",
11 |       "ico": "icon-daqilitiguancex iconfont",
12 |       "state": "warning"
13 |     },
14 |     {
15 |       "id": "nodeB",
16 |       "name": "流程A-节点B",
17 |       "type": "task",
18 |       "left": "340px",
19 |       "top": "161px",
20 |       "ico": "icon-VE iconfont",
21 |       "state": "warning"
22 |     },
23 |     {
24 |       "id": "nodeC",
25 |       "name": "流程A-节点C",
26 |       "type": "task",
27 |       "left": "739px",
28 |       "top": "161px",
29 |       "ico": "icon-rongqi iconfont",
30 |       "state": "warning"
31 |     }
32 |   ],
33 |   "lineList": [{
34 |     "from": "nodeA",
35 |     "to": "nodeB",
36 |     "label": "条件AB",
37 |     "connector": "Bezier",
38 |     // "paintStyle": { "strokeWidth": 2, "stroke": "#1879FF" }
39 |   }, {
40 |     "from": "nodeB",
41 |     "to": "nodeC"
42 |   }]
43 | }
44 | 
45 | 


--------------------------------------------------------------------------------
/src/data/data_A.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "流程A",
 3 |   "nodeList": [
 4 |     {
 5 |       "id": "nodeA",
 6 |       "name": "流程A-节点A",
 7 |       "type": "task",
 8 |       "left": "26px",
 9 |       "top": "161px",
10 |       "ico": "icon-daqilitiguancex iconfont",
11 |       "state": "warning"
12 |     },
13 |     {
14 |       "id": "nodeB",
15 |       "name": "流程A-节点B",
16 |       "type": "task",
17 |       "left": "340px",
18 |       "top": "161px",
19 |       "ico": "icon-VE iconfont",
20 |       "state": "warning"
21 |     },
22 |     {
23 |       "id": "nodeC",
24 |       "name": "流程A-节点C",
25 |       "type": "task",
26 |       "left": "739px",
27 |       "top": "161px",
28 |       "ico": "icon-rongqi iconfont",
29 |       "state": "warning"
30 |     }
31 |   ],
32 |   "lineList": [
33 |     {
34 |       "from": "nodeA",
35 |       "to": "nodeB",
36 |       "label": "条件AB",
37 |       "connector": "Bezier",
38 |       "anchors": ["Top", "Bottom"],
39 |       "paintStyle": { "strokeWidth": 2, "stroke": "#1879FF" }
40 |     },
41 |     {
42 |       "from": "nodeB",
43 |       "to": "nodeC"
44 |     }
45 |   ]
46 | }
47 | 


--------------------------------------------------------------------------------
/src/data/data_B.js:
--------------------------------------------------------------------------------
 1 | export var data_B = {
 2 |   "name": "流程B",
 3 |   "nodeList": [
 4 |     {
 5 |       "id": "nodeA",
 6 |       "name": "流程B-节点A",
 7 |       "type": "task",
 8 |       "left": "128px",
 9 |       "top": "223px",
10 |       "ico": "el-icon-user-solid",
11 |       "state": "success"
12 |     },
13 |     {
14 |       "id": "nodeB",
15 |       "type": "task",
16 |       "name": "流程B-节点B",
17 |       "left": "351px",
18 |       "top": "96px",
19 |       "ico": "el-icon-goods",
20 |       "state": "error"
21 |     },
22 |     {
23 |       "id": "nodeC",
24 |       "name": "流程B-节点C",
25 |       "type": "task",
26 |       "left": "354px",
27 |       "top": "351px",
28 |       "ico": "el-icon-present",
29 |       "state": "warning"
30 |     }, {
31 |       "id": "nodeD",
32 |       "name": "流程B-节点D",
33 |       "type": "task",
34 |       "left": "723px",
35 |       "top": "215px",
36 |       "ico": "el-icon-present",
37 |       "state": "running"
38 |     }
39 |   ],
40 |   "lineList": [{
41 |     "from": "nodeA",
42 |     "to": "nodeB",
43 |     "label": "条件A"
44 |   }, {
45 |     "from": "nodeA",
46 |     "to": "nodeC",
47 |     "label": "条件B"
48 |   }, {
49 |     "from": "nodeB",
50 |     "to": "nodeD"
51 |   }, {
52 |     "from": "nodeC",
53 |     "to": "nodeD"
54 |   }
55 |   ]
56 | }
57 | 
58 | 
59 | 


--------------------------------------------------------------------------------
/src/data/data_B.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   " name": "流程B",
 3 |   "nodeList": [
 4 |     {
 5 |       "id": "nodeA",
 6 |       "name": "流程B-节点A",
 7 |       "type": "task",
 8 |       "left": "128px",
 9 |       "top": "223px",
10 |       "ico": "el-icon-user-solid",
11 |       "state": "success"
12 |     },
13 |     {
14 |       "id": "nodeB",
15 |       "type": "task",
16 |       "name": "流程B-节点B",
17 |       "left": "351px",
18 |       "top": "96px",
19 |       "ico": "el-icon-goods",
20 |       "state": "error"
21 |     },
22 |     {
23 |       "id": "nodeC",
24 |       "name": "流程B-节点C",
25 |       "type": "task",
26 |       "left": "354px",
27 |       "top": "351px",
28 |       "ico": "el-icon-present",
29 |       "state": "warning"
30 |     },
31 |     {
32 |       "id": "nodeD",
33 |       "name": "流程B-节点D",
34 |       "type": "task",
35 |       "left": "723px",
36 |       "top": "215px",
37 |       "ico": "el-icon-present",
38 |       "state": "running"
39 |     }
40 |   ],
41 |   "lineList": [
42 |     {
43 |       "from": "nodeA",
44 |       "to": "nodeB",
45 |       "label": "条件A"
46 |     },
47 |     {
48 |       "from": "nodeA",
49 |       "to": "nodeC",
50 |       "label": "条件B"
51 |     },
52 |     {
53 |       "from": "nodeB",
54 |       "to": "nodeD"
55 |     },
56 |     {
57 |       "from": "nodeC",
58 |       "to": "nodeD"
59 |     }
60 |   ]
61 | }
62 | 


--------------------------------------------------------------------------------
/src/data/data_B.yaml:
--------------------------------------------------------------------------------
 1 | name: 流程B
 2 | nodeList:
 3 |   - id: nodeA
 4 |     name: 流程BBB-节点AAAA
 5 |     type: task
 6 |     left: 128px
 7 |     top: 223px
 8 |     ico: el-icon-user-solid
 9 |     state: success
10 |   - id: nodeB
11 |     type: task
12 |     name: 流程B-节点B
13 |     left: 351px
14 |     top: 96px
15 |     ico: el-icon-goods
16 |     state: error
17 |   - id: nodeC
18 |     name: 流程B-节点C
19 |     type: task
20 |     left: 354px
21 |     top: 351px
22 |     ico: el-icon-present
23 |     state: warning
24 |   - id: nodeD
25 |     name: 流程B-节点D
26 |     type: task
27 |     left: 723px
28 |     top: 215px
29 |     ico: el-icon-present
30 |     state: running
31 | lineList:
32 |   - from: nodeA
33 |     to: nodeB
34 |     label: 条件A
35 |   - from: nodeA
36 |     to: nodeC
37 |     label: 条件B
38 |   - from: nodeB
39 |     to: nodeD
40 |   - from: nodeC
41 |     to: nodeD
42 | 


--------------------------------------------------------------------------------
/src/data/data_C.js:
--------------------------------------------------------------------------------
 1 | export var data_C = {
 2 |   "name": "流程C",
 3 |   "nodeList": [
 4 |     {
 5 |       "id": "nodeA",
 6 |       "name": "流程C-节点A",
 7 |       "type": "task",
 8 |       "left": "400px",
 9 |       "top": "15px",
10 |       "ico": "el-icon-user-solid",
11 |       "state": "warning"
12 |     },
13 |     {
14 |       "id": "nodeB",
15 |       "name": "流程C-节点B",
16 |       "type": "task",
17 |       "left": "400px",
18 |       "top": "200px",
19 |       "ico": "el-icon-goods",
20 |       "state": "warning"
21 |     },
22 |     {
23 |       "id": "nodeC",
24 |       "name": "流程C-节点C",
25 |       "type": "task",
26 |       "left": "400px",
27 |       "top": "378px",
28 |       "ico": "el-icon-present",
29 |       "state": "warning"
30 |     }
31 |   ],
32 |   "lineList": [
33 |     {
34 |       "from": "nodeA",
35 |       "to": "nodeB"
36 |     }, {
37 |       "from": "nodeB",
38 |       "to": "nodeC"
39 |     }
40 |   ]
41 | }
42 | 
43 | 


--------------------------------------------------------------------------------
/src/data/data_C.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "流程C",
 3 |   "nodeList": [
 4 |     {
 5 |       "id": "nodeA",
 6 |       "name": "流程C-节点A",
 7 |       "type": "task",
 8 |       "left": "400px",
 9 |       "top": "15px",
10 |       "ico": "el-icon-user-solid"
11 |     },
12 |     {
13 |       "id": "nodeB",
14 |       "name": "流程C-节点B",
15 |       "type": "task",
16 |       "left": "400px",
17 |       "top": "200px",
18 |       "ico": "el-icon-goods"
19 |     },
20 |     {
21 |       "id": "nodeC",
22 |       "name": "流程C-节点C",
23 |       "type": "task",
24 |       "left": "400px",
25 |       "top": "378px",
26 |       "ico": "el-icon-present"
27 |     }
28 |   ],
29 |   "lineList": [
30 |     {
31 |       "from": "nodeA",
32 |       "to": "nodeB"
33 |     },
34 |     {
35 |       "from": "nodeB",
36 |       "to": "nodeC"
37 |     }
38 |   ]
39 | }
40 | 


--------------------------------------------------------------------------------
/src/data/data_D.js:
--------------------------------------------------------------------------------
 1 | export var data_D = {
 2 |   "name": "流程D",
 3 |   "nodeList": [
 4 |     {
 5 |       "id": "nodeA",
 6 |       "name": "流程D-节点A",
 7 |       "type": "task",
 8 |       "left": "18px",
 9 |       "top": "223px",
10 |       "ico": "el-icon-user-solid",
11 |       "state": "success"
12 |     },
13 |     {
14 |       "id": "nodeB",
15 |       "type": "task",
16 |       "name": "流程D-节点B",
17 |       "left": "351px",
18 |       "top": "96px",
19 |       "ico": "el-icon-goods",
20 |       "state": "error"
21 |     },
22 |     {
23 |       "id": "nodeC",
24 |       "name": "流程D-节点C",
25 |       "type": "task",
26 |       "left": "354px",
27 |       "top": "351px",
28 |       "ico": "el-icon-present",
29 |       "state": "warning"
30 |     }, {
31 |       "id": "nodeD",
32 |       "name": "流程D-节点D",
33 |       "type": "task",
34 |       "left": "723px",
35 |       "top": "215px",
36 |       "ico": "el-icon-present",
37 |       "state": "running"
38 |     }
39 |   ],
40 |   "lineList": [{
41 |     "from": "nodeA",
42 |     "to": "nodeB",
43 |     "label": "直线,自定义线样式,固定锚点",
44 |     "connector": "Straight",
45 |     "anchors": ["Top", "Bottom"],
46 |     "paintStyle": { "strokeWidth": 2, "stroke": "#1879FF" }
47 |   }, {
48 |     "from": "nodeA",
49 |     "to": "nodeC",
50 |     "label": "贝塞尔曲线,固定锚点",
51 |     "connector": "Bezier",
52 |     "anchors": ["Bottom", "Left"]
53 |   }, {
54 |     "from": "nodeB",
55 |     "to": "nodeD",
56 |     "label": "默认连线样式,动态锚点"
57 |   }, {
58 |     "from": "nodeC",
59 |     "to": "nodeD",
60 |     "label": "默认连线样式,动态锚点"
61 |   }
62 |   ]
63 | }
64 | 


--------------------------------------------------------------------------------
/src/data/data_D.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "流程D",
 3 |   "nodeList": [
 4 |     {
 5 |       "id": "nodeA",
 6 |       "name": "流程D-节点A",
 7 |       "type": "task",
 8 |       "left": "18px",
 9 |       "top": "223px",
10 |       "ico": "el-icon-user-solid",
11 |       "state": "success"
12 |     },
13 |     {
14 |       "id": "nodeB",
15 |       "type": "task",
16 |       "name": "流程D-节点B",
17 |       "left": "351px",
18 |       "top": "96px",
19 |       "ico": "el-icon-goods",
20 |       "state": "error"
21 |     },
22 |     {
23 |       "id": "nodeC",
24 |       "name": "流程D-节点C",
25 |       "type": "task",
26 |       "left": "354px",
27 |       "top": "351px",
28 |       "ico": "el-icon-present",
29 |       "state": "warning"
30 |     },
31 |     {
32 |       "id": "nodeD",
33 |       "name": "流程D-节点D",
34 |       "type": "task",
35 |       "left": "723px",
36 |       "top": "215px",
37 |       "ico": "el-icon-present",
38 |       "state": "running"
39 |     }
40 |   ],
41 |   "lineList": [
42 |     {
43 |       "from": "nodeA",
44 |       "to": "nodeB",
45 |       "label": "直线,自定义线样式,固定锚点",
46 |       "connector": "Straight",
47 |       "anchors": ["Top", "Bottom"],
48 |       "paintStyle": { "strokeWidth": 2, "stroke": "#1879FF" }
49 |     },
50 |     {
51 |       "from": "nodeA",
52 |       "to": "nodeC",
53 |       "label": "贝塞尔曲线,固定锚点",
54 |       "connector": "Bezier",
55 |       "anchors": ["Bottom", "Left"]
56 |     },
57 |     {
58 |       "from": "nodeB",
59 |       "to": "nodeD",
60 |       "label": "默认连线样式,动态锚点"
61 |     },
62 |     {
63 |       "from": "nodeC",
64 |       "to": "nodeD",
65 |       "label": "默认连线样式,动态锚点"
66 |     }
67 |   ]
68 | }
69 | 


--------------------------------------------------------------------------------
/src/data/detail_data.js:
--------------------------------------------------------------------------------
 1 | 
 2 | export var node_data = {
 3 |   name: '某节点内部详情',
 4 |   nodeList: [
 5 |     {
 6 |       id: 'node_detailA',
 7 |       name: '实例A',
 8 |       type: 'task',
 9 |       left: '26px',
10 |       top: '10px',
11 |       ico: 'icon-daqilitiguancex iconfont'
12 |     },
13 |     {
14 |       id: 'node_detailB',
15 |       name: '实例B',
16 |       type: 'task',
17 |       left: '100px',
18 |       top: '10px',
19 |       ico: 'icon-VE iconfont'
20 |     },
21 |     {
22 |       id: 'node_detailC',
23 |       name: '实例C',
24 |       type: 'task',
25 |       left: '170px',
26 |       top: '10px',
27 |       ico: 'icon-lifangtilitiduomiantifangkuai iconfont'
28 |     },
29 |     {
30 |       id: 'node_detailC',
31 |       name: '实例C',
32 |       type: 'task',
33 |       left: '270px',
34 |       top: '10px',
35 |       ico: 'icon-lifangtilitiduomiantifangkuai iconfont'
36 |     }, {
37 |       id: 'node_detailC',
38 |       name: '实例C',
39 |       type: 'task',
40 |       left: '380px',
41 |       top: '10px',
42 |       ico: 'icon-lifangtilitiduomiantifangkuai iconfont'
43 |     }, {
44 |       id: 'node_detailC',
45 |       name: '实例C',
46 |       type: 'task',
47 |       left: '450px',
48 |       top: '10px',
49 |       ico: 'icon-lifangtilitiduomiantifangkuai iconfont'
50 |     }, {
51 |       id: 'node_detailC',
52 |       name: '实例C',
53 |       type: 'task',
54 |       left: '580px',
55 |       top: '10px',
56 |       ico: 'icon-lifangtilitiduomiantifangkuai iconfont'
57 |     }, {
58 |       id: 'node_detailC',
59 |       name: '实例C',
60 |       type: 'task',
61 |       left: '640px',
62 |       top: '10px',
63 |       ico: 'icon-lifangtilitiduomiantifangkuai iconfont'
64 |     }
65 |   ]
66 | }
67 | 
68 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import ElementUI from 'element-ui'
 4 | import 'element-ui/lib/theme-chalk/index.css'
 5 | import "./style/iconfont.css"
 6 | import './style/index.css'
 7 | Vue.config.productionTip = false
 8 | Vue.use(ElementUI, { size: 'small' })
 9 | 
10 | new Vue({
11 |   render: h => h(App),
12 | }).$mount('#app')
13 | 


--------------------------------------------------------------------------------
/src/style/iconfont.css:
--------------------------------------------------------------------------------
 1 | @font-face {
 2 |   font-family: "iconfont";
 3 |   src: url("//at.alicdn.com/t/font_1870567_ftka9e8z3st.eot?t=1592409460850"); /* IE9 */
 4 |   src: url("//at.alicdn.com/t/font_1870567_ftka9e8z3st.eot?t=1592409460850#iefix") format("embedded-opentype"),
 5 |     /* IE6-IE8 */
 6 |       url("data:application/x-font-woff2;charset=utf-8;base64,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")
 7 |       format("woff2"),
 8 |     url("//at.alicdn.com/t/font_1870567_ftka9e8z3st.woff?t=1592409460850") format("woff"),
 9 |     url("//at.alicdn.com/t/font_1870567_ftka9e8z3st.ttf?t=1592409460850") format("truetype"),
10 |     /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
11 |       url("//at.alicdn.com/t/font_1870567_ftka9e8z3st.svg?t=1592409460850#iconfont") format("svg"); /* iOS 4.1- */
12 | }
13 | 
14 | .iconfont {
15 |   font-family: "iconfont" !important;
16 |   font-size: 16px;
17 |   font-style: normal;
18 |   -webkit-font-smoothing: antialiased;
19 |   -moz-osx-font-smoothing: grayscale;
20 | }
21 | 
22 | .icon-workflow-copy:before {
23 |   content: "\f078";
24 |   color: #409eff;
25 |   font-size: 20px;
26 | }
27 | 
28 | .icon-servicemeshfuwuwangge-copy:before {
29 |   content: "\f076";
30 | }
31 | 
32 | .icon-servicemeshfu-copy-copy:before {
33 |   content: "\f077";
34 | }
35 | 
36 | .icon-dituleiwanggequ-copy:before {
37 |   content: "\f072";
38 | }
39 | 
40 | .icon-fangxingweixuanzhong-copy:before {
41 |   content: "\f073";
42 | }
43 | 
44 | .icon-daqilitiguancex:before {
45 |   content: "\e661";
46 | }
47 | 
48 | .icon-VE:before {
49 |   content: "\e666";
50 | }
51 | 
52 | .icon-customer-info:before {
53 |   content: "\e667";
54 | }
55 | 
56 | .icon-product:before {
57 |   content: "\e66c";
58 | }
59 | 
60 | .icon-distribution:before {
61 |   content: "\e671";
62 | }
63 | 
64 | .icon-litijiankong-copy:before {
65 |   content: "\f074";
66 | }
67 | 
68 | .icon-dulitixi-copy-copy-copy-copy-copy:before {
69 |   content: "\f075";
70 | }
71 | 
72 | .icon-litipouqie:before {
73 |   content: "\e603";
74 | }
75 | 
76 | .icon-rongqi:before {
77 |   content: "\e625";
78 | }
79 | 
80 | .icon-lifangtilitiduomiantifangkuai:before {
81 |   content: "\e600";
82 | }
83 | 
84 | .icon--SearchDatabaseFlat:before {
85 |   content: "\f071";
86 | }
87 | 


--------------------------------------------------------------------------------
/src/style/index.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |   padding: 0;
  3 |   margin: 0;
  4 | }
  5 | 
  6 | /*节点菜单*/
  7 | .ee-node-pmenu {
  8 |   cursor: pointer;
  9 |   height: 32px;
 10 |   line-height: 32px;
 11 |   width: 225px;
 12 |   display: block;
 13 |   font-weight: bold;
 14 |   color: #4a4a4a;
 15 |   padding-left: 5px;
 16 | }
 17 | 
 18 | .ee-node-pmenu:hover {
 19 |   background-color: #e0e0e0;
 20 | }
 21 | 
 22 | .ee-node-menu-li {
 23 |   color: #565758;
 24 |   width: 150px;
 25 |   border: 1px dashed #e0e3e7;
 26 |   margin: 5px 0 5px 0;
 27 |   padding: 5px;
 28 |   border-radius: 5px;
 29 |   padding-left: 8px;
 30 | }
 31 | 
 32 | .ee-node-menu-li:hover {
 33 |   /* 设置移动样式*/
 34 |   cursor: move;
 35 |   background-color: #f0f7ff;
 36 |   border: 1px dashed #1879ff;
 37 |   border-left: 4px solid #1879ff;
 38 |   padding-left: 5px;
 39 | }
 40 | 
 41 | .ee-node-menu-ul {
 42 |   list-style: none;
 43 |   padding-left: 20px;
 44 | }
 45 | 
 46 | /*节点的最外层容器的样式*/
 47 | .ee-node-container {
 48 |   position: absolute;
 49 |   display: flex;
 50 |   width: 170px;
 51 |   height: 32px;
 52 |   border: 1px solid #e0e3e7;
 53 |   border-radius: 5px;
 54 |   background-color: #fff;
 55 | }
 56 | 
 57 | .ee-node-container:hover {
 58 |   /* 设置移动样式*/
 59 |   cursor: move;
 60 |   background-color: #f0f7ff;
 61 |   box-shadow: #1879ff 0px 0px 12px 0px;
 62 |   background-color: #f0f7ff;
 63 |   border: 1px dashed #1879ff;
 64 | }
 65 | 
 66 | /*节点激活样式(被点击的节点)*/
 67 | .ee-node-active {
 68 |   background-color: #f0f7ff;
 69 |   box-shadow: #6f93b6 0px 0px 12px 0px;
 70 |   background-color: #f0f7ff;
 71 |   border: 1px solid #1879ff;
 72 | }
 73 | 
 74 | /*节点左侧的竖线*/
 75 | .ee-node-left {
 76 |   width: 4px;
 77 |   background-color: #1879ff;
 78 |   border-radius: 4px 0 0 4px;
 79 | }
 80 | 
 81 | /*节点左侧的图标*/
 82 | .ee-node-left-ico {
 83 |   line-height: 32px;
 84 |   margin-left: 8px;
 85 |   color: #409eff;
 86 | }
 87 | .ee-node-left-ico i,
 88 | .ee-node-left-ico .iconfont {
 89 |   font-size: 23px;
 90 | }
 91 | 
 92 | .ee-node-left-ico:hover {
 93 |   /* 设置拖拽的样式 */
 94 |   cursor: crosshair;
 95 | }
 96 | 
 97 | /*节点显示的文字*/
 98 | .ee-node-text {
 99 |   color: #565758;
100 |   font-size: 12px;
101 |   line-height: 32px;
102 |   margin-left: 8px;
103 |   width: 100px;
104 |   /* 设置超出宽度文本显示方式*/
105 |   white-space: nowrap;
106 |   overflow: hidden;
107 |   text-overflow: ellipsis;
108 |   text-align: center;
109 | }
110 | 
111 | /*节点右侧的图标*/
112 | .ee-node-right-ico {
113 |   line-height: 32px;
114 |   position: absolute;
115 |   right: 5px;
116 |   color: #84cf65;
117 |   cursor: default;
118 | }
119 | 
120 | /*节点的几种状态样式*/
121 | .el-node-state-success {
122 |   line-height: 32px;
123 |   position: absolute;
124 |   right: 5px;
125 |   color: #84cf65;
126 |   cursor: default;
127 | }
128 | 
129 | .el-node-state-error {
130 |   line-height: 32px;
131 |   position: absolute;
132 |   right: 5px;
133 |   color: #f56c6c;
134 |   cursor: default;
135 | }
136 | 
137 | .el-node-state-warning {
138 |   line-height: 32px;
139 |   position: absolute;
140 |   right: 5px;
141 |   color: #e6a23c;
142 |   cursor: default;
143 | }
144 | 
145 | .el-node-state-running {
146 |   line-height: 32px;
147 |   position: absolute;
148 |   right: 5px;
149 |   color: #84cf65;
150 |   cursor: default;
151 | }
152 | 
153 | /*node-form*/
154 | .ee-node-form-header {
155 |   height: 42px;
156 |   border-top: 1px solid #dce3e8;
157 |   border-bottom: 1px solid #dce3e8;
158 |   background: #f1f3f4;
159 |   color: #000;
160 |   line-height: 42px;
161 |   padding-left: 12px;
162 |   font-size: 14px;
163 | }
164 | 
165 | .ee-node-form-body {
166 |   margin-top: 10px;
167 |   padding-right: 10px;
168 |   padding-bottom: 20px;
169 | }
170 | 
171 | /* 连线中的label 样式*/
172 | .jtk-overlay.flowLabel:not(.aLabel),
173 | .jtk-overlay:not(.aLabel) {
174 |   padding: 4px 10px;
175 |   background-color: white;
176 |   color: #565758 !important;
177 |   border: 1px solid #e0e3e7;
178 |   border-radius: 5px;
179 | }
180 | 
181 | /* label 为空的样式 */
182 | .emptyFlowLabel.jtk-overlay {
183 |   display: none;
184 | }
185 | /* 新增 */
186 | .ee-dot {
187 |   background-color: #1879ff;
188 |   border-radius: 10px;
189 | }
190 | 
191 | .ee-dot-hover {
192 |   background-color: red;
193 | }
194 | 
195 | .ee-rectangle {
196 |   background-color: #1879ff;
197 | }
198 | 
199 | .ee-rectangle-hover {
200 |   background-color: red;
201 | }
202 | 
203 | .ee-img {
204 | }
205 | 
206 | .ee-img-hover {
207 | }
208 | 
209 | .ee-drop-hover {
210 |   border: 1px dashed #1879ff;
211 | }
212 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   publicPath:'./'
3 | }
4 | 


--------------------------------------------------------------------------------