使用事项：
❗先放个组件上来，使用手册有空会补全
❗需要下载依赖

“@antv/x6”: “^2.18.1”,
“@antv/x6-plugin-dnd”: “^2.1.1”,

组件：

组件使用：

  <flowChart :key="flowChartKey" ref="flowChart" left-title="可用工序" :node-list="nodeList" :graph-data="dataJson":drawer-config="drawerConfig" :line-drawer-config="lineDrawerConfig"route-record-type="2" route-record-label="procedureName" route-record-key="procedureId"/>

javascript">      nodeList: [],dataJson: {},drawerConfig: [{type: undefined,prop: 'procedureId'},{type: 'input',label: '工序名称',prop: 'procedureName',placeholder: '请输入工序名称',disabled: true},{type: 'input',label: '工序编号',prop: 'procedureCode',placeholder: '请输入工序编号',disabled: true},{type: 'selectDict',label: '工序类型',prop: 'procedureType',placeholder: '请选择工序类型',dictType: 'MES_GXLX',disabled: true}],lineDrawerConfig: [{type: undefined,prop: 'procedureId'},{type: 'input',label: '起始工序',prop: 'startProcedureName',placeholder: '',disabled: true},{type: 'input',label: '下道工序',prop: 'endProcedureName',placeholder: '',disabled: true},{type: 'selectRoute',label: '记录工序',prop: 'recordProcedure',placeholder: '请选择',options: [],disabled: false}]

javascript">     // 获取节点数据const nodeList = this.form.nodeList || []const nodes = []nodeList.forEach(el => {const coordinate = el.coordinate.split(',') || []const portList = el.portList.map(item => ({group: item.portGroup,id: item.portId}))console.log('el.procedureType.toString()', el.procedureType, el.procedureType ? el.procedureType.toString() : '')nodes.push({id: el.nodeId,x: coordinate.length ? coordinate[0] * 1 : 0,y: coordinate.length ? coordinate[1] * 1 : 0,width: el.width,height: el.height,label: el.nodeDesc,nodeType: el.nodeType,shape: 'custom-node',ports: {items: portList},nodeData: {procedureCode: el.procedureCode,procedureId: el.procedureId,procedureName: el.procedureName,procedureType: el.procedureType != null ? (el.procedureType === 0 ? '0' : el.procedureType.toString()) : ''}})})// 获取连线数据const linkList = this.form.linkList || []const edges = []linkList.forEach(el => {edges.push({id: el.linkId,source: {cell: el.startId,port: el.startPortId},target: {cell: el.endId,port: el.endPortId},nodeData: {recordProcedure: el.recordProcedure,startProcedure: el.startProcedure,startProcedureName: el.startProcedureName,postProcedure: el.postProcedure,endProcedureName: el.postProcedureName}})})this.dataJson = {nodes,edges}