「销售订单看板Demo APP」--supOS低代码开发(for supOS v3.0)

1. 课程简介

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

课程视频：立即查看>>

2. 课程适配范围

supOS版本：v3.0.0

3. 详细介绍

通过之前的课程中，有提到过supOS低代码开发的基本介绍，其中有产品资料库说明、APP开发流程图说明以及对象建模和组态页面开发流程说明，可以参考之前的课程进行了解。

「表设计分析」

当前案例中，销售订单信息设定主要包含以下属性字段：

「Demo APP 展示」

销售订单看板是企业常见的销售单据总览，我们将针对销售订单的趋势图表分析，进行案例说明，如何结合对象脚本以及页面组态加低代码开发APP。

功能一：城市销售额前八名

服务脚本：

对象名称: hsh_xsdd.tbl_sale_order, 服务名称: queryCityMoney

脚本综合描述：取关系表“hsh_xsdd_tbl_sale_order”SQL进行分组求和排序；

代码如下：

var input = {
 sql:"select hsh_xsdd_clientAddress,sum(hsh_xsdd_money) sums from hsh_xsdd_tbl_sale_order group by hsh_xsdd_clientAddress order by count(hsh_xsdd_money) desc limit 8"
};
var res = templates['hsh_xsdd.tbl_sale_order'].querySQLExec(input).data.dataSource;
var result = {
  list: res
}
result;

服务绑定

功能二：城市订单量前五名

服务脚本

对象名称: hsh_xsdd.tbl_sale_order, 服务名称: queryCountByCity

脚本综合描述：取关系表“hsh_xsdd_tbl_sale_order”SQL进行分组求和排序；

代码如下：

var input = {
 sql: "select hsh_xsdd_clientAddress,count(hsh_xsdd_orderNo) sums from hsh_xsdd_tbl_sale_order group by hsh_xsdd_clientAddress order by count(hsh_xsdd_orderNo) desc limit 5"
};
var res = templates['hsh_xsdd.tbl_sale_order'].querySQLExec(input).data.dataSource;
var result = {
  list: res
}
result;

服务绑定

功能三：销售订单趋势图

服务脚本：

对象名称: hsh_xsdd.tbl_sale_order, 服务名称: queryMRDD

脚本综合描述：首先判断传入参数是否有值，如无值执行无参数逻辑代码

如入参有值则判断参数值执行不同sql语句返回结果

代码如下：

if(type){
if(type=='7'){
var date=new Date();
var dates=new Date(date.getTime()-6*24*60*60*1000);
var year=dates.getFullYear();
var month=dates.getMonth()+1;
var day=dates.getDate();
if(month<10){month="0"+month;}
if(day<10){day="0"+day;}
var time=year+"-"+month+"-"+day;
var input = {
sql: "select hsh_xsdd_orderDate,count(hsh_xsdd_orderNo) num from hsh_xsdd_tbl_sale_order where hsh_xsdd_orderDate >= '"+time+"' group by hsh_xsdd_orderDate"
};
var res = templates['hsh_xsdd.tbl_sale_order'].querySQLExec(input).data.dataSource;
var result={
  list:res
}
result
}else if(type=='15'){
var date=new Date();
var year=date.getFullYear();
var month=date.getMonth()+1;
var day=date.getDate();
if(month<10){month="0"+month;}
if(day<10){day="0"+day;}

var time=year;
var input = {
sql: "select substring(hsh_xsdd_orderDate,6,2) hsh_xsdd_orderdate,count(hsh_xsdd_orderNo) num from hsh_xsdd_tbl_sale_order where hsh_xsdd_orderDate like '"+time+"%' group by substr(hsh_xsdd_orderDate,1,7)"
};
var res = templates['hsh_xsdd.tbl_sale_order'].querySQLExec(input).data.dataSource;
var result={
  list:res
}
result
  }else if(type=='30'){
 var input = {
sql: "select substring(hsh_xsdd_orderDate,6,2) hsh_xsdd_orderdate,count(hsh_xsdd_orderNo) num from hsh_xsdd_tbl_sale_order group by substr(hsh_xsdd_orderDate,1,4)"
};
var res = templates['hsh_xsdd.tbl_sale_order'].querySQLExec(input).data.dataSource;
var result={
  list:res
}
result
  }
}else{

var date=new Date();
var dates=new Date(date.getTime()-6*24*60*60*1000);
var year=dates.getFullYear();
var month=dates.getMonth()+1;
var day=dates.getDate();
if(month<10){month="0"+month;}
if(day<10){day="0"+day;}
var time=year+"-"+month+"-"+day;

var input = {
 sql: "select hsh_xsdd_orderDate,count(hsh_xsdd_orderNo) num from hsh_xsdd_tbl_sale_order where hsh_xsdd_orderDate >= '"+time+"' group by hsh_xsdd_orderDate"
};
var res = templates['hsh_xsdd.tbl_sale_order'].querySQLExec(input).data.dataSource;
var result={
  list:res
}
result
}

服务绑定

入参参数来源需绑定传参控件，将对象服务参数来源绑定到对应的控件ID

参数来源控件设置(注：组件名称改为入参参数名称)

文本为对外所展示的值，值则为传入参数的值

功能四：客户类型占比分析

服务脚本

对象名称: hsh_xsdd.tbl_sale_order, 服务名称: queryKHLX

脚本综合描述：取关系表“hsh_xsdd_tbl_sale_order”SQL进行按条件筛选按照分组统计；

代码如下：

var date=new Date();
var year=date.getFullYear();
var month=date.getMonth()+1;
var day=date.getDate();
if(month<10){month="0"+month;}
if(day<10){day="0"+day;}
var time=year+"-"+month;

