yudao-dev/src/views/extend/processFlowView/components/ProcessDetail.vue

<!-- 
    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="btns"
			style="text-align: right; position: absolute; top: 20px; right: 20px">
			<el-button
				type="warning"
				@click="undo"
				plain
				v-if="allowUndo"
				:disabled="!allowUndo"
				icon="el-icon-back">
				撤销
			</el-button>
			<el-button
				type="warning"
				@click="redo"
				plain
				v-if="allowRedo"
				:disabled="!allowRedo">
				下一步
				<i class="el-icon-right el-icon--right"></i>
			</el-button>
			<el-button
				type="primary"
				plain
				class="btn-create"
				icon="el-icon-plus"
				@click="handleAdd">
				新建工序
			</el-button>
			<el-button class="btn-serialize" @click="graphToJson">序列化</el-button>
			<el-button class="btn-antiserialize" @click="jsonToGraph">
				反序列化
			</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" />
		</base-dialog>
	</section>
</template>

<script>
import { Graph } from '@antv/x6';
import ProcessNode from './ProcessNode';
import DialogForm from '@/components/DialogForm';

Graph.registerNode('process-node', ProcessNode);

export default {
	name: 'ProcessGraph',
	components: { DialogForm },
	props: {},
	inject: ['getFlowId'],
	data() {
		return {
			allowRedo: false,
			allowUndo: false,
			graph: null,
			searchBarFormConfig: [{ label: '工序列表' }],
			title: '',
			open: false,
			form: {
				name: '', // 工序名称
				sectionId: '', // 工段id
				remark: '', // 描述
			},
			rows: [
				[
					{
						input: true,
						label: '工序名称',
						prop: 'name',
						rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
					},
				],
				[
					{
						select: true,
						label: '工段',
						prop: 'sectionId',
						url: '/base/core-workshop-section/listAll',
						rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
						bind: {
							filterable: true,
						},
					},
				],
				[
					{
						textarea: true,
						label: '工序说明',
						prop: 'remark',
					},
				],
			],
			updateUrl: '/extend/process-flow-det/update',
			addUrl: '/extend/process-flow-det/create',
			// pageUrl: '/extend/process-flow-det/get',
			infoUrl: '/extend/process-flow-det/get',
		};
	},
	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,
		},
	},
	mounted() {
		const graph = new Graph({
			container: this.$refs.panel,
			grid: {
				size: 10,
				visible: true,
			},
			history: true,
			selecting: {
				enabled: true,
				rubberband: true,
				movable: true,
				showNodeSelectionBox: true,
				className: 'process-selected',
			},
			snapline: true,
			scroller: {
				enabled: true,
			},
		});

		graph.on('node:click', ({ node }) => {
			const { processId } = node.attrs;
			console.log('node:click', processId.text);
		});

		// 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;
		// 	},
		// });

		graph.on('cell:selected', ({ cell, options }) => {
			console.log('cell:selected', cell, options);
		});

		this.graph = graph;

		// console.log('selected:', this.graph.selection.widget.container)
	},
	computed: {},
	methods: {
		createDet() {},
		jsonToGraph() {},
		graphToJson() {
			if (this.graph) {
				console.log(JSON.stringify(this.graph.toJSON(), null, 2));
			}
		},
		reset() {
			this.form = {
				name: '', // 工序名称
				sectionId: '', // 工段id
				remark: '', // 描述
			};
			this.resetForm('form');
		},
		/** 取消按钮 */
		cancel() {
			this.open = false;
			this.reset();
		},
		handleAdd() {
			this.reset();
			this.open = true;
			this.title = '添加工序';
		},
		handleEdit() {
			this.open = true;
			this.title = '编辑工序';
		},
		handleDelete(id) {},
		/** 提交按钮 */
		submitForm() {
			this.$refs['form'].validate((valid) => {
				if (!valid) {
					return;
				}
				// 修改的提交
				if (this.form.id != null) {
					this.updateProcess();
					return;
				}
				this.createProcess().then((id) => {
					if (!id) return;
					this.graph.addNode(
						this.createProcessNode({
							flowId: this.flowId,
							...this.form,
							id,
						})
					);
				});
			});
		},
		createProcessNode({ flowId, name, id, remark, sectionId }) {
			return {
				shape: 'process-node',
				x: 0,
				y: 0,
				detName: name, // 工序名称
				sectionName: 'default', // 工段
				detDesc: remark, // 工序说明
				processId: flowId, // 工艺ID
				detId: id, // 工序ID
				tools: [{ name: 'button-remove' }],
			};
		},
		updateProcess() {
			return updateEquipmentType(this.form).then((response) => {
				this.$modal.msgSuccess('修改成功');
				this.open = false;
				// this.getList();
			});
		},
		createProcess() {
			const flowId = this.$route.params.id;
			// const t = this.getFlowId(); // it also works
			if (!flowId) {
				this.$modal.msgError('工艺ID不能为空');
				return Promise.reject(null);
			}
			// 添加的提交
			return this.post({ flowId: this.flowId, ...this.form }).then(
				({ code, data }) => {
					this.$modal.msgSuccess('新增成功');
					this.open = false;
					// this.getList();
					return data;
				}
			);
		},
		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);
		},
		http(url, method, payload) {
			return this.$axios({
				url,
				method,
				params: method === 'get' ? payload : null,
				data: method !== 'get' ? payload : null,
			})
		},
	},
};
</script>

<style scoped lang="scss">
.process-graph {
	padding: 12px 20px 20px;
	background: #fff;
	border-radius: 8px;
	position: relative;
}

.process-graph__panel {
	height: 300px;
}
</style>

<style>
.x6-widget-selection-selected {
	border: 1px solid red;
}
</style>