【组件库】使用Vue2+AntV X6+ElementUI 实现拖拽配置自定义vue节点 ...

    先来看看实现效果：

    【组件库】使用 AntV X6 + ElementUI 实现拖拽配置自定义 Vue 节点
在现代前端开辟中，流程图和可视化编辑器的需求日益增长。AntV X6 是一个强大的图形化框架，支持丰富的图形操纵和自定义功能。结合 ElementUI，我们可以轻松实现一个基于 Vue 的拖拽配置流程图，支持自定义节点和动态字段编辑。
一、技能栈介绍

AntV X6：一个基于 HTML5 Canvas 的图形化框架，支持流程图、拓扑图等多种图形化场景。

• ElementUI：一个基于 Vue 的 UI 组件库，提供丰富的表单、表格和弹窗组件。
  
• Vue.js：一个渐进式 JavaScript 框架，用于构建用户界面。
  

二、项目需求

我们的目标是实现一个流程图编辑器，支持以下功能：
拖拽添加节点：用户可以通过拖拽的方式在画布上添加自定义节点。
节点配置：通过弹窗对话框配置节点的属性，包罗实体名称和字段信息。
字段动态编辑：支持动态添加、删除字段，并提供字段类型选择。
数据导入导出：支持从 JSON 文件导入数据，以及将当前流程图导出为 JSON 文件。
三、实现步骤

1. 初始化项目

起首，确保你已经安装了 Vue CLI 和相关依赖。创建一个新的 Vue 项目，并安装以下依赖：

1. vue create x6-vue-flow
2. cd x6-vue-flow
3. npm install @antv/x6 @antv/x6-plugin-dnd @antv/x6-vue-shape element-ui

复制代码

2. 创建主组件

在 src/components/FlowEditor.vue 中，实现流程图编辑器的主组件。以下是核心代码：