var input = {
sql: "select hsh_xsdd_clientType,count(hsh_xsdd_clientType) num from hsh_xsdd_tbl_sale_order where hsh_xsdd_orderDate like '%"+time+"%' group by hsh_xsdd_clientType"
};
var res = templates['hsh_xsdd.tbl_sale_order'].querySQLExec(input).data.dataSource;
var result={
  list:res
}
result

服务绑定

同功能一，二服务绑定步骤

功能五：月度销售额趋势

服务脚本

对象名称: hsh_xsdd.tbl_sale_order, 服务名称: queryMonthMoney

脚本综合描述：先取关系表“hsh_xsdd_tbl_sale_order”SQL进行按条件筛选获取到需要拿到的记录条数，再根据数字按照月份进行分组求和；

代码如下：

var sql = "select substring(hsh_xsdd_orderdate,1,7) hsh_xsdd_orderdate,ROUND(sum(hsh_xsdd_money)/10000,2) num from hsh_xsdd_tbl_sale_order group by left(hsh_xsdd_orderdate,7)"

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

var sql = "select substring(hsh_xsdd_orderdate,6,2) hsh_xsdd_orderdate,ROUND(sum(hsh_xsdd_money)/10000,2) num from hsh_xsdd_tbl_sale_order group by left(hsh_xsdd_orderdate,7) limit "+num+","+num1+""

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

服务绑定

同功能一，二服务绑定步骤

功能六：存货分类占比分析

服务脚本

对象名称: hsh_xsdd.tbl_sale_order, 服务名称: queryCHLX

脚本综合描述：取关系表“hsh_xsdd_tbl_sale_order”SQL进行按条件筛选进行分组统计；

代码如下：

var date=new Date();
var year=date.getFullYear();
var month=date.getMonth()+1;
var day=date.getDate();
if(month<10){month="0"+month;}
if(day<10){day="0"+day;}
var time=year+"-"+month;
var input = {
sql: "select hsh_xsdd_invCName,count(hsh_xsdd_invCName) num from hsh_xsdd_tbl_sale_order where hsh_xsdd_orderDate like '%"+time+"%' group by hsh_xsdd_invCName"

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

服务绑定

同功能一，二服务绑定步骤

功能七：订单量，订单金额数据展示

服务脚本：

对象名称: hsh_xsdd.tbl_sale_order, 服务名称: queryDRcount

脚本综合描述：取关系表“hsh_xsdd_tbl_sale_order”SQL当日数据进行统计展示；

代码如下：

var date=new Date();
var year=date.getFullYear();
var month=date.getMonth()+1;
var day=date.getDate();
if(month<10){month="0"+month;}
if(day<10){day="0"+day;}
var time=year+"-"+month+"-"+day;
var input = {
sql: "select count(hsh_xsdd_orderNo) num from hsh_xsdd_tbl_sale_order where hsh_xsdd_orderDate like '%"+time+"%'"
};
var res = templates['hsh_xsdd.tbl_sale_order'].querySQLExec(input).data.dataSource;
res

内容加载脚本：

添加标签控件内容加载事件，写入脚本

脚本代码如下：

var label = scriptUtil.getRegisterReactDom('htDiv-kndz33o00-1729');

scriptUtil.callFunction('hsh_xsdd.tbl_sale_order', 'hsh_xsdd.queryDRcount').then(function(res){
label.setLabelContent(res.data[0].num)
});
setInterval(function() {
scriptUtil.callFunction('hsh_xsdd.tbl_sale_order', 'hsh_xsdd.queryDRcount').then(function(res){
label.setLabelContent(res.data[0].num)
})
},60*60*1000);

代码描述：
通过标签控件ID获取到标签控件
var label = scriptUtil.getRegisterReactDom('htDiv-kndz33o00-1729');

通过执行服务的方法进行服务执行获取返回结果，并将返回结果设置为标签值
hsh_xsdd.tbl_sale_order为命名空间对象名称
'hsh_xsdd.queryDRcount为命名空间服务名称
res为返回结果
label.setLabelContent(res.data[0].num)将返回结果设置为标签的值
scriptUtil.callFunction('hsh_xsdd.tbl_sale_order', 'hsh_xsdd.queryDRcount').then(function(res){
label.setLabelContent(res.data[0].num)
});

其他几个标签控件设置结果参照功能七

功能八：展示日期及天气

日期展示:参照功能七标签控件设置方式
天气展示：

通过网页控件，插入网页进行天气展示

天气链接：http://i.tianqi.com/index.php?c=code&id=12&color=%2366ccff&icon=1&num=1&site=12

功能九：总订单量数据展示

代码描述：

*通过执行服务获取到对应服务的返回值结果,将结果通过setState方法放入全局变量，最后在渲染代码中通过获取全局变量对返回结果进行展示*

*可编程组件内代码如下：*

import React, { Component } from 'react';

class CustomComp extends Component {
    state = {
        num: '' 
    }
    componentDidMount() {
          this.GetSHSOutput();
  }
     GetSHSOutput = () => {
        console.log(this,'thisssssss')
        var that = this;
      scriptUtil.callFunction('hsh_xsdd.tbl_sale_order', 'hsh_xsdd.queryAllCount').then(function(res){
        var data=[];
        data.push(res.data[0].sums);
        that.setState({
            num:res.data[0].sums+""
        })
      });
  }

    render() {
        return (
             <div>
               {
                   this.state.num.split("").map(item => 
                        <span style={{ fontSize: '48px', color: '#fff', backgroundColor: 'rgb(255 183 17)', opacity:'0.8', borderRadius:3.84, fontWeight: 600, padding: '3px 7px', margin: '0 6px' }}>
                           {item}
                        </span>
                   )
               }
            </div>
        );
    }
}

export default CustomComp;