Persistence

src/store/getters.js

   username: state => state.user.username,
   roles: state => state.user.roles,
   visible: state => state.breadcrumb.visible,
-  data: state => state.breadcrumb.data
+  data: state => state.breadcrumb.data,
+  query: state => state.breadcrumb.query
 }
 export default getters

src/store/modules/breadcrumb.js

       fourLayer: false
     },
     data: {
-      firstLayer: JSON.parse(localStorage.getItem('firstLayer')),
-      secondLayer: JSON.parse(localStorage.getItem('secondLayer')),
-      thirdLayer: JSON.parse(localStorage.getItem('thirdLayer')),
-      fourLayer: JSON.parse(localStorage.getItem('fourLayer'))
+      firstLayer: JSON.parse(localStorage.getItem('data_1st')),
+      secondLayer: JSON.parse(localStorage.getItem('data_2nd')),
+      thirdLayer: JSON.parse(localStorage.getItem('data_3rd')),
+      fourLayer: JSON.parse(localStorage.getItem('data_4th'))
+    },
+    query: {
+      firstLayer: {
+        limit: 20,
+        page: 1,
+        ...JSON.parse(localStorage.getItem('query_1st'))
+      },
+      secondLayer: {
+        limit: 20,
+        page: 1,
+        ...JSON.parse(localStorage.getItem('query_2nd'))
+      },
+      thirdLayer: {
+        limit: 20,
+        page: 1,
+        ...JSON.parse(localStorage.getItem('query_3rd'))
+      },
+      fourLayer: {
+        limit: 20,
+        page: 1,
+        ...JSON.parse(localStorage.getItem('query_4th'))
+      }
     }
   },
   mutations: {
     SET_DATA: (state, option) => {
       switch (option.layer) {
         case 1:
-          localStorage.setItem('firstLayer', JSON.stringify(option.data))
+          localStorage.setItem('data_1st', JSON.stringify(option.data))
+          state.data.firstLayer = option.data
           break
         case 2:
-          localStorage.setItem('secondLayer', JSON.stringify(option.data))
+          localStorage.setItem('data_2nd', JSON.stringify(option.data))
+          state.data.secondLayer = option.data
           break
         case 3:
-          localStorage.setItem('thirdLayer', JSON.stringify(option.data))
+          localStorage.setItem('data_3rd', JSON.stringify(option.data))
+          state.data.thirdLayer = option.data
           break
         case 4:
-          localStorage.setItem('fourLayer', JSON.stringify(option.data))
+          localStorage.setItem('data_4th', JSON.stringify(option.data))
+          state.data.fourLayer = option.data
+          break
+      }
+    },
+    SET_QUERY: (state, option) => {
+      switch (option.layer) {
+        case 1:
+          localStorage.setItem('query_1st', JSON.stringify(option.query))
+          state.query.firstLayer = { limit: 20, page: 1, ...option.query }
+          break
+        case 2:
+          localStorage.setItem('query_2nd', JSON.stringify(option.query))
+          state.query.secondLayer = { limit: 20, page: 1, ...option.query }
+          break
+        case 3:
+          localStorage.setItem('query_3rd', JSON.stringify(option.query))
+          state.query.thirdLayer = { limit: 20, page: 1, ...option.query }
+          break
+        case 4:
+          localStorage.setItem('query_4th', JSON.stringify(option.query))
+          state.query.fourLayer = { limit: 20, page: 1, ...option.query }
           break
       }
     }
   },
+
   actions: {
     SetVisible({ commit }, layer) {
       commit('SET_VISIBLE', layer)
     },
     SetData({ commit }, option) {
       commit('SET_DATA', option)
+    },
+    SetQuery({ commit }, option) {
+      commit('SET_QUERY', option)
     }
   }
 }

src/views/room/gameHistory/index.vue

           <div class="block">
               <!-- <span class="demonstration">時間篩選</span> -->
               <el-date-picker
-              v-model="date"
+              v-model="query.thirdLayer.date"
               type="datetimerange"
               :picker-options="pickerOptions"
               range-separator="至"
           </div>
       </div>
       <el-table :data="list" v-loading.body="listLoading" element-loading-text="Loading" border fit highlight-current-row>