1. <template>
2.   <div class="flow-container">
3.     <!-- 导航栏 -->
4.     <div class="flow-nav">
5.       <div class="add-entity" @mousedown="startDrag">添加实体</div>
6.       <el-button type="primary" plain size="medium">保存</el-button>
7.       <el-button type="warning" plain size="medium">清空</el-button>
8.       <el-button type="success" plain size="medium">导出</el-button>
9.       <el-upload accept=".json" :on-progress="handleOnProgress" action="" :show-file-list="false">
10.         <el-button plain size="primary">导入</el-button>
11.       </el-upload>
12.     </div>
14.     <!-- 画布 -->
15.     <div class="flow-content">
16.       <div id="container"></div>
17.     </div>
19.     <!-- 实体编辑对话框 -->
20.     <el-dialog title="新增实体" :visible.sync="dialogVisible" width="45%">
21.       <el-form ref="form" :model="formData" label-width="130px" :rules="rules" size="small">
22.         <el-form-item prop="entity_name_CN" label="逻辑实体中文名">
23.           <el-input v-model="formData.entity_name_CN" clearable></el-input>
24.         </el-form-item>
25.         <el-form-item prop="entity_name_EN" label="逻辑实体英文名">
26.           <el-input v-model="formData.entity_name_EN" clearable></el-input>
27.         </el-form-item>
28.         <div class="field-container">
29.           <div class="field-container__title">
30.             <div class="primary-title">字段信息</div>
31.             <el-button type="primary" size="small" icon="el-icon-plus" @click="addField">新增一行</el-button>
32.           </div>
33.           <el-table :data="formData.formField" height="250">
34.             <el-table-column type="index" width="50" label="序号" align="center"></el-table-column>
35.             <el-table-column prop="cname" label="字段中文名" width="150" align="center">
36.               <template v-slot:default="{ $index }">
37.                 <el-input size="small" v-model="formData.formField[$index].cname"></el-input>
38.               </template>
39.             </el-table-column>
40.             <el-table-column prop="ename" label="字段英文名" width="200" align="center">
41.               <template v-slot:default="{ $index }">
42.                 <el-input size="small" v-model="formData.formField[$index].ename"></el-input>
43.               </template>
44.             </el-table-column>
45.             <el-table-column prop="efType" label="字段类型" align="center">
46.               <template v-slot:default="{ $index }">
47.                 <el-select v-model="formData.formField[$index].efType" size="small">
48.                   <el-option v-for="item in options" :key="item" :label="item" :value="item"></el-option>
49.                 </el-select>
50.               </template>
51.             </el-table-column>
52.             <el-table-column label="操作" fixed="right" align="center" width="80">
53.               <template v-slot:default="{ $index }">
54.                 <el-button type="danger" size="small" @click="handleFieldDelete($index)">删除</el-button>
55.               </template>
56.             </el-table-column>
57.           </el-table>
58.         </div>
59.       </el-form>
60.       <span slot="footer">
61.         <el-button @click="dialogVisible = false">取消</el-button>
62.         <el-button type="primary" @click="onSubmit(formData)">确定</el-button>
63.       </span>
64.     </el-dialog>
65.   </div>
66. </template>
68. <script>
69. import { Graph, Shape } from '@antv/x6';
70. import { Dnd } from '@antv/x6-plugin-dnd';
71. import { register } from '@antv/x6-vue-shape';
72. import CellNode from './CellNode.vue';
74. export default {
75.   name: 'FlowEditor',
76.   data() {
77.     return {
78.       graph: null,
79.       dialogVisible: false,
80.       formData: {
81.         entity_name_CN: '',
82.         entity_name_EN: '',
83.         formField: [{ cname: '', ename: '', efType: '' }],
84.       },
85.       options: ['STRING', 'NUMBER', 'BOOLEAN', 'DATE', 'EMAIL'],
86.     };
87.   },
88.   mounted() {
89.     this.$nextTick(() => {
90.       this.initGraph();
91.     });
92.   },
93.   methods: {
94.     initGraph() {
95.       const container = document.getElementById('container');
96.       const config = {
97.         container,
98.         width: '100%',
99.         height: '100%',
100.         autoResize: true,
101.         panning: true,
102.         mousewheel: true,
103.       };
104.       this.graph = new Graph(config);
105.       const dnd = new Dnd({
106.         target: this.graph,
107.         validateNode: (node) => {
108.           this.currentDragNode = node;
109.           this.dialogVisible = true;
110.           return false;
111.         },
112.       });
113.       this.dnd = dnd;
114.     },
115.     startDrag(e) {
116.       const node = this.graph.createNode({
117.         shape: 'CellNode',
118.       });
119.       this.dnd.start(node, e);
120.     },
121.     onSubmit(data) {
122.       this.dialogVisible = false;
123.       const node = this.graph.addNode(this.currentDragNode);
124.       node.setData(data);
125.     },
126.     addField() {
127.       this.formData.formField.push({ cname: '', ename: '', efType: '' });
128.     },
129.     handleFieldDelete(index) {
130.       this.formData.formField.splice(index, 1);
131.     },
132.   },
133. };
134. </script>

复制代码

3. 创建自定义 Vue 节点

在 src/components/CellNode.vue 中，实现自定义的 Vue 节点组件。以下是代码：

1. <template>
2.   <div style="background-color: #ffffff;">
3.     <el-table :data="formData.formField" style="width: 100%" height="250">
4.       <el-table-column label="资源名称" :formatter="() => formData.entity_name_CN"></el-table-column>
5.       <el-table-column prop="cname" label="中文名"></el-table-column>
6.       <el-table-column prop="ename" label="英文名"></el-table-column>
7.       <el-table-column prop="efType" label="类型"></el-table-column>
8.     </el-table>
9.   </div>
10. </template>
12. <script>
13. export default {
14.   name: 'CellNode',
15.   inject: ['getNode'],
16.   data() {
17.     return {
18.       node: null,
19.       formData: {
20.         entity_name_CN: '',
21.         entity_name_EN: '',
22.         formField: [{ cname: '', ename: '', efType: '' }],
23.       },
24.     };
25.   },
26.   mounted() {
27.     const node = this.getNode();
28.     this.node = node;
29.     node.on('change:data', (data) => {
30.       if (data.cell && data.cell.data) {
31.         this.formData = node.getData();
32.       }
33.     });
34.   },
35. };

