Showing Completed Orders To Admin

resources/assets/js/pages/admin/complete-order.vue

@@ -1,13 +1,24 @@
 <template>
 <div>
-    <span align="center"><h2>Complete Order</h2></span><br>
-    <el-table :data="tableData" stripe style="width: 100%">
+  <div align="right">
+    <el-button icon="el-icon-refresh" type="primary" size="mini" @click="RefreshCompletedOrders()">Refresh</el-button>
+  </div>
+    <span align="center"><h2>Completed Orders</h2></span><br>
+    <!--<el-table :data="tableData" stripe style="width: 100%">
         <el-table-column prop="order_no" label="Order No" sortable></el-table-column>
         <el-table-column prop="cust_marking" label="Customer Marking" sortable></el-table-column>
         <el-table-column prop="order_date" label="Order Date" sortable></el-table-column>
         <el-table-column prop="transfer_amount" label="Transfer Amount (RMB)" sortable></el-table-column>
         <el-table-column prop="status" label="Status"></el-table-column>
-    </el-table><br><br>
+    </el-table>-->
+    <br><br>
+    <el-table :data="tableData" stripe style="width: 100%">
+        <el-table-column label="Order No" prop="id"></el-table-column>
+        <el-table-column label="Company Name"  prop="company_name"></el-table-column>
+        <el-table-column label="Order Date"  prop="created_at"></el-table-column>
+        <el-table-column label="Transfer Amount (RMB)" prop="amount"></el-table-column>
+        <el-table-column label="Status" prop="admin_status"></el-table-column>
+    </el-table>
     <div align="right">
         <el-pagination background layout="prev, pager, next" :total="30"></el-pagination>
     </div>
@@ -15,23 +26,24 @@
 </template>
 
 <script>
-export default {
-    data() {
-      return {
-        tableData: [{
-          order_no: '001',
-          cust_marking: 'CIEF/155ECE',
-          order_date: '27/6/2018',
-          transfer_amount: '1200',
-          status: 'Complete',
-        }, {
-          order_no: '002',
-          cust_marking: 'CIEF/143EDR',
-          order_date: '23/6/2018',
-          transfer_amount: '14000',
-          status: 'Complete',
-        }]
+  import axios from 'axios'
+  export default {
+      data() {
+        return {
+          tableData: [],
+          url: 'api/admin/complete-order',
+        }
+      },
+      mounted () {
+        this.RefreshCompletedOrders()
+      },
+      methods: {
+        RefreshCompletedOrders() {
+          let $this = this
+          axios.get(this.url).then(response => {
+            this.tableData = response.data
+          })
+        },
       }
-    }
-}
+  }
 </script>

resources/assets/js/pages/admin/home.vue

@@ -1,7 +1,8 @@
 <template>
 <div>
   <div align="right">
-<el-button icon="el-icon-refresh" type="primary" size="mini" @click="RefreshBooking()">Refresh</el-button></div>
+    <el-button icon="el-icon-refresh" type="primary" size="mini" @click="RefreshBooking()">Refresh</el-button>
+  </div>
   <!-- Booking Table -->
   <el-row :gutter="20">
     <div>