jcbpm-vue/README.md

jcbpm-vue

# JCBPM-VUE组件
## 概述
当前组件
1. [封装了一组操作命令，响应用户点击行为，触发相应的业务逻辑](./src/TaskOperation/%E5%BF%AB%E9%80%9F%E5%85%A5%E9%97%A8.md)

   提供了十二种api：
    - 发起
    - 办理
    - 终止  
    - 加签
    - 减签
    - 指派处理人
    - 委派
    - 跳转
    - 拿回
    - 退回上一节点
    - 退回历史节点
    - 转办



  # 流程图高亮节点  -  快速入门

  ## 使用方式  
* 通过npm install jcbpm-vue完成下载后  

```ts
  import 'jcbpm-vue/dist/style.css'
  import { ProcessHightlight } from 'jcbpm-vue'  
```
``` tsx
/*
    * @params 非必传 processHightlightVisible 流程设计弹窗是否显示，默认展示
    * @params 非必传 isRefreshProcess 流程设计高亮图是否刷新 boolean
    * @params 非必传 showTitle 是否显示 流程设计高亮图 标题
    * @params 非必传 customTitle 是否显示 自定义标题
    * @params 非必传 processStyle 流程图自定义宽高样式
          {
            width: string // px、em、%
	          height: string // px、em、%
          }
    * @params 必传 hightlightParams 流程实例Id
          {
            [propname: string]: string|number
	          instanceId: string // 流程实例Id
          }
    * @params 必传 processHightlightConfig 配置项
          { 
            AuthenticationToken：登录token函数，
            BpmRequestPrefix：服务接口地址，
            ApplicationId?: 应用Id 非必填
            AuthorizationAppType?: token类型 非必填
          }
*/

```


``` vue  
<ProcessHightlight 
  :process-hightlight-visible="boolean"
  :hightlight-params="hightlightParams" 
  :process-hightlight-config="processHightlightConfig"
/>
```



  # 流程设计面板组件  -  快速入门

  ## 使用方式  
* 通过npm install jcbpm-vue完成下载后  

```ts
  import 'jcbpm-vue/dist/style.css'
  import { ProcessDesign } from 'jcbpm-vue'  
```
    
