<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 HH:mm:ss" :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" :disabled="item.disabled" 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>