小编推荐

大型企业通常都会使用多套系统，为了提升效率，希望有一个统一的门户作为员工日常工作的入口。

该客户的统一移动端门户包括待办、已办、通知及我的应用。其中待办，已办需要集成其他异构系统的单据审批信息，但是该异构系统的单据审批没有移动审批流和移动审批记录。该如何解决呢？

本期实践案例教你如何用苍穹平台工作流展示异构系统单据的单据信息、审批流和审批记录，并支持审批后将结果推送至异构系统。

案例撰稿人：标哥。

1 业务背景

客户A为国产航空行业，企业内部使用了多套系统，其中包括了国外某ERP系统。该企业对国产化替代很重视，因此采用了苍穹平台作为企业的数字化平台，进行新业务的开发并逐步替代旧系统。

同时，客户希望有一个统一的移动端门户作为员工日常工作的入口，移动端门户包括待办、已办、通知及我的应用。其中待办，已办需要集成其他异构系统的单据审批信息，但是该异构系统的单据审批没有移动审批流和移动审批记录，客户希望能够用苍穹平台工作流展示该异构系统单据的单据信息、审批流和审批记录，并支持审批后将结果推送至异构系统。

2 解决方案

2.1 方案整体思路

基于客户移动审批需求，借助苍穹平台工作流的能力，将客户其他系统的审批工作流数据在苍穹工作流PC端和移动端进行集成。经过项目实践，实现了通过苍穹工作流，以图形化方式绘制展示第三方流程审批记录功能。

审批记录： 借助苍穹工作流的控件，审批记录，自定义绘制审批各个节点数据进程。

审批流程图： 借助苍穹工作流的控件，工作流设计器，进行自定义动态绘制流程图。（数据来源，可以从第三方接口获取）

2.2 方案实现关键步骤

一、移动端审批记录代码开发流程

步骤1：新建移动表单，将审批记录控件拖拽到元数据合适位置。

在【开发平台】移动表单设计器中，设计移动表单页面，并注册移动表单插件，如下图所示：

图1-设计移动表单界面以及注册页面插件

图2-设计审批记录控件

步骤2：构造进入审批记录界面前的动作。

MobileFormShowParameter formShowParameter = new MobileFormShowParameter();
            formShowParameter.setFormId(HRBaseConstants.HRSCAS_APPROVERECORD);
            Map<String, String> map = new HashMap<>(5);
            // 单据编号
            map.put("billno", this.getModel().getDataEntity().getString("billno"));
            // 职位
            map.put("position", this.getModel().getDataEntity().getString("position"));
            // 单据状态
            map.put("billstatus", this.getModel().getDataEntity().getString("billstatus"));
            //申报人
            map.put("applyer", this.getModel().getDataEntity().getString("applyer"));
            // 申报单位
            map.put("applyunit", this.getModel().getDataEntity().getString("applyunit"));
            formShowParameter.setCustomParam("approverecord", map);
            formShowParameter.setStatus(OperationStatus.ADDNEW);
            formShowParameter.getOpenStyle().setShowType(ShowType.Floating);
            this.getView().showForm(formShowParameter);

步骤3：编写进入审批记录的插件代码。

