查询区

查询区概述

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

获取查询区模型

1、查询区的模型是目前所有模型里面比较特殊的，比较晦涩难懂一些，通过以下代码学习印象更深刻一些；
2、获取到真实模型以后，根绝获取的真实模型的模型类型，来确定模型支持哪些方法和事件，在进行下一步开发；

//查询前
viewModel.on('beforeSearch', function (data) {
    //1、获取查询区最外层查询区容器模型（查询区的生命周期函数都是通过此模型触发）
    let filterViewModelInfo = viewModel.getCache('FilterViewModel');
    //2、通过查询区容器模型，查找需要特色化需求修改的查询条件模型(注意：这里是查询条件模型，还不是此组件的真实模型)
    let filterModelInfo = filterViewModelInfo.get('new1');
    //3.1、获取真实模型（除区间类型的使用getFromModel）
    let realModelInfo = filterModelInfo.getFromModel();
    //3.2、获取真实模型 （比较符为between区间的使用getFromModel getToModel分别获取开始和结束模型， 比如日期区间)
    let beginModelInfo = filterModelInfo.getFromModel();
    let endModelInfo = filterModelInfo.getToModel();
    //4、获取到真实模型后，就可以使用模型原型上的方法和事件来进行特色化开发,结合以下图片理解
});

方法

getParams().filterRows

说明：调整查询区展示行数

参数:无

示例

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

setValue(value)

说明：赋予查询区面板字段初始值

参数:基本类型数据

示例

//页面DOM加载完成
viewModel.on('afterMount', function(){
    //获取查询区模型
    let filterViewModelInfo = viewModel.getCache('FilterViewModel');
    //赋予查询区字段初始值
    filterViewModelInfo.get('new1').getFromModel().setValue("123");
});

get('search').fireEvent('click')

说明:函数内通过代码触发搜索操作

参数:固定值

示例

//页面DOM加载完成
viewModel.on('afterMount', function(){
    // 获取查询区模型
    let filterViewModelInfo = viewModel.getCache('FilterViewModel');
    //提前赋予初始值，用来验证是否触发搜索
    filterViewModelInfo.get('new1').getFromModel().setValue("123");
    //获取搜索模型后，使用fireEvent方法触发搜索模型上的点击事件
    filterViewModelInfo.get('search').fireEvent('click');
});

get('reset').fireEvent('click');

说明:函数内通过代码触发重置操作

参数:固定值

示例

//页面DOM加载完成
viewModel.on('afterMount', function(){
    // 获取查询区模型
    let filterViewModelInfo = viewModel.getCache('FilterViewModel'); 
    //获取搜索模型后，使用fireEvent方法触发重置模型上的点击事件，并自动搜索
    filterViewModelInfo.get('reset').fireEvent('click');
    //获取搜索模型后，使用fireEvent方法触发重置模型上的点击事件,取消默默查询动作
    filterViewModelInfo.get('reset').fireEvent('click',{disabledSearch:true});
});

事件

afterInit

说明：我们一般在afterInit里处理一些查询条件的挂载事件或者其他事件，afterInit的执行时机在查询脚本加载之后且组件渲染以后，第一次搜索之前

//页面DOM加载完成
viewModel.on('afterMount', function (data) {
    let filterViewModelInfo = viewModel.getCache('FilterViewModel');
    //查询区afterInit事件，必须放在页面模型的afterMount事件中才生效
    filterViewModelInfo.on('afterInit', function(data){
        let filterModelInfo = filterViewModelInfo.get('new1');
        let realModelInfo = filterModelInfo.getFromModel();
        realModelInfo.setValue('123');//默认值赋值
    })
});

afterResetClick

说明：点击重置按钮之后会将当前方案重置为默认状态，并执行一次搜索，在本次搜索之前会触发一次

//查询前
viewModel.on('beforeSearch', function (data) {
    let filterViewModelInfo = viewModel.getCache('FilterViewModel');
    //查询区afterResetClick事件，放在页面模型的afterMount和beforeSearch事件中可以生效
    filterViewModelInfo.on('afterResetClick', function(data){
        let filterModelInfo = filterViewModelInfo.get('new1');
        let realModelInfo = filterModelInfo.getFromModel();
        realModelInfo.setValue('123');
        //在这个钩子里返回false的话可以阻止后续的搜索动作(默认为true)
        return false;
    })
});

查询区api

查询区