├── .browserslistrc
├── .eslintrc.js
├── .gitignore
├── README.md
├── babel.config.js
├── package-lock.json
├── package.json
├── postcss.config.js
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── App.vue
    ├── assets
    │   ├── factory.svg
    │   └── logo.png
    ├── commen
    │   ├── api.js
    │   ├── commen.js
    │   └── url.js
    ├── components
    │   ├── FlowEditor.vue
    │   ├── FlowPanelDefault.vue
    │   ├── FlowPanelNode.vue
    │   ├── FlowPanelNodeValue.vue
    │   ├── ItemList.vue
    │   └── flowPanelNodeChilds
    │   │   ├── FlowPanelNodeAction.vue
    │   │   ├── FlowPanelNodeAuth.vue
    │   │   └── FlowPanelNodeRes.vue
    ├── main.js
    ├── router.js
    ├── store.js
    └── views
    │   ├── flowDesign.vue
    │   ├── formDesign.vue
    │   ├── g6Editor.vue
    │   ├── home.vue
    │   ├── test.vue
    │   └── test1.vue
└── vue.config.js


/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     node: true
 5 |   },
 6 |   'extends': [
 7 |     'plugin:vue/essential',
 8 |     'eslint:recommended'
 9 |   ],
10 |   rules: {
11 |     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
12 |     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
13 |   },
14 |   parserOptions: {
15 |     parser: 'babel-eslint'
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/.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 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw?
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # g6-edit
 2 | 
 3 | ## Project setup
 4 | ```
 5 | npm install
 6 | ```
 7 | 
 8 | ### Compiles and hot-reloads for development
 9 | ```
10 | npm run serve
11 | ```
12 | 
13 | ### Compiles and minifies for production
14 | ```
15 | npm run build
16 | ```
17 | 
18 | ### Run your tests
19 | ```
20 | npm run test
21 | ```
22 | 
23 | ### Lints and fixes files
24 | ```
25 | npm run lint
26 | ```
27 | 
28 | ### Customize configuration
29 | See [Configuration Reference](https://cli.vuejs.org/config/).
30 | 


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


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "g6-edit",
 3 |   "version": "0.1.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 |     "@antv/g": "^3.4.6",
12 |     "@antv/g6": "^3.0.4",
13 |     "ahaapi": "^3.0.0",
14 |     "core-js": "^2.6.5",
15 |     "element-ui": "^2.10.1",
16 |     "vue": "^2.6.10",
17 |     "vue-router": "^3.0.3",
18 |     "vuex": "^3.0.1"
19 |   },
20 |   "devDependencies": {
21 |     "@vue/cli-plugin-babel": "^3.9.2",
22 |     "@vue/cli-plugin-eslint": "^3.9.2",
23 |     "@vue/cli-service": "^3.9.2",
24 |     "babel-eslint": "^10.0.1",
25 |     "eslint": "^5.16.0",
26 |     "eslint-plugin-vue": "^5.0.0",
27 |     "node-sass": "^4.9.0",
28 |     "sass-loader": "^7.1.0",
29 |     "vue-template-compiler": "^2.6.10"
30 |   }
31 | }
32 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     autoprefixer: {}
4 |   }
5 | }
6 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cometang/vue-g6-editor/bb6447c958541169c8a44a42a533d270bf3b751b/public/favicon.ico


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


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <router-view/>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <style lang="scss">
 8 |   html,body{
 9 |     width: 100%;
10 |     height: 100%;
11 |   }
12 |   *{
13 |     margin: 0;
14 |     padding: 0;
15 |   }
16 |   #app{
17 |     width: 100%;
18 |     height: 100%;
19 |   }
20 | </style>
21 | 


--------------------------------------------------------------------------------
/src/assets/factory.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1540352501122" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6101" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M250.353908 460.077443c-7.647167 0-15.192004-3.517103-20.070104-10.153244-8.133238-11.073196-5.752004-26.644847 5.321192-34.782178L422.209998 278.04355c7.562233-5.554506 17.720593-6.378268 26.085098-2.146896 8.370645 4.236488 13.760398 12.81998 13.760398 22.198581l0 87.944981L608.93268 278.04355c7.568373-5.554506 18.509563-6.378268 26.867928-2.146896 8.370645 4.236488 14.543228 12.81998 14.543228 22.198581l0 87.944981 146.035004-107.996666c7.562233-5.554506 16.878412-6.378268 25.242917-2.146896 8.370645 4.236488 12.917194 12.81998 12.917194 22.198581l0 137.098471c0 13.739932-11.33107 24.880667-25.071002 24.880667s-25.071002-11.140735-25.071002-24.880667l0-87.944981-146.557914 107.996666c-7.556093 5.560646-17.115819 6.384407-25.492604 2.146896-8.370645-4.236488-13.167904-12.81998-13.167904-22.198581l0-87.944981L451.927833 455.245392c-7.556093 5.560646-17.799388 6.384407-26.169009 2.146896-8.370645-4.236488-13.84431-12.81998-13.84431-22.198581l0-87.944981L264.992303 455.245392C260.558317 458.504622 255.468392 460.077443 250.353908 460.077443zM747.948827 932.807045 288.536532 932.807045c-13.739932 0-24.880667-11.140735-24.880667-24.880667L263.655865 731.687468c0-13.739932 11.140735-24.880667 24.880667-24.880667L747.948827 706.806801c13.739932 0 24.880667 11.140735 24.880667 24.880667l0 176.23891C772.829494 921.667334 761.688759 932.807045 747.948827 932.807045zM313.417199 883.045711l409.649937 0L723.067136 756.568135l-409.649937 0L313.417199 883.045711zM934.553829 933.886633 88.611154 933.886633c-13.739932 0-24.620747-12.220323-24.620747-25.960255L63.990407 111.745037c0-13.739932 10.880815-22.086018 24.620747-22.086018L250.335489 89.659019c13.739932 0 24.455995 8.346085 24.455995 22.086018l0 323.44867c0 13.739932-10.819416 24.880667-24.559349 24.880667s-24.559349-11.140735-24.559349-24.880667L225.672786 138.777717l-110.517069 0 0 745.990219 794.08561 0 0-423.648766-99.089809 0c-13.739932 0-24.880667-10.307763-24.880667-24.047696s11.140735-24.047696 24.880667-24.047696l124.403335 0c13.739932 0 24.828478 8.429996 24.828478 22.169929l0 472.732671C959.382307 921.667334 948.293761 933.886633 934.553829 933.886633zM494.311129 569.834196l52.813856 0 0 52.813856-52.813856 0 0-52.813856ZM721.541387 569.834196l52.813856 0 0 52.813856-52.813856 0 0-52.813856ZM267.081894 569.834196l52.81181 0 0 52.813856-52.81181 0 0-52.813856Z" p-id="6102"></path></svg>


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cometang/vue-g6-editor/bb6447c958541169c8a44a42a533d270bf3b751b/src/assets/logo.png


--------------------------------------------------------------------------------
/src/commen/api.js:
--------------------------------------------------------------------------------
 1 | import util from 'ahaapi'
 2 | import baseUrl from './url'
 3 | 
 4 | // let appId = process.env.appID;//应用编号
 5 | // let appId ='';
 6 | 
 7 | 
 8 | let api = {};
 9 | console.log('开始调用ctrl');
10 | 
11 | //创建表结构
12 | api.createTableSchema= function (cnt,callback) {
13 |     util.call(baseUrl+'/flow/createTableSchema', cnt, callback)
14 | }
15 | 
16 | export default api
17 | 
18 | 


--------------------------------------------------------------------------------
/src/commen/commen.js:
--------------------------------------------------------------------------------
 1 | 
 2 | const commen={}
 3 | 
 4 | /** @getFormulaResult 根据计算公式返回计算完成的值
 5 |  *  @item  一行的对应数据数据 Object (键值对)
 6 |  *  @formula 对应的计算公式  String
 7 |  *  @return 计算完成的数值
 8 |  * */
 9 | commen.getFormulaResult=function (item,formula) {
10 |     /** 获取第一个变量的位置*/
11 |     let start = formula.indexOf('{{')
12 |     let end = formula.indexOf('}}')
13 | 
14 |     while (start !=-1){
15 |         let variable = formula.substring(start+2,end)
16 |         let str = ''
17 |         /** 获取变量对应的值*/
18 |         let val = item[variable]
19 |         if(val == undefined || val ==null || val == ''){
20 |             val = 0
21 |         }
22 |         /**如果起点是0 的情况*/
23 |         if(start == 0){
24 |             str =  formula.substr(end+2)
25 |             str = val+str
26 |         }else{
27 |         /** 起点不是0的情况 拼接 左--中(对应的值)--右 字符串 */
28 |             let str1 = formula.substring(0,start)
29 |             let str2 = val
30 |             let str3 = formula.substr(end+2)
31 |             str = str1+str2+str3
32 |         }
33 |         /** 重置字符串替换变量为对应值*/
34 |         formula = str
35 |         start = formula.indexOf('{{')
36 |         end = formula.indexOf('}}')
37 |     }
38 |     /** 返回计算完成的值*/
39 |     let value = eval(formula)
40 |     return value
41 | }
42 | 
43 | 
44 | export default {
45 |     commen
46 | }
47 | 


--------------------------------------------------------------------------------
/src/commen/url.js:
--------------------------------------------------------------------------------
1 | 
2 | // const baseUrl = 'http://47.99.212.32/api/jiti';  //正式服请求地址前缀
3 | // const baseUrl = 'http://192.168.1.163:8080/dv';  //本地请求地址前缀
4 | const baseUrl = 'http://47.99.209.235/dv';  //测试服请求地址前缀
5 | 
6 | 
7 | export default baseUrl
8 | 


--------------------------------------------------------------------------------
/src/components/FlowEditor.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<div>
  3 | 		<div id="canvasBox" ref="canvasBox"></div>
  4 | 	</div>
  5 | </template>
  6 | 
  7 | <script>
  8 | 	import G6 from '@antv/g6';
  9 | 	export default {
 10 | 		name: "FlowEditor",
 11 | 		data(){
 12 | 			return{
 13 | 				nodeData: {
 14 | 					nodes: [{
 15 | 						id: 'node1',
 16 | 						label: 'node1',
 17 | 						x: 100,
 18 | 						y: 200,
 19 | 						anchorPoints: [
 20 | 							[0, 1],
 21 | 							[0.5, 1]
 22 | 						],
 23 | 						shape: 'rect'
 24 | 					}, ],
 25 | 					edges: []
 26 | 				},
 27 | 			}
 28 | 		},
 29 | 		mounted() {
 30 | 			let _this = this
 31 | 			G6.registerNode('diamond', {
 32 | 				draw(cfg, group) {
 33 | 					const size = cfg.size || [60, 60]; // 如果没有 size 时的默认大小
 34 | 					const width = size[0];
 35 | 					const height = size[1];
 36 | 					console.log('222222')
 37 | 					console.log(cfg)
 38 | 					const shape = group.addShape('path', {
 39 | 						attrs: {
 40 | 							//  / 1 \
 41 | 							// 4     2
 42 | 							//  \ 3 /
 43 | 							// path中的M、L等是SVG中的概念
 44 | 							path: [
 45 | 								['M', 0, 0 - height / 2], // 上部顶点
 46 | 								['L', width / 2, 0], // 右侧点
 47 | 								['L', 0, height / 2], // 下部
 48 | 								['L', -width / 2, 0], // 左侧
 49 | 								['Z'] // 封闭
 50 | 							],
 51 | 
 52 | 							getAnchorPoints() {
 53 | 								return [
 54 | 									[0, 0, {
 55 | 										type: 'circle',
 56 | 										style: {
 57 | 											stroke: 'red',
 58 | 											fill: 'white'
 59 | 										}
 60 | 									}],
 61 | 									[0.5, 0, {
 62 | 										type: 'circle',
 63 | 										style: {
 64 | 											stroke: 'red',
 65 | 											fill: 'white'
 66 | 										}
 67 | 									}],
 68 | 									[1, 0, {
 69 | 										type: 'circle',
 70 | 										style: {
 71 | 											stroke: 'red',
 72 | 											fill: 'white'
 73 | 										}
 74 | 									}],
 75 | 									[1, 1, {
 76 | 										type: 'circle',
 77 | 										style: {
 78 | 											stroke: 'red',
 79 | 											fill: 'white'
 80 | 										}
 81 | 									}],
 82 | 								]
 83 | 							},
 84 | 
 85 | 							stroke: '#5cdbd3', // 颜色应用到边上，如果应用到填充，则使用 fill: cfg.color
 86 | 							fill: '#e8fffb',
 87 | 							radius: 5,
 88 | 						}
 89 | 					});
 90 | 					if (cfg.label) { // 如果有文本
 91 | 						// 如果需要复杂的文本配置项，可以通过 labeCfg 传入
 92 | 						// const style = (cfg.labelCfg && cfg.labelCfg.style) || {};
 93 | 						// style.text = cfg.label;
 94 | 						group.addShape('text', {
 95 | 							// attrs: style
 96 | 							attrs: {
 97 | 								x: 0, // 居中
 98 | 								y: 0,
 99 | 								textAlign: 'center',
100 | 								textBaseline: 'middle',
101 | 								text: cfg.label,
102 | 								fill: '#666'
103 | 							}
104 | 						});
105 | 					}
106 | 					return shape;
107 | 				}
108 | 			})
109 | 			G6.registerBehavior('click-add-edge', {
110 | 				getEvents() {
111 | 					return {
112 | 						'node:click': 'onClick',
113 | 						mousemove: 'onMousemove',
114 | 						'edge:click': 'onEdgeClick' // 点击空白处，取消边
115 | 					};
116 | 				},
117 | 				onClick(ev) {
118 | 					const node = ev.item;
119 | 					const graph = _this.$store.state.flowData.graph
120 | 					const point = {
121 | 						x: ev.x,
122 | 						y: ev.y
123 | 					};
124 | 					const model = node.getModel();
125 | 					if (this.addingEdge && this.edge) {
126 | 						graph.updateItem(this.edge, {
127 | 							target: model.id
128 | 						});
129 | 
130 | 						this.edge = null;
131 | 						this.addingEdge = false;
132 | 					} else {
133 | 						this.edge = graph.addItem('edge', {
134 | 							source: model.id,
135 | 							target: point
136 | 						});
137 | 						this.addingEdge = true;
138 | 					}
139 | 
140 | 
141 | 				},
142 | 				onMousemove(ev) {
143 | 					const point = {
144 | 						x: ev.x,
145 | 						y: ev.y
146 | 					};
147 | 					if (this.addingEdge && this.edge) {
148 | 						_this.$store.state.flowData.graph.updateItem(this.edge, {
149 | 							target: point
150 | 						});
151 | 					}
152 | 				},
153 | 				onEdgeClick(ev) {
154 | 					const currentEdge = ev.item
155 | 					// 拖拽过程中，点击会点击到新增的边上
156 | 					if (this.addingEdge && this.edge == currentEdge) {
157 | 						_this.$store.state.flowData.graph.removeItem(this.edge)
158 | 						this.edge = null
159 | 						this.addingEdge = false
160 | 					}
161 | 				}
162 | 			})
163 | 			G6.registerBehavior('activate-node', {
164 | 				getDefaultCfg() {
165 | 					return {
166 | 						multiple: true
167 | 					};
168 | 				},
169 | 				getEvents() {
170 | 					return {
171 | 						'node:click': 'onNodeClick',
172 | 						'canvas:click': 'onCanvasClick'
173 | 					};
174 | 				},
175 | 				onNodeClick(e) {
176 | 					const graph = _this.$store.state.flowData.graph;
177 | 					const item = e.item;
178 | 					console.log('1111')
179 | 					if (item.hasState('active')) {
180 | 						graph.setItemState(item, 'active', false);
181 | 						return;
182 | 					}
183 | 					// this 上即可取到配置，如果不允许多个active，先取消其他节点的active状态
184 | 					if (!this.multiple) {
185 | 						this.removeNodesState();
186 | 					}
187 | 					// 置点击的节点状态为active
188 | 					_this.$store.state.flowData.graphActive.graphId = item._cfg.id;
189 | 					_this.$store.state.flowData.graphActive.graphLabel = item._cfg.model.label;
190 | 					_this.$store.state.flowData.graphActive.graphType = item._cfg.type;
191 | 					graph.setItemState(item, 'active', true);
192 | 				},
193 | 				onCanvasClick(e) {
194 | 					// shouldUpdate可以由用户复写，返回 true 时取消所有节点的active状态
195 | 					console.log('2223333')
196 | 
197 | 					if (this.shouldUpdate(e)) {
198 | 						this.removeNodesState();
199 | 					}
200 | 				},
201 | 				removeNodesState() {
202 | 					_this.$store.state.flowData.graphActive.graphId = '';
203 | 					_this.$store.state.flowData.graphActive.graphLabel = '';
204 | 					_this.$store.state.flowData.graphActive.graphType = '';
205 | 					_this.$store.state.flowData.graph.findAllByState('active').forEach(node => {
206 | 						_this.$store.state.flowData.graph.setItemState(node, 'active', false);
207 | 					});
208 | 				}
209 | 			})
210 | 
211 | 			const graph = new G6.Graph({
212 | 				container: 'canvasBox',
213 | 				width: document.body.clientWidth - 540,
214 | 				height: document.body.clientHeight - 140,
215 | 				modes: {
216 | 					default: ['click-add-node', 'click-select', 'click-add-edge', 'drag-node', 'activate-node'], //'click-add-edge' 新增先的behiver
217 | 				},
218 | 				defaultEdge: {
219 | 					shape: 'quadratic',
220 | 					size: 1,
221 | 					endArrow: true
222 | 				},
223 | 				edgeStyle: {
224 | 					default: {
225 | 						stroke: '#aaa',
226 | 						endArrow: true
227 | 					}
228 | 				},
229 | 			});
230 | 
231 | 			graph.data(this.nodeData)
232 | 			graph.render()
233 | 			graph.setMode('default')
234 | 
235 | 			_this.$store.state.flowData.graph = graph
236 | 
237 | 		}
238 | 	}
239 | </script>
240 | 
241 | <style scoped>
242 | 
243 | </style>
244 | 


