小编推荐

由于客户组织和业务的特殊性，需要同时使用苍穹和云之家智能审批开展审批业务，且需确保两个平台业务审批流程的一致性。因此，应实现苍穹和云之家两个平台间的对接。

本期实践案例提供了相应的解决方案，教你如何实现苍穹对接云之家智能审批单，满足客户上述诉求~

案例撰稿人：Ximoon。

业务背景

客户X之前一直使用云之家的智能审批开展业务，现在计划将一部分的业务转移到苍穹上，但是云之家的审批单据仍需保留。由于客户X的人员流通和架构变化比较频繁，如果要分割业务到两个平台，需要保证两个平台业务审批流程的一致性。

考虑到客户组织的特殊性，客户只维护其中一个平台，另外一个平台需由我们来长期维护。相当于后期，需要有专门的人力、物力来确保两个平台间的审批流程一致性，除非能够让云之家和苍穹的审批设计保持一致，即让云之家使用苍穹的审批流程，或者苍穹使用云之家的审批流程。

解决方案

方案整体思路

针对上述背景，我们出具了如下两套方案：

方案一：如果业务数据来源是云之家智能审批，那么继续沿用云之家的智能审批流程，客户也继续维护云之家的审批流程。如果业务数据来源是苍穹，那么就通过集成+开放平台，将云之家的智能审批单对接进来，在苍穹端展示云之家的审批单据页面。

方案二：如果业务数据来源是云之家智能审批，提交即完成，通过苍穹的集成+开放平台，将来源数据接入苍穹平台并保存提交，统一使用苍穹的审批流程；如果业务数据来源是苍穹，则正常使用苍穹的审批流程。

由于客户对云之家的维护更熟悉，且平台也有一部分业务是从云之家上剥离出来的，当两者业务相结合的时候，客户可以通过苍穹+手动关联的模式，来完成业务的流转，最终选择了方案一。关键实现步骤如下：

关键步骤

一、获取云之家智能审批单据

首先，需实现的是，苍穹页面的输入式交互，如何通过文本框的输入得到动态的流程实例列表，并提供用户选择。

参考云之家智能审批流程实例获取的接口文档：获取流程列表接口（https://open.yunzhijia.com/opendocs/docs.html#/server-api/business/cloudflow?id=_7获取流程列表接口），将云之家的智能审批流程对接到苍穹中，实现交互界面如下：

上传图片

交互页面

在【流程名称】中输入相应的审批单的标题，通过propertyChanged添加监听，左侧文本框输入，右侧【选择流程】下拉列表通过值更新事件动态更改选择项，提供给用户选择。相关插件代码示例如下：

上传图片

后续在整理方案时，对该交互页面作了进一步优化，效果如下图：

上传图片

优化后的交互界面

轻应用自行建立，用来获取智能审批的授权token（必须使用自建轻应用），给的代码中查询的流程为当前登录用户，查询出的结果展示在下方的列表中，选择任意一行点击展示即可。

二、流程引擎集成

上传图片

流程引擎集成

云之家的智能审批提供了链接集成的方式。API参考如下：

如果需要从其他地方打开审批详情页面，可以使用JS桥打开如下地址：

https://yunzhijia.com/cloudflow-mobile/approval/${formDefId}/${formInstId}/${flowInstId}

其中${formDefId}、${formInstId}、${flowInstId}是3个变量，要使用实际参数进行替换。该地址适用于WEB端和移动端打开。示例：

https://yunzhijia.com/cloudflow-mobile/approval/60e3aed2ac2a4700010baba1/6184c0fe114cbd0001999372/6184c0fe77ef7c0001c262a2

对云之家接口熟悉的人比较清楚，这个链接缺少了最重要的一环：认证。云之家内部认证是通过ticket获取用户认证可信身份，从而完成数据的获取。

上传图片

云之家认证

如果没有ticket认证，那么通过上述链接打开，会面临如下问题：

上传图片

账号下线警告

所以，想要合法地打开指定的审批单据，需要引入JS桥（qing.js），对应脚本如下：

<script src="https://static.yunzhijia.com/public/js/qing/latest/qing.js"></script>

注：qing.js是一个加载器，它会自动判断当前网页运行在什么客户端，然后自动加载适用于当前客户端的、最新的实现代码。它可以让应用更及时地获得qing.js地新特性和漏洞修复。

上传图片

引入JS桥

二、跳转轻应用

qing.js提供了客户端能力，帮助我们来完成可信身份的跳转。

上传图片

跳转到轻应用

也就是说，我们只需要这样使用qing.js，即可实现在前述的苍穹页面中点击审批流跳转到云之家的智能审批页面。

qing.call('gotoLightApp', {
                appId: "10104",
                appName: "智能审批",
                urlParam: "https://yunzhijia.com/cloudflow-mobile/approval/" + formDefId + "/" + formInstId + "/" + flowInstId
            })

三、自定义控件

那么问题来了，如何在苍穹里面调用上述代码，完成页面的显示呢？做过云之家轻应用开发的，第一时间想到的就是通过自定义控件，不需要过多的前端内容，只需要知道要展示的单据的相关参数，后端也仅仅通过setData就可以完成。

自定义控件的源码包我放在最后，领域标识和方案ID都是yzj_approve，但在这个开发过程中，我们的新人小伙伴遇到了一些问题，帮助他一一解决之后，总结了下述注意事项。

1. 自定义控件路径配置

首先，要检查的是自定义控件注册时的领域标识和方案ID是不是和前端源码包保持一致，index.js是不是在根目录中（zip要在index.js的目录下直接压缩所有文件，外层不包含文件夹）。

