npm package: @lljuser/nutflow
Description: ## 引入
Author: ssc
Latest version: 1.6.2

# 流程设计器使用文档

## 引入

- 前端项目中在`/plblic/index.html`中引入打包好的`流程设计器`和`表单设计器`的静态js

- main.js

  ```js
  Vue.use(window.AvueFormDesign)
  Vue.use(window.WfDesign)
  ```

- 页面中使用

  ```html
  <template>
    <wf-design style="height: 100vh;"
              ref="bpmn"
              :options="options">
      <template #toolbar>
        <el-button size="mini"
                   icon="el-icon-check"
                   @click="handleSubmit">确定</el-button>
      </template>
    </wf-design>
  </template>
  
  <script>
  export default {
    data() {
      return {
        options: {
          config: true,
          mode: 'edit',
          // process: {
          //   id: "as123123",
          //   name: '123'
          // },
          // toolbar: ['open', 'create', 'fit', 'zoom-in', 'zoom-out', 'undo', 'redo', 'import', 'preview'],
          form: `{column:[{type:'input',label:'单行文本',span:24,display:true,prop:'1605160330582_56902'}]}`,
          button: [{
            label: '批准',
            prop: 'wf_pass',
            display: true
          }, {
            label: '驳回',
            prop: 'wf_reject',
            display: true
          }, {
            label: '打印',
            prop: 'wf_print',
            display: true
          },],
          user: {
            leftColumns: [{
              title: '姓名',
              dataIndex: 'name',
              align: 'center'
            }, {
              title: '部门',
              dataIndex: 'dept',
              align: 'center'
            }],
            rightColumns: [{
              title: '姓名',
              dataIndex: 'name',
              align: 'center'
            },],
            data: [{
              key: '1',
              name: '用户1',
              dept: '部门1'
            }, {
              key: '2',
              name: '用户2',
              dept: '部门2'
            }, {
              key: '3',
              name: '用户3',
              dept: '部门3'
            }, {
              key: '4',
              name: '用户4',
              dept: '部门4'
            }, {
              key: '5',
              name: '用户5',
              dept: '部门5'
            }, {
              key: '6',
              name: '用户6',
              dept: '部门6'
            }, {
              key: '7',
              name: '用户7',
              dept: '部门7'
            }, {
              key: '8',
              name: '用户8',
              dept: '部门8'
            }, {
              key: '9',
              name: '用户9',
              dept: '部门9'
            }, {
              key: '10',
              name: '用户10',
              dept: '部门10'
            }, {
              key: '11',
              name: '用户11',
              dept: '部门11'
            }, {
              key: '12',
              name: '用户12',
              dept: '部门12'
            },],
            filterKey: 'name',
            separator: ','
          },
          group: {
            leftColumns: [{
              title: '角色',
              dataIndex: 'name',
              align: 'center'
            }, {
              title: '别名',
              dataIndex: 'alias',
              align: 'center'
            }],
            rightColumns: [{
              title: '角色',
              dataIndex: 'name',
              align: 'center'
            },],
            data: [{
              key: '1',
              name: '角色1',
              alias: 'admin1'
            }, {
              key: '2',
              name: '角色2',
              alias: 'admin2'
            }, {
              key: '3',
              name: '角色3',
              alias: 'admin3'
            }, ],
            filterKey: 'name',
            separator: ','
          }
        },
        drawerVisible: false
      }
    },
    methods: {
      handleSubmit() {
        // type download lint format
        this.$refs.bpmn.getData('xml', false, false, false).then(data => {
          this.$message.success("查看控制台")
          console.log(data)
        })
      }
    }
  }
  </script>
  
  ```

  

## 组件属性

| 属性    | 说明                 | 类型    | 默认值 |
| ------- | -------------------- | ------- | ------ |
| options | 组件配置（详情见下） | Object  | {}     |
| storage | 是否开启本地缓存     | Boolean | false  |



### options字段配置