--------------------------------------------------------------------------------
/src/components/FlowPanelDefault.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<div>
  3 | 
  4 | 		<div class="tab-box">
  5 | 
  6 | 		</div>
  7 | 		<div class="show-box">
  8 | 			<el-form ref="form" label-width="80px">
  9 | 				<el-form-item label="修改值">
 10 | 					<el-input v-model="graph_lable"></el-input>
 11 | 				</el-form-item>
 12 | 			</el-form>
 13 | 			<el-button type="primary" @click="changeItem" size="small">确认修改</el-button>
 14 | 			<el-button type="danger" style="margin-left: 15px" @click="delItem" size="small">删除选中</el-button>
 15 | 		</div>
 16 | 	</div>
 17 | </template>
 18 | 
 19 | <script>
 20 | 
 21 | 	export default {
 22 | 		name: "FlowNodePanel",
 23 | 		props: ['graph_id', 'graph_lable', 'graph_type'],
 24 | 		components: {
 25 | 		},
 26 | 		methods: {
 27 | 		},
 28 | 		data() {
 29 | 			return {
 30 | 			}
 31 | 		}
 32 | 	}
 33 | </script>
 34 | 
 35 | <style scoped>
 36 | 	/** 右侧tab样式*/
 37 | 
 38 | 	.tab-title {
 39 | 		float: left;
 40 | 		width: 30px;
 41 | 		height: 400px;
 42 | 		border-right: 1px solid #e8e8e8;
 43 | 	}
 44 | 
 45 | 	.tab-active {
 46 | 		background: #409eff;
 47 | 		color: #fff;
 48 | 	}
 49 | 
 50 | 	.tab-item {
 51 | 		float: left;
 52 | 		width: 265px;
 53 | 		height: 400px;
 54 | 	}
 55 | 
 56 | 	.tab-item-title {
 57 | 		width: 30px;
 58 | 		text-align: center;
 59 | 		font-size: 16px;
 60 | 		color: #666;
 61 | 		padding: 10px 0;
 62 | 		width: auto;
 63 | 		height: 300px;
 64 | 		overflow-y: auto;
 65 | 	}
 66 | 
 67 | 	.search-box {
 68 | 		width: auto;
 69 | 		height: 50px;
 70 | 		cursor: pointer;
 71 | 		border-bottom: 1px solid #e8e8e8;
 72 | 		transition: all .8s;
 73 | 	}
 74 | 
 75 | 	.tab-item-content {
 76 | 		line-height: 50px;
 77 | 
 78 | 	}
 79 | 
 80 | 	.check-btn {
 81 | 		width: auto;
 82 | 		height: 50px;
 83 | 		line-height: 50px;
 84 | 		text-align: center;
 85 | 	}
 86 | 
 87 | 	.permission-list {
 88 | 		width: auto;
 89 | 		padding: 5px;
 90 | 		background: #fff;
 91 | 		margin-top: 2px;
 92 | 		cursor: pointer;
 93 | 	}
 94 | 
 95 | 	.permission-list:hover {
 96 | 		background: #cbe2fa;
 97 | 	}
 98 | 
 99 | 	.permission-list:active {
100 | 		background: #cbe2fa;
101 | 	}
102 | 
103 | 	.permission-list-active {
104 | 		background: #cbe2fa
105 | 	}
106 | </style>
107 | 


--------------------------------------------------------------------------------
/src/components/FlowPanelNode.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<div>
  3 | 
  4 | 
  5 | 			<!-- 面板左侧导航菜单 -->
  6 | 			<div class="tab-title">
  7 | 
  8 | 				<div :class="tabActive==index?'tab-item-title tab-active':'tab-item-title'"
  9 | 					 v-for="(item,index) in tabList" :key="index"
 10 | 				 	 @click="onTabItemChange(index)">
 11 | 					{{item.title}}
 12 | 				</div>
 13 | 			</div>
 14 | 
 15 | 			<div class="tab-item">
 16 | 				<!--资源配置右侧-->
 17 | 				<div v-if="tabActive == 0">
 18 | 					<flow-panel-node-res :content="tabList[tabActive].content"></flow-panel-node-res>
 19 | 				</div>
 20 | 				<!--权限配置右侧-->
 21 | 				<div v-if="tabActive == 1">
 22 | 					<flow-panel-node-auth :content="tabList[tabActive].content"></flow-panel-node-auth>
 23 | 				</div>
 24 | 				<!--行为配置-->
 25 | 				<div v-if="tabActive ==2">
 26 | 					<flow-panel-node-action></flow-panel-node-action>
 27 | 				</div>
 28 | 
 29 | 			</div>
 30 | 		</div>
 31 | 
 32 | 
 33 | </template>
 34 | 
 35 | <script>
 36 | 	import FlowPanelNodeRes from './flowPanelNodeChilds/FlowPanelNodeRes'
 37 | 	import FlowPanelNodeAuth from './flowPanelNodeChilds/FlowPanelNodeAuth'
 38 | 	import FlowPanelNodeAction from './flowPanelNodeChilds/FlowPanelNodeAction'
 39 | 
 40 | 	export default {
 41 | 		name: "FlowNodePanel",
 42 | 		data(){
 43 | 			return{
 44 | 				tabList: [{
 45 | 					title: '资源配置',
 46 | 					content: [{
 47 | 						text: '资产数据表',
 48 | 						field: [{
 49 | 							key: 'id',
 50 | 							text: '序号'
 51 | 						}, {
 52 | 							key: 'name',
 53 | 							text: '资产名'
 54 | 						}, {
 55 | 							key: 'address',
 56 | 							text: '资产地址'
 57 | 						}, {
 58 | 							key: 'val',
 59 | 							text: '资产价值'
 60 | 						}, {
 61 | 							key: 'num',
 62 | 							text: '资产数量'
 63 | 						}, ]
 64 | 					},
 65 | 						{
 66 | 							text: '公共设备表',
 67 | 							field: [{
 68 | 								key: 'id',
 69 | 								text: '序号'
 70 | 							}, {
 71 | 								key: 'name',
 72 | 								text: '设备名'
 73 | 							}, {
 74 | 								key: 'address',
 75 | 								text: '设备地址'
 76 | 							}, {
 77 | 								key: 'val',
 78 | 								text: '设备价值'
 79 | 							}, {
 80 | 								key: 'num',
 81 | 								text: '设备数量'
 82 | 							}, ]
 83 | 						},
 84 | 						{
 85 | 							text: '财务分析表',
 86 | 							field: [{
 87 | 								key: 'id',
 88 | 								text: '序号'
 89 | 							}, {
 90 | 								key: 'year',
 91 | 								text: '分析年份'
 92 | 							}, {
 93 | 								key: 'sum',
 94 | 								text: '总交易金额'
 95 | 							}, {
 96 | 								key: 'profit',
 97 | 								text: '总利润'
 98 | 							}]
 99 | 						},
100 | 						{
101 | 							text: '项目统计表',
102 | 							field: [{
103 | 								key: 'id',
104 | 								text: '序号'
105 | 							}, {
106 | 								key: 'name',
107 | 								text: '项目名称'
108 | 							}, {
109 | 								key: 'date',
110 | 								text: '项目申报年份'
111 | 							}, {
112 | 								key: 'profit',
113 | 								text: '项目目前利润'
114 | 							}, {
115 | 								key: 'amount ',
116 | 								text: '申报金额'
117 | 							}, {
118 | 								key: ' delivery',
119 | 								text: '交付金额'
120 | 							}]
121 | 						},
122 | 					],
123 | 					contentActive: 0
124 | 				},
125 | 					{
126 | 						title: '权限配置',
127 | 						content: [{
128 | 							type: '0',
129 | 							title: '部门权限',
130 | 							list: [{
131 | 								id: '12',
132 | 								name: '财政局'
133 | 							}, {
134 | 								id: '13',
135 | 								name: '农业农村局'
136 | 							}, {
137 | 								id: '14',
138 | 								name: '国土资源局'
139 | 							}, {
140 | 								id: '121',
141 | 								name: '财政局1'
142 | 							}, {
143 | 								id: '131',
144 | 								name: '农业农村局1'
145 | 							}, {
146 | 								id: '141',
147 | 								name: '国土资源局1'
148 | 							}]
149 | 						},
150 | 							{
151 | 								type: '1',
152 | 								title: '角色权限',
153 | 								list: [{
154 | 									id: '102',
155 | 									name: '超级管理员'
156 | 								}, {
157 | 									id: '103',
158 | 									name: '管理用户'
159 | 								}, {
160 | 									id: '104',
161 | 									name: '局级干部'
162 | 								}, {
163 | 									id: '101',
164 | 									name: '科级干部'
165 | 								}, {
166 | 									id: '111',
167 | 									name: '普通科员'
168 | 								}, {
169 | 									id: '122',
170 | 									name: '项目申报人'
171 | 								}]
172 | 							},
173 | 							{
174 | 								type: '2',
175 | 								title: '用户权限',
176 | 								list: [{
177 | 									id: '102',
178 | 									name: '李宁'
179 | 								}, {
180 | 									id: '103',
181 | 									name: '张三'
182 | 								}, {
183 | 									id: '104',
184 | 									name: '六五'
185 | 								}, {
186 | 									id: '101',
187 | 									name: '李四'
188 | 								}, {
189 | 									id: '111',
190 | 									name: '王五'
191 | 								}, {
192 | 									id: '122',
193 | 									name: '陈是'
194 | 								}, {
195 | 									id: '141',
196 | 									name: '照照'
197 | 								}, {
198 | 									id: '141',
199 | 									name: '刘德'
200 | 								}, {
201 | 									id: '146',
202 | 									name: '陈武'
203 | 								}]
204 | 							},
205 | 						],
206 | 						contentActive: 0
207 | 					},
208 | 					{
209 | 						title: '行为配置',
210 | 						content: [{
211 | 							rule: '',
212 | 							nextNode: {}
213 | 						},
214 | 							{
215 | 								rule: '',
216 | 								nextNode: {}
217 | 							}
218 | 						]
219 | 					}
220 | 				],
221 | 				tabActive: 0,
222 | 
223 | 				defaultProps: {
224 | 					children: 'field',
225 | 					label: 'text'
226 | 				},
227 | 
228 | 				permissionTabActive: 0,
229 | 			}
230 | 		},
231 | 		components: {
232 | 			FlowPanelNodeRes,
233 | 			FlowPanelNodeAuth,
234 | 			FlowPanelNodeAction,
235 | 		},
236 | 		methods: {
237 | 			onTabItemChange(index) {
238 | 				this.tabActive = index;
239 | 			},
240 | 			delItem() {
241 | 				const item = this.graph.findById(this.graph_id)
242 | 				this.graph.removeItem(item)
243 | 			},
244 | 			changeItem() {
245 | 				const item = this.graph.findById(this.graph_id)
246 | 				let model = item._cfg.model
247 | 				model.label = this.graph_lable
248 | 				this.graph.updateItem(item, model)
249 | 			},
250 | 		},
251 | 
252 | 	}
253 | </script>
254 | 
255 | <style scoped>
256 | 	/** 右侧tab样式*/
257 | 
258 | 	.tab-title {
259 | 		float: left;
260 | 		width: 30px;
261 | 		height: 400px;
262 | 		border-right: 1px solid #e8e8e8;
263 | 	}
264 | 
265 | 	.tab-active {
266 | 		background: #409eff;
267 | 		color: #fff;
268 | 	}
269 | 
270 | 	.tab-item {
271 | 		float: left;
272 | 		width: 265px;
273 | 		height: 400px;
274 | 		background: #fff;
275 | 	}
276 | 
277 | 	.tab-item-title {
278 | 		width: 30px;
279 | 		text-align: center;
280 | 		font-size: 16px;
281 | 		color: #666;
282 | 		padding: 10px 0;
283 | 		cursor: pointer;
284 | 		border-bottom: 1px solid #e8e8e8;
285 | 		transition: all .8s;
286 | 	}
287 | 
288 | 
289 | 
290 | 
291 | 
292 | 
293 | </style>
294 | 


--------------------------------------------------------------------------------
/src/components/FlowPanelNodeValue.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |         <div>
 3 |             <el-form ref="form" label-width="80px">
 4 |                 <el-form-item label="节点ID">
 5 |                     <el-input v-model="newGraphId" style="width: 90%" :disabled="true"></el-input>
 6 |                 </el-form-item>
 7 |                 <el-form-item label="修改值">
 8 |                     <el-input v-model="newGraphLabel" style="width: 90%"></el-input>
 9 |                 </el-form-item>
10 |             </el-form>
11 |             <el-row>
12 |                 <el-col :span="24" style="text-align: center">
13 |                     <el-button type="primary" @click="changeItem" size="small">确认修改</el-button>
14 |                     <el-button type="danger" style="margin-left: 15px" @click="delItem" size="small">删除选中</el-button>
15 |                 </el-col>
16 |             </el-row>
17 |         </div>
18 | </template>
19 | 
20 | <script>
21 |     export default {
22 |         name: "FlowPanelNodeValue",
23 |         data(){
24 |             return{
25 |                 newGraphLabel:'',
26 |                 newGraphId:'',
27 |                 newGraphType:''
28 |             }
29 |         },
30 |         computed:{
31 |             changeGraphId(){
32 |                 return this.$store.state.flowData.graphActive.graphId
33 |             }
34 |         },
35 |         watch:{
36 |             changeGraphId(val){
37 |                 console.log(val)
38 |                 this.newGraphId = val
39 |                 this.newGraphLabel = this.$store.state.flowData.graphActive.graphLabel
40 |                 console.log( this.newGraphId)
41 | 
42 |             }
43 |         },
44 |         methods:{
45 |             changeItem() {
46 |                 const item = this.$store.state.flowData.graph.findById(this.newGraphId)
47 |                 let model = item._cfg.model
48 |                 model.label = this.newGraphLabel
49 |                 this.$store.state.flowData.graph.updateItem(item, model)
50 |             },
51 |             delItem() {
52 |                 const item = this.$store.state.flowData.graph.findById(this.newGraphId)
53 |                 this.$store.state.flowData.graph.removeItem(item)
54 |             },
55 |         },
56 |         mounted() {
57 |             this.newGraphId = this.$store.state.flowData.graphActive.graphId
58 |             this.newGraphLabel = this.$store.state.flowData.graphActive.graphLabel
59 |             this.newGraphType = this.$store.state.flowData.graphActive.graphType
60 |         }
61 |     }
62 | </script>
63 | 
64 | <style scoped lang="scss">
65 | 
66 | </style>
67 | 


