「销售订单增删改查Demo APP」--supOS低代码开发(for supOS v3.0)

1. 课程简介

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

课程视频：立即查看>>

2. 课程适配范围

supOS版本：v3.0.0

3. 详细介绍

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

「表设计分析」

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

「Demo APP 展示」

销售订单是企业常见的生产执行任务单据，我们将针对销售订单的增删改查，进行案例说明，如何结合对象脚本以及页面组态加低代码开发APP。

功能一：表单创建、显示、条件过滤

首先新建一个APP，在APP对象模板-表单模板下创建一个销售订单的对象模板，设置别名。

然后进入新建模板中，在属性-我的属性中新建之前设计表中的相应字段，supos会在内置数据库中自动生成相应的表结构（表结构中字段名会添加命名空间前缀，e.g clientName在表中为hsh_xsdd_clientName,表名为hsh_xsdd_tbl_sale_order）。

接着在页面设计中新建一个页面，拖出一个表格组件，绑定数据源为刚才创建的模板，同时可以设置分页、每页条数、表头等参数。

条件查询需要点击联动对象，将输入、下拉框等组件ID与相应的字段绑定，实现条件查询。

功能二：表单新增

表单新增需要在页面设计中新建一个表单新建的页面

保存按钮添加点击事件脚本：

//获取各个输入框输入的数据
var formEntity = scriptUtil.getFormData(['hsh_xsdd.orderNo','hsh_xsdd.clientName','hsh_xsdd.clientType','hsh_xsdd.clientAddress','hsh_xsdd.invCName','hsh_xsdd.invStd','hsh_xsdd.quantity','hsh_xsdd.orderDate','hsh_xsdd.money'])
//调用表单模板的内置新增数据的服务
scriptUtil.addDataTable(
    {
        dataSource:'hsh_xsdd.tbl_sale_order',
        properties:formEntity,
        version:'V2'
    },
    function(res){
        //提示框 success，error，info，warning 代表每个框的图标
        scriptUtil.showMessage('保存成功','success')
        //重新加载列表 
        window.parent.scriptUtil.getRegisterReactDom('htDiv-kne61u9n0-70').reloadTableData();
        //延迟5毫秒，关闭添加弹框
        setTimeout(function(){
            //关闭弹框
            window.parent.scriptUtil.closeModal();
        },500)
    }
);

取消按钮添加点击事件脚本：

//关闭弹框
window.parent.scriptUtil.closeModal();

功能三：表单修改和删除

首先需要在表单组件-交互-事件中添加内容加载事件，事件中添加以下脚本（实现新增一列操作列，并在每个操作列中添加修改和删除两个按钮，并设置相应按钮的点击事件，修改按钮的点击事件打开修改页面，删除按钮的点击事件弹出提示框并在确认时删除相应的数据）：

var table = scriptUtil.getRegisterReactDom('htDiv-kne61u9n0-70');// 表格id
    var columnOperation = [
      {
        name: '修改',
        style: {
          width:'40px',
          height:'34px',
          backgroundColor: '#3377FF',
          borderRadius: '5px',
          color: '#fff',
          padding: '0px 0px',
          border:'0px'
        },
        click: function (row) {
            if(row){//判空
                 localStorage.setItem("rowData",JSON.stringify(row))//将json数据转换为String数组)  //将修改的整条数据存如内置存储器中 
            //弹出框代码  url:页面预览的url
                scriptUtil.showModal('{"width":800,"height":624,"needTitle":false,"margin":0,"isCenter":true,"url":"/#/runtime-fullscreen/runtime-fullscreen/Page_0aa2ea278218415e91b4b9b034771831"}')
          }
    }
},  
{
    name: '删除',
    style: {
      width:'40px',
      height:'34px',
      backgroundColor: '#ff7875',
      borderRadius: '5px',
      color: '#fff',
      padding: '0px 0px',
      border:'0px'
    },
    click: function (row) {
        // 调用删除数据的服务
        scriptUtil.delDataTable(
            {
                dataSource:'hsh_xsdd.tbl_sale_order',
                properties:[{'system.id':row['system.id']}],
                version:'V2'
            },
            function(res){
                 scriptUtil.showMessage('删除成功','success')//提示框 success，error，info，warning 代表每个框的图标
                window.parent.scriptUtil.getRegisterReactDom('htDiv-kne61u9n0-70').reloadTableData();//重新加载列表 
                //延迟5毫秒，关闭添加弹框
                setTimeout(function(){
                    //关闭弹框
                    window.parent.scriptUtil.closeModal();
                },500)
            }
        );
    }
  },
];
table.setColumnOperation(columnOperation);

新建修改销售订单页面，页面元素和添加销售订单的页面一样，需要在页面加载的时候添加以下脚本，获取上面的脚本中存入的行数据，并显示到相应的输入框中。

var res = localStorage.getItem("rowData");//获取存入的数据
if(res){//判空
    var entity = JSON.parse(res);//转为json
    console.log("entiry: ", entity)
    scriptUtil.setFormData(entity);//给表单set数据
}

修改销售订单页面中的确认按钮也进行修改，调用如下修改服务，取消按钮保持不变。

var formEntity = scriptUtil.getFormData(['system.id','hsh_xsdd.departName','hsh_xsdd.persionName','hsh_xsdd.clientName','hsh_xsdd.cexchName'
,'hsh_xsdd.invName','hsh_xsdd.invCName','hsh_xsdd.invStd','hsh_xsdd.quantity','hsh_xsdd.orderDate','hsh_xsdd.money','hsh_xsdd.clientType','hsh_xsdd.clientAddress'])//表单中所用字段名
//调用修改数据的脚本
scriptUtil.updateDataTable(
    {
        dataSource:'hsh_xsdd.tbl_sale_order',
        properties:{
            'clientName':formEntity['hsh_xsdd.clientName'],
            'invCName':formEntity['hsh_xsdd.invCName'],
            'invStd':formEntity['hsh_xsdd.invStd'],
            'quantity':formEntity['hsh_xsdd.quantity'],
            'orderDate':formEntity['hsh_xsdd.orderDate'],
            'money':formEntity['hsh_xsdd.money'],
            'clientType':formEntity['hsh_xsdd.clientType'],
            'clientAddress':formEntity['hsh_xsdd.clientAddress']
        },
        keys:{
             'id': formEntity['system.id']
        },
        version:'V2'
    },
    function(res){
         scriptUtil.showMessage('修改成功','success')//提示框 success，error，info，warning 代表每个框的图标
        window.parent.scriptUtil.getRegisterReactDom('htDiv-kne61u9n0-70').reloadTableData();//重新加载列表 
        //延迟5毫秒，关闭添加弹框
        setTimeout(function(){
            //关闭弹框
            window.parent.scriptUtil.closeModal();
        },500)
    }
);