框架系统预制函数汇总

一、系统预制得生命周期函数

  • 在页面加载过程中,为了满足开发过程中各个时机差异化开发的需求,MDF框架系统预制了特定的生命周期函数,供开发者在钩子函数里面做特色化开发;

  • 页面系统预制钩子函数以及方法

    1、meta元数据加载完成,可以在afterLoadMeta钩子函数里面修改元数据

    function (event) {
      var viewModel = this;
      //meta元数据加载完成,可以在此钩子函数里面修改元数据
      viewModel.on('afterLoadMeta', function(args){
        //afterLoadMeta    元数据加载后执行的方法
        //args对象:vm:页面模型;view:UI元数据
      })
    }
    

2、afterMount页面DOM完成,无形参,可直接操作模型

function (event) {
    var viewModel = this;
    //页面DOM完成,无形参,可直接操作模型
    viewModel.on('afterMount', function(){
      //用于列表页面,初始化一些操作可以在这里实现,需要操作模型的,需要在此钩子函数执行
    })
}

3、afterLoadData页面数据加载完成后触发

function (event) {
    var viewModel = this;
    //页面数据加载完成后触发
    viewModel.on('afterLoadData', function(){
      //用于卡片页面,页面初始化赋值等操作
    })
}

4、通用动作,系统预制的动作函数和使用场景

function (event) {
    var viewModel = this;
    //通用动作,系统预制的动作函数和使用场景
    /*通用动作名称:
      Search  查询操作
      Add     新增操作
      Save    保存操作
      batchDelete  删除操作
    */
    //例子:系统预制的动作函数,通常都会有两个钩子函数,一个是事件发生之前,一个是事件发生之后
    viewModel.on('beforeSave', function(){
      //事件发生之前,可以进行特色化处理,以此为例,可以进行保存之前数据校验,通过return true;否则return false;
    })

    viewModel.on('afterSave', function(){
      //事件发生之后,可以进行保存成功以后的特色化需求
    })
}

5、execute 是系统预制发布的钩子函数,用来执行已注册到model上的方法

function (event) {
    var viewModel = this;
    //execute是baseModel上的API,用来执行已注册到model上的方法(通过xxxModel.on(xxx, function() {})向model注册方法)
    //例子:手动刷新页面,重新加载
    viewModel.execute('refresh'); 
}

6、通过代码发布函数updateViewMeta更新UI元数据的属性

function (event) {
    var viewModel = this;
    //通过代码发布函数updateViewMeta更新UI元数据的属性
    //例子:设置布局(容器)的隐藏
    viewModel.execute('updateViewMeta', { 
      code: 'cGroupCode',  // 容器的编码(从UI设计器属性栏查看)
      visible: false 
    }); 
}

7、监听页面状态变化系统预制钩子函数modeChange

function (event) {
    var viewModel = this;
    //监听页面状态变化系统预制钩子函数modeChange
    //例子:新增页面,按钮的显示/隐藏
    viewModel.on("modeChange",function (data) {
        if(data == "add"){
          viewModel.get("button24rj").setVisible(true);
        } else {
          viewModel.get("button24rj").setVisible(false);
        }
    });
}

8、系统预制获取父组件、上游单据传递过来的数据、信息的方法getParams()

function (event) {
    var viewModel = this;
    //系统预制获取父组件、上游单据传递过来的数据、信息的方法getParams()    
    //例子:上游单据传递过来的单据状态、单据号、单据类型等
    var {mode, billType, billNo, billData } = viewModel.getParams();
}

9、执行系统默认钩子函数前,怎么异步设置数据

  • 当框架默认的接口无法满足业务需求时,需要在调用默认接口之前异步调用自定义的接口获取数据,此处有个坑,需要注意,因为会有同步异步问题,解决此类问题,可以分为下面几步实行:
function (event) {
    var viewModel = this;
    //1. 在before事件中进行判断 如果是框架调用的事件,则直接return false
    //2. 自己处理异步逻辑
    //3. 异步逻辑处理完毕之后,塞入一个标签,用来区分是框架触发的事件还是自己获取完异步数据之后手动触发的
    //4. 手动触发事件
    //5. 删除标签
    // 框架里百分之八九十的钩子都可以这么处理异步数据作为条件传入框架自有接口
    viewModel.on('beforeAdd', function(){
      if (!viewModel.getCache('isSelfExecute')) {
        const proxy = viewModel.setProxy({xxx:{}})
        //2、自己处理异步逻辑
        proxy.xxx(queryparams, params, function (err, res){
            if (res.data) {
              //3、异步逻辑处理完毕之后,塞入一个标签,用来区分是框架触发的事件还是自己获取完异步数据之后手动触发的
                viewModel.setCache('isSelfExecute', true)
                xxxx
                //4、手动触发事件
                viewModel.biz.do('add', viewModel)
            }
        })
        //1、在before事件中进行判断 如果是框架调用的事件,则直接return false
        return false;
      }
      //5、删除标签
      viewModel.clearCache('isSelfExecute');
      xxxxx
    })
}

10、执行系统封装好的动作函数时,里面需要请求接口获取数据时,如何使接口异步转同步?

function (event) {
    var viewModel = this;
    //在执行系统封装好的动作函数时,里面需要请求接口获取数据时,接口封装一般是异步的(会出现一种情况,接口还没返回数据,系统预制函数已经走完了,并没有拿到我们需要的数据),为了解决这种情况,我们可以把接口异步改为同步,具体用法如下:

    const gridModelInfo = viewModel.getGridModel();

    //表格设置数据之前,表格展示的数据,使用接口请求的得到的数据
    gridModelInfo.on('beforeSetDataSource',function(args){  
      //创建异步接口请求对象
      const proxy=viewModel.setProxy({
                    queryData:{
                        url:'/scmbc/barprint/onHandStock',
                        method:'GET'
                    }
      });

      //传参
      const param={
        orgId:'111111',
        warehouseId:'asd2'
      };

      //核心代码:proxy对象里面有两个函数,queryDataSync(a):同步请求 queryData(a,b):异步请求,result为服务端返回的数据
      const result=proxy.queryDataSync(param);

      //xxxxx 后续赋值操作
    })
}

二、系统预制工具类方法

  • 在日常前端扩展开发中,需要用到很多通用的工具类方法,比如判断为空、取字段值等,系统已经把大部分工具类方法已经全局预制好,直接调用方法即可;

一、cb.utils工具类

1、cb.utils.isArray() 判断是否为数组对象

function (event) {
    var viewModel = this;
    //说明:判断是否为数组对象
    //入参:arr
    //例: 
    var arr = [1,2,3,4];

    var isArry = cb.utils.isArray(arr);
    //输出:isArry => true;
}

2、cb.utils.extend(false,{},a) 拷贝对象/数组

function (event) {
    var viewModel = this;
    //说明:拷贝对象/数组
    //入参:deep(是否深拷贝),target(拷贝类型  {}||[]),obj(需要拷贝的对象/数组)
    //例:
    //1、浅拷贝    
    var a = {a1:{a11:2}}
    var b = cb.utils.extend(false,{},a);
    b.a1.a11 = 3;
    //输出:a => {a1:{a11:3}} ; b => {a1:{a11:3}} 
    //2、深拷贝
    var a = {a1:{a11:2}}
    var b = cb.utils.extend(true,{},a);
    b.a1.a11 = 3;
    //输出:a => {a1:{a11:2}} ; b => {a1:{a11:3}}
}

3、cb.utils.isEmpty() 判空是否为空

function (event) {
    var viewModel = this;
    //说明:判空是否为空
    //入参:value
    //例: 
    var a = '';b=null,c=1;
    cb.utils.isEmpty(a) => true;
    cb.utils.isEmpty(b) => true;
    cb.utils.isEmpty(c) => false;
}

4、cb.utils.getCookie() 获取cookie中的值

function (event) {
    var viewModel = this;
    //说明:获取cookie中的值
    //入参:name
    //例: 
    cb.utils.getCookie('token');
}

5、cb.utils.getNewId() 根据传入前缀 返回新有序id

function (event) {
    var viewModel = this;
    //说明:根据传入前缀 返回新有序id
    //入参:prefix
    //例: 
     var a = cb.utils.getNewId('yxy');
     var b = cb.utils.getNewId('yxy');
     //输出:a => "yxy_1"  b => "yxy_2"
}

6、cb.utils.parseCStyle() 把json字符串转化为对象格式