--------------------------------------------------------------------------------
/src/components/ItemList.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div>
  3 | 
  4 |         <div class="nav-box"
  5 |              v-for="(item,index) in itemList" :key="index"
  6 |              @click="checkItem(index)">
  7 |             <img
  8 |                     draggable="false"
  9 |                     :src="item.src"
 10 |                     class="getItem"
 11 |                     :label="item.label"
 12 |             >
 13 |         </div>
 14 |     </div>
 15 | </template>
 16 | 
 17 | <script>
 18 |     import G6 from '@antv/g6';
 19 |     export default {
 20 |         name: "ItemList",
 21 |         data(){
 22 |             return{
 23 |                 itemList: [{
 24 |                     type: 'node',
 25 |                     src: 'https://gw.alipayobjects.com/zos/rmsportal/ZnPxbVjKYADMYxkTQXRi.svg',
 26 |                     label: '起止节点',
 27 |                     model: {
 28 |                         id: '',
 29 |                         x: 300,
 30 |                         y: 200,
 31 |                         size: 60,
 32 |                         label: '起止节点',
 33 |                         shape: 'circle',
 34 |                         style: {
 35 |                             stroke: '#ffc069',
 36 |                             fill: '#fff3ea'
 37 |                         }
 38 |                     }
 39 |                 },
 40 |                     {
 41 |                         type: 'node',
 42 |                         src: 'https://gw.alipayobjects.com/zos/rmsportal/wHcJakkCXDrUUlNkNzSy.svg',
 43 |                         label: '常规节点',
 44 |                         model: {
 45 |                             id: '',
 46 |                             x: 300,
 47 |                             y: 200,
 48 |                             size: [70, 40],
 49 |                             label: '常规节点',
 50 |                             shape: 'rect',
 51 |                             style: {
 52 |                                 stroke: '#1890ff',
 53 |                                 fill: '#e8f8ff',
 54 |                                 radius: 5,
 55 |                             }
 56 |                         }
 57 |                     },
 58 |                     {
 59 |                         type: 'node',
 60 |                         src: 'https://gw.alipayobjects.com/zos/rmsportal/SnWIktArriZRWdGCnGfK.svg',
 61 |                         label: '分叉节点',
 62 |                         model: {
 63 |                             id: '',
 64 |                             x: 300,
 65 |                             y: 200,
 66 |                             size: [60, 60],
 67 |                             label: '分叉节点',
 68 |                             shape: 'diamond',
 69 |                         }
 70 |                     },
 71 |                     {
 72 |                         type: 'node',
 73 |                         src: 'https://gw.alipayobjects.com/zos/rmsportal/rQMUhHHSqwYsPwjXxcfP.svg',
 74 |                         label: '模型节点',
 75 |                         model: {
 76 |                             id: '',
 77 |                             x: 300,
 78 |                             y: 200,
 79 |                             size: [70, 40],
 80 |                             label: '模型节点',
 81 |                             shape: 'rect',
 82 |                             style: {
 83 |                                 stroke: '#b37feb',
 84 |                                 fill: '#f9f1ff',
 85 |                                 radius: 18
 86 |                             }
 87 |                         }
 88 |                     },
 89 |                 ],
 90 |             }
 91 |         },
 92 |         methods:{
 93 |             checkItem(_index){
 94 |                 this.itemList[_index].model.id = G6.Util.uniqueId()
 95 |                 let model = JSON.parse(JSON.stringify(this.itemList[_index].model))
 96 |                 this.$store.state.flowData.graph.addItem('node', model)
 97 |             }
 98 |         },
 99 |         mounted(){
100 | 
101 |         }
102 |     }
103 | </script>
104 | 
105 | <style scoped lang="scss">
106 |     .nav-box {
107 |         margin-top: 20px;
108 |         text-align: center;
109 |         width: auto;
110 |     }
111 | </style>
112 | 


--------------------------------------------------------------------------------
/src/components/flowPanelNodeChilds/FlowPanelNodeAction.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div>
 3 | 		进行规则配置 展示所有节点 选择下一节点跳转
 4 | 	</div>
 5 | </template>
 6 | 
 7 | <script>
 8 | 	export default {
 9 | 		name: "FlowPanelNodeAction",
10 | 
11 | 	}
12 | </script>
13 | 
14 | <style scoped>
15 | 
16 | </style>
17 | 


--------------------------------------------------------------------------------
/src/components/flowPanelNodeChilds/FlowPanelNodeAuth.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div>
 3 | 		<el-tabs v-model="permissionTabActive">
 4 | 
 5 | 			<el-tab-pane :label="item.title" :key="index" v-for="(item,index) in content" @click="permissionTabActive = index">
 6 | 
 7 | 				<div class="permission-list" v-for="(item1,index1) in item.list" :key="index1">
 8 | 					{{item1.name}}
 9 | 				</div>
10 | 
11 | 			</el-tab-pane>
12 | 
13 | 		</el-tabs>
14 | 	</div>
15 | </template>
16 | 
17 | <script>
18 | 	export default {
19 | 		name: "FlowPanelNodeAuth",
20 | 		data(){
21 | 			return{
22 | 				permissionTabActive: 0,
23 | 			}
24 | 		},
25 | 		props: {
26 | 			content:Array
27 | 		},
28 | 		methods: {
29 | 
30 | 		}
31 | 	}
32 | </script>
33 | 
34 | <style scoped lang="scss">
35 | 	.permission-list {
36 | 		width: auto;
37 | 		padding: 5px;
38 | 		background: #fff;
39 | 		margin-top: 2px;
40 | 		cursor: pointer;
41 | 	}
42 | 
43 | 	.permission-list:hover {
44 | 		background: #cbe2fa;
45 | 	}
46 | 
47 | 	.permission-list:active {
48 | 		background: #cbe2fa;
49 | 	}
50 | 
51 | 	.permission-list-active {
52 | 		background: #cbe2fa
53 | 	}
54 | </style>
55 | 


--------------------------------------------------------------------------------
/src/components/flowPanelNodeChilds/FlowPanelNodeRes.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div>
 3 | 		<div class="search-box">
 4 | 			<el-input size="small"
 5 | 					  placeholder="输入关键字进行过滤"
 6 | 					  v-model="searchTableData">
 7 | 			</el-input>
 8 | 		</div>
 9 | 		<div class="tab-item-content">
10 | 			<el-tree class="filter-tree"
11 | 					 :data="content"
12 | 					 :props="defaultProps"
13 | 					 default-expand-all
14 | 					 :filter-node-method="filterNode"
15 | 					 ref="tree">
16 | 			</el-tree>
17 | 		</div>
18 | 		<div class="check-btn">
19 | 			<el-button type="primary" size="mini" >选中当前值</el-button>
20 | 		</div>
21 | 	</div>
22 | </template>
23 | 
24 | <script>
25 | 	export default {
26 | 		name: "FlowPanelNodeRes",
27 | 		data(){
28 | 			return{
29 | 				searchTableData: '',
30 | 				defaultProps: {
31 | 					children: 'field',
32 | 					label: 'text'
33 | 				},
34 | 			}
35 | 		},
36 | 		props: {
37 | 			content:Array,
38 | 		},
39 | 		watch: {
40 | 			searchTableData(val) {
41 | 				console.log(val)
42 | 				this.$refs.tree.filter(val);
43 | 			}
44 | 		},
45 | 		methods: {
46 | 			filterNode(value, data) {
47 | 				console.log('111')
48 | 				console.log(value)
49 | 				console.log(data)
50 | 				if (!value) return true;
51 | 				return data.text.indexOf(value) !== -1;
52 | 			},
53 | 		}
54 | 	}
55 | </script>
56 | 
57 | <style scoped lang="scss">
58 | 	.search-box {
59 | 		width: auto;
60 | 		height: 50px;
61 | 		line-height: 50px;
62 | 
63 | 	}
64 | 
65 | 	.tab-item-content {
66 | 		width: auto;
67 | 		height: 300px;
68 | 		overflow-y: auto;
69 | 	}
70 | 	.check-btn {
71 | 		width: auto;
72 | 		height: 50px;
73 | 		line-height: 50px;
74 | 		text-align: center;
75 | 	}
76 | </style>
77 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import router from './router'
 4 | import store from './store'
 5 | 
 6 | import ElementUI from 'element-ui';
 7 | import 'element-ui/lib/theme-chalk/index.css';
 8 | import api from './commen/api'
 9 | import commen from './commen/commen'
10 | 
11 | Vue.use(ElementUI)
12 | Vue.config.productionTip = false
13 | 
14 | 
15 | Vue.prototype.$commen = commen.commen
16 | Vue.prototype.$api = api
17 | 
18 | new Vue({
19 |   router,
20 |   store,
21 |   render: h => h(App)
22 | }).$mount('#app')
23 | 


--------------------------------------------------------------------------------
/src/router.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Router from 'vue-router'
 3 | import home from './views/home'
 4 | 
 5 | const test = () => import('./views/test')
 6 | const test1 =()=> import('./views/test1')
 7 | const formDesign =()=>import('./views/formDesign')
 8 | const flowDesign =()=>import('./views/flowDesign')
 9 | 
10 | 
11 | const g6Editor =()=>import('./views/g6Editor')
12 | 
13 | 
14 | Vue.use(Router)
15 | 
16 | export default new Router({
17 |     mode: 'hash',
18 |     base: process.env.BASE_URL,
19 |     routes: [
20 |         {
21 |             path: '/',
22 |             name: 'home',
23 |             component: home
24 |         },
25 |         {
26 |             path:'/formDesign',
27 |             name:'formDesign',
28 |             component:formDesign
29 |         },
30 |         {
31 |             path:'/flowDesign',
32 |             name:'flowDesign',
33 |             component:flowDesign
34 | 		},
35 |         {
36 |             path:'/g6Editor',
37 |             name:'g6Editor',
38 |             component:g6Editor
39 |         },
40 |         {
41 |             path: '/test',
42 |             name: 'test',
43 |             component: test
44 |         },
45 |         {
46 |             path:'/test1',
47 |             name:'test1',
48 |             component:test1
49 |         }
50 |     ]
51 | })
52 | 


--------------------------------------------------------------------------------
/src/store.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Vuex from 'vuex'
 3 | 
 4 | Vue.use(Vuex)
 5 | 
 6 | export default new Vuex.Store({
 7 |   state: {
 8 |       flowData:{
 9 |         graph:'',
10 |         /*选中节点*/
11 |         graphActive:{
12 |           graphId:'',
13 |           graphLabel:'',
14 |           graphType:'',
15 |         }
16 |       }
17 |   },
18 |   mutations: {
19 | 
20 |   },
21 |   actions: {
22 | 
23 |   }
24 | })
25 | 


--------------------------------------------------------------------------------
/src/views/flowDesign.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<div style="height: 100%">
  3 | 		<el-container style="height: 100%">
  4 | 			<el-header class="header-box">Header</el-header>
  5 | 			<el-container style="height: 100%;">
  6 | 				<el-aside width="200px" class="item-box">
  7 | 					<item-list></item-list>
  8 | 				</el-aside>
  9 | 				<el-container>
 10 | 					<el-main class="main-box">
 11 | 						<div class="center-box">
 12 | 							<flow-editor></flow-editor>
 13 | 						</div>
 14 | 
 15 | 						<div class="info-box">
 16 | 							<div class="tab-box">
 17 | 
 18 | 							<flow-panel-node></flow-panel-node>
 19 | 							</div>
 20 | 
 21 | 							<div class="show-box">
 22 | 								<flow-panel-node-value></flow-panel-node-value>
 23 | 							</div>
 24 | 						</div>
 25 | 
 26 | 
 27 | 					</el-main>
 28 | 					<el-footer class="footer">
 29 | 
 30 | 					</el-footer>
 31 | 				</el-container>
 32 | 			</el-container>
 33 | 		</el-container>
 34 | 
 35 | 	</div>
 36 | </template>
 37 | 
 38 | <script>
 39 | 
 40 | 
 41 | 	import FlowEditor from '@/components/FlowEditor'
 42 | 	import ItemList from  '@/components/ItemList'
 43 | 	import FlowPanelNode from '@/components/FlowPanelNode'
 44 | 	import FlowPanelNodeValue from '@/components/FlowPanelNodeValue'
 45 | 	export default {
 46 | 		name: "flowDesign",
 47 | 		components: {
 48 | 			FlowEditor,
 49 | 			ItemList,
 50 | 			FlowPanelNode,
 51 | 			FlowPanelNodeValue
 52 | 		},
 53 | 		data() {
 54 | 			return {
 55 | 
 56 | 			}
 57 | 		},
 58 | 		methods: {
 59 | 
 60 | 		},
 61 | 		mounted() {}
 62 | 	}
 63 | </script>
 64 | 
 65 | <style scoped lang="scss">
 66 | 	.header-box {
 67 | 		background: beige;
 68 | 	}
 69 | 
 70 | 	.footer {
 71 | 		background: beige;
 72 | 	}
 73 | 
 74 | 	.main-box {
 75 | 		padding: 0;
 76 | 		width: auto;
 77 | 		height: 100%;
 78 | 	}
 79 | 
 80 | 	.info-box {
 81 | 		float: right;
 82 | 		width: 300px;
 83 | 		height: 100%;
 84 | 		background: #fafafa;
 85 | 		border-left: 1px solid #e8e8e8;
 86 | 	}
 87 | 
 88 | 	.center-box {
 89 | 		float: left;
 90 | 		width: auto;
 91 | 	}
 92 | 
 93 | 	.item-box {
 94 | 		background: #fafafa;
 95 | 		border-right: 1px solid #e8e8e8;
 96 | 	}
 97 | 
 98 | 
 99 | 	.nav-box {
100 | 		margin-top: 20px;
101 | 		text-align: center;
102 | 		width: auto;
103 | 	}
104 | 
105 | 	/*右侧内容样式*/
106 | 	.tab-box {
107 | 		width: 100%;
108 | 		height: 400px;
109 | 	}
110 | 
111 | 	.show-box {
112 | 		width: 100%;
113 | 		height: 200px;
114 | 		background: #fff;
115 | 		border-top: 1px solid #e8e8e8;
116 | 		padding: 10px 0;
117 | 
118 | 	}
119 | 
120 | 	/** 右侧tab样式*/
121 | 	.tab-title {
122 | 		float: left;
123 | 		width: 30px;
124 | 		height: 400px;
125 | 		border-right: 1px solid #e8e8e8;
126 | 	}
127 | 
128 | 	.tab-item {
129 | 		float: left;
130 | 		width: 265px;
131 | 		height: 400px;
132 | 	}
133 | 
134 | 	.tab-item-title {
135 | 		width: 30px;
136 | 		text-align: center;
137 | 		font-size: 16px;
138 | 		color: #666;
139 | 		padding: 10px 0;
140 | 		cursor: pointer;
141 | 		border-bottom: 1px solid #e8e8e8;
142 | 		transition: all .8s;
143 | 	}
144 | 
145 | 	.tab-active {
146 | 		background: #409eff;
147 | 		color: #fff;
148 | 	}
149 | 
150 | 	.tab-item-content {
151 | 		width: auto;
152 | 		height: 300px;
153 | 		overflow-y: auto;
154 | 	}
155 | 
156 | 	.search-box {
157 | 		width: auto;
158 | 		height: 50px;
159 | 		line-height: 50px;
160 | 
161 | 	}
162 | 
163 | 	.check-btn {
164 | 		width: auto;
165 | 		height: 50px;
166 | 		line-height: 50px;
167 | 		text-align: center;
168 | 	}
169 | 
170 | 	.permission-list {
171 | 		width: auto;
172 | 		padding: 5px;
173 | 		background: #fff;
174 | 		margin-top: 2px;
175 | 		cursor: pointer;
176 | 	}
177 | 
178 | 	.permission-list:hover {
179 | 		background: #cbe2fa;
180 | 	}
181 | 
182 | 	.permission-list:active {
183 | 		background: #cbe2fa;
184 | 	}
185 | 
186 | 	.permission-list-active {
187 | 		background: #cbe2fa
188 | 	}
189 | </style>
190 | 