-        <el-table-column :label="member.name" align="center">
+        <el-table-column :label="data.thirdLayer.name" align="center">
           <el-table-column label="時間" align="center">
             <template slot-scope="scope">
               <span>{{moment(scope.row.createdAt)}}</span>
       </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.thirdLayer.page"
+          :page-sizes="[10,20,30, 50]" :page-size="query.thirdLayer.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
         </el-pagination>
       </div>
 
       dialogList: null,
       total: null,
       listLoading: true,
-      listQuery: {
-        page: 1,
-        limit: 20,
-        startAt: null,
-        endAt: null
-      },
       pickerOptions: {
         shortcuts: [{
           text: '本週',
           onClick(picker) {
-            const end = moment().day(7).hour(11).minute(59).second(59)
-            const start = moment().subtract(1, 'weeks').day(7).hour(16).minute(0).second(0)
-            picker.$emit('pick', [start, end])
+            const endAt = moment().day(7).hour(11).minute(59).second(59)
+            const startAt = moment().subtract(1, 'weeks').day(7).hour(16).minute(0).second(0)
+            picker.$emit('pick', [startAt, endAt])
           }
         }, {
           text: '上週',
           onClick(picker) {
-            const end = moment().subtract(1, 'weeks').day(7).hour(11).minute(59).second(59)
-            const start = moment().subtract(2, 'weeks').day(7).hour(16).minute(0).second(0)
-            picker.$emit('pick', [start, end])
+            const endAt = moment().subtract(1, 'weeks').day(7).hour(11).minute(59).second(59)
+            const startAt = moment().subtract(2, 'weeks').day(7).hour(16).minute(0).second(0)
+            picker.$emit('pick', [startAt, endAt])
           }
         }]
       },
-      date: null,
+      // date: null,
       dialogFormVisible: false
 
     }
   },
   computed: {
     ...mapGetters([
-      'visible'
+      'visible',
+      'data',
+      'query'
     ])
   },
