Bpm流程组件

1. 简介

基于 tinper-bee 组件库对 iuap原有UUI流程业务组件进行封装成React应用组件

查看更多应用组件前往 https://github.com/tinper-acs

总共包含8种组件，分别是：

实际使用中不需要使用全部组件，按照自己的业务开发需求选择对应的应用组件即可

2. 安装

• 前端工程内置 tinper-bee 组件库以及平台参照组件 yyuap-ref
• 通过npm下载使用

  $ npm install yyuap-bpm -S
  

3. 使用

如果使用流程图相关组件那么导入:

import { BpmButtonSubmit,BpmButtonRecall,BpmTaskApprovalWrap,BpmFlowChart,BpmTable } from 'yyuap-bpm';

然后在render使用的时候传入相应组件需要的参数即可：

//提交流程按钮使用

<BpmButtonSubmit
    className="ml5"
    checkedArray={[{"id":"02a128d65c47405494f8f2baf087117e"}]}
    funccode="react"
    nodekey="003"
    refCode="newuser"
    url={`/sany_order/submit`}
    urlAssignSubmit={`/sany_order/assignSubmit`}
    filterRefUrl="/wbalone/common/filterRef"
    onSuccess={() => console.log('success')}
    onError={(err) => console.log(err)}
    onStart={() => console.log('start loading')}
    onEnd={() => console.log('end loading')}
>
    <Button size='sm' shape="border">
        <Icon type='uf-arrow-c-o-up' />提交
    </Button>
</BpmButtonSubmit>

//收回流程按钮使用

<BpmButtonRecall
    className="ml5"
    checkedArray={[{"id":"02a128d65c47405494f8f2baf087117e"}]}
    url={`/sany_order/recall`}
    onSuccess={() => console.log('success')}
    onError={(err) => console.log(err)}
    onStart={() => console.log('start loading')}
    onEnd={() => console.log('end loading')}
>
    <Button size='sm' shape="border">
        <Icon type='uf-arrow-c-o-down' />收回
    </Button>
</BpmButtonRecall>

//流程审批面板使用

<BpmTaskApprovalWrap
    id={rowData.id}
    onBpmFlowClick={() => console.log('这里是流程图按钮的事件，用于跳转到流程图组件页面') }
    appType={"1"}
    onSuccess={() => console.log('success')}
    onError={(err) => console.log(err)}
    onStart={() => console.log('start loading')}
    onEnd={() => console.log('end loading')}
/>

//流程图组件

<BpmFlowChart
    processDefinitionId={"eiap350694:3:e2e70948-9559-11e8-b376-02420cbf1b08"}
    processInstanceId={"1352ad87-955e-11e8-b376-02420cbf1b08"}
/>

//流程图历史表格组件

<BpmTable
    processDefinitionId={"eiap350694:3:e2e70948-9559-11e8-b376-02420cbf1b08"}
    processInstanceId={"1352ad87-955e-11e8-b376-02420cbf1b08"}
/>

4. API

BpmFlowChart(流程图)

BpmTable(流程历史表格)

BpmTaskApproval(审批面板)

BpmButtonSubmit(流程提交)

BpmButtonRecall(流程收回)

BpmWrap(流程图+历史表格)

基于BpmFlowChart和BpmTable组合使用的流程查看组件 当传入id(TaskID)、processDefinitionId、processInstanceId的时候不请求getbillid接口 当只传入id(单据ID)的时候，组件会从getbillid处请求所需要的参数

BpmTaskApprovalWrap(审批面板整合)

BpmTestCheckTable(测试用不要使用在项目里)

用来开发的时候测试任务中心表格，禁止用于生产阶段切记！！！

5. 指南

1. 审批面板内的流程图按钮事件如何编写？ 首先使用审批面板组件

   //导入流程审批面板整合组件
   import { BpmTaskApprovalWrap } from 'yyuap-bpm';
   

   导入组件后，使用我们的组件，传入对应的props，这里主要讲解流程图按钮的后续事件如何做onBpmFlowClick

   <BpmTaskApprovalWrap
    id={rowData.id}
    onBpmFlowClick={() => { this.onClickToBPM(rowData) }}//拿到我们的行数据，主要用id
    appType={appType}
    onStart={this.onBpmStart}
    onEnd={this.onBpmEnd}
    onSuccess={this.onBpmSuccess}
    onError={this.onBpmError}
   />
   

   这里面的onBpmFlowClick就是我们需要传入的事件，也就是点击流程图按钮，触发页面跳转带着相应的参数传给我们的流程图页面去使用

编写按钮内的事件

    // 跳转到流程图
    onClickToBPM = (rowData) => {
        actions.routing.push({
            pathname: 'example-chart',//跳转到我们写好的路由流程图那里 /#/templates/example-chart?id=46652dd9900a4f0ca6372eb42a890c83
            search: `?id=${rowData.id}`//构建我们需要的单据ID传入即可，组件内部会请求对应的参数
        })
    }

上面就设置好我们流程图按钮带着单据id跳转到流程图路由页面了，接下来去编写最终的流程图页面，一般来说脚手架工程里面已经写好了

//导入我们需要的流程图整合组件，包含流程图和历史审批面板表格
import { BpmWrap } from 'yyuap-bpm';
//以及我们需要使用的参数解析组件
import queryString from 'query-string';

然后在我们的render里就可以写组件的使用

注意这里，如果用户传入id那么processDefinitionId和processInstanceId就无需设置，它会发送请求查询该参数 如果三个参数都传递了，那么就不会发送请求，直接调用最终后台接口显示流程图和历史数据表格

    render() {
        let { id, processDefinitionId, processInstanceId } = queryString.parse(this.props.location.search);
        return (
            <div>
                <BpmWrap
                    id={id}
                    processDefinitionId={processDefinitionId}
                    processInstanceId={processInstanceId}
                />
            </div>
        );
    }

6. Change Log

Change Log