案例-参数配置

场景介绍:在页面完成一系列固定参数的配置,且需要对单卡页面进行单独发布

1. 新建应用

登录YonSuite或者YonBip -> 打开应用构建服务 -> 新建应用
新建应用

2. 新建实体

数据建模 -> 新增实体 -> 保存发布
新增实体

3. 配置单卡页面

新建页面 -> 选择单卡 -> 下一步

新增页面

去掉生成列表 -> 输入页面名称并选择元数据 -> 完成

完成页面

进入页面编辑态 -> 调整页面布局

页面布局

预览列表 -> 预置一条数据 -> 删除列表页面

预置数据

4. 函数编辑(其中4.1和4.2任选一种方式往后操作即可)

新建API函数 -> 保存

新建API函数

点击设计 -> 编写API函数查询数据 -> 可复制以下代码,修改实体uri即可

API函数详情

let AbstractAPIHandler = require('AbstractAPIHandler');
  class MyAPIHandler extends AbstractAPIHandler {
   execute(request){
     //查询数据库数据
     var querysql = "select a.* from 实体uri a limit 1";
     //返回第一条数据
     var result = ObjectStore.queryByYonQL(querysql)[0];
   return {result};
 }
}
exports({"entryPoint":MyAPIHandler});

4.1 新增按钮实现保存逻辑(步骤4.1和4.2任选一个)

拖拽一个自定义按钮并绑定前端函数

自定义保存按钮绑定前端函数

编写前端函数内容 -> 可复制以下代码,修改API函数uri即可

自定义保存按钮绑定的前端函数逻辑.jpg

function (event) {
  var viewModel = this;
  //获取viewModel的数据
  var data = viewModel.getAllData();
  //调用修改API
  cb.rest.invokeFunction("API函数uri", {data:data},
  function(err, res) {
    if (res) {
      cb.utils.alert("保存成功!");
    } else {
      cb.utils.alert(err);
    }
  });
}

编写前端函数中调用到的API函数 -> 可复制以下代码,修改实体uri即可

API函数_更新参数配置信息

let AbstractAPIHandler = require('AbstractAPIHandler');
  class MyAPIHandler extends AbstractAPIHandler {
   execute(request){
    //获取请求数据
    var data = request.data;
    //置空时间戳,一定要置空,不然单据版本不是最新
    data.pubts = null;
    //更新信息
    var result = ObjectStore.updateById("实体uri",data);
   return {result};
 }
}
exports({"entryPoint":MyAPIHandler});

页面初始化新增前端函数,用于查询数据 -> 保存 -> 可复制以下代码,修改API函数uri即可

页面初始化新增前端函数进行赋值

function (event) {
  var viewModel = this;
  //获取页面mode
  var mode = viewModel.getParams().mode;
  //打开的页面默认为新增态 
  if (mode == 'add') {
      // 查询数据并渲染在页面上
      console.log("查询","查询数据中......");
      cb.rest.invokeFunction("API函数uri", {},
      function(err, res) {
        if (res) {
          console.log(res);
          //赋值
          viewModel.setData(res.result);
        } else {
            console.log(err);
        }
      });
  }
}

4.2 页面初始化完成逻辑(完成4.1步骤,请直接跳过4.2)

页面初始化新增前端函数 -> 保存

页面初始化新增前端函数

点击配置 -> 编写前端函数 -> 可复制以下代码,修改API函数uri单据编码即可

前端函数详情

function (event) {
  var viewModel = this;
  //获取页面mode
  var mode = viewModel.getParams().mode;
  //打开的页面默认为新增态 
  if (mode == 'add') {
      // 查询数据并渲染在页面上
      console.log("查询","查询数据中......");
      cb.rest.invokeFunction("API函数uri", {},
      function(err, res) {
        if (res) {
            console.log(res);
            let data = {
            //TODO:填写单据类型及单据号
            billtype: 'Voucher',// 单据类型
            billno: '单据编码',// 单据号
            params: {
              mode: 'edit', // (编辑态edit、新增态add、浏览态browse)
              //是否只读,true:默认为浏览态,false:默认为编辑态。
              readOnly: true, 
              //传参id,必传
              id:res.result.id
            },
          };
          //重新打开本单据,并在当前页面显示
          cb.loader.runCommandLine('bill', data, viewModel);
        } else {
            console.log(err);
        }
      });
  }

}

5. 页面展示

点击预览 -> 复制访问地址
现在整体页面设计已经完成,由于单卡无法发布,所以我们需要把该页面和服务进行关联

预览页面

我的应用 -> 进入服务列表

我的应用

添加自建服务

添加服务

F5刷新页面,就可以正常访问啦

页面刷新

Copyright © 用友 -【生态技术部】 2021 all right reserved,powered by Gitbook修订时间: 2022-03-01 09:54:59

results matching ""

    No results matching ""