function (event) {
    var viewModel = this;
    //说明:把json字符串转化为对象格式
    //入参:JSONString
    //例: 
    var JSONString = '{"a":"1"}';

    var obj = cb.utils.parseCStyle(JSONString);
    //输出:obj => {a: "1"};
}

7、cb.utils.alert('message content', 'error') 弹窗提示信息

function (event) {
    var viewModel = this;
    //说明:弹窗提示信息
    //入参:参数1为错误提示内容;  参数2 error 红色错误 waring 黄色警告 info 蓝色信息提示  success 绿色成功
    //例: 
    cb.utils.alert('错误信息提示', 'error');
}

8、cb.utils.confirm() 确认框提示信息

function (event) {
    var viewModel = this;
    //说明:确认框提示信息
    //入参:参数1为错误提示内容; 参数2为点击确认后的回调函数; 参数3为点击取消后的回调函数
    //例: 
    cb.utils.confirm('message content',
      () => {  
        //  success function 成功回调
      },
      () => {
        // cancel function  取消回调
    });
}

9、cb.utils.isPlainObject(data) 返回布尔值,判断数据是否为对象类型

function (event) {
    var viewModel = this;
    //说明:判断数据是否为对象类型,返回布尔值
    //入参:data可为任意值
    //例: 
    var a = cb.utils.isPlainObject('1111');
    //a => false
    var b = cb.utils.isPlainObject({});
    //b => true
}

10、cb.utils.isEmptyObject(data) 返回布尔值,判断数据是否为空对象

function (event) {
    var viewModel = this;
    //说明:判断数据是否为空对象,返回布尔值
    //入参:object
    //例: 
    var a = cb.utils.isEmptyObject({a:1});
    //a => false
    var b = cb.utils.isEmptyObject({});
    //b => true
}

11、cb.utils.getUser(domainKey) 根据domainkey获取用户信息

function (event) {
    var viewModel = this;
    //说明:根据domainkey获取用户信息
    //入参:domainKey
    //例: 
    var a = cb.utils.getUser(domainKey);
}

11、开启loading等待以及关闭loading等待

function (event) {
    var viewModel = this;
    //说明:根据domainkey获取用户信息
    //入参:
    //例: 
    cb.utils.loadingControl.start();  //开启一次loading
    cb.utils.loadingControl.end();  //关闭一次loading
}

12、cb.utils.queryString() 处理GET请求的参数

function (event) {
    var viewModel = this;
    //说明:处理GET请求的参数增删改查
    //入参:url

    //1、get() 获取url中的指定的参数
    var a = new cb.utils.queryString('www.baidu.com?a=1&b=2').get('a');
    //输出:a => 1

    //2、set() 设置url中的指定的参数
    var queryString = new cb.utils.queryString('www.baidu.com?a=1&b=2');
    queryString.set('c',3);

    //3、has() 判断url中是否存在此参数
    var queryString = new cb.utils.queryString('www.baidu.com?a=1&b=2');
    var hasA = queryString.has('a');
    //输出:hasA = true

    //4、del() 删除url中指定的参数
    var queryString = new cb.utils.queryString('www.baidu.com?a=1&b=2');
    queryString.del('a');

    //5、query 获取参数的对象
    var queryString = new cb.utils.queryString('www.baidu.com?a=1&b=2');
    queryString.query;
    //输出:{a: "1", b: "2"}
}

二、cb.promise()工具类

  • 当有异步操作的时候,比如请求接口,需要等带异步操作完成,在进行下一步动作,这里就要用到cb.promise()系统预制方法改为同步执行。

1、cb.promise.prototype.resolve 成功的回调

2、cb.promise.prototype.reject 失败的回调

3、cb.promise.prototype.then

/*
 * 取消或终止出境计划
 */  
 function (event) {
   var viewModel = this;
   var promise = new cb.promise();

   viewModel.on('beforeSave', function(data) {
       cb.utils.confirm('出国(境)计划取消后不可撤消。是否取消原出国(境)计划?', function() {
          //点击确认  放行
          promise.resolve();
       }, function() {
          return false;
       })
       return promise;
   })
}
Copyright © 用友 -【生态技术部】 2021 all right reserved,powered by Gitbook修订时间: 2022-01-04 16:12:25

results matching ""

    No results matching ""