1. 课程简介

本次课程主要通过搭建销售订单-报表Demo APP（销售订单-报表）的过程讲解如何在supOS平台通过组态开发与少量脚本服务设计创建一个APP；

课程视频：立即查看>>

2. 课程适配范围

supOS版本：v3.0.0

3. 详细介绍

通过之前的课程中，有提到过supOS低代码开发的基本介绍，其中有APP开发报表说明以及对象建模和组态页面开发流程说明。

「展示」

工厂中一般用来统计、查询、导出重要数据，以供人员进行系统状态检查。我们将针对报表，进行案例说明，如何结合对象服务以及页面组态加低代码开发APP（例：销售订单-报表APP）。

销售订单报表-1

以对象模型、服务或数据库已建立为前提举例说明

功能一：报表模型搭建

步骤1：搭建报表模型

双击报表控件，弹出报表设计器，报表设计器的基本操作与Excel操作一致；

销售订单报表-2

步骤2：添加数据源

1) 双击“报表”控件，在报表中添加数据源进行绑定，设置报表内容及样式；

销售订单报表-3

2) 选择“对象实例”或者“数据查询”，获取数据源，本次以添加对象实例中的服务为例；

销售订单报表-4

在对象实例中添加数据源脚本服务；

销售订单报表-5

点击“调试”按钮，获取返回值，将返回值填写到该服务基本信息中的返回格式中，并且类型为JSON;

销售订单报表-6

服务脚本：

 // 客户端为IE11浏览器时不支持ES6脚本

var ArrayList = Java.type("java.util.ArrayList");

var sql = "select hsh_xsdd_clientName client "
+",sum(case left(hsh_xsdd_orderdate,7) when '2021-04' then hsh_xsdd_money else '0' end) m202104"
+",sum(case left(hsh_xsdd_orderdate,7) when '2021-03' then hsh_xsdd_money else '0' end) m202103"
+",sum(case left(hsh_xsdd_orderdate,7) when '2021-02' then hsh_xsdd_money else '0' end) m202102"
+",sum(case left(hsh_xsdd_orderdate,7) when '2021-01' then hsh_xsdd_money else '0' end) m202101"
+",sum(case left(hsh_xsdd_orderdate,7) when '2020-12' then hsh_xsdd_money else '0' end) m202012"
+",sum(case left(hsh_xsdd_orderdate,7) when '2020-11' then hsh_xsdd_money else '0' end) m202011"
+",sum(case left(hsh_xsdd_orderdate,7) when '2020-10' then hsh_xsdd_money else '0' end) m202010"
+",sum(case left(hsh_xsdd_orderdate,7) when '2020-09' then hsh_xsdd_money else '0' end) m202009"
+",sum(case left(hsh_xsdd_orderdate,7) when '2020-08' then hsh_xsdd_money else '0' end) m202008"
+",sum(case left(hsh_xsdd_orderdate,7) when '2020-07' then hsh_xsdd_money else '0' end) m202007"
+",sum(case left(hsh_xsdd_orderdate,7) when '2020-06' then hsh_xsdd_money else '0' end) m202006"
+",sum(case left(hsh_xsdd_orderdate,7) when '2020-05' then hsh_xsdd_money else '0' end) m202005"
+" from hsh_xsdd_tbl_sale_order where 1=1 "

if(clientName!=null && clientName!=''){
  sql = sql + " and hsh_xsdd_clientName like '%"+ clientName + "%'"
}
sql = sql +" group by hsh_xsdd_clientName "

var input = {
 sql: sql
};
var res = templates['hsh_xsdd.tbl_sale_order'].querySQLExec(input).data.dataSource; 

var result = {
  list:res
}

result;

3) 配置数据源，将对应的字段拖动到报表中；

销售订单报表-7

步骤2：数据联动

销售订单报表-8

获取客户名称下拉框数据，其中服务名称为：getClientNameList（获取全部客户名称）；

销售订单报表-9

销售订单报表-10

服务脚本：

var sql = "select distinct(hsh_xsdd_clientName) client from hsh_xsdd_tbl_sale_order "
var input = {
 sql: sql
};
var res = templates['hsh_xsdd.tbl_sale_order'].querySQLExec(input).data.dataSource; 
var result = {
  list:res
}
result;

绑定动态数据源；

销售订单报表-11

步骤3：报表导出

组态期添加导出按钮，添加单击事件，并编辑脚本，运行期点击该按钮，即可导出报表数据。

销售订单报表-12

导出脚本：

var report = scriptUtil.getRegisterReactDom('htDiv-knfndzzg0-70').report;
report.doExport('xlsx');