--------------------------------------------------------------------------------
/src/views/formDesign.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div style="height: 100%;">
  3 |         <el-container style="height: 100%;">
  4 |             <el-header style="background: bisque">表单设计器</el-header>
  5 |             <el-container>
  6 |                 <el-aside width="200px" style="background: azure">表单左侧边栏</el-aside>
  7 |                 <el-container>
  8 |                     <el-main>
  9 | 
 10 |                         <div class="center-box" :style="centerBoxStyle">
 11 |                             <div class="form-title">
 12 |                                 <el-form  label-width="100px">
 13 |                                     <el-form-item label="新建表格名称">
 14 |                                         <el-input v-model="tableAlias" size="small" placeholder="请输入新增的表格的名称" style="width: 60%"></el-input>
 15 |                                     </el-form-item>
 16 | 
 17 |                                 </el-form>
 18 | 
 19 |                             </div>
 20 | 
 21 |                             <div class="form-table">
 22 |                                 <table class="table-design">
 23 |                                     <thead>
 24 |                                     <th>字段名</th>
 25 |                                     <th>字段别名</th>
 26 |                                     <th>是否必填</th>
 27 |                                     <th>字段类别</th>
 28 |                                     <th>数据类型</th>
 29 |                                     <th>计算公式</th>
 30 |                                     <th>操作</th>
 31 |                                     </thead>
 32 |                                     <tbody>
 33 | 
 34 |                                         <tr v-for="(item,index) in tableData" :key="index">
 35 |                                             <td>{{item.name}}</td>
 36 |                                             <td>{{item.alias}}</td>
 37 |                                             <td>
 38 |                                                 {{necessaryFilter(item.necessary)}}
 39 |                                             </td>
 40 |                                             <td>
 41 |                                                 {{columnTypeFilter(item.columnType)}}
 42 |                                             </td>
 43 |                                             <td>
 44 |                                                 {{dataTypeFilter(item.dataType)}}
 45 |                                             </td>
 46 |                                             <td>{{item.computeFormula}}</td>
 47 | 
 48 |                                             <td>
 49 |                                                 <el-button type="primary" size="mini" @click="checkDataBtn(index)">编辑</el-button>
 50 |                                                 <el-button type="danger" size="mini" @click="delDataBtn(index)" style="margin-left: 20px">删除</el-button>
 51 |                                                 <el-button type="primary" size="mini" @click="formulaBtn(index)">测试计算</el-button>
 52 |                                             </td>
 53 |                                         </tr>
 54 |                                     </tbody>
 55 | 
 56 | 
 57 |                                 </table>
 58 | 
 59 |                             </div>
 60 |                             <div class="form-table-btn">
 61 |                                 <el-button type="primary" size="small" @click="saveBtn" style="width: 20%">提交数据配置</el-button>
 62 |                             </div>
 63 |                         </div>
 64 |                         <div class="menu-box" ref="menuBox">
 65 |                             <div class="menu-title">
 66 |                                 <span style="margin-left: 20px">字段配置</span>
 67 |                                 <el-button type="primary" icon="el-icon-plus" size="mini"
 68 |                                            style="float: right;margin-right: 20px"
 69 |                                             @click="addFiledBtn">新增字段
 70 |                                 </el-button>
 71 |                             </div>
 72 |                             <div :style="menuForm" class="menu-form">
 73 |                                 <el-form label-width="100px" style="width: 90%;margin: 0 auto;margin-top: 20px">
 74 |                                     <el-form-item label="字段名">
 75 |                                         <el-input v-model="data.name" size="mini" placeholder="字段名（必须英文）"></el-input>
 76 |                                     </el-form-item>
 77 |                                     <el-form-item label="字段别名">
 78 |                                         <el-input v-model="data.alias" size="mini"  placeholder="字段别名（建议中文）"></el-input>
 79 |                                     </el-form-item>
 80 |                                     <el-form-item label="是否必填">
 81 |                                         <el-radio-group v-model="data.necessary">
 82 |                                             <el-radio label="0"> 必填</el-radio>
 83 |                                             <el-radio label="1"> 非必填</el-radio>
 84 |                                         </el-radio-group>
 85 |                                     </el-form-item>
 86 |                                     <el-form-item label="数据类型">
 87 |                                         <el-select v-model="data.dataType"
 88 |                                                    @change="changeDataType"
 89 |                                                    placeholder="请选择数据类型" size="mini">
 90 |                                             <el-option
 91 |                                                     v-for="(item,index) in dataTypeList" :key="index"
 92 |                                                     :label="item.val" :value="item.key">
 93 |                                             </el-option>
 94 |                                         </el-select>
 95 |                                     </el-form-item>
 96 |                                     <el-form-item label="字段类别">
 97 |                                         <el-radio-group v-model="data.columnType">
 98 |                                             <el-radio label="data" :disabled="data.dataType != 'int' && data.dataType != 'decimal' && data.dataType != 'money' "> 数据</el-radio>
 99 |                                             <el-radio label="compute" :disabled="data.dataType != 'int' && data.dataType != 'decimal' && data.dataType != 'money' "> 运算</el-radio>
