add process flow and process node

src/views/extend/processFlow/index.vue

@@ -17,10 +17,12 @@
 			<ProcessItem
 				v-for="item in list"
 				:key="item.id"
+				:id="item.id"
 				:name="item.name"
 				:line="item.lineName"
 				:desc="item.remark"
-				:isActive="item.enabled" />
+				:isActive="item.enabled"
+				@edit="handleUpdate" />
 		</section>
 
 		<base-dialog
@@ -42,17 +44,29 @@
 
 <script>
 import basicPageMixin from '@/mixins/lb/basicPageMixin';
-import cache from './cache';
+// import cache from './cache';
 
 const ProcessItem = {
 	name: 'ProcessItem',
 	components: {},
-	props: ['name', 'line', 'desc', 'isActive'],
+	props: ['id', 'name', 'line', 'desc', 'isActive'],
 	data() {
 		return {};
 	},
 	computed: {},
-	methods: {},
+	methods: {
+		handleEdit() {
+			this.$emit('edit', this.id);
+		},
+		handleViewDetail(e) {
+			this.$router.push({
+				name: 'ProcessFlowView',
+				params: {
+					id: this.id,
+				},
+			});
+		},
+	},
 	render: function (h) {
 		return (
 			<div
@@ -60,9 +74,13 @@ const ProcessItem = {
 				style="display: flex; flex-direction: column; position: relative;">
 				<div
 					class="process-item__content"
-					style="flex: 1; display: flex; align-items: center;">
-					{this.isActive && (
+					style="flex: 1; display: flex; align-items: center; cursor: pointer;"
+					title="点击查看详细工序列表"
+					onClick={this.handleViewDetail}>
+					{this.isActive ? (
 						<span style="display: inline-block; width: 10px; height: 10px; border-radius: 100%; background: #0ebe3a; position: absolute; top: 20px; right: 20px;" />
+					) : (
+						''
 					)}
 					<svg-icon
 						icon-class="tree-table"
@@ -75,7 +93,7 @@ const ProcessItem = {
 							{this.name}
 						</h2>
 						<h3 style="margin: 0;  font-weight: 400; font-size: 14px; line-height: 2; color: #888;">
-							{this.line}
+							{this.line || '/'}
 						</h3>
 						<p style="margin: 0; text-overflow: ellipse; white-space: nowrap; font-weight: 400; font-size: 14px; line-height: 1.25; color: #888;">
 							{this.desc}
@@ -89,7 +107,10 @@ const ProcessItem = {
 						<el-col
 							span={8}
 							style="text-align: center; border-right: 1px solid #0001">
-							<el-button type="text" style="color: #0007; line-height: 1.75">
+							<el-button
+								type="text"
+								style="color: #0007; line-height: 1.75"
+								onClick={this.handleEdit}>
 								编辑
 							</el-button>
 						</el-col>
@@ -122,6 +143,7 @@ export default {
 			updateUrl: '/extend/process-flow/update',
 			addUrl: '/extend/process-flow/create',
 			pageUrl: '/extend/process-flow/page',
+			infoUrl: '/extend/process-flow/get',
 			searchBarKeys: ['name', 'code', 'lineId', 'productId'],
 			searchBarFormConfig: [
 				{
@@ -161,7 +183,7 @@ export default {
 						select: true,
 						label: '产线',
 						prop: 'lineId',
-						cache: 'processFlow::lineList',
+						// cache: 'processFlow::lineList',
 						url: '/base/core-production-line/listAll',
 						bind: {
 							filterable: true,
@@ -169,9 +191,13 @@ export default {
 					},
 
 					{
-						input: true,
+						switch: true,
 						label: '是否启用',
 						prop: 'enabled',
+						bind: {
+							'active-value': 1,
+							'inactive-value': 0,
+						},
 					},
 				],
 				[
@@ -222,6 +248,13 @@ export default {
 			this.showUploadComponents = false;
 			this.title = '添加工艺';
 		},
+		async handleUpdate(id) {
+			this.reset();
+			const { data } = await this.info({ id });
+			this.form = data;
+			this.open = true;
+			this.title = '修改工艺';
+		},
 		submitForm() {
 			this.$refs['form'].validate((valid) => {
 				if (!valid) {

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

@@ -0,0 +1,35 @@
+<!-- 
+    filename: ProcessBomList.vue
+    author: liubin
+    date: 2023-10-20 15:00:58
+    description: 
+-->
+
+<template>
+	<section class="process-bom">
+		<SearchBar :formConfigs="searchBarFormConfig" ref="search-bar" />
+	</section>
+</template>
+
+<script>
+export default {
+	name: 'ProcessBom',
+	components: {},
+	props: {},
+	data() {
+		return {
+			searchBarFormConfig: [{ label: '工序下设备' }],
+		};
+	},
+	computed: {},
+	methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+.process-bom {
+	padding: 12px 20px;
+	background: #fff;
+	border-radius: 8px;
+}
+</style>

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

@@ -0,0 +1,175 @@
+<!-- 
+    filename: ProcessGraph.vue
+    author: liubin
+    date: 2023-10-20 15:00:58
+    description: 
+-->
+
+<template>
+	<section class="process-graph">
+		<SearchBar :formConfigs="searchBarFormConfig" ref="search-bar" />
+
+		<div class="process-graph__panel" ref="panel"></div>
+	</section>
+</template>
+
+<script>
+import { Graph } from '@antv/x6';
+import ProcessNode from './ProcessNode';
+
+Graph.registerNode('process-node', ProcessNode);
+
+export default {
+	name: 'ProcessGraph',
+	components: {},
+	props: {},
+	data() {
+		return {
+			searchBarFormConfig: [{ label: '工序列表' }],
+		};
+	},
+	mounted() {
+		const graph = new Graph({
+			container: this.$refs.panel,
+			grid: {
+				size: 10,
+				visible: false,
+				type: 'dot',
+				args: {
+					color: '#f005',
+					thickness: 1,
+				},
+			},
+		});
+
+		const pn1 = graph.addNode({
+			shape: 'process-node',
+			x: 30,
+			y: 30,
+			processName: '工序00A',
+			workshopName: '工段1',
+		});
+		const pn2 = graph.addNode({
+			shape: 'process-node',
+			x: 240,
+			y: 30,
+			processName: '工序00B',
+			workshopName: '工段1',
+		});
+
+		const pn3 = graph.addNode({
+			shape: 'process-node',
+			x: 360,
+			y: 30,
+			processName: '工序00C',
+			workshopName: '工段1',
+		});
+
+		const pn4 = graph.addNode({
+			shape: 'process-node',
+			x: 360,
+			y: 120,
+			processName: '工序00D',
+			workshopName: '工段1',
+		});
+
+		const pn5 = graph.addNode({
+			shape: 'process-node',
+			x: 500,
+			y: 30,
+			processName: '工序00E',
+			workshopName: '工段1',
+		});
+
+		graph.addEdge({
+			source: pn1,
+			target: pn2,
+			attrs: {
+				line: {
+					stroke: '#0b58ff',
+					strokeWidth: 1,
+					targetMarker: {
+						// name: 'classic',
+						// name: 'async',
+						size: 0,
+					},
+				},
+			},
+		});
+		graph.addEdge({
+			source: pn2,
+			target: pn3,
+			attrs: {
+				line: {
+					stroke: '#0b58ff',
+					strokeWidth: 1,
+					targetMarker: {
+						// name: 'classic',
+						// name: 'async',
+						size: 0,
+					},
+				},
+			},
+		});
+		graph.addEdge({
+			source: pn2,
+			target: pn4,
+			attrs: {
+				line: {
+					stroke: '#0b58ff',
+					strokeWidth: 1,
+					targetMarker: {
+						// name: 'classic',
+						// name: 'async',
+						size: 0,
+					},
+				},
+			},
+		});
+		graph.addEdge({
+			source: pn3,
+			target: pn5,
+			attrs: {
+				line: {
+					stroke: '#0b58ff',
+					strokeWidth: 1,
+					targetMarker: {
+						// name: 'classic',
+						// name: 'async',
+						size: 0,
+					},
+				},
+			},
+		});
+		graph.addEdge({
+			source: pn4,
+			target: pn5,
+			attrs: {
+				line: {
+					stroke: '#0b58ff',
+					strokeWidth: 1,
+					targetMarker: {
+						// name: 'classic',
+						// name: 'async',
+						size: 0,
+					},
+				},
+			},
+		});
+	},
+	computed: {},
+	methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+.process-graph {
+	padding: 12px 20px 20px;
+	background: #fff;
+	border-radius: 8px;
+}
+
+.process-graph__panel {
+	height: 300px;
+}
+</style>

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

@@ -0,0 +1,89 @@
+<!-- 
+    filename: ProcessInfo.vue
+    author: liubin
+    date: 2023-10-20 15:00:58
+    description: 
+-->
+
+<template>
+	<section class="process-info">
+		<SearchBar :formConfigs="searchBarFormConfig" ref="search-bar" />
+
+		<el-row :gutter="20">
+			<el-col :span="6">
+				<InfoItem label="工艺名称" value="测试工艺" />
+			</el-col>
+			<el-col :span="6">
+				<InfoItem label="产线" value="A4" />
+			</el-col>
+			<el-col :span="12">
+				<InfoItem
+					label="工艺描述"
+					value="咯热门asdfkj alsdfk ;lkj flskdjf sadf" />
+			</el-col>
+		</el-row>
+
+		<el-row :gutter="20" style="margin-top: 12px;">
+			<el-col :span="6">
+				<InfoItem label="创建人" value="xxse" />
+			</el-col>
+			<el-col :span="6">
+				<InfoItem label="创建时间" value="2023-10-22 10:11:00" />
+			</el-col>
+			<el-col :span="6">
+				<InfoItem label="更新人" value="xxse" />
+			</el-col>
+			<el-col :span="6">
+				<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',
+	components: {},
+	props: ['label', 'value'],
+	data() {
+		return {};
+	},
+	computed: {},
+	methods: {},
+	render: function (h) {
+		return (
+			<div style="display: flex; align-items: center; font-size: 14px; line-height: 1.5">
+				<span style="width: 100px; text-align: left; font-weight: 700">{this.label}:</span>
+				<span style="width: 200px; text-align: left; text-overflow: ellipse; white-space: nowrap">
+					{this.value}
+				</span>
+			</div>
+		);
+	},
+};
+
+export default {
+	name: 'ProcessInfo',
+	components: { InfoItem },
+	mixins: [basicPageMixin],
+	props: {},
+	data() {
+		return {
+			infoUrl: '/extend/process-flow/get',
+			searchBarFormConfig: [{ label: '工艺详情' }],
+		};
+	},
+	computed: {},
+	methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+.process-info {
+	padding: 12px 20px 20px;
+	background: #fff;
+	border-radius: 8px;
+}
+</style>

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

@@ -0,0 +1,96 @@
+import { Node, ObjectExt } from '@antv/x6';
+
+
+export default class ProcessNode extends Node {
+
+}
+
+ProcessNode.config({
+    width: 240,
+    height: 100,
+    markup: [
+        {
+            tagName: 'rect',
+            attrs: {
+                x: 0,
+                y: 0,
+                width: 200,
+                height: 100,
+                fill: 'transparent',
+                stroke: '#0b58ff'
+            },
+        },
+        {
+            tagName: 'rect',
+            attrs: {
+                x: 0,
+                y: 0,
+                width: 200,
+                height: 50,
+                fill: '#ffffff',
+            },
+        },
+        {
+            tagName: 'rect',
+            attrs: {
+                x: 0,
+                y: 50,
+                width: 200,
+                height: 50,
+                fill: '#f8f8f8',
+            },
+        },
+        {
+            tagName: 'text',
+            textContent: '工序名称',
+            attrs: {
+                x: 20,
+                y: 30,
+            },
+        },
+        {
+            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;
+        debugger;
+        if (processName) {
+            console.log("processName", processName)
+            ObjectExt.setByPath(others, 'attrs/processName/text', processName);
+        }
+        if (workshopName) {
+            console.log("workshopName", workshopName)
+            ObjectExt.setByPath(others, 'attrs/workshopName/text', workshopName);
+        }
+        return others;
+    }
+})

src/views/extend/processFlowView/index.vue

@@ -6,20 +6,37 @@
 -->
 
 <template>
-	<div>process flow vidivew</div>
+	<div class="app-container process-flow-view">
+		<ProcessInfo />
+		<ProcessDetail style="margin-top: 16px" />
+		<ProcessBomList style="margin-top: 16px" />
+	</div>
 </template>
 
 <script>
+import ProcessInfo from './components/ProcessInfo.vue';
+import ProcessBomList from './components/ProcessBomList.vue';
+import ProcessDetail from './components/ProcessDetail.vue';
+
 export default {
 	name: 'ProcessFlowView',
-	components: {},
+	components: { ProcessInfo, ProcessDetail, ProcessBomList },
 	props: {},
 	data() {
 		return {};
 	},
+	activated() {
+		console.log('activated...', this.$route.params);
+	},
 	computed: {},
 	methods: {},
 };
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.process-flow-view {
+	padding: 8px;
+	flex: 1;
+	background: #f2f4f9;
+}
+</style>