antV x6 开发流程图实例
//数据结构示例
[
{
"id": "416",
"name": "初始状态",
"isStart": 1,
"left": 240,
"top": 30,
"nextNodeIds": "417",
"preNodeIds": "",
"type": "status",
"description": "",
"userList": [],
"roleList": [],
"selectedEditFiled": [],
"selectedMustFillFiled": []
},
{
"id": "417",
"name": "状态",
"isStart": 0,
"left": 240,
"top": 190,
"nextNodeIds": "418,175150928",
"preNodeIds": "416",
"type": "status",
"description": "",
"userList": [],
"roleList": [],
"selectedEditFiled": [],
"selectedMustFillFiled": []
},
{
"id": "418",
"name": "动作1",
"isStart": 0,
"left": 560,
"top": 200,
"nextNodeIds": "",
"preNodeIds": "417",
"type": "action",
"actionType": 1,
"actionData": {
"addDataFields": [],
"addDataTableFields": [],
"addType": 0,
"editDataFields": [],
"email": "hellow:\n\n do you remenber me?",
"relation": [],
"roleList": [],
"toFormId": 0,
"userList": [
"1"
]
}
},
{
"id": "175150928",
"type": "approve",
"name": "审批",
"isStart": 0,
"passStatusId": "175155995",
"denyStatusId": "417",
"userList": [],
"roleList": [],
"left": 240,
"top": 380,
"preNodeIds": "417",
"nextNodeIds": "175155995",
"currentPassConn": "9c79455d-7d39-4e1d-8834-0f55b1032b39",
"currentDenyConn": "ebe7c011-179d-48c8-8179-8166ee2957e8"
},
{
"id": "175155995",
"type": "status",
"name": "结束",
"isStart": 0,
"description": "",
"selectedMustFillFiled": [],
"selectedEditFiled": [],
"userList": [],
"roleList": [],
"left": 240,
"top": 600,
"preNodeIds": "175150928"
}
]
//初始化部分
initFlowFrame(){
let that = this;
that.graphIns = new X6.Graph({
container: document.getElementById('diagram-container'),
width: 3000,
height: 2000,
scroller: {
enabled: true,
pannable: true,
},
mousewheel: {
enabled: true,
//modifiers: ['ctrl'],
},
background: {
color: '#eaecf3', // 设置画布背景颜色
},
grid: {
size: 10, // 网格大小 10px
visible: true, // 渲染网格背景
},
minimap: {
enabled: true,
container: document.getElementById('min-map'),
width: 200,
height: 150,
scalable: false,
}
});
that.graphIns.lockScroller();
that.graphIns.on('node:click',({e,x,y,node,view})=>{
let id = node.id;
let type = node.data.type;
that.clickNode(id,type);
that.showNodeBox(type);
});
that.graphIns.on('node:mouseenter', ({ node }) => {
let id = node.id;
let isStart = node.data.isStart;
let tools = [{
name: 'button',
args: {
markup: [
{
tagName: 'circle',
selector: 'button',
attrs: {
r: 8,
stroke: '#87cefa',
'stroke-width': 1,
fill: 'white',
cursor: 'pointer',
},
},
{
tagName: 'line',
selector: 'line-one',
attrs: {
stroke: '#87cefa',
'stroke-width':2,
x1: 0,
y1: 5,
x2: 0,
y2: -5,
},
},
{
tagName: 'line',
selector: 'line-two',
attrs: {
stroke: '#87cefa',
'stroke-width':2,
x1: 5,
y1: 0,
x2: -5,
y2: 0,
},
}
],
x: '50%',
y: '100%',
offset: { x: 0, y: 0 },
onClick({ view }) {
let id = view.cell.id;
let posX = 0, posY = 0;
let event = window.event;
if (event.pageX || event.pageY) {
posX = event.pageX;
posY = event.pageY;
} else if (event.clientX || event.clientY) {
posX = event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;
posY = event.clientY + document.documentElement.scrollTop + document.body.scrollTop;
}
that.clickAddNodeBtn(id,posX,posY);
},
},
}];
if(isStart == 0){
tools.push({
name: 'button',
args: {
markup: [
{
tagName: 'circle',
selector: 'button',
attrs: {
r: 8,
stroke: '#ff0000',
'stroke-width': 1,
fill: 'white',
cursor: 'pointer',
},
},
{
tagName: 'line',
selector: 'line-one',
attrs: {
stroke: '#ff0000',
'stroke-width':2,
x1: -3,
y1: -3,
x2: 3,
y2: 3,
},
},
{
tagName: 'line',
selector: 'line-tow',
attrs: {
stroke: '#ff0000',
'stroke-width':2,
x1: -3,
y1: 3,
x2: 3,
y2: -3,
},
}
],
x: '100%',
y: '100%',
offset: { x: -1, y: -50 },
onClick({ view }) {
//let id = ;
//(view);
popup.warning('提示','确定要删除节点吗？',function(){
that.deleteFlowNode(id);
});
},
},
});
}
node.addTools(tools);
})
//移动节点
that.graphIns.on('node:moved',({e,x,y,node,view})=>{
let id = node.id;
let xx = node.position().x;
let yy = node.position().y;
let index = that.getFlowIndex(id);
that.flow[index]['left'] = xx;
that.flow[index]['top'] = yy;
});
// 鼠标移开时删除按钮
that.graphIns.on('node:mouseleave', ({ node }) => {
node.removeTools()
})
//鼠标滑出添加节点列表
$(".step3").on("mouseleave", ".add-node-list",function(){
$(this).css('display','none');
})
//添加节点列表单击事件
$(".step3").on("click", ".add-node-list li",function () {
let self = $(this);
let panel = self.parent();
panel.css('display','none');
let currentNodeId = panel.attr('current-node-id');
let type = self.attr('data-type');
let uuid = that.$parent.createId();
let nodeFrm = that.graphIns.getCellById(currentNodeId);
let x = nodeFrm.position().x;
let y = nodeFrm.position().y + 120;
if(type == 'insert_node'){
//创建列表
that.currentInsertNodePrentId = currentNodeId;
that.currentInsertNodeType = '';
that.createInsertNodeList(currentNodeId);
$('.insert-node-panel').addClass('md-show');
$('.insert-node-panel').css('z-index',9999999);
return ;
}
let innerHtml = that.node[type];
let res = that.createFlowNode(0,'create',type,uuid,innerHtml,y,x,currentNodeId,true);
if(res){
that.createFlowNodeConnection(currentNodeId,uuid,true);
}
});
//点击插入新节点面板选择类型选项
$('.insert-node-panel').on('click','.panel-l .node-list li',function(){
that.clickTypeListHtml(this);
});
},
//创建流程节点
createFlowNode(isStart,lifeCycle,type,uuid,innerHtml,top,left,currentNodeId,verifyFlag){
let that = this;
if(verifyFlag){
let verifyRes = that.createFlowNodeVerify(type,currentNodeId,'');
if(verifyRes !== true){
popup.fail('提示',verifyRes);
return false;
}
}
that.graphIns.addNode({
id: uuid,
shape: 'rect',
x: left,
y: top,
width: 160,
height: 50,
attrs: {
body: {
fill: '#f1f1f2',
stroke: that.nodeColor[type],
strokeWidth: 1,
fillOpacity: 0.8,
strokeLinejoin: "round",
//strokeOpacity: 0.5
},
label: {
text: innerHtml,
fill: '#000000',
},
},
data:{
isStart: isStart,
type:type,
}
});
if(lifeCycle == 'create'){
let pushFlow = {};
if(type == 'status'){
pushFlow = {
'id': uuid,
'type': type,
'name': innerHtml,
'isStart': isStart,
'description':'',
'selectedMustFillFiled':[],
'selectedEditFiled':[],
'userList': [],
'roleList': [],
'left': left,
'top': top,
};
}else if(type == 'branch'){
pushFlow = {
'id': uuid,
'type': type,
'name': innerHtml,
'isStart': isStart,
'condition': [],
'left': left,
'top': top,
};
}else if(type == 'approve'){
pushFlow = {
'id': uuid,
'type': type,
'name': innerHtml,
'isStart': isStart,
'passStatusId': '',
'denyStatusId': '',
'userList': [],
'roleList': [],
'left': left,
'top': top,
};
}else if(type == 'action'){
pushFlow = {
'id': uuid,
'type': type,
'name': innerHtml,
'isStart': isStart,
'actionType': 0,
'actionData': {},
'left': left,
'top': top,
};
}
that.flow.push(pushFlow);
}
return true;
},
//创建连线
createFlowEdge(type,sourceId,targetId){
let that = this;
let obj;
if(type == 'common'){
obj = that.graphIns.addEdge({
source: {
cell: sourceId,
anchor: {
name: 'center', //orth nodeCenter
args: {
dx: 10,
},
},
},
target: {
cell: targetId,
anchor: 'orth',
},
connector: 'rounded', //normal smooth rounded jumpover
router: 'manhattan',//normal orth oneSide manhattan metro er
attrs: that.lineStyle(),
data:{
type:'common',
}
});
}else if(type == 'pass'){
obj = that.graphIns.addEdge({
shape: 'edge',
source: sourceId,
target: targetId,
connector: 'normal', //normal smooth rounded jumpover
router: {
name: 'normal', //normal orth oneSide manhattan metro er
},
attrs: that.lineStyle('pass'),
data:{
type:'pass'
}
});
}else if(type == 'deny'){
obj = that.graphIns.addEdge({
shape: 'edge',
source: sourceId,
target: targetId,
connector: 'normal', //normal smooth rounded jumpover
router: {
name: 'normal',
},
attrs: that.lineStyle('deny'),
data:{
type:'deny'
}
});
}
return obj;
},
//线条样式
lineStyle(direction){
let res = {
line: {
stroke: '#909ed5',
offset: -10,
targetMarker: {
name: 'path',
fill: '#909ed5', // 使用自定义填充色
stroke: '#909ed5', // 使用自定义边框色
strokeWidth: 1,
d: 'M 5 -3 0 0 5 3 Z',
},
},
};
if(direction == 'pass'){
res.line.stroke = '#07c90b';
res.line.targetMarker.fill = '#07c90b';
res.line.targetMarker.stroke = '#07c90b';
res.line.strokeDasharray="10 5";
}else if(direction == 'deny'){
res.line.stroke = '#da0000';
res.line.targetMarker.fill = '#da0000';
res.line.targetMarker.stroke = '#da0000';
res.line.strokeDasharray="10 5";
}
return res;
},