update 流程图

src/views/extend/processFlowView/components/ProcessDetail.vue

@@ -17,7 +17,8 @@
 				下一步
 				<i class="el-icon-right el-icon--right"></i>
 			</el-button>
-			<el-button class="btn-refresh" @click="handleUpdateLayout" prefix-icon="el-icon-refresh">刷新布局</el-button>
+			<el-button class="btn-refresh" @click="handleUpdateLayout" icon="el-icon-refresh">
+				刷新布局</el-button>
 			<el-button type="primary" plain class="btn-create" icon="el-icon-plus" @click="handleAdd">
 				新建工序
 			</el-button>
@@ -97,11 +98,16 @@ export default {
 					},
 				],
 			],
-			updateUrl: '/extend/process-flow-det/update',
-			addUrl: '/extend/process-flow-det/create',
+			updateUrl: '/extend/process-flow-view/update',
+			addUrl: '/extend/process-flow-view/create',
 			// pageUrl: '/extend/process-flow-det/get',
-			infoUrl: '/extend/process-flow-det/get',
-			jsonData: '',
+			infoUrl: '/extend/process-flow-view/get',
+			layout: {
+				id: null,
+				flowId: null,
+				content: '',
+				createTime: null
+			},
 
 		};
 	},
@@ -121,85 +127,9 @@ export default {
 			immediate: false,
 		},
 	},
-	mounted() {
-		const fakeJson = {
-			"cells": [
-				{
-					"position": {
-						"x": 20,
-						"y": 30
-					},
-					"size": {
-						"width": 240,
-						"height": 100
-					},
-					"shape": "process-node",
-					"id": "4783abf7-9a4a-47f7-aaed-37e906e789c0",
-					"tools": {
-						"items": [
-							{
-								"name": "button-remove"
-							}
-						]
-					},
-					"attrs": {
-						"detName": {
-							"text": "klj"
-						},
-						"sectionName": {
-							"text": "default"
-						},
-						"detId": {
-							"text": "1716703957541310466"
-						},
-						"processId": {
-							"text": "1715253265454723073"
-						}
-					},
-					"zIndex": 2
-				},
-				{
-					"position": {
-						"x": 290,
-						"y": 30
-					},
-					"size": {
-						"width": 240,
-						"height": 100
-					},
-					"shape": "process-node",
-					"id": "3a5c79f6-0f85-403e-b249-843d92488c29",
-					"tools": {
-						"items": [
-							{
-								"name": "button-remove"
-							}
-						]
-					},
-					"attrs": {
-						"detName": {
-							"text": "jkljkl"
-						},
-						"detDesc": {
-							"text": "hallo ich bin Maria"
-						},
-						"sectionName": {
-							"text": "default"
-						},
-						"detId": {
-							"text": "1716704220322844673"
-						},
-						"processId": {
-							"text": "1715253265454723073"
-						}
-					},
-					"zIndex": 3
-				}
-			]
-		}
-
+	activated() {
 		this.loadLayout().then(json => {
-			this.initGraph(fakeJson)
+			this.initGraph(json)
 		})
 
 		// const pn1 = graph.addNode({
@@ -389,8 +319,28 @@ export default {
 			this.graph = graph;
 		},
 
-		loadLayout() {
-			return Promise.resolve()
+		resetLayout() {
+			this.layout = {
+				id: null,
+				flowId: null,
+				content: '',
+				createTime: null
+			}
+		},
+
+		async loadLayout() {
+			const flowId = this.$route.params.id;
+			if (!flowId) return { cells: [] }
+			const { code, data } = await this.info({ id: flowId });
+			if (code == 0) {
+				if (data) {
+					this.layout = data;
+					return JSON.parse(data?.content) || { cells: [] };
+				}
+				return { cells: [] };
+			}
+			this.resetLayout();
+			return Promise.reject(this.infoUrl + ' 接口出错!');
 		},
 
 		handleToJson() { },
@@ -403,8 +353,20 @@ export default {
 			}
 		},
 
-		handleUpdateLayout() {
+		async handleUpdateLayout() {
+			this.layout.content = JSON.stringify(this.graph.toJSON());
+			let code, data;
 			// 手动刷新布局
+			if (this.layout.id) {
+				({ code, data } = await this.put(this.layout));
+			} else {
+				this.layout.flowId = this.$route.params.id;
+				({ code, data } = await this.post(this.layout));
+			}
+
+			if (code == 0) {
+				this.$modal.msgSuccess('布局已刷新!')
+			}
 		},
 
 		reset() {