update extend process

package.json

@@ -71,6 +71,7 @@
     "screenfull": "5.0.2",
     "sortablejs": "1.10.2",
     "throttle-debounce": "2.1.0",
+    "uuid": "^9.0.1",
     "video.js": "^8.5.2",
     "vue": "2.7.14",
     "vue-count-to": "1.0.13",

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

@@ -9,48 +9,30 @@
 	<section class="process-bom">
 		<SearchBar :formConfigs="searchBarFormConfig" ref="search-bar" />
 
-		<div
+		<div class="btns" style="
-			class="btns"
-			style="
 				text-align: right;
 				position: absolute;
 				top: 20px;
 				right: 20px;
 				display: flex;
 			">
-			<el-button type="primary" plain class="btn-create" icon="el-icon-plus">
+			<el-button type="primary" plain :disabled="currentDet == null" class="btn-create" icon="el-icon-plus">
 				分配设备
 			</el-button>
-			<el-input
+			<el-input icon="el-icon-search" placeholder="搜索" v-model="searchText"  style="margin-left: 20px">
-				icon="el-icon-search"
-				placeholder="搜索"
-				style="margin-left: 20px">
 				<i slot="prefix" class="el-input__icon el-icon-search"></i>
 			</el-input>
 		</div>
 
 		<!-- 列表 -->
-		<base-table
+		<base-table :table-props="tableProps" :page="queryParams.pageNo" :limit="queryParams.pageSize" :table-data="list"
-			:table-props="tableProps"
-			:page="queryParams.pageNo"
-			:limit="queryParams.pageSize"
-			:table-data="list"
 			@emitFun="handleEmitFun">
-			<method-btn
+			<method-btn v-if="tableBtn.length" slot="handleBtn" label="操作" :width="120" :method-list="tableBtn"
-				v-if="tableBtn.length"
-				slot="handleBtn"
-				label="操作"
-				:width="120"
-				:method-list="tableBtn"
 				@clickBtn="handleTableBtnClick" />
 		</base-table>
 
 		<!-- 分页组件 -->
-		<pagination
+		<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
-			v-show="total > 0"
-			:total="total"
-			:page.sync="queryParams.pageNo"
-			:limit.sync="queryParams.pageSize"
 			@pagination="getList" />
 	</section>
 </template>
@@ -59,7 +41,12 @@
 export default {
 	name: 'ProcessBom',
 	components: {},
-	props: {},
+	props: {
+		currentDet: {
+			type: Object,
+			default: null
+		}
+	},
 	data() {
 		return {
 			searchBarFormConfig: [{ label: '工序下设备' }],
@@ -82,13 +69,60 @@ export default {
 				pageNo: 1,
 				pageSize: 10,
 			},
+			searchText: ''
 		};
 	},
-	computed: {},
+	watch: {
+		currentDet: {
+			handler(val) {
+				if (val != null) {
+					this.getList(val);
+				} else {
+					this.clearList();
+				}
+			},
+			immediate: true,
+			deep: true
+		}
+	},
 	methods: {
-		handleEmitFun() {},
+		handleEmitFun() { },
-		handleTableBtnClick() {},
+		handleTableBtnClick() { },
-		getList() {},
+		put(payload) {
+			return this.http(this.updateUrl, 'put', payload);
+		},
+		post(payload) {
+			return this.http(this.addUrl, 'post', payload);
+		},
+		recv(payload) {
+			return this.http(this.pageUrl, 'get', payload);
+		},
+		info(payload) {
+			return this.http(this.infoUrl, 'get', payload);
+		},
+		http(url, method, payload) {
+			return this.$axios({
+				url,
+				method,
+				params: method === 'get' ? payload : null,
+				data: method !== 'get' ? payload : null,
+			})
+		},
+
+		getList({ detId, detName, detDesc, flowId, sectionName } = {}) {
+			console.log('get list')
+
+		},
+		getList() {
+			this.list = [
+				{ name: '1', code: 'bomg-1', remark: 'Tochter' },
+				{ name: '2', code: 'bomg-2', remark: 'Bruder' },
+				{ name: '3', code: 'bomg-3', remark: 'Kalt' },
+			]
+		},
+		clearList() {
+			this.list = [];
+		}
 	},
 };
 </script>

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

