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

@@ -8,6 +8,50 @@
 <template>
 	<section class="process-bom">
 		<SearchBar :formConfigs="searchBarFormConfig" ref="search-bar" />
+
+		<div
+			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>
+			<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"
+			@emitFun="handleEmitFun">
+			<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="getList" />
 	</section>
 </template>
 
@@ -19,15 +63,40 @@ export default {
 	data() {
 		return {
 			searchBarFormConfig: [{ label: '工序下设备' }],
+			tableProps: [
+				// {
+				// 	prop: 'createTime',
+				// 	label: '添加时间',
+				// 	fixed: true,
+				// 	width: 180,
+				// 	filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
+				// },
+				{ prop: 'name', label: '设备名称' },
+				{ prop: 'code', label: '物料BOM' },
+				{ prop: 'remark', label: '参数BOM' },
+			],
+			list: [],
+			total: 0,
+			tableBtn: [],
+			queryParams: {
+				pageNo: 1,
+				pageSize: 10,
+			},
 		};
 	},
 	computed: {},
-	methods: {},
+	methods: {
+		handleEmitFun() {},
+		handleTableBtnClick() {},
+		getList() {},
+	},
 };
 </script>
 
 <style scoped lang="scss">
 .process-bom {
+	position: relative;
+    flex: 1;
 	padding: 12px 20px;
 	background: #fff;
 	border-radius: 8px;

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

@@ -9,6 +9,23 @@
 	<section class="process-graph">
 		<SearchBar :formConfigs="searchBarFormConfig" ref="search-bar" />
 
+		<div
+			class="btns"
+			style="text-align: right; position: absolute; top: 20px; right: 20px">
+			<el-button
+				type="primary"
+				plain
+				class="btn-create"
+				icon="el-icon-plus"
+				@click="createDet">
+				新建工序
+			</el-button>
+			<el-button class="btn-serialize" @click="graphToJson">序列化</el-button>
+			<el-button class="btn-antiserialize" @click="jsonToGraph">
+				反序列化
+			</el-button>
+		</div>
+
 		<div class="process-graph__panel" ref="panel"></div>
 	</section>
 </template>
@@ -25,6 +42,7 @@ export default {
 	props: {},
 	data() {
 		return {
+			graph: null,
 			searchBarFormConfig: [{ label: '工序列表' }],
 		};
 	},
@@ -48,6 +66,8 @@ export default {
 			y: 30,
 			processName: '工序00A',
 			workshopName: '工段1',
+            processDesc: 'test test test',
+			processId: '1',
 		});
 		const pn2 = graph.addNode({
 			shape: 'process-node',
@@ -55,6 +75,8 @@ export default {
 			y: 30,
 			processName: '工序00B',
 			workshopName: '工段1',
+            processDesc: 'test test test',
+			processId: '1',
 		});
 
 		const pn3 = graph.addNode({
@@ -63,6 +85,8 @@ export default {
 			y: 30,
 			processName: '工序00C',
 			workshopName: '工段1',
+            processDesc: 'test test test',
+			processId: '1',
 		});
 
 		const pn4 = graph.addNode({
@@ -71,6 +95,8 @@ export default {
 			y: 120,
 			processName: '工序00D',
 			workshopName: '工段1',
+            processDesc: 'test test test',
+			processId: '1',
 		});
 
 		const pn5 = graph.addNode({
@@ -79,6 +105,8 @@ export default {
 			y: 30,
 			processName: '工序00E',
 			workshopName: '工段1',
+            processDesc: 'test test test',
+			processId: '1',
 		});
 
 		graph.addEdge({
@@ -156,9 +184,19 @@ export default {
 				},
 			},
 		});
+
+		this.graph = graph;
 	},
 	computed: {},
-	methods: {},
+	methods: {
+		createDet() {},
+		jsonToGraph() {},
+		graphToJson() {
+			if (this.graph) {
+				console.log(JSON.stringify(this.graph.toJSON(), null, 2));
+			}
+		},
+	},
 };
 </script>
 
@@ -167,6 +205,7 @@ export default {
 	padding: 12px 20px 20px;
 	background: #fff;
 	border-radius: 8px;
+	position: relative;
 }
 
 .process-graph__panel {

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

@@ -42,23 +42,27 @@ ProcessNode.config({
         },
         {
             tagName: 'text',
-            textContent: '工序名称',
+            selector: 'processName',
             attrs: {
                 x: 20,
                 y: 30,
+                // fill: '#777',
+                // fontSize: 14
             },
         },
         {
             tagName: 'text',
-            textContent: '工段名称',
+            selector: 'workshopName',
             attrs: {
                 x: 115,
                 y: 30,
+                // fill: '#777',
+                // fontSize: 14
             },
         },
         {
             tagName: 'text',
-            selector: 'processName',
+            selector: 'processDesc',
             // textContent: '工序00A',
             attrs: {
                 x: 26,
@@ -67,22 +71,49 @@ ProcessNode.config({
                 fontSize: 14
             },
         },
-        {
+        // {
-            tagName: 'text',
+        //     tagName: 'text',
-            selector: 'workshopName',
+        //     textContent: '工序名称',
-            // textContent: '工段1',
+        //     attrs: {
-            attrs: {
+        //         x: 20,
-                x: 128,
+        //         y: 30,
-                y: 80,
+        //     },
-                fill: '#777',
+        // },
-                fontSize: 14
+        // {
-            },
+        //     tagName: 'text',
-        },
+        //     textContent: '工段名称',
+        //     attrs: {
+        //         x: 115,
+        //         y: 30,
+        //     },
+        // },
+        // {
+        //     tagName: 'text',
+        //     selector: 'processName',
+        //     // textContent: '工序00A',
+        //     attrs: {
+        //         x: 26,
+        //         y: 80,
+        //         fill: '#777',
+        //         fontSize: 14
+        //     },
+        // },
+        // {
+        //     tagName: 'text',
+        //     selector: 'workshopName',
+        //     // textContent: '工段1',
+        //     attrs: {
+        //         x: 128,
+        //         y: 80,
+        //         fill: '#777',
+        //         fontSize: 14
+        //     },
+        // },
     ],
     //
     propHooks(metadata) {
-        const { processName, workshopName, ...others } = metadata;
+        const { processName, workshopName, processDesc, processId, ...others } = metadata;
-        debugger;
+        // debugger;
         if (processName) {
             console.log("processName", processName)
             ObjectExt.setByPath(others, 'attrs/processName/text', processName);
@@ -91,6 +122,14 @@ ProcessNode.config({
             console.log("workshopName", workshopName)
             ObjectExt.setByPath(others, 'attrs/workshopName/text', workshopName);
         }
+        if (processDesc) {
+            console.log("processDesc", processDesc)
+            ObjectExt.setByPath(others, 'attrs/processDesc/text', processDesc);
+        }
+        if (processId) {
+            console.log("processId", processId)
+            ObjectExt.setByPath(others, 'processId', processId);
+        }
         return others;
     }
 })

src/views/extend/processFlowView/index.vue

@@ -38,5 +38,7 @@ export default {
 	padding: 8px;
 	flex: 1;
 	background: #f2f4f9;
+	display: flex;
+	flex-direction: column;
 }
 </style>