update extend process

.env.dev

@@ -12,8 +12,8 @@ ENV = 'development'
 VUE_APP_TITLE = 产线监控系统
 
 # 芋道管理系统/开发环境
-VUE_APP_BASE_API = 'http://192.168.1.8:48082'
-# VUE_APP_BASE_API = 'http://192.168.0.33:48082'
+# VUE_APP_BASE_API = 'http://192.168.1.8:48082'
+VUE_APP_BASE_API = 'http://192.168.0.33:48082'
 
 # 路由懒加载
 VUE_CLI_BABEL_TRANSPILE_MODULES = true

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-antiserialize" @click="handleLoadJson">
-				反序列化
-			</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> -->
 		</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,8 +90,9 @@ export default {
 					},
 				],
 			],
-			updateUrl: '/extend/process-flow-view/update',
-			addUrl: '/extend/process-flow-view/create',
+			updateUrl: '/extend/process-flow-det/update',
+			deleteUrl: '/extend/process-flow-det/delete',
+			addUrl: '/extend/process-flow-det/create',
 			// pageUrl: '/extend/process-flow-det/get',
 			infoUrl: '/extend/process-flow-view/getByFlowId',
 			layout: {
@@ -109,6 +102,7 @@ export default {
 				createTime: null
 			},
 			currentDet: null,
+			currentNode: null
 
 		};
 	},
@@ -130,177 +124,6 @@ export default {
 		this.loadLayout().then(json => {
 			this.initGraph(json)
 		})
-
-		// const pn1 = graph.addNode({
-		// 	shape: 'process-node',
-		// 	x: 30,
-		// 	y: 30,
-		// 	processName: '工序00A',
-		// 	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;
-		// 	},
-		// });
 	},
 	deactivated() {
 		this.graph.dispose();
@@ -331,11 +154,14 @@ export default {
 					allowPort: true,
 					allowEdge: false,
 				},
-				scroller: {
-					enabled: true,
-					pannable: true,
-					cursor: 'grab'
-				},
+				panning: true,
+				// scroller: {
+				// 	enabled: true,
+				// 	pannable: true,
+				// 	cursor: '',
+				// 	width: 800,
+				// 	height: 200
+				// },
 				mousewheel: {
 					enabled: true,
 					modifiers: ['ctrl', 'meta']
@@ -354,6 +180,8 @@ export default {
 				const nodes = this.graph.getNodes();
 				const edges = this.graph.getEdges();
 				this.currentDet = null;
+				this.currentNode = null;
+
 				nodes.forEach(node => {
 					node.attr('container/stroke', '#ccc');
 				});
@@ -365,13 +193,15 @@ export default {
 			this.graph.on('node:click', ({ e, x, y, node, view }) => {
 				reset();
 				node.attr('container/stroke', '#0b58ff');
-				const { detId, detName, detDesc, processId, sectionName } = node.attrs;
+				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)
@@ -451,10 +281,10 @@ export default {
 			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) {
@@ -484,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() {
@@ -498,37 +341,61 @@ 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 }) => {
-						if (!id || !flowId) return null;
+					.then(({ id, name, sectionId, remark, flowId }) => {
+						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) => {
-				this.$modal.msgSuccess('修改成功');
-				this.open = false;
-				// this.getList();
-			});
+			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;
+					return formCopy;
+				});
 		},
 
 		createProcess() {
@@ -536,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;
@@ -548,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) {
@@ -565,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,

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

@@ -118,20 +118,21 @@ ProcessNode.config({
         }
     },
     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 () => {
@@ -154,6 +155,7 @@ export async function createProcessNode({ flowId, id, name, sectionId, remark })
         y: 0,
         detName: name, // 工序名称
         sectionName, // 工段
+        sectionId,
         detDesc: remark, // 工序说明
         processId: flowId, // 工艺ID
         detId: id, // 工序ID