引入

npm install dc-process
# OR
yarn add dc-process
# OR
pnpm add dc-process

使用

初始化

在项目初始化时设置dc-process的接口地址前缀。

// main.js
import DcProcess from 'dc-process'
import 'dc-process/dist/dc-process.css'
// 参数为要使用的接口地址前缀，此处为示例
DcProcess.setApi('http://localhost/flow')
// 为借口添加token，设置的token会自动传入请求header的Authorization参数
DcProcess.setToken('token值')

使用页面组件

DcProcessDesign 流程设计页面组件

在引用处生成流程设计管理页面。

引用示例

<template>
	<dc-process-design />
</template>

<script>
import { DcProcessDesign } from 'dc-process'

export default {
  name: 'Design',
  components: { DcProcessDesign },
}
</script>

DcProcessDeploy 流程设计页面组件

在引用处生成流程设计管理页面。

引用示例

<template>
	<dc-process-deploy />
</template>

<script>
import { DcProcessDeploy } from 'dc-process'

export default {
  name: 'Deploy',
  components: { DcProcessDeploy },
}
</script>

DcProcessInstance 流程设计页面组件

在引用处生成流程设计管理页面。

引用示例

<template>
	<dc-process-instance />
</template>

<script>
import { DcProcessInstance } from 'dc-process'

export default {
  name: 'Instance',
  components: { DcProcessInstance },
}
</script>

DcBpmnViewer 流程图展示组件 (1.1.0)

在引用处生成流程对应流程图的展示。

引用示例

展示指定流程数据的流程图

<template>
  <dc-bpmn-viewer data-id="430f099f49f90f094" process="Process_t45g4y"/>
</template>

<script>
import { DcBpmnViewer } from 'dc-process'

export default {
  name: 'Viewer',
  components: { DcBpmnViewer },
}
</script>

展示指定流程的流程图

<template>
  <dc-bpmn-viewer :xml="xml" current-node-id="Activity_1ot743s"/>
</template>

<script>
import { DcBpmnViewer } from 'dc-process'

export default {
  name: 'FlowViewer',
  components: { DcBpmnViewer },
  data(){
    return {
      xml: `
        <?xml version="1.0" encoding="UTF-8"?>
        <definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:omgdc="http://www.omg.org/spec/DD/20100524/DC" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:camunda="http://camunda.org/schema/1.0/bpmn" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" targetNamespace="" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL http://www.omg.org/spec/BPMN/2.0/20100501/BPMN20.xsd">
          <process id="Process_fd0y7vzp" name="流程测试工具" isExecutable="true">
            <startEvent id="Event_0x23ko5">
              <outgoing>Flow_07hpy35</outgoing>
            </startEvent>
            <userTask id="Activity_1ot743s">
              <incoming>Flow_07hpy35</incoming>
              <outgoing>Flow_1yid70h</outgoing>
              <multiInstanceLoopCharacteristics camunda:collection="Activity_1ot743s" />
            </userTask>
            <sequenceFlow id="Flow_07hpy35" sourceRef="Event_0x23ko5" targetRef="Activity_1ot743s" />
            <userTask id="Activity_1d3s2w7">
              <incoming>Flow_1yid70h</incoming>
              <outgoing>Flow_0w9pq2y</outgoing>
            </userTask>
            <sequenceFlow id="Flow_1yid70h" sourceRef="Activity_1ot743s" targetRef="Activity_1d3s2w7" />
            <endEvent id="Event_0jjq2ck">
              <incoming>Flow_0w9pq2y</incoming>
            </endEvent>
            <sequenceFlow id="Flow_0w9pq2y" sourceRef="Activity_1d3s2w7" targetRef="Event_0jjq2ck" />
          </process>
          <bpmndi:BPMNDiagram id="sid-74620812-92c4-44e5-949c-aa47393d3830">
            <bpmndi:BPMNPlane id="sid-cdcae759-2af7-4a6d-bd02-53f3352a731d" bpmnElement="Process_fd0y7vzp">
              <bpmndi:BPMNEdge id="Flow_0w9pq2y_di" bpmnElement="Flow_0w9pq2y">
                <di:waypoint x="-220" y="-130" />
                <di:waypoint x="-158" y="-130" />
              </bpmndi:BPMNEdge>
              <bpmndi:BPMNEdge id="Flow_1yid70h_di" bpmnElement="Flow_1yid70h">
                <di:waypoint x="-380" y="-130" />
                <di:waypoint x="-320" y="-130" />
              </bpmndi:BPMNEdge>
              <bpmndi:BPMNEdge id="Flow_07hpy35_di" bpmnElement="Flow_07hpy35">
                <di:waypoint x="-532" y="-130" />
                <di:waypoint x="-480" y="-130" />
              </bpmndi:BPMNEdge>
              <bpmndi:BPMNShape id="Event_0x23ko5_di" bpmnElement="Event_0x23ko5">
                <omgdc:Bounds x="-568" y="-148" width="36" height="36" />
              </bpmndi:BPMNShape>
              <bpmndi:BPMNShape id="Activity_1ot743s_di" bpmnElement="Activity_1ot743s">
                <omgdc:Bounds x="-480" y="-170" width="100" height="80" />
              </bpmndi:BPMNShape>
              <bpmndi:BPMNShape id="Activity_1d3s2w7_di" bpmnElement="Activity_1d3s2w7">
                <omgdc:Bounds x="-320" y="-170" width="100" height="80" />
              </bpmndi:BPMNShape>
              <bpmndi:BPMNShape id="Event_0jjq2ck_di" bpmnElement="Event_0jjq2ck">
                <omgdc:Bounds x="-158" y="-148" width="36" height="36" />
              </bpmndi:BPMNShape>
            </bpmndi:BPMNPlane>
            <bpmndi:BPMNLabelStyle id="sid-e0502d32-f8d1-41cf-9c4a-cbb49fecf581">
              <omgdc:Font name="Arial" size="11" isBold="false" isItalic="false" isUnderline="false" isStrikeThrough="false" />
            </bpmndi:BPMNLabelStyle>
            <bpmndi:BPMNLabelStyle id="sid-84cb49fd-2f7c-44fb-8950-83c3fa153d3b">
              <omgdc:Font name="Arial" size="12" isBold="false" isItalic="false" isUnderline="false" isStrikeThrough="false" />
            </bpmndi:BPMNLabelStyle>
          </bpmndi:BPMNDiagram>
        </definitions>
      `,
    }
  },
}
</script>

组件属性

| 属性名 | 说明 | 类型 | 默认值 | |---------------|-----------------------------|---------|-------| | xml | 流程xml，不指定dataId时必填 | String | - | | currentNodeId | 当前节点的id，指定dataId时不需要填写 | String | - | | isRejected | 当前节点是否为被驳回状态，指定dataId时不需要填写 | Boolean | false | | process | 流程标识，指定dataId时必填 | String | - | | dataId | 业务数据id，指定xml时不需要填写 | String | - |

其他

界面自定义

目前仅支持通过css样式覆盖来修改界面样式展示。