| 属性    | 说明                                                         | 类型        | 默认值                                                       | 可选值                          |
| ------- | ------------------------------------------------------------ | ----------- | ------------------------------------------------------------ | ------------------------------- |
| config  | 是否开启右下角配置                                           | Boolean     | false                                                        | true/false                      |
| xml     | 初始xml                                                      | String      | ''                                                           | -                               |
| mode    | 设计器模式                                                   | String      | 'edit'                                                       | 'edit'编辑模式/'view'预览模式   |
| engine  | 设计器xml引擎                                                | String      | 'camunda'                                                    | 'camunda'/'flowable'/'activiti' |
| toolbar | 顶部工具栏                                                   | Array       | ['open', 'create', 'fit', 'zoom-in', 'zoom-out', 'undo', 'redo', 'import', 'preview', 'get', 'download-xml', 'download-svg'] | -                               |
| lint    | 是否开始模型校验                                             | Boolean     | true                                                         | true/false                      |
| form    | 表单设计器json，详见[文档](https://github.com/sscfaith/avue-form-design) | String/Json | -                                                            | -                               |
| button  | 按钮配置，见下                                               | Array       | []                                                           | -                               |
| user    | 人员配置，见下                                               | Array       | []                                                           | -                               |
| group   | 候选组配置，同user                                           | Array       | []                                                           | -                               |
| flows   | 流转节点颜色配置(mode='view')时生效，见下                    | Array       | []                                                           | -                               |

#### button按钮配置

| 属性    | 说明                       | 类型    |
| ------- | -------------------------- | ------- |
| label   | 按钮名称                   | String  |
| prop    | 按钮属性，用于节点按钮显示 | String  |
| display | 是否显示                   | Boolean |

#### user人员配置

人员配置临时使用antd-vue的穿梭框，可参考[antd-vue](https://antdv.com/components/transfer-cn/#表格穿梭框)的配置，后期会优化或使用其他组件，可能会带来不便请谅解。

##### 穿梭框左侧字段 leftColumns

```js
leftColumns: [{ 
  title: '姓名',
  dataIndex: 'name',
  align: 'center'
}, {
  title: '部门',
  dataIndex: 'dept',
  align: 'center'
}],
```

##### 穿梭框右侧字段 rightColumns

```js
rightColumns: [{
  title: '姓名',
  dataIndex: 'name',
  align: 'center'
},],
```

##### 穿梭框数据 data

```js
data: [{
  key: '1',
  name: '用户1',
  dept: '部门1'
}, {
  key: '2',
  name: '用户2',
  dept: '部门2'
}, {
  key: '3',
  name: '用户3',
  dept: '部门3'
},],
```

##### 搜索字段 filterKey

```js
filterKey: 'name'
```

##### 多选id分割字符 separator

```js
separator: ','
```



#### flows节点颜色配置

| 属性  | 说明                    | 类型   | 可选值                                                       |
| ----- | ----------------------- | ------ | ------------------------------------------------------------ |
| id    | 节点id                  | String | -                                                            |
| class | 节点class名（可自定义） | String | 'nodeSuccess'/'nodeWarn'/'nodeError'/'lineSuccess'/'lineWarn'/'lineError' |
| tips  | 节点提示                | String | -                                                            |



### 事件

| 名称 | 说明            | 回调参数      |
| ---- | --------------- | ------------- |
| get  | 获取xml按钮回调 | 当前配置的xml |



### 方法

| 名称    | 说明          | 参数                                                         |
| ------- | ------------- | ------------------------------------------------------------ |
| getData | 获取设计器xml | type: 类型 xml/svg<br>download: 是否下载<br>lint: 是否校验模型<br>format: 是否格式化xml |



### 插槽

| 名称    | 说明       |
| ------- | ---------- |
| toolbar | 顶部操作栏 |


## 项目目录

![输入图片说明](https://images.gitee.com/uploads/images/2021/0521/082653_ead8cfaa_4952300.png "屏幕截图.png").

![输入图片说明](https://images.gitee.com/uploads/images/2021/0521/082719_66026340_4952300.png "屏幕截图.png").