package.json

@@ -71,7 +71,6 @@
     "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,30 +9,48 @@
 	<section class="process-bom">
 		<SearchBar :formConfigs="searchBarFormConfig" ref="search-bar" />
 
-		<div class="btns" style="
+		<div
+			class="btns"
+			style="
 				text-align: right;
 				position: absolute;
 				top: 20px;
 				right: 20px;
 				display: flex;
 			">
-			<el-button type="primary" plain :disabled="currentDet == null" class="btn-create" icon="el-icon-plus">
+			<el-button type="primary" plain class="btn-create" icon="el-icon-plus">
 				分配设备
 			</el-button>
-			<el-input icon="el-icon-search" placeholder="搜索" v-model="searchText"  style="margin-left: 20px">
+			<el-input
+				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 :table-props="tableProps" :page="queryParams.pageNo" :limit="queryParams.pageSize" :table-data="list"
+		<base-table
+			:table-props="tableProps"
+			:page="queryParams.pageNo"
+			:limit="queryParams.pageSize"
+			:table-data="list"
 			@emitFun="handleEmitFun">
-			<method-btn v-if="tableBtn.length" slot="handleBtn" label="操作" :width="120" :method-list="tableBtn"
+			<method-btn
+				v-if="tableBtn.length"
+				slot="handleBtn"
+				label="操作"
+				:width="120"
+				:method-list="tableBtn"
 				@clickBtn="handleTableBtnClick" />
 		</base-table>
 
 		<!-- 分页组件 -->
-		<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
+		<pagination
+			v-show="total > 0"
+			:total="total"
+			:page.sync="queryParams.pageNo"
+			:limit.sync="queryParams.pageSize"
 			@pagination="getList" />
 	</section>
 </template>
@@ -41,12 +59,7 @@
 export default {
 	name: 'ProcessBom',
 	components: {},
-	props: {
+	props: {},
-		currentDet: {
-			type: Object,
-			default: null
-		}
-	},
 	data() {
 		return {
 			searchBarFormConfig: [{ label: '工序下设备' }],
@@ -69,60 +82,13 @@ export default {
 				pageNo: 1,
 				pageSize: 10,
 			},
-			searchText: ''
 		};
 	},
-	watch: {
+	computed: {},
-		currentDet: {
-			handler(val) {
-				if (val != null) {
-					this.getList(val);
-				} else {
-					this.clearList();
-				}
-			},
-			immediate: true,
-			deep: true
-		}
-	},
 	methods: {
-		handleEmitFun() { },
+		handleEmitFun() {},
-		handleTableBtnClick() { },
+		handleTableBtnClick() {},
-		put(payload) {
+		getList() {},
-			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>
@@ -130,7 +96,7 @@ export default {
 <style scoped lang="scss">
 .process-bom {
 	position: relative;
-	flex: 1;
+    flex: 1;
 	padding: 12px 20px;
 	background: #fff;
 	border-radius: 8px;

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

@@ -22,11 +22,19 @@
 			<el-button type="primary" plain class="btn-create" icon="el-icon-plus" @click="handleAdd">
 				新建工序
 			</el-button>
-			<el-button class="btn-edit" :disabled="currentDet == null" @click="handleEdit">编辑</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>
 		</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" />
@@ -36,7 +44,7 @@
 
 <script>
 import { Graph } from '@antv/x6';
-import ProcessNode, { createProcessNode, CACHE_NAME, getSectionFrom } from './ProcessNode';
+import ProcessNode, { createProcessNode, CACHE_NAME } from './ProcessNode';
 import DialogForm from '@/components/DialogForm';
 // import { IdToName } from '@/utils'
 
@@ -90,51 +98,213 @@ export default {
 					},
 				],
 			],
-			updateUrl: '/extend/process-flow-det/update',
+			updateUrl: '/extend/process-flow-view/update',
-			deleteUrl: '/extend/process-flow-det/delete',
+			addUrl: '/extend/process-flow-view/create',
-			addUrl: '/extend/process-flow-det/create',
 			// pageUrl: '/extend/process-flow-det/get',
-			infoUrl: '/extend/process-flow-view/getByFlowId',
+			infoUrl: '/extend/process-flow-view/get',
 			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)
 		})
