查询区整理

一、查询区概述

  • 我们在开发过程中,特别是开发单据列表页面,或者参照页面,头部显示的查询条件部分,我们统称为查询区;
  • 在日常开发过程中,如果想对查询区的内容加特色化需求,就需要先清楚查询的生命周期函数,以及查询区模型支持的方法和事件;

  • 查询区详细方法汇总地址

访问地址:https://www.showdoc.com.cn/89974793848004/602910624985656

二、怎么获取查询区模型

  • 1、查询区的模型是目前所有模型里面比较特殊的,比较晦涩难懂一些,通过以下代码学习印象更深刻一些;
function (event) {
  var viewModel = this;

  //1、获取查询区最外层查询区容器模型(查询区的生命周期函数都是通过此模型触发)
  let filterViewModelInfo = viewModel.getCache('FilterViewModel');
  //2、通过查询区容器模型,查找需要特色化需求修改的查询条件模型(注意:这里是查询条件模型,还不是此组件的真实模型)
  let filterModelInfo = filterViewModelInfo.get('cItemName');
  //3、获取真实模型(1、比较符为between区间的使用getToModel 2、其他的使用getFromModel),获取到真实模型后,就可以使用模型原型上的方法和事件来进行特色化开发
  let realModelInfo = filterModelInfo.getFromModel();
  //4、结合以下图片理解
}

图1

  • 2、获取到真实模型以后,根绝获取的真实模型的模型类型,来确定模型支持哪些方法和事件,在进行下一步开发;

三、查询区的生命周期

此处所有的viewmodel为查询模型而不是页面的viewmodel,切勿搞混了

  • 1、beforeInit 是一个在查询区脚本加载之前的钩子,在这个钩子里我们可以修改查询返回的数据
viewmodel.on('beforeInit', function(data){
  //查询区数据加载回来但是还没有进行渲染的时候,此时可以修改查询区数据
  // 如修改必输项等
})
  • 2、afterInit 我们一般在afterInit里处理一些查询条件的挂载事件或者其他事件,afterInit的执行时机在查询脚本加载之后且组件渲染以后,第一次搜索之前
  • 可以在此钩子里实现的操作:
  • 1.一些查询条件的默认值赋值、设置默认、监听事件等一系列操作 ---> viewmodel.get('xxx').getFromModel().setValue('XXX');
  • 2.区间类型的默认值赋值 ---> 后面的值使用viewmodel.get('xxx').getToModel().setValue('XXX')的方式处理;
  • 3.设置单据是否自动搜索 ---> viewModel.getParams().autoLoad = true;
  • 4.设置编辑态查询区是否联动 ----> viewModel.getParams().designSolutionExtend = true;
viewmodel.on('afterInit', function(){
  //模型初始化之后,此时页面模型以及完成初始化并绑定组件,此时可以对模型进行业务处理,
  //处理结果会带到页面组件上
})
  • 3、beforeSearch 组件渲染完成,查询数据之前的钩子
viewmodel.on('beforeSearch', function(condition){
  //搜索前,会把condition传递过去,可以做过滤操作
})
  • 4、afterResetClick 重置按钮点击之后会将当前方案重置为默认状态,并执行一次搜索,在本次搜索之前会触发一次
viewmodel.on('afterResetClick', function(){
  //查询区重置按钮点击后会重置当前方案为初始化状态,并做一次自动搜索

  //在这个钩子里返回false的话可以阻止后续的搜索动作(默认为true)
  return false;
})
  • 5、afterClearSaveCallBackCache(新增方案后会执行)
viewmodel.on('afterClearSaveCallBackCache', function(){
  //当对方案进行设置操作,且被设置对方案与当前方案相同时,因为会对当前方案进行更新,考虑性能问题
 // 减少模型的卸载挂载操作,所以此时不会调用afterInit钩子,如果有些业务逻辑需要处理,
//  可以补充监听这个钩子,进行afterInit一样的处理逻辑即可
})
  • 6、updateAdvanceModel (高级查询)通常情况下,我们使用的查询区可设置多个条件,条件之间以and进行拼接sql查询,但是在某种特定的业务场景下无法满足or与and的混合场景,所以我们需要配置updateAdvanceModel高级查询模块
viewmodel.on('updateAdvanceModel', function(AdvanceModel){
  //配置了高级查询特有的钩子,可以对高级查询模型的数据进行修改
})
//配置路径:https://gpgy5k.yuque.com/docs/share/f83fbb58-0139-491f-8350-b9bbd3c26844?#

四、常见场景汇总

1、调整查询区展示行数

function (event) {
  var viewModel = this;
  //页面DOM加载完成
  viewModel.on('afterMount', function() {
      //通过filterRows字段控制查询区显示行数
      viewModel.getCache('FilterViewModel').getParams().filterRows = 2;
  })
}

2、赋予查询区面板字段初始值

function (event) {
  var viewModel = this;
  //页面DOM加载完成
  viewModel.on('afterMount', function(){
        let {oid, oSupplierId, oSupplierName} = viewModel.getParams();
        // 获取查询区模型
        const filtervm = viewModel.getCache('FilterViewModel'); 
        //查询区模型DOM初始化后
        filtervm.on('afterInit', function () {
          //赋予查询区字段初始值
          filtervm.get('gongyingshang').getFromModel().setValue(oSupplierId);
        });
  });
}