复制代码

## 4. 注册自定义节点 在主组件中，使用 @antv/x6-vue-shape 注册自定义的 Vue 节点：

1. import { register } from '@antv/x6-vue-shape';
2. import CellNode from './CellNode.vue';
4. register({
5.   shape: 'CellNode',
6.   width: 300,
7.   height: 250,
8.   component: CellNode,
9. });

复制代码

• 样式优化
  在 src/styles/index.scss 中，添加全局样式：
  

1. .flow-container {
2.   width: 100%;
3.   height: 100%;
4.   display: flex;
5.   flex-direction: column;
7.   .flow-nav {
8.     display: flex;
9.     align-items: center;
10.     margin-bottom: 5px;
12.     .add-entity {
13.       border-radius: 6px;
14.       background: rgba(64, 158, 255, 0.7);
15.       border-color: #409eff;
16.       border-style: dashed;
17.       text-align: center;
18.       color: #fff;
19.       font-size: 14px;
20.       padding: 5px;
21.       box-sizing: content-box;
22.       width: 100px;
23.       cursor: pointer;
24.     }
25.   }
27.   .flow-content {
28.     flex: 1;
29.   }
30. }

复制代码

四、运行项目

完成以上步骤后，运行项目：

1. npm run serve

复制代码

打开浏览器访问 http://localhost:8080，你将看到一个支持拖拽添加节点、动态字段编辑的流程图编辑器。
五、总结

    通过 AntV X6 和 ElementUI 的结合，我们实现了一个功能丰富的流程图编辑器。AntV X6 提供了强大的图形化能力，ElementUI 提供了丰富的 UI 组件，两者结合可以快速搭建出高效的可视化工具。
完备代码

Graph.vue代码

