ngds/frontendEle/src/components/FilteTransfer.vue

<template>
  <div class="filter-transfer">
    <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 :class="`filter-item filter-user-name`">
      <el-select v-model="filterModel.outWallet" placeholder="Select transfer out of account"> <!-- 请选择转出账户 -->
        <el-option v-for="(item,key) in walletType" :label="item.label" :value="item.type"
                   :key="key"></el-option>
      </el-select>
    </div>
    <div v-show="userNameDisplay" :class="`filter-item filter-user-name ${userNameClass}`">
      <el-input v-model="filterModel.userName" placeholder="Enter your receiving member code"></el-input> <!-- 请输入接收会员编号 -->
    </div>
    <div v-show="realNameDisplay" :class="`filter-item filter-real-name ${realNameClass}`">
      <el-input v-model="filterModel.realName" placeholder="Enter the name of receiving member"></el-input> <!-- 请输入接收会员姓名 -->
    </div>
    <div :class="`filter-item filter-user-name`">
      <el-select v-model="filterModel.inWallet" placeholder="Select transfer in account"> <!-- 请选择转入账户 -->
        <el-option v-for="(item,key) in walletType" :label="item.label" :value="item.type"
                   :key="key"></el-option>
      </el-select>
    </div>

    <el-button class="filter-item filter-filter-btn" type="primary" @click="handleFilterTransfer">Select</el-button>
  </div>
</template>

<script>
const hiddenClass = 'filter-hidden'
export default {
  name: 'filter-transfer',
  mounted () {
    this.filterModel.dateRange = this.dateRangePickerDefault
    this.filterModel.inWallet = this.inWalletDefault
    this.filterModel.outWallet = this.outWalletDefault
    this.filterModel.realName = this.realNameDefault
    this.filterModel.userName = this.userNameDefault
  },
  props: {
    dateRangePickerDisplay: {
      type: Boolean,
      default: true
    },
    realNameDisplay: {
      type: Boolean,
      default: true
    },
    userNameDisplay: {
      type: Boolean,
      default: true
    },
    dateRangePickerClass: {
      type: String,
      default: '',
    },
    realNameClass: {
      type: String,
      default: '',
    },
    userNameClass: {
      type: String,
      default: '',
    },
    requestPath: {
      type: String,
    },
    dateRangePickerDefault: {
      type: String,
      default: '',
    },
    inWalletDefault: {
      type: String,
      default: '',
    },
    outWalletDefault: {
      type: String,
      default: '',
    },
    realNameDefault: {
      type: String,
      default: '',
    },
    userNameDefault: {
      type: String,
      default: '',
    },
    filter: null,
  },
  data () {
    return {
      filterModel: {
        dateRange: '',
        outWallet: '',
        userName: '',
        realName: '',
        inWallet: '',
      },
      walletType: [
        {
          type: 'bonus',
          label: 'Bonus'
        },
        {
          type: 'cash',
          label: 'Ecoin'
        },
      ],
    }
  },
  watch: {
    dateRangePickerDefault () {
      this.filterModel.dateRange = this.dateRangePickerDefault
    },
    outWalletdefault () {
      this.filterModel.outWallet = this.outWalletDefault
    },
    userNameDefault () {
      this.filterModel.userName = this.userNameDefault
    },
    realNameDefault () {
      this.filterModel.realName = this.realNameDefault
    },
    inWalletDefault () {
      this.filterModel.inWallet = this.inWalletDefault
    },
  },
  methods: {
    handleFilterTransfer: function () {
      this.filter(this.filterModel)
    }
  }
}
</script>

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

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

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

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

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

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

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

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

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