-  props: ['member'],
   methods: {
     ...mapActions([
-      'SetVisible'
+      'SetVisible',
+      'SetData',
+      'SetQuery'
     ]),
     getList() {
       this.listLoading = true
-      fetchGameHistory(this.member, this.listQuery).then(response => {
+      this.list = []
+      fetchGameHistory(this.data.thirdLayer, this.query.thirdLayer).then(response => {
         this.chipLogList = response.data
         this.chipLogList.map((item) => {
           this.list.push({
         })
         this.listLoading = false
       })
-      fetchChipsHistory(this.member, this.listQuery).then(response => {
+      fetchChipsHistory(this.data.thirdLayer, this.query.thirdLayer).then(response => {
         this.gameRecordList = response.data
         this.gameRecordList.map((item) => {
           if(item.type === config.const.GambleMemberChipsLog.type.deposit) item.type =  '上 / 下 分';
           const dateB = new Date(b.createdAt);
           return  dateB - dateA;
         });
-
+        this.total = this.list.length
         this.listLoading = false
       })
       
     handlePersonDetail(row) {
       this.listLoading = true
       this.dialogFormVisible = true
-      fetchPersonGameDetail(this.member.id, row.id).then(response => {
+      fetchPersonGameDetail(this.data.thirdLayer.id, row.id).then(response => {
         this.dialogList = response.data.rows
         this.listLoading = false
       })
       console.log('Game detail')
     },
     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.query.thirdLayer.date) {
+        this.SetQuery({layer:3, query: {page: 1,startAt: moment.utc(this.query.thirdLayer.date[0]).format(), endAt: moment.utc(this.query.thirdLayer.date[1]).format()}})      
       } else {
-        this.listQuery.startAt = null
-        this.listQuery.endAt = null
+         this.SetQuery({layer:3, query: {page: 1,startAt: null, endAt: null}})  
       }
       this.getList()
     },
     handleSizeChange(val) {
-      this.listQuery.limit = val
+      if (this.query.thirdLayer.date) {
+        this.SetQuery({layer:3, query: {limit: val, startAt: moment.utc(this.query.thirdLayer.date[0]).format(), endAt: moment.utc(this.query.thirdLayer.date[1]).format()}})      
+      } else {
+         this.SetQuery({layer:3, query: {limit: val,startAt: null, endAt: null}})  
+      }
       this.getList()
     },
     handleCurrentChange(val) {
-      this.listQuery.page = val
+      if (this.query.thirdLayer.date) {
+        this.SetQuery({layer:3, query: {page: val, startAt: moment.utc(this.query.thirdLayer.date[0]).format(), endAt: moment.utc(this.query.thirdLayer.date[1]).format()}})      
+      } else {
+         this.SetQuery({layer:3, query: {page: val,startAt: null, endAt: null}})  
+      }
       this.getList()
     },
     moment(time) {
   },
   destroyed() {
     this.SetVisible(2)
+  },
+  // TODO time 持九化
+  watch: {
+    'query.thirdLayer.date': function(val) {
+      if(this.query.thirdLayer.date) if((val[0] = this.query.thirdLayer.date[0]) && (val[1] = this.query.thirdLayer.date[1])) return
+      this.SetQuery({layer:3, query: {date: val}})
+      console.log('test', val);
+    }
   }
 }
 </script>

src/views/room/index.vue

 <div class="app-container calendar-list-container">
   <div  v-show="visible.firstLayer">
     <div class="app-container">
-      <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" placeholder="房間名" v-model="listQuery.name">
+      <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" placeholder="房間名" v-model="query.firstLayer.name">
       </el-input>
       <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-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>
 
     </el-dialog>
 
   </div>
-    <router-view :room="room"></router-view>
+    <router-view></router-view>
   </div>
 </template>
 
       list: null,
       total: null,
       listLoading: true,
-      listQuery: {
-        page: 1,
-        limit: 20,
-      },
       temp: {
         name: '',
       },
-      room: {},
       rules: {
         name: [{ type: 'string', required: true, message: '必填', trigger: 'change' }]
       },
   },
   computed: {
     ...mapGetters([
-      'visible'
+      'visible',
+      'query',
+      'data'
     ])
   },
   methods: {
     ...mapActions([
-      'SetVisible'
+      'SetVisible',
+      'SetData',
+      'SetQuery'
     ]),
     getList() {
       this.listLoading = true
-      fetchWechatRooms(this.listQuery).then(response => {
+      fetchWechatRooms(this.query.firstLayer).then(response => {
         this.list = response.data
         this.total = response.data.length
         this.listLoading = false
     handlePage(row) {
       const temp = Object.assign({}, row) // copy obj
       this.SetVisible(2)
-      this.room = temp
+      this.SetData({layer:2, data: temp})
     },
     handleCreate() {
       //TODO 了解wechat 的 room 關聯
       })
     },
     handleFilter() {
-      this.listQuery.page = 1
+      this.SetQuery({layer:1, query: {page: 1, name: this.query.firstLayer.name}})
       this.getList()
     },
     handleSizeChange(val) {
-      this.listQuery.limit = val
+      this.SetQuery({layer:1, query: {limit: val, name: this.query.firstLayer.name}})      
       this.getList()
     },
     handleCurrentChange(val) {
-      this.listQuery.page = val
+      this.SetQuery({layer:1, query: {page: val, name: this.query.firstLayer.name}})      
       this.getList()
     },
     handleDialogClose() {

src/views/room/wechatMember/index.vue

   <div class="app-container calendar-list-container">
     <div  v-show="visible.secondLayer">
       <div class="app-container">
-        <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" placeholder="名稱" v-model="listQuery.name">
+        <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" placeholder="名稱" v-model="query.secondLayer.name">
         </el-input>
         <!-- <el-select clearable @change='handleFilter' style="width: 120px" class="filter-item" v-model="listQuery.chipsSort" placeholder="點數">
           <el-option v-for="item in chipsSortOptions" :key="item.label" :label="item.label" :value="item.key">
         </el-table-column>
         <el-table-column label="代理商" align="center">
           <template slot-scope="scope">
-            <el-button v-show="noAgent(scope.row.WeChatUser.GambleMember)" type="primary" size="mini" icon="el-icon-edit" @click="handleAgentUpdate(scope.row)">代理商設定</el-button>
-            <span v-show="haveAgent(scope.row.WeChatUser.GambleMember)">{{scope.row.WeChatUser.GambleMember.name}}</span>
+            <el-button v-if="noAgent(scope.row.WeChatUser.GambleMember)" type="primary" size="mini" icon="el-icon-edit" @click="handleAgentUpdate(scope.row)">代理商設定</el-button>
+            <span v-if="haveAgent(scope.row.WeChatUser.GambleMember)">{{scope.row.WeChatUser.GambleMember.GambleAgent.name}}</span>
           </template>
         </el-table-column>
         <el-table-column align="center" label="操作" width="350">
       </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.secondLayer.page"
+          :page-sizes="[10,20,30, 50]" :page-size="query.secondLayer.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
         </el-pagination>
       </div>
 
       </el-dialog>
 
     </div>
-    <router-view :member="member"></router-view>
+    <router-view></router-view>
   </div>
 </template>
 
       list: null,
       total: null,
       listLoading: true,
-      listQuery: {
-        page: 1,
-        limit: 20,
-        name: '',
-        chipsSort: '',
-        updatedSort: ''
-      },
+      // listQuery: {
+      //   page: 1,
+      //   limit: 20,
+      //   name: '',
+      //   chipsSort: '',
+      //   updatedSort: ''
+      // },
       temp: {
         id: '',
         WeChatUser: {
         deposit: '上下分',
         reward: '獎懲'
       },
-      member: {},
       chipsSortOptions: [{ label: '多 -> 少', key: 'DESC' }, { label: '少 -> 多', key: 'ASC' }],
       updatedSortOptions: [{ label: '新 -> 舊', key: 'DESC' }, { label: '舊 -> 新', key: 'ASC' }],
       rules: {
         rewardChips: [{ pattern: /^-?\d+$/, required: true, message: '請輸入整數', trigger: 'change' }],        
         depositChips: [{ pattern: /^-?\d+$/, required: true, message: '請輸入整數', trigger: 'change' }],                
-        // chips: [{ pattern: /^(0|[1-9][0-9]*)$/, required: true, message: '請輸入整數', trigger: 'change' }],
-        // name: [{ type: 'string', required: true, message: '必填', trigger: 'change' }]
       },
       activeName: 'deposit',
       dialogUpdateFormVisible: false,
       agentLIstOptions: [],
     }
   },
-  props: ['room'],
   created() {
     this.SetVisible(2)
     this.getList()
   },
   computed: {
     ...mapGetters([
-      'visible'
+      'visible',
+      'data',
+      'query'
     ])
   },
   methods: {
     ...mapActions([
-      'SetVisible'
+      'SetVisible',
+      'SetData',
+      'SetQuery'
     ]),
     getList() {
       this.listLoading = true
-      fetchWeChatMemberList(this.room, this.listQuery).then(response => {
+      fetchWeChatMemberList(this.data.secondLayer, this.query.secondLayer).then(response => {
         this.list = response.data.rows
         this.total = response.data.count
         this.listLoading = false
     handlePage(row) {
       const temp = Object.assign({}, row) // copy obj
       this.SetVisible(3)
-      this.member = temp.WeChatUser.GambleMember
+      this.SetData({layer:3, data: temp.WeChatUser.GambleMember})
     },
     handleLog(row) {
-      const temp = Object.assign({}, row) // copy obj
       this.SetVisible(3)
-      this.member = temp.WeChatUser.GambleMember
+      this.SetData({layer:3, data: temp.WeChatUser.GambleMember})
     },
     handleFilter() {
-      this.listQuery.page = 1
+      this.SetQuery({layer:2, query: {page: 1, name: this.query.secondLayer.name}})
       this.getList()
     },
     handleSizeChange(val) {
-      this.listQuery.limit = val
+      // this.listQuery.limit = val
+      this.SetQuery({layer:2, query: {limit: val, name: this.query.secondLayer.name}})   
       this.getList()
     },
     handleCurrentChange(val) {
-      this.listQuery.page = val
+      // this.listQuery.page = val
+      this.SetQuery({layer:2, query: {page: val, name: this.query.secondLayer.name}})    
       this.getList()
     },
     handleClick(tab, event) {
         cancelButtonText: '取消',
         type: 'warning'
       }).then(() => {
-        resetWechatRoomMembersChips(this.room).then(response => {
-          console.log('11111')
+        resetWechatRoomMembersChips(this.data.secondLayer).then(response => {
           this.$message({
             type: 'success',
             message: '歸零成功!'