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

@@ -17,7 +17,8 @@
 				下一步
 				<i class="el-icon-right el-icon--right"></i>
 			</el-button>
-			<el-button class="btn-refresh" @click="handleUpdateLayout" prefix-icon="el-icon-refresh">刷新布局</el-button>
+			<el-button class="btn-refresh" @click="handleUpdateLayout" icon="el-icon-refresh">
+				刷新布局</el-button>
 			<el-button type="primary" plain class="btn-create" icon="el-icon-plus" @click="handleAdd">
 				新建工序
 			</el-button>
@@ -97,11 +98,16 @@ export default {
 					},
 				],
 			],
-			updateUrl: '/extend/process-flow-det/update',
-			addUrl: '/extend/process-flow-det/create',
+			updateUrl: '/extend/process-flow-view/update',
+			addUrl: '/extend/process-flow-view/create',
 			// pageUrl: '/extend/process-flow-det/get',
-			infoUrl: '/extend/process-flow-det/get',
-			jsonData: '',
+			infoUrl: '/extend/process-flow-view/get',
+			layout: {
+				id: null,
+				flowId: null,
+				content: '',
+				createTime: null
+			},
 
 		};
 	},
@@ -121,85 +127,9 @@ export default {
 			immediate: false,
 		},
 	},
-	mounted() {
-		const fakeJson = {
-			"cells": [
-				{
-					"position": {
-						"x": 20,
-						"y": 30
-					},
-					"size": {
-						"width": 240,
-						"height": 100
-					},
-					"shape": "process-node",
-					"id": "4783abf7-9a4a-47f7-aaed-37e906e789c0",
-					"tools": {
-						"items": [
-							{
-								"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
-				}
-			]
-		}
-
+	activated() {
 		this.loadLayout().then(json => {
-			this.initGraph(fakeJson)
+			this.initGraph(json)
 		})
 
 		// const pn1 = graph.addNode({
@@ -389,8 +319,28 @@ export default {
 			this.graph = graph;
 		},
 
-		loadLayout() {
-			return Promise.resolve()
+		resetLayout() {
+			this.layout = {
+				id: null,
+				flowId: null,
+				content: '',
+				createTime: null
+			}
+		},
+
+		async loadLayout() {
+			const flowId = this.$route.params.id;
+			if (!flowId) return { cells: [] }
+			const { code, data } = await this.info({ id: flowId });
+			if (code == 0) {
+				if (data) {
+					this.layout = data;
+					return JSON.parse(data?.content) || { cells: [] };
+				}
+				return { cells: [] };
+			}
+			this.resetLayout();
+			return Promise.reject(this.infoUrl + ' 接口出错!');
 		},
 
 		handleToJson() { },
@@ -403,8 +353,20 @@ export default {
 			}
 		},
 
-		handleUpdateLayout() {
+		async handleUpdateLayout() {
+			this.layout.content = JSON.stringify(this.graph.toJSON());
+			let code, data;
 			// 手动刷新布局
+			if (this.layout.id) {
+				({ code, data } = await this.put(this.layout));
+			} else {
+				this.layout.flowId = this.$route.params.id;
+				({ code, data } = await this.post(this.layout));
+			}
+
+			if (code == 0) {
+				this.$modal.msgSuccess('布局已刷新!')
+			}
 		},
 
 		reset() {

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

@@ -11,37 +11,34 @@
 
 		<el-row :gutter="20">
 			<el-col :span="6">
-				<InfoItem label="工艺名称" value="测试工艺" />
+				<InfoItem label="工艺名称" :value="form.name" />
 			</el-col>
 			<el-col :span="6">
-				<InfoItem label="产线" value="A4" />
+				<InfoItem label="产线" :value="form.lineName" />
 			</el-col>
 			<el-col :span="12">
-				<InfoItem
-					label="工艺描述"
-					value="咯热门asdfkj alsdfk ;lkj flskdjf sadf" />
+				<InfoItem label="工艺描述" :value="form.remark" />
 			</el-col>
 		</el-row>
 
 		<el-row :gutter="20" style="margin-top: 12px;">
 			<el-col :span="6">
-				<InfoItem label="创建人" value="xxse" />
+				<!-- <InfoItem label="创建人" value="xxse" /> -->
 			</el-col>
 			<el-col :span="6">
-				<InfoItem label="创建时间" value="2023-10-22 10:11:00" />
+				<InfoItem label="创建时间" :value="form.createTime" />
 			</el-col>
 			<el-col :span="6">
-				<InfoItem label="更新人" value="xxse" />
+				<!-- <InfoItem label="更新人" value="xxse" /> -->
 			</el-col>
 			<el-col :span="6">
-				<InfoItem label="更新时间" value="2023-10-22 10:11:00" />
+				<!-- <InfoItem label="更新时间" value="2023-10-22 10:11:00" /> -->
 			</el-col>
 		</el-row>
 	</section>
 </template>
 
 <script>
-import basicPageMixin from '@/mixins/lb/basicPageMixin';
 
 const InfoItem = {
 	name: 'InfoItem',
@@ -67,16 +64,63 @@ const InfoItem = {
 export default {
 	name: 'ProcessInfo',
 	components: { InfoItem },
-	mixins: [basicPageMixin],
 	props: {},
+	inject: ['getFlowId'],
 	data() {
 		return {
 			infoUrl: '/extend/process-flow/get',
 			searchBarFormConfig: [{ label: '工艺详情' }],
+			form: {
+				id: null,
+				name: null,
+				lineName: null,
+				createTime: null,
+				remark: null,
+				enable: null,
+				code: null
+			},
 		};
 	},
+	activated() {
+		this.getInfo()
+	},
 	computed: {},
-	methods: {},
+	methods: {
+		// utils
+		http(url, method, payload) {
+			return this.$axios({
+				url,
+				method,
+				params: method === 'get' ? payload : null,
+				data: method !== 'get' ? payload : null,
+			})
+		},
+		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);
+		},
+		async getInfo() {
+			const flowId = this.$route.params.id;
+			if (!flowId) this.$router.go(-1);
+			const { code, data } = await this.info({ id: flowId });
+			// debugger;
+			if (code == 0) {
+				this.form = {
+					...data
+				};
+			} else {
+				this.$modal.msgError('工艺信息获取失败')
+			}
+		}
+	},
 };
 </script>
 

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

@@ -111,4 +111,6 @@ export async function createProcessNode({ flowId, id, name, sectionId, remark })
         detId: id, // 工序ID
         tools: [{ name: 'button-remove' }],
     };
-}
+}
+
+export async function createEdge(src, dest) { }