mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/exchange.git
synced 2026-09-01 02:34:13 +00:00
integrated frontend/backend for show/update rate
This commit is contained in:
Nazri Hamzah
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div>
|
||||
<ul class="nav navbar-nav">
|
||||
<li class="nav-item dropdown">
|
||||
<!-- <li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" role="button"
|
||||
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
{{ locales[locale] }}
|
||||
@@ -12,7 +12,7 @@
|
||||
{{ value }}
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
</li> -->
|
||||
<ul class="navbar-nav mr-auto">
|
||||
<li v-if="(user && role == 'admin')" class="nav-item">
|
||||
<el-popover placement="top" width="300" v-model="UpdateRatePopoverVisible">
|
||||
@@ -27,35 +27,31 @@
|
||||
<a class="nav-link" href="#" role="button" slot="reference">Update Rate</a>
|
||||
</el-popover>
|
||||
</li></ul>
|
||||
<li v-if="(user && role == 'admin')" class="nav-item"><router-link :to="{ name: 'admin.complete-order' }" class="nav-link">{{ $t('Complete Order') }}</router-link></li>
|
||||
<!-- <li v-if="(user && role == 'admin')" class="nav-item"><router-link :to="{ name: 'admin.complete' }" class="nav-link">{{ $t('Complete Order') }}</router-link></li> -->
|
||||
<li v-if="(user && role == 'admin')" class="nav-item"><router-link :to="{ name: 'admin.transaction-history' }" class="nav-link">{{ $t('Transaction History') }}</router-link></li>
|
||||
<li v-if="(user && role == 'admin')" class="nav-item"><router-link :to="{ name: 'admin.upload-supplier-bank-slip' }" class="nav-link">{{ $t('Upload Supplier Bank Slip to System') }}</router-link></li>
|
||||
<!-- <li v-if="(user && role == 'admin')" class="nav-item"><router-link :to="{ name: 'admin.upload-supplier-bank-slip' }" class="nav-link">{{ $t('Upload Supplier Bank Slip to System') }}</router-link></li> -->
|
||||
|
||||
</ul>
|
||||
<!-- update rate dialog start -->
|
||||
<el-dialog align="center" :visible.sync="UpdateRateDialogVisible" width="60%">
|
||||
<el-form :inline="true" align="center" ref="rateForm" :model="rateForm" :rules="rules">
|
||||
|
||||
<!-- update rate dialog -->
|
||||
<el-dialog align="center" :visible.sync="UpdateRateDialogVisible">
|
||||
<el-form :inline="true" align="center">
|
||||
<el-form-item>X1 :
|
||||
Cash : <el-input style=width:10% ></el-input>
|
||||
Cheque : <el-input style=width:10%></el-input>
|
||||
BA : <el-input style=width:10%></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-form :inline="true" align="center">
|
||||
<el-form-item>X2 :
|
||||
Cash : <el-input style=width:10% ></el-input>
|
||||
Cheque : <el-input style=width:10%></el-input>
|
||||
BA : <el-input style=width:10%></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="x1_cash" >X1: Cash : <el-input v-model.number="rateForm.x1_cash" style=width:25% ></el-input></el-form-item>
|
||||
<el-form-item prop="x1_cheque" >Cheque : <el-input v-model.number="rateForm.x1_cheque" style=width:25%></el-input></el-form-item>
|
||||
<el-form-item prop="x1_ba">BA : <el-input v-model.number="rateForm.x1_ba" style=width:25%></el-input></el-form-item>
|
||||
<br>
|
||||
<el-form-item prop="x2_cash" >X2: Cash : <el-input v-model.number="rateForm.x2_cash" style=width:25% ></el-input></el-form-item>
|
||||
<el-form-item prop="x2_cheque" >Cheque : <el-input v-model.number="rateForm.x2_cheque" style=width:25%></el-input></el-form-item>
|
||||
<el-form-item prop="x2_ba" >BA : <el-input v-model.number="rateForm.x2_ba" style=width:25%></el-input></el-form-item>
|
||||
</el-form>
|
||||
<br>
|
||||
<div align="center">
|
||||
<el-button type="text" @click="UpdateRateDialogVisible = false">Cancel</el-button>
|
||||
<el-button type="primary" @click="UpdateRateDialogVisible = false; DoneUpdateRateDialogVisible = true">Save</el-button>
|
||||
<el-button type="primary" @click="updateRate('rateForm'); UpdateRateDialogVisible = false; DoneUpdateRateDialogVisible = true" >Save</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!-- update rate dialog end -->
|
||||
</el-dialog>
|
||||
<!-- update rate dialog done -->
|
||||
|
||||
<el-dialog align="center" :visible.sync="DoneUpdateRateDialogVisible" width="30%">
|
||||
<span>Rate Successfully Updated</span><br><br>
|
||||
<div align="center">
|
||||
@@ -77,14 +73,48 @@ export default {
|
||||
UpdateRatePopoverVisible: false,
|
||||
UpdateRateDialogVisible: false,
|
||||
DoneUpdateRateDialogVisible: false,
|
||||
rate:{
|
||||
x1_cash: '1.60',
|
||||
x1_cheque: '1.63',
|
||||
x1_ba: '1.66',
|
||||
x2_cash: '1.40',
|
||||
x2_cheque: '1.44',
|
||||
x2_ba: '1.66'
|
||||
}
|
||||
rate: {
|
||||
x1_ba: null,
|
||||
x1_cheque: null,
|
||||
x1_cash: null,
|
||||
x2_ba: null,
|
||||
x2_cash: null,
|
||||
x2_cheque: null,
|
||||
},
|
||||
rateForm: {
|
||||
x1_cash: '',
|
||||
x1_cheque: '',
|
||||
x1_ba: '',
|
||||
x1_cash: '',
|
||||
x1_cheque: '',
|
||||
x1_ba: '',
|
||||
},
|
||||
rules: {
|
||||
x1_cash: [
|
||||
{ required: true, message: 'Please input rate for X1 Cash', trigger: 'change'},
|
||||
{ type: 'number', message: 'Rate must be a number'}
|
||||
],
|
||||
x1_cheque: [
|
||||
{ required: true, message: 'Please input rate for X1 Cheque', trigger: 'change'},
|
||||
{ type: 'number', message: 'Rate must be a number'}
|
||||
],
|
||||
x1_ba: [
|
||||
{ required: true, message: 'Please input rate for X1 BA', trigger: 'change'},
|
||||
{ type: 'number', message: 'Rate must be a number'}
|
||||
],
|
||||
x2_cash: [
|
||||
{ required: true, message: 'Please input rate for X2 Cash', trigger: 'change'},
|
||||
{ type: 'number', message: 'Rate must be a number'}
|
||||
],
|
||||
x2_cheque: [
|
||||
{ required: true, message: 'Please input rate for X2 Cheque', trigger: 'change'},
|
||||
{ type: 'number', message: 'Rate must be a number'}
|
||||
],
|
||||
x2_ba: [
|
||||
{ required: true, message: 'Please input rate for X2 BA', trigger: 'change'},
|
||||
{ type: 'number', message: 'Rate must be a number'}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: mapGetters({
|
||||
@@ -94,6 +124,10 @@ export default {
|
||||
role: 'auth/role'
|
||||
}),
|
||||
|
||||
mounted () {
|
||||
this.getRate()
|
||||
},
|
||||
|
||||
methods: {
|
||||
setLocale (locale) {
|
||||
if (this.$i18n.locale !== locale) {
|
||||
@@ -101,23 +135,88 @@ export default {
|
||||
|
||||
this.$store.dispatch('lang/setLocale', { locale })
|
||||
}
|
||||
}
|
||||
},
|
||||
beforeCreate() {
|
||||
axios
|
||||
.get('/api/rate/' + this.$route.params.id)
|
||||
.then((response) => {
|
||||
},
|
||||
getRate() {
|
||||
let $this = this
|
||||
axios.get('api/rate').then(response => {
|
||||
this.rate = response.data
|
||||
|
||||
}).catch((error) => {
|
||||
console.log(error)
|
||||
this.$router.push({
|
||||
name: 'notfound'
|
||||
})
|
||||
console.log(this.rate)
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
},
|
||||
|
||||
createRate: function () {
|
||||
this.loading = true,
|
||||
this.dialogFormVisible1 = true
|
||||
let newRate = {
|
||||
x1_cash: this.rateForm.x1_cash,
|
||||
x1_cheque: this.rateForm.x1_cheque,
|
||||
x1_ba: this.rateForm.x1_ba,
|
||||
x2_cash: this.rateForm.x2_cash,
|
||||
x2_cheque: this.rateForm.x2_cheque,
|
||||
x2_ba: this.rateForm.x2_ba
|
||||
}
|
||||
|
||||
console.log(newRate)
|
||||
axios.post('api/update-rate', newRate)
|
||||
.then((response) => {
|
||||
this.loading = false
|
||||
this.rate = response.data
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error)
|
||||
this.loading = false
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: 'Error : All rate must be inserted',
|
||||
type: 'error',
|
||||
duration: 10000
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
updateRate(formName) {
|
||||
this.loading = true
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
let newRate = {
|
||||
x1_cash: this.rateForm.x1_cash,
|
||||
x1_cheque: this.rateForm.x1_cheque,
|
||||
x1_ba: this.rateForm.x1_ba,
|
||||
x2_cash: this.rateForm.x2_cash,
|
||||
x2_cheque: this.rateForm.x2_cheque,
|
||||
x2_ba: this.rateForm.x2_ba,
|
||||
}
|
||||
|
||||
axios.post('/api/update-rate', newRate)
|
||||
.then((response) => {
|
||||
this.loading = false
|
||||
this.rate = response.data
|
||||
|
||||
})
|
||||
.catch((error) => {
|
||||
this.loading = false
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: 'Error : All rate must be inserted',
|
||||
type: 'error',
|
||||
duration: 10000
|
||||
})
|
||||
})
|
||||
} else {
|
||||
this.loading = false
|
||||
DoneUpdateRateDialogVisible = false
|
||||
UpdateRateDialogVisible = true
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: 'Please fill the form',
|
||||
type: 'error',
|
||||
duration: 10000
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -353,11 +353,16 @@
|
||||
console.log(error)
|
||||
|
||||
// TODO : Show error message
|
||||
|
||||
})
|
||||
|
||||
} else {
|
||||
this.loading_btn = false
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: 'Please fill the supplier form',
|
||||
type: 'error',
|
||||
duration: 10000
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
@@ -200,12 +200,14 @@
|
||||
</div>
|
||||
<el-row :gutter="12" style="text-align:center">
|
||||
<el-col :span="20" style="text-align:center">
|
||||
|
||||
|
||||
<canvas id="myCanvas" ref="myCanvas" v-insert-message="supplier_booking"></canvas>
|
||||
<img id="banklogo" src="/banklogo.png" style="display: none"/>
|
||||
<br>
|
||||
<el-button @click="downloadReport()" type="text">Download Now</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
<br>
|
||||
<br>
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>User BankinSlip</span>
|
||||
@@ -217,11 +219,11 @@
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
<br>
|
||||
<br>
|
||||
<el-card class="box-card">
|
||||
<el-row :gutter="12">
|
||||
<el-col :span="22" style="text-align:center">
|
||||
<el-button :loading="loading_btn" @click="$router.go(-1)" type="primary">Edit</el-button>
|
||||
<el-button :loading="loading_btn" @click="goToSupplierBooking" type="primary">Edit</el-button>
|
||||
<el-button :loading="loading_btn" @click="completeReport" type="success">Done</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@@ -237,6 +239,7 @@
|
||||
<script>
|
||||
import ProgressTrack from '~/components/AdminProgressTrack'
|
||||
import axios from 'axios'
|
||||
import Canvas2Image from 'canvas2image'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
@@ -252,9 +255,11 @@
|
||||
bia: null,
|
||||
user_bankslip_path: null,
|
||||
},
|
||||
supplier_booking:{
|
||||
},
|
||||
supplier: null,
|
||||
supplier_options: null,
|
||||
|
||||
exampleContent: "This is TEXT"
|
||||
|
||||
}
|
||||
},
|
||||
@@ -279,43 +284,239 @@
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
axios
|
||||
.get('/api/supplier-booking/' + this.$route.params.id)
|
||||
.then((response) => {
|
||||
loading.close()
|
||||
this.supplier_booking = response.data
|
||||
}).catch((error) => {
|
||||
console.log(error)
|
||||
loading.close()
|
||||
this.$router.push({
|
||||
name: 'notfound'
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
|
||||
},
|
||||
methods: {
|
||||
completeReport(){
|
||||
downloadReport(){
|
||||
let canvas = document.getElementById('myCanvas')
|
||||
var dataString = canvas.toDataURL("image/png");
|
||||
console.log(dataString)
|
||||
var link = document.createElement("a");
|
||||
link.download = 'image';
|
||||
link.href = dataString;
|
||||
link.click();
|
||||
},
|
||||
goToSupplierBooking(){
|
||||
this.$router.push({
|
||||
name: 'booking.admin.supplier',
|
||||
params: this.$route.params.id
|
||||
})
|
||||
},
|
||||
completeReport() {
|
||||
// TODO : send request to change status
|
||||
this.loading_btn = true
|
||||
axios
|
||||
.post('/api/booking/' + this.$route.params.id + '/confirm-supplier')
|
||||
.then((response) => {
|
||||
this.loading_btn = false
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: 'Success, please comeback after getting china bankslip',
|
||||
type: 'success',
|
||||
duration: 5000
|
||||
.post('/api/booking/' + this.$route.params.id + '/confirm-supplier')
|
||||
.then((response) => {
|
||||
this.loading_btn = false
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: 'Success, please comeback after getting china bankslip',
|
||||
type: 'success',
|
||||
duration: 5000
|
||||
})
|
||||
this.$router.push({
|
||||
name: 'home'
|
||||
})
|
||||
//this.booking_details = response.data
|
||||
}).catch((error) => {
|
||||
this.loading_btn = false
|
||||
console.log(error)
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: 'Suceess',
|
||||
type: 'success',
|
||||
duration: 5000
|
||||
})
|
||||
})
|
||||
this.$router.push({
|
||||
name: 'home'
|
||||
})
|
||||
//this.booking_details = response.data
|
||||
}).catch((error) => {
|
||||
this.loading_btn = false
|
||||
console.log(error)
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: 'Suceess',
|
||||
type: 'success',
|
||||
duration: 5000
|
||||
})
|
||||
})
|
||||
this.$router.push({
|
||||
this.$router.push({
|
||||
name: 'booking.admin.cnslip',
|
||||
params: {id: this.$route.params.id }
|
||||
params: {
|
||||
id: this.$route.params.id
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
},
|
||||
directives: {
|
||||
insertMessage: function (canvasElement, binding) {
|
||||
////////////////// variable //////////////////////////
|
||||
var canvasWidth = 450;
|
||||
var rowHeight = [20, 40, 60, 80, 100, 120, 140, 170, 190, 210, 230, 250, 270, 290, 310, 330, 350, 390, 410,
|
||||
470, 490, 510, 610, 630
|
||||
]
|
||||
const canvasHeight = rowHeight[rowHeight.length - 1];
|
||||
|
||||
var column1X = 220;
|
||||
var column2X = 320;
|
||||
var column3X = 420;
|
||||
|
||||
///////////////////Canvast Init////////////////////
|
||||
var canvas = document.getElementById("myCanvas");
|
||||
canvas.width = canvasWidth;
|
||||
canvas.height = canvasHeight;
|
||||
// Get canvas context
|
||||
var ctx = canvasElement.getContext("2d");
|
||||
// Clear the canvas
|
||||
ctx.clearRect(0, 0, 300, 150);
|
||||
|
||||
ctx.fillStyle = "#FFFFFF";
|
||||
ctx.fillRect(0, 0, canvasWidth, rowHeight[0]);
|
||||
for (var i = 1; i < rowHeight.length; i++) {
|
||||
if (i % 2 == 1)
|
||||
ctx.fillStyle = "#A9D08E";
|
||||
else
|
||||
ctx.fillStyle = "#FFFFFF";
|
||||
ctx.fillRect(0, rowHeight[i - 1], canvasWidth, rowHeight[i]);
|
||||
}
|
||||
///////////// fillup with text////////////////
|
||||
//// config canvas
|
||||
ctx.fillStyle = "#000000";
|
||||
ctx.font = "13px Arial";
|
||||
ctx.textAlign = "right";
|
||||
//// Row 1
|
||||
ctx.fillText("Payment Voucher :", column1X, rowHeight[1] - 5);
|
||||
ctx.fillText(binding.value.id, column3X, rowHeight[1] - 5);
|
||||
//// Row 2
|
||||
ctx.fillText("Date :", column1X, rowHeight[2] - 5);
|
||||
ctx.fillText(binding.value.date, column3X, rowHeight[2] - 5);
|
||||
//// Row 3
|
||||
ctx.fillText("Marking :", column1X, rowHeight[3] - 5);
|
||||
ctx.font = "bold 14px Arial";
|
||||
ctx.fillStyle = "#0070D5";
|
||||
ctx.fillText("CIEF/605HOS", column3X, rowHeight[3] - 5);
|
||||
ctx.fillStyle = "#000000";
|
||||
ctx.font = "13px Arial";
|
||||
//// Row 4
|
||||
ctx.fillText("Payment For(Order No.) :", column1X, rowHeight[4] - 5);
|
||||
ctx.fillText(binding.value.id, column3X, rowHeight[4] - 5);
|
||||
//// Row 4
|
||||
ctx.fillText("Payment For :", column1X, rowHeight[5] - 5);
|
||||
ctx.fillText("Full Payment", column3X, rowHeight[5] - 5);
|
||||
//// Row 5
|
||||
ctx.fillText("Payment Method :", column1X, rowHeight[6] - 5);
|
||||
ctx.fillText(binding.value.payment_method, column3X, rowHeight[6] - 5);
|
||||
//// Row 6
|
||||
ctx.fillText("Remark :", column1X, rowHeight[7] - 10);
|
||||
//// Row 7
|
||||
// Empty
|
||||
//// Row 8
|
||||
ctx.fillText("MYR/RM :", column1X, rowHeight[9] - 5);
|
||||
ctx.fillText("MYR", column2X, rowHeight[9] - 5);
|
||||
ctx.font = "bold 14px Arial";
|
||||
ctx.fillText(binding.value.transfer_amount, column3X, rowHeight[9] - 5);
|
||||
ctx.font = "13px Arial";
|
||||
//// Row 8
|
||||
ctx.fillText("* RATE :", column1X, rowHeight[10] - 5);
|
||||
ctx.fillText(binding.value.rate, column3X, rowHeight[10] - 5);
|
||||
//// Row 9
|
||||
// Empty
|
||||
//// Row 10
|
||||
ctx.font = "bold 14px Arial";
|
||||
ctx.fillText("CNY", column2X, rowHeight[12] - 5);
|
||||
ctx.fillText(binding.value.amountInRMB, column3X, rowHeight[12] - 5);
|
||||
ctx.font = "13px Arial";
|
||||
//line
|
||||
ctx.beginPath();
|
||||
ctx.lineWidth = 1;
|
||||
ctx.moveTo(column1X + 30, rowHeight[11]);
|
||||
ctx.lineTo(column3X + 20, rowHeight[11]);
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.lineWidth = 2;
|
||||
ctx.moveTo(column1X + 30, rowHeight[12]);
|
||||
ctx.lineTo(column3X + 20, rowHeight[12]);
|
||||
ctx.stroke();
|
||||
//// Row 11
|
||||
ctx.fillText("MYR/RM :", column1X, rowHeight[14] - 5);
|
||||
ctx.fillText("MYR", column2X, rowHeight[14] - 5);
|
||||
ctx.fillText("4830.68", column3X, rowHeight[14] - 5);
|
||||
//// Row 12
|
||||
ctx.fillText("Billing(1.0%) :", column1X, rowHeight[15] - 5);
|
||||
ctx.fillText("MYR", column2X, rowHeight[15] - 5);
|
||||
ctx.fillText(binding.value.billing_amount, column3X, rowHeight[15] - 5);
|
||||
//// Row 13
|
||||
ctx.fillText("+ SALES TAX (10%) :", column1X, rowHeight[16] - 5);
|
||||
ctx.fillText("MYR", column2X, rowHeight[16] - 5);
|
||||
ctx.fillText(binding.value.salestax_amount, column3X, rowHeight[16] - 5);
|
||||
//// Row 14
|
||||
ctx.fillText("+ GST 6% :", column1X, rowHeight[17] - 15);
|
||||
ctx.fillText("MYR", column2X, rowHeight[17] - 15);
|
||||
ctx.fillText("289.84", column3X, rowHeight[17] - 15);
|
||||
//// Row 15
|
||||
ctx.font = "bold 14px Arial";
|
||||
ctx.fillText("Customer Bank In Amount :", column1X, rowHeight[18] - 5);
|
||||
ctx.fillStyle = "#0070D5";
|
||||
ctx.fillText("MYR", column2X, rowHeight[18] - 5);
|
||||
ctx.fillText(binding.value.amountInRMB, column3X, rowHeight[18] - 5);
|
||||
ctx.fillStyle = "#000000";
|
||||
ctx.font = "13px Arial";
|
||||
//line
|
||||
ctx.lineWidth = 1;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(column1X + 30, rowHeight[17]);
|
||||
ctx.lineTo(column3X + 20, rowHeight[17]);
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(column1X + 30, rowHeight[18] + 1);
|
||||
ctx.lineTo(column3X + 20, rowHeight[18] + 1);
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(column1X + 30, rowHeight[18] - 2);
|
||||
ctx.lineTo(column3X + 20, rowHeight[18] - 2);
|
||||
ctx.stroke();
|
||||
//// Row 16
|
||||
ctx.fillText("Rebate :", column1X, rowHeight[19] - 25);
|
||||
ctx.fillText("CNY", column2X, rowHeight[19] - 25);
|
||||
ctx.fillText("224.68", column3X, rowHeight[19] - 25);
|
||||
//// Row 16
|
||||
ctx.font = "bold 14px Arial";
|
||||
ctx.fillText("Bank In to Account Below :", column1X, rowHeight[20] - 5);
|
||||
ctx.font = "bold italic 15px Arial";
|
||||
ctx.fillStyle = "#0070D5";
|
||||
ctx.fillText("CNY", column2X, rowHeight[20] - 5);
|
||||
ctx.fillText("7692.17", column3X - 20, rowHeight[20] - 5);
|
||||
ctx.fillStyle = "#000000";
|
||||
ctx.font = "13px Arial";
|
||||
//// Row 17
|
||||
//// Row 18
|
||||
//// Row 19
|
||||
var img = new Image();
|
||||
img.src = "/banklogo.png";
|
||||
img.crossOrigin = "anonymous";
|
||||
var maxwidth = 70;
|
||||
var ratio = maxwidth / img.width;
|
||||
var offset = ((rowHeight[22] - rowHeight[21]) / 2) - (img.height * ratio / 2);
|
||||
var y = rowHeight[21] + offset; // to make it always center
|
||||
|
||||
img.onload=function(){
|
||||
ctx.drawImage(img, 50, 530, 80, 50);
|
||||
};
|
||||
|
||||
// text
|
||||
ctx.font = "bold 14px Arial";
|
||||
ctx.textAlign = "center";
|
||||
ctx.fillText("China beneficiary Account", column2X - 40, rowHeight[22] - 80);
|
||||
ctx.fillText("户名 : 奕继椿", column2X - 40, rowHeight[22] - 60);
|
||||
ctx.fillText("6226 1906 8014 3314", column2X - 40, rowHeight[22] - 40);
|
||||
ctx.fillText("民生银行 深川红荔支行", column2X - 40, rowHeight[22] - 20);
|
||||
ctx.font = "13px Arial";
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -358,23 +358,26 @@
|
||||
})
|
||||
})
|
||||
.catch((error) => {
|
||||
this.loading = false
|
||||
console.log(error)
|
||||
this.loading_btn = false
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: 'Please upload your bankin slip first.',
|
||||
type: 'warning',
|
||||
duration: 10000
|
||||
})
|
||||
console.log(error)
|
||||
this.loading_btn = false
|
||||
})
|
||||
|
||||
} else {
|
||||
this.loading_btn = false
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: 'Please upload your bankin slip first.',
|
||||
type: 'warning',
|
||||
duration: 10000
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
},
|
||||
handleRemove(file, fileList) {
|
||||
console.log(file, fileList);
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<div align="center">
|
||||
<h4 style="margin-top:5%;"></h4>
|
||||
<br>
|
||||
<div v-if="booking_details.user_po_path !== null">
|
||||
<div v-if="booking_details.user_po_path">
|
||||
<h4>Upload Invoice</h4>
|
||||
</div>
|
||||
<div v-else>
|
||||
@@ -181,7 +181,7 @@
|
||||
</el-row>
|
||||
<br>
|
||||
|
||||
<el-row v-if="booking_details.user_po_path !== null" :gutter="12" justify="center" align="center">
|
||||
<el-row v-if="booking_details.user_po_path" :gutter="12" justify="center" align="center">
|
||||
<el-col :span="12">
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
@@ -250,7 +250,6 @@
|
||||
amount: null,
|
||||
bia: null,
|
||||
user_bankslip_path: null,
|
||||
user_po_path: null,
|
||||
},
|
||||
supplier: null,
|
||||
supplier_options: null,
|
||||
@@ -316,6 +315,7 @@
|
||||
.then((response) => {
|
||||
loading.close()
|
||||
this.booking_details = response.data
|
||||
console.log(this.booking_details)
|
||||
}).catch((error) => {
|
||||
console.log(error)
|
||||
loading.close()
|
||||
@@ -356,6 +356,9 @@
|
||||
},
|
||||
handlePreview(file) {
|
||||
console.log(file);
|
||||
},
|
||||
handleExceed(file){
|
||||
console.log(file)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,4 +1,7 @@
|
||||
<template>
|
||||
<div>
|
||||
<div align="right">
|
||||
<el-button icon="el-icon-refresh" type="primary" size="mini" @click="RefreshBooking()">Refresh</el-button></div>
|
||||
<!-- Booking Table -->
|
||||
<el-row :gutter="20">
|
||||
<div>
|
||||
@@ -41,6 +44,7 @@
|
||||
</div>
|
||||
</el-row>
|
||||
<!-- Booking Table-end -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -52,26 +56,20 @@ export default {
|
||||
return {
|
||||
status: null,
|
||||
bookingTable: [
|
||||
]
|
||||
],
|
||||
url: 'api/admin/booking',
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
axios
|
||||
.get('/api/admin/booking')
|
||||
.then((response) => {
|
||||
console.log(response.data)
|
||||
this.bookingTable = response.data
|
||||
|
||||
// loading.close()
|
||||
}).catch((error) => {
|
||||
// console.log(error)
|
||||
// loading.close()
|
||||
// this.$router.push({
|
||||
// name: 'notfound'
|
||||
// })
|
||||
})
|
||||
this.RefreshBooking()
|
||||
},
|
||||
methods: {
|
||||
RefreshBooking() {
|
||||
let $this = this
|
||||
axios.get(this.url).then(response => {
|
||||
this.bookingTable = response.data
|
||||
})
|
||||
},
|
||||
filterTag (value, row) {
|
||||
return row.tag === value
|
||||
},
|
||||
|
||||
@@ -205,7 +205,7 @@
|
||||
<el-row justify="center" align="center">
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>BankinSlip</span>
|
||||
<span>Banking Slip</span>
|
||||
<!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
|
||||
</div>
|
||||
<el-row :gutter="12">
|
||||
|
||||
@@ -32,6 +32,15 @@
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table class="table-responsive el-table" style="display:table; width:50%; margin: 0 auto;" align="center">
|
||||
<tr>
|
||||
<td align="center">TC Global Trade (M) Sdn Bhd (1190583-A) <br> GST : 001408413696 <br> HLB : 2200 0010 531 <br> MBB : 5148 4233 6341</td>
|
||||
|
||||
</tr>
|
||||
<!-- <tr><td align="center">GST : 001408413696</td></tr>
|
||||
<tr><td align="center">HLB : 2200 0010 531</td></tr>
|
||||
<tr><td align="center">MBB : 5148 4233 6341</td></tr> -->
|
||||
</table>
|
||||
</el-row>
|
||||
<br>
|
||||
|
||||
|
||||
@@ -57,13 +57,13 @@
|
||||
<div class="grid-content bg-purple" align="left">X1 :</div>
|
||||
</el-col>
|
||||
<el-col>
|
||||
<div class="grid-content bg-purple" align="center">1.70</div>
|
||||
<div class="grid-content bg-purple" align="center">{{ rate.x1_cash }}</div>
|
||||
</el-col>
|
||||
<el-col>
|
||||
<div class="grid-content bg-purple" align="center">1.64</div>
|
||||
<div class="grid-content bg-purple" align="center">{{ rate.x1_cheque }}</div>
|
||||
</el-col>
|
||||
<el-col>
|
||||
<div class="grid-content bg-purple" align="center">1.62</div>
|
||||
<div class="grid-content bg-purple" align="center">{{ rate.x1_ba }}</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
@@ -104,13 +104,13 @@
|
||||
<div class="grid-content bg-purple" align="left">X2 :</div>
|
||||
</el-col>
|
||||
<el-col>
|
||||
<div class="grid-content bg-purple" align="center">1.56</div>
|
||||
<div class="grid-content bg-purple" align="center">{{ rate.x2_cash }}</div>
|
||||
</el-col>
|
||||
<el-col>
|
||||
<div class="grid-content bg-purple" align="center">1.64</div>
|
||||
<div class="grid-content bg-purple" align="center">{{ rate.x2_cheque }}</div>
|
||||
</el-col>
|
||||
<el-col>
|
||||
<div class="grid-content bg-purple" align="center">1.62</div>
|
||||
<div class="grid-content bg-purple" align="center">{{ rate.x2_ba }}</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
@@ -230,12 +230,13 @@
|
||||
</span>
|
||||
</el-dialog>
|
||||
<!-- Booking_confirmation_popup -->
|
||||
|
||||
|
||||
<br>
|
||||
<br>
|
||||
<hr>
|
||||
|
||||
<!-- Booking Table -->
|
||||
<div align="right">
|
||||
<el-button icon="el-icon-refresh" type="primary" size="mini" @click="RefreshBooking()">Refresh</el-button></div>
|
||||
<!-- Booking Table -->
|
||||
<el-row :gutter="20">
|
||||
<div>
|
||||
<el-table :data="bookingTable">
|
||||
@@ -275,9 +276,17 @@
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</el-row>
|
||||
</el-row><br><br>
|
||||
<div align="right">
|
||||
<el-button type="primary" size="mini" @click="fetchPaginateBooking(pagination.prev_page_url)" :disabled="!pagination.prev_page_url">
|
||||
Previous
|
||||
</el-button>
|
||||
<span>Page {{pagination.current_page}} of {{pagination.last_page}}</span>
|
||||
<el-button type="primary" size="mini" @click="fetchPaginateBooking(pagination.next_page_url)" :disabled="!pagination.next_page_url">
|
||||
Next
|
||||
</el-button>
|
||||
</div>
|
||||
<!-- Booking Table-end -->
|
||||
|
||||
</el-main>
|
||||
</template>
|
||||
<style>
|
||||
@@ -300,6 +309,14 @@ export default {
|
||||
term: '',
|
||||
amount: ''
|
||||
}),
|
||||
rate: {
|
||||
x1_ba: null,
|
||||
x1_cheque: null,
|
||||
x1_cash: null,
|
||||
x2_ba: null,
|
||||
x2_cash: null,
|
||||
x2_cheque: null,
|
||||
},
|
||||
loading: false,
|
||||
status: '',
|
||||
booking: {
|
||||
@@ -355,6 +372,8 @@ export default {
|
||||
formLabelWidth: '0px',
|
||||
bookingTable: [
|
||||
],
|
||||
url: 'api/booking',
|
||||
pagination: [],
|
||||
bookingConfirmTable: {
|
||||
date: 'undefined',
|
||||
marking: 'undefined',
|
||||
@@ -369,20 +388,45 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
axios
|
||||
.get('/api/booking/')
|
||||
.then((response) => {
|
||||
console.log(response)
|
||||
this.bookingTable = response.data.data
|
||||
// loading.close()
|
||||
}).catch((error) => {
|
||||
// loading.close()
|
||||
// this.$router.push({
|
||||
// name: 'notfound'
|
||||
// })
|
||||
})
|
||||
this.getBooking()
|
||||
this.RefreshBooking()
|
||||
this.getRate()
|
||||
},
|
||||
methods: {
|
||||
getRate(){
|
||||
let $this = this
|
||||
axios.get(this.url).then(response => {
|
||||
this.bookingTable = response.data.data
|
||||
|
||||
$this.makePagination(response.data)
|
||||
})
|
||||
},
|
||||
getBooking() {
|
||||
let $this = this
|
||||
axios.get('api/rate').then(response => {
|
||||
this.rate = response.data
|
||||
console.log(this.rate)
|
||||
})
|
||||
},
|
||||
RefreshBooking() {
|
||||
let $this = this
|
||||
axios.get(this.url).then(response => {
|
||||
this.bookingTable = response.data.data
|
||||
})
|
||||
},
|
||||
makePagination(data){
|
||||
let pagination = {
|
||||
current_page: data.current_page,
|
||||
last_page: data.last_page,
|
||||
next_page_url: data.next_page_url,
|
||||
prev_page_url: data.prev_page_url
|
||||
}
|
||||
this.pagination = pagination
|
||||
},
|
||||
fetchPaginateBooking(url) {
|
||||
this.url = url
|
||||
this.getBooking()
|
||||
},
|
||||
// TODO fetch booking data on load
|
||||
formatter (row, column) {
|
||||
return row.address
|
||||
@@ -405,13 +449,6 @@ export default {
|
||||
this.dialogFormVisible = true
|
||||
this.term = newterm
|
||||
},
|
||||
BookingList () {
|
||||
axios.get('api/booking')
|
||||
.then((response) => {
|
||||
console.log(response)
|
||||
this.list = response.data
|
||||
})
|
||||
},
|
||||
// Get calculation before submitting booking
|
||||
getCalculationValue (formName) {
|
||||
this.loading = true
|
||||
@@ -437,42 +474,61 @@ export default {
|
||||
this.dialogFormVisible1 = true
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: error.response.data.message,
|
||||
type: 'error',
|
||||
duration: 10000
|
||||
});
|
||||
this.loading = false
|
||||
console.log(error)
|
||||
})
|
||||
} else {
|
||||
|
||||
this.loading = false
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: 'Please fill the booking form in full.',
|
||||
type: 'error',
|
||||
duration: 10000
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
createBooking: function () {
|
||||
this.loading = true,
|
||||
this.dialogFormVisible1 = true
|
||||
let newBooking = {
|
||||
account_name: this.bookingForm.account_name,
|
||||
account_num: this.bookingForm.account_num,
|
||||
bank_name: this.bookingForm.bank_name,
|
||||
bank_branch: this.bookingForm.bank_branch,
|
||||
amount: this.booking.amount,
|
||||
term: this.term
|
||||
}
|
||||
|
||||
let newBooking = {
|
||||
account_name: this.bookingForm.account_name,
|
||||
account_num: this.bookingForm.account_num,
|
||||
bank_name: this.bookingForm.bank_name,
|
||||
bank_branch: this.bookingForm.bank_branch,
|
||||
amount: this.booking.amount,
|
||||
term: this.term
|
||||
}
|
||||
console.log(newBooking)
|
||||
axios.post('api/booking', newBooking)
|
||||
.then((response) => {
|
||||
this.loading = false
|
||||
// push with return id
|
||||
this.$router.push({
|
||||
name: 'booking.user.upload',
|
||||
params: {id: response.data.id }
|
||||
})
|
||||
|
||||
console.log(newBooking)
|
||||
axios.post('api/booking', newBooking)
|
||||
.then((response) => {
|
||||
this.loading = false
|
||||
// push with return id
|
||||
this.$router.push({
|
||||
name: 'booking.user.upload',
|
||||
params: {id: response.data.id }
|
||||
})
|
||||
|
||||
// pass variable to another router
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error)
|
||||
})
|
||||
// pass variable to another router
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error)
|
||||
this.loading = false
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: 'Internal server issues. Please contact support',
|
||||
type: 'error',
|
||||
duration: 10000
|
||||
})
|
||||
|
||||
})
|
||||
},
|
||||
BookingStatus (status, booking_id) {
|
||||
console.log(status)
|
||||
|
||||
@@ -39,7 +39,7 @@ const TransactionHistory = () => import('~/pages/admin/transaction-history').the
|
||||
const UploadSupplierBankSlip = () => import('~/pages/admin/upload-supplier-bank-slip').then(m => m.default || m)
|
||||
|
||||
export default [
|
||||
{ path: '/', name: 'welcome', component: Welcome },
|
||||
{ path: '/', name: 'welcome', component: Login },
|
||||
{ path: '/login', name: 'login', component: Login },
|
||||
{ path: '/register', name: 'register', component: Register },
|
||||
{ path: '/password/reset', name: 'password.request', component: PasswordEmail },
|
||||
|
||||
Reference in New Issue
Block a user