SuperQuery 高级查询

SuperQuery用于自定义的列表的高级查询按钮。SuperQuery已全局注册，不需要单独引入了。

使用方式

一、表单JSON用法

{
  field: 'superQuery',
  component: 'Input',
  label: '高级查询',
  helpMessage: ['插槽模式'],
  slot: 'superQuery',
  colProps: { span: 12 },
},

二、原生用法

<super-query :config="superQueryConfig" @search="handleSuperQuery"/>
<!-- xxx省略其他代码 -->

<script lang="ts">

// 高级查询配置
const superQueryConfig = reactive({
  name:{ title: "名称", view: "text", type: "string", order: 1 },
  sex:{ title: "性别", view: "list", type: "string", enum: [{value: '1', title: '男'}, {value: '2', title: '女'}], order: 6 },
  subTable:{
    title: "子表", 
    view: "table",
    fields:{
      name:{ title: "名称2", view: "text", type: "string", order: 1 },
    }
  }
})
//执行查询
function handleSuperQuery(params) {
  Object.keys(params).map(k=>{
    queryParam[k] = params[k]
  });
  searchQuery();
}
//xxx省略其他代码
</script>

三、自定义存储保存的查询条件数据

<super-query :config="superQueryConfig" @search="handleSuperQuery" :isCustomSave="true" :saveSearchData="saveSearchData" :save="handleSuperQuerySave"/>

<script lang="ts">
    const superQueryConfig = {
        name:{ title: "名称", view: "text", type: "string", order: 1 },
        birthday:{ title: "生日", view: "date", type: "string", order: 2 },
        age:{ title: "年龄", view: "number", type: "number", order: 4 },
        sex:{ title: "性别", view: "list", type: "string", dictCode: "sex", order: 5 },
        bpmStatus:{ title: "流程状态", view: "list_multi", type: "string",  dictCode: "bpm_status", order: 6 },
      }
      function handleSuperQuery(value, model, field){
        if(value){
          let str = decodeURI(value.superQueryParams)
          console.log(str)
        }
      }
      const saveSearchData = ref([
        {
          content: '[{"field":"age","rule":"eq","val":14}]',
          title: '豆蔻年华',
          type: 'and',
        },
        {
          content: '[{"field":"name","rule":"eq","val":"张三"}]',
          title: '项目经理',
          type: 'and',
        },
      ]);
      const handleSuperQuerySave = (data) => {
        // 高级查询保存后的信息
        return new Promise<void>((resolve, reject) => {
          // 模拟接口
          setTimeout(() => {
            if (Math.random() > 0.5) {
              console.log('接口成功~');
              saveSearchData.value = data;
              resolve();
            } else {
              console.log('接口失败~');
              reject();
            }
          }, 1e3);
        });
      }
</script>

配置说明

参数	是否必填	类型	描述
config	是	Object	参考下面superQueryConfig 配置
search	否	事件
isCustomSave	否	Boolean	是否自己实现存储保存的查询条件数据 （默认：false。v3.6.4+）
saveSearchData	否	Array	保存的查询条件数据（当isCustomSave为true时，必填。v3.6.4+）
save	否	Function	当查询条件保存和删除时会执行该函数（当isCustomSave为true时，必填。该函数内需要返回一个Promise对象。v3.6.4+）

1.superQueryConfig 配置

语法： 字段名：{字段配置信息}

属性	描述
title	标题 /字段描述
view	字段展示类型
type	字段数据类型，日期时间的传string
order	字段顺序
其他配置参考以下示例

2.配置示例

• 文本框： name:{ title: "名称", view: "text", type: "string", order: 1 }

• 下拉框(只能传enum)：

  sex:{ title: "性别", view: "list", type: "string", enum: [{value: '1', title: '男'},{value: '2', title: '女'}], order: 2 },

• 下拉多选框(可以设置数据字典，也可以配置表 )：

  sports:{ title: "下拉多选", view: "list_multi", type: "string",dictCode: "sports", order: 3 },

  dictTable: "sys_user", dictCode: "username", dictText: "realname", order: 3 },userSelect:{ title: "下拉多选2", view: "list_multi", type: "string",`

• 下拉搜索框(只能配置表)：

  userSearch:{ title: "下拉搜索", view: "sel_search", type: "string", dictTable: "sys_user", dictCode: "username", dictText: "realname", order: 4 },

• 日期框： birthday:{ title: "生日", view: "date", type: "string", order: 5 },

• 时间框： createTime:{ title: "创建时间", view: "datetime", type: "string", order: 6 },

• 数字框： age:{ title: "年龄", view: "number", type: "number", order: 7 },

• 分类树： catTree: { title: '分类树', order: 16, view: 'cat_tree', type: 'string', pcode: 'B01' },

• 自定义树：

   customTree: { title: '自定义树', order: 15, view: 'sel_tree', type: 'string', dict: 't_tree,name,id', pidValue: '0' },

• 用户选择： userSelect2:{ title: "选择用户", view: "sel_user", type: "string", order: 9 },
• 部门选择： departSelect:{ title: "选择部门", view: "sel_depart", type: "string", order: 10 },
• 省市区： pca:{ title: "省市区", view: "pca", type: "string", order: 12 },
• popup弹窗：

  popup:{ title: "popup", view: "popup", type: "string", order: 11, code: "report_user", destFields: "popup",   orgFields: "realname", popupMulti: true },
• popup_dict字典：

  popup_dict:{ title: "popup字典", view: "popup_dict", type: "string", order: 12, code: "report_user", destFields: "realname",   orgFields: "username" },

3.从表字段配置说明：

从表名：{
title: "表描述",
view: "table",
  fields:{
      字段配置
    }
}
如：
subTable:{
    title: "子表", 
    view: "table",
    fields:{
      name:{ title: "名称2", view: "text", type: "string", order: 1 },
    }
  }

4.查询触发传值

• 如果是单表：field只传递字段名
• 如果有从表，field会传递从表名,字段名
• 此处仅前端实现了从表的逻辑，后台默认不处理从表的信息，需要用户自行处理。

如果界面查询无效果，那应该是后端报错了，请检查字段配置是否正确。