100 |                                         </el-radio-group>
101 |                                     </el-form-item>
102 | 
103 | 
104 | 
105 |                                     <!--根据数据类型不同 分支数据-->
106 |                                     <!--运算规则设置-->
107 |                                     <span v-if="data.columnType == 'compute'">
108 |                                         <el-form-item label="计算公式">
109 |                                             <el-button type="primary" size="mini" style="width: 100%" @click="setPormulaBtn">设置计算公式</el-button>
110 |                                         </el-form-item>
111 |                                     </span>
112 | 
113 |                                     <!--整型/字符串-->
114 |                                     <span v-if="data.dataType == 'int' || data.dataType == 'string'">
115 |                                         <el-form-item label="数据长度">
116 |                                             <el-input v-model="data.dataProp.length" size="mini"  placeholder="请输入数据长度"></el-input>
117 |                                         </el-form-item>
118 |                                     </span>
119 |                                     <!--小数-->
120 |                                     <span v-if="data.dataType == 'decimal'">
121 |                                          <el-form-item label="保留位数">
122 |                                             <el-input v-model="data.dataProp.decimals" size="mini" @change="changeIntRules" placeholder="请输入小数保留位数"></el-input>
123 |                                          </el-form-item>
124 |                                          <el-form-item label="取整规则">
125 |                                             <el-select v-model="data.dataProp.intRules"
126 |                                                        @change="changeDecimals"
127 |                                                        placeholder="请选择取整规则" size="mini">
128 |                                                 <el-option
129 |                                                         v-for="(item,index) in intRulesList" :key="index"
130 |                                                         :label="item.val" :value="item.key">
131 |                                                 </el-option>
132 |                                             </el-select>
133 |                                          </el-form-item>
134 |                                     </span>
135 | 
136 |                                     <!--日期/日期时间-->
137 |                                     <span v-if="data.dataType == 'date'">
138 |                                           <el-form-item label="起始日期">
139 |                                                 <el-date-picker
140 |                                                         size="mini"
141 |                                                         v-model="data.dataProp.start"
142 |                                                         type="date"
143 |                                                         style="width: 100%"
144 |                                                         placeholder="选择日期">
145 |                                                 </el-date-picker>
146 |                                          </el-form-item>
147 |                                          <el-form-item label="截止日期">
148 |                                                 <el-date-picker
149 |                                                         size="mini"
150 |                                                         v-model="data.dataProp.end"
151 |                                                         type="date"
152 |                                                         style="width: 100%"
153 |                                                         placeholder="截止日期">
154 |                                                 </el-date-picker>
155 |                                          </el-form-item>
156 |                                     </span>
157 |                                     <span v-if="data.dataType == 'time'">
158 |                                           <el-form-item label="起始时间">
159 |                                                 <el-date-picker
160 |                                                         size="mini"
161 |                                                         v-model="data.dataProp.start"
162 |                                                         type="datetime"
163 |                                                         style="width: 100%"
164 |                                                         placeholder="选择起始时间">
165 |                                                 </el-date-picker>
166 |                                          </el-form-item>
167 |                                          <el-form-item label="截止时间">
168 |                                                 <el-date-picker
169 |                                                         size="mini"
170 |                                                         v-model="data.dataProp.end"
171 |                                                         type="datetime"
172 |                                                         style="width: 100%"
173 |                                                         placeholder="选择截止时间">
174 |                                                 </el-date-picker>
175 |                                          </el-form-item>
176 |                                     </span>
177 |                                     <span v-if="data.dataType == 'money'">
178 |                                         <el-form-item label="金额单位">
179 |                                             <el-input v-model="data.dataProp.dataUnit" size="mini"  placeholder="请输入金额单位（元/万元）"></el-input>
180 |                                          </el-form-item>
181 |                                     </span>
182 | 
183 |                                     <el-form-item label="备注信息">
184 |                                         <el-input type="textarea" v-model="data.remark"  placeholder="请输入备注信息"  :rows="3"></el-input>
185 |                                     </el-form-item>
186 | 
187 | 
188 | 
189 |                                 </el-form>
190 |                                 <div class="add-btn-box">
191 |                                     <el-button type="success" @click="completeBtn" size="small" style="width: 90%">完成数据</el-button>
192 |                                 </div>
193 |                             </div>
194 |                         </div>
195 |                     </el-main>
196 |                     <el-footer style="background: bisque">Footer</el-footer>
197 |                 </el-container>
198 |             </el-container>
199 |         </el-container>
200 | 
201 |         <el-dialog title="设置计算公式" :visible.sync="showFormula">
202 |             <div class="data-list-box">
203 |                 <el-form >
204 |                     <el-form-item label="可选数据列" label-width="120px" >
205 |                         <span v-if="computeList.length >0">
206 |                             <el-tag v-for="(item,index) in computeList" :key="index"
207 |                                     class="tag-item"
208 |                                     @click="addItemBtn(item,index)">
209 |                                 {{item.name}}:{{item.alias}}
210 |                             </el-tag>
211 |                         </span>
212 |                         <span v-else>
213 |                             暂无可选数据列
214 |                         </span>
215 | 
216 |                     </el-form-item>
217 |                     <el-form-item label="计算符选择" label-width="120px" >
218 |                         <el-tag v-for="(item,index) in signList" :key="index"
219 |                                 class="tag-sign"
220 |                                 @click="addSign(item)"
221 |                                 type="danger" size="small" >
222 |                             {{item}}
223 |                         </el-tag>
224 |                     </el-form-item>
225 |                     <el-form-item label="生成计算公式" label-width="120px" >
226 |                             <!--<el-tag type="success" size="small" style="margin: 10px 0 0 10px;cursor: pointer;" >-->
227 |                                 <!--1111-->
228 |                             <!--</el-tag>-->
229 |                                 <!--+-->
230 |                             <span>
231 |                                 {{formulaData}}
232 |                             </span>
233 | 
234 |                     </el-form-item>
235 |                 </el-form>
236 |             </div>
237 |             <div slot="footer" class="dialog-footer">
238 |                 <el-button @click="showFormula = false">取 消</el-button>
239 |                 <el-button type="primary" @click="resetCompute">重置计算公式</el-button>
240 |                 <el-button type="primary" @click="setFormulaBtn">确 定</el-button>
241 |             </div>
242 |         </el-dialog>
243 |     </div>
244 | </template>
245 | 
246 | <script>
247 | 
248 | 
249 |     export default {
250 |         name: "formDesign",
251 |         data() {
252 |             return {
253 |                 centerBoxStyle: {
254 |                     width: document.body.clientWidth - 600 + 'px',
255 |                     height: document.body.clientHeight - 200 + 'px'
256 |                 },
257 |                 menuForm: {
258 |                     width: '100%',
259 |                     height: '0px'
260 |                 },
261 |                 dataTypeList: [
262 |                     {key: 'int', val: '整型'}, {key: 'decimal', val: '小数'}, {key: 'string', val: '字符串'}, {key: 'date', val: '日期'}, {key: 'time', val: '日期时间'}, {key: 'money', val: '金额'}, {key: 'bool', val: '布尔型'}
263 |                 ],
264 |                 intRulesList: [
265 |                     {key: 0, val: '不取整'}, {key: 1, val: '直接取整'}, {key: 2, val: '四舍五入'}, {key: 3, val: '向上取整'}, {key: 4, val: '向下取整'},
266 |                 ],
267 |                 signList:['+','-','*','/'],
268 |                 data: {
269 |                     name: '',              //字段名
270 |                     alias: '',             //字段别名
271 |                     necessary:'0',        //是否必填 0：必填 1：非必填
272 |                     columnType: 'data',   //数据列还是计算列
273 |                     dataType: '',          //数据类型
274 |                     remark:'',            //备注
275 |                     dataUnit:'',            //单位
276 |                     computeFormula:'',            //公式
277 |                     selections:'',              //选项
278 |                     dataProp: {
279 |                         length: '',      //数据位数
280 |                         decimals: '',    //小数位数
281 |                         intRules: '',    //取整规则
282 |                         start: '',       //开始日期
283 |                         end: '',         //截止日期
284 |                         dataUnit:'',      //金额单位
285 |                     },
286 |                 },
287 |                 tableAlias:'',
288 |                 tableType:'0',
289 |                 tableData:[],
290 |                 changeIndex:-1,
291 | 
292 |                 showFormula:false,
293 |                 computeList:[],
294 | 
295 |                 formulaData:'',     //公式临时变量
296 |             }
297 |         },
298 |         methods: {
299 | 
300 |             /**测试计算公式*/
301 |             formulaBtn(_index){
302 |                 let item ={pop:300,sum:10000,pp:100,time:'3季度',money:'222'}
303 |                 console.log(this.$commen)
304 |                 let res = this.$commen.getFormulaResult(item,this.tableData[_index].computeFormula)
305 |                 console.log(res)
306 |             },
307 | 
308 |             /** 重置变量值*/
309 |             resetData(){
310 |                 let obj = {
311 |                     name: '',              //字段名
312 |                     alias: '',             //字段别名
313 |                     necessary:'0',        //是否必填 0：必填 1：非必填
314 |                     columnType: 'data',   //数据列还是计算列
315 |                     dataType: '',          //数据类型
316 |                     remark:'',            //备注
317 |                     dataUnit:'',            //单位
318 |                     computeFormula:'',            //公式
319 |                     dataProp: {
320 |                         length: '',      //数据位数
321 |                         decimals: '',    //小数位数
322 |                         intRules: '',    //取整规则
323 |                         start: '',       //开始日期
324 |                         end: '',         //截止日期
325 |                         dataUnit:''     //金额单位
326 |                     },
327 |                     selections:'',      //选项
328 |                 }
329 |                 this.data = JSON.parse(JSON.stringify(obj))
330 |             },
331 |             /** 小数 规则配置
332 |              * 改变取整规则
333 |              * */
334 |             changeIntRules(){
335 |                 if( this.data.dataProp.decimals != 0){
336 |                     this.data.dataProp.intRules = 0
337 |                 }
338 |             },
339 |             /** 改变小数位*/
340 |             changeDecimals(){
341 |                 if( this.data.dataProp.intRules != 0){
342 |                     this.data.dataProp.decimals = 0
343 |                 }
344 |             },
345 |             /** 更改数据类型改变默认值*/
346 |             changeDataType(){
347 |                 this.data.dataProp.length = ''
348 |                 this.data.dataProp.decimals = ''
349 |                 this.data.dataProp.intRules = ''
350 |                 this.data.dataProp.start = ''
351 |                 this.data.dataProp.end = ''
352 |                 this.data.dataProp.dataUnit = ''
353 |                 this.data.columnType = 'data'
354 |                 this.data.formula = ''
355 |                 this.formulaData = ''
356 | 
357 |             },
358 |             /** 完成字段配置 更改原表配置 进行赋值*/
359 |             completeBtn(){
360 |                 if(this.data.name == '' || this.data.alias == '' || this.data.necessary == '' || this.data.columnType == '' || this.data.dataType == '' ){
361 |                     this.$message.error('请将必填项填写完整')
362 |                 }else{
363 |                     let nameKey = -1
364 |                     if(this.tableData.length >0){
365 |                         for(let i =0;i<this.tableData.length;i++){
366 |                             if(this.tableData[i].name ==this.data.name){
367 |                                 nameKey = i
368 |                                 break
369 |                             }
370 |                         }
371 |                     }
372 |                     if(this.changeIndex == -1){
373 |                             if(nameKey != -1){
374 |                                 this.$message.error('字段名不能够重复，请修改字段名')
375 |                             }else{
376 |                                 let obj = JSON.parse(JSON.stringify(this.data))
377 |                                 this.tableData.push(obj)
378 |                             }
379 |                     }else{
380 |                         let obj = JSON.parse(JSON.stringify(this.data))
381 |                         this.tableData.splice(this.changeIndex,1,obj)
382 |                         this.changeIndex = -1
383 |                     }
384 |                     this.resetData()
385 |                 }
386 |             },
387 | 
388 |             /** 数据过滤器*/
389 |             /** 是否必填*/
390 |             necessaryFilter(key){
391 |                 if(key == '0'){
392 |                     return '必填'
393 |                 }else if( key == '1'){
394 |                     return '非必填'
395 |                 }
396 |             },
397 |             /** 字段类别*/
398 |             columnTypeFilter(key){
399 |                 if(key == 'data'){
400 |                     return '数据列'
401 |                 }else if(key == 'compute'){
402 |                     return '计算列'
403 |                 }
404 |             },
405 |             /** 数据类型*/
406 |             dataTypeFilter(key){
407 |                 for(let i=0;i<this.dataTypeList.length;i++){
408 |                     if(this.dataTypeList[i].key == key){
409 |                         return this.dataTypeList[i].val
410 |                     }
411 |                 }
412 |             },
413 |             /** 编辑按钮*/
414 |             checkDataBtn(_index){
415 |                 console.log(_index)
416 |                 this.changeIndex =  _index
417 |                 this.data = JSON.parse(JSON.stringify(this.tableData[_index]))
418 |             },
419 | 
420 |             /** 删除一行数据*/
421 |             delDataBtn(_index){
422 |                 console.log(_index)
423 |             },
424 | 
425 |             /** 设置公式弹出层*/
426 |             setPormulaBtn(){
427 |                 this.resetCompute()
428 |                 this.showFormula = true
429 |                 console.log(this.computeList)
430 |             },
431 | 
432 |             /** 新增字段*/
433 |             addFiledBtn(){
434 |                 this.changeIndex = -1
435 |                 this.resetData()
436 |             },
437 | 
438 |             /** 创建表单*/
439 |             saveBtn(){
440 | 
441 |                 let cnt = {
442 |                     alias:this.tableAlias,
443 |                     type:this.tableType,
444 |                     columns:this.tableData
445 |                 }
446 | 
447 |                 this.$api.createTableSchema(cnt,(res)=>{
448 |                     console.log(res)
449 |                 })
450 |                 console.log(cnt)
451 |             },
452 |             /** 添加节点进入公式*/
453 |             addItemBtn(item,_index){
454 |                 let str ='{{'+item.name+'}}'
455 |                 console.log(_index)
456 |                 let res =  this.setCompute(str,0)
457 | 
458 |                 // 需要考虑到底字段能不能重复被选择
459 |                 // if(res){
460 |                 //     this.computeList.splice(_index,1)
461 |                 // }else{
462 |                 //     this.$message.error('出错了！')
463 |                 // }
464 |                 if(res == false){
465 |                     this.$message.error('出错了！')
466 |                 }
467 |             },
468 |             /** 选择运算符*/
469 |             addSign(item){
470 |                 let res  = this.setCompute(item,1)
471 |                 if(!res){
472 |                     this.$message.error('出错了')
473 |                 }
474 |             },
475 | 
476 |             /** 设置公式
477 |              * item 具体节点（字段/运算符）
478 |              * key  0:字段 1:运算符
479 |              * */
480 |             setCompute(item,key){
481 |                 if(key == 0){
482 |                     console.log()
483 |                     if(this.formulaData.substr(this.formulaData.length-1,1) == '}'){
484 |                         return false
485 |                     }else{
486 |                         this.formulaData = this.formulaData+item
487 |                         return true
488 |                     }
489 |                 }else {
490 |                     if(this.formulaData.substr(this.formulaData.length-1,1) == '}'){
491 |                         this.formulaData = this.formulaData+item
492 |                         return true
493 |                     }else{
494 |                         return false
495 |                     }
496 |                 }
497 |             },
498 | 
499 |             /**  */
500 |             setFormulaBtn(){
501 |                 this.data.formula = this.formulaData
502 |                 this.formulaData = ''
503 |                 this.showFormula = false
504 | 
505 |             },
506 |             /** 重置计算公式,重新计算可选项*/
507 |             resetCompute(){
508 |                 this.formulaData = ''
509 |                 this.computeList = []
510 |                 for(let i =0;i<this.tableData.length;i++){
511 |                     if(this.tableData[i].dataType == 'int' || this.tableData[i].dataType == 'decimal' || this.tableData[i].dataType == 'money'){
512 |                         let obj = JSON.parse(JSON.stringify(this.tableData[i]))
513 |                         /** 需要满足 当前字段没有成为 其他的字段中的计算公式的 子项    如果是修改操作可能已经有部分字段已经加入到那个字段*/
514 |                         this.computeList.push(obj)
515 |                     }
516 |                 }
517 |             },
518 | 
519 |             /** 创建表格*/
520 | 
521 | 
522 |         },
523 |         mounted() {
524 | 
525 |             this.menuForm.height = this.$refs.menuBox.offsetHeight - 30 + 'px'
526 |             this.tableData=[
527 |                 { name: 'time', alias: '季度', necessary:'0', columnType: 'data', dataType: 'string', remark:'', computeFormula:'', dataProp: {length: '20', decimals: '', intRules: '', start: '', end: '', dataUnit:''}},
528 |                 {name: 'pop', alias: '单价', necessary:'0', columnType: 'data', dataType: 'decimal', remark:'', computeFormula:'', dataProp: {length: '', decimals: '2', intRules: '', start: '', end: '', dataUnit:''}},
529 |                 {name: 'sum', alias: '销售量', necessary:'0', columnType: 'data', dataType: 'int', remark:'', computeFormula:'', dataProp: {length: '5', decimals: '', intRules: '', start: '', end: '', dataUnit:''}},
530 |                 {name: 'pp', alias: '成本', necessary:'0', columnType: 'data', dataType: 'decimal', remark:'', computeFormula:'', dataProp: {length: '', decimals: '2', intRules: '', start: '', end: '', dataUnit:''}},
531 |                 {name:'money',alias:'利润',necessary:'0',columnType:'compute', dataType: 'decimal', remark:'', computeFormula:'({{pop}}-{{pp}})*{{sum}}', dataProp: {length: '', decimals: '2', intRules: '', start: '', end: '', dataUnit:''}}
532 |             ]
533 |         }
534 |     }
535 | </script>
536 | 
537 | <style scoped lang="scss">
538 |     .center-box {
539 |         float: left;
540 | 
541 |     }
542 | 
543 |     .menu-box {
544 |         float: right;
545 |         width: 300px;
546 |         height: 100%;
547 |         background: #f8f8f8;
548 |         border-radius: 5px;
549 |     }
550 | 
551 |     .form-title {
552 |         width: auto;
553 |         height: 80px;
554 |         background: #fff;
555 |         line-height: 40px;
556 |         font-size: 16px;
557 |         color: #666;
558 |         border-bottom: 1px solid #eee;
559 |     }
560 | 
561 |     .form-table {
562 |         margin-top: 20px;
563 |     }
564 | 
565 |     /** 表格相关样式*/
566 |     .table-design {
567 |         width: 100%;
568 |         font-family: verdana, arial, sans-serif;
569 |         font-size: 11px;
570 |         color: #333333;
571 |         border: 1px solid #e8e8e8;
572 |         border-collapse: collapse;
573 |         thead th {
574 |             height: 40px;
575 |             padding: 8px;
576 |             border: 1px solid #e8e8e8;
577 |             background-color: rgb(240, 249, 235);
578 |         }
579 |         tbody tr td {
580 |             padding: 8px;
581 |             color: #666;
582 |             border: 1px solid #e8e8e8;
583 |             background-color: #ffffff;
584 |             text-align: center;
585 |         }
586 |     }
587 | 
588 |     /** 配置器相关*/
589 |     .menu-title {
590 |         width: auto;
591 |         height: 30px;
592 |         color: #666;
593 |         font-size: 16px;
594 |         font-weight: 600;
595 |         padding: 5px;
596 |         line-height: 30px;
597 | 
598 |         border-bottom: 1px solid #b3d8ff
599 |     }
600 | 
601 |     .menu-icon-btn {
602 |         width: 100%;
603 |         height: 40px;
604 |         line-height: 40px;
605 |     }
606 | 
607 |     .menu-item {
608 |         width: 100%;
609 |     }
610 | 
611 |     .menu-form {
612 |         overflow-y: auto;
613 |     }
614 |     .add-btn-box{
615 |         margin-top: 30px;
616 |         width: 100%;
617 |         height: 40px;
618 |         line-height: 40px;
619 |         text-align: center;
620 |     }
621 | 
622 |     .form-table-btn{
623 |         width: auto;
624 |         height: 40px;
625 |         margin-top: 40px;
626 |         line-height: 40px;
627 |         text-align: center;
628 | 
629 |     }
630 | 
631 | 
632 |     /** 计算公式弹出窗*/
633 |     .data-list-box{
634 |         width: 100%;
635 |     }
636 |     .tag-sign{
637 |         font-size: 16px;
638 |         font-weight: 600;
639 |         margin:10px 0 0 10px;
640 |         cursor:pointer;
641 |     }
642 |     .tag-sign:hover{
643 |         background: #f56c6c;
644 |         color: #fff;
645 |     }
646 |     .tag-sign:active{
647 |         background:#fef0f0;
648 |         color: #fff;
649 |     }
650 |     .tag-item{
651 |         margin: 10px 0 0 10px;
652 |         cursor:pointer;
653 |     }
654 |     .tag-item:hover{
655 |         background: #409EFF;
656 |         color: #fff;
657 | 
658 |     }
659 |     .tag-item:active{
660 |         background: #d9ecff;
661 |         color: #fff;
662 |     }
663 | </style>
664 | 


--------------------------------------------------------------------------------
/src/views/g6Editor.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<div style="height: 100%">
  3 | 		<el-container style="height: 100%">
  4 | 			<el-header class="header-box">Header</el-header>
  5 | 			<el-container style="height: 100%;">
  6 | 				<el-aside width="200px" class="item-box">
  7 | 
  8 | 					<div class="nav-box" v-for="(item,index) in itemListL" :key="index" @click="checkItem(index)">
  9 | 						<img draggable="false" :src="item.src" class="getItem" :label="item.label">
 10 | 					</div>
 11 | 
 12 | 					<div class=" nav-box">
 13 | 						<el-button type="primary" size="small" @click="saveBtn"> 提交数据</el-button>
 14 | 					</div>
 15 | 				</el-aside>
 16 | 				<el-container>
 17 | 					<el-main class="main-box">
 18 | 						<div class="center-box">
 19 | 							<div id="canvasBox" ref="canvasBox"></div>
 20 | 						</div>
 21 | 
 22 | 						<div class="info-box">
 23 | 
 24 | 							<div class="tab-box">
 25 | 								<div class="tab-title">
 26 | 									<div :class="tabActive==index?'tab-item-title tab-active':'tab-item-title'" v-for="(item,index) in tabList"
 27 | 									 :key="index" @click="tabActive = index">
 28 | 										{{item.title}}
 29 | 									</div>
 30 | 
 31 | 								</div>
 32 | 								<div class="tab-item">
 33 | 									<!--资源配置右侧-->
 34 | 									<div v-if="tabActive == 0">
 35 | 										<div class="search-box">
 36 | 											<el-input size="small" placeholder="输入关键字进行过滤" v-model="searchTableData">
 37 | 											</el-input>
 38 | 										</div>
 39 | 										<div class="tab-item-content">
 40 | 											<el-tree class="filter-tree" :data="tabList[0].content" :props="defaultProps" default-expand-all
 41 | 											 :filter-node-method="filterNode" ref="tree">
 42 | 											</el-tree>
 43 | 										</div>
 44 | 										<div class="check-btn">
 45 | 											<el-button type="primary" size="mini">选中当前值</el-button>
 46 | 										</div>
 47 | 									</div>
 48 | 									<!--权限配置右侧-->
 49 | 									<div v-if="tabActive == 1">
 50 | 
 51 | 										<el-tabs v-model="permissionTabActive">
 52 | 
 53 | 											<el-tab-pane :label="item.title" :key="index" v-for="(item,index) in tabList[1].content" @click="permissionTabActive = index">
 54 | 
 55 | 												<div class="permission-list" v-for="(item1,index1) in item.list" :key="index1">
 56 | 													{{item1.name}}
 57 | 												</div>
 58 | 
 59 | 											</el-tab-pane>
 60 | 
 61 | 										</el-tabs>
 62 | 										<!--<div :class="permissionTabActive==index?'permission-tab-item-title tab-active':'tab-item-title'"-->
 63 | 										<!--v-for="(item,index) in tabList[1].content"-->
 64 | 										<!--:key="index"-->
 65 | 										<!--@click="permissionTabActive = index"-->
 66 | 										<!--&gt;-->
 67 | 										<!--{{item.title}}-->
 68 | 										<!--</div>-->
 69 | 									</div>
 70 | 									<!--行为配置-->
 71 | 									<div v-if="tabActive ==2">
 72 | 										进行规则配置 展示所有节点 选择下一节点跳转
 73 | 									</div>
 74 | 
 75 | 								</div>
 76 | 							</div>
 77 | 
 78 | 							<div class="show-box">
 79 | 								<el-form ref="form" label-width="80px">
 80 | 									<el-form-item label="修改值">
 81 | 										<el-input v-model="graph_lable"></el-input>
 82 | 									</el-form-item>
 83 | 								</el-form>
 84 | 								<el-button type="primary" @click="changeItem" size="small">确认修改</el-button>
 85 | 								<el-button type="danger" style="margin-left: 15px" @click="delItem" size="small">删除选中</el-button>
 86 | 							</div>
 87 | 
 88 | 						</div>
 89 | 
 90 | 
 91 | 					</el-main>
 92 | 					<el-footer class="footer">
 93 | 
 94 | 
 95 | 					</el-footer>
 96 | 				</el-container>
 97 | 			</el-container>
 98 | 		</el-container>
 99 | 