@@ -22,19 +22,11 @@
 			<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-edit" :disabled="currentDet == null" @click="handleEdit">编辑</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>
 		</div>
 
 		<div class="process-graph__panel" ref="panel"></div>
 
-		<!-- 对话框(添加 / 修改) -->
 		<base-dialog :dialogTitle="title" :dialogVisible="open" width="35%" @close="cancel" @cancel="cancel"
 			@confirm="submitForm">
 			<DialogForm v-if="open" ref="form" v-model="form" :rows="rows" />
@@ -44,7 +36,7 @@
 
 <script>
 import { Graph } from '@antv/x6';
-import ProcessNode, { createProcessNode, CACHE_NAME } from './ProcessNode';
+import ProcessNode, { createProcessNode, CACHE_NAME, getSectionFrom } from './ProcessNode';
 import DialogForm from '@/components/DialogForm';
 // import { IdToName } from '@/utils'
 
@@ -98,213 +90,51 @@ export default {
 					},
 				],
 			],
-			updateUrl: '/extend/process-flow-view/update',
+			updateUrl: '/extend/process-flow-det/update',
-			addUrl: '/extend/process-flow-view/create',
+			deleteUrl: '/extend/process-flow-det/delete',
+			addUrl: '/extend/process-flow-det/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,
+			currentNode: 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 => {
 			this.initGraph(json)
 		})
