exchange/resources/assets/js/pages/admin/complete-orders.vue

<template>
  <div>
    <div align="right">
      <el-button :loading="loading_btn" type="primary" size="mini" @click="RefreshCompletedOrders()">Refresh</el-button>

    </div>
    <h1 align="center" style="margin-bottom:50px;">Completed Orders</h1>
    <el-table :data="tableData" stripe height="500" style="width: 100%">
        <el-table-column label="Ref No." prop="id" sortable></el-table-column>
        <el-table-column label="Order Date"  prop="created_at" width="180" sortable></el-table-column>
        <el-table-column label="Marking" width="120" prop="marking"></el-table-column>
        <el-table-column label="Rate" prop="rate" width="74"></el-table-column>
        <el-table-column label="Amount" prop="amount" sortable></el-table-column>
        <el-table-column :filters="[{text: 'RMB', value: 'RMB'}, {text: 'USD', value: 'USD'}]" :filter-method="filterHandler" label="Transfer Amount" prop="bia"></el-table-column>
        <el-table-column label="Status" width="106" prop="admin_status">
          <template slot-scope="scope">
            <el-tag size="medium" type="success">{{ scope.row.admin_status }}</el-tag>
          </template>        
        </el-table-column>
        <el-table-column :filters="[{ text: 'Success', value: 'Success' }, { text: 'Pending', value: 'Pending' }]" :filter-method="filterTag" width="180" filter-placement="bottom-end">
          <el-button slot-scope="scope" type="text" @click="(event) => { BookingStatus(scope.row.admin_status, scope.row.id) }"> View Status </el-button>
        </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import axios from 'axios'
  export default {
      data() {
        return {
          tableData: [],
          url: '/api/admin/complete-orders',
                loading_btn: false,

        }
      },
      mounted () {
        this.RefreshCompletedOrders()
      },
      methods: {
        RefreshCompletedOrders() {
          let $this = this
                this.loading_btn = true
          axios.get(this.url).then(response => {
        this.loading_btn = false;
            this.tableData = response.data
          })
        },
        filterTag (value, row) {
          return row.tag === value
        },
        filterHandler (value, row, column) {
          const property = column['property']
          return row[property] === value
        },
        BookingStatus (status, booking_id) {
          // TODO : Get booking status from server
          this.status = status
          console.log(this.status)
          switch (this.status) {
            case 1:
              this.$router.push({
                name: 'booking.admin.pending',
                params: {id: booking_id }
              })
              break
            case 2:
              this.$router.push({
                name: 'booking.admin.verification',
                params: {id: booking_id }
              })
              break
            case 3:
              this.$router.push({
                name: 'booking.admin.supplier',
                params: {id: booking_id }
              })
              break
            case 4:
              this.$router.push({
                name: 'booking.admin.supplier.report',
                params: {id: booking_id }
              })
              break
            case 5:
              this.$router.push({
                name: 'booking.admin.cnslip',
                params: {id: booking_id }
              })
              break

            case 6:
              this.$router.push({
                name: 'booking.admin.invoice',
                params: {id: booking_id }
              })
              break

            case 7:
              this.$router.push({
                name: 'booking.admin.complete',
                params: {id: booking_id }
              })
              break
            default:
              break
          }
      }
    }
  }
</script>