【Vue + Antv X6】可拖拽流程图组件

使用事项：

❗先放个组件上来，使用手册有空会补全

❗需要下载依赖

"@antv/x6": "^2.18.1",

"@antv/x6-plugin-dnd": "^2.1.1",

组件：

组件使用：

html 复制代码

  <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
        }