add datePicker

src/views/gambleMember/detail/index.vue

@@ -1,5 +1,20 @@
 <template>
   <div class="app-container">
+    <div class="app-container">
+        <div class="block">
+            <span class="demonstration">時間篩選</span>
+            <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>
+    </div>
     <el-table :data="list" v-loading.body="listLoading" element-loading-text="Loading" border fit highlight-current-row>
       <el-table-column label="場" align="center">
         <template slot-scope="scope">
@@ -29,12 +44,44 @@
 
 import { mapActions } from 'vuex'
 import { fetchHistory } from '@/api/gambleMember'
+import waves from '@/directive/waves' // 水波纹指令
 
 export default {
+  directives: {
+    waves
+  },
   data() {
     return {
       list: null,
-      listLoading: true
+      listLoading: true,
+      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]);
+            }
+          }]
+        },
+      date: ''
     }
   },
   created() {
@@ -49,9 +96,11 @@ export default {
       this.listLoading = true
       fetchHistory(this.member).then(response => {
         this.list = response.data
-        console.log(response.data)
         this.listLoading = false
       })
+    },
+    handleFilter() {
+      console.log(this.date)
     }
   },
   destroyed() {

src/views/gambleMember/index.vue

@@ -13,7 +13,7 @@
         </el-option>
       </el-select>
       <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">搜尋</el-button>
-        <el-button class="filter-item" @click="handleCreate" type="primary" icon="el-icon-edit">創建</el-button>
+      <el-button class="filter-item" @click="handleCreate" type="primary" icon="el-icon-edit">創建</el-button>
     </div>
     <el-table :data="list" v-loading.body="listLoading" element-loading-text="Loading" border fit highlight-current-row
       style="width: 100%">