返回介绍

124.JSuperQuery高级查询组件

发布于 2020-09-14 22:20:38 字数 3868 浏览 1117 评论 0 收藏 0

参数配置

参数类型必填说明
fieldListarray需要查询的列集合示例如下,type类型有:date/datetime/string/int/number
callbackarray回调函数名称(非必须)默认handleSuperQuery

fieldList结构示例:

  const superQueryFieldList=[{
    type:"date",
    value:"birthday",
    text:"生日"
  },{
    type:"string",
    value:"name",
    text:"用户名"
  },{
    type:"int",
    value:"age",
    text:"年龄"
  }]

页面代码概述:

1.import之后再components之内声明

import JSuperQuery from '@/components/jeecg/JSuperQuery.vue';
  export default {
    name: "JeecgDemoList",
    components: {
      JSuperQuery
    },

2.页面引用

  <!-- 高级查询区域 -->
  <j-super-query :fieldList="fieldList" ref="superQueryModal" @handleSuperQuery="handleSuperQuery"></j-super-query>

3.list页面data中需要定义三个属性:

  fieldList:superQueryFieldList,
  superQueryFlag:false,
  superQueryParams:""

4.list页面声明回调事件handleSuperQuery(与组件的callback对应即可)

//高级查询方法
handleSuperQuery(arg) {
  if(!arg){
    this.superQueryParams=''
    this.superQueryFlag = false
  }else{
    this.superQueryFlag = true
    this.superQueryParams=JSON.stringify(arg)
  }
  this.loadData()
},

5.改造list页面方法

  // 获取查询条件
  getQueryParams() {
    let sqp = {}
    if(this.superQueryParams){
      sqp['superQueryParams']=encodeURI(this.superQueryParams)
    }
    var param = Object.assign(sqp, this.queryParam, this.isorter);
    param.field = this.getQueryField();
    param.pageNo = this.ipagination.current;
    param.pageSize = this.ipagination.pageSize;
    return filterObj(param);
  },

附录:

下拉字典配置——自定义

{ type: 'select', value: 'isDbSynch', text: '同步状态', options: [
    {label: "已同步",value: "Y"},
    {label: "未同步",value: "N"}
  ]},

下拉字典配置——通过字典表

{ type: 'select', value: 'formCategory', text: '表单分类', dictCode: 'ol_form_biz_type' },

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文