# JSuperQuery高級查詢 使用文檔
## 參數配置
| 參數 | 類型 | 必填 | 說明 |
| --- | --- | --- | --- |
| fieldList | array | ? | 需要查詢的列集合示例如下，type類型有:date/datetime/string/int/number |
| callback | array | | 回調函數名稱(非必須)默認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' },
~~~