``` tsx 
      /*
      * @params 必传 processDesignVisible 流程设计弹窗是否显示
      * @params 必传 processDesignId 流程Id
      * @params 必传 processDesignKey 流程标识
      * @params 非必传 customTabOptions 设置经办者
      * @params 非必传 customFormTabOptions 设置表单配置
      * @params 必传 processDesignConfig 配置项
            { 
              AuthenticationToken：登录token，
              ManageRequestPrefix：管理接口地址，
              ApplicationId?: 应用Id 非必填
              AuthorizationAppType?: token类型 非必填
            }
      * @methods confirmModalClose 关闭事件，返回true
      */

    //  设置经办者 - customTabOptions为数组对象，其中字段：  
    | 属性 | 说明 | 类型 | 是否必填| 默认值 |
    | -------- | -------- | -------- | -------- | -------- |
    | title | 自定义tab名称 | string | 是 | - |
    | type | 自定义tab类型，关键字 | string | 是 | user：用户，dept：部门，role：角色，relations：关系，posts：岗位，或者其他自定义string类型的值 |
    | left | 在页面左侧显示数据 | object | 否 | - |
    | right | 在页面右侧显示数据 | object | 否 | - |  
    
    //  left与right皆为对象，字段相同：
    | 属性 | 说明 | 类型 | 是否必填| 默认值 |
    | -------- | -------- | -------- | -------- | -------- |
    | viewType | 渲染类型 | string | 是 | page：分页列表，tree：树形结构 |
    | params | 当viewType设置为page，此参数是列表的搜索条件 | object | 否 | - |
    | pagination | 当viewType设置为page，此参数设置是否显示分页 | boolean | 否 | - |
    | columns | 当viewType设置为page，此参数可自定义列表columns | array(参数同ant-design@2.2.8) | 否 | - |  
    | selectMode | 当viewType设置为page，此参数可设置列表项多选还是单选 | string | 否 | checkbox：多选框，radio：单选框 |  
    | checkable | 当viewType设置为tree，此参数可设置树形数据是否可多选 | boolean | 否 | - |  
    | data | 数据 | asyncfunction | 是 | - |  
    
    //  (left|right).params字段：
    | 属性 | 说明 | 类型 | 是否必填| 默认值 |
    | -------- | -------- | -------- | -------- | -------- |
    | value | 参数字段key | string | 是 | - |
    | label | 参数字段名称 | string | 是 | - |
    | isTreeParam | 当viewType设置为page，此参数为true时，树选中数据给value赋值，入参 | boolean | 否 | - |  
    
    //  示例：
    const customTabOptions = ref([
      // page分页类型
      {
          title: '你的关系',
          type: 'relations',
          right: {
              params:[
                  {
                      value: 'name',
                      label: '名称',
                  },
              ],
              viewType: 'page',
              pagination: true,
              selectMode: 'radio',
              // columns内参数结构完全遵照ant-design@^2.2.8版本
              columns: [
                  {
                      title: getI18n('system', 'SYSTEM_Process_RelationsName'),
                      dataIndex: 'name',
                      align: 'center',
                  },
              ],
              data: async() => {
                  let param: GetJobPositionsListParamsModel = {
                      per_page: 10000,
                      current_page: 1,
                  }
                  const res: any = await getJobPositionsListApi(param)
                  
                  // page类型 数据结构id、name为默认必传属性，其他参数如果想显示，请在columns中设置
                  let _data = res.data.data.map( v => {
                        return {
                            id: v.id,
                            name: v.name,
                        }
                    })
  
                  const _resData = {
                      data: _data, // 数据
                      current: res.data.meta.pagination.currentPage, // 分页参数
                      size: res.data.meta.pagination.perPage, // 分页参数
                      total: res.data.meta.pagination.total, // 分页参数
                  }
                  return _resData
              },
          },
      },
      // tree树形数据
      {
        title: '你的用户',
        type: 'user',
        left: {
            viewType: 'tree',
            checkable: false,
            data: async(data: any) => {
                let param: GetDepartmentsListParamsModel = {
                    per_page: -1,
                }
                if( !validatenull(data) ){
                    param = Object.assign({}, data)
                }
                const res: RequestResult = await getDepartmentsListApi(param)
                /**
                 * 
                * 业务逻辑...
                * 
                */
  
                // tree类型 数据结构title、key为默认必传属性
                return {
                    data: JSON.parse(
                            JSON.stringify(res.data.data)
                                .replace(/name/g, 'title')
                                .replace(/id/g, 'key')
                        ) // 数据
                }
            }
        },
        right: {
            params:[
                {
                    value: 'name',
                    label: '名称',
                    isTreeParam: false,
                },
                {
                    value: 'department_id',
                    label: '部门Id',
                    isTreeParam: true, // 树形数据选中时，点击page列表查询按钮，为此department_id参数赋值
                },
            ],
            viewType: 'page',
            pagination: true,
            columns: [
                // 序号
                {
                    title: getI18n('common', 'Common_Columns_Index'),
                    dataIndex: 'index',
                    align: 'center',
                    slots: { customRender: 'index' },
                    width: 80,
                },
                // 用户姓名
                {
                    title: getI18n('system', 'SYSTEM_User_UsersName'), 
                    dataIndex: 'name',
                    align: 'center',
                },
                // 部门名称
                {
                    title: getI18n('system', 'SYSTEM_User_DepartmentName'), 
                    dataIndex: 'departments',
                    align: 'center',
                },
            ],
            data: async(data: any) => {
                let param: GetUsersListByApplicationIdParamsModel = {
                    per_page: 10,
                    page: 1,
                }
                if( !validatenull(data) ){
                    param = Object.assign({}, data)
                }
                const res: any = await getUsersListByApplicationIdApi(param)
  
                const _resData = {
                    data: res.data.data, // 数据
                    current: res.data.meta.pagination.currentPage, // 分页参数
                    size: res.data.meta.pagination.perPage, // 分页参数
                    total: res.data.meta.pagination.total, // 分页参数
                }
                return _resData
            },
        },
      },
    ])


    // 表单设置 - customFormTabOptions为数组对象，其中字段：  
    | 属性 | 说明 | 类型 | 是否必填| 默认值 |
    | -------- | -------- | -------- | -------- | -------- |
    | title | 自定义tab名称 | string | 是 | - |
    | type | 自定义tab类型，关键字 | string | 是 | 自定义string类型的值 |
    | params | 当viewType设置为page，此参数是列表的搜索条件 | object | 否 | - |
    | pagination | 当viewType设置为page，此参数设置是否显示分页 | boolean | 否 | - |
    | columns | 当viewType设置为page，此参数可自定义列表columns | array(参数同ant-design@2.2.8) | 否 | - |  
    | data | 数据 | asyncfunction | 是 | - |  
    | draggable | 是否拖拽 | boolean | 否 | false |  
    | formWebsiteUrl | 是否需要再表单tab页中添加第三方表单地址 | string | 否 | - |  
    
    // 示例：
    const customFormTabOptions = ref([
        {
            // 
            title: '自定义表单',
            // 
            type: 'jcform',
            draggable: true,
            // 列表数据
            data: async (data: any) => {
                let param: GetJCFormsListApiModel = {
                    size: 10,
                    current: 1,
                }
                if( !validatenull(data) ){
                    param = Object.assign({}, data)
                }
                const res = await getJCFormsListApi(param)
                return res
            },
            // 列表搜索参数
            params:  [{
                value: 'name',
                label: '表单名称',
            }],
            // 分页
            pagination: true,
            // 列表
            columns: [
                // 序号
                {
                    title: getI18n('common', 'Common_Columns_Index'),
                    dataIndex: 'index',
                    slots: { customRender: 'index' },
                    align: 'center',
                    width: '8%',
                },
                ...
                // 标签  =>  若需要配置可输入的input框，暂只支持tag关键字
                {
                  title: getI18n('system', 'SYSTEM_Form_Tag'),
                  dataIndex: 'tag',
                  slots: { customRender: 'tag' },
                  align: 'center',
                  width: '20%',
                }
            ],
            // 第三方表单地址， 新窗口打开
            formWebsiteUrl: 'https://www.npmjs.com/settings/jc-cc-developer/packages',
        },
    ])

```

