0.6.6 系列 多语版本 主数据专用

Bpm流程组件

1. 简介

基于 tinper-bee 组件库对iUap原有UUI流程业务组件进行封装成React应用组件 查看更多应用组件前往 https://github.com/tinper-acs

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

序号 | 组件名称 | 备注 ---|---|--- 1|BpmFlowChart|流程图 2|BpmTable|流程历史表格 3|BpmTaskApproval|流程审批面板 4|BpmButtonSubmit|流程提交按钮 5|BpmButtonRecall|流程收回按钮 6|BpmWrap|包含流程图和流程历史表格 7|BpmTaskApprovalWrap|流程整合审批面板 8|BpmTestCheckTable|测试任务中心表格组件

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

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(流程图)

序号 | 参数 | 类型 | 说明 ---|---|---|--- 1|url|string|请求流程图的接口默认走平台eiap-plus服务 2|processDefinitionId|string|流程图服务必备参数 3|processInstanceId|string|流程图服务必备参数 4|width|string|流程图宽度 5|height|string|流程图高度

BpmTable(流程历史表格)

序号 | 参数 | 类型 | 说明 ---|---|---|--- 1|processDefinitionId|string|流程图服务必备参数 2|processInstanceId|string|流程图服务必备参数

BpmTaskApproval(审批面板)

序号 | 参数 | 类型 | 说明 ---|---|---|--- 1|id|string|审批的任务ID 2|refCode|string|参照组件需要的refCode 3|appType|string|审批面板类型1=待审批、2=弃审 4|onStart|function|调用异步服务回调，一般用于请求Loading处理 5|onSuccess|function|调用后端服务成功后的回调 6|onError|function|调用后端服务错误后的回调 7|onEnd|function|结束的回调Loading

BpmButtonSubmit(流程提交)

序号 | 参数 | 类型 | 说明 ---|---|---|--- 1|checkedArray|array|传入的选中状态数组(流程单据前面的选择框数据) 2|funccode|string|功能节点编码 3|nodekey|string|nodekey 4|refCode|string|参照组件需要的refCode 5|url|string|提交流程所需要的地址，必须传入 6|urlAssignSubmit|string|流程指派最后提交的接口 7|filterRefUrl|string|参照组件需要的URL 8|onSuccess|function|提交流程业务成功后回调 9|onError|function|提交流程业务失败后回调{type:1,msg:"错误消息"}type=1代表逻辑错误，type=2代表服务器错误 10|className|string|传入class 11|onStart|function|调用异步服务回调，一般用于请求Loading处理 12|onEnd|function|结束的回调Loading 13|size|string|指派弹出modal的尺寸sm,lg,xlg 14|scrollY|number|指派演出modal内的表格滚动高度 15|isOne|bool|是否为一条单据提交默认是多条提交

BpmButtonRecall(流程收回)

序号 | 参数 | 类型 | 说明 ---|---|---|--- 1|checkedArray|array|传入的选中状态数组(流程单据前面的选择框数据) 2|url|string|提交流程所需要的地址，必须传入 3|onSuccess|function|提交流程业务成功后回调 4|onError|function|提交流程业务失败后回调{type:1,msg:"错误消息"}type=1代表逻辑错误，type=2代表服务器错误 5|className|string|传入class 6|onStart|function|调用异步服务回调，一般用于请求Loading处理 7|onEnd|function|结束的回调Loading

BpmWrap(流程图+历史表格)

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

序号 | 参数 | 类型 | 说明 ---|---|---|--- 1|id|string|传入的ID(注：只传ID的话，就是单据ID组件会去请求getbillid接口拿到流程需要的参数，如果传递3个参数的话ID就是TaskID,processDefinitionId,processInstanceId) 2|processDefinitionId|string|processDefinitionId 3|processInstanceId|string|processInstanceId

BpmTaskApprovalWrap(审批面板整合)

序号 | 参数 | 类型 | 说明 ---|---|---|--- 1|id|string|传入的ID(注：只传ID的话，就是单据ID组件会去请求getbillid接口拿到流程需要的参数，如果传递3个参数的话ID就是TaskID,processDefinitionId,processInstanceId) 2|refCode|string|参照组件需要的refCode 3|processDefinitionId|string|processDefinitionId 4|processInstanceId|string|processInstanceId 5|onBpmFlowClick|function|流程图按钮单击事件，一般用来给流程图页面跳转路由和参数使用 6|appType|string|审批面板类型1=待审批、2=弃审、3=无显示 7|onStart|function|调用异步服务回调，一般用于请求Loading处理 8|onSuccess|function|调用后端服务成功后的回调 9|onError|function|调用后端服务错误后的回调 10|onEnd|function|结束的回调Loading

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