# 条件筛选组件
* * *
用于列表页面中条件的筛选。
### 基本用法
#### 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
- 自定义控件
- 后端
- 移动端
- 前端编译
- 表单运行态接口
- 协同云