# 條件篩選組件
* * *
用于列表頁面中條件的篩選。
### 基本用法
#### 1.概述
條件篩選組件分為快速篩選和高級篩選兩種，選擇好需要篩選的條件，點擊`篩選`即可進行篩選，點擊`重置`可將剛才選擇好的篩選條件清空，點擊`>>`后，在快速篩選和高級篩選之間切換。
#### 2.快速篩選和高級篩選
快速篩選和高級篩選可以進行7種類型的篩選字段,分別為文本,數字,單選框/下拉框,日期/日期時間,組織,圖片枚舉/圖片下拉,復選框。 文本,數字之間在輸入框輸入對應的條件;單選框/下拉框,圖片枚舉/圖片下拉，復選框通過點擊輸入框，在彈出的列表中選擇;日期/日期時間，組織會調用相關的V5控件選擇;其中圖片枚舉/圖片下拉在快速篩選中為多選，高級篩選為單選。 高級篩選有選擇括號、邏輯關系和集合關系的選項;快速篩選沒有，是按照默認的選項傳遞到search事件。
~~~html
<script>
export default{
data () {
return {
//示例：部分類型篩選字段
filterFields:
[
{
"enums":[],
"aliasTableName":"formmain_1913_0",
"defaultValue":{},
"display":"復選2復選2",
"name":"field3014",
"inputType":"checkbox",
"fieldType":"VARCHAR",
"tableName":"formmain_1913"
},
{
"enums" : [ ],
"aliasTableName" : "formmain_0016",
"defaultValue" : {
"showValue" : "開發",
"showValue2" : "開發",
"value" :{
"Member|261808748185796717,Member|4718179216211725653," +
"Member|-6452904596450358682,Member|3030772480077482176," +
"Member|6474707622226251493,Member|-2760468557162788733"
},
"display" : "選多人1",
"name" : "field0013",
"inputType" : "multimember",
"fieldType" : "VARCHAR",
"tableName" : "formmain_0016"
},
{
"aliasTableName": "formmain_0014_0",
"enumId": "0",
"inputType": "text",
"name": "field000111",
"fieldType": "DECIMAL",
"category": "cap4biz",
"properties": {},
"display": "數字2",
"tableName": "formmain_0014"
},
{
"enums" : [ {
"showValue" : "本日",
"enumValue" : "date_today",
"id" : "date_today"
},{
"showValue" : "本月",
"enumValue" : "date_thisMonth",
"id" : "date_thisMonth"
},{
"showValue" : "上月",
"enumValue" : "date_preMonth",
"id" : "date_preMonth"
},{
"showValue" : "本周",
"enumValue" : "date_thisWeek",
"id" : "date_thisWeek"
}, {
"showValue" : "本季度",
"enumValue" : "date_thisSeason",
"id" : "date_thisSeason"
},{
"showValue" : "本年",
"enumValue" : "date_thisyear",
"id" : "date_thisyear"
},{
"showValue" : "昨日",
"enumValue" : "date_yesterday",
"id" : "date_yesterday"
},{
"showValue" : "明日",
"enumValue" : "date_tomorrow",
"id" : "date_tomorrow"
},{
"showValue" : "下月",
"enumValue" : "date_nextMonth",
"id" : "date_nextMonth"
},{
"showValue" : "上周",
"enumValue" : "date_preWeek",
"id" : "date_preWeek"
},{
"showValue" : "下周",
"enumValue" : "date_nextWeek",
"id" : "date_nextWeek"
},{
"showValue" : "去年",
"enumValue" : "date_lastyear",
"id" : "date_lastyear"
}, {
"showValue" : "明年",
"enumValue" : "date_nextyear",
"id" : "date_nextyear"
} ,{
"showValue" : "上季度",
"enumValue" : "date_preSeason",
"id" : "date_preSeason"
}, {
"showValue" : "下季度",
"enumValue" : "date_nextSeason",
"id" : "date_nextSeason"
},{
"showValue" : "111dfssssss1111",
"enumValue" : "2018-03-16 10:54|2018-03-23 10:54",
"startTime" : "2018-03-16 10:54",
"id" : "2018-03-16 10:54|2018-03-23 10:54",
"endTime" : "2018-03-23 10:54"
} ],
"defaultValue":{
"showValue":"上季度",
"showValue2":"date_preSeason",
"value":"date_preSeason"
},
"aliasTableName": "formmain_0014_0",
"enumId": "0",
"inputType": "datetime",
"name": "field0007",
"fieldType": "TIMESTAMP",
"category": "cap4biz",
"properties": {},
"dateValue":{
"startDate":'',
"endDate":'',
},
"display": "日期1時間",
"tableName": "formmain_0014"
},
{
"aliasTableName": "formmain_0015_0",
"enumId": "0",
"inputType": "text",
"name": "field0205",
"fieldType": "VARCHAR",
"category": "cap4biz",
"properties": {},
"display": "文本2",
"defaultValue":{
"showValue":"手動默認值設置",
"showValue2":"手動默認值設置",
"value":"手動默認值設置"
},
"tableName": "formmain_0015"
},
]
}
}
},
methods: {
getCalendar(params,callback,callback2){
$.calendar({
displayArea:params.id,
returnValue: true,
date:new Date(),
autoShow:true,
minuteStep:1,
ifFormat:params.type==='date'?"%Y-%m-%d":"%Y-%m-%d %H:%M",
daFormat:params.type==='date'?"%Y-%m-%d":"%Y-%m-%d %H:%M",
showsTime:params.type==='date'?false:true,
isClear:true,
onUpdate:function (v) {
callback&&callback(v);
},
onClear:function () {
callback2&&callback2('');
}
});
},
getOrganize(params,callback){
let panels;
let selectType;
let maxSize;
switch (params.type) {
case 'member':
panels = 'Department,Team,Post,Outworker,Level';
selectType = 'Member';
maxSize = '1';
break;
case 'multimember':
panels = 'Department,Team,Post,Outworker,Level';
selectType = 'Member';
maxSize = '-1';
break;
case 'post':
panels = selectType = 'Post';
maxSize = '1';
break;
case 'multipost':
panels = selectType = 'Post';
maxSize = '-1';
break;
case 'department':
panels = selectType = 'Department';
maxSize = '1';
break;
case 'multidepartment':
panels = selectType = 'Department';
maxSize = '-1';
break;
case 'account':
panels = selectType = 'Account';
maxSize = '1';
break;
case 'multiaccount':
panels = selectType = 'Account';
maxSize = '-1';
break;
case 'level':
panels = selectType = 'Level';
maxSize = '1';
break;
case 'multilevel':
panels = selectType = 'Level';
maxSize = '-1';
break;
default:
break;
}
let filbackData = '';
if (params.value) {
params.value.split(',').forEach(v => {
if (v) {
if (filbackData !== '') {
filbackData += ',';
}
filbackData += `${selectType}|${v.split('|')[0]}`;
}
});
}
console.log(filbackData);
window.top.$.selectPeople({
panels,
selectType,
maxSize,
minSize : 0,
isAllowContainsChildDept : true,
params : {
text : '請選擇',
value : filbackData
},
callback : ret => {
const result = ret.obj;
let ids = '';
let value = '';
result.forEach(v => {
if (value !== '') {
value += ',';
}
value += `${v.id}|${v.name}`;
if (ids !== '') {
ids += ',';
}
ids += `${v.id}`;
});
params.value = value;
params.valueId = ids;
callback&&callback({
value:ret.value,
valueId:ids,
text:ret.text
});
}
});
},
resetFun() {
//doSth...
},
alert(str){
window.top.$.error(str);
},
sizeChangeFun() {
//doSth...
},
search(userConditions, strConditions) {
//doSth...
},
switchFilter(){
//doSth...
},
}
}
</script>
<cap4-condition
v-if="filterFields"
:filterFields="filterFields"
@search="search"
@getCalendar="getCalendar"
@reset="resetFun"
@alert="alert"
@sizeChange="sizeChangeFun"
@getOrganize="getOrganize"
@switchFilter="switchFilter"
>
~~~
### Attributes
| 參數 | 說明 | 類型 | 可選值 | 默認值 |
| --- | --- | --- | --- | --- |
| filterFields | 必選參數，后端返回的篩選字段 | array | — | \[ \] |
### Event
| 事件名稱 | 說明 | 回調參數 |
| --- | --- | --- |
| search | 點擊篩選按鈕后將觸發，返回篩選到的數據以便于向后端發送請求 | userConditions(返回的向后端請求的篩選數據), strConditions(前端顯示的篩選信息) |
| getCalendar | 選擇時間日期時調用V5日期組件 | params(傳入的日期詳細類型),callback(日期組件確定按鈕的回調),clearCallback(日期組件清除按鈕的回調) |
| reset | 點擊重置按鈕后將觸發 | — |
| alert | 調用V5消息提示 | alertMsg(需要提示的內容) |
| sizeChange | 當篩選組件的高度發生變化時調用 | — |
| getOrganize | 選擇組織后調用V5組織控件 | params(傳入的組織詳細類型),callback(組織控件確定按鈕的回調) |
| switchFilter | 點擊快速篩選和高級篩選的切換按鈕后觸發 | — |
- 概要
- 技術介紹
- 框架與環境
- vue開發
- 開發規范
- 前端開發規范
- 總體原則
- HTML規范
- HTML&css規范
- vue編碼規范
- Javascript規范
- 后端開發規范
- cap4
- 自定義控件
- 前端2.0(PC+移動)
- PC前端
- 后端
- 移動端
- 移動端接口
- 低版本協同升級到V5 8.0適配說明
- 自定義按鈕
- 自定義按鈕(無流程)
- 自定義控件(列表插槽)
- 自定義按鈕(篩選條件)
- 低版本協同升級到V5 8.0適配說明
- 門戶空間
- 門戶與欄目掛載
- 欄目開發及流程說明
- 頁面模板
- 客開通路及插件體系
- 表單設計器擴展配置
- 使用步驟
- 配置說明
- 事件API
- Demo示例
- 運行態客開通路
- 插件使用步驟
- 插件接口
- 事件接口
- 鉤子相關接口
- 表單操作接口
- Demo示例
- 插件機制
- 表單運行態接口(舊)
- 白名單插件
- 版本記錄
- vue組件庫
- 開發指南
- 開發文檔規范
- 業務組件介紹
- 業務組件
- table組件
- 分頁組件
- title組件
- 統計排隊組件
- code組件
- 條件篩選
- 批量導入
- 上傳Excel
- 批量更新
- 批量刷新
- UI組件
- 按鈕組件
- 復選組件
- 取色器組件
- 示例組件
- 水平選擇組件
- 選圖標組件
- 提示組件
- 單選組件
- 搜索組件
- 選擇組件
- 穿梭框組件
- 標簽組件
- 文本組件
- 樹組件
- 驗證組件
- 菜單組件
- iframe組件
- toolbar
- 統計組件
- 餅圖
- 柱狀圖
- 圖標
- 業務關系開發指南
- 自定義觸發
- 自定義關聯
- 后端API
- 更新表單數據緩存
- 發起表單流程
- 取得指定表單PDF或截圖
- 無流程批量添加
- 無流程批量刪除
- 無流程批量更新
- 無流程批量導出
- 客開培訓文檔
- Vue基礎培訓
- Vue實戰培訓
- Vue進階培訓
- VueCLI3培訓
- cap3
- 自定義控件
- 后端
- 移動端
- 前端編譯
- 表單運行態接口
- 協同云