1. // Graph.vue
2. <template>
3.     <div class="flow-container">
4.         <!-- 导航栏 -->
5.         <div class="flow-nav">
6.             <div class="add-entity" @mousedown="startDrag">添加实体</div>
7.             <el-button type="primary" style="margin-left: 10px" plain  size="medium">保存</el-button>
8.             <el-button type="warning" style="margin-left: 10px" plain size="medium">清空</el-button>
9.             <el-button type="success" style="margin-left: 10px" plain  size="medium">导出</el-button>
10.             <el-upload accept=".JSON" :on-progress="handleOnProgress" action="" :show-file-list="false">
11.                 <el-button plain size="primary" style="margin-left: 10px">导入</el-button>
12.             </el-upload>
13.         </div>
14.         <!-- 画布 -->
15.         <div class="flow-content" >
16.             <div id="container"></div>
17.         </div>
18.         <!-- 实体编辑对话框 -->
19.         <el-dialog class="dialog-box" title="新增实体" :visible.sync="dialogVisible" width="45%"  :before-close="handleClose" append-to-body="false">
20.             <div class="content-wrapper">
21.       <div class="primary-title">基本信息</div>
22.       <el-form
23.         ref="form"
24.         :model="formData"
25.         label-width="130px"
26.         :rules="rules"
27.         size="small"
28.       >
29.         <el-form-item prop="entity_name_CN" label="逻辑实体中文名">
30.           <el-input v-model="formData.entity_name_CN" clearable></el-input>
31.         </el-form-item>
32.         <el-form-item prop="entity_name_EN" label="逻辑实体英文名">
33.           <el-input v-model="formData.entity_name_EN" clearable></el-input>
34.         </el-form-item>
36.       <div class="field-container">
37.         <div class="field-container__title">
38.           <div class="primary-title">字段信息</div>
39.           <div class="field-operation">
40.             <el-button
41.               type="primary"
42.               size="small"
43.               icon="el-icon-plus"
44.               @click="addField"
45.               >新增一行</el-button
46.             >
47.           </div>
48.         </div>
49.         <el-table :data="formData.formField" label-position="center" height="250">
50.           <el-table-column type="index" width="50" label="序号" align="center">
51.           </el-table-column>
52.           <el-table-column
53.             property="cname"
54.             label="字段中文名"
55.             width="150"
56.             align="center"
57.           >
58.           <template v-slot:default="{ $index }" >
59.             <el-input size="small" v-model="formData.formField[$index].cname"></el-input>
60.           </template>
61.         </el-table-column>
62.           <el-table-column
63.             property="ename"
64.             label="字段英文名"
65.             width="200"
66.             align="center"
67.           >
68.           <template v-slot:default="{ $index }" >
69.             <el-input size="small" v-model="formData.formField[$index].ename"></el-input>
70.           </template>
71.         </el-table-column>
72.           <el-table-column
73.             property="efType"
74.             label="字段类型"
75.             align="center"
76.           >
77.         <template v-slot:default="{ $index }">
78.           <el-select
79.           v-model="formData.formField[$index].efType"
80.           default-first-option
81.           placeholder="请选择字段类型"
82.           clearable
83.           size="small"
84.         >
85.           <el-option
86.             v-for="item in options"
87.             :key="item"
88.             :label="item"
89.             :value="item"
90.           >
91.           </el-option>
92.         </el-select>
93.         </template>
94.         </el-table-column>
95.           <el-table-column label="操作" fixed="right" align="center" width="80">
96.             <template v-slot:default="{ $index }">
97.               <el-button
98.                 type="danger"
99.                 size="small"
100.                 @click="handleFieldDelete($index)"
101.                 >删除</el-button
102.               >
103.             </template>
104.           </el-table-column>
105.         </el-table>
106.       </div>
107.     </el-form>
108.     </div>
109.             <span slot="footer" class="dialog-footer">
110.                 <el-button @click="dialogVisible = false">取 消</el-button>
111.                 <el-button type="primary" @click="onSubmit(formData)">确 定</el-button>
112.             </span>
113.         </el-dialog>
114.     </div>
115. </template>
117. <script>
118. // import index from '../../index.js'
119. import { Graph, Shape } from '@antv/x6'
120. import { Dnd } from '@antv/x6-plugin-dnd'
121. import { register } from '@antv/x6-vue-shape'
122. import CellNode from './components/cellNode.vue'
124. // 画布配置
125. const config = {
126.   container: null,
127.   width: '100%',
128.   height: '100%',
129.   autoResize: true,
130.   // 拖拽画布
131.   panning: true,
132.   mousewheel: true,
133.   connecting: {
134.     snap: true, // 是否开启连线自动吸附
135.     highlight: true, // 是否高亮显示连线
136.     router: 'manhattan',
137.     connectionPoint: 'anchor',
138.     anchor: 'center',
139.     allowBlank: false,
140.     // 不允许创建循环连线，即边的起始节点和终止节点为同一节点
141.     allowEdge: false,
142.     // 不允许起点终点相同
143.     allowLoop: false,
144.     //  是否允许边连接到非节点上
145.     allowNode: false,
146.     // 起始和终止节点的相同连接桩之间只允许创建一条边
147.     allowMulti: 'witPort'
148.   },
149.   background: {
150.     color: '#F2F7FA'
151.   },
152.   grid: {
153.     visible: true,
154.     type: 'doubleMesh',
155.     args: [
156.       {
157.         color: '#eee', // 主网格线颜色
158.         thickness: 1 // 主网格线宽度
159.       },
160.       {
161.         color: '#ddd', // 次网格线颜色
162.         thickness: 1, // 次网格线宽度
163.         factor: 4 // 主次网格线间隔
164.       }
165.     ]
166.   }
167. }
168. // 连接桩配置
169. const ports = {
170.   groups: {
171.     // 对话框需要的一些外部数据
172.     right: {
173.       position: 'right',
174.       attrs: {
175.         circle: {
176.           r: 5,
177.           magnet: true,
178.           stroke: '#5F95FF',
179.           strokeWidth: 1,
180.           fill: '#fff'
181.         }
182.       }
183.     },
184.     left: {
185.       position: 'left',
186.       attrs: {
187.         circle: {
188.           r: 5,
189.           magnet: true,
190.           stroke: '#5F95FF',
191.           strokeWidth: 1,
192.           fill: '#fff'
193.         }
194.       }
195.     }
196.   }
197. }
198. // 注册HTML节点
199. Shape.HTML.register({
200.   shape: 'custom-html',
201.   width: 160,
202.   height: 80,
203.   effect: ['data'],
204.   html (formData) {
205.     const data = formData
206.     const div = document.createElement('div')
207.     div.className = 'custom-html'
208.     const span1 = document.createElement('span')
209.     const span2 = document.createElement('span')
210.     const span3 = document.createElement('span')
211.     span1.innerText = '1111'
212.     span2.innerText = '2222'
213.     span3.innerText = '3333'
214.     div.appendChild(span1)
215.     div.appendChild(span2)
216.     div.appendChild(span3)
217.     return div
218.   }
219. })
220. // 注册Vue节点
221. register({
222.   shape: 'CellNode',
223.   width: 300,
224.   height: 250,
225.   component: CellNode,
226.   ports: {
227.     ...ports,
228.     items: [{ group: 'left' }, { group: 'right' }]
229.   }
230. })
231. // 注册边
232. Graph.registerEdge(
233.   'dag-edge',
234.   {
235.     inherit: 'edge',
236.     attrs: {
237.       line: {
238.         stroke: '#C2C8D5',
239.         strokeWidth: 1,
240.         targetMarker: null
241.       }
242.     }
243.   },
244.   true
245. )
247. export default {
248.   name: 'vue-flow',
249.   data () {
250.     return {
251.       graph: null,
252.       currentEdge: null,
253.       dnd: null,
254.       dialogVisible: false,
255.       currentDragNode: null,
256.       // 对话框类型 编辑/新增
257.       formData: {
258.         entity_name_CN: '',
259.         entity_name_EN: '',
260.         // field_list: [],
261.         formField: [{
262.           cname: '',
263.           ename: '',
264.           efType: ''
265.         }]
266.       },
267.       options: [
268.         'STRING',
269.         'NUMBER',
270.         'BOOLEAN',
271.         'DATE',
272.         'EMAIL',
273.         'URL',
274.         'ARRAY',
275.         'OBJECT',
276.         'TEXTAREA',
277.         'SELECT',
278.         'RADIO',
279.         'CHECKBOX',
280.         'PASSWORD',
281.         'FILE',
282.         'IMAGE',
283.         'RANGE',
284.         'COLOR',
285.         'TEL',
286.         'SEARCH',
287.         'DATETIME',
288.         'DATETIME_LOCAL',
289.         'MONTH',
290.         'WEEK',
291.         'TIME',
292.         'HIDDEN'
293.       ],
294.       rules: {
295.         entity_name_CN: [
296.           { required: true, trigger: 'blur', message: '请输入逻辑实体中文名' }
297.         ],
298.         entity_name_EN: [
299.           { required: true, trigger: 'blur', message: '请输入逻辑实体英文名' }
300.         ]
301.       }
302.     }
303.   },
304.   provide () {
305.     return {
306.       // 要用箭头函数保证this在其他组件获取正确
307.       getGraph: () => {
308.         return this.graph
309.       }
310.     }
311.   },
312.   mounted () {
313.     this.$nextTick(() => {
314.       this.initGraph()
315.     })
316.   },
317.   methods: {
318.     initGraph () {
319.       // 容器dom
320.       const container = document.getElementById('container')
321.       config.container = container
322.       // 实例化画布
323.       this.graph = new Graph(config)
324.       // 实例化拖拽节点
325.       const dnd = new Dnd({
326.         target: this.graph,
327.         validateNode: (node) => {
328.           this.currentDragNode = node
329.           this.dialogVisible = true
330.           return false
331.         }
332.       })
333.       this.dnd = dnd
334.       this.graph.centerContent() // 居中显示
335.     },
336.     startDrag (e) {
337.       const node = this.graph.createNode({
338.         shape: 'CellNode'
339.       })
340.       this.dnd.start(node, e)
341.     },
342.     handleClose (done) {
343.       this.$confirm('确认关闭？')
344.         .then(_ => {
345.           done()
346.         })
347.         .catch(_ => {})
348.     },
349.     // 添加节点
350.     addNode (node) {
351.       return this.graph.addNode(node)
352.     },
353.     onSubmit (data) {
354.       this.dialogVisible = false
355.       if (this.currentDragNode) {
356.         const node = this.addNode(this.currentDragNode)
357.         const dataSource = {
358.           ...data
359.         }
360.         // TODO 有异步问题需要处理先写死200ms
361.         setTimeout(() => {
362.           node.setData(dataSource)
363.         }, 200)
364.       }
365.     },
366.     addField () {
367.       this.formData.formField.push({
368.         cname: '',
369.         ename: '',
370.         efType: ''
371.       })
372.     },
373.     handleFieldDelete () {
374.       this.formData.formField.splice(0, 1)
375.     }
376.   }
377. }
378. </script>
380. <style lang="scss">
381. $height: 40px;
382. .custom-html {
383.   display: flex;
384.     width: 100%;
385.     height: 100%;
386.     align-items: center;
387.     background-color: #fff;
389.     span {
390.       display: inline-block;
391.       height: $height;
392.       line-height: $height;
393.       border: 1px solid #0f7bcc;
394.       text-align: center;
395.       min-width: 0;
396.       flex: 1;
397.     }
398. }
400. .flow-container {
401.     width: 100%;
402.     height: 100%;
403.     display: flex;
404.     flex-direction: column;
406.     .flow-nav {
407.         display: flex;
408.         align-items: center;
409.         margin-bottom: 5px;
411.         .add-entity {
412.             border-radius: 6px;
413.             background: rgba(64, 158, 255, 0.7);
414.             background-clip: padding-box;
415.             border-color: #409eff;
416.             border-style: dashed;
417.             text-align: center;
418.             color: #fff;
419.             font-size: 14px;
420.             padding: 5px;
421.             box-sizing: content-box;
422.             width: 100px;
423.             cursor: pointer;
424.         }
425.     }
427.     .flow-content {
428.         flex: 1;
429.     }
431.     .my-selecting {
432.         border: 1px dashed #40ff7c;
433.         background-color: #0f7bcc;
434.     }
436.     .x6-widget-selection-box {
437.         border: 0px dashed rgba(0, 0, 0, 0);
438.         box-shadow: 1px 1px 10px 0 rgba(0, 0, 0, 0.3);
439.         border-radius: 6px;
440.         // background-color: #0F7BCC;
441.         // opacity: 0.1;
442.     }
444.     .x6-widget-selection-inner {
445.         opacity: 0.1;
446.         border: 5px solid #000000;
447.         background-color: #0f7bcc;
448.     }
450. }
451. .dialog-box{
452.   // width: 600%;
453.   // height: 800px;
455.   .el-dialog__title{
456.   color:#fff;
457.   font-size: 18px;
458. }
460. .content-wrapper {
461.   padding:15px;
462.   .primary-title {
463.     font-size: 18px;
464.     font-weight: 700;
465.     padding-bottom: 10px;
466.   }
468.   .field-container {
469.     &__title {
470.       display: flex;
471.       justify-content: space-between;
472.     }
473.   }
474. }
475. }
476. </style>

复制代码

cellNode.vue代码

[code]<template>
  <div style="background-color:  #ffffff;">
    <el-table
      :data="formData.formField"
      style="width: 100%"
      height="250"
    >
      <el-table-column :label="`资源名称：${formData.entity_name_CN}`">
      <el-table-column
        prop="cname"
        label="中文名"
      >
      </el-table-column>
      <el-table-column
        prop="ename"
        label="英文名"
      >
      </el-table-column>
      <el-table-column
        prop="efType"
        label="类型"
      >
      </el-table-column>
    </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'CellNode',
  inject: ['getNode'],
  data () {
    return {
      // 当前实体节点
      node: null,
      formData: {
        entity_name_CN: '',
        entity_name_EN: '',
        formField: [
          {
            cname: '',
            ename: '',
            efType: ''
          }
        ]
      }
    }
  },
  mounted () {
    // 获取node节点
    const node = this.getNode()
    this.node = node
    // 节点data改变监听
    node.on('change:data', (data) => {
      if (data.cell && data.cell.data) {
        this.formData = node.getData()
        console.log('