GambleAdmin/src/views/gambleGameBu.../index.vue

<template>
<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="query.firstLayer.bookie">
      </el-input>
      <el-date-picker
        v-model="date"
        type="datetimerange"
        :picker-options="pickerOptions"
        range-separator="至"
        start-placeholder="開始日期"
        end-placeholder="结束日期"
        align="right">
      </el-date-picker>
      <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">搜尋</el-button>
    </div>
    <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" align="center">
        <template slot-scope="scope">
          {{scope.row.id}}
        </template>
      </el-table-column> -->
      <el-table-column prop="GambleMember.name" label="莊家" align="center">
        <!-- <template slot-scope="scope">
          <span>{{scope.row.GambleMember.id}}</span>
        </template> -->
      </el-table-column>
      <el-table-column align="center" label="時間" >
        <template slot-scope="scope">
          <span>{{moment(scope.row.createdAt)}}</span>
        </template>
      </el-table-column>
       <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <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>

    <div v-show="!listLoading" class="pagination-container">
      <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></router-view>
</div>
</template>

<script>

import { mapGetters, mapActions } from 'vuex'
import { fetchList, fetchGameBid, fetchRoundRecord } from '@/api/gambleGameBucket'
import waves from '@/directive/waves' // 水波纹指令
import moment from 'moment-timezone'

export default {
  directives: {
    waves
  },
  data() {
    return {
      list: null,
      listLoading: true,
      total: null,
      // bucket: '',
      // listQuery: {
      //   page: 1,
      //   limit: 20,
      //   startAt: null,
      //   endAt: null,
      //   bookie: null
      // },
      // temp: {},
      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])
          }
        }, {
          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])
          }
        }]
      },
      date: []
    }
  },
  created() {
    this.date = this.p_date
    this.getList()
    this.SetVisible(1)
  },
  computed: {
    ...mapGetters([
      'visible',
      'query',
      'data',
      'p_date'
    ])
  },
  methods: {
    ...mapActions([
      'SetVisible',
      'SetData',
      'SetQuery',
      'SetDate'
    ]),
    getList() {
      this.listLoading = true
      fetchList(this.query.firstLayer).then(response => {
        this.list = response.data.rows
        this.total = response.data.count
        this.listLoading = false
      })
    },
    handlePage(row) {
      let temp = Object.assign({}, row) // copy obj
      // fetchRoundRecord(row).then(response => {
      //   temp.door = response.data
      // })
      // fetchGameBid(row).then(response => {
      //   temp.bidChips = response.data
      // })
      console.log('eeeee', temp)
      this.SetVisible(2)
      this.SetData({layer:2, data: temp})
    },
    handleFilter() {
      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.SetQuery({layer:1, query: {page: 1, bookie: this.query.firstLayer.bookie,startAt: null, endAt: null}})  
      }
      this.getList()
    },
    handleSizeChange(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) {
      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>