TODO handle data

src/router/index.js

@@ -71,7 +71,19 @@ export const constantRouterMap = [
           title: '每局紀錄',
           icon: 'form'
           // role: ['dd']
-        }
+        },
+        children: [
+          {
+            path: '/gambleGameBucket/index/detail',
+            name: 'GambleGameBucketDetail',
+            component: _import('gambleGameBucket/detail/index'),
+            hidden: true,
+            meta: {
+              title: '詳細紀錄'
+              // role: ['dd']
+            }
+          }
+        ]
       }
     ]
   },

src/views/gambleGameBucket/detail/index.vue

@@ -0,0 +1,72 @@
+<template>
+<div class="app-container calendar-list-container">
+  <div class="app-container">
+    <el-table :data="tableData6" :span-method="objectSpanMethod" border style="width: 100% margin-top: 20px">
+      <el-table-column prop="id" label="玩家" width="180">
+      </el-table-column>
+      <el-table-column prop="name" label="押">
+      </el-table-column>
+      <el-table-column prop="amount1" label="點數">
+      </el-table-column>
+      <el-table-column prop="amount2" label="輸贏">
+      </el-table-column>
+      <el-table-column prop="amount3" label="抽水">
+      </el-table-column>
+      <el-table-column prop="amount3" label="輸贏合計">
+      </el-table-column>
+      <el-table-column prop="amount3" label="福利">
+      </el-table-column>
+      <el-table-column prop="amount3" label="最終積分">
+      </el-table-column>
+    </el-table>
+  </div>
+</div>
+</template>
+
+<script>
+import { fetchList, fetchMemberRecords, fetchDealingRecords } from '@/api/gambleGameBucket'
+
+export default {
+  data() {
+    return {
+      list: null,
+      listLoading: true,
+      total: null,
+      memberRecords: '',
+      dealingRecords: ''
+    }
+  },
+  props: [ 'bucket' ],
+  created() {
+    this.getList()
+  },
+  methods: {
+    getList() {
+      this.listLoading = true
+      fetchMemberRecords(this.bucket).then(response => {
+        this.memberRecords = response.data
+        console.log(response.data)
+      })
+      fetchDealingRecords(this.bucket).then(response => {
+        this.dealingRecords = response.data
+        console.log(response.data)
+      })
+    },
+    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
+      if (columnIndex === 0) {
+        if (rowIndex % 3 === 0) {
+          return {
+            rowspan: 3,
+            colspan: 1
+          }
+        } else {
+          return {
+            rowspan: 0,
+            colspan: 0
+          }
+        }
+      }
+    }
+  }
+}
+</script>

src/views/gambleGameBucket/index.vue

@@ -1,6 +1,6 @@
 <template>
 <div class="app-container calendar-list-container">
-  <div class="app-container">
+  <div class="app-container" v-show="listVisble">
     <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">
@@ -20,7 +20,9 @@
       </el-table-column>
        <el-table-column align="center" label="操作">
         <template slot-scope="scope">
-            <el-button type="primary" size="mini" @click="handleDialog(scope.row)">查看</el-button>
+          <router-link to="/gambleGameBucket/index/detail">
+            <el-button type="primary" size="mini" @click="handlePage(scope.row)">查看</el-button>
+          </router-link>
         </template>
       </el-table-column>
     </el-table>
@@ -30,30 +32,8 @@
         :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
       </el-pagination>
     </div>
-    <el-dialog title="詳細" :visible.sync="dialogVisible">
-    <el-table :data="tableData6" :span-method="objectSpanMethod" border style="width: 100% margin-top: 20px">
-      <el-table-column prop="id" label="玩家" width="180">
-      </el-table-column>
-      <el-table-column prop="name" label="押">
-      </el-table-column>
-      <el-table-column prop="amount1" label="點數">
-      </el-table-column>
-      <el-table-column prop="amount2" label="輸贏">
-      </el-table-column>
-      <el-table-column prop="amount3" label="抽水">
-      </el-table-column>
-      <el-table-column prop="amount3" label="輸贏合計">
-      </el-table-column>
-      <el-table-column prop="amount3" label="福利">
-      </el-table-column>
-      <el-table-column prop="amount3" label="最終積分">
-      </el-table-column>
-    </el-table>
-          <div slot="footer" align="center" class="dialog-footer">
-        <el-button type="primary" @click="closeDialog">確 定</el-button>
-      </div>
-    </el-dialog>
   </div>
+  <router-view :bucket="bucket"></router-view>
 </div>
 </template>
 
@@ -66,6 +46,8 @@ export default {
       list: null,
       listLoading: true,
       total: null,
+      listVisble: true,
+      bucket: '',
       listQuery: {
         page: 1,
         limit: 20,
@@ -82,7 +64,6 @@ export default {
         chips: '',
         depositChips: ''
       },
-      dialogVisible: false,
     }
   },
   created() {
@@ -97,35 +78,17 @@ export default {
         this.listLoading = false
       })
     },
-    closeDialog() {
-      this.dialogVisible = false
-    },
-    handleDialog(row) {
+    handlePage(row) {
       this.temp = Object.assign({}, row) // copy obj
-      fetchMemberRecords(row).then(response => {
-        console.log(response.data)
-      })
-      fetchDealingRecords(row).then(response => {
-        console.log(response.data)
-      })
-      // router.push({ path: '/gambleGameBucket/index/detail' })
-      this.dialogVisible = true
+      this.listVisble = false
+      this.bucket = row
+      // fetchMemberRecords(row).then(response => {
+      //   console.log(response.data)
+      // })
+      // fetchDealingRecords(row).then(response => {
+      //   console.log(response.data)
+      // })
     },
-      objectSpanMethod({ row, column, rowIndex, columnIndex }) {
-        if (columnIndex === 0) {
-          if (rowIndex % 3 === 0) {
-            return {
-              rowspan: 3,
-              colspan: 1
-            };
-          } else {
-            return {
-              rowspan: 0,
-              colspan: 0
-            };
-          }
-        }
-      },
     handleFilter() {
       this.listQuery.page = 1
       this.getList()