src/utils/index.js

@@ -217,7 +217,7 @@ export function getTime(type) {
 export function debounce(func, wait, immediate) {
   let timeout, args, context, timestamp, result
 
-  const later = function() {
+  const later = function () {
     // 据上一次触发时间间隔
     const last = +new Date() - timestamp
 
@@ -234,7 +234,7 @@ export function debounce(func, wait, immediate) {
     }
   }
 
-  return function(...args) {
+  return function (...args) {
     context = this
     timestamp = +new Date()
     const callNow = immediate && !timeout
@@ -438,3 +438,7 @@ export function toCamelCase(str, upperCaseFirst) {
 
   return str;
 }
+
+export function IdToName(targetId, source, prop = 'name') {
+  return source.find(item => item.id === targetId)?.[prop]
+}

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

@@ -9,37 +9,20 @@
 	<section class="process-graph">
 		<SearchBar :formConfigs="searchBarFormConfig" ref="search-bar" />
 
-		<div
+		<div class="btns" style="text-align: right; position: absolute; top: 20px; right: 20px">
-			class="btns"
+			<el-button type="warning" @click="undo" plain v-if="allowUndo" :disabled="!allowUndo" icon="el-icon-back">
-			style="text-align: right; position: absolute; top: 20px; right: 20px">
-			<el-button
-				type="warning"
-				@click="undo"
-				plain
-				v-if="allowUndo"
-				:disabled="!allowUndo"
-				icon="el-icon-back">
 				撤销
 			</el-button>
-			<el-button
+			<el-button type="warning" @click="redo" plain v-if="allowRedo" :disabled="!allowRedo">
-				type="warning"
-				@click="redo"
-				plain
-				v-if="allowRedo"
-				:disabled="!allowRedo">
 				下一步
 				<i class="el-icon-right el-icon--right"></i>
 			</el-button>
-			<el-button
+			<el-button class="btn-refresh" @click="handleUpdateLayout" prefix-icon="el-icon-refresh">刷新布局</el-button>
-				type="primary"
+			<el-button type="primary" plain class="btn-create" icon="el-icon-plus" @click="handleAdd">
-				plain
-				class="btn-create"
-				icon="el-icon-plus"
-				@click="handleAdd">
 				新建工序
 			</el-button>
-			<el-button class="btn-serialize" @click="graphToJson">序列化</el-button>
+			<el-button class="btn-serialize" @click="handleToJson">序列化</el-button>
-			<el-button class="btn-antiserialize" @click="jsonToGraph">
+			<el-button class="btn-antiserialize" @click="handleLoadJson">
 				反序列化
 			</el-button>
 			<el-button class="btn-edit" @click="handleEdit">编辑</el-button>
@@ -51,12 +34,7 @@
 		<div class="process-graph__panel" ref="panel"></div>
 
 		<!-- 对话框(添加 / 修改) -->
-		<base-dialog
+		<base-dialog :dialogTitle="title" :dialogVisible="open" width="35%" @close="cancel" @cancel="cancel"
-			:dialogTitle="title"
-			:dialogVisible="open"
-			width="35%"
-			@close="cancel"
-			@cancel="cancel"
 			@confirm="submitForm">
 			<DialogForm v-if="open" ref="form" v-model="form" :rows="rows" />
 		</base-dialog>
@@ -65,8 +43,9 @@
 
 <script>
 import { Graph } from '@antv/x6';
-import ProcessNode from './ProcessNode';
+import ProcessNode, { createProcessNode, CACHE_NAME } from './ProcessNode';
 import DialogForm from '@/components/DialogForm';
+// import { IdToName } from '@/utils'
 
 Graph.registerNode('process-node', ProcessNode);
 
@@ -107,6 +86,7 @@ export default {
 						bind: {
 							filterable: true,
 						},
+						cache: CACHE_NAME
 					},
 				],
 				[
@@ -121,6 +101,8 @@ export default {
 			addUrl: '/extend/process-flow-det/create',
 			// pageUrl: '/extend/process-flow-det/get',
 			infoUrl: '/extend/process-flow-det/get',
+			jsonData: '',
+
 		};
 	},
 	watch: {
@@ -140,30 +122,85 @@ export default {
 		},
 	},
 	mounted() {
-		const graph = new Graph({
+		const fakeJson = {
-			container: this.$refs.panel,
+			"cells": [
-			grid: {
+				{
-				size: 10,
+					"position": {
-				visible: true,
+						"x": 20,
-			},
+						"y": 30
-			history: true,
+					},
-			selecting: {
+					"size": {
-				enabled: true,
+						"width": 240,
-				rubberband: true,
+						"height": 100
-				movable: true,
+					},
-				showNodeSelectionBox: true,
+					"shape": "process-node",
-				className: 'process-selected',
+					"id": "4783abf7-9a4a-47f7-aaed-37e906e789c0",
-			},
+					"tools": {
-			snapline: true,
+						"items": [
-			scroller: {
+							{
-				enabled: true,
+								"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
+				}
+			]
+		}
 
-		graph.on('node:click', ({ node }) => {
+		this.loadLayout().then(json => {
-			const { processId } = node.attrs;
+			this.initGraph(fakeJson)
-			console.log('node:click', processId.text);
+		})
-		});
 
 		// const pn1 = graph.addNode({
 		// 	shape: 'process-node',
@@ -306,17 +343,17 @@ export default {
 		// 	},
 		// });
 
-		const pn1 = graph.addNode({
+		// const pn1 = graph.addNode({
-			shape: 'process-node',
+		// 	shape: 'process-node',
-			x: 0,
+		// 	x: 0,
-			y: 0,
+		// 	y: 0,
-			detName: '测试工序', // 工序名称
+		// 	detName: '测试工序', // 工序名称
-			sectionName: 'default', // 工段
+		// 	sectionName: 'default', // 工段
-			detDesc: 'loremakdfkd...', // 工序说明
+		// 	detDesc: 'loremakdfkd...', // 工序说明
-			processId: 'p-1', // 工艺ID
+		// 	processId: 'p-1', // 工艺ID
-			detId: 'det-id-1', // 工序ID
+		// 	detId: 'det-id-1', // 工序ID
-			tools: [{ name: 'button-remove' }],
+		// 	tools: [{ name: 'button-remove' }],
-		});
+		// });
 
 		// const htmlNode = graph.addNode({
 		// 	x: 0,
@@ -335,24 +372,41 @@ export default {
 		// 		return ctn;
 		// 	},
 		// });
-
-		graph.on('cell:selected', ({ cell, options }) => {
-			console.log('cell:selected', cell, options);
-		});
-
-		this.graph = graph;
-
-		// console.log('selected:', this.graph.selection.widget.container)
 	},
 	computed: {},
 	methods: {
-		createDet() {},
+		initGraph(json) {
-		jsonToGraph() {},
+			const graph = new Graph({
-		graphToJson() {
+				container: this.$refs.panel,
+				grid: {
+					size: 10,
+					visible: true,
+				},
+				history: true
+			});
+			graph.fromJSON(json)
+
+			this.graph = graph;
+		},
+
+		loadLayout() {
+			return Promise.resolve()
+		},
+
+		handleToJson() { },
+
+		handleLoadJson() { },
+
+		handleDumpJson() {
 			if (this.graph) {
 				console.log(JSON.stringify(this.graph.toJSON(), null, 2));
 			}
 		},
+
+		handleUpdateLayout() {
+			// 手动刷新布局
+		},
+
 		reset() {
 			this.form = {
 				name: '', // 工序名称
@@ -361,21 +415,26 @@ export default {
 			};
 			this.resetForm('form');
 		},
+
 		/** 取消按钮 */
 		cancel() {
 			this.open = false;
 			this.reset();
 		},
+
 		handleAdd() {
 			this.reset();
 			this.open = true;
 			this.title = '添加工序';
 		},
+
 		handleEdit() {
 			this.open = true;
 			this.title = '编辑工序';
 		},
-		handleDelete(id) {},
+
+		handleDelete(id) { },
+
 		/** 提交按钮 */
 		submitForm() {
 			this.$refs['form'].validate((valid) => {
@@ -387,31 +446,28 @@ export default {
 					this.updateProcess();
 					return;
 				}
-				this.createProcess().then((id) => {
+
-					if (!id) return;
+				const flowId = this.getFlowId();
-					this.graph.addNode(
+				this.createProcess()
-						this.createProcessNode({
+					.then(({ id, name, sectionId, remark }) => {
-							flowId: this.flowId,
+						if (!id || !flowId) return null;
-							...this.form,
+						return createProcessNode({
+							flowId: flowId,
+							name, sectionId, remark,
 							id,
 						})
-					);
+					}
-				});
+					).then(node => {
+						if (!node) {
+							this.$modal.msgError('创建节点失败');
+							return;
+						};
+						this.graph.addNode(node);
+					});
+
 			});
 		},
-		createProcessNode({ flowId, name, id, remark, sectionId }) {
+
-			return {
-				shape: 'process-node',
-				x: 0,
-				y: 0,
-				detName: name, // 工序名称
-				sectionName: 'default', // 工段
-				detDesc: remark, // 工序说明
-				processId: flowId, // 工艺ID
-				detId: id, // 工序ID
-				tools: [{ name: 'button-remove' }],
-			};
-		},
 		updateProcess() {
 			return updateEquipmentType(this.form).then((response) => {
 				this.$modal.msgSuccess('修改成功');
@@ -419,23 +475,29 @@ export default {
 				// this.getList();
 			});
 		},
+
 		createProcess() {
-			const flowId = this.$route.params.id;
+			// const flowId = this.$route.params.id;
-			// const t = this.getFlowId(); // it also works
+			const flowId = this.getFlowId(); // it also works
 			if (!flowId) {
 				this.$modal.msgError('工艺ID不能为空');
 				return Promise.reject(null);
 			}
+			console.log('create process', this.form)
 			// 添加的提交
 			return this.post({ flowId: this.flowId, ...this.form }).then(
 				({ code, data }) => {
 					this.$modal.msgSuccess('新增成功');
 					this.open = false;
 					// this.getList();
-					return data;
+					return {
+						id: data, // 服务器返回的新建的工段id
+						...this.form,  // 保存一份 this.form 副本，当 open->false 时 this.form 里的信息就清空了
+					};
 				}
 			);
 		},
+
 		put(payload) {
 			return this.http(this.updateUrl, 'put', payload);
 		},

src/views/extend/processFlowView/components/ProcessNode.js

@@ -1,10 +1,9 @@
 import { Node, ObjectExt } from '@antv/x6';
+import { IdToName } from '@/utils'
+import cache from '@/utils/cache'
+import axios from '@/utils/request'
 
-
+export default class ProcessNode extends Node { }
-export default class ProcessNode extends Node {
-
-}
-
 ProcessNode.config({
     width: 240,
     height: 100,
@@ -47,8 +46,6 @@ ProcessNode.config({
             attrs: {
                 x: 20,
                 y: 30,
-                // fill: '#777',
-                // fontSize: 14
             },
         },
         {
@@ -57,22 +54,17 @@ ProcessNode.config({
             attrs: {
                 x: 115,
                 y: 30,
-                // fill: '#777',
-                // fontSize: 14
             },
         },
         {
             tagName: 'text',
             selector: 'detDesc',
-            // textContent: '工序00A',
             attrs: {
                 x: 26,
                 y: 80,
                 fill: '#777',
                 fontSize: 14,
                 fill: '#1a90fc',
-                // lengthAdjust: 'spacingAndGlyphs',
-                // textLength: 180
             },
         },
     ],
@@ -82,8 +74,41 @@ ProcessNode.config({
         if (detName) ObjectExt.setByPath(others, 'attrs/detName/text', detName);
         if (detDesc) ObjectExt.setByPath(others, 'attrs/detDesc/text', detDesc);
         if (sectionName) ObjectExt.setByPath(others, 'attrs/sectionName/text', sectionName);
-        if (detId) ObjectExt.setByPath(others, 'attrs/detId', detId);
+        if (detId) ObjectExt.setByPath(others, 'attrs/detId/text', detId);
-        if (processId) ObjectExt.setByPath(others, 'attrs/processId', processId);
+        if (processId) ObjectExt.setByPath(others, 'attrs/processId/text', processId);
         return others;
     }
-})
+});
+
+export const CACHE_NAME = 'ProcessDetail::section';
+
+async function getSectionFrom(sectionId) {
+    const sectionList = await cache.getList(
+        CACHE_NAME,
+        async () => {
+            const { code, data } = await axios(
+                '/base/core-production-line/listAll'
+            );
+            if (code == 0) {
+                return data;
+            }
+        }
+    );
+    debugger;
+    return IdToName(sectionId, sectionList);
+}
+
+export async function createProcessNode({ flowId, id, name, sectionId, remark }) {
+    const sectionName = await getSectionFrom(sectionId);
+    return {
+        shape: 'process-node',
+        x: 0,
+        y: 0,
+        detName: name, // 工序名称
+        sectionName, // 工段
+        detDesc: remark, // 工序说明
+        processId: flowId, // 工艺ID
+        detId: id, // 工序ID
+        tools: [{ name: 'button-remove' }],
+    };
+}