update

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

@@ -22,14 +22,14 @@
 			<el-button type="primary" plain class="btn-create" icon="el-icon-plus" @click="handleAdd">
 				新建工序
 			</el-button>
-			<el-button class="btn-serialize" @click="handleToJson">序列化</el-button>
+			<!-- <el-button class="btn-serialize" @click="handleToJson">序列化</el-button>
 			<el-button class="btn-antiserialize" @click="handleLoadJson">
 				反序列化
-			</el-button>
-			<el-button class="btn-edit" @click="handleEdit">编辑</el-button>
-			<el-button type="error" class="btn-delete" @click="handleDelete">
+			</el-button> -->
+			<el-button class="btn-edit" :disabled="currentDet == null" @click="handleEdit">编辑</el-button>
+			<!-- <el-button type="danger" plain :disabled="currentDet == null" class="btn-delete" @click="handleDelete">
 				删除
-			</el-button>
+			</el-button> -->
 		</div>
 
 		<div class="process-graph__panel" ref="panel"></div>
@@ -101,31 +101,30 @@ export default {
 			updateUrl: '/extend/process-flow-view/update',
 			addUrl: '/extend/process-flow-view/create',
 			// pageUrl: '/extend/process-flow-det/get',
-			infoUrl: '/extend/process-flow-view/get',
+			infoUrl: '/extend/process-flow-view/getByFlowId',
 			layout: {
 				id: null,
 				flowId: null,
 				content: '',
 				createTime: null
 			},
+			currentDet: null,
 
 		};
 	},
 	watch: {
 		'form.sectionId': {
 			handler(id) {
-				// const { form } = this;
-				// const { sectionId } = form;
-				// if (sectionId) {
-				// 	const { label } = this.$refs['form'].getSelectItem(
-				// 		'sectionId',
-				// 		sectionId
-				// 	);
-				// 	form.workshopName = label;
-				// }
 			},
 			immediate: false,
 		},
+		currentDet: {
+			handler(val) {
+				this.$emit('det-selected', val)
+			},
+			deep: true,
+			immediate: true
+		}
 	},
 	activated() {
 		this.loadLayout().then(json => {
@@ -303,8 +302,16 @@ export default {
 		// 	},
 		// });
 	},
+	deactivated() {
+		this.graph.dispose();
+		this.$nextTick(() => {
+			this.resetLayout();
+			this.graph = null;
+		})
+	},
 	computed: {},
 	methods: {
+
 		initGraph(json) {
 			const graph = new Graph({
 				container: this.$refs.panel,
@@ -312,11 +319,96 @@ export default {
 					size: 10,
 					visible: true,
 				},
-				history: true
+				history: true,
+				selecting: {
+					className: 'my-select'
+				},
+				connecting: {
+					snap: true,
+					allowBlank: false,
+					allowLoop: false,
+					allowNode: false,
+					allowPort: true,
+					allowEdge: false,
+				},
+				scroller: {
+					enabled: true,
+					pannable: true,
+					cursor: 'grab'
+				},
+				mousewheel: {
+					enabled: true,
+					modifiers: ['ctrl', 'meta']
+				}
 			});
-			graph.fromJSON(json)
 
+			graph.fromJSON(json)
 			this.graph = graph;
+			this.$nextTick(() => {
+				this.registerGraphEvents();
+			})
+		},
+
+		registerGraphEvents() {
+			const reset = () => {
+				const nodes = this.graph.getNodes();
+				const edges = this.graph.getEdges();
+				this.currentDet = null;
+				nodes.forEach(node => {
+					node.attr('container/stroke', '#ccc');
+				});
+				edges.forEach(edge => {
+					edge.attr('line/stroke', '#ccc')
+				})
+			}
+
+			this.graph.on('node:click', ({ e, x, y, node, view }) => {
+				reset();
+				node.attr('container/stroke', '#0b58ff');
+				const { detId, detName, detDesc, processId, sectionName } = node.attrs;
+				this.currentDet = {}
+				this.$set(this.currentDet, 'detId', detId.text)
+				this.$set(this.currentDet, 'detName', detName.text)
+				this.$set(this.currentDet, 'detDesc', detDesc.text)
+				this.$set(this.currentDet, 'flowId', processId.text)
+				this.$set(this.currentDet, 'sectionName', sectionName.text)
+			});
+			this.graph.on('edge:click', ({ e, x, y, edge, view }) => {
+				// console.log('edge clicked!', edge)
+				reset();
+				edge.attr('line/stroke', '#0b58ff')
+			});
+			this.graph.on('blank:click', ({ e, x, y }) => {
+				reset();
+			});
+			this.graph.on('node:mouseenter', ({ node }) => {
+				node.addTools({
+					name: 'button-remove',
+					args: {
+						x: '100%',
+						y: 0,
+						offset: { x: 0, y: 0 },
+						onClick: ({ e, cell, view }) => {
+							this.$confirm(
+								'确定删除这个工序吗?',
+								'提示',
+								{
+									confirmButtonText: '确定',
+									cancelButtonText: '取消',
+									type: 'warning'
+								}
+							).then(() => {
+								view.cell.remove()
+							}).catch(err => {
+								return;
+							})
+						}
+					}
+				})
+			});
+			this.graph.on('node:mouseleave', ({ node }) => {
+				node.removeTools();
+			})
 		},
 
 		resetLayout() {
@@ -356,6 +448,7 @@ export default {
 		async handleUpdateLayout() {
 			this.layout.content = JSON.stringify(this.graph.toJSON());
 			let code, data;
+			console.table([this.layout, this.$route.params.id])
 			// 手动刷新布局
 			if (this.layout.id) {
 				({ code, data } = await this.put(this.layout));
@@ -501,4 +594,8 @@ export default {
 .x6-widget-selection-selected {
 	border: 1px solid red;
 }
+
+.my-select {
+	border: 1px solid red;
+}
 </style>