<template> <div class="page-filter"> <el-form inline :model="searchQuery" ref="searchQuery" :size="size"> <!-- <el-row :gutter="10"> --> <template v-for="item in getConfigList()"> <!-- <el-col v-for="item in getConfigList()" :key="item.label"> --> <el-form-item v-if="item.type !== 'button'" :prop="item.value" :key="item.label" :label="!item.hideLabel ? item.label : '' " :label-width="!item.hideLabel ? (item.labelWidth ? item.labelWidth : '80px') : '0px'" > <!--选择框--> <el-select v-if="item.type === 'select'" v-model="searchQuery[item.value]" :placeholder="getPlaceholder(item)" :clearable="item.clearable === false ? item.clearable : true" :filterable="item.filterable === false ? item.filterable : true" @change="handleEvent(item.event)"> <el-option v-for="(childItem, childIndex) in listTypeInfo[item.list]" :key="childIndex" :label="childItem.key" :value="childItem.value"> </el-option> </el-select> <!--级联选择框--> <el-cascader ref="elcascader" v-if="item.type === 'cascader'" :props="cascaderProps" :clearable="item.clearable === false ? item.clearable : true" @change="handleChange" :show-all-levels="false" v-model="searchQuery[item.value]" /> <!--输入框--> <el-input v-if="item.type === 'input'" :type="item.type" v-model.trim="searchQuery[item.value]" :placeholder="getPlaceholder(item)" :clearable="item.clearable === false ? item.clearable : true" @focus="handleEvent(item.event)"> </el-input> <!--日期选择框--> <el-date-picker v-if="item.type === 'date'" v-model="searchQuery[item.value]" value-format="yyyy-MM-dd" :picker-options="item.datePickerOptions ? (item.datePickerOptions === 'pickerOptionsStart' ? pickerOptionsStart : pickerOptionsEnd) : datePickerOptions" :type="item.dateType" :clearable="item.clearable === false ? item.clearable : true" :placeholder="getPlaceholder(item)" @focus="handleEvent(item.event)" /> </el-form-item> <template v-else> <el-form-item label-width="0px" :key="item.label"> <!--按钮--> <el-button :type="item.btType" :icon="item.icon" :size="item.size" v-has="item.has ? item.has : ''" @click="handleClick(item.event)"> {{ item.label }} </el-button> </el-form-item> </template> <!-- </el-col> --> <!-- </el-row> --> </template> </el-form> </div> </template> <script> export default{ name:'PageFilter', props:{ //相关列表 listTypeInfo:{ type:Object, default: ()=>{ return {} } }, //过滤器列表 filterList:{ type:Array, default: ()=>{ return [] } }, //表单尺寸 size:{ type: String, default: 'medium' }, //参数 query:{ type:Object, default: ()=>{ return {} } }, //label宽度 labelWidth:{ type:String, default: '80px' } }, data(){ return{ //时间相关设置 datePickerOptions: { disabledDate (time) { //大于当前的时间都不能选 (+十分钟让点击此刻的时候可以选择到当前时间) return time.getTime() > +new Date() + 1000 * 600 * 1 } }, pickerOptionsStart:{ //结束时间不能大于开始时间 disabledDate: time => { if(this.searchQuery.endDate){ return time.getTime() > new Date(this.searchQuery.endDate).getTime(); } } }, pickerOptionsEnd:{ disabledDate: time => { return time.getTime() < new Date(this.searchQuery.startDate).getTime(); } }, searchQuery:{}, flag:'inner', // 内 inner 外outside cascaderProps:{ checkStrictly:true, lazy:true } } }, watch:{ searchQuery:{ handler:function(val){ // 传入参数修改,不派发 if (this.flag === 'outside') { this.flag = 'inner' return } //修改传入进来的参数 this.$emit('update:query', { ...this.query, ...val }) }, deep:true }, query(val){ this.flag = 'outside' // 标识为传入参数修改 this.searchQuery = val }, }, mounted(){ this.initParams() setInterval(function() { NodeList.prototype.forEach = Array.prototype.forEach document.querySelectorAll(".el-cascader-node__label").forEach(el => { el.onclick = function() { if (this.previousElementSibling) this.previousElementSibling.click(); }; }); }, 1000); }, methods:{ //初始化过滤参数 initParams(){ const obj = {} for(const key in this.query){ // if(this.query[key]){ obj[key] = this.query[key] // } } this.searchQuery = obj }, //获取列表 getConfigList(){ return this.filterList.filter(item =>!item.hasOwnProperty('show')||(item.show&&item.hasOwnProperty('show'))) }, //获取placeholder显示 getPlaceholder(row){ let placeholder let type = row.type switch(type){ case 'input': case 'textarea': placeholder = `请输入${row.label}` break case 'select': case 'date': case 'time': case 'treeselect': placeholder = `请选择${row.label}` break default: placeholder = row.label } return placeholder }, //派发按钮点击事件 handleClick(event){ this.$emit('handleClick', event) }, //绑定相关事件 handleEvent(){ this.$emit('handleEvent', event) }, handleChange(val){ if(val){ this.searchQuery.user_dept = val[val.length-1] }else{ this.$delete(this.searchQuery,'user_dept') } } } } </script> <style lang="scss" scoped> /deep/ .el-cascader-panel{ .el-radio__inner{ border: 0px; } .el-radio__input.is-checked .el-radio__inner{ background:none; } .el-radio{ height: 100%; width: 150px; position: absolute; z-index: 10; } } /deep/ .el-icon-date:before{ color: #fff; } </style>