update process

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

@@ -9,6 +9,23 @@
 	<section class="process-graph">
 		<SearchBar :formConfigs="searchBarFormConfig" ref="search-bar" />
 
+		<div
+			class="btns"
+			style="text-align: right; position: absolute; top: 20px; right: 20px">
+			<el-button
+				type="primary"
+				plain
+				class="btn-create"
+				icon="el-icon-plus"
+				@click="createDet">
+				新建工序
+			</el-button>
+			<el-button class="btn-serialize" @click="graphToJson">序列化</el-button>
+			<el-button class="btn-antiserialize" @click="jsonToGraph">
+				反序列化
+			</el-button>
+		</div>
+
 		<div class="process-graph__panel" ref="panel"></div>
 	</section>
 </template>
@@ -25,6 +42,7 @@ export default {
 	props: {},
 	data() {
 		return {
+			graph: null,
 			searchBarFormConfig: [{ label: '工序列表' }],
 		};
 	},
@@ -48,6 +66,8 @@ export default {
 			y: 30,
 			processName: '工序00A',
 			workshopName: '工段1',
+            processDesc: 'test test test',
+			processId: '1',
 		});
 		const pn2 = graph.addNode({
 			shape: 'process-node',
@@ -55,6 +75,8 @@ export default {
 			y: 30,
 			processName: '工序00B',
 			workshopName: '工段1',
+            processDesc: 'test test test',
+			processId: '1',
 		});
 
 		const pn3 = graph.addNode({
@@ -63,6 +85,8 @@ export default {
 			y: 30,
 			processName: '工序00C',
 			workshopName: '工段1',
+            processDesc: 'test test test',
+			processId: '1',
 		});
 
 		const pn4 = graph.addNode({
@@ -71,6 +95,8 @@ export default {
 			y: 120,
 			processName: '工序00D',
 			workshopName: '工段1',
+            processDesc: 'test test test',
+			processId: '1',
 		});
 
 		const pn5 = graph.addNode({
@@ -79,6 +105,8 @@ export default {
 			y: 30,
 			processName: '工序00E',
 			workshopName: '工段1',
+            processDesc: 'test test test',
+			processId: '1',
 		});
 
 		graph.addEdge({
@@ -156,9 +184,19 @@ export default {
 				},
 			},
 		});
+
+		this.graph = graph;
 	},
 	computed: {},
-	methods: {},
+	methods: {
+		createDet() {},
+		jsonToGraph() {},
+		graphToJson() {
+			if (this.graph) {
+				console.log(JSON.stringify(this.graph.toJSON(), null, 2));
+			}
+		},
+	},
 };
 </script>
 
@@ -167,6 +205,7 @@ export default {
 	padding: 12px 20px 20px;
 	background: #fff;
 	border-radius: 8px;
+	position: relative;
 }
 
 .process-graph__panel {