-
+	},
-		// const pn1 = graph.addNode({
+	deactivated() {
-		// 	shape: 'process-node',
+		this.graph.dispose();
-		// 	x: 30,
+		this.$nextTick(() => {
-		// 	y: 30,
+			this.resetLayout();
-		// 	processName: '工序00A',
+			this.graph = null;
-		// 	workshopName: '工段1',
+		})
-		// 	processDesc: 'test test test',
-		// 	processId: '1',
-		// 	tools: [{ name: 'button-remove' }],
-		// });
-		// const pn2 = graph.addNode({
-		// 	shape: 'process-node',
-		// 	x: 240,
-		// 	y: 30,
-		// 	processName: '工序00B',
-		// 	workshopName: '工段1',
-		// 	processDesc: 'test test test',
-		// 	processId: '1',
-		// });
-
-		// const pn3 = graph.addNode({
-		// 	shape: 'process-node',
-		// 	x: 360,
-		// 	y: 30,
-		// 	processName: '工序00C',
-		// 	workshopName: '工段1',
-		// 	processDesc: 'test test test',
-		// 	processId: '1',
-		// });
-
-		// const pn4 = graph.addNode({
-		// 	shape: 'process-node',
-		// 	x: 360,
-		// 	y: 120,
-		// 	processName: '工序00D',
-		// 	workshopName: '工段1',
-		// 	processDesc: 'test test test',
-		// 	processId: '1',
-		// });
-
-		// const pn5 = graph.addNode({
-		// 	shape: 'process-node',
-		// 	x: 500,
-		// 	y: 30,
-		// 	processName: '工序00E',
-		// 	workshopName: '工段1',
-		// 	processDesc: 'test test test',
-		// 	processId: '1',
-		// });
-
-		// graph.addEdge({
-		// 	source: pn1,
-		// 	target: pn2,
-		// 	router: {
-		// 		name: 'er',
-		// 	},
-		// 	attrs: {
-		// 		line: {
-		// 			stroke: '#0b58ff',
-		// 			strokeWidth: 1,
-		// 			targetMarker: {
-		// 				// name: 'classic',
-		// 				// name: 'async',
-		// 				size: 0,
-		// 			},
-		// 		},
-		// 	},
-		// });
-		// graph.addEdge({
-		// 	source: pn2,
-		// 	target: pn3,
-		// 	router: {
-		// 		name: 'er',
-		// 	},
-		// 	attrs: {
-		// 		line: {
-		// 			stroke: '#0b58ff',
-		// 			strokeWidth: 1,
-		// 			targetMarker: {
-		// 				// name: 'classic',
-		// 				// name: 'async',
-		// 				size: 0,
-		// 			},
-		// 		},
-		// 	},
-		// });
-		// graph.addEdge({
-		// 	source: pn2,
-		// 	target: pn4,
-		// 	router: {
-		// 		name: 'er',
-		// 	},
-		// 	attrs: {
-		// 		line: {
-		// 			stroke: '#0b58ff',
-		// 			strokeWidth: 1,
-		// 			targetMarker: {
-		// 				// name: 'classic',
-		// 				// name: 'async',
-		// 				size: 0,
-		// 			},
-		// 		},
-		// 	},
-		// });
-		// graph.addEdge({
-		// 	source: pn3,
-		// 	target: pn5,
-		// 	router: {
-		// 		name: 'er',
-		// 	},
-		// 	attrs: {
-		// 		line: {
-		// 			stroke: '#0b58ff',
-		// 			strokeWidth: 1,
-		// 			targetMarker: {
-		// 				// name: 'classic',
-		// 				// name: 'async',
-		// 				size: 0,
-		// 			},
-		// 		},
-		// 	},
-		// });
-		// graph.addEdge({
-		// 	source: pn4,
-		// 	target: pn5,
-		// 	router: {
-		// 		name: 'er',
-		// 	},
-		// 	attrs: {
-		// 		line: {
-		// 			stroke: '#0b58ff',
-		// 			strokeWidth: 1,
-		// 			targetMarker: {
-		// 				// name: 'classic',
-		// 				// name: 'async',
-		// 				size: 0,
-		// 			},
-		// 		},
-		// 	},
-		// });
-
-		// const pn1 = graph.addNode({
-		// 	shape: 'process-node',
-		// 	x: 0,
-		// 	y: 0,
-		// 	detName: '测试工序', // 工序名称
-		// 	sectionName: 'default', // 工段
-		// 	detDesc: 'loremakdfkd...', // 工序说明
-		// 	processId: 'p-1', // 工艺ID
-		// 	detId: 'det-id-1', // 工序ID
-		// 	tools: [{ name: 'button-remove' }],
-		// });
-
-		// const htmlNode = graph.addNode({
-		// 	x: 0,
-		// 	y: 0,
-		// 	width: 200,
-		// 	height: 100,
-		// 	shape: 'html',
-		// 	html() {
-		// 		const ctn = document.createElement('div');
-		// 		ctn.style.width = '100%';
-		// 		ctn.style.height = '100%';
-		// 		ctn.style.border = '1px solid #ccc';
-		// 		ctn.style.background = '#fff';
-		// 		ctn.innerText = 'hello';
-
-		// 		return ctn;
-		// 	},
-		// });
 	},
 	computed: {},
 	methods: {
+
 		initGraph(json) {
 			const graph = new Graph({
 				container: this.$refs.panel,
@@ -312,11 +142,103 @@ 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,
+				},
+				panning: true,
+				// scroller: {
+				// 	enabled: true,
+				// 	pannable: true,
+				// 	cursor: '',
+				// 	width: 800,
+				// 	height: 200
+				// },
+				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;
+				this.currentNode = 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, sectionId, sectionName } = node.attrs;
+				this.currentDet = {}
+				this.$set(this.currentDet, 'detId', detId.text)
+				this.$set(this.currentDet, 'sectionId', sectionId.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.currentNode = node
+			});
+			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,12 +278,13 @@ 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));
+				({ code, data } = await this.http('/extend/process-flow-view/update', 'put', this.layout));
 			} else {
 				this.layout.flowId = this.$route.params.id;
-				({ code, data } = await this.post(this.layout));
+				({ code, data } = await this.http('/extend/process-flow-view/create', 'post', this.layout));
 			}
 
 			if (code == 0) {
@@ -391,11 +314,24 @@ export default {
 		},
 
 		handleEdit() {
-			this.open = true;
+			this.form.name = this.currentDet.detName;
+			this.form.sectionId = this.currentDet.sectionId;
+			this.form.remark = this.currentDet.detDesc;
+			this.form.id = this.currentDet.detId;
 			this.title = '编辑工序';
+			this.$nextTick(() => {
+				this.open = true;
+			})
 		},
 
-		handleDelete(id) { },
+		async handleDelete(id) {
+			const { code, data } = await this.delete({ id });
+			if (code == 0) {
+				this.$msgSuccess('成功删除一个工序!');
+				return true;
+			}
+			return false;
+		},
 
 		/** 提交按钮 */
 		submitForm() {
@@ -405,36 +341,60 @@ export default {
 				}
 				// 修改的提交
 				if (this.form.id != null) {
-					this.updateProcess();
+					this.updateProcess()
+						.then((form) => {
+							const { name, sectionId, remark } = form;
+							getSectionFrom(sectionId).then(sectionName => {
+								// 修改当前node的信息 
+								this.currentNode.setAttrs({
+									detName: { text: name },
+									sectionId: { text: sectionId },
+									sectionName: { text: sectionName },
+									detDesc: { text: remark }
+								})
+							})
+						})
+						.catch(err => { });
 					return;
 				}
 
-				const flowId = this.getFlowId();
 				this.createProcess()
-					.then(({ id, name, sectionId, remark }) => {
+					.then(({ id, name, sectionId, remark, flowId }) => {
-						if (!id || !flowId) return null;
+						if (!id) return null;
 						return createProcessNode({
 							flowId: flowId,
 							name, sectionId, remark,
 							id,
 						})
-					}
+					}).then(node => {
-					).then(node => {
 						if (!node) {
 							this.$modal.msgError('创建节点失败');
 							return;
 						};
 						this.graph.addNode(node);
+					}).catch(err => {
+						return;
 					});
 
 			});
 		},
 
 		updateProcess() {
-			return updateEquipmentType(this.form).then((response) => {
+			const flowId = this.getFlowId();
+			if (!flowId) {
+				this.$modal.msgError('工艺ID不能为空');
+				return Promise.reject('工艺ID不能为空');
+			}
+			return this.put({ flowId, ...this.form })
+				.then(({ code, data }) => {
+					if (code == 0) {
 						this.$modal.msgSuccess('修改成功');
+					} else {
+						this.$modal.msgError('修改失败');
+					}
+					const formCopy = { ...this.form }
 					this.open = false;
-				// this.getList();
+					return formCopy;
 				});
 		},
 
@@ -443,11 +403,11 @@ export default {
 			const flowId = this.getFlowId(); // it also works
 			if (!flowId) {
 				this.$modal.msgError('工艺ID不能为空');
-				return Promise.reject(null);
+				return Promise.reject('工艺ID不能为空');
 			}
 			console.log('create process', this.form)
 			// 添加的提交
-			return this.post({ flowId: this.flowId, ...this.form }).then(
+			return this.post({ flowId, ...this.form }).then(
 				({ code, data }) => {
 					this.$modal.msgSuccess('新增成功');
 					this.open = false;
@@ -455,9 +415,12 @@ export default {
 					return {
 						id: data, // 服务器返回的新建的工段id
 						...this.form,  // 保存一份 this.form 副本，当 open->false 时 this.form 里的信息就清空了
+						flowId
 					};
 				}
-			);
+			).catch(err => {
+				this.$msgError(err)
+			});
 		},
 
 		put(payload) {
@@ -472,6 +435,9 @@ export default {
 		info(payload) {
 			return this.http(this.infoUrl, 'get', payload);
 		},
+		delete(payload) {
+			return this.http(this.deleteUrl, 'delete', payload);
+		},
 		http(url, method, payload) {
 			return this.$axios({
 				url,
@@ -501,4 +467,8 @@ export default {
 .x6-widget-selection-selected {
 	border: 1px solid red;
 }
+
+.my-select {
+	border: 1px solid red;
+}
 </style>

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

@@ -1,11 +1,27 @@
-import { Node, ObjectExt } from '@antv/x6';
+import { Node, ObjectExt, Shape } from '@antv/x6';
 import { IdToName } from '@/utils'
 import cache from '@/utils/cache'
 import axios from '@/utils/request'
+import { v4 } from 'uuid'
+
+Shape.Edge.config({
+    attrs: {
+        line: {
+            stroke: '#ccc',
+            strokeWidth: 1,
+            targetMarker: {
+                name: 'block',
+                width: 1,
+                height: 1
+            },
+        },
+    }
+})
+
 
 export default class ProcessNode extends Node { }
 ProcessNode.config({
-    width: 240,
+    width: 200,
     height: 100,
     markup: [
         {
@@ -68,21 +84,55 @@ ProcessNode.config({
             },
         },
     ],
+    attrs: {
+        line: {
+            fill: 'red'
+        }
+    },
+    ports: {
+        groups: {
+            in: {
+                position: 'left',
+                attrs: {
+                    circle: {
+                        r: 2,
+                        magnet: true,
+                        stroke: '#0b58ff',
+                        strokeWidth: 1,
+                        fill: '#0b58ff'
+                    }
+                }
+            },
+            out: {
+                position: 'right',
+                attrs: {
+                    circle: {
+                        r: 2,
+                        magnet: true,
+                        stroke: '#0b58ff',
+                        strokeWidth: 1,
+                        fill: '#0b58ff'
+                    }
+                }
+            }
+        }
+    },
     propHooks(metadata) {
-        const { detId, detName, detDesc, sectionName, processId, ...others } = metadata;
+        const { detId, detName, detDesc, sectionName, processId, sectionId, ...others } = metadata;
         // debugger;
         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/text', detId);
         if (processId) ObjectExt.setByPath(others, 'attrs/processId/text', processId);
+        if (sectionId) ObjectExt.setByPath(others, 'attrs/sectionId/text', sectionId);
         return others;
     }
 });
 
 export const CACHE_NAME = 'ProcessDetail::section';
 
-async function getSectionFrom(sectionId) {
+export async function getSectionFrom(sectionId) {
     const sectionList = await cache.getList(
         CACHE_NAME,
         async () => {
@@ -94,7 +144,6 @@ async function getSectionFrom(sectionId) {
             }
         }
     );
-    debugger;
     return IdToName(sectionId, sectionList);
 }
 
@@ -106,10 +155,15 @@ export async function createProcessNode({ flowId, id, name, sectionId, remark })
         y: 0,
         detName: name, // 工序名称
         sectionName, // 工段
+        sectionId,
         detDesc: remark, // 工序说明
         processId: flowId, // 工艺ID
         detId: id, // 工序ID
-        tools: [{ name: 'button-remove' }],
+        tools: [],
+        ports: [
+            { id: v4(), group: 'in' },
+            { id: v4(), group: 'out' },
+        ]
     };
 }
 

src/views/extend/processFlowView/index.vue

@@ -8,8 +8,8 @@
 <template>
 	<div class="app-container process-flow-view">
 		<ProcessInfo />
-		<ProcessDetail style="margin-top: 16px" />
+		<ProcessDetail style="margin-top: 16px" @det-selected="handleDetSelected" />
-		<ProcessBomList style="margin-top: 16px" />
+		<ProcessBomList style="margin-top: 16px" :current-det="currentDet" />
 	</div>
 </template>
 
@@ -25,6 +25,7 @@ export default {
 	data() {
 		return {
 			flowId: null,
+			currentDet: null
 		};
 	},
 	provide() {
@@ -40,7 +41,14 @@ export default {
 		this.flowId = this.$route.params.id;
 	},
 	computed: {},
-	methods: {},
+	methods: {
+		handleDetSelected(det) {
+			if (det != null) {
+				this.currentDet = { ...det }
+			}
+			else this.currentDet = null;
+		}
+	},
 };
 </script>