TODO label display

src/api/gambleGameBucket.js

@@ -57,3 +57,10 @@ export function fetchGameBucket(id) {
     method: 'get'
   })
 }
+
+export function fetchRoundRecord(data, query = { round: 1 }) {
+  return request({
+    url: `/gambleGameBuckets/${data.id}/round/${query.round}/roundRecord`,
+    method: 'get'
+  })
+}

src/views/gambleGameBucket/detail/index.vue

@@ -24,32 +24,32 @@
             <span>{{scope.$index === 0 ?"點數":"門主"}}</span>
           </template>
         </el-table-column>   
-        <el-table-column label="第一門">
+        <el-table-column label="第一門" :label-class-name="initDoor(1)">
           <template slot-scope="scope">
             <span>{{doorTableSwitch(scope.$index, 0)}}</span>
           </template>
         </el-table-column>
-        <el-table-column label="第二門">
+        <el-table-column label="第二門" :label-class-name="initDoor(2)">
           <template slot-scope="scope">
             <span>{{doorTableSwitch(scope.$index, 1)}}</span>
           </template>
         </el-table-column>
-        <el-table-column label="第三門">
+        <el-table-column label="第三門" :label-class-name="initDoor(3)">
           <template slot-scope="scope">
             <span>{{doorTableSwitch(scope.$index, 2)}}</span>
           </template>
         </el-table-column>
-        <el-table-column label="第四門">
+        <el-table-column label="第四門" :label-class-name="initDoor(4)">
           <template slot-scope="scope">
             <span>{{doorTableSwitch(scope.$index, 3)}}</span>
           </template>
         </el-table-column>
-        <el-table-column label="第五門">
+        <el-table-column label="第五門" :label-class-name="initDoor(5)">
           <template slot-scope="scope">
             <span>{{doorTableSwitch(scope.$index, 4)}}</span>
           </template>
         </el-table-column>
-        <el-table-column label="第六門">
+        <el-table-column label="第六門" :label-class-name="initDoor(6)">
           <template slot-scope="scope">
             <span>{{doorTableSwitch(scope.$index, 5)}}</span>
           </template>
@@ -138,7 +138,7 @@
 <script>
 
 import { mapGetters, mapActions } from 'vuex'
-import { fetchDetails, fetchRoundCount, fetchDealingRecords, fetchMemberRecords } from '@/api/gambleGameBucket'
+import { fetchDetails, fetchRoundCount, fetchDealingRecords, fetchMemberRecords, fetchRoundRecord } from '@/api/gambleGameBucket'
 import { fetchGambleMemberList } from '@/api/gambleMember'
 import { ponitTransform } from '@/utils/point'
 import _ from 'lodash'
@@ -161,7 +161,8 @@ export default {
       members: [],
       dealing: [],
       bookie: [],
-      memberRecord: []
+      memberRecord: [],
+      initialDoor: 0,
     }
   },
   created() {
@@ -296,6 +297,10 @@ export default {
         this.func = eval(`(function() {${this.statement}})`)
       })
 
+      fetchRoundRecord(this.data.secondLayer, this.query.secondLayer).then(response => {
+        this.initialDoor = response.data.initialDoor
+      })
+
       this.listLoading = false
     },
     objectSpanMethod({ row, column, rowIndex, columnIndex }) {
@@ -352,6 +357,10 @@ export default {
     },
     point(dealingRecord) {
       return ponitTransform(dealingRecord)
+    },
+    initDoor(index) {
+      console.log(index===this.initialDoor)
+      return this.initialDoor === index ? `init` : ''
     }
   },
   destroyed() {
@@ -359,3 +368,8 @@ export default {
   }
 }
 </script>
+<style>
+  .el-table-column .init {
+    color: #F56C6C;
+  }
+</style>