presistence gambleGameBucket

src/views/gambleGameBucket/index.vue

 <div class="app-container calendar-list-container">
   <div class="app-container" v-show="visible.firstLayer">
     <div class="app-container">
-      <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" placeholder="莊家" v-model="listQuery.bookie">
+      <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" placeholder="莊家" v-model="query.firstLayer.bookie">
       </el-input>
       <el-date-picker
         v-model="date"
     </el-table>
 
     <div v-show="!listLoading" class="pagination-container">
-      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.page"
-        :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
+      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="query.firstLayer.page"
+        :page-sizes="[10,20,30, 50]" :page-size="query.firstLayer.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
       </el-pagination>
     </div>
   </div>
-  <router-view :bucket="bucket"></router-view>
+  <router-view></router-view>
 </div>
 </template>
 
       list: null,
       listLoading: true,
       total: null,
-      bucket: '',
-      listQuery: {
-        page: 1,
-        limit: 20,
-        startAt: null,
-        endAt: null,
-        bookie: null
-      },
+      // bucket: '',
+      // listQuery: {
+      //   page: 1,
+      //   limit: 20,
+      //   startAt: null,
+      //   endAt: null,
+      //   bookie: null
+      // },
       temp: {},
       pickerOptions: {
         shortcuts: [{
           }
         }]
       },
-      date: null
+      date: []
     }
   },
   created() {
+    this.date = this.p_date
     this.getList()
     this.SetVisible(1)
   },
   computed: {
     ...mapGetters([
-      'visible'
+      'visible',
+      'query',
+      'data',
+      'p_date'
     ])
   },
   methods: {
     ...mapActions([
-      'SetVisible'
+      'SetVisible',
+      'SetData',
+      'SetQuery',
+      'SetDate'
     ]),
     getList() {
       this.listLoading = true
-      fetchList(this.listQuery).then(response => {
+      fetchList(this.query.firstLayer).then(response => {
         this.list = response.data.rows
         this.total = response.data.count
         this.listLoading = false
         this.temp.bidChips = response.data
       })
       this.SetVisible(2)
-      this.bucket = this.temp
-      // fetchMemberRecords(row).then(response => {
-      //   console.log(response.data)
-      // })
-      // fetchDealingRecords(row).then(response => {
-      //   console.log(response.data)
-      // })
+      this.SetData({layer:2, data: this.temp})
     },
     handleFilter() {
-      this.listQuery.page = 1
-      if (this.date) {
-        this.listQuery.startAt = moment.utc(this.date[0]).format()
-        this.listQuery.endAt = moment.utc(this.date[1]).format()
+      if (this.p_date) {
+        this.SetQuery({layer:1, query: {page: 1, bookie: this.query.firstLayer.bookie, startAt: moment.utc(this.p_date[0]).format(), endAt: moment.utc(this.p_date[1]).format()}})      
       } else {
-        this.listQuery.startAt = null
-        this.listQuery.endAt = null
+         this.SetQuery({layer:1, query: {page: 1, bookie: this.query.firstLayer.bookie,startAt: null, endAt: null}})  
       }
       this.getList()
     },
     handleSizeChange(val) {
-      this.listQuery.limit = val
+      if (this.p_date) {
+        this.SetQuery({layer:1, query: {limit: val, bookie: this.query.firstLayer.bookie, startAt: moment.utc(this.p_date[0]).format(), endAt: moment.utc(this.p_date[1]).format()}})      
+      } else {
+        this.SetQuery({layer:1, query: {limit: val, bookie: this.query.firstLayer.bookie,startAt: null, endAt: null}})  
+      }
       this.getList()
     },
     handleCurrentChange(val) {
-      this.listQuery.page = val
+      if (this.p_date) {
+        this.SetQuery({layer:1, query: {page: val, bookie: this.query.firstLayer.bookie, startAt: moment.utc(this.p_date[0]).format(), endAt: moment.utc(this.p_date[1]).format()}})      
+      } else {
+        this.SetQuery({layer:1, query: {page: val, bookie: this.query.firstLayer.bookie,startAt: null, endAt: null}})  
+      }
       this.getList()
     },
     moment(time) {
       return moment(time).tz('Asia/Taipei').format('YYYY-MM-DD HH:mm:ss')
     }
+  },
+  watch: {
+    'date': function(val) {
+     this.SetDate(val)
+    }
   }
 }
 </script>