ngds/frontendEle/src/components/Filter.vue

<template>
  <div class="leo-filter">
    <div v-show="dateRangePickerDisplay" :class="`filter-item filter-date-range-picker ${dateRangePickerClass}`">
      <el-date-picker
        v-model="filterModel.dateRange"
        format="yyyy-MM-dd"
        type="daterange"
        :editable="false"
        range-separator="to"
        start-placeholder="Start date"
        end-placeholder="End date">
      </el-date-picker>
    </div>
    <div v-show="dateMonthPickerDisplay" :class="`filter-item filter-date-month-picker ${dateMonthPickerClass}`">
      <el-date-picker
        v-model="filterModel.yearMonth"
        format="yyyy-MM"
        value-format="yyyyMM"
        type="month"
        :editable="false"
        placeholder="Date"><!-- 选择结算月 -->
      </el-date-picker>
    </div>
    <div v-show="periodNumDisplay" :class="`filter-item filter-period-num ${periodNumClass}`">
      <el-input v-model="filterModel.periodNum" placeholder="请输入期数"></el-input>
    </div>
    <div v-show="adminNameDisplay" :class="`filter-item filter-admin-name ${adminNameClass}`">
      <el-input v-model="filterModel.adminName" placeholder="请输入管理员名"></el-input>
    </div>
    <div v-show="userNameDisplay" :class="`filter-item filter-user-name ${userNameClass}`">
      <el-input v-model="filterModel.userName" placeholder="请输入会员编号"></el-input>
    </div>
    <el-button class="filter-item filter-filter-btn" type="primary" @click="handleFilter">Select</el-button><!-- 筛选 -->
  </div>
</template>

<script>
const hiddenClass = 'filter-hidden'
export default {
  name: 'leo-filter',
  mounted () {
    this.filterModel.dateRange = this.dateRangePickerDefault
    this.filterModel.yearMonth = this.dateMonthPickerDefault
    this.filterModel.periodNum = this.periodNumDefault
    this.filterModel.adminName = this.adminNameDefault
    this.filterModel.userName = this.userNameDefault
  },
  props: {
    dateRangePickerDisplay: {
      type: Boolean,
      default: true
    },
    dateMonthPickerDisplay: {
      type: Boolean,
      default: false
    },
    periodNumDisplay: {
      type: Boolean,
      default: false
    },
    adminNameDisplay: {
      type: Boolean,
      default: false
    },
    userNameDisplay: {
      type: Boolean,
      default: false
    },
    dateRangePickerClass: {
      type: String,
      default: '',
    },
    dateMonthPickerClass: {
      type: String,
      default: '',
    },
    periodNumClass: {
      type: String,
      default: '',
    },
    adminNameClass: {
      type: String,
      default: '',
    },
    userNameClass: {
      type: String,
      default: '',
    },
    requestPath: {
      type: String,
    },
    dateRangePickerDefault: {
      type: String,
      default: '',
    },
    dateMonthPickerDefault: {
      type: String,
      default: '',
    },
    periodNumDefault: {
      type: String,
      default: '',
    },
    adminNameDefault: {
      type: String,
      default: '',
    },
    userNameDefault: {
      type: String,
      default: '',
    },
    filter: null,
  },
  data () {
    return {
      filterModel: {
        dateRange: '',
        yearMonth: '',
        periodNum: '',
        adminName: '',
        userName: '',
      },
    }
  },
  watch: {
    dateRangePickerDefault () {
      this.filterModel.dateRange = this.dateRangePickerDefault
    },
    dateMonthPickerDefault () {
      this.filterModel.yearMonth = this.dateMonthPickerDefault
    },
    periodNumDefault () {
      this.filterModel.periodNum = this.periodNumDefault
    },
    adminNameDefault () {
      this.filterModel.adminName = this.adminNameDefault
    },
    userNameDefault () {
      this.filterModel.userName = this.userNameDefault
    },
  },
  methods: {
    handleFilter: function () {
      this.filter(this.filterModel)
    }
  }
}
</script>

<style scoped>
  .leo-filter {
    padding: 0 0 15px 0;
  }

  .leo-filter .filter-hidden {
    display: none;
  }

  .filter-item {
    margin-right: 10px;
  }

  @media (min-width: 768px) {
    .leo-filter {
    }

    .leo-filter .filter-item {
      display: inline-block;
      max-width: 200px;
    }

    .leo-filter .filter-item.filter-date-month-picker {
      display: inline-block;
      max-width: 220px;
    }

    .leo-filter .filter-item.filter-date-range-picker {
      display: inline-block;
      max-width: 380px;
    }

    .leo-filter .filter-item.filter-filter-btn {
      height: 38px;
      width: 80px;
    }

    .leo-filter .filter-hidden {
      display: none;
    }
  }
</style>