History person game table 1st version

src/api/gambleMember.js

@@ -47,3 +47,10 @@ export function fetchHistory(data, query) {
     }
   })
 }
+
+export function fetchPersonGameDetail(gambleMemberId, gambleGameBucketId) {
+  return request({
+    url: `/gambleMembers/${gambleMemberId}/gambleGameBuckets/${gambleGameBucketId}/detail`,
+    method: 'get'
+  })
+}

src/views/gambleMember/history/index.vue

@@ -51,13 +51,54 @@
         :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="dialogFormVisible" width="75%" center>
+      <!-- <el-form ref="dataForm" :model="temp" label-position="left" label-width="100px" style='width: 400px; margin-left:50px;'>-->
+      <el-table :data="dialogList" v-loading.body="listLoading" element-loading-text="Loading" border fit highlight-current-row
+        style="width: 100%">
+        <el-table-column align="center" label='數目' >
+          <template slot-scope="scope">
+            {{scope.$index + 1}}
+          </template>
+        </el-table-column>
+        <el-table-column label="輪" align="center">
+          <template slot-scope="scope">
+            {{scope.row.round}}
+          </template>
+        </el-table-column>
+        <el-table-column label="門" align="center">
+          <template slot-scope="scope">
+            <span>{{scope.row.door}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="押注" align="center">
+          <template slot-scope="scope">
+            <span>{{scope.row.wager}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="輸贏" align="center">
+          <template slot-scope="scope">
+            <span>{{scope.row.earned}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="抽水" align="center">
+          <template slot-scope="scope">
+            <span>{{scope.row.serviceFees}}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogFormVisible = false" type="danger">關 閉</el-button>
+      </div>
+    </el-dialog>
+
   </div>
 </template>
 
 <script>
 
 import { mapActions } from 'vuex'
-import { fetchHistory } from '@/api/gambleMember'
+import { fetchHistory, fetchPersonGameDetail } from '@/api/gambleMember'
 import waves from '@/directive/waves' // 水波纹指令
 import moment from 'moment-timezone'
 
@@ -68,6 +109,7 @@ export default {
   data() {
     return {
       list: null,
+      dialogList: null,
       total: null,
       listLoading: true,
       listQuery: {
@@ -103,7 +145,9 @@ export default {
           }
         }]
       },
-      date: null
+      date: null,
+      dialogFormVisible: false
+
     }
   },
   created() {
@@ -123,8 +167,13 @@ export default {
         this.listLoading = false
       })
     },
-    handlePersonDetail() {
-      console.log('Person detail')
+    handlePersonDetail(row) {
+      this.listLoading = true      
+      this.dialogFormVisible = true
+      fetchPersonGameDetail(this.member.id, row['GambleGame-Bucket'].id).then(response => {
+        this.dialogList = response.data.rows
+        this.listLoading = false        
+      })
     },
     handleGameDetail() {
       console.log('Game detail')