# dc-process

> 正元数字流程中心组件

Latest version **1.3.1** (published 2024-04-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install dc-process
pnpm add dc-process
yarn add dc-process
bun add dc-process
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; large bundle.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.3.1 |
| Published | 2024-04-23 |
| First published | 2023-11-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 24.8 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | dc |
| Maintainers | pangwei1994 |

## Links

- npm: https://www.npmjs.com/package/dc-process
- npm.io page: https://npm.io/package/dc-process

## Recent versions

- 1.3.1 (latest) — 2024-04-23
- 1.3.0 — 2024-01-30
- 1.2.4 — 2024-01-24
- 1.2.3 — 2024-01-24
- 1.2.2 — 2023-12-08
- 1.2.1 — 2023-12-07
- 1.2.0 — 2023-12-06
- 1.1.0 — 2023-11-23
- 1.0.0 — 2023-11-17

## README

<h1 style="text-align: center;">dc-process</h1>
<p align="center">dc-process - 正元数字流程中心组件</p>

## 引入
```
npm install dc-process
# OR
yarn add dc-process
# OR
pnpm add dc-process
```

## 使用

### 初始化
在项目初始化时设置dc-process的接口地址前缀。
```javascript
// 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 流程设计页面组件
在引用处生成流程设计管理页面。

##### 引用示例
```vue
<template>
	<dc-process-design />
</template>

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

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

#### DcProcessDeploy 流程设计页面组件
在引用处生成流程设计管理页面。

##### 引用示例
```vue
<template>
	<dc-process-deploy />
</template>

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

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

#### DcProcessInstance 流程设计页面组件
在引用处生成流程设计管理页面。

##### 引用示例
```vue
<template>
	<dc-process-instance />
</template>

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

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

#### DcBpmnViewer 流程图展示组件 (1.1.0)
在引用处生成流程对应流程图的展示。

##### 引用示例

展示指定流程数据的流程图
```vue
<template>
  <dc-bpmn-viewer data-id="430f099f49f90f094" process="Process_t45g4y"/>
</template>

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

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

展示指定流程的流程图
```vue
<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样式覆盖来修改界面样式展示。

---
_Source: https://npm.io/package/dc-process · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._