100 | 	</div>
101 | </template>
102 | 
103 | <script>
104 | 	import G6 from '@antv/g6';
105 | 
106 | 
107 | 
108 | 	export default {
109 | 		name: "g6Editor",
110 | 		data() {
111 | 			return {
112 | 				itemListL: [{
113 | 						type: 'node',
114 | 						src: 'https://gw.alipayobjects.com/zos/rmsportal/ZnPxbVjKYADMYxkTQXRi.svg',
115 | 						label: '起止节点',
116 | 						model: {
117 | 							id: '',
118 | 							x: 300,
119 | 							y: 200,
120 | 							size: 60,
121 | 							label: '起止节点',
122 | 							shape: 'circle',
123 | 							style: {
124 | 								stroke: '#ffc069',
125 | 								fill: '#fff3ea'
126 | 							}
127 | 						}
128 | 					},
129 | 					{
130 | 						type: 'node',
131 | 						src: 'https://gw.alipayobjects.com/zos/rmsportal/wHcJakkCXDrUUlNkNzSy.svg',
132 | 						label: '常规节点',
133 | 						model: {
134 | 							id: '',
135 | 							x: 300,
136 | 							y: 200,
137 | 							size: [70, 40],
138 | 							label: '常规节点',
139 | 							shape: 'rect',
140 | 
141 | 							style: {
142 | 								stroke: '#1890ff',
143 | 								fill: '#e8f8ff',
144 | 								radius: 5
145 | 							}
146 | 						}
147 | 					},
148 | 					{
149 | 						type: 'node',
150 | 						src: 'https://gw.alipayobjects.com/zos/rmsportal/SnWIktArriZRWdGCnGfK.svg',
151 | 						label: '分叉节点',
152 | 						model: {
153 | 							id: '',
154 | 							x: 300,
155 | 							y: 200,
156 | 							size: [60, 60],
157 | 							label: '分叉节点',
158 | 							shape: 'diamond',
159 | 						}
160 | 					},
161 | 					{
162 | 						type: 'node',
163 | 						src: 'https://gw.alipayobjects.com/zos/rmsportal/rQMUhHHSqwYsPwjXxcfP.svg',
164 | 						label: '模型节点',
165 | 						model: {
166 | 							id: '',
167 | 							x: 300,
168 | 							y: 200,
169 | 							size: [70, 40],
170 | 							label: '模型节点',
171 | 							shape: 'rect',
172 | 							style: {
173 | 								stroke: '#b37feb',
174 | 								fill: '#f9f1ff',
175 | 								radius: 5
176 | 							}
177 | 						}
178 | 					},
179 | 				],
180 | 				nodeData: {
181 | 					nodes: [{
182 | 						id: 'node1',
183 | 						label: 'node1',
184 | 						x: 100,
185 | 						y: 200,
186 | 						anchorPoints: [
187 | 							[0, 1],
188 | 							[0.5, 1]
189 | 						],
190 | 						shape: 'rect'
191 | 					}, ],
192 | 					edges: []
193 | 				},
194 | 				graph: '',
195 | 				graph_id: '',
196 | 				graph_lable: '',
197 | 				graph_type: '',
198 | 
199 | 				tabList: [{
200 | 						title: '资源配置',
201 | 						content: [{
202 | 								text: '资产数据表',
203 | 								field: [{
204 | 									key: 'id',
205 | 									text: '序号'
206 | 								}, {
207 | 									key: 'name',
208 | 									text: '资产名'
209 | 								}, {
210 | 									key: 'address',
211 | 									text: '资产地址'
212 | 								}, {
213 | 									key: 'val',
214 | 									text: '资产价值'
215 | 								}, {
216 | 									key: 'num',
217 | 									text: '资产数量'
218 | 								}, ]
219 | 							},
220 | 							{
221 | 								text: '公共设备表',
222 | 								field: [{
223 | 									key: 'id',
224 | 									text: '序号'
225 | 								}, {
226 | 									key: 'name',
227 | 									text: '设备名'
228 | 								}, {
229 | 									key: 'address',
230 | 									text: '设备地址'
231 | 								}, {
232 | 									key: 'val',
233 | 									text: '设备价值'
234 | 								}, {
235 | 									key: 'num',
236 | 									text: '设备数量'
237 | 								}, ]
238 | 							},
239 | 							{
240 | 								text: '财务分析表',
241 | 								field: [{
242 | 									key: 'id',
243 | 									text: '序号'
244 | 								}, {
245 | 									key: 'year',
246 | 									text: '分析年份'
247 | 								}, {
248 | 									key: 'sum',
249 | 									text: '总交易金额'
250 | 								}, {
251 | 									key: 'profit',
252 | 									text: '总利润'
253 | 								}]
254 | 							},
255 | 							{
256 | 								text: '项目统计表',
257 | 								field: [{
258 | 									key: 'id',
259 | 									text: '序号'
260 | 								}, {
261 | 									key: 'name',
262 | 									text: '项目名称'
263 | 								}, {
264 | 									key: 'date',
265 | 									text: '项目申报年份'
266 | 								}, {
267 | 									key: 'profit',
268 | 									text: '项目目前利润'
269 | 								}, {
270 | 									key: 'amount ',
271 | 									text: '申报金额'
272 | 								}, {
273 | 									key: ' delivery',
274 | 									text: '交付金额'
275 | 								}]
276 | 							},
277 | 						],
278 | 						contentActive: 0
279 | 					},
280 | 					{
281 | 						title: '权限配置',
282 | 						content: [{
283 | 								type: '0',
284 | 								title: '部门权限',
285 | 								list: [{
286 | 									id: '12',
287 | 									name: '财政局'
288 | 								}, {
289 | 									id: '13',
290 | 									name: '农业农村局'
291 | 								}, {
292 | 									id: '14',
293 | 									name: '国土资源局'
294 | 								}, {
295 | 									id: '121',
296 | 									name: '财政局1'
297 | 								}, {
298 | 									id: '131',
299 | 									name: '农业农村局1'
300 | 								}, {
301 | 									id: '141',
302 | 									name: '国土资源局1'
303 | 								}]
304 | 							},
305 | 							{
306 | 								type: '1',
307 | 								title: '角色权限',
308 | 								list: [{
309 | 									id: '102',
310 | 									name: '超级管理员'
311 | 								}, {
312 | 									id: '103',
313 | 									name: '管理用户'
314 | 								}, {
315 | 									id: '104',
316 | 									name: '局级干部'
317 | 								}, {
318 | 									id: '101',
319 | 									name: '科级干部'
320 | 								}, {
321 | 									id: '111',
322 | 									name: '普通科员'
323 | 								}, {
324 | 									id: '122',
325 | 									name: '项目申报人'
326 | 								}]
327 | 							},
328 | 							{
329 | 								type: '2',
330 | 								title: '用户权限',
331 | 								list: [{
332 | 									id: '102',
333 | 									name: '李宁'
334 | 								}, {
335 | 									id: '103',
336 | 									name: '张三'
337 | 								}, {
338 | 									id: '104',
339 | 									name: '六五'
340 | 								}, {
341 | 									id: '101',
342 | 									name: '李四'
343 | 								}, {
344 | 									id: '111',
345 | 									name: '王五'
346 | 								}, {
347 | 									id: '122',
348 | 									name: '陈是'
349 | 								}, {
350 | 									id: '141',
351 | 									name: '照照'
352 | 								}, {
353 | 									id: '141',
354 | 									name: '刘德'
355 | 								}, {
356 | 									id: '146',
357 | 									name: '陈武'
358 | 								}]
359 | 							},
360 | 						],
361 | 						contentActive: 0
362 | 					},
363 | 					{
364 | 						title: '行为配置',
365 | 						content: [{
366 | 								rule: '',
367 | 								nextNode: {}
368 | 							},
369 | 							{
370 | 								rule: '',
371 | 								nextNode: {}
372 | 							}
373 | 						]
374 | 					}
375 | 				],
376 | 				tabActive: 1,
377 | 
378 | 				searchTableData: '',
379 | 				defaultProps: {
380 | 					children: 'field',
381 | 					label: 'text'
382 | 				},
383 | 
384 | 				permissionTabActive: 0,
385 | 			}
386 | 		},
387 | 		watch: {
388 | 			searchTableData(val) {
389 | 				console.log(val)
390 | 				this.$refs.tree.filter(val);
391 | 			}
392 | 		},
393 | 		methods: {
394 | 			delItem() {
395 | 				const item = this.graph.findById(this.graph_id)
396 | 				this.graph.removeItem(item)
397 | 			},
398 | 			changeItem() {
399 | 				const item = this.graph.findById(this.graph_id)
400 | 				let model = item._cfg.model
401 | 				model.label = this.graph_lable
402 | 				this.graph.updateItem(item, model)
403 | 			},
404 | 			checkItem(_index) {
405 | 				console.log(_index);
406 | 				this.itemListL[_index].model.id = G6.Util.uniqueId()
407 | 				let model = JSON.parse(JSON.stringify(this.itemListL[_index].model))
408 | 
409 | 				this.graph.addItem('node', model)
410 | 			},
411 | 
412 | 			searchtable() {
413 | 
414 | 			},
415 | 			filterNode(value, data) {
416 | 				console.log('111')
417 | 				console.log(value)
418 | 				console.log(data)
419 | 				if (!value) return true;
420 | 				return data.text.indexOf(value) !== -1;
421 | 			},
422 | 
423 | 			saveBtn() {
424 | 				console.log(this.nodeData)
425 | 				console.log(this.graph)
426 | 			}
427 | 		},
428 | 		mounted() {
429 | 
430 | 			let _this = this
431 | 			console.log(document.body.clientWidth)
432 | 			G6.registerNode('diamond', {
433 | 				draw(cfg, group) {
434 | 					const size = cfg.size || [60, 60]; // 如果没有 size 时的默认大小
435 | 					const width = size[0];
436 | 					const height = size[1];
437 | 					console.log('222222')
438 | 					console.log(cfg)
439 | 					const shape = group.addShape('path', {
440 | 						attrs: {
441 | 							//  / 1 \
442 | 							// 4     2
443 | 							//  \ 3 /
444 | 							// path中的M、L等是SVG中的概念
445 | 							path: [
446 | 								['M', 0, 0 - height / 2], // 上部顶点
447 | 								['L', width / 2, 0], // 右侧点
448 | 								['L', 0, height / 2], // 下部
449 | 								['L', -width / 2, 0], // 左侧
450 | 								['Z'] // 封闭
451 | 							],
452 | 
453 | 							getAnchorPoints() {
454 | 								return [
455 | 									[0, 0, {
456 | 										type: 'circle',
457 | 										style: {
458 | 											stroke: 'red',
459 | 											fill: 'white'
460 | 										}
461 | 									}],
462 | 									[0.5, 0, {
463 | 										type: 'circle',
464 | 										style: {
465 | 											stroke: 'red',
466 | 											fill: 'white'
467 | 										}
468 | 									}],
469 | 									[1, 0, {
470 | 										type: 'circle',
471 | 										style: {
472 | 											stroke: 'red',
473 | 											fill: 'white'
474 | 										}
475 | 									}],
476 | 									[1, 1, {
477 | 										type: 'circle',
478 | 										style: {
479 | 											stroke: 'red',
480 | 											fill: 'white'
481 | 										}
482 | 									}],
483 | 								]
484 | 							},
485 | 
486 | 							stroke: '#5cdbd3', // 颜色应用到边上，如果应用到填充，则使用 fill: cfg.color
487 | 							fill: '#e8fffb',
488 | 							radius: 5,
489 | 						}
490 | 					});
491 | 					if (cfg.label) { // 如果有文本
492 | 						// 如果需要复杂的文本配置项，可以通过 labeCfg 传入
493 | 						// const style = (cfg.labelCfg && cfg.labelCfg.style) || {};
494 | 						// style.text = cfg.label;
495 | 						group.addShape('text', {
496 | 							// attrs: style
497 | 							attrs: {
498 | 								x: 0, // 居中
499 | 								y: 0,
500 | 								textAlign: 'center',
501 | 								textBaseline: 'middle',
502 | 								text: cfg.label,
503 | 								fill: '#666'
504 | 							}
505 | 						});
506 | 					}
507 | 					return shape;
508 | 				}
509 | 			})
510 | 			G6.registerBehavior('click-add-edge', {
511 | 				getEvents() {
512 | 					return {
513 | 						'node:click': 'onClick',
514 | 						mousemove: 'onMousemove',
515 | 						'edge:click': 'onEdgeClick' // 点击空白处，取消边
516 | 					};
517 | 				},
518 | 				onClick(ev) {
519 | 					const node = ev.item;
520 | 					const graph = this.graph;
521 | 					const point = {
522 | 						x: ev.x,
523 | 						y: ev.y
524 | 					};
525 | 					const model = node.getModel();
526 | 					if (this.addingEdge && this.edge) {
527 | 						graph.updateItem(this.edge, {
528 | 							target: model.id
529 | 						});
530 | 
531 | 						this.edge = null;
532 | 						this.addingEdge = false;
533 | 					} else {
534 | 						this.edge = graph.addItem('edge', {
535 | 							source: model.id,
536 | 							target: point
537 | 						});
538 | 						this.addingEdge = true;
539 | 					}
540 | 
541 | 
542 | 				},
543 | 				onMousemove(ev) {
544 | 					const point = {
545 | 						x: ev.x,
546 | 						y: ev.y
547 | 					};
548 | 					if (this.addingEdge && this.edge) {
549 | 						this.graph.updateItem(this.edge, {
550 | 							target: point
551 | 						});
552 | 					}
553 | 				},
554 | 				onEdgeClick(ev) {
555 | 					const currentEdge = ev.item
556 | 					// 拖拽过程中，点击会点击到新增的边上
557 | 					if (this.addingEdge && this.edge == currentEdge) {
558 | 						this.graph.removeItem(this.edge)
559 | 						this.edge = null
560 | 						this.addingEdge = false
561 | 					}
562 | 				}
563 | 			})
564 | 			G6.registerBehavior('activate-node', {
565 | 				getDefaultCfg() {
566 | 					return {
567 | 						multiple: true
568 | 					};
569 | 				},
570 | 				getEvents() {
571 | 					return {
572 | 						'node:click': 'onNodeClick',
573 | 						'canvas:click': 'onCanvasClick'
574 | 					};
575 | 				},
576 | 				onNodeClick(e) {
577 | 					const graph = this.graph;
578 | 					const item = e.item;
579 | 					console.log('1111')
580 | 					if (item.hasState('active')) {
581 | 						graph.setItemState(item, 'active', false);
582 | 						return;
583 | 					}
584 | 					// this 上即可取到配置，如果不允许多个active，先取消其他节点的active状态
585 | 					if (!this.multiple) {
586 | 						this.removeNodesState();
587 | 					}
588 | 					// 置点击的节点状态为active
589 | 					_this.graph_id = item._cfg.id;
590 | 					_this.graph_lable = item._cfg.model.label;
591 | 					_this.graph_type = item._cfg.type;
592 | 					graph.setItemState(item, 'active', true);
593 | 				},
594 | 				onCanvasClick(e) {
595 | 					// shouldUpdate可以由用户复写，返回 true 时取消所有节点的active状态
596 | 					console.log('2223333')
597 | 
598 | 					if (this.shouldUpdate(e)) {
599 | 						this.removeNodesState();
600 | 					}
601 | 				},
602 | 				removeNodesState() {
603 | 					_this.graph_id = '';
604 | 					_this.graph_lable = '';
605 | 					_this.graph_type = '';
606 | 					_this.graph.findAllByState('active').forEach(node => {
607 | 						this.graph.setItemState(node, 'active', false);
608 | 					});
609 | 				}
610 | 			})
611 | 
612 | 			const graph = new G6.Graph({
613 | 				container: 'canvasBox',
614 | 				width: document.body.clientWidth - 540,
615 | 				height: document.body.clientHeight - 140,
616 | 				modes: {
617 | 					default: ['click-add-node', 'click-select', 'click-add-edge', 'drag-node', 'activate-node'], //'click-add-edge' 新增先的behiver
618 | 				},
619 | 				defaultEdge: {
620 | 					shape: 'quadratic',
621 | 					size: 1,
622 | 					endArrow: true
623 | 				},
624 | 				edgeStyle: {
625 | 					default: {
626 | 						stroke: '#aaa',
627 | 						endArrow: true
628 | 					}
629 | 				},
630 | 			});
631 | 
632 | 			graph.data(this.nodeData)
633 | 			graph.render()
634 | 			graph.setMode('default')
635 | 
636 | 			this.graph = graph
637 | 
638 | 
639 | 		}
640 | 	}
641 | </script>
642 | 
643 | <style scoped lang="scss">
644 | 	.header-box {
645 | 		background: beige;
646 | 	}
647 | 
648 | 	.footer {
649 | 		background: beige;
650 | 	}
651 | 
652 | 	.main-box {
653 | 		padding: 0;
654 | 		width: auto;
655 | 		height: 100%;
656 | 	}
657 | 
658 | 	.info-box {
659 | 		float: right;
660 | 		width: 300px;
661 | 		height: 100%;
662 | 		background: #fafafa;
663 | 		border-left: 1px solid #e8e8e8;
664 | 	}
665 | 
666 | 	.center-box {
667 | 		float: left;
668 | 		width: auto;
669 | 	}
670 | 
671 | 	.item-box {
672 | 		background: #fafafa;
673 | 		border-right: 1px solid #e8e8e8;
674 | 	}
675 | 
676 | 
677 | 	.nav-box {
678 | 		margin-top: 20px;
679 | 		text-align: center;
680 | 		width: auto;
681 | 	}
682 | 
683 | 	/*右侧内容样式*/
684 | 	.tab-box {
685 | 		width: 100%;
686 | 		height: 400px;
687 | 	}
688 | 
689 | 	.show-box {
690 | 		width: 100%;
691 | 		height: 200px;
692 | 		border-top: 1px solid #e8e8e8;
693 | 		padding: 10px 0;
694 | 	}
695 | 
696 | 	/** 右侧tab样式*/
697 | 	.tab-title {
698 | 		float: left;
699 | 		width: 30px;
700 | 		height: 400px;
701 | 		border-right: 1px solid #e8e8e8;
702 | 	}
703 | 
704 | 	.tab-item {
705 | 		float: left;
706 | 		width: 265px;
707 | 		height: 400px;
708 | 	}
709 | 
710 | 	.tab-item-title {
711 | 		width: 30px;
712 | 		text-align: center;
713 | 		font-size: 16px;
714 | 		color: #666;
715 | 		padding: 10px 0;
716 | 		cursor: pointer;
717 | 		border-bottom: 1px solid #e8e8e8;
718 | 		transition: all .8s;
719 | 	}
720 | 
721 | 	.tab-active {
722 | 		background: #409eff;
723 | 		color: #fff;
724 | 	}
725 | 
726 | 	.tab-item-content {
727 | 		width: auto;
728 | 		height: 300px;
729 | 		overflow-y: auto;
730 | 	}
731 | 
732 | 	.search-box {
733 | 		width: auto;
734 | 		height: 50px;
735 | 		line-height: 50px;
736 | 
737 | 	}
738 | 
739 | 	.check-btn {
740 | 		width: auto;
741 | 		height: 50px;
742 | 		line-height: 50px;
743 | 		text-align: center;
744 | 	}
745 | 
746 | 	.permission-list {
747 | 		width: auto;
748 | 		padding: 5px;
749 | 		background: #fff;
750 | 		margin-top: 2px;
751 | 		cursor: pointer;
752 | 	}
753 | 
754 | 	.permission-list:hover {
755 | 		background: #cbe2fa;
756 | 	}
757 | 
758 | 	.permission-list:active {
759 | 		background: #cbe2fa;
760 | 	}
761 | 
762 | 	.permission-list-active {
763 | 		background: #cbe2fa
764 | 	}
765 | </style>
766 | 