public class WorkFlowApproveRecordMobilePlugin extends AbstractMobBillPlugIn {
    public void afterCreateNewData(EventObject args) {
        super.afterCreateNewData(args);
        FormShowParameter formShowParameter = this.getView().getFormShowParameter();
        Map<String, String> approverecord = formShowParameter.getCustomParam("approverecord");
        if (!approverecord.isEmpty()) {
            String applyer = approverecord.get("applyer");
            String position = approverecord.get("position");
            String imageUrl = getUserImageFullPath(RequestContext.get().getCurrUserId());
            imageUrl = StringUtils.isNoneBlank(imageUrl) ? imageUrl : null;
            SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd");
            String format = simpleDateFormat.format(new Date());
            // 处理节点类型 approve通过，submit提交，wait等待处理，reject驳回等
            ApprovalRecord apr = this.getControl("approvalrecordap");
            List<IApprovalRecordGroup> arData = new ArrayList<>();
            arData.add(WorkFlowMobileWorkFlowUtil.getRecordGroup("结束", "approve", format, "结束", "", "", null, true));
            arData.add(WorkFlowMobileWorkFlowUtil.getRecordGroup("同意", "approve", format, "刘军|总监", "同意 | 该员工符合用人要求！  ", "二级审批", "头像地址1", true));
            arData.add(WorkFlowMobileWorkFlowUtil.getRecordGroup("同意", "approve", format, "王菲菲|经理", "同意 | 该员工属于部门优秀员工", "一级审批", "头像地址2", false));
            arData.add(WorkFlowMobileWorkFlowUtil.getRecordGroup("提交", "submit", format, applyer + "|" + position, "同意", "单据提交", imageUrl, true));
 
            Map<String, Object> param = new HashMap<String, Object>();
            // 审批记录会按列表顺序倒排，并且加上白色背景
            param.put(ApprovalRecord.ISPC, "false");
            // 隐藏发起群沟通
            param.put(ApprovalRecord.HIDEMORECHAT, "true");
            param.put(ApprovalRecord.HIDECHAT, "true");
            param.put(ApprovalRecord.APPROVALISNEW, true);
            // 要先设置参数再传审批记录数据，如果顺序反了会失效
            apr.setParameters(param);
            apr.setArData(arData);
        }
    }

步骤4：自定义审批节点工具类。

/**
     * 自定义审批记录组合
     * @param result       处理结果  统一 驳回 被驳回等
     * @param type         处理节点类型 approve通过，submit提交，wait等待处理，reject驳回等
     * @param time         处理时间 “XXXX-xx-xx-xx xx:xx:xx"
     * @param assignee     处理人 名字|岗位
     * @param message      审批意见
     * @param activityName 节点简介  xxx单据提交、一级审批、二级审批
     * @param avatar       处理人头像url
     * @param isSubmitNode 判断是否用户提交节点，被驳回时需要
     * @return
     */
public static IApprovalRecordGroup getRecordGroup(String result, String type, String time, String assignee, String message, String activityName, String avatar, Boolean isSubmitNode) {
        List<IApprovalRecordItem> itemList = new ArrayList<>();
        ApprovalRecordItem item = new ApprovalRecordItem();
        // 处理结果 同意，驳回，等
        item.setResult(result);
        // 处理时间
        item.setTime(time);
        // 人员|岗位
        item.setAssignee(assignee);
        // 审批意见
        item.setMessage(message);
        item.setFormatStrTime(time);
        item.setDecisionType(type);
        item.setGroupDecisionType(type);
        // 节点简介  XX单据提交，一级审批、二级审批等
        item.setActivityName(activityName);
        if (isSubmitNode) {
            item.setHandleState("dismissed");
            item.setArtificialNode(true);
        }
        // 处理人头像
        item.setAvatar(avatar);
        itemList.add(item);
        ApprovalRecordGroup approvalGroup = new ApprovalRecordGroup();
        approvalGroup.setGroupDecisionType(type);
        approvalGroup.setChildren(itemList);
        approvalGroup.setShowAutoCoordinate(false);
        return approvalGroup;
    }

二、移动端审批流程图代码开发流程

整体流程：新建移动表单元数据，绑定好工作流插件。

步骤1：新建移动表单元数据，配置好插件。

图3-设计移动工作流程图元数据

图4-设计工作流设计器控件

步骤2：构造进入工作流程图前动作。

（1）绘制工作流程图代码。苍穹的工作流程图实际上是拼接xml格式，然后进行渲染，拼接工作流程图核心代码：

/**
     * 自定义流程图demo
     *
     * @return 审批记录信息
     */
    private String getApproveRecordXml() {
        StringBuilder xmlBuilder = new StringBuilder();
        String userTageId = "user1";
        String auditTaskId1 = "auditTaskId1";
        String auditTaskId2 = "auditTaskId2";
        String lineId1 = "lineId1";
        String lineId2 = "lineId2";
        String lineId3 = "lineId3";
        String lineId4 = "lineId4";
        String lineId5 = "lineId5";
        String applyer = this.getModel().getDataEntity().getString("applyer");
        SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy.MM.dd");
        String date = simpleDateFormat.format(new Date());
        xmlBuilder.append(WorkFlowMobileWorkFlowUtil.getStartTagXml());
        xmlBuilder.append(WorkFlowMobileWorkFlowUtil.getEndTagXml("355", "580"));
        xmlBuilder.append(WorkFlowMobileWorkFlowUtil.getUserNodeXml(userTageId, applyer + "  " + date, "338", "220", WorkFlowMobileWorkFlowUtil.auditTaskStatus_passed));
        xmlBuilder.append(WorkFlowMobileWorkFlowUtil.getAuditTaskXml(auditTaskId1, WorkFlowMobileWorkFlowUtil.auditTaskStatus_passed, "王菲菲|经理  驳回 | 该员工需要继续考察能力" + date, "338",
                "340"));
        xmlBuilder.append(WorkFlowMobileWorkFlowUtil.getAuditTaskXml(auditTaskId2, WorkFlowMobileWorkFlowUtil.auditTaskStatus_wait, "刘军|总监  ", "338",
                "460"));
        xmlBuilder.append(WorkFlowMobileWorkFlowUtil.getLineXml(lineId1, WorkFlowMobileWorkFlowUtil.lineStatus_passed, WorkFlowMobileWorkFlowUtil.startTagId, userTageId, ""));
        xmlBuilder.append(WorkFlowMobileWorkFlowUtil.getLineXml(lineId2, WorkFlowMobileWorkFlowUtil.lineStatus_wait, userTageId, auditTaskId1, ""));
        xmlBuilder.append(WorkFlowMobileWorkFlowUtil.getLineXml(lineId3, WorkFlowMobileWorkFlowUtil.lineStatus_wait, auditTaskId1, auditTaskId2, ""));
        xmlBuilder.append(WorkFlowMobileWorkFlowUtil.getLineXml(lineId5, WorkFlowMobileWorkFlowUtil.lineStatus_jump, auditTaskId1, userTageId, "驳回"));
        xmlBuilder.append(WorkFlowMobileWorkFlowUtil.getLineXml(lineId4, WorkFlowMobileWorkFlowUtil.auditTaskStatus_wait, auditTaskId2, WorkFlowMobileWorkFlowUtil.endTagId, ""));
        return WorkFlowMobileWorkFlowUtil.getFinalXml(xmlBuilder.toString());
    }

工作流程图代码拼接成如下样式即可：

图5-工作流程图拼接xml文件样式

（2）构造审批流程图跳转动作。

/**
     * 弹出自定义流程图
     *
     * @param view
     * @param xml
     * @return
     */
    public static void showSelfDefineWorkFlow(IFormView view, String xml) {
        MobileFormShowParameter fsp = new MobileFormShowParameter();
        fsp.setFormId("hrscas_wfchart");
        fsp.setCustomParam("workflowxml", xml);
        // 这个参数必须传一个值，不然无法显示流程图
        fsp.setClientParam(ViewFlowchartConstant.PROCINSTID, 21321312311L);
        fsp.getOpenStyle().setShowType(ShowType.Floating);
        view.showForm(fsp);
    }

步骤3：构造进入工作流程图中动作。

public class ShowWorkFlowViewMobileForm extends AbstractBillPlugIn implements IWorkflowDesigner {
    private static final String GRAPH_XML = "graph_xml";
    @Override
    public Map<String, Object> getDesignerInitData(Map<String, Object> map) {
        // 获取从其他界面调整过来的菜单数据
        FormShowParameter fsp = this.getView().getFormShowParameter();
        String xml = fsp.getCustomParam("workflowxml");
        Map<String, Object> data = new HashMap<>();
        data.put(GRAPH_XML, xml);
        return data;
    }
}

三、核心代码逻辑

基于上述的移动端审批记录和审批流程图构造，核心代码逻辑如下：

1. 移动端审批记录绘制代码逻辑：

类名： WorkFlowApproveRecordMobilePlugin

继承类：AbstractMobBillPlugIn

方法：afterCreateNewData

获取表单的审批记录

FormShowParameter formShowParameter = this.getView().getFormShowParameter();Map<String, String> approverecord = formShowParameter.getCustomParam("approverecord");

获取审批记录控件对象

