高级查询组件用法

高级查询组件在jeecg-vue3中虽是不开源，但已全局注册了，并不影响使用。 按照文档 SuperQuery高级查询 就可以在项目轻松使用了。

高级查询组件的使用方法：

// 方法一
<super-query :config="superQueryConfig" @search="handleSearch"></super-query>
const superQueryConfig = reactive({
  name: { title: '名称', view: 'text', type: 'string', order: 1 },
  sex: { title: '性别', view: 'list', type: 'string', dictCode: 'sex', order: 2 }
});
const handleSearch = (params) => {
  console.log(params); // 得到高级查询组件的条件，拼接到接口即可
};

// 方法二
<super-query ref="superQueryRef" @search="handleSearch"></super-query>
const superQueryRef = ref(null);
superQueryRef.value.init({
  name: { title: '名称', view: 'text', type: 'string', order: 1 },
  sex: { title: '性别', view: 'list', type: 'string', dictCode: 'sex', order: 2 }
});
const handleSearch = (params) => {
  console.log(params); // 得到高级查询组件的条件，拼接到接口即可
};

以jeecg-vue3中的 “单表示例” 页面为例：

我们想通过 高级查询组件 查询所有的字段：

1.通过接口（和后端沟通）获知所有字段及类型

2.根据得到的信息书写前端代码

<super-query :config="superQueryConfig" @search="handleSuperQuery" />

 const superQueryConfig = reactive({
    name: { title: '名称', view: 'text', type: 'string', order: 1 },
    keyWord: { title: '关键词', view: 'text', type: 'string', order: 2 },
    punchTime: { title: '打卡时间', view: 'datetime', type: 'string', order: 3 },
    keyWord: { title: '工资', view: 'text', type: 'number', order: 4 },
    salaryMoney: { title: '奖金', view: 'text', type: 'number', order: 5 },
    sex: { title: '性别', view: 'list', type: 'string', dictCode: 'sex', order: 6 },
    birthday: { title: '生日', view: 'date', type: 'string', order: 7 },
    email: { title: '邮箱', view: 'text', type: 'string', order: 8 },
    content: { title: '个人简介', view: 'text', type: 'string', order: 9 },
  });

  function handleSuperQuery(params) {
    Object.keys(params).map((k) => {
      // 得到高级查询组件的条件，拼接到接口
      queryParam[k] = params[k];
    });
    // 调用接口重新刷新表格数据
    searchQuery();
  }

属性	描述
title	字段描述（在高级查询组件下拉框中显示的label）
view	字段展示类型（根据这个渲染出组件的类型。text：文本框、list：下拉框、list_multi：下拉多选框等。更多参考 SuperQuery高级查询）
type	字段数据类型，日期时间的传string
order	字段顺序（在高级查询组件下拉框中字段显示的顺序）

3.最终效果