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

<template>
<div class="app-container calendar-list-container">
  <div class="app-container" v-show="visible">
    <div class="app-container">
      <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" placeholder="莊家" v-model="listQuery.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="listQuery.page"
        :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
  </div>
  <router-view :bucket="bucket"></router-view>
</div>
</template>

<script>

import { mapGetters, mapActions } from 'vuex'
import { fetchList, fetchGameBid } 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 = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一個月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三個月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近半年',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 180)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一年',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 365)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      date: null
    }
  },
  created() {
    this.getList()
    this.SetVisible(true)
  },
  computed: {
    ...mapGetters([
      'visible'
    ])
  },
  methods: {
    ...mapActions([
      'SetVisible'
    ]),
    getList() {
      this.listLoading = true
      fetchList(this.listQuery).then(response => {
        this.list = response.data.rows
        this.total = response.data.count
        this.listLoading = false
      })
    },
    handlePage(row) {
      this.temp = Object.assign({}, row) // copy obj
      fetchGameBid(row).then(response => {
        this.temp.bidChips = response.data
      })
      this.SetVisible(false)
      this.bucket = this.temp
      // fetchMemberRecords(row).then(response => {
      //   console.log(response.data)
      // })
      // fetchDealingRecords(row).then(response => {
      //   console.log(response.data)
      // })
    },
    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()
      } else {
        this.listQuery.startAt = null
        this.listQuery.endAt = null
      }
      this.getList()
    },
    handleSizeChange(val) {
      this.listQuery.limit = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.getList()
    },
    moment(time) {
      return moment(time).tz('Asia/Taipei').format('YYYY-MM-DD HH:mm:ss')
    }
  }
}
</script>