 ApprovalRecord apr = this.getControl("approvalrecordap"); ApprovalRecord：

审批记录的各个属性控制，例如：隐藏聊天框，是否使用新的审批流控件等等

类路径：kd.bos.workflow.component.ApprovalRecord

绘制记录审批流程：IApprovalRecordGroup

类路径：kd.bos.workflow.component.approvalrecord.IApprovalRecordGroup

设计器布局：

2. 移动端工作流程图代码逻辑

类名：ShowWorkFlowViewMobileForm

继承类：AbstractBillPlugIn

接口：IWorkflowDesigner

方法：getDesignerInitData

获取xml脚本进行渲染。工作流程图绘制原理：使用市场流向的框架：mxGraph。 mxGraph 是一个 JS 绘图组件，适用于需要在网页中设计/编辑 Workflow/BPM 流程图、图表、网络图和普通图形的 Web 应用程序。

设计器布局：

四、样式效果

第一种样式：

第二种样式：

3 方案的可推广价值

1、丰富苍穹平台对接第三方系统审批流程集成方案，解决各种定制化复杂业务需求场景，如客户对第三方系统审批流程集成到苍穹平台。扩展苍穹平台的能力支持，目前已经在部分大项目上进行推广使用。

2、目前苍穹平台缺乏自定义绘制工作审批流程图的相关技术，该方案可快速提升开发者对自定义审批流程图的开发能力，解决客户的工作审批流程图绘制展示需求，帮助开发者对这类业务进行快速定制化开发。

4 注意事项

工作流程图绘制，尽量不要在复杂的业务审批流开发。
审批记录控件目前有新版本和旧版本之分，新版本的头像可以点击进行跳转。
审批流程图的控件“工作流设计器”目前没有对外开放，如果业务上需要，可以复制移动端工作流设计器控件，例如元数据：“ide_workflowdesigner”

#往期推荐#

# 实践案例 | 超详细苍穹环境迁移方案，你值得拥有！

# 实践案例 | 工作效率翻倍的秘籍：快捷键功能全面解析

# 实践案例 | 如何使用多维数据库数据制做经营分析报表

# 实践案例 | 多异构系统间高效系统集成方案

更多精彩内容，“码”上了解！↓

实践案例 | 移动端图形化展示第三方流程审批记录

实践案例 | 移动端图形化展示第三方流程审批记录

恭喜您！