EOS Low-Code Platform 8
学习指南
更新说明
初见EOS
专业代码开发手册
公共服务框架
常见问题

查询条件

用户可以根据自身需求，利用筛选区或高级事件来设定查询条件。筛选区提供了灵活的布局、样式及查询选项调整功能。此外，用户还可以通过编写代码来自定义高级事件，以实现特定的目标。

# 1 显示模式

查询条件设置好后，会显示在视图上方，当选择展开模式时，会将所有筛选项

按顺序展开显示，可设置选项前的标签宽度。设置好条件后点击按钮进行搜索或重置。

效果展示

add1

极简模式下则会隐藏筛选项的标签，不再提供独立按钮，点击输入框内的图表进行搜索。

# 1.1 极简模式

add1

聚合模式是将筛选项集成到一个下拉框中，可设置默认的搜索字段进行快速搜索，可设置

# 1.2 聚合模式

add1

展开前的输入提示。可以对继承后的下拉框的宽度进行设置，宽度支持像素或百分比。

# 2 筛选条件

add1

新增筛选条件时，可选择默认条件或自定义条件，默认条件直接从当前显示字段中选择，

自定义条件需要自行选择表单内字段。默认条件将延续显示时设置好的控件类型进行展示，

自定义条件需自行设置使用的控件类型。各个条件之间的关系默认为 “并且（&&）” 关系

可手动切换为“或者（||）”关系。各条件设置完成后可通过拖拽进行排序。

使用筛选高级用法、动态更改筛选条件、自定义更加复杂的模板事件，处理复杂场景的筛选逻辑。

# 2.1 添加查询条件

在视图设置-快速筛选进行查询条件配置

# 2.2 添加查询字段

点击添加筛选条件，选择筛选字段

# 2.3 自定义查询条件

当查询条件不满足需求时，可使用自定义查询条件

img-view-config01

可配置组件如下：

  1. 文本框
  2. 下拉选择器
  3. 多选框
  4. 单选框
  5. 日期范围
  6. 人员选择器
  7. 组织选择器

配置方式同组件一致

img-view-config02

数据格式:

根据查询条件进行设置。使用in,not in进行筛选查询，使用单选格式。使用contains,not contains进行筛选查询时，使用多选格式。

# 2.4 查询条件关系配置

存在多个查询条件时，可设置查询条件关系，默认查询关系为并且。

img-view-config04

# 2.5 默认值

点击默认值设置，打开默认值窗口赋值，默认值可选择常量，字段，变量等，也可以自行设置表达式

通过函数计算等方式获得动态的默认值。

# 2.6 显示设置

筛选条件默认为开放读写，可以在显示栏中调整为只读或隐藏。可单独调整每个筛选条件，在 整体筛选模块中的宽度占比

效果展示

add1

# 3 高开模式

高级模式下，筛选条件会转换到代码中，可在左侧编辑器内，查找“condition”对象，

查看设置好的筛选条件所对应的代码

做个性化查询场景开发时，可将查询条件可以转换为⾼开模式。

img-view-config05

转换为高开模式后页面如下

# 3.1 阻止默认查询

启用高开模式时,可以在【视图设置>高级设置>事件>视图查询前】中编写return false来阻止默认查询

# 4 左侧导航

开启左侧导航选项，设置导航标题及关联字段，默认导航宽度为1/2，可单独设置宽度占比。

只有具有datasource属性的字段可以配置侧边树，例如人员，员工，树形下拉 等下拉组件

若开启“以选中列表作为默认值”，则点击左侧导航后会根据点击内容刷新右侧视图

# 4.1 下拉结构

add1

# 4.2 树形结构

add1

# 5 高级查询

通过事件设置查询条件，一般可在视图查询前，或按钮点击时调用

# 5.1 条件查询

查询指定条件时，向”finalCondition.add.items“中添加条件，

items为数组，查询出”reviewerId“字段等于1的数据，如下图所示：

add1

”propertyName“为需要查询的字段名称，对应表单中的字段名

”propertyValue“为需要查询的字段值

”op“为字段名与字段值的关系，如”大于“，”等于“，”小于“等等，op值可参考下表：

值名称 说明
= 等于
!= 不等于
<> 不等于
> 大于
< 小于
>= 大于等于
<= 小于等于
like 模糊匹配，支持%like、like%、%like%
contains 包含
not contains 不包含
between 介于，此时条件对象中值设置要使用'maxValue'与'minValue'
not between 不介于
null 为空，此时value值赋值字符串null即可
notnull 不为空，此时value值赋值字符串notnull即可

# 5.2 非空查询

非空查询时，如下图所示

add1

"this.condition"是查询对象，该示例中”name“为字段名称

非空查询时，字段值和字段关系均设置为”NOTNULL“

则该示例意为：查询出”name“字段不为空的数据

# 5.3 查询校验

# 5.3.1 js设置弹窗校验

在【视图设置>高级设置>事件>视图查询前】配置如下：

代码如下

// 按照实际需要修改代码

if(!this.condition.examNumber.value && !this.condition.name.value){
  alert("请填写考号或学生姓名！")
  // 终止查询
  this.loading = false
  return false
}

展示效果如下

# 5.3.1 【表单/视图】组合校验

使用表单嵌套视图的方式实现校验，具体操作如下：

在表单中添加查询条件及按钮，并使用资源容器嵌入视图

资源容器配置如下

查询条件校验配置如下

查询按钮配置如下

点击事件代码如下

this.$nextTick(() => {
  // 执行校验
  this.$refs['pmForm'].validate((valid) => {
    if (valid) {
      this.Api.getFrameAsync('id').then(el => {
        el.Api.doQuery()
      })
    }
  })
})

展示效果如下

# 5.3.1 js设置提示校验

仅适用于PC端，具体操作在【视图设置>高级设置>事件>视图查询前】，配置如下：

代码如下

// 按照实际需要修改代码

// 设置校验
this.$refs['query_form'].fields.forEach(item=>{
  if(item._props.prop==='examNumber.value'){
    item._props.rules={
      message: "考号不能为空",
      required: true,
      trigger: "blur"
    }
  }else if(item._props.prop==='name.value'){
    item._props.rules={
      message: "学生姓名不能为空",
      required: true,
      trigger: "blur"
    }
  }
})

// 执行校验
this.$refs['query_form'].validate((valid) => {
  if (valid) {
    // alert('submit!');
  } else {
    // console.log('error submit!!');
    this.loading = false
  }
})
// 终止查询
if(!this.loading){
   return false
}

展示效果如下

← 高级排序 →