可视化自定义查询条件

依赖

Vue 2.6.10+、ElementUI 2.10.1+（具体为：Input、Cascader、CascaderPanel、Select、Option、Button、Icon组件）

特点：

1. 支持增加/删除条件、条件块，并设置连接关系；
2. 支持根据指标列所选指标动态扩展指标列；
3. 支持根据指标列所选指标动态设置条件行的比较值可选下拉/级联选项；
4. 支持获取当前设置的自定义查询条件；
5. 支持反显查询条件。

安装

npm install @thtf/vue-query

快速上手

// 安装组件
import CustomQuery from '@thtf/vue-query'

// 引用组件
export default {
  components: {
    CustomQuery
  }
}

// 使用组件
<custom-query
  ref="customQuery"
  :quotaList="quotaList"
  @conditionChange="conditionChange"
/>

属性/方法

1、quotaList 为第一指标列的下拉选项列表；
  格式：[
    {
      label: "",  // 显示值
      value: "", // 选项值，格式可为任意类型
      children:[ // 如果选项有级联下级，若无可省略
        {
          label: "",  // 显示值
          value: "", // 选项值，格式可为任意类型
        }
      ]
    }
  ]

2、@conditionChange 为指标列值发生变化时触发，返回：{context,value}
  context：当前条件行实例
  value：当前选择的指标值

3、新增指标列，context为指标值发生变化时触发方法返回的context
  context.addQuotaColumn([
    {
      label: "",  // 显示值
      value: "", // 选项值，格式可为任意类型
      children:[ // 如果选项有级联下级，若无可省略
        {
          label: "",  // 显示值
          value: "", // 选项值，格式可为任意类型
        }
      ]
    }
  ])

4、设置条件行比较值的下拉可选项，context为指标值发生变化时触发方法返回的context
  context.setCompareOptions([
    {
      label: "",  // 显示值
      value: "", // 选项值，格式可为任意类型
    }
  ],cascaderProps)

  cascaderProps参数可以设置级联下拉属性，具体参考文档最后链接


5、获取当前自定义查询条件
  this.$refs.customQuery.getCustomQuery()

  // 返回数据格式
  {
    connectRelation:"and", // 连接条件 and-且,or-或
    conditions:[
      {  // 条件行格式
        quota: "", // 条件行第一指标列值
        addQuotaArr: [ // 新增指标列数组
          {
            quotaValue:"", // 选择的指标值
            options:[  // 指标选项列表
              {
                label:"", // 显示值
                value:"",  // 下拉选项的值可为任意类型
                children:[ // 如果选项有级联下级，若无可省略
                  {
                    label: "",  // 显示值
                    value: "", // 选项值，格式可为任意类型
                  }
                ]
              }
            ]
          }
        ],
        condition1: "", // 比较条件
        condition2: "", // 截取时比较条件
        startIndex: "", // 从第几位开始截取
        sliceLength: "", // 截取长度
        startValue: "", // 区间起始值
        endValue: "", // 区间截止值
        compareValue: "", // 条件行需要比较的值
        compareSelectValue: [], // 条件行需要比较的值(级联选择的值)
        compareOptions: [ // 条件行需要比较的值的下拉可选项
          {
            label: "",  // 显示值
            value: "", // 选项值，格式可为任意类型
          }
        ]
      },
      { // 条件块格式
        connectRelation:"and",
        conditions:[
          {
            quota: "",
            addQuotaArr: [],
            condition1: "",
            condition2: "",
            startIndex: "",
            sliceLength: "",
            startValue: "",
            endValue: "",
            compareValue: "",
            compareSelectValue: [],
            compareOptions: []
          }
          ...
        ]
      }
      ...
    ]
  }

6、反显自定义查询条件  queryData格式同上`
  this.$refs.customQuery.setCustomQuery(queryData)
  
7、获取自定义查询条件的sql语句(仅限为where子句)
  this.$refs.customQuery.exportSql()

cascaderProps级联选择器属性，具体参考：Element Cascader级联选择器组件Props属性