integrate index in suplier page

resources/assets/js/pages/settings/admin-supplier.vue

@@ -2,11 +2,11 @@
 <div>
 	<span align="center"><h4>Supplier Details</h4></span><br>
 		<el-table :data="tableData" border style="width: 100%">
-			<el-table-column prop="comp_name" label="Company Name"></el-table-column>
-			<el-table-column prop="reg_no" label="Registration No"></el-table-column>
+			<el-table-column prop="company_name" label="Company Name"></el-table-column>
+			<el-table-column prop="supplier_reg_no" label="Registration No"></el-table-column>
 			<el-table-column prop="gst_no" label="GST No"></el-table-column>
 			<el-table-column prop="bank_name" label="Bank Name"></el-table-column>
-			<el-table-column prop="account_no" label="Account No"></el-table-column>
+			<el-table-column prop="acc_no" label="Account No"></el-table-column>
 			<el-table-column label="Action">
 					<template slot-scope="scope">
 							<el-button type="text" size="small" @click="EditSupplierdialogVisible = true">Edit</el-button>
@@ -34,7 +34,7 @@
 			<el-dialog align="center" :visible.sync="DoneAddSupplierdialogVisible" width="30%">
 				<span>Supplier Added Successfully</span><br><br>
 				<div align="center">
-						<el-button type="primary" @click="Create">OK</el-button>
+						<el-button type="primary" @click="CreateSupplier">OK</el-button>
 				</div>
 			</el-dialog>
 		<!-- popup add new supplier end -->
@@ -71,26 +71,12 @@
 </template>
 
 <script>
-
 var client = require('./client');
 
-
 	export default {
 		data() {
 			return {
-				tableData: [{
-					comp_name: 'CIEF',
-					reg_no: '2134241',
-					gst_no: '214',
-					bank_name: 'myabank', 
-					account_no: '1242521', 
-				}, {
-					comp_name: 'iPhone',
-					reg_no: '123214',
-					gst_no: '3532',
-					bank_name: 'adyabank', 
-					account_no: '21421421', 
-				}],
+				tableData: [],
 				AddNewSupplierdialogVisible: false,
 				EditSupplierdialogVisible: false,
 				DoneAddSupplierdialogVisible: false,
@@ -105,26 +91,40 @@ var client = require('./client');
 				}
 			}
 		},
+		beforeMount(){
+			this.GetTableData();
+		},
 		methods:{
-			Create : function(){
+			CreateSupplier : function(){
 				this.DoneAddSupplierdialogVisible = false;
-
-				console.log(this.supplierForm.company_name);
-				console.log(this.supplierForm.bank_name);
-          client.post('api/setting-supplier', this.supplierForm)
-            .then((response) => {
-             	// anything
-            })
-            .catch((error) => {
-              console.log(error)
-              this.$message({
-                showClose: true,
-                message: 'Internal server issues. Please contact support',
-                type: 'error',
-                duration: 10000
-              })
-             
-            })
+				client.post('api/setting-supplier', this.supplierForm)
+				.then((response) => {
+					// anything
+				})
+				.catch((error) => {
+					console.log(error);
+					this.$message({
+						showClose: true,
+						message: 'Create Fail',
+						type: 'error',
+						duration: 10000
+					});
+				})
+			},
+			GetTableData : function(){
+				client.get('api/setting-supplier', this.supplierForm)
+				.then((response) => {
+					this.tableData = response.data;
+				})
+				.catch((error) => {
+					console.log(error);
+					this.$message({
+						showClose: true,
+						message: 'Fetch data fail',
+						type: 'error',
+						duration: 10000
+					});
+				})
 			}
 		}
 	}