如果F12的源代码没有加载出来，再去网络下面找资源请求是不是404，如果404了，小伙伴一定要记得再重新检查上述配置。

上传图片

上传图片

自定义控件路径配置

用IDEA启动的，记得去DebugServer配置的WebPath文件夹下查看是否有相应的文件，停止服务后，可以直接替换下面的文件或者采用自定义控件调试来完成功能的替换修改。

调试方法可参考：自定义控件调试教程（https://vip.kingdee.com/link/s/laTQP）

上传图片

文件替换

2. 自定义控件赋值并触发动作事件

对前端代码不熟悉的看过来，生命周期中，init是初始化的时候被调用的，初始化时也会同步调用update，插件用setData对自定义控件赋值时，只会相应update生命周期。

上传图片

自定义控件赋值并触发动作事件

插件中setData的赋值类型要和前端中的props.data的数据类型保持一致，经常使用的包括String、Map等格式。

3. 前端生命周期不生效

如果init或Update生命周期都没有被唤起，那么可以肯定是自定义控件的代码写的有问题，因此还得回到index.js里面排查。对前端代码不熟悉的人，千万不要相信代码注释中参数可有可无的说法，说不定就是少传参数或者多传参数引起的，比如说，小伙伴加上了jQuery的传参后，恢复了正常。

上传图片

jQuery传参

4. 跳转智能审批后，提示下游系统连接不成功、智能协同云参数配置等问题

如果通过qing.js来完成可信身份验证，必须要保证苍穹和云之家两个系统能做到互相可信，那么需要云之家参数，并同步组织和人员，获取到当前用户的openid才可以。没有openid，就会无情地拒绝连接。参数配置界面如下：

上传图片

参数配置

但仅仅通过获取参数的这个按钮来完成基础参数的配置并不能满足，需要在云之家的参数中继续完善如下参数：

上传图片

完善参数配置

其中APPKEY和APPSECRET配置见金蝶云苍穹协同云配置介绍(https://vip.kingdee.com/link/s/laT1u)。

如果配置上述参数还不成功，建议退出该用户的登录状态并重新登录。如果重新登陆后发现首页进去一片空白或者报错也没有办法进入其他菜单，在数据库找到系统库下的T_BAS_SYSPARAMETER表，刷新fsubsystem = 'application/WFS/wf'行的FData列，这个值是JSON格式的字符串，复制出来，并把is_enable_yzj_portal改成false,isyzjspecialversion改为false（先备份数据库），再重新登录即可。

5. 跳转无响应

如果自定义控件获取到数据后跳转并没有相应的数据回调，前端界面也没有任何响应，此时，请不要从开发平台的预览进行测试，从菜单入口Debug调试。

上传图片

错误示例

上传图片

正确示例

6. 自定义控件无法二次响应

如果在插件中对自定义控件赋值未发生改变时，是不会唤起前端的生命周期的。所以我在传参的时候加上了timestamp参数，来规避这个问题。

上传图片

加上timestamp参数

注意事项

如果出现未关闭页签的情况下，打开不同的单据界面数据未重载的问题，举个例子：

两张单据：A、B，如果展示了A的情况下，未关闭顶部协同审批的页签，继续执行展示B单据的请求时，会跳转到协同审批页签，但数据仍为A单据的数据，如果关掉协同审批页签再展示B，则显示正常。

为此咨询了云之家的老师，尚未得到清楚的反馈。曲线救国，于是我就用了延时循环检测的方案，先发送关闭协同审批页签的请求，在确认关闭后，在重新发送请求展示单据。相关代码示例如下：

var updateValue = function(model,props){
        var pageid = null;
        var pageList = spyApi.listPages();
        var keys = Object.keys(spyApi.listPages());
        var key = "";
        for (var i = keys.length - 1; i >= 0; i--) {
            var page = spyApi.listPages()[Object.keys(spyApi.listPages())[i]];
            var length = page.length;
            for (var j = length - 1; j >= 0; j--) {
                if(page[j].fid == "wklw_app_home") {
                    pageid = page[j].pageId;
                    key = keys[i];
                    break;
                }
            }
        }
        if (pageid) {
            model.invoke('closeWindow', pageid);
            var timer = setInterval(function () {
                if (spyApi.listPages()[key]) {
                } else {
                    clearInterval(timer);
                    var jumpURL = props.data;
                    if (jumpURL) {
                        qing.call('gotoLightApp', {
                            appId: "10104",
                            appName: "智能审批",
                            urlParam: jumpURL
                        })
                    }
                }
            }, 200);
        } else {
            var jumpURL = props.data;
            if (jumpURL) {
                qing.call('gotoLightApp', {
                    appId: "10104",
                    appName: "智能审批",
                    urlParam: jumpURL
                })
            }
            
        }
    }

方案的复用价值

该方案既可以解决多平台审批流程在不统一情况下需要手动维护的需求，也解决了客户不重复购买云之家和苍穹审批流的基础上，实现多平台审批流程一致性的需求。

#往期推荐#

# 实践案例 | 优秀的轮子--苍穹，你值得拥有（续篇）

# 实践案例 | 优秀的轮子--苍穹，你值得拥有

# 实践案例 | 苍穹数据库扩容及分应用部署方案，保你系统稳定！

# 实践案例｜GetFieldValue函数在凭证模板中的应用

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

实践案例 | 如何实现苍穹对接云之家智能审批单

实践案例 | 如何实现苍穹对接云之家智能审批单

恭喜您！