# Bpmnjs

**Repository Path**: zpt010/bpmnjs

## Basic Information

- **Project Name**: Bpmnjs
- **Description**: vue项目搭建的基于Bpmnjs的工作流在线画图
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-01-04
- **Last Updated**: 2024-09-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# bpmn-vue-basic

## 项目描述

此项目为以下章节中的教材案例.

- [《基础篇》](https://github.com/LinDaiDai/bpmn-chinese-document/tree/master/LinDaiDai/全网最详bpmn.js教材-基础篇.md)🔥🔥

- [《http请求篇》](https://github.com/LinDaiDai/bpmn-chinese-document/tree/master/LinDaiDai/全网最详bpmn.js教材-http请求篇.md)🔥🔥

- [《事件篇》](https://github.com/LinDaiDai/bpmn-chinese-document/tree/master/LinDaiDai/全网最详bpmn.js教材-事件篇.md)🔥🔥🔥

项目截图:

![img1](./public/image/bpmn8.png)



## 如何使用

将项目克隆至本地:

```
git clone git@github.com:LinDaiDai/bpmn-vue-basic.git
```

安装依赖:

```
npm install
```
安装依赖完成后完成后，需要在node_modules\bpmn-js-properties-panel\lib\factory\TextInputEntryFactory.js添加以下代码
```
//此处添加选择审核人对应的html代码
    if( resource.id == 'assignee' ){  //如果为执行人
      resource.html =
        '<label for="camunda-' + resource.id + '" ' +
        (canBeDisabled ? 'data-disable="isDisabled" ' : '') +
        (canBeHidden ? 'data-show="isHidden" ' : '') +
        (dataValueLabel ? 'data-value="' + dataValueLabel + '"' : '') + '>'+ label +'</label>' +
        '<div class="bpp-field-wrapper" ' +
        (canBeDisabled ? 'data-disable="isDisabled"' : '') +
        (canBeHidden ? 'data-show="isHidden"' : '') +
        '>' +
        '<div class="left-input-disabled">' +
        '<input id="camunda-' + resource.id + '" type="text" name="' + options.modelProperty+'" value="啊实打实的"' +
        (canBeDisabled ? 'data-disable="isDisabled"' : '') +
        (canBeHidden ? 'data-show="isHidden"' : '') +
        ' /> </input>' +

        '<button class="' + actionName + '" data-action="' + actionName + '" data-show="' + showName + '" ' +
        (canBeDisabled ? 'data-disable="isDisabled"' : '') +
        (canBeHidden ? ' data-show="isHidden"' : '') + '>' +
        '<span>' + buttonLabel + '</span>' +
        '</button>' +
        '</div>' +
        '<input type="button" class="btn-select" value="选择" onclick="openSingleUserDlg(this)"/>' +  //点击方法
        '</div>';
    } else if(resource.id == 'candidateUsers'){ //如果为候选人
      resource.html =
        '<label for="camunda-' + resource.id + '" ' +
        (canBeDisabled ? 'data-disable="isDisabled" ' : '') +
        (canBeHidden ? 'data-show="isHidden" ' : '') +
        (dataValueLabel ? 'data-value="' + dataValueLabel + '"' : '') + '>'+ label +'</label>' +
        '<div class="bpp-field-wrapper" ' +
        (canBeDisabled ? 'data-disable="isDisabled"' : '') +
        (canBeHidden ? 'data-show="isHidden"' : '') +
        '>' +
        '<div class="left-input-disabled">' +
        '<input id="camunda-' + resource.id + '" type="text" name="' + options.modelProperty+'" ' +
        (canBeDisabled ? 'data-disable="isDisabled"' : '') +
        (canBeHidden ? 'data-show="isHidden"' : '') +
        ' />' +

        '<button class="' + actionName + '" data-action="' + actionName + '" data-show="' + showName + '" ' +
        (canBeDisabled ? 'data-disable="isDisabled"' : '') +
        (canBeHidden ? ' data-show="isHidden"' : '') + '>' +
        '<span>' + buttonLabel + '</span>' +
        '</button>' +
        '</div>' +
        '<input type="button" class="btn-select" value="选择" onclick="openUserDlg(this)"/>' +  //点击方法
        '</div>';
    }else if(resource.id == 'candidateGroups'){ //如果为候选人组
      resource.html =
        '<label for="camunda-' + resource.id + '" ' +
        (canBeDisabled ? 'data-disable="isDisabled" ' : '') +
        (canBeHidden ? 'data-show="isHidden" ' : '') +
        (dataValueLabel ? 'data-value="' + dataValueLabel + '"' : '') + '>'+ label +'</label>' +
        '<div class="bpp-field-wrapper" ' +
        (canBeDisabled ? 'data-disable="isDisabled"' : '') +
        (canBeHidden ? 'data-show="isHidden"' : '') +
        '>' +
        '<div class="left-input-disabled">' +
        '<input id="camunda-' + resource.id + '" type="text" name="' + options.modelProperty+'" ' +
        (canBeDisabled ? 'data-disable="isDisabled"' : '') +
        (canBeHidden ? 'data-show="isHidden"' : '') +
        ' />' +

        '<button class="' + actionName + '" data-action="' + actionName + '" data-show="' + showName + '" ' +
        (canBeDisabled ? 'data-disable="isDisabled"' : '') +
        (canBeHidden ? ' data-show="isHidden"' : '') + '>' +
        '<span>' + buttonLabel + '</span>' +
        '</button>' +
        '</div>' +
        '<input type="button" class="btn-select" value="选择" onclick="openGroupsDlg(this)"/>' + //点击方法
        '</div>';
```
若需要获取到流程名字的，需要在node_modules\bpmn-js-properties-panel\lib\factory\TextBoxEntryFactory.js处修改
```
resource.html =
    '<label for="camunda-' + escapeHTML(resource.id) + '" ' +
    (canBeShown ? 'data-show="isShown"' : '') +
    '>' + label + '</label>' +
    '<div class="bpp-field-wrapper" ' +
    (canBeShown ? 'data-show="isShown"' : '') +
    '>' +
      '<div contenteditable="true" id="###你自己的id' + escapeHTML(resource.id) + '" ' +
            'name="' + escapeHTML(options.modelProperty) + '" />' +
    '</div>';
```
本地启动项目:

```
npm run serve
```

打包发布至生成环境:

```
npm run build
```