``` vue  
      <ProcessDesign 
          :process-design-visible="boolean"
          :process-design-id="流程Id" 
          :process-design-key="流程标识"
          :process-design-config="processDesignConfig"
          :customTabOptions="customTabOptions"
          :customFormTabOptions="customFormTabOptions"
          @confirm-modal-close="关闭事件"
      />
    
```  



  # 流程图查看组  -  快速入门

  ## 使用方式  
* 通过npm install jcbpm-vue完成下载后  

```ts
  import 'jcbpm-vue/dist/style.css'
  import { ProcessViewer } from 'jcbpm-vue' 

```

 ``` tsx  
    /*
      * @params 非必传 processViewerVisible 流程图查看弹窗是否显示，默认展示
      * @params 非必传 isShowNodeInfo 流程图查看 点击节点时，是否展示节点配置信息， 默认不展示
      * @params 非必传 processStyle 流程图自定义宽高样式
            {
              width: string // px、em、%
              height: string // px、em、%
            }
      * @params 必传 flowId 流程标识
      * @params 必传 processViewerConfig 配置项
            { 
              AuthenticationToken：登录token函数，
              BpmRequestPrefix：管理接口地址，
              ApplicationId?: 应用Id 非必填
              AuthorizationAppType?: token类型 非必填
              isShowNodeInfo?: 是否展示节点配置信息 非必填
            }
      */
```  
``` vue  
     <ProcessViewer  
        :process-Viewer-visible="boolean"
        :flow-id="flowId" 
        :process-viewer-config="processViewerConfig"
      />
```  



  # 流程流转操作记录查看组件  -  快速入门

  ## 使用方式  
* 通过npm install jcbpm-vue完成下载后  

```ts
  import 'jcbpm-vue/dist/style.css'
  import { ProcessWanderRecords } from 'jcbpm-vue' 

```

``` tsx  
    /*
      * @params 非必传 processWanderRecordsVisible 流程流转记录弹窗是否显示，默认展示
      * @params 非必传 isRefreshList 流程流转记录是否刷新 boolean
      * @params 非必传 showTitle 是否显示 流程设计高亮图 标题
      * @params 非必传 customTitle 是否显示 自定义标题
      * @params 必传 businessKey 业务Id
      * @params 必传 processWanderRecordsConfig 配置项
            { 
              AuthenticationToken：登录token函数，
              BpmRequestPrefix：服务接口地址，
              ApplicationId?: 应用Id 非必填
              AuthorizationAppType?: token类型 非必填
            }
      */
``` 

``` vue  
      <ProcessWanderRecords  
        :process-wander-records-visible="boolean"
        :business-key="businessKey" 
        :process-viewer-config="processWanderRecordsConfig"
      /> 
``` 



  # 流程流转操作时间线查看组件  -  快速入门

  ## 使用方式  
* 通过npm install jcbpm-vue完成下载后  

```ts
  import 'jcbpm-vue/dist/style.css'
  import { ProcessWanderTimeline } from 'jcbpm-vue' 

```

``` tsx  
    /*
    * @params 非必传 processWanderTimelineVisible 流程流转记录弹窗是否显示，默认展示
    * @params 非必传 isRefreshList 流程流转记录是否刷新 boolean
    * @params 非必传 showTitle 是否显示 流程设计高亮图 标题
    * @params 非必传 customTitle 是否显示 自定义标题
    * @params 必传 timelineParams 流程Id
          {
            [propname: string]: string|number
              businessKey: string // 流程Id
          }
    * @params 必传 processWanderTimelineConfig 配置项
          { 
            AuthenticationToken：登录token函数，
            BpmRequestPrefix：服务接口地址，
            ApplicationId?: 应用Id 非必填
            AuthorizationAppType?: token类型 非必填
          }
    */
```  

``` vue  
    <ProcessWanderTimeline   
      :process-wander-timeline-visible="boolean"
      :timeline-params="timelineParams" 
      :process-viewer-config="processWanderTimelineConfig"
    />
```