一、介绍
一个基于G6-Editor的流程图编辑器组件
二、依赖
AntV-G6
G6-Editor
antd
三、组件目录结构
- Flow -- images // 组件使用相关图片 -- error.svg //未编辑 -- success.svg // 编辑成功 -- type.svg // 节点类型 -- model // 分离小组件 -- ContextMenu.js // 右键菜单 -- DetailPannel.js // 详情面板 -- ItemPannel.js // 左侧节点列表 -- Minimap.js // 导航器 -- Page.js // Canvas -- Toolbar.js // 顶部toolbar -- style // 组件样式 -- index.css -- Flow.js -- index.js
四、组件使用
import React, { Component } from 'react';
import { Button,Divider,Modal } from 'antd';
import Flow from './components/Flow'; // 编辑器组件
import "./App.css";
class App extends Component {
constructor(props) {
super(props);
this.state = {
visible: false,
currentModel: {},
relation: {nodes: []}
}
};
onNodeClick = (model,relation) => {
console.log(model,relation);
this.setState({ currentModel: model,relation })
}
onNodeDbClick = (model) => {
console.log(model);
this.openEditNodeModal()
}
onPublish = (relation) => {
console.log("保存",relation);
}
editNode = () => {
console.log("编辑节点");
this.openEditNodeModal()
// 打开编辑模态框
// 通过表单提交修改的节点信息
// 并修改relation
// 通过 this.flow.renderData(relation)
// 重新渲染流程图数据
}
closeEditNodeModal = () => {
this.setState({
visible:false
})
};
openEditNodeModal = () => {
this.setState({
visible: true
})
}
render (){
const { currentModel,visible } = this.state;
return <div className="App">
<Flow
className="process-flow"
ref={(node) => this.flow = node}
onNodeDbClick={this.onNodeDbClick}
onNodeClick={this.onNodeClick}
onPublish={this.onPublish}
nodeDetailPannel={<>
流程节点名称: {currentModel.flowNodeName}
<Divider />
流程角色名称: {currentModel.flowNodeRole}
<Divider />
<Button type="primary" onClick={this.editNode}>编辑节点</Button>
</>}
>
</Flow>
<Modal title="编辑节点"
forceRender={true}
style={{top: 20}}
width={ 1000 }
visible={visible}
onCancel={this.closeEditNodeModal}
footer={null}>
编辑节点表单
</Modal>
</div>
};
}
export default App;
五、展示