Gamebucket search UI

src/views/gambleGameBucket/index.vue

 <template>
 <div class="app-container calendar-list-container">
   <div class="app-container" v-show="visible">
+    <div class="app-container">
+      <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" placeholder="莊家" v-model="listQuery.name">
+      </el-input>
+      <el-date-picker
+        v-model="date"
+        type="datetimerange"
+        :picker-options="pickerOptions"
+        range-separator="至"
+        start-placeholder="開始日期"
+        end-placeholder="结束日期"
+        align="right">
+      </el-date-picker>
+      <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">搜尋</el-button>
+    </div>
     <el-table :data="list" v-loading.body="listLoading" element-loading-text="Loading" border fit highlight-current-row
       style="width: 100%">
       <el-table-column label="ID" align="center">
        <el-table-column align="center" label="操作">
         <template slot-scope="scope">
           <router-link to="/gambleGameBucket/index/detail">
-            <el-button type="primary" size="mini" @click="handlePage(scope.row)">查看</el-button>
+            <el-button type="primary" size="mini" @click="handlePage(scope.row)">查 看</el-button>
           </router-link>
         </template>
       </el-table-column>
 
 import { mapGetters, mapActions } from 'vuex'
 import { fetchList, fetchGameBid } from '@/api/gambleGameBucket'
+import waves from '@/directive/waves' // 水波纹指令
 import moment from 'moment-timezone'
 
 export default {
+  directives: {
+    waves
+  },
   data() {
     return {
       list: null,
         name: '',
         chips: '',
         depositChips: ''
-      }
+      },
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近一個月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三個月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近半年',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 180)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近一年',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 365)
+            picker.$emit('pick', [start, end])
+          }
+        }]
+      },
+      date: null
     }
   },
   created() {

src/views/gambleMember/history/index.vue

   <div class="app-container">
     <div class="app-container">
         <div class="block">
-            <span class="demonstration">時間篩選</span>
+            <!-- <span class="demonstration">時間篩選</span> -->
             <el-date-picker
             v-model="date"
             type="datetimerange"