关于使用报表脚本代码实现道一云表单API接口推送数据的实现方案

徐晓峰

关于使用报表脚本代码实现道一云表单API接口推送数据的实现方案

一、技术逻辑及应用场景说明

  技术逻辑说明：报表系统有着高度自定义查询、填报、统计数据的设计能力，表单有着覆盖全员能力的灵活审批能力，如果打通报表和表单的数据接口应用问题，就可以实现使用报表获取ERP等第三方封闭系统的数据，再套用表单的审批流能力，来实现实时获取信息系统的数据，并用于推送和审批。

  应用场景说明：

           ①仓库领料单：通过移动端报表实时获取ERP系统的物料数据，并将相关数据规范填写后，推送到表单的审批流，实现领料的物料数据复用和领料流程的管控。

   ②延伸应用场景（本方案未直接实现延伸应用，仅做场景思路拓展）：仓库领料后，可以使用类似思路，实现表单提交后，使用回调地址，触发ERP的出库API接口，完成ERP系统出库数据自动填写。（使用报表嵌套表单审批能力，或者报表触发WebAPI接口能力，可以延伸信息系统直接的联动能力，在一定程度上，解决多系统之间的信息孤岛问题。）

二、报表触发表单API接口推送数据实现过程

  1、在报表前端通过JavaScript脚本，推送WebApi接口所需参数数据，过程是模仿Postman接口推送能力，主要实现思路和代码如下

  ① 报表前端的设计页面截图

         
  ② 触发事件按钮的完整JavaScript代码

1. fetch('http://192.168.1.9:3000/api/proxy', {
   
2.   method: 'POST',
   
3.   headers: {
   
4.     'Content-Type': 'application/json'
   
5.   },
   
6.   body: JSON.stringify({
   
7.     url: 'https://qwif.do1.com.cn/qwcgi/api/apiForm/pushFormData.do', // 实际的目标API的URL
   
8.     method: 'GET', // 使用GET方法，因为这是查询参数
   
9.     qs: {
   
10.       token: 'YjhjOTBiZDktNTYwZC00NjhjLTk3ZjYtNmMyOGE1Zjc0MDll',
    
11.       corpId: 'wx3f99f213ef30cbc8',
    
12.       id: 'formc943399e01d344948ec5ed62e9ec779b',
    
13.       isFlow: '1',
    
14.       data: JSON.stringify([{
    
15.         "creator": "110001",
    
16.         "fieldMap": {
    
17.           "fo5d3d7ff7b7e543d287433ab84bf99aef": [{
    
18.               "fo504156d875ed4c23bc1aa546b9f45384": "代码1",
    
19.               "fob988fb86e643406984abf492cc2a2bd4": "仓位1",
    
20.               "fof3177861b1b2434b956579b1fcb5eb3d": "名称1",
    
21.               "fo7eab7731ae0e4a2d8290b8586eba8aea": "型号1",
    
22.               "foe71156f1b93b45bf983f4db49ddf0315": "1",
    
23.               "fod64a2e625ecd43ba871370532c6f5413": ""
    
24.             },
    
25.             {
    
26.               "fo504156d875ed4c23bc1aa546b9f45384": "代码2",
    
27.               "fob988fb86e643406984abf492cc2a2bd4": "仓位2",
    
28.               "fof3177861b1b2434b956579b1fcb5eb3d": "名称2",
    
29.               "fo7eab7731ae0e4a2d8290b8586eba8aea": "型号2",
    
30.               "foe71156f1b93b45bf983f4db49ddf0315": "2",
    
31.               "fod64a2e625ecd43ba871370532c6f5413": ""
    
32.             },
    
33.             {
    
34.               "fo504156d875ed4c23bc1aa546b9f45384": "代码3",
    
35.               "fob988fb86e643406984abf492cc2a2bd4": "仓位3",
    
36.               "fof3177861b1b2434b956579b1fcb5eb3d": "名称3",
    
37.               "fo7eab7731ae0e4a2d8290b8586eba8aea": "型号3",
    
38.               "foe71156f1b93b45bf983f4db49ddf0315": "3",
    
39.               "fod64a2e625ecd43ba871370532c6f5413": ""
    
40.             }
    
41.           ]
    
42.         },
    
43.         "isAnonymous": "0"
    
44.       }])
    
45.     }
    
46.   })
    
47. })
    
48.   .then(response => response.json())
    
49.   .then(data => console.log(data))
    
50.   .catch(error => console.error('Error:', error));

复制代码

  2、浏览器跨域访问存在（CROS安全限制），这里设置了node.js代理服务器转发WebApi接口，服务端代码如下：

1. const express = require('express');
   
2. const cors = require('cors');
   
3. const fetch = require('node-fetch');
   
4. const app = express();
   
5. 
   
6. app.use(express.json());
   
7. app.use(cors());
   
8. 
   
9. // 通用代理请求
   
10. app.post('/api/proxy', async (req, res) => {
    
11.   const { url, method, qs } = req.body;
    
12.   try {
    
13.     const response = await fetch(`${url}?${new URLSearchParams(qs).toString()}`, {
    
14.       method: method,
    
15.       headers: {
    
16.         'Content-Type': 'application/json'
    
17.       }
    
18.     });
    
19.     const data = await response.json();
    
20.     res.json(data);
    
21.   } catch (error) {
    
22.     res.status(500).json({ error: error.message });
    
23.   }
    
24. });
    
25. 
    
26. app.listen(3000, () => {
    
27.   console.log('Node.js代理服务器已启动，监听端口3000');
    
28. });

复制代码

  3、在报表点击按钮后，将数据传送到表单，并推送消息到指定员工手机的效果截图

  ① 点击按钮，触发接口推送数据
  

  ② 浏览器前端，可以通过审查元素查看推送效果，显示成功



  ③ 手机端收到了1条领料申请单的推送数据消息


  ④ 已经将报表中的相关数据，直接推送到了表单审批流程中