3、函数内通过代码触发搜索操作

function (event) {
  var viewModel = this;
  //页面DOM加载完成
  viewModel.on('afterMount', function(){
        // 获取查询区模型
        const filtervm = viewModel.getCache('FilterViewModel'); 
        //获取搜索模型后,使用fireEvent方法触发搜索模型上的点击事件
        filtervm.get('search').fireEvent('click');
  });
}

4、函数内通过代码触发重置操作

  • 重置操作触发后,默认会将当前方案内的所有数据还原到方案初始状态,并且会做一次搜索操作;
  • 如果重置的时候不想做搜索操作,可以通过执行重置click的时候,传递参数{disabledSearch:true};
  • 如果不是函数内代码触发的重置,在物理点击重置的时候,阻止搜索动作,可以通过监听FilterViewModel的afterResetClick事件,并且return false 即可;
function (event) {
  var viewModel = this;
  //页面DOM加载完成
  viewModel.on('afterMount', function(){
        // 获取查询区模型
        const filtervm = viewModel.getCache('FilterViewModel'); 
        //获取搜索模型后,使用fireEvent方法触发重置模型上的点击事件,并自动搜索
        filtervm.get('reset').fireEvent('click');
        //获取搜索模型后,使用fireEvent方法触发重置模型上的点击事件,取消默默查询动作
        filtervm.get('reset').fireEvent('click',{disabledSearch:true});
  });
}

5、查询区的隐藏与显示

  • 1、需要把隐藏的字段几种放到组件group中(group相当于div块);
  • 2、控制显示隐藏,用到group组件内部订阅的updateViewMeta事件;
  • 参数code为设计器里面group组件的cGroupCode属性;
function (event) {
  var viewModel = this;
  //查询区的隐藏
  viewModel.execute('updateViewMeta', { code: 'form28131mc', visible: false });
}

五、条件过滤查询

方法一、查询年龄为20的所有的数据(图一为效果图)

//  itemName:'age', 为字段名     value1:20 值为20  (筛选年龄为20的数据)
//  op:"操作字段" op的值:eq代表等于  neq代表不等于  gt代表大于  lt代表小于  
    between代表区间   like代表介于
    in代表包含  nin代表不包含  rightlike代表右介于  leftlike代表左介于   egt代表大于等于   elt代表小于等于  
    is_null代表为空   is_not_null代表非空  
      commonVOs.push({
          itemName:'age',
          op:'eq || neq || gt || lt  || egt || elt ||between ||like || in || nin || rightlike ||leftlike || is_null || is_not_null ',
          value1:20,
        });

  function (event) {
  var viewModel = this;
  viewModel.on('beforeSearch',function(args){
        args.isExtend = true;
        commonVOs = args.params.condition.commonVOs;
        commonVOs.push({
          itemName:'age',
          op:'eq',
          value1:20,
        });
  });
}

undefined

图一

注意事项:如果使用commonVOs的话,设计器里比较符必须与之同步(如图2)

undefined

图二

undefined

图三

方法二、查询性别为男的所有数据(图四为效果图)

    /*
    itemName:'sex', 为字段名     value1:"男" 值为男  (筛选性别为男的数据)
    op:"操作字段" op的值:eq代表等于  neq代表不等于  gt代表大于  lt代表小于  between代表区间  like代表介于  in代表包含  nin代表不包含
    leftlike代表开始以(左介于)  rightlike代表结束以(右介于)   egt代表大于等于   elt代表小于等于  这些一般都是用于数值的
    is_null代表为空   is_not_null代表非空  
  */
      args.params.condition.simpleVOs =[{
              field: 'sex',
              op: 'eq || neq || gt || lt  || egt || elt ||between ||like || in || nin || rightlike ||leftlike || is_null || is_not_null',
              value1: "男"
        }];

        between区间取值特殊(区间一般就是范围内,我们举一个例子,筛选年龄为20-26之间的人数,value1理解为最小值,value2理解为最大值)
         args.params.condition.simpleVOs =[{
              field: 'age',
              op: 'between',
              value1: 20,
              value2: 26
        }];

function (event) {
  var viewModel = this;

    viewModel.on('beforeSearch', function (args) {

            //字段sex等于男的数据进行查询
        args.params.condition.simpleVOs =[{
              field: 'sex',
              op: 'eq',
              value1: "男"
        }];
        //等同于 args.params.condition.commonVOs = [{"itemName":"schemeName","value1":"默认方案"},{"itemName":"isDefault","value1":true},{"value1":"20","itemName":"age"}]

      });

    //如果同时过滤多个数据下发如下:
    viewModel.on('beforeSearch', function (args) {
       console.log(args),
       //筛选字段sex为男,并且age为20的人选
        args.params.condition.simpleVOs =[
             {
               field: 'sex',
               op: 'eq',
               value1: '男'
             },
             {
               field: 'age',
               op: 'eq',
               value1: '20'
             }
         ];
        });

undefined

图四

Copyright © 用友 -【生态技术部】 2021 all right reserved,powered by Gitbook修订时间: 2021-09-29 17:44:21

results matching ""

    No results matching ""