SBpmsDiagram BPMS 流程图

• 示例
  • 基本用法
• API
  • Props/Attrs
  • Events

bpms

BPMS 展示流程图通用业务组件

示例

基本用法

<template>
  <s-bpms-diagram :loading="loading" :data="data"></s-bpms-diagram>
</template>

<script>
  export default {
    data() {
      return {
        loading: true,
        data: {},
      };
    },
    created() {
      setTimeout(() => {
        this.data = {
          elements: [
            {
              completed: true,
              current: false,
              id: 'startEvent1',
              name: null,
              incomingFlows: [],
              x: 100,
              y: 163,
              width: 28,
              height: 28,
              type: 'StartEvent',
            },
            {
              completed: true,
              current: true,
              id: 'sid-05CEB0A0-4479-42D3-9823-C3ED6A684E57',
              name: '测试任务',
              incomingFlows: ['sid-9F7E3F79-92ED-4E87-B63D-8DB6FB1BE4F4'],
              x: 173,
              y: 137,
              width: 100,
              height: 80,
              type: 'UserTask',
              properties: [
                {
                  name: 'Candidate groups',
                  value: '${initiator}',
                },
              ],
            },
            {
              completed: false,
              current: false,
              id: 'sid-B9123E26-2A95-4FAC-9E14-F5F3D2E02897',
              name: null,
              incomingFlows: ['sid-B1CD13CA-7AD1-4982-A533-0631C2D21019'],
              x: 318,
              y: 163,
              width: 28,
              height: 28,
              type: 'EndEvent',
            },
          ],
          flows: [
            {
              completed: true,
              current: false,
              id: 'sid-9F7E3F79-92ED-4E87-B63D-8DB6FB1BE4F4',
              type: 'sequenceFlow',
              sourceRef: 'startEvent1',
              targetRef: 'sid-05CEB0A0-4479-42D3-9823-C3ED6A684E57',
              name: null,
              waypoints: [
                {
                  x: 129,
                  y: 177,
                },
                {
                  x: 172,
                  y: 177,
                },
              ],
            },
            {
              completed: false,
              current: false,
              id: 'sid-B1CD13CA-7AD1-4982-A533-0631C2D21019',
              type: 'sequenceFlow',
              sourceRef: 'sid-05CEB0A0-4479-42D3-9823-C3ED6A684E57',
              targetRef: 'sid-B9123E26-2A95-4FAC-9E14-F5F3D2E02897',
              name: null,
              waypoints: [
                {
                  x: 272,
                  y: 177,
                },
                {
                  x: 318,
                  y: 177,
                },
              ],
            },
          ],
          collapsed: [],
          diagramBeginX: 114,
          diagramBeginY: 137,
          diagramWidth: 346,
          diagramHeight: 217,
          completedActivities: [
            'startEvent1',
            'sid-9F7E3F79-92ED-4E87-B63D-8DB6FB1BE4F4',
            'sid-05CEB0A0-4479-42D3-9823-C3ED6A684E57',
          ],
          currentActivities: ['sid-05CEB0A0-4479-42D3-9823-C3ED6A684E57'],
          completedSequenceFlows: [],
        };
        this.loading = false;
      }, 2000);
    },
  };
</script>

API

Props/Attrs

| Prop/Attr | Type | Options | Default | Description | | --------- | ---- | ------- | ------- | ----------- | | loading | boolean | | | 展示加载中 | | error | string | | | 展示错误信息 | | data | object | | [object Object] | bpms 默认格式的 json 数据 |

Events

@success

绘图成功后触发