--------------------------------------------------------------------------------
/src/views/home.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<div class="box">
  3 | 		
  4 | 		<div id="polina">
  5 | 			<h1 style="text-align: center">让数据栩栩如生</h1>
  6 | 			<p style="text-align: center;margin-top: 20px">致力于表单引擎与数据可视化分析引擎</p>
  7 | 			<div style="margin-top: 60px;width: 100%;height: 60px;text-align: center;position:relative;background: none">
  8 | 				<router-link to="/formDesign">
  9 | 					<button class="btn" style="left: 50%;position: absolute;margin-left: -210px">表单引擎</button>
 10 | 				</router-link>
 11 | 				<router-link to="/g6Editor">
 12 | 					<button class="btn" style="margin-left: 50%;position: absolute;left: -60px;">流程图引擎</button>
 13 | 				</router-link>
 14 | 
 15 | 				<router-link to="/formDesign">
 16 | 					<button class="btn" style="position:absolute;margin-left: 50%;left: 100px;">数据可视化</button>
 17 | 				</router-link>
 18 | 
 19 | 				<router-link to="/flowDesign">
 20 | 					<button class="btn" style="margin-left: 50%;position: absolute;left: 260px;">流程图引擎2</button>
 21 | 				</router-link>
 22 | 			</div>
 23 | 
 24 | 		</div>
 25 | 	</div>
 26 | </template>
 27 | 
 28 | <script>
 29 | 	export default {
 30 | 		name: "home"
 31 | 	}
 32 | </script>
 33 | 
 34 | <style scoped lang="scss">
 35 | 	body {
 36 | 		margin: 0;
 37 | 		background: transparent;
 38 | 	}
 39 | 
 40 | 	video {
 41 | 		position: fixed;
 42 | 		right: 0;
 43 | 		bottom: 0;
 44 | 		min-width: 100%;
 45 | 		min-height: 100%;
 46 | 		width: auto;
 47 | 		height: auto;
 48 | 		z-index: -100;
 49 | 		background-size: cover;
 50 | 	}
 51 | 
 52 | 	.box {
 53 | 		font-family: Agenda-Light, Agenda Light, Agenda, Arial Narrow, sans-serif;
 54 | 		font-weight: 100;
 55 | 		background: rgba(0, 0, 0, 0.3);
 56 | 		color: white;
 57 | 		width: 100%;
 58 | 		height: 100%;
 59 | 		float: right;
 60 | 		font-size: 1.2rem;
 61 | 	}
 62 | 
 63 | 	h1 {
 64 | 		font-size: 3rem;
 65 | 		text-transform: uppercase;
 66 | 		margin-top: 0;
 67 | 		letter-spacing: .3rem;
 68 | 	}
 69 | 
 70 | 	a {
 71 | 		display: inline-block;
 72 | 		color: #fff;
 73 | 		text-decoration: none;
 74 | 		background: rgba(0, 0, 0, 0.5);
 75 | 		padding: .5rem;
 76 | 		transition: .6s background;
 77 | 	}
 78 | 
 79 | 	a:hover {
 80 | 		background: rgba(0, 0, 0, 0.9);
 81 | 	}
 82 | 
 83 | 	@media screen and (max-width: 500px) {
 84 | 		div {
 85 | 			width: 70%;
 86 | 		}
 87 | 	}
 88 | 
 89 | 	@media screen and (max-device-width: 800px) {
 90 | 		#bgvid {
 91 | 			display: none;
 92 | 		}
 93 | 	}
 94 | 
 95 | 	#polina {
 96 | 		width: 100%;
 97 | 		margin-top: 20%;
 98 | 	}
 99 | 
100 | 	.btn {
101 | 		float: left;
102 | 		border: none;
103 | 		outline: none;
104 | 		color: #fff;
105 | 		padding: 8px 26px;
106 | 		font-size: 14px;
107 | 		background: linear-gradient(-135deg, #935EFF, #625EFF);
108 | 		border-radius: 4px;
109 | 		cursor: pointer;
110 | 
111 | 	}
112 | </style>
113 | 


--------------------------------------------------------------------------------
/src/views/test.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div style="height: 100%">
  3 | 
  4 | 
  5 |         <div class="left-box">
  6 |             左侧操作区
  7 |         </div>
  8 |         <div class="right-box">
  9 |             <div class="nav-box">
 10 |                 顶部区域
 11 |             </div>
 12 |             <div class="center-box">
 13 |                 <div id="mountNode"></div>
 14 | 
 15 | 
 16 |             </div>
 17 |         </div>
 18 |     </div>
 19 | </template>
 20 | 
 21 | <script>
 22 |     export default {
 23 |         name: "test",
 24 |         data(){
 25 |             return{
 26 |                 graph:'',
 27 |             }
 28 |         },
 29 |         methods:{
 30 | 
 31 |             canvasEvent(){
 32 | 
 33 |             },
 34 | 
 35 |             /** 画图的svg方法*/
 36 | 
 37 | 
 38 | 
 39 | 
 40 |     },
 41 |         mounted(){
 42 |             this.G6.registerNode('diamond', {
 43 |                 draw(cfg, group) {
 44 |                     if(cfg.color == undefined){
 45 |                         cfg.color = '#000'
 46 |                     }
 47 |                     const shape = group.addShape('path', {
 48 |                         attrs: {
 49 |                             path: this.getPath(cfg,group), // 因为增加了 update 所以要把共用方法提取出来
 50 |                             fill: cfg.color // 颜色应用到边上，如果应用到填充，则使用 fill: cfg.color
 51 |                         }
 52 |                     });
 53 |                     if(cfg.label) { // 如果有文本
 54 |                         // 如果需要复杂的文本配置项，可以通过 labeCfg 传入
 55 |                         // const style = (cfg.labelCfg && cfg.labelCfg.style) || {};
 56 |                         // style.text = cfg.label;
 57 |                         group.addShape('text', {
 58 |                             // attrs: style
 59 |                             attrs: {
 60 |                                 x: 0, // 居中
 61 |                                 y: 0,
 62 |                                 textAlign: 'center',
 63 |                                 textBaseline: 'middle',
 64 |                                 text: cfg.label,
 65 |                                 fill: '#666'
 66 |                             }
 67 |                         });
 68 |                     }
 69 |                     return shape;
 70 |                 },
 71 |                 getPath(cfg,group){
 72 |                     const size = cfg.size || [40, 40]; // 如果没有 size 时的默认大小
 73 |                     const width = size[0];
 74 |                     const height = size[1];
 75 | 
 76 |                     const shape = group.addShape('path', {
 77 |                         attrs: {
 78 |                             //  / 1 \
 79 |                             // 4     2
 80 |                             //  \ 3 /
 81 |                             // path中的M、L等是SVG中的概念
 82 |                             path: [
 83 |                                 ['M', 0, 0 - height / 2], // 上部顶点
 84 |                                 ['L', width / 2, 0], // 右侧点
 85 |                                 ['L', 0, height / 2], // 下部
 86 |                                 ['L', - width / 2, 0], // 左侧
 87 |                                 ['Z'] // 封闭
 88 |                             ],
 89 | 
 90 |                         }
 91 |                     });
 92 |                     return shape
 93 |                 },
 94 | 
 95 | 
 96 |                 update(cfg, node) {
 97 |                     console.log('1111112222')
 98 |                     const group = node.getContainer(); // 获取容器
 99 |                     const shape = group.get('children')[0]; // 按照添加的顺序
100 |                     const style = {
101 |                         path: this.getPath(),
102 |                         stroke: cfg.color
103 |                     };
104 |                     shape.attr(style); // 更新属性
105 |                     // 更新文本的逻辑类似，但是需要考虑 cfg.label 是否存在的问题
106 |                     // 通过 label.attr() 更新文本属性即可
107 |                 }
108 | 
109 | 
110 | 
111 |             });
112 |             // this.G6.registerNode('inner-animate', {
113 |             //     afterDraw(cfg, group) {
114 |             //         const size = cfg.size;
115 |             //         const width = size[0] - 14;
116 |             //         const height = size[1] - 14;
117 |             //         // 添加图片
118 |             //         const image = group.addShape('image', {
119 |             //             attrs: {
120 |             //                 x: - width / 2,
121 |             //                 y: - height / 2,
122 |             //                 width: width,
123 |             //                 height: height,
124 |             //                 img: cfg.img
125 |             //             }
126 |             //         });
127 |             //         // 执行旋转动画
128 |             //         image.animate({
129 |             //             onFrame(ratio) {
130 |             //                 const matrix = Util.mat3.create();
131 |             //                 const toMatrix = Util.transform(matrix, [
132 |             //                     ['r', ratio * Math.PI * 2]
133 |             //                 ]) ;
134 |             //                 return {
135 |             //                     matrix: toMatrix
136 |             //                 };
137 |             //             },
138 |             //             repeat: true
139 |             //         }, 3000, 'easeCubic');
140 |             //     }
141 |             // }, 'rect');
142 |             this.G6.registerEdge('hvh', {
143 |                 draw(cfg, group) {
144 |                     const startPoint = cfg.startPoint;
145 |                     const endPoint = cfg.endPoint;
146 |                     const shape = group.addShape('path', {
147 |                         attrs: {
148 |                             stroke: '#333',
149 |                             path: [
150 |                                 ['M', startPoint.x, startPoint.y],
151 |                                 ['L', endPoint.x / 3 + 2 / 3 * startPoint.x , startPoint.y],
152 |                                 ['L', endPoint.x / 3 + 2 / 3 * startPoint.x , endPoint.y],
153 |                                 ['L', endPoint.x, endPoint.y]
154 |                             ]
155 |                         }
156 |                     });
157 |                     return shape;
158 |                 }
159 |             });
160 |             this.G6.registerEdge('line-growth', {
161 |                 afterDraw(cfg, group) {
162 |                     const shape = group.get('children')[0];
163 |                     const length = shape.getTotalLength();
164 |                     shape.animate({
165 |                         onFrame(ratio) {
166 |                             const startLen = ratio * length;
167 |                             const cfg = {
168 |                                 lineDash: [startLen, length - startLen]
169 |                             };
170 |                             return cfg;
171 |                         },
172 |                         repeat: true
173 |                     }, 2000);
174 |                 },
175 |                 setState(name, value, item) {
176 |                     const group = item.getContainer();
177 |                     const shape = group.get('children')[0]; // 顺序根据 draw 时确定
178 |                     if(name === 'active') {
179 |                         if(value) {
180 |                             shape.attr('stroke', 'red');
181 |                         } else {
182 |                             shape.attr('stroke', '#333');
183 |                         }
184 |                     }
185 |                     if (name === 'selected') {
186 |                         if(value) {
187 |                             shape.attr('lineWidth', 3);
188 |                         } else {
189 |                             shape.attr('lineWidth', 2);
190 |                         }
191 |                     }
192 |                 }
193 |             }, 'cubic');
194 | 
195 |             const data = {
196 |                 nodes: [{
197 |                     id: 'node1',
198 |                     x: 100,
199 |                     y: 200,
200 |                     anchorPoints:[
201 |                         [0, 0.5],  [1, 0.5]
202 |                     ]
203 |                 },{
204 |                     id: 'node2',
205 |                     x: 200,
206 |                     y: 100,
207 |                     anchorPoints:[
208 |                         [0, 0.5],  [1, 0.5]
209 |                     ]
210 |                 },{
211 |                     id: 'node3',
212 |                     x: 200,
213 |                     y: 300,
214 |                     anchorPoints:[
215 |                         [0, 0.5],  [1, 0.5]
216 |                     ]
217 |                 }],
218 |                 edges: [{
219 |                     id: 'edge1',
220 |                     target: 'node2',
221 |                     source: 'node1',
222 |                     shape: 'line-growth'
223 |                 },{
224 |                     id: 'edge2',
225 |                     target: 'node3',
226 |                     source: 'node1',
227 |                     shape: 'line-growth'
228 |                 }]
229 |             };
230 | 
231 | 
232 | 
233 | 
234 |             const graph = new this.G6.Graph({
235 |                 container: 'mountNode',
236 |                 width: 800,
237 |                 height: 800,
238 |                 modes: {
239 |                     default: ['click-select','drag-canvas', 'zoom-canvas',],
240 |                     // edit: ['']
241 |                 }
242 |             });
243 | 
244 |             graph.data(data);
245 |             graph.render();
246 | 
247 | 
248 | 
249 |             // graph.on('click', ev => {
250 |             //     const item = ev.item;
251 |             //     console.log(item)
252 |             //
253 |             // })
254 |             graph.on('node:click', ev => {
255 |                 const shape = ev.target;
256 |                 console.log(shape)
257 |                 const node = ev.item;
258 |                 let cfg = {x: 250, y: 100, color: '#ff6', shape: 'diamond'} // 添加颜色
259 |                 console.log(cfg)
260 |                 console.log(node)
261 |                 graph.update(cfg,node)
262 | 
263 |                 console.log('111111')
264 |             });
265 | 
266 |             graph.on('edge:mouseenter' ,ev=> {
267 |                 const edge = ev.item;
268 |                 graph.setItemState(edge, 'active', true);
269 |             });
270 | 
271 |             graph.on('edge:mouseleave' , ev=> {
272 |                 const edge = ev.item;
273 |                 graph.setItemState(edge, 'active', false);
274 |             });
275 | 
276 | 
277 |         }
278 |     }
279 | </script>
280 | 
281 | <style scoped lang="scss">
282 | 
283 |     /** 顶部区域*/
284 |     .nav-box{
285 |         width: 100%;
286 |         height: 60px;
287 |         background: azure;
288 |     }
289 |     .left-box{
290 |         float: left;
291 |         width: 200px;
292 |         height: 100%;
293 |         background: azure;
294 |     }
295 |     .right-box{
296 |         margin-left: 200px;
297 |         width: auto;
298 |         height: 100%;
299 |     }
300 |     .center-box{
301 |         width: 100%;
302 |         height:100%;
303 | 
304 |     }
305 | 
306 | </style>
307 | 


--------------------------------------------------------------------------------
/src/views/test1.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div style="height: 100%;overflow: hidden">
  3 |         <el-container style="height: 100%">
  4 |             <el-header>Header</el-header>
  5 |             <el-container>
  6 |                 <el-aside width="300px" style="border:1px solid #eee;">
  7 |                     <div class="nav-box"
  8 |                          v-for="(item,index) in itemListL" :key="index"
  9 |                         @click="checkItem(index)">
 10 |                         <img
 11 |                                 draggable="false"
 12 |                                 :src="item.src"
 13 |                                 class="getItem"
 14 |                                 :label="item.label"
 15 |                         >
 16 |                     </div>
 17 |                     <!--<el-button type="primary" @click="addBtn">新增节点</el-button>-->
 18 |                 </el-aside>
 19 |                 <el-container>
 20 |                     <el-main style="border: 1px solid #eee;border-radius: 5px">
 21 |                         <div class="center-box">
 22 | 
 23 |                             <div id="mountNode"></div>
 24 | 
 25 | 
 26 | 
 27 |                         </div>
 28 |                         <div class="right-box">
 29 |                             <el-form ref="form" label-width="80px">
 30 | 
 31 |                                 <el-form-item label="节点/边 文本内容">
 32 |                                     <el-input v-model="graph_lable"></el-input>
 33 |                                 </el-form-item>
 34 |                             </el-form>
 35 | 
 36 |                             <el-button type="primary" @click="changeItem">确认修改</el-button>
 37 |                             <el-button type="danger" style="margin-left: 15px" @click="delItem">删除选中</el-button>
 38 |                         </div>
 39 |                     </el-main>
 40 |                     <el-footer>Footer</el-footer>
 41 |                 </el-container>
 42 |             </el-container>
 43 |         </el-container>
 44 | 
 45 |     </div>
 46 | 
 47 | </template>
 48 | 
 49 | <script>
 50 |     import G6 from '@antv/g6';
 51 |     export default {
 52 |         name: "test1",
 53 | 
 54 |         data(){
 55 |             return{
 56 |                 graph:'',
 57 |                 graph_id:'',
 58 |                 graph_lable:'',
 59 |                 graph_type:'',
 60 | 
 61 | 
 62 | 
 63 |                 itemListL:[
 64 |                     {
 65 |                         type:'node',
 66 |                         src:'https://gw.alipayobjects.com/zos/rmsportal/ZnPxbVjKYADMYxkTQXRi.svg',
 67 |                         label:'起止节点',
 68 |                         model:{
 69 |                             id:'',
 70 |                             x: 300,
 71 |                             y: 200,
 72 |                             size: 60,
 73 |                             label: '起止节点',
 74 |                             shape:'circle',
 75 |                             style: {
 76 |                                 stroke: '#ffc069',
 77 |                                 fill: '#fff3ea'
 78 |                             }
 79 |                         }
 80 |                     },
 81 |                     {
 82 |                         type:'node',
 83 |                         src:'https://gw.alipayobjects.com/zos/rmsportal/wHcJakkCXDrUUlNkNzSy.svg',
 84 |                         label:'常规节点',
 85 |                         model:{
 86 |                             id:'',
 87 |                             x: 300,
 88 |                             y: 200,
 89 |                             size: [70, 40],
 90 |                             label: '常规节点',
 91 |                             shape:'rect',
 92 | 
 93 |                             style: {
 94 |                                 stroke: '#1890ff',
 95 |                                 fill: '#e8f8ff',
 96 |                                 radius: 5
 97 |                             }
 98 |                         }
 99 |                     },
100 |                     {
101 |                         type:'node',
102 |                         src:'https://gw.alipayobjects.com/zos/rmsportal/SnWIktArriZRWdGCnGfK.svg',
103 |                         label:'分叉节点',
104 |                         model:{
105 |                             id:'',
106 |                             x: 300,
107 |                             y: 200,
108 |                             size: [60,60],
109 |                             label: '分叉节点',
110 |                             shape:'diamond',
111 |                         }
112 |                     },
113 |                     {
114 |                         type:'node',
115 |                         src:'https://gw.alipayobjects.com/zos/rmsportal/rQMUhHHSqwYsPwjXxcfP.svg',
116 |                         label:'模型节点',
117 |                         model:{
118 |                                 id:'',
119 |                                 x: 300,
120 |                                 y: 200,
121 |                                 size: [70, 40],
122 |                                 label: '模型节点',
123 |                                 shape:'rect',
124 |                                 style: {
125 |                                     stroke: '#b37feb',
126 |                                     fill: '#f9f1ff',
127 |                                     radius: 5
128 |                                 }
129 |                         }
130 |                     },
131 |                 ]
132 |             }
133 |         },
134 |         methods:{
135 |             delItem(){
136 |                 const item = this.graph.findById(this.graph_id)
137 |                 this.graph.removeItem(item)
138 |             },
139 |             changeItem(){
140 |                 const item = this.graph.findById(this.graph_id)
141 |                 let  model =  item._cfg.model
142 |                 model.label = this.graph_lable
143 |                 this.graph.updateItem(item, model)
144 |             },
145 |             checkItem(_index){
146 |                 console.log(_index);
147 |                 this.itemListL[_index].model.id = G6.Util.uniqueId()
148 |                 let model = JSON.parse(JSON.stringify(this.itemListL[_index].model))
149 | 
150 |                 this.graph.addItem('node',model)
151 |             }
152 |         },
153 |         mounted(){
154 |             //画图 菱形
155 |            let  _this = this
156 | 
157 |             G6.registerNode('diamond',{
158 |                 draw(cfg, group) {
159 |                     const size = cfg.size || [60, 60]; // 如果没有 size 时的默认大小
160 |                     const width = size[0];
161 |                     const height = size[1];
162 |                     console.log('222222')
163 |                     console.log(cfg)
164 |                     const shape = group.addShape('path', {
165 |                         attrs: {
166 |                             //  / 1 \
167 |                             // 4     2
168 |                             //  \ 3 /
169 |                             // path中的M、L等是SVG中的概念
170 |                             path: [
171 |                                 ['M', 0, 0 - height / 2], // 上部顶点
172 |                                 ['L', width / 2, 0], // 右侧点
173 |                                 ['L', 0, height / 2], // 下部
174 |                                 ['L', - width / 2, 0], // 左侧
175 |                                 ['Z'] // 封闭
176 |                             ],
177 | 
178 |                             stroke:'#5cdbd3',   // 颜色应用到边上，如果应用到填充，则使用 fill: cfg.color
179 |                             fill:'#e8fffb',
180 |                             radius: 5 ,
181 |                         }
182 |                     });
183 |                     if(cfg.label) { // 如果有文本
184 |                         // 如果需要复杂的文本配置项，可以通过 labeCfg 传入
185 |                         // const style = (cfg.labelCfg && cfg.labelCfg.style) || {};
186 |                         // style.text = cfg.label;
187 |                         group.addShape('text', {
188 |                             // attrs: style
189 |                             attrs: {
190 |                                 x: 0, // 居中
191 |                                 y: 0,
192 |                                 textAlign: 'center',
193 |                                 textBaseline: 'middle',
194 |                                 text: cfg.label,
195 |                                 fill: '#666'
196 |                             }
197 |                         });
198 |                     }
199 |                     return shape;
200 |                 }
201 |             })
202 |             G6.registerBehavior('click-add-edge', {
203 |                 getEvents() {
204 |                     return {
205 |                         'node:click': 'onClick' ,
206 |                         mousemove: 'onMousemove',
207 |                         'edge:click': 'onEdgeClick' // 点击空白处，取消边
208 |                     };
209 |                 },
210 |                 onClick(ev) {
211 |                     const node = ev.item;
212 |                     const graph = this.graph;
213 |                     const point = {x: ev.x, y: ev.y};
214 |                     const model = node.getModel();
215 |                     if (this.addingEdge && this.edge) {
216 |                         graph.updateItem(this.edge, {
217 |                             target: model.id
218 |                         });
219 | 
220 |                         this.edge = null;
221 |                         this.addingEdge = false;
222 |                     } else {
223 |                         this.edge = graph.addItem('edge', {
224 |                             source: model.id,
225 |                             target: point
226 |                         });
227 |                         this.addingEdge = true;
228 |                     }
229 | 
230 | 
231 |                 },
232 |                 onMousemove(ev) {
233 |                     const point = {x: ev.x, y: ev.y};
234 |                     if (this.addingEdge && this.edge) {
235 |                         this.graph.updateItem(this.edge, {
236 |                             target: point
237 |                         });
238 |                     }
239 |                 },
240 |                 onEdgeClick(ev) {
241 |                     const currentEdge = ev.item
242 |                     // 拖拽过程中，点击会点击到新增的边上
243 |                     if (this.addingEdge && this.edge == currentEdge) {
244 |                         graph.removeItem(this.edge)
245 |                         this.edge = null
246 |                         this.addingEdge = false
247 |                     }
248 |                 }
249 |             })
250 |             G6.registerBehavior('activate-node', {
251 |                 getDefaultCfg() {
252 |                     return {
253 |                         multiple: true
254 |                     };
255 |                 },
256 |                 getEvents() {
257 |                     return {
258 |                         'node:click': 'onNodeClick',
259 |                         'canvas:click': 'onCanvasClick'
260 |                     };
261 |                 },
262 |                 onNodeClick(e) {
263 |                     const graph = this.graph;
264 |                     const item = e.item;
265 |                     console.log('1111')
266 |                     if (item.hasState('active')) {
267 |                         graph.setItemState(item, 'active', false);
268 |                         return;
269 |                     }
270 |                     // this 上即可取到配置，如果不允许多个active，先取消其他节点的active状态
271 |                     if (!this.multiple) {
272 |                         this.removeNodesState();
273 |                     }
274 |                     // 置点击的节点状态为active
275 |                     _this.graph_id = item._cfg.id;
276 |                     _this.graph_lable = item._cfg.model.label;
277 |                     _this.graph_type = item._cfg.type;
278 |                     graph.setItemState(item, 'active', true);
279 |                 },
280 |                 onCanvasClick(e) {
281 |                     // shouldUpdate可以由用户复写，返回 true 时取消所有节点的active状态
282 |                     console.log('2223333')
283 | 
284 |                     if (this.shouldUpdate(e)) {
285 |                         this.removeNodesState();
286 |                     }
287 |                 },
288 |                 removeNodesState() {
289 |                     _this.graph_id ='';
290 |                     _this.graph_lable = '';
291 |                     _this.graph_type = '';
292 |                     _this.graph.findAllByState('active').forEach(node => {
293 |                        this.graph.setItemState(node, 'active', false);
294 |                     });
295 |                 }
296 |             })
297 | 
298 | 
299 | 
300 |             const data = {
301 |                 nodes: [],
302 | 
303 |                 edges: []
304 |             }
305 | 
306 |             const graph = new G6.Graph({
307 |                 container: 'mountNode',
308 |                 width: 800,
309 |                 height: 800,
310 |                 modes: {
311 |                     default: ['click-add-node', 'click-select','click-add-edge','drag-node','activate-node'],        //'click-add-edge' 新增先的behiver
312 |                 },
313 |                 defaultEdge: {
314 |                     shape: 'quadratic',
315 |                     size: 1,
316 |                     endArrow: true
317 |                 },
318 |                 edgeStyle: {
319 |                     default: {
320 |                         stroke: '#aaa',
321 |                         endArrow: true
322 |                     }
323 |                 },
324 |             });
325 | 
326 |             graph.data(data)
327 |             graph.render()
328 |             graph.setMode('default')
329 | 
330 |             this.graph = graph
331 | 
332 |             // graph.addShape('path', {
333 |             //     attrs: {
334 |             //         startArrow: {
335 |             //             path: 'M 10,0 L -10,-10 L -10,10 Z',  // 自定义箭头为中心点在(0, 0)，指向 x 轴正方向的path
336 |             //             d: 10
337 |             //         },
338 |             //         endArrow: {
339 |             //             path: 'M 10,0 L -10,-10 L -10,10 Z',  // 自定义箭头为中心点在(0, 0)，指向 x 轴正方向的path
340 |             //             d: 10
341 |             //         },
342 |             //         path: [
343 |             //             [ 'M', 100, 100 ],
344 |             //             [ 'L', 200, 200 ]
345 |             //         ],
346 |             //         stroke: '#000',
347 |             //         lineWidth: 8
348 |             //     }
349 |             // });
350 | 
351 | 
352 |             // graph.on('canvas:click', ev => {
353 |             //     console.log(ev)
354 |             //     console.log('2222')
355 |             //     const shape = this.shape
356 |             //
357 |             // });
358 |             // graph.on('node:click', ev => {
359 |             //     console.log(ev)
360 |             //     console.log('2222')
361 |             //     const shape = ev.target;
362 |             //     const node = ev.item;
363 |             //
364 |             //     if (node.hasState('active')) {
365 |             //         graph.setItemState(node, 'active', false);
366 |             //         return;
367 |             //     }
368 |             //     // this 上即可取到配置，如果不允许多个active，先取消其他节点的active状态
369 |             //     if (!this.multiple) {
370 |             //         this.removeNodesState();
371 |             //     }
372 |             //     // 置点击的节点状态为active
373 |             //     graph.setItemState(node, 'active', true);
374 |             //
375 |             //
376 |             //
377 |             //     this.graph_id = node._cfg.id;
378 |             //     this.graph_lable = node._cfg.model.label;
379 |             //     this.graph_type = node._cfg.type;
380 |             //     console.log(node._cfg.id)
381 |             // });
382 |             //
383 |             // graph.on('edge:click', ev => {
384 |             //     const shape = ev.target;
385 |             //     const node = ev.item;
386 |             //     this.graph_id = node._cfg.id;
387 |             //     this.graph_lable = node._cfg.model.label;
388 |             //     this.graph_type = node._cfg.type;
389 |             //
390 |             // });
391 | 
392 | 
393 | 
394 |         }
395 |     }
396 | </script>
397 | 
398 | <style scoped lang="scss">
399 |     .center-box{
400 |         float: left;
401 |         width:70%;
402 |         height: 100%;
403 |     }
404 |     .right-box{
405 |         float: left;
406 |         width: 20%;
407 |         height: 100%;
408 |         background: #fff;
409 |         border-left: 1px solid #eee;
410 |     }
411 |     #mountNode{
412 |         width: 100%;
413 |         height: 100%;
414 |     }
415 |     .nav-box{
416 |         margin-top: 20px;
417 |         text-align: center;
418 |         width: auto;
419 |     }
420 | </style>
421 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
1 | // vue.config.js
2 | module.exports = {
3 |     publicPath: process.env.NODE_ENV === 'production'
4 |         ? './'
5 |         : './'
6 | 
7 | }
8 | 


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