# 条件筛选组件
用于列表页面中条件的筛选。
# 基本用法
# 1.概述
条件筛选组件分为快速筛选和高级筛选两种，选择好需要筛选的条件，点击筛选即可进行筛选，点击重置可将刚才选择好的筛选条件清空，点击>>后，在快速筛选和高级筛选之间切换。
# 2.快速筛选和高级筛选
快速筛选和高级筛选可以进行7种类型的筛选字段,分别为文本,数字,单选框/下拉框,日期/日期时间,组织,图片枚举/图片下拉,复选框。 文本,数字之间在输入框输入对应的条件;单选框/下拉框,图片枚举/图片下拉，复选框通过点击输入框，在弹出的列表中选择;日期/日期时间，组织会调用相关的V5控件选择;其中图片枚举/图片下拉在快速筛选中为多选，高级筛选为单选。 高级筛选有选择括号、逻辑关系和集合关系的选项;快速筛选没有，是按照默认的选项传递到search事件。
<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 | 点击快速筛选和高级筛选的切换按钮后触发 | — |
编撰人：yinyanting
← (5) code组件 (7) 批量导入 →