-	},
+
-	deactivated() {
+		// const pn1 = graph.addNode({
-		this.graph.dispose();
+		// 	shape: 'process-node',
-		this.$nextTick(() => {
+		// 	x: 30,
-			this.resetLayout();
+		// 	y: 30,
-			this.graph = null;
+		// 	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;
+		// 	},
+		// });
 	},
 	computed: {},
 	methods: {
-
 		initGraph(json) {
 			const graph = new Graph({
 				container: this.$refs.panel,
@@ -142,103 +312,11 @@ 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)
+
 			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() {
@@ -278,13 +356,12 @@ 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.http('/extend/process-flow-view/update', 'put', this.layout));
+				({ code, data } = await this.put(this.layout));
 			} else {
 				this.layout.flowId = this.$route.params.id;
-				({ code, data } = await this.http('/extend/process-flow-view/create', 'post', this.layout));
+				({ code, data } = await this.post(this.layout));
 			}
 
 			if (code == 0) {
@@ -314,24 +391,11 @@ export default {
 		},
 
 		handleEdit() {
-			this.form.name = this.currentDet.detName;
+			this.open = true;
-			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;
-			})
 		},
 
-		async handleDelete(id) {
+		handleDelete(id) { },
-			const { code, data } = await this.delete({ id });
-			if (code == 0) {
-				this.$msgSuccess('成功删除一个工序!');
-				return true;
-			}
-			return false;
-		},
 
 		/** 提交按钮 */
 		submitForm() {
@@ -341,61 +405,37 @@ 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, flowId }) => {
+					.then(({ id, name, sectionId, remark }) => {
-						if (!id) return null;
+						if (!id || !flowId) 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() {
-			const flowId = this.getFlowId();
+			return updateEquipmentType(this.form).then((response) => {
-			if (!flowId) {
+				this.$modal.msgSuccess('修改成功');
-				this.$modal.msgError('工艺ID不能为空');
+				this.open = false;
-				return Promise.reject('工艺ID不能为空');
+				// this.getList();
-			}
+			});
-			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() {
@@ -403,11 +443,11 @@ export default {
 			const flowId = this.getFlowId(); // it also works
 			if (!flowId) {
 				this.$modal.msgError('工艺ID不能为空');
-				return Promise.reject('工艺ID不能为空');
+				return Promise.reject(null);
 			}
 			console.log('create process', this.form)
 			// 添加的提交
-			return this.post({ flowId, ...this.form }).then(
+			return this.post({ flowId: this.flowId, ...this.form }).then(
 				({ code, data }) => {
 					this.$modal.msgSuccess('新增成功');
 					this.open = false;
@@ -415,12 +455,9 @@ export default {
 					return {
 						id: data, // 服务器返回的新建的工段id
 						...this.form,  // 保存一份 this.form 副本，当 open->false 时 this.form 里的信息就清空了
-						flowId
 					};
 				}
-			).catch(err => {
+			);
-				this.$msgError(err)
-			});
 		},
 
 		put(payload) {
@@ -435,9 +472,6 @@ 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,
@@ -467,8 +501,4 @@ 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,27 +1,11 @@
-import { Node, ObjectExt, Shape } from '@antv/x6';
+import { Node, ObjectExt } 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: 200,
+    width: 240,
     height: 100,
     markup: [
         {
@@ -84,55 +68,21 @@ 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, sectionId, ...others } = metadata;
+        const { detId, detName, detDesc, sectionName, processId, ...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';
 
-export async function getSectionFrom(sectionId) {
+async function getSectionFrom(sectionId) {
     const sectionList = await cache.getList(
         CACHE_NAME,
         async () => {
@@ -144,6 +94,7 @@ export async function getSectionFrom(sectionId) {
             }
         }
     );
+    debugger;
     return IdToName(sectionId, sectionList);
 }
 
@@ -155,15 +106,10 @@ export async function createProcessNode({ flowId, id, name, sectionId, remark })
         y: 0,
         detName: name, // 工序名称
         sectionName, // 工段
-        sectionId,
         detDesc: remark, // 工序说明
         processId: flowId, // 工艺ID
         detId: id, // 工序ID
-        tools: [],
+        tools: [{ name: 'button-remove' }],
-        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" @det-selected="handleDetSelected" />
+		<ProcessDetail style="margin-top: 16px" />
-		<ProcessBomList style="margin-top: 16px" :current-det="currentDet" />
+		<ProcessBomList style="margin-top: 16px" />
 	</div>
 </template>
 
@@ -25,7 +25,6 @@ export default {
 	data() {
 		return {
 			flowId: null,
-			currentDet: null
 		};
 	},
 	provide() {
@@ -41,14 +40,7 @@ export default {
 		this.flowId = this.$route.params.id;
 	},
 	computed: {},
-	methods: {
+	methods: {},
-		handleDetSelected(det) {
-			if (det != null) {
-				this.currentDet = { ...det }
-			}
-			else this.currentDet = null;
-		}
-	},
 };
 </script>