omair/exchange
1
0
Fork 0
mirror of https://gitlab.com/omair-personal/exchange.git synced 2026-08-19 04:24:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix/ButtonName

Browse Source
This commit is contained in:
lonetrinity
2018-09-12 16:29:20 +08:00
parent c639f04db4 1277240304
commit aab3de8246
138 changed files with 14039 additions and 20239 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/assets/js/app.js
+17 -19
View File
@@ -10,26 +10,24 @@ import locale from 'element-ui/lib/locale/lang/en'
import '~/plugins'
import '~/components'
import VeeValidate from 'vee-validate';
const config = {
errorBagName: 'errors', // change if property conflicts.
fieldsBagName: 'fields',
delay: 0,
// locale: 'zh_CN',
strict: true,
enableAutoClasses: false,
classNames: {
touched: 'touched', // the control has been blurred
untouched: 'untouched', // the control hasn't been blurred
valid: 'valid', // model is valid
invalid: 'invalid', // model is invalid
pristine: 'pristine', // control has not been interacted with
dirty: 'dirty' // control has been interacted with
},
events: 'blur',
inject: true
};
Vue.use(VeeValidate, config);
errorBagName: 'errors', // change if property conflicts.
fieldsBagName: 'fields',
delay: 0,
// locale: 'zh_CN',
strict: true,
enableAutoClasses: false,
classNames: {
touched: 'touched', // the control has been blurred
untouched: 'untouched', // the control hasn't been blurred
valid: 'valid', // model is valid
invalid: 'invalid', // model is invalid
pristine: 'pristine', // control has not been interacted with
dirty: 'dirty' // control has been interacted with
},
events: 'blur',
inject: true
}
Vue.config.productionTip = false
resources/assets/js/components/AdminProgressTrack.vue
+3 -3
View File
@@ -1,10 +1,10 @@
<template>
<el-row>
<el-steps :value="(value.term === 'x1_ba' || value.term === 'x2_cheque') && value.status > 2 ? value.status - 2 : value.status" :active="(value.term === 'x1_ba' || value.term === 'x2_cheque') && value.status > 2 ? value.status - 2 : value.status" :align-center="true" process-status="wait" finish-status="success">
<el-steps :value="value.status" :active="value.status" :align-center="true" process-status="wait" finish-status="success">
<el-step title="Booking"/>
<el-step title="Verification"/>
<el-step title="Supplier Booking" v-if="!(value.term === 'x1_ba' || value.term === 'x2_cheque')"/>
<el-step title="Supplier Report" v-if="!(value.term === 'x1_ba' || value.term === 'x2_cheque')"/>
<el-step title="Supplier Booking"/>
<el-step title="Supplier Report"/>
<el-step title="Upload China Bankslip To Booking"/>
<el-step title="Purchase Order/Invoice"/>
<el-step title="Completed"/>
resources/assets/js/components/LocaleDropdown.vue
+10 -9
View File
@@ -33,23 +33,23 @@
{{ $t('Transaction History') }}
</router-link>
</li>
<li v-if="(user && role == 'admin')" class="nav-item">
<!-- TODO: remove entirely including controller and routes <li v-if="(user && role == 'admin')" class="nav-item">
<router-link :to="{ name: 'admin.complete' }" class="nav-link">
{{ $t('Completed Orders') }}
</router-link>
</li>
</li> -->
</ul>
<!-- update rate dialog start -->
<el-dialog align="center" :visible.sync="UpdateRateDialogVisible" width="900px">
<el-form :inline="true" align="center" ref="rate" :model="rate" :rules="rules">
<el-form-item prop="x1_cash" >X1: &nbsp;&nbsp;&nbsp;Cash : <el-input v-model.number="rate.x1_cash" style=width:25% ></el-input></el-form-item>
<el-form-item prop="x1_cheque" >Cheque : <el-input v-model.number="rate.x1_cheque" style=width:25%></el-input></el-form-item>
<el-form-item prop="x1_ba">BA : <el-input v-model.number="rate.x1_ba" style=width:25%></el-input></el-form-item>
<el-form-item prop="x1_cash" >X1: &nbsp;&nbsp;&nbsp;Cash : <el-input v-model.number="rate.x1_cash" style=width:60% ></el-input></el-form-item>
<el-form-item prop="x1_cheque" >Cheque : <el-input v-model.number="rate.x1_cheque" style=width:60%></el-input></el-form-item>
<el-form-item prop="x1_ba">BA : <el-input v-model.number="rate.x1_ba" style=width:60%></el-input></el-form-item>
<br>
<el-form-item prop="x2_cash" >X2: &nbsp;&nbsp;&nbsp;Cash : <el-input v-model.number="rate.x2_cash" style=width:25% ></el-input></el-form-item>
<el-form-item prop="x2_cheque" >Cheque : <el-input v-model.number="rate.x2_cheque" style=width:25%></el-input></el-form-item>
<el-form-item prop="x2_ba" >BA : <el-input v-model.number="rate.x2_ba" style=width:25%></el-input></el-form-item>
<el-form-item prop="x2_cash" >X2: &nbsp;&nbsp;&nbsp;Cash : <el-input v-model.number="rate.x2_cash" style=width:60% ></el-input></el-form-item>
<el-form-item prop="x2_cheque" >Cheque : <el-input v-model.number="rate.x2_cheque" style=width:60%></el-input></el-form-item>
<el-form-item prop="x2_ba" >BA : <el-input v-model.number="rate.x2_ba" style=width:60%></el-input></el-form-item>
</el-form>
<br>
<div align="center">
@@ -139,7 +139,7 @@ export default {
this.rate = response.data
})
},
createRate: function () {
createRate: function () { // TODO : we do not have create rate, only update rate. Delete this ?
this.loading = true,
this.dialogFormVisible1 = true
let newRate = {
@@ -210,6 +210,7 @@ export default {
})
},
}
}
resources/assets/js/components/Navbar.vue
+142 -37
View File
@@ -5,6 +5,36 @@
{{ appName }}
</router-link>
<template v-if="user">
<!-- <el-dropdown trigger="click" align="right">
<el-badge :value="bellBadge > 0 ? bellBadge : ''" class="item">
<el-button icon="el-icon-bell" circle @click="refreshNoti()"></el-button>
</el-badge>
<el-dropdown-menu slot="dropdown">
<div id="notification">
<div v-for="item in notification" :key="item">
<a v-on:click.prevent='readNotification(item.id);navigateTo(item.link)'>
<el-dropdown-item>
<b v-if="item.is_read == 0">
{{item.detail}}
</b>
<span v-else >
{{item.detail}}
</span>
<br/>
<span class="opacity80">
{{item.time_interval}}
</span>
</el-dropdown-item>
</a>
</div>
</div>
<el-button v-if="pagination.next_page_url != null" id="notification-load-more" v-on:click='fetchPaginateBooking(pagination.next_page_url)'>Load more</el-button>
<div v-else id="notification-load-more"></div>
</el-dropdown-menu>
</el-dropdown> -->
</template>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false">
<span class="navbar-toggler-icon"/>
</button>
@@ -12,31 +42,11 @@
<div id="navbarToggler" class="collapse navbar-collapse">
<ul class="navbar-nav ml-auto">
<locale-dropdown/>
<!-- <li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li> -->
</ul>
<ul class="navbar-nav ml-auto">
<!-- Authenticated -->
<!--Authenticated -->
<template v-if="user">
<!-- <el-badge :value="12" class="item">
<el-button size="share-button"><i class="el-icon-bell"></i></el-button>
</el-badge> -->
<!-- <el-dropdown trigger="click">
<el-badge :value="12" class="item">
<el-button icon="el-icon-bell" circle></el-button>
</el-badge>
<el-dropdown-menu slot="dropdown" style="max-width: 30%" id="notification">
<a v-for="item in notification" :href="item.link">
<el-dropdown-item>
{{item.message}}
</el-dropdown-item>
</a>
</el-dropdown-menu>
</el-dropdown> -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle text-dark"
href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
@@ -57,7 +67,6 @@
</div>
</li>
</template>
</li>
<!-- Guest -->
<template v-else>
<li class="nav-item">
@@ -80,6 +89,7 @@
<script>
import { mapGetters } from 'vuex'
import LocaleDropdown from './LocaleDropdown'
import axios from 'axios'
export default {
components: {
@@ -88,29 +98,95 @@ export default {
data: () => ({
appName: window.config.appName,
notification:[{
message : "You have an unread message",
link : "http://www.google.com"
},
{
message : "There are 10 booking for your approval",
link : "http://www.yahoo.com"
}]
//notification:[],
//loadingNotification:false,
bellBadge : 0,
unread_message_length:0,
url: '/api/notification/user',
pagination: [],
}),
computed: mapGetters({
user: 'auth/user'
}),
methods: {
async logout () {
async logout(){
// Log out the user.
await this.$store.dispatch('auth/logout')
await this.$store.dispatch('auth/logout');
// Redirect to login.
this.$router.push({ name: 'login' })
}
this.$router.push({ name: 'login' });
},
// refreshNoti() {
// axios.get(this.url).then(response => {
// this.bookingTable = response.data.data
// this.notification = response.data.message.data;
// this.bellBadge = response.data.unread_message.length;
// this.makePagination(response.data.message);
// console.log(response.data);
// })
// },
// getNotification(url){
// this.notification = [];
// this.loadingNotification=true;
// axios
// .get(url)
// .then((response) => {
// this.loadingNotification=false;
// this.notification = response.data.message.data;
// this.bellBadge = response.data.unread_message.length;
// this.makePagination(response.data.message);
// console.log(response.data);
// }).catch((error) => {
// console.log(error)
// this.$router.push({
// name: 'notfound'
// })
// })
// },
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.loadingNotification=true;
if(this.url !== null){
axios
.get(url)
.then((response) => {
this.loadingNotification=false;
this.notification = this.notification.concat(response.data.message.data);
this.bellBadge = response.data.unread_message.length;
this.makePagination(response.data.message);
console.log(this.notification);
}).catch((error) => {
console.log(error)
this.$router.push({
name: 'notfound'
})
})
}
},
// readNotification(notification_id){
// axios
// .post('/api/notification/read-notification/'+notification_id)
// .then((response) => {
// this.getNotification(this.url);
// }).catch((error) => {
// console.log(error)
// this.$router.push({
// name: 'notfound'
// })
// })
// },
navigateTo(nav) {
window.location.href = nav;
}
}
}
</script>
@@ -121,4 +197,33 @@ export default {
height: 2rem;
margin: -.375rem 0;
}
.el-dropdown-menu{
height: 50%;
}
#notification{
overflow-y: scroll;
overflow-x: hidden;
max-height: 100%;
}
#notification-load-more{
position: absolute;
width: 100%;
min-height: 20px;
background: white;
border: 1px solid #dcdfe6;
}
.el-dropdown-menu__item {
line-height: 26px;
}
.opacity80{
opacity: 0.8 ;
}
::-webkit-scrollbar {
width: 0px;
background: transparent; /* make scrollbar transparent */
}
.item {
margin-top: 10px;
margin-right: 40px;
}
</style>
resources/assets/js/components/ProgressTrack.vue
+1 -21
View File
@@ -1,6 +1,6 @@
<template>
<el-row>
<el-steps class="progressBar" :value="value" :active="value" :align-center="true" process-status="wait" finish-status="success">
<el-steps class="progressBar" :value="value.status" :active="value.status" :align-center="true" process-status="wait" finish-status="success">
<el-step title="Booking"/>
<el-step title="Payment"/>
<el-step title="Order Confirmation"/>
@@ -19,32 +19,12 @@
}
}
/*
.el-steps {
padding-top: 70px;
}
.el-step .el-step__main {
transform: translateY(-70px);
}
.el-step__title.is-wait {
font-size: 10pt;
}
.el-step__title {
line-height: 1.4;
}
.el-step .is-success .el-step__line {
background-color: #67c23a;
} */
</style>
<script>
export default {
props: ['value'],
data: () => ({
status: 1
})
}
</script>
resources/assets/js/components/X2AdminProgressTrack.vue
+44
View File
@@ -0,0 +1,44 @@
<template>
<el-row>
<el-steps :value="value.status" :active="value.status" :align-center="true" process-status="wait" finish-status="success">
<el-step title="Booking"/>
<el-step title="Verification"/>
<el-step title="Supplier Booking"/>
<el-step title="Supplier Report"/>
<el-step title="Upload China Bankslip To Booking"/>
<el-step title="Completed"/>
</el-steps>
</el-row>
</template>
<style type="text/css">
/* .el-row {
margin: 20px 0;
}
.el-steps {
padding-top: 70px;
}
.el-step .el-step__main {
transform: translateY(-70px);
}
.el-step__title.is-wait {
font-size: 10pt;
}
.el-step__title {
line-height: 1.4;
}
.el-step .is-success .el-step__line {
background-color: #67c23a;
} */
</style>
<script>
export default {
props: ['value'],
data: () => ({
})
}
</script>
resources/assets/js/components/X2ProgressTrack.vue
+27
View File
@@ -0,0 +1,27 @@
<template>
<el-row>
<el-steps class="progressBar" :value="value.status" :active="value.status" :align-center="true" process-status="wait" finish-status="success">
<el-step title="Booking"/>
<el-step title="Payment"/>
<el-step title="Order Confirmation"/>
<el-step title="Order Complete"/>
</el-steps>
</el-row>
</template>
<style type="text/css">
@media screen and (max-width: 800px) {
.progressBar {
width: 60%;
}
}
</style>
<script>
export default {
props: ['value'],
data: () => ({
})
}
</script>
resources/assets/js/middleware/admin.js
-1
View File
@@ -1,7 +1,6 @@
import store from '~/store'
export default (to, from, next) => {
console.log(store.getters['auth/role'])
if (store.getters['auth/role'] !== 'admin') {
next({ name: 'home' })
} else {
resources/assets/js/pages/admin/booking/bookingDetail.vue
+6 -3
View File
@@ -1,6 +1,7 @@
<template>
<el-main>
<progress-track v-model="trackerConfig" />
<x2-progress-track v-if="(booking_details.admin_status == 'x2_cash' || booking_details.admin_status == 'x2_cheque' || booking_details.admin_status == 'x2_ba')" v-model="trackerConfig" />
<progress-track v-else v-model="trackerConfig" />
<div align="center">
<h4 style="margin-top:5%;"></h4>
@@ -28,7 +29,7 @@
<tbody>
<tr class="el-table__row">
<td class="el-table_2_column_9 is-right ">
<div class="cell">Order Number :</div>
<div class="cell">Ref No :</div>
</td>
<td class="el-table_2_column_10 is-left ">
<div class="cell">{{ booking_details.id }}</div>
@@ -211,11 +212,13 @@
</style>
<script>
import ProgressTrack from '~/components/AdminProgressTrack'
import X2ProgressTrack from '~/components/X2AdminProgressTrack'
import axios from 'axios'
export default {
components: {
'progress-track': ProgressTrack
'progress-track': ProgressTrack,
'x2-progress-track': X2ProgressTrack
},
data() {
return {
resources/assets/js/pages/admin/booking/completed.vue
+285 -60
View File
@@ -1,6 +1,7 @@
<template>
<el-main>
<progress-track v-model="trackerConfig"/>
<x2-progress-track v-if="(booking_details.admin_status == 'x2_cash' || booking_details.admin_status == 'x2_cheque' || booking_details.admin_status == 'x2_ba')" v-model="trackerConfig" />
<progress-track v-else v-model="trackerConfig" />
<div align="center">
<h4 style="margin-top:5%;">Order Completed</h4>
@@ -37,7 +38,7 @@
</div>
<el-row :gutter="12" type="flex">
<el-col :span="12" align="center">
<div v-for="cn_bankslip in booking_details.china_bankslip_path">
<div v-for="cn_bankslip in booking_details.china_bankslip_path" :key='cn_bankslip'>
<a target="_blank" :href="getURL(cn_bankslip)">
<img v-if="isImage(cn_bankslip)" v-bind:src="cn_bankslip" class="image">
<p v-else>Download</p>
@@ -66,7 +67,7 @@
</el-col>
</el-row>
<br>
<!-- bank slips END -->
<!-- bank slips END -->
<el-row justify="center" align="center">
<el-card class="box-card">
@@ -91,7 +92,7 @@
<div class="el-row" style="margin-left: -6px; margin-right: -6px;">
<div class="el-col el-col-12" style="padding-left: 6px; padding-right: 6px;">
<div class="el-table el-table--fit el-table--enable-row-hover el-table--enable-row-transition" align="center">
<div class="el-table__body-wrapper is-scrolling-none">
<table class="el-table__body" style="width: 400px;" cellspacing="0" cellpadding="0" border="0">
<colgroup>
@@ -101,7 +102,7 @@
<tbody>
<tr class="el-table__row">
<td class="el-table_2_column_9 is-right ">
<div class="cell">Order Number :</div>
<div class="cell">Ref No :</div>
</td>
<td class="el-table_2_column_10 is-left ">
<div class="cell">{{ booking_details.id }}</div>
@@ -219,7 +220,9 @@
<div class="cell"></div>
</td>
<td class="el-table_3_column_12 is-left ">
<div class="cell"><b>MYR {{ booking_details.bia }}</b></div>
<div class="cell">
<b>MYR {{ booking_details.bia }}</b>
</div>
</td>
</tr>
<tr class="el-table__row">
@@ -261,7 +264,37 @@
</el-card>
</el-row>
<br>
<el-row justify="center" align="center">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>Supplier Report</span>
<!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
</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>
<br>
<el-button @click="downloadReport()" type="text">Download Now</el-button>
</el-col>
</el-row>
</el-card>
<br>
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>User BankinSlip</span>
<!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
</div>
<el-row :gutter="12">
<el-col :span="22" style="text-align:center">
<a target="_blank" :href="getURL(booking_details.user_bankslip_path)">
<img v-if="isImage(booking_details.user_bankslip_path)" v-bind:src="booking_details.user_bankslip_path" class="image">
<p v-else>Download</p>
</a>
</el-col>
</el-row>
</el-card>
</el-row>
<br>
<el-row justify="center" align="center">
<el-card class="box-card">
<div slot="header" class="clearfix">
@@ -284,77 +317,269 @@
.booking-details {
font-weight: bold;
}
.image {
border: 1px solid #ddd;
border-radius: 4px;
margin-left: auto;
margin-right: auto;
width: 150px;
display: block;
border: 1px solid #ddd;
border-radius: 4px;
margin-left: auto;
margin-right: auto;
width: 150px;
display: block;
}
.image:hover {
box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
</style>
<script>
import VueCountdown from '@dmaksimovic/vue-countdown'
import ProgressTrack from '~/components/AdminProgressTrack'
import axios from 'axios'
import ProgressTrack from '~/components/AdminProgressTrack'
import X2ProgressTrack from '~/components/X2AdminProgressTrack'
import axios from 'axios'
export default {
components: {
'progress-track': ProgressTrack
},
data () {
return {
trackerConfig :{
export default {
components: {
'progress-track': ProgressTrack,
'x2-progress-track': X2ProgressTrack
},
data() {
return {
trackerConfig: {
status: 8,
term: null
},
loading_btn: false,
booking_details:{
supplier_booking:{},
loading_btn: false,
booking_details: {
id: null,
amount: null,
bia: null,
user_bankslip_path: null,
}
}
},
beforeCreate () {
const loading = this.$loading({
lock: true,
text: 'Please wait..',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
axios
.get('/api/admin/booking/' + this.$route.params.id)
.then((response) => {
this.booking_details = response.data
this.trackerConfig.term = response.data.term;
loading.close()
}).catch((error) => {
console.log(error)
loading.close()
this.$router.push({
name: 'notfound'
})
}
},
beforeCreate() {
const loading = this.$loading({
lock: true,
text: 'Please wait..',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
},
methods: {
getExtension(path){
return path.slice(-3);
axios
.get('/api/admin/booking/' + this.$route.params.id)
.then((response) => {
this.booking_details = response.data
this.trackerConfig.term = response.data.term;
loading.close()
}).catch((error) => {
console.log(error)
loading.close()
this.$router.push({
name: 'notfound'
})
})
axios.get('/api/supplier-booking/' + this.$route.params.id)
.then((response) => {
this.supplier_booking = response.data
loading.close()
}).catch((error) => {
console.log(error)
this.$router.push({
name: 'notfound'
})
loading.close()
})
},
isImage(path){
var ext = this.getExtension(path);
return ext === 'jpg' || ext === 'jpeg' || ext === 'bmp' || ext === 'png';
methods: {
getExtension(path) {
return path.slice(-3);
},
isImage(path) {
var ext = this.getExtension(path);
return ext === 'jpg' || ext === 'jpeg' || ext === 'bmp' || ext === 'png';
},
getURL(path) {
var getUrl = window.location;
var baseUrl = getUrl.protocol + "//" + getUrl.host;
return baseUrl + path;
}
},
getURL(path){
var getUrl = window.location;
var baseUrl = getUrl.protocol + "//" + getUrl.host;
return baseUrl + path;
directives: {
insertMessage: function (canvasElement, binding) {
setTimeout(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("Ref No. :", column1X, rowHeight[1] - 5);
ctx.fillText(binding.value.booking_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(binding.value.marking, 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.order_no, column3X, rowHeight[4] - 5);
//// Row 4
ctx.fillText("Payment For :", column1X, rowHeight[5] - 5);
ctx.fillText(binding.value.payment_for, 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.amount_in_myr, 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
ctx.fillText("REBATE :", column1X, rowHeight[11] - 5);
ctx.fillText("MYR", column2X, rowHeight[11] - 5);
ctx.font = "14px Arial";
ctx.fillText(binding.value.rebate, column3X, rowHeight[11] - 5);
ctx.font = "13px Arial";
//// 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(binding.value.amount_in_myr, 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("+ TAX " + (Math.round((binding.value.tax_rate * 100 - 100) * 100) / 100) + "% :",
column1X, rowHeight[16] - 5); // TODO : Change to percentage
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("Bank In Amount :", column1X, rowHeight[18] - 5);
ctx.fillStyle = "#0070D5";
ctx.fillText("MYR", column2X, rowHeight[18] - 5);
ctx.fillText(binding.value.amount_after_tax, 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(binding.value.amountInRMB, 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("户名 : " + binding.value.acc_name, column2X - 40, rowHeight[22] - 60);
ctx.fillText(binding.value.acc_no, column2X - 40, rowHeight[22] - 40);
ctx.fillText(binding.value.bank_name, column2X - 40, rowHeight[22] - 20);
ctx.fillText(binding.value.bank_branch, column2X - 40, rowHeight[22] - 2);
ctx.font = "13px Arial";
}, 1000, canvasElement, binding);
}
}
}
}
</script>
</script>
resources/assets/js/pages/admin/booking/supplierBooking.vue
+9 -8
View File
@@ -1,6 +1,7 @@
<template>
<el-main>
<progress-track v-model="trackerConfig" />
<x2-progress-track v-if="(booking_details.admin_status == 'x2_cash' || booking_details.admin_status == 'x2_cheque' || booking_details.admin_status == 'x2_ba')" v-model="trackerConfig" />
<progress-track v-else v-model="trackerConfig" />
<div align="center">
<h4 style="margin-top:5%;"></h4>
@@ -29,7 +30,7 @@
<tbody>
<tr class="el-table__row">
<td class="el-table_2_column_9 is-right ">
<div class="cell">Order Number :</div>
<div class="cell">Ref No :</div>
</td>
<td class="el-table_2_column_10 is-left ">
<div class="cell">{{ booking_details.id }}</div>
@@ -216,9 +217,9 @@
<el-form-item prop="rebate">
<el-input v-model="supplierBookingForm.rebate" type="text" placeholder="Rebate" style="width: 80%" />
</el-form-item>
<el-form-item prop="transfer_amount">
<!-- <el-form-item prop="transfer_amount">
<el-input v-model="supplierBookingForm.transfer_amount" type="text" placeholder="Payment Amount" style="width: 80%" />
</el-form-item>
</el-form-item> -->
<el-form-item>
<el-button :loading="loading_btn" type="primary" @click="generateReport('supplierBookingForm')">Generate Report</el-button>
</el-form-item>
@@ -237,11 +238,13 @@
</style>
<script>
import ProgressTrack from '~/components/AdminProgressTrack'
import X2ProgressTrack from '~/components/X2AdminProgressTrack'
import axios from 'axios'
export default {
components: {
'progress-track': ProgressTrack
'progress-track': ProgressTrack,
'x2-progress-track': X2ProgressTrack
},
data() {
return {
@@ -260,7 +263,6 @@
supplier_options: null,
supplierBookingForm: {
supplier: null,
amount: null,
rebate: null,
rate: null,
transfer_amount: null,
@@ -333,10 +335,9 @@
let newReport = {
booking_id: this.$route.params.id,
supplier_id: this.supplierBookingForm.supplier,
amount: this.supplierBookingForm.amount,
rebate: this.supplierBookingForm.rebate,
rate: this.supplierBookingForm.rate,
transfer_amount: this.supplierBookingForm.transfer_amount,
//transfer_amount: this.supplierBookingForm.transfer_amount,
}
axios.post('/api/supplier-booking', newReport)
resources/assets/js/pages/admin/booking/supplierReport.vue
+49 -71
View File
@@ -1,6 +1,7 @@
<template>
<el-main>
<progress-track v-model="trackerConfig" />
<x2-progress-track v-if="(booking_details.admin_status == 'x2_cash' || booking_details.admin_status == 'x2_cheque' || booking_details.admin_status == 'x2_ba')" v-model="trackerConfig" />
<progress-track v-else v-model="trackerConfig" />
<div align="center">
<h4 style="margin-top:5%;"></h4>
@@ -29,7 +30,7 @@
<tbody>
<tr class="el-table__row">
<td class="el-table_2_column_9 is-right ">
<div class="cell">Order Number :</div>
<div class="cell">Ref No :</div>
</td>
<td class="el-table_2_column_10 is-left ">
<div class="cell">{{ booking_details.id }}</div>
@@ -201,7 +202,6 @@
<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>
@@ -253,11 +253,12 @@
<script>
import ProgressTrack from '~/components/AdminProgressTrack'
import axios from 'axios'
import Canvas2Image from 'canvas2image'
import X2ProgressTrack from '~/components/X2AdminProgressTrack'
export default {
components: {
'progress-track': ProgressTrack
'progress-track': ProgressTrack,
'x2-progress-track': X2ProgressTrack
},
data() {
return {
@@ -313,43 +314,14 @@
axios.get('/api/supplier-booking/' + this.$route.params.id)
.then((response) => {
this.supplier_booking = response.data
loading.close()
}).catch((error) => {
console.log(error)
this.$router.push({
name: 'notfound'
})
loading.close()
})
axios.get('/api/active-bank')
.then((response) => {
axios.get('/api/setting-beneficiary/' + response.data.beneficiary_id)
.then((response) => {
loading.close();
this.supplier_booking.china_bank_name = response.data.bank_name;
this.supplier_booking.china_company_name = response.data.company_name;
this.supplier_booking.china_acc_no = response.data.acc_no;
})
.catch((error) => {
loading.close();
console.log(error);
this.$message({
showClose: true,
message: 'Fetch data fail',
type: 'error',
duration: 10000
});
});
})
.catch((error) => {
loading.close();
console.log(error);
this.$message({
showClose: true,
message: 'Fetch data fail',
type: 'error',
duration: 10000
});
});
},
methods: {
downloadReport(){
@@ -451,8 +423,8 @@
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);
ctx.fillText("Ref No. :", column1X, rowHeight[1] - 5);
ctx.fillText(binding.value.booking_id, column3X, rowHeight[1] - 5);
//// Row 2
ctx.fillText("Date :", column1X, rowHeight[2] - 5);
ctx.fillText(binding.value.date, column3X, rowHeight[2] - 5);
@@ -460,15 +432,15 @@
ctx.fillText("Marking :", column1X, rowHeight[3] - 5);
ctx.font = "bold 14px Arial";
ctx.fillStyle = "#0070D5";
ctx.fillText("CIEF/605HOS", column3X, rowHeight[3] - 5);
ctx.fillText(binding.value.marking, 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);
ctx.fillText(binding.value.order_no, column3X, rowHeight[4] - 5);
//// Row 4
ctx.fillText("Payment For :", column1X, rowHeight[5] - 5);
ctx.fillText("Full Payment", column3X, rowHeight[5] - 5);
ctx.fillText(binding.value.payment_for, column3X, rowHeight[5] - 5);
//// Row 5
ctx.fillText("Payment Method :", column1X, rowHeight[6] - 5);
ctx.fillText(binding.value.payment_method, column3X, rowHeight[6] - 5);
@@ -480,13 +452,17 @@
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.fillText(binding.value.amount_in_myr, 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
ctx.fillText("REBATE :", column1X, rowHeight[11] - 5);
ctx.fillText("MYR", column2X, rowHeight[11] - 5);
ctx.font = "14px Arial";
ctx.fillText(binding.value.rebate, column3X, rowHeight[11] - 5);
ctx.font = "13px Arial";
//// Row 10
ctx.font = "bold 14px Arial";
ctx.fillText("CNY", column2X, rowHeight[12] - 5);
@@ -506,25 +482,26 @@
//// 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);
ctx.fillText(binding.value.amount_in_myr, 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);
// 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("+ TAX "+ (Math.round((binding.value.tax_rate * 100 - 100) * 100) / 100) + "% :", column1X, rowHeight[16] - 5); // TODO : Change to percentage
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 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.fillText("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.fillText(binding.value.amount_after_tax, column3X, rowHeight[18] - 5);
ctx.fillStyle = "#000000";
ctx.font = "13px Arial";
//line
@@ -542,40 +519,41 @@
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);
// 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.fillText(binding.value.amountInRMB, 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
// 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);
};
// 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("户名 : " + binding.value.china_company_name, column2X - 40, rowHeight[22] - 60);
ctx.fillText(binding.value.china_acc_no, column2X - 40, rowHeight[22] - 40);
ctx.fillText(binding.value.china_bank_name , column2X - 40, rowHeight[22] - 20);
ctx.fillText("户名 : " + binding.value.acc_name, column2X - 40, rowHeight[22] - 60);
ctx.fillText(binding.value.acc_no, column2X - 40, rowHeight[22] - 40);
ctx.fillText(binding.value.bank_name , column2X - 40, rowHeight[22] - 20);
ctx.fillText(binding.value.bank_branch , column2X - 40, rowHeight[22] - 2);
ctx.font = "13px Arial";
}, 1000,canvasElement,binding);
resources/assets/js/pages/admin/booking/uploadChinaBankslip.vue
+291 -68
View File
@@ -1,6 +1,8 @@
<template>
<el-main>
<progress-track v-model="trackerConfig" />
<x2-progress-track v-if="(booking_details.admin_status == 'x2_cash' || booking_details.admin_status == 'x2_cheque' || booking_details.admin_status == 'x2_ba')"
v-model="trackerConfig" />
<progress-track v-else v-model="trackerConfig" />
<div align="center">
<h4 style="margin-top:5%;"></h4>
@@ -9,6 +11,49 @@
<br>
<!-- <el-button type="primary" @click="$router.go(-1)">Go Back</el-button> -->
</div>
<br>
<el-row justify="center" align="center">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>Upload China Bankslip</span>
<!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
</div>
<el-row :gutter="12" style="text-align:center">
<el-col :span="20" style="text-align:center">
<el-form ref="chinaSlipForm" :model="chinaSlipForm" :rules="rules">
<div align="center">
<!-- upload image -->
<el-upload class="upload-demo" :action="'/api/booking/' + booking_id + '/upload-china-bankslip'" :on-preview="handlePreview"
:on-error="uploadError" accept=".jpeg, .jpg, .png, .bmp, .doc, .docx, .xls, .xlsx, .pdf" :on-remove="handleRemove"
:multiple="false" list-type="picture">
<el-button size="small" type="primary">Click to upload</el-button>
<div slot="tip" class="el-upload__tip">bmp/jpeg/jpg/png/pdf/xls/xlxs/doc/docx files with a size less than 3MB</div>
</el-upload>
<br>
<!-- upload image end -->
<!-- <el-form-item prop="date">
<el-date-picker v-model="chinaSlipForm.date" type="date" placeholder="Pick a day" :picker-options="pickerOptions1">
</el-date-picker>
</el-form-item> -->
<el-form-item prop="actual_transfer_amount">
<el-input v-model.number="chinaSlipForm.actual_transfer_amount" type="text" placeholder="Amount" style="width: 80%" />
</el-form-item>
<el-form-item prop="details">
<el-input v-model="chinaSlipForm.details" type="text" placeholder="Details" style="width: 80%" />
</el-form-item>
<el-form-item>
<el-button :loading="loading_btn" type="primary" @click="submitChinaSlip('chinaSlipForm')">Submit</el-button>
</el-form-item>
</div>
</el-form>
</el-col>
</el-row>
</el-card>
</el-row>
<br>
<el-row justify="center" align="center">
<el-card class="box-card">
@@ -29,7 +74,7 @@
<tbody>
<tr class="el-table__row">
<td class="el-table_2_column_9 is-right ">
<div class="cell">Order Number :</div>
<div class="cell">Ref No :</div>
</td>
<td class="el-table_2_column_10 is-left ">
<div class="cell">{{ booking_details.id }}</div>
@@ -166,72 +211,40 @@
<!---->
<!---->
</div>
<!---->
<!---->
<!---->
<!---->
<div class="el-table__column-resize-proxy" style="display: none;"></div>
</div>
</div>
</div>
<!-- <el-row :gutter="12">
<el-col :span="12">
<el-table :data="bookingConfirmTable" :show-header="false" align="center">
<el-table-column prop="data1" align="right" width="200" />
<el-table-column prop="data2" align="left" width="200" />
</el-table>
</el-col>
<el-col :span="12">
<el-table :data="bookingConfirmTable2" :show-header="false" align="center">
<el-table-column prop="data1" align="right" width="200" />
<el-table-column prop="data2" align="left" width="200" />
</el-table>
</el-col>
</el-row> -->
</el-card>
</el-row>
<br>
<br>
<el-row justify="center" align="center">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>Upload China Bankslip</span>
<span>Supplier Report</span>
<!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
</div>
<el-row :gutter="12" style="text-align:center">
<el-col :span="20" style="text-align:center">
<el-form ref="chinaSlipForm" :model="chinaSlipForm" :rules="rules">
<div align="center">
<!-- upload image -->
<el-upload class="upload-demo" :action="'/api/booking/' + booking_id + '/upload-china-bankslip'"
:on-preview="handlePreview"
:on-error="uploadError"
accept=".jpeg, .jpg, .png, .bmp, .doc, .docx, .xls, .xlsx, .pdf"
:on-remove="handleRemove" :multiple="false" list-type="picture">
<el-button size="small" type="primary">Click to upload</el-button>
<div slot="tip" class="el-upload__tip">bmp/jpeg/jpg/png/pdf/xls/xlxs/doc/docx files with a size less than 3MB</div>
</el-upload>
<br>
<!-- upload image end -->
<!-- <el-form-item prop="date">
<el-date-picker v-model="chinaSlipForm.date" type="date" placeholder="Pick a day" :picker-options="pickerOptions1">
</el-date-picker>
</el-form-item> -->
<el-form-item prop="actual_transfer_amount">
<el-input v-model="chinaSlipForm.actual_transfer_amount" type="text" placeholder="Amount" style="width: 80%" />
</el-form-item>
<el-form-item prop="details">
<el-input v-model="chinaSlipForm.details" type="text" placeholder="Details" style="width: 80%" />
</el-form-item>
<el-form-item>
<el-button :loading="loading_btn" type="primary" @click="submitChinaSlip('chinaSlipForm')">Submit</el-button>
</el-form-item>
</div>
</el-form>
<canvas id="myCanvas" ref="myCanvas" v-insert-message="supplier_booking"></canvas>
<br>
<el-button @click="downloadReport()" type="text">Download Now</el-button>
</el-col>
</el-row>
</el-card>
<br>
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>User BankinSlip</span>
<!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
</div>
<el-row :gutter="12">
<el-col :span="22" style="text-align:center">
<a target="_blank" :href="getURL(booking_details.user_bankslip_path)">
<img v-if="isImage(booking_details.user_bankslip_path)" v-bind:src="booking_details.user_bankslip_path" class="image">
<p v-else>Download</p>
</a>
</el-col>
</el-row>
</el-card>
@@ -245,15 +258,17 @@
</style>
<script>
import ProgressTrack from '~/components/AdminProgressTrack'
import X2ProgressTrack from '~/components/X2AdminProgressTrack'
import axios from 'axios'
export default {
components: {
'progress-track': ProgressTrack
'progress-track': ProgressTrack,
'x2-progress-track': X2ProgressTrack
},
data() {
return {
trackerConfig :{
trackerConfig: {
status: 5,
term: null
},
@@ -266,6 +281,7 @@
user_bankslip_path: null,
},
supplier: null,
supplier_booking: {},
supplier_options: null,
chinaSlipForm: {
actual_transfer_amount: null,
@@ -274,10 +290,16 @@
},
rules: {
actual_transfer_amount: [{
required: true,
message: 'Please input transfer amount',
trigger: 'change'
}],
required: true,
message: 'Please input amount',
trigger: 'change'
},
{
type: 'number',
message: 'Amount must be a number',
trigger: 'change'
}
],
// date: [{
// required: true,
// message: 'Please input date',
@@ -326,7 +348,7 @@
axios
.get('/api/admin/booking/' + this.$route.params.id)
.then((response) => {
.then((response) => {
this.booking_details = response.data
this.trackerConfig.term = response.data.term;
loading.close()
@@ -337,6 +359,18 @@
name: 'notfound'
})
})
axios.get('/api/supplier-booking/' + this.$route.params.id)
.then((response) => {
this.supplier_booking = response.data
loading.close()
}).catch((error) => {
console.log(error)
this.$router.push({
name: 'notfound'
})
loading.close()
})
},
methods: {
submitChinaSlip(formName) {
@@ -350,7 +384,7 @@
details: this.chinaSlipForm.details,
}
axios.patch('/api/booking/' + this.booking_id +'/update-china-bankslip', newChinaSlip)
axios.patch('/api/booking/' + this.booking_id + '/update-china-bankslip', newChinaSlip)
.then((response) => {
this.$message({
showClose: true,
@@ -376,11 +410,11 @@
} else {
this.loading_btn = false
this.$message({
showClose: true,
message: 'Please upload your bankin slip first.',
type: 'warning',
duration: 10000
})
showClose: true,
message: 'Please upload your bankin slip first.',
type: 'warning',
duration: 10000
})
}
})
},
@@ -390,8 +424,197 @@
handlePreview(file) {
console.log(file);
},
uploadError(file,fileList){
uploadError(file, fileList) {
this.$message.warning(`Incorrect file format or file size too big.`)
},
getExtension(path){
return path.slice(-3);
},
isImage(path){
var ext = this.getExtension(path);
return ext === 'jpg' || ext === 'jpeg' || ext === 'bmp' || ext === 'png';
},
getURL(path){
var getUrl = window.location;
var baseUrl = getUrl.protocol + "//" + getUrl.host;
return baseUrl + path;
}
},
directives: {
insertMessage: function (canvasElement, binding) {
setTimeout(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("Ref No. :", column1X, rowHeight[1] - 5);
ctx.fillText(binding.value.booking_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(binding.value.marking, 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.order_no, column3X, rowHeight[4] - 5);
//// Row 4
ctx.fillText("Payment For :", column1X, rowHeight[5] - 5);
ctx.fillText(binding.value.payment_for, 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.amount_in_myr, 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
ctx.fillText("REBATE :", column1X, rowHeight[11] - 5);
ctx.fillText("MYR", column2X, rowHeight[11] - 5);
ctx.font = "14px Arial";
ctx.fillText(binding.value.rebate, column3X, rowHeight[11] - 5);
ctx.font = "13px Arial";
//// 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(binding.value.amount_in_myr, 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("+ TAX " + (Math.round((binding.value.tax_rate * 100 - 100) * 100) / 100) + "% :",
column1X, rowHeight[16] - 5); // TODO : Change to percentage
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("Bank In Amount :", column1X, rowHeight[18] - 5);
ctx.fillStyle = "#0070D5";
ctx.fillText("MYR", column2X, rowHeight[18] - 5);
ctx.fillText(binding.value.amount_after_tax, 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(binding.value.amountInRMB, 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("户名 : " + binding.value.acc_name, column2X - 40, rowHeight[22] - 60);
ctx.fillText(binding.value.acc_no, column2X - 40, rowHeight[22] - 40);
ctx.fillText(binding.value.bank_name, column2X - 40, rowHeight[22] - 20);
ctx.fillText(binding.value.bank_branch, column2X - 40, rowHeight[22] - 2);
ctx.font = "13px Arial";
}, 1000, canvasElement, binding);
}
}
}
resources/assets/js/pages/admin/booking/uploadInvoice.vue
+280 -57
View File
@@ -1,6 +1,7 @@
<template>
<el-main>
<progress-track v-model="trackerConfig" />
<x2-progress-track v-if="(booking_details.admin_status == 'x2_cash' || booking_details.admin_status == 'x2_cheque' || booking_details.admin_status == 'x2_ba')" v-model="trackerConfig" />
<progress-track v-else v-model="trackerConfig" />
<div align="center">
<h4 style="margin-top:5%;"></h4>
@@ -16,6 +17,56 @@
<br>
<!-- <el-button type="primary" @click="$router.go(-1)">Go Back</el-button> -->
</div>
<br>
<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">
<span>Upload Invoice</span>
<!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
</div>
<!-- upload image -->
<el-upload :action="'/api/booking/' + booking_id + '/upload-invoice'" :on-exceed="handleExceed" :on-preview="handlePreview"
:on-remove="handleRemove"
:on-error="uploadError"
accept=".jpeg, .jpg, .png, .bmp, .doc, .docx, .xls, .xlsx, .pdf"
class="upload-demo"
drag
multiple>
<i class="el-icon-upload"/>
<div class="el-upload__text">Drop file here or
<em>click to upload</em>
</div>
<div slot="tip" class="el-upload__tip">bmp/jpeg/jpg/png/pdf/xls/xlxs/doc/docx files with a size less than 3mb</div>
</el-upload>
<br>
<div class="bottom clearfix" style="text-align:right;">
<el-button :loading="loading_btn" type="primary" @click="confirmInvoice">Submit</el-button>
</div>
<!-- upload image end -->
</el-card>
</el-col>
<el-col :span="12">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>Customer Purchase Order</span>
<!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
</div>
<el-row :gutter="12" type="flex">
<el-col :span="12" align="center">
<a target="_blank" :href="getURL(booking_details.user_po_path)">
<img v-if="isImage(booking_details.user_po_path)" v-bind:src="booking_details.user_po_path" class="image">
<p v-else>Download</p>
</a>
</el-col>
</el-row>
</el-card>
</el-col>
</el-row>
<br>
<el-row justify="center" align="center">
<el-card class="box-card">
@@ -36,7 +87,7 @@
<tbody>
<tr class="el-table__row">
<td class="el-table_2_column_9 is-right ">
<div class="cell">Order Number :</div>
<div class="cell">Ref No :</div>
</td>
<td class="el-table_2_column_10 is-left ">
<div class="cell">{{ booking_details.id }}</div>
@@ -88,10 +139,6 @@
<!---->
<!---->
</div>
<!---->
<!---->
<!---->
<!---->
<div class="el-table__column-resize-proxy" style="display: none;"></div>
</div>
</div>
@@ -181,55 +228,38 @@
</el-row>
<br>
<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">
<span>Upload Invoice</span>
<!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
</div>
<!-- upload image -->
<el-upload :action="'/api/booking/' + booking_id + '/upload-invoice'" :on-exceed="handleExceed" :on-preview="handlePreview"
:on-remove="handleRemove"
:on-error="uploadError"
accept=".jpeg, .jpg, .png, .bmp, .doc, .docx, .xls, .xlsx, .pdf"
class="upload-demo"
drag
multiple>
<i class="el-icon-upload"/>
<div class="el-upload__text">Drop file here or
<em>click to upload</em>
</div>
<div slot="tip" class="el-upload__tip">bmp/jpeg/jpg/png/pdf/xls/xlxs/doc/docx files with a size less than 3mb</div>
</el-upload>
<br>
<div class="bottom clearfix" style="text-align:right;">
<el-button :loading="loading_btn" type="primary" @click="confirmInvoice">Submit</el-button>
</div>
<!-- upload image end -->
</el-card>
</el-col>
<el-col :span="12">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>Customer Purchase Order</span>
<!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
</div>
<el-row :gutter="12" type="flex">
<el-col :span="12" align="center">
<a target="_blank" :href="getURL(booking_details.user_po_path)">
<img v-if="isImage(booking_details.user_po_path)" v-bind:src="booking_details.user_po_path" class="image">
<p v-else>Download</p>
</a>
</el-col>
</el-row>
</el-card>
</el-col>
<el-row justify="center" align="center">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>Supplier Report</span>
<!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
</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>
<br>
<el-button @click="downloadReport()" type="text">Download Now</el-button>
</el-col>
</el-row>
</el-card>
<br>
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>User BankinSlip</span>
<!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
</div>
<el-row :gutter="12">
<el-col :span="22" style="text-align:center">
<a target="_blank" :href="getURL(booking_details.user_bankslip_path)">
<img v-if="isImage(booking_details.user_bankslip_path)" v-bind:src="booking_details.user_bankslip_path" class="image">
<p v-else>Download</p>
</a>
</el-col>
</el-row>
</el-card>
<br>
</el-row>
<br>
</el-main>
</template>
<style>
@@ -250,16 +280,18 @@
</style>
<script>
import ProgressTrack from '~/components/AdminProgressTrack'
import X2ProgressTrack from '~/components/X2AdminProgressTrack'
import axios from 'axios'
export default {
components: {
'progress-track': ProgressTrack
'progress-track': ProgressTrack,
'x2-progress-track': X2ProgressTrack
},
data() {
return {
trackerConfig :{
status: 6,
status: null,
term: null
},
loading_btn: false,
@@ -272,6 +304,7 @@
},
supplier: null,
supplier_options: null,
supplier_booking : {},
chinaSlipForm: {
actual_transfer_amount: null,
date: null,
@@ -334,7 +367,8 @@
.then((response) => {
loading.close()
this.booking_details = response.data
this.trackerConfig.term = response.data.term;
this.trackerConfig.term = response.data.term
this.trackerConfig.status = response.data.admin_status
}).catch((error) => {
console.log(error)
loading.close()
@@ -342,6 +376,18 @@
name: 'notfound'
})
})
axios.get('/api/supplier-booking/' + this.$route.params.id)
.then((response) => {
this.supplier_booking = response.data
loading.close()
}).catch((error) => {
console.log(error)
this.$router.push({
name: 'notfound'
})
loading.close()
})
},
methods: {
confirmInvoice () {
@@ -383,6 +429,7 @@
uploadError(file,fileList){
this.$message.warning(`Incorrect file format or file size too big.`)
},
// TODO : refactor into library since many pages are using this
getExtension(path){
return path.slice(-3);
},
@@ -394,6 +441,182 @@
var getUrl = window.location;
var baseUrl = getUrl.protocol + "//" + getUrl.host;
return baseUrl + path;
},
},
directives: {
insertMessage: function (canvasElement, binding) {
setTimeout(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("Ref No. :", column1X, rowHeight[1] - 5);
ctx.fillText(binding.value.booking_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(binding.value.marking, 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.order_no, column3X, rowHeight[4] - 5);
//// Row 4
ctx.fillText("Payment For :", column1X, rowHeight[5] - 5);
ctx.fillText(binding.value.payment_for, 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.amount_in_myr, 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
ctx.fillText("REBATE :", column1X, rowHeight[11] - 5);
ctx.fillText("MYR", column2X, rowHeight[11] - 5);
ctx.font = "14px Arial";
ctx.fillText(binding.value.rebate, column3X, rowHeight[11] - 5);
ctx.font = "13px Arial";
//// 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(binding.value.amount_in_myr, 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("+ TAX "+ (Math.round((binding.value.tax_rate * 100 - 100) * 100) / 100) + "% :", column1X, rowHeight[16] - 5); // TODO : Change to percentage
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("Bank In Amount :", column1X, rowHeight[18] - 5);
ctx.fillStyle = "#0070D5";
ctx.fillText("MYR", column2X, rowHeight[18] - 5);
ctx.fillText(binding.value.amount_after_tax, 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(binding.value.amountInRMB, 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("户名 : " + binding.value.acc_name, column2X - 40, rowHeight[22] - 60);
ctx.fillText(binding.value.acc_no, column2X - 40, rowHeight[22] - 40);
ctx.fillText(binding.value.bank_name , column2X - 40, rowHeight[22] - 20);
ctx.fillText(binding.value.bank_branch , column2X - 40, rowHeight[22] - 2);
ctx.font = "13px Arial";
}, 1000,canvasElement,binding);
}
}
}
resources/assets/js/pages/admin/booking/verification.vue
+8 -3
View File
@@ -1,6 +1,7 @@
<template>
<el-main>
<progress-track v-model="trackerConfig" />
<x2-progress-track v-if="(booking_details.admin_status == 'x2_cash' || booking_details.admin_status == 'x2_cheque' || booking_details.admin_status == 'x2_ba')" v-model="trackerConfig" />
<progress-track v-else v-model="trackerConfig" />
<div align="center">
<h4 style="margin-top:5%;"></h4>
@@ -31,7 +32,7 @@
<tbody>
<tr class="el-table__row">
<td class="el-table_2_column_9 is-right ">
<div class="cell">Order Number :</div>
<div class="cell">Ref No :</div>
</td>
<td class="el-table_2_column_10 is-left ">
<div class="cell">{{ booking_details.id }}</div>
@@ -256,11 +257,13 @@
</style>
<script>
import ProgressTrack from '~/components/AdminProgressTrack'
import X2ProgressTrack from '~/components/X2AdminProgressTrack'
import axios from 'axios'
export default {
components: {
'progress-track': ProgressTrack
'progress-track': ProgressTrack,
'x2-progress-track': X2ProgressTrack
},
data() {
return {
@@ -306,6 +309,7 @@
approveUserSlip() {
this.loading_btn = true
// TODO : this no longer used
let newApprove = {
estimated_arrival_time: this.estimated_arrival_time
}
@@ -337,6 +341,7 @@
this.centerDialogVisible = false
let newApprove = {
// TODO : this no longer used
estimated_arrival_time: this.estimated_arrival_time,
reject_reason: this.reject_reason
}
resources/assets/js/pages/admin/booking/x2Completed.vue
+549
View File
@@ -0,0 +1,549 @@
<template>
<el-main>
<x2-progress-track v-if="(booking_details.admin_status == 'x2_cash' || booking_details.admin_status == 'x2_cheque' || booking_details.admin_status == 'x2_ba')" v-model="trackerConfig" />
<progress-track v-else v-model="trackerConfig" />
<div align="center">
<h4 style="margin-top:5%;">Order Completed</h4>
<br>
<el-button type="primary" @click="$router.go(-1)">Go Back</el-button>
</div>
<br>
<!-- bankslip -->
<br>
<el-row justify="center" align="center">
<el-col>
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>China Bank Slip</span>
<!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
</div>
<el-row type="flex">
<el-col align="center">
<div v-for="cn_bankslip in booking_details.china_bankslip_path" :key='cn_bankslip'>
<a target="_blank" :href="getURL(cn_bankslip)">
<img v-if="isImage(cn_bankslip)" v-bind:src="cn_bankslip" class="image">
<p v-else>Download</p>
<br/>
</a>
</div>
</el-col>
</el-row>
</el-card>
</el-col>
</el-row>
<br>
<!-- bank slips END -->
<el-row justify="center" align="center">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>Order Details</span>
<!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
</div>
<!-- <el-row :gutter="12">
<el-col :span="12">
<el-table :data="bookingConfirmTable" :show-header="false" align="center">
<el-table-column prop="data1" align="right" width="200" />
<el-table-column prop="data2" align="left" width="200" />
</el-table>
</el-col>
<el-col :span="12">
<el-table :data="bookingConfirmTable2" :show-header="false" align="center">
<el-table-column prop="data1" align="right" width="200" />
<el-table-column prop="data2" align="left" width="200" />
</el-table>
</el-col>
</el-row> -->
<div class="el-row" style="margin-left: -6px; margin-right: -6px;">
<div class="el-col el-col-12" style="padding-left: 6px; padding-right: 6px;">
<div class="el-table el-table--fit el-table--enable-row-hover el-table--enable-row-transition" align="center">
<div class="el-table__body-wrapper is-scrolling-none">
<table class="el-table__body" style="width: 400px;" cellspacing="0" cellpadding="0" border="0">
<colgroup>
<col name="el-table_2_column_9" width="210">
<col name="el-table_2_column_10" width="210">
</colgroup>
<tbody>
<tr class="el-table__row">
<td class="el-table_2_column_9 is-right ">
<div class="cell">Ref No :</div>
</td>
<td class="el-table_2_column_10 is-left ">
<div class="cell">{{ booking_details.id }}</div>
</td>
</tr>
<tr class="el-table__row">
<td class="el-table_2_column_9 is-right ">
<div class="cell">Date :</div>
</td>
<td class="el-table_2_column_10 is-left ">
<div class="cell">{{ booking_details.created_at }}</div>
</td>
</tr>
<tr class="el-table__row">
<td class="el-table_2_column_9 is-right ">
<div class="cell">Customer Marking :</div>
</td>
<td class="el-table_2_column_10 is-left ">
<div class="cell">{{ booking_details.marking }}</div>
</td>
</tr>
<tr class="el-table__row">
<td class="el-table_2_column_9 is-right ">
<div class="cell">Term :</div>
</td>
<td class="el-table_2_column_10 is-left ">
<div class="cell">{{ booking_details.term }}</div>
</td>
</tr>
<tr class="el-table__row">
<td class="el-table_2_column_9 is-right ">
<div class="cell">Beneficiary Account : </div>
</td>
<td class="el-table_2_column_10 is-left ">
<div class="cell">{{booking_details.account_name}}</div>
</td>
</tr>
<tr class="el-table__row">
<td class="el-table_2_column_9 is-right ">
<div class="cell">Beneficiary Account Number : </div>
</td>
<td class="el-table_2_column_10 is-left ">
<div class="cell">{{booking_details.account_num}}</div>
</td>
</tr>
<!---->
</tbody>
</table>
<!---->
<!---->
</div>
<!---->
<!---->
<!---->
<!---->
<div class="el-table__column-resize-proxy" style="display: none;"></div>
</div>
</div>
<div class="el-col el-col-12" style="padding-left: 6px; padding-right: 6px;">
<div class="el-table el-table--fit el-table--enable-row-hover el-table--enable-row-transition" align="center">
<div class="hidden-columns">
<div></div>
<div></div>
</div>
<!---->
<div class="el-table__body-wrapper is-scrolling-none">
<table class="el-table__body" style="width: 400px;" cellspacing="0" cellpadding="0" border="0">
<colgroup>
<col name="el-table_3_column_11" width="200">
<col name="el-table_3_column_12" width="200">
</colgroup>
<tbody>
<tr class="el-table__row">
<td class="el-table_3_column_11 is-right ">
<div class="cell">CNY/RMB :</div>
</td>
<td class="el-table_3_column_12 is-left ">
<div class="cell">CNY {{ booking_details.amount }}</div>
</td>
</tr>
<tr class="el-table__row">
<td class="el-table_3_column_11 is-right ">
<div class="cell">+ Service Charge :</div>
</td>
<td class="el-table_3_column_12 is-left ">
<div class="cell">CNY {{ booking_details.service_charge }}</div>
</td>
</tr>
<tr class="el-table__row">
<td class="el-table_3_column_11 is-right ">
<div class="cell">/ RATE :</div>
</td>
<td class="el-table_3_column_12 is-left ">
<div class="cell">{{ booking_details.rate }}</div>
</td>
</tr>
<tr class="el-table__row">
<td class="el-table_3_column_11 is-right ">
<div class="cell"></div>
</td>
<td class="el-table_3_column_12 is-left ">
<div class="cell">MYR {{ booking_details.bia }}</div>
</td>
</tr>
<!-- <tr class="el-table__row">
<td class="el-table_3_column_11 is-right ">
<div class="cell">+ GST 6% :</div>
</td>
<td class="el-table_3_column_12 is-left ">
<div class="cell">MYR 4,430.88</div>
</td>
</tr> -->
<tr class="el-table__row">
<td class="el-table_3_column_11 is-right ">
<div class="cell"></div>
</td>
<td class="el-table_3_column_12 is-left ">
<div class="cell"><b>MYR {{ booking_details.bia }}</b></div>
</td>
</tr>
<tr class="el-table__row">
<td class="el-table_3_column_11 is-right ">
<div class="cell"></div>
</td>
<td class="el-table_3_column_12 is-left ">
<div class="cell"></div>
</td>
</tr>
<!---->
</tbody>
</table>
<!---->
<!---->
</div>
<!---->
<!---->
<!---->
<!---->
<div class="el-table__column-resize-proxy" style="display: none;"></div>
</div>
</div>
</div>
<!-- <el-row :gutter="12">
<el-col :span="12">
<el-table :data="bookingConfirmTable" :show-header="false" align="center">
<el-table-column prop="data1" align="right" width="200" />
<el-table-column prop="data2" align="left" width="200" />
</el-table>
</el-col>
<el-col :span="12">
<el-table :data="bookingConfirmTable2" :show-header="false" align="center">
<el-table-column prop="data1" align="right" width="200" />
<el-table-column prop="data2" align="left" width="200" />
</el-table>
</el-col>
</el-row> -->
</el-card>
</el-row>
<br>
<el-row justify="center" align="center">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>Supplier Report</span>
<!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
</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>
<br>
<el-button @click="downloadReport()" type="text">Download Now</el-button>
</el-col>
</el-row>
</el-card>
<br>
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>User BankinSlip</span>
<!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
</div>
<el-row :gutter="12">
<el-col :span="22" style="text-align:center">
<a target="_blank" :href="getURL(booking_details.user_bankslip_path)">
<img v-if="isImage(booking_details.user_bankslip_path)" v-bind:src="booking_details.user_bankslip_path" class="image">
<p v-else>Download</p>
</a>
</el-col>
</el-row>
</el-card>
</el-row>
<br>
<el-row justify="center" align="center">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>Payment Bankin Slip</span>
<!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
</div>
<el-row :gutter="12">
<el-col :span="22" style="text-align:center">
<a target="_blank" :href="getURL(booking_details.user_bankslip_path)">
<img v-if="isImage(booking_details.user_bankslip_path)" v-bind:src="booking_details.user_bankslip_path" class="image">
<p v-else>Download</p>
</a>
</el-col>
</el-row>
</el-card>
</el-row>
</el-main>
</template>
<style>
.booking-details {
font-weight: bold;
}
.image {
border: 1px solid #ddd;
border-radius: 4px;
margin-left: auto;
margin-right: auto;
width: 150px;
display: block;
}
.image:hover {
box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
</style>
<script>
import ProgressTrack from '~/components/AdminProgressTrack'
import X2ProgressTrack from '~/components/X2AdminProgressTrack'
import axios from 'axios'
export default {
components: {
'progress-track': ProgressTrack,
'x2-progress-track': X2ProgressTrack
},
data () {
return {
trackerConfig :{
status: 8,
term: null
},
supplier_booking: {},
loading_btn: false,
booking_details:{
id: null,
amount: null,
bia: null,
user_bankslip_path: null,
}
}
},
beforeCreate () {
const loading = this.$loading({
lock: true,
text: 'Please wait..',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
axios
.get('/api/admin/booking/' + this.$route.params.id)
.then((response) => {
this.booking_details = response.data
this.trackerConfig.term = response.data.term;
loading.close()
}).catch((error) => {
console.log(error)
loading.close()
this.$router.push({
name: 'notfound'
})
})
axios.get('/api/supplier-booking/' + this.$route.params.id)
.then((response) => {
this.supplier_booking = response.data
loading.close()
}).catch((error) => {
console.log(error)
this.$router.push({
name: 'notfound'
})
loading.close()
})
},
methods: {
getExtension(path){
return path.slice(-3);
},
isImage(path){
var ext = this.getExtension(path);
return ext === 'jpg' || ext === 'jpeg' || ext === 'bmp' || ext === 'png';
},
getURL(path){
var getUrl = window.location;
var baseUrl = getUrl.protocol + "//" + getUrl.host;
return baseUrl + path;
}
},
directives: {
insertMessage: function (canvasElement, binding) {
setTimeout(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("Ref No. :", column1X, rowHeight[1] - 5);
ctx.fillText(binding.value.booking_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(binding.value.marking, 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.order_no, column3X, rowHeight[4] - 5);
//// Row 4
ctx.fillText("Payment For :", column1X, rowHeight[5] - 5);
ctx.fillText(binding.value.payment_for, 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.amount_in_myr, 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
ctx.fillText("REBATE :", column1X, rowHeight[11] - 5);
ctx.fillText("MYR", column2X, rowHeight[11] - 5);
ctx.font = "14px Arial";
ctx.fillText(binding.value.rebate, column3X, rowHeight[11] - 5);
ctx.font = "13px Arial";
//// 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(binding.value.amount_in_myr, 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("+ TAX " + (Math.round((binding.value.tax_rate * 100 - 100) * 100) / 100) + "% :",
column1X, rowHeight[16] - 5); // TODO : Change to percentage
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("Bank In Amount :", column1X, rowHeight[18] - 5);
ctx.fillStyle = "#0070D5";
ctx.fillText("MYR", column2X, rowHeight[18] - 5);
ctx.fillText(binding.value.amount_after_tax, 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(binding.value.amountInRMB, 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("户名 : " + binding.value.acc_name, column2X - 40, rowHeight[22] - 60);
ctx.fillText(binding.value.acc_no, column2X - 40, rowHeight[22] - 40);
ctx.fillText(binding.value.bank_name, column2X - 40, rowHeight[22] - 20);
ctx.fillText(binding.value.bank_branch, column2X - 40, rowHeight[22] - 2);
ctx.font = "13px Arial";
}, 1000, canvasElement, binding);
}
}
}
</script>
resources/assets/js/pages/admin/complete-orders.vue
+1 -1
View File
@@ -6,7 +6,7 @@
</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="No." prop="id" sortable></el-table-column>
<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>
resources/assets/js/pages/admin/home.vue
+154 -22
View File
@@ -1,26 +1,27 @@
<template>
<div>
<div align="right">
<el-button :loading="loading_btn" type="primary" size="mini" @click="RefreshBooking()">Refresh</el-button>
<el-button :loading="loading_btn" type="primary" size="mini" @click="RefreshBooking(); RefreshBookingTableComplete()">Refresh</el-button>
</div>
<!-- Booking Table -->
<el-tabs type="border-card" class="table-switch">
<el-tab-pane label="Booking Table">
<el-row :gutter="20">
<div>
<el-table :data="bookingTable">
<el-table-column label="No." width="100">
<el-table :data="bookingTable" :default-sort = "{prop: 'date', order: 'descending'}">
<el-table-column label="Ref No." width="100" >
<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">Update</el-button>
<el-button slot-scope="scope" type="text" @click="(event) => { BookingStatus(scope.row.admin_status, scope.row.id) }"> {{ scope.row.id }}</el-button>
<el-button slot-scope="scope" type="text" @click="(event) => { BookingStatus(scope.row.admin_status, scope.row.id, scope.row.term) }"> {{ scope.row.id }}</el-button>
</el-table-column>
<el-table-column label="DateTime" prop="created_at" width="180" sortable/>
<el-table-column label="Marking" width="120" prop="marking" />
<el-table-column :filters="[{text: 'X1', value: 'X1'}, {text: 'X2', value: 'X2'}]" :filter-method="filterHandlerTerm" label="Term" prop="term" width="100"/>
<el-table-column label="Rate" width="74" prop="rate" />
<el-table-column label="Amount" prop="amount" justify="center" width="110" />
<el-table-column label="Amount" prop="amount" justify="center" width="110" sortable />
<el-table-column :filters="[{text: 'RMB', value: 'RMB'}, {text: 'USD', value: 'USD'}]" :filter-method="filterHandlerTranferAmount" label="Transfer Amount"
prop="transfer_amount" width="170" />
prop="transfer_amount" width="180" sortable/>
<!-- <el-table-column label="ETA" sortable width="100"/> -->
<!-- <el-table-column label="Payment Method" :filters="[{text: 'Cash', value: 'Cash'}, {text: 'Cheque', value: 'Cheque'}, {text: 'BA', value: 'BA'}]" :filter-method="filterHandler">
</el-table-column> -->
@@ -38,19 +39,95 @@
<!-- <el-table-column label="Balance" prop="transfer_amount" sortable width="100"/> -->
<!-- <el-table-column prop="timeout" label="Bankin Timeout" /> -->
<el-table-column label="" width="180">
<el-button slot-scope="scope" type="text" @click="(event) => { BookingStatus(scope.row.admin_status, scope.row.id) }"> View Status </el-button>
<el-button slot-scope="scope" type="text" @click="(event) => { BookingStatus(scope.row.admin_status, scope.row.id, scope.row.term) }"> View Status </el-button>
<!-- <template slot-scope="scope">
<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">View Status</el-button>
<el-button size="mini" type="danger" @click="BookingStatus(scope.$index, scope.row)">Cancel</el-button>
</template> -->
</el-table-column>
</el-table>
</el-table-column>
</el-table>
<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>
</el-row>
<!-- Booking Table-end -->
</div>
</el-row><br><br></el-tab-pane>
<el-tab-pane label="Completed">
<el-row :gutter="20">
<div>
<el-table :data="bookingTableComplete">
<el-table-column label="Ref No." width="100" >
<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">Update</el-button>
<el-button slot-scope="scope" type="text" @click="(event) => { BookingStatus(scope.row.admin_status, scope.row.id, scope.row.term) }"> {{ scope.row.id }}</el-button>
</el-table-column>
<el-table-column label="DateTime" prop="created_at" width="180" sortable/>
<el-table-column label="Marking" width="120" prop="marking" />
<el-table-column :filters="[{text: 'X1', value: 'X1'}, {text: 'X2', value: 'X2'}]" :filter-method="filterHandlerTerm" label="Term" prop="term" width="100"/> -->
<el-table-column label="Rate" width="74" prop="rate" />
<el-table-column label="Amount" prop="amount" justify="center" width="110" sortable/>
<el-table-column :filters="[{text: 'RMB', value: 'RMB'}, {text: 'USD', value: 'USD'}]" :filter-method="filterHandlerTranferAmount" label="Transfer Amount"
prop="transfer_amount" width="180" sortable/>
<!-- <el-table-column label="ETA" sortable width="100"/> -->
<!-- <el-table-column label="Payment Method" :filters="[{text: 'Cash', value: 'Cash'}, {text: 'Cheque', value: 'Cheque'}, {text: 'BA', value: 'BA'}]" :filter-method="filterHandler">
</el-table-column> -->
<!-- <el-table-column :filters="[{text: '(1/6)', value: '(1/6) Order Done'}, {text: '(2/6)', value: '(2/6) Waiting for Upload Bank in Slip'}, {text: '(3/6)', value: '(3/6) Order Confirmation'}, {text: '(4/6)', value: '(4/6) Processing Transfer'}, {text: '(5/6)', value: '(5/6) Waiting for Upload PO'}, {text: '(6/6)', value: '(6/6) Order Complete'}]" :filter-method="filterHandler" prop="status" label="Status"/> -->
<el-table-column label="Status" width="106" :filters="[{ text: 'Success', value: 'Success' }, { text: 'Pending', value: 'Pending' }]" :filter-method="filterHandlerStatus" prop="status_desc">
<template slot-scope="scope">
<el-popover trigger="click" placement="top">
<p>{{ scope.row.status_desc }}</p>
<div slot="reference" class="name-wrapper">
<el-tag size="medium">{{ scope.row.track_status }}</el-tag>
</div>
</el-popover>
</template>
</el-table-column>
<!-- <el-table-column label="Balance" prop="transfer_amount" sortable width="100"/> -->
<!-- <el-table-column prop="timeout" label="Bankin Timeout" /> -->
<!-- <el-table-column :filters="[{ text: 'Success', value: 'Success' }, { text: 'Pending', value: 'Pending' }]" :filter-method="filterHandlerStatus"
label="" width="180" filter-placement="bottom-end">
<el-button slot-scope="scope" type="text" @click="(event) => { BookingStatus(scope.row.status, scope.row.id) }"> View Status </el-button> -->
<el-table-column label="" width="180">
<el-button slot-scope="scope" type="text" @click="(event) => { BookingStatus(scope.row.admin_status, scope.row.id, scope.row.term) }"> View Status </el-button>
<!-- <template slot-scope="scope">
<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">View Status</el-button>
<el-button size="mini" type="danger" @click="BookingStatus(scope.$index, scope.row)">Cancel</el-button>
</template> -->
</el-table-column>
</el-table>
<div align="right">
<el-button type="primary" size="mini" @click="fetchCompletePaginateBooking(completePagination.prev_page_url)" :disabled="!completePagination.prev_page_url">
Previous
</el-button>
<span>Page {{completePagination.current_page}} of {{completePagination.last_page}}</span>
<el-button type="primary" size="mini" @click="fetchCompletePaginateBooking(completePagination.next_page_url)" :disabled="!completePagination.next_page_url">
Next
</el-button>
</div>
</div>
</el-row><br><br>
</el-tab-pane>
</el-tabs>
<!-- Booking Table-end -->
</div>
</template>
<style type="text/css">
.el-table__column-filter-trigger i {
font-size: 18px;
font-weight: 900;
vertical-align: sub;
}
</style>
<script>
import axios from 'axios'
@@ -59,20 +136,33 @@ export default {
data () {
return {
status: null,
bookingTable: [
],
url: 'api/admin/booking',
bookingTable: [],
bookingTableComplete: [],
url: 'api/admin/booking',
completeBookingurl : "api/admin-complete-booking",
pagination: [],
completePagination: [],
loading_btn: false,
}
},
mounted () {
this.getBooking()
this.getBooking();
this.getBookingTableComplete();
},
methods: {
getBooking() {
getBooking(){
let $this = this
axios.get(this.url).then(response => {
this.bookingTable = response.data
this.bookingTable = response.data.data;
$this.makePagination(response.data);
})
},
getBookingTableComplete(){
let $this = this
axios.get(this.completeBookingurl).then(response => {
this.bookingTableComplete = response.data.data
$this.makeCompletePagination(response.data)
})
},
RefreshBooking() {
@@ -80,7 +170,7 @@ export default {
this.loading_btn = true
axios.get(this.url).then(response => {
this.loading_btn = false;
this.bookingTable = response.data
this.bookingTable = response.data.data
this.$message({
showClose: true,
message: 'Booking is updated',
@@ -89,6 +179,41 @@ export default {
})
})
},
RefreshBookingTableComplete() {
let $this = this
this.loading_btn = true
axios.get(this.completeBookingurl).then(response => {
this.loading_btn = false;
this.bookingTableComplete = 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
},
makeCompletePagination(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.completePagination = pagination
},
fetchPaginateBooking(url) {
this.url = url
this.getBooking()
},
fetchCompletePaginateBooking(url) {
this.completeBookingurl = url
this.getBookingTableComplete()
},
filterHandlerStatus (value, row, column) {
const status = row.track_status;
if(value ==="Success")
@@ -104,7 +229,7 @@ export default {
const term = row.term;
return value.toLowerCase() === term.substring(0,2);
},
BookingStatus (status, booking_id) {
BookingStatus (status, booking_id, term) {
// TODO : Get booking status from server
this.status = status
switch (this.status) {
@@ -140,6 +265,13 @@ export default {
break
case 6:
if(term == 'x2_cash' || term == 'x2_cheque' || term == 'x2_ba'){
this.$router.push({
name: 'booking.admin.x2complete',
params: {id: booking_id }
})
break
}
this.$router.push({
name: 'booking.admin.invoice',
params: {id: booking_id }
resources/assets/js/pages/admin/upload-supplier-bank-slip.vue
+1 -1
View File
@@ -5,7 +5,7 @@
<el-button type="primary" icon="el-icon-plus" @click="AddNewDialogVisible = true">Add New</el-button>
</div><br>
<el-table :data="tableData" stripe style="width: 100%">
<el-table-column label="Order No" sortable></el-table-column>
<el-table-column label="Ref No" sortable></el-table-column>
<el-table-column label="Amount (RMB)" sortable></el-table-column>
<el-table-column label="Date" sortable></el-table-column>
<el-table-column label="Bank Slip File"></el-table-column>
resources/assets/js/pages/auth/login.vue
+1 -3
View File
@@ -26,9 +26,7 @@
<div class="form-group row">
<div class="col-md-3"/>
<div class="col-md-7 d-flex">
<checkbox v-model="remember" name="remember">
{{ $t('remember_me') }}
</checkbox>
<router-link :to="{ name: 'password.request' }" class="small ml-auto my-auto">
{{ $t('forgot_password') }}
resources/assets/js/pages/auth/register.vue
+15 -18
View File
@@ -5,65 +5,64 @@
<card :title="$t('register')">
<form @submit.prevent="register" @keydown="form.onKeydown($event)">
<!-- Marking -->
<div class="form-group row" :class="{'has-error': errors.has('marking') }">
<div class="form-group row">
<label class="col-md-3 col-form-label text-md-right">{{ $t('Marking') }}</label>
<div class="col-md-7">
<el-input v-model="form.marking" v-validate="'required|max:255'" type="text" name="marking" placeholder="Marking Number">
</el-input>
<span class="text-danger" v-if="errors.has('marking')">{{ errors.first('marking') }}<br/></span>
<input v-model="form.marking" :class="{ 'is-invalid': form.errors.has('marking') }" class="form-control" type="text" name="marking">
<has-error :form="form" field="marking"/>
</div>
</div>
<!-- Email -->
<div class="form-group row" :class="{'has-error': errors.has('email') }">
<div class="form-group row">
<label class="col-md-3 col-form-label text-md-right">{{ $t('email') }}</label>
<div class="col-md-7">
<el-input v-model="form.email" v-validate="'required|max:255'" type="email" name="email" placeholder="Email">
<el-input v-model="form.email" type="email" name="email" placeholder="Email">
</el-input>
<span class="text-danger" v-if="errors.has('email')">{{ errors.first('email') }}</span>
<has-error :form="form" field="email"/>
</div>
</div>
<!-- Password -->
<div class="form-group row" :class="{'has-error': errors.has('password') }">
<div class="form-group row">
<label class="col-md-3 col-form-label text-md-right">{{ $t('password') }}</label>
<div class="col-md-7">
<el-input v-if="password_visible" v-model="form.password" v-validate="'required|min:6|max:255'" type="text" name="password" placeholder="Password">
<el-input v-if="password_visible" v-model="form.password" type="text" name="password" placeholder="Password">
<template slot="append">
<el-button type="primary" @click="password_visible = !password_visible"><i class="fas fa-eye"></i></el-button>
</template>
</el-input>
<el-input v-else v-model="form.password" v-validate="'required|min:6|max:255'" type="password" name="password" placeholder="Password">
<el-input v-else v-model="form.password" type="password" name="password" placeholder="Password">
<template slot="append">
<el-button type="primary" @click="password_visible = !password_visible"><i class="fas fa-eye-slash"></i></el-button>
</template>
</el-input>
<span class="text-danger" v-if="errors.has('password')">{{ errors.first('password') }}</span>
<has-error :form="form" field="password"/>
</div>
</div>
<!-- Password Confirmation -->
<div class="form-group row" :class="{'has-error': errors.has('confirm_password') }">
<div class="form-group row">
<label class="col-md-3 col-form-label text-md-right">{{ $t('confirm_password') }}</label>
<div class="col-md-7">
<el-input v-if="password_confirmation_visible" v-model="form.password_confirmation" v-validate="'required|min:6|max:255'" type="text" name="password_confirmation" placeholder="Confirm Password">
<el-input v-if="password_confirmation_visible" v-model="form.password_confirmation" type="text" name="password_confirmation" placeholder="Confirm Password">
<template slot="append">
<el-button type="primary" @click="password_confirmation_visible = !password_confirmation_visible"><i class="fas fa-eye"></i></el-button>
</template>
</el-input>
<el-input v-else v-model="form.password_confirmation" v-validate="'required|min:6|max:255'" type="password" name="password_confirmation" placeholder="Confirm Password">
<el-input v-else v-model="form.password_confirmation" type="password" name="password_confirmation" placeholder="Confirm Password">
<template slot="append">
<el-button type="primary" @click="password_confirmation_visible = !password_confirmation_visible"><i class="fas fa-eye-slash"></i></el-button>
</template>
</el-input>
<span class="text-danger" v-if="errors.has('password_confirmation')">{{ errors.first('password_confirmation') }}<br/></span>
<has-error :form="form" field="password_confirmation"/>
</div>
</div>
<div class="form-group row">
<div class="col-md-7 offset-md-3 d-flex">
<!-- Submit Button -->
<v-button :loading="form.busy" :disabled="errors.any() || form.password=='' || form.password_confirmation=='' || form.email=='' || form.marking=='' ? true : false">
<v-button :loading="form.busy" :disabled="form.password=='' || form.password_confirmation=='' || form.email=='' || form.marking=='' ? true : false">
{{ $t('register') }}
</v-button>
@@ -83,8 +82,6 @@ import Form from 'vform'
import LoginWithGithub from '~/components/LoginWithGithub'
import store from '~/store'
import Vue from 'vue'
import VeeValidate from 'vee-validate';
Vue.use(VeeValidate);
export default {
middleware: 'guest',
resources/assets/js/pages/booking/completed.vue
+12 -6
View File
@@ -1,6 +1,7 @@
<template>
<el-main>
<progress-track v-model="status"/>
<x2-progress-track v-if="(booking_details.status == 'x2_cash' || booking_details.status == 'x2_cheque' || booking_details.status == 'x2_ba')" v-model="trackerConfig" />
<progress-track v-else v-model="trackerConfig" />
<h1>Order Completed</h1>
<div class="goBackButton">
<el-button type="primary" @click="$router.go(-1)">Go Back</el-button>
@@ -24,7 +25,7 @@
<div class="card">
<div class="card-header">China Bank Slip</div>
<div class="row">
<div v-for="cn_bankslip in booking_details.china_bankslip_path">
<div v-for="cn_bankslip in booking_details.china_bankslip_path" :key='cn_bankslip'>
<a target="_blank" :href="getURL(cn_bankslip)">
<img v-if="isImage(cn_bankslip)" v-bind:src="cn_bankslip" class="image">
<p v-else>Download</p>
@@ -57,7 +58,7 @@
<table class="table table-striped">
<tbody>
<tr>
<td>Order Number :</td>
<td>Ref No :</td>
<td>{{ booking_details.id }}</td>
</tr>
<tr>
@@ -148,17 +149,21 @@
}
</style>
<script>
import VueCountdown from '@dmaksimovic/vue-countdown'
import ProgressTrack from '~/components/ProgressTrack'
import X2ProgressTrack from '~/components/X2ProgressTrack'
import axios from 'axios'
export default {
components: {
'progress-track': ProgressTrack
'progress-track': ProgressTrack,
'x2-progress-track': X2ProgressTrack
},
data () {
return {
status: 7,
trackerConfig :{
status: 7,
term: null,
},
loading_btn: false,
booking_details:{
id: null,
@@ -180,6 +185,7 @@ export default {
.get('/api/booking/' + this.$route.params.id)
.then((response) => {
this.booking_details = response.data
this.trackerConfig.term = response.data.term
loading.close();
}).catch((error) => {
resources/assets/js/pages/booking/confirmation.vue
+11 -5
View File
@@ -1,6 +1,7 @@
<template>
<el-main>
<progress-track v-model="status"/>
<x2-progress-track v-if="(booking_details.status == 'x2_cash' || booking_details.status == 'x2_cheque' || booking_details.status == 'x2_ba')" v-model="trackerConfig" />
<progress-track v-else v-model="trackerConfig" />
<h1>Bankin Slip Verification in Progress</h1>
<div class="goBackButton">
<el-button type="primary" @click="$router.go(-1)">Go Back</el-button>
@@ -13,7 +14,7 @@
<table class="table table-striped">
<tbody>
<tr>
<td>Order Number :</td>
<td>Ref No :</td>
<td>{{ booking_details.id }}</td>
</tr>
<tr>
@@ -102,17 +103,21 @@
}
</style>
<script>
import VueCountdown from '@dmaksimovic/vue-countdown'
import ProgressTrack from '~/components/ProgressTrack'
import X2ProgressTrack from '~/components/X2ProgressTrack'
import axios from 'axios'
export default {
components: {
'progress-track': ProgressTrack
'progress-track': ProgressTrack,
'x2-progress-track': X2ProgressTrack
},
data () {
return {
status: 3,
trackerConfig :{
status: 3,
term: null
},
loading_btn: false,
booking_details:{
id: null,
@@ -134,6 +139,7 @@ export default {
.get('/api/booking/' + this.$route.params.id)
.then((response) => {
this.booking_details = response.data
this.trackerConfig.term = response.data.term
loading.close()
}).catch((error) => {
resources/assets/js/pages/booking/po.vue
+11 -5
View File
@@ -1,6 +1,7 @@
<template>
<el-main>
<progress-track v-model="status"/>
<x2-progress-track v-if="(booking_details.status == 'x2_cash' || booking_details.status == 'x2_cheque' || booking_details.status == 'x2_ba')" v-model="trackerConfig" />
<progress-track v-else v-model="trackerConfig" />
<h1>Processing Invoice</h1>
<div class="goBackButton">
<el-button type="primary" @click="$router.go(-1)">Go Back</el-button>
@@ -53,7 +54,7 @@
<table class="table table-striped">
<tbody>
<tr>
<td>Order Number :</td>
<td>Ref No :</td>
<td>{{ booking_details.id }}</td>
</tr>
<tr>
@@ -144,17 +145,21 @@
}
</style>
<script>
import VueCountdown from '@dmaksimovic/vue-countdown'
import ProgressTrack from '~/components/ProgressTrack'
import X2ProgressTrack from '~/components/X2ProgressTrack'
import axios from 'axios'
export default {
components: {
'progress-track': ProgressTrack
'progress-track': ProgressTrack,
'x2-progress-track': X2ProgressTrack
},
data () {
return {
status: 6,
trackerConfig :{
status: 6,
term: null
},
loading_btn: false,
booking_details:{
id: null,
@@ -176,6 +181,7 @@ export default {
.get('/api/booking/' + this.$route.params.id)
.then((response) => {
this.booking_details = response.data
this.trackerConfig.term = response.data.term
loading.close()
}).catch((error) => {
resources/assets/js/pages/booking/poComplete.vue
+11 -6
View File
@@ -1,7 +1,7 @@
<template>
<el-main>
<progress-track v-model="status"/>
<x2-progress-track v-if="(booking_details.status == 'x2_cash' || booking_details.status == 'x2_cheque' || booking_details.status == 'x2_ba')" v-model="trackerConfig" />
<progress-track v-else v-model="trackerConfig" />
<div align="center">
<h4 style="margin-top:5%;">Processing Invoice</h4>
<br>
@@ -69,7 +69,7 @@
<table class="table table-striped">
<tbody>
<tr>
<td>Order Number :</td>
<td>Ref No :</td>
<td>{{ booking_details.id }}</td>
</tr>
<tr>
@@ -131,17 +131,21 @@
}
</style>
<script>
import VueCountdown from '@dmaksimovic/vue-countdown'
import ProgressTrack from '~/components/ProgressTrack'
import X2ProgressTrack from '~/components/X2ProgressTrack'
import axios from 'axios'
export default {
components: {
'progress-track': ProgressTrack
'progress-track': ProgressTrack,
'x2-progress-track': X2ProgressTrack
},
data () {
return {
status: 6,
trackerConfig :{
status: 6,
term: null
},
loading_btn: false,
booking_details:{
id: null,
@@ -163,6 +167,7 @@ export default {
.get('/api/booking/' + this.$route.params.id)
.then((response) => {
this.booking_details = response.data
this.trackerConfig.term = response.data.term
loading.close()
}).catch((error) => {
resources/assets/js/pages/booking/transfer.vue
+23 -13
View File
@@ -1,6 +1,7 @@
<template>
<el-main>
<progress-track v-model="status"/>
<x2-progress-track v-if="(booking_details.status == 'x2_cash' || booking_details.status == 'x2_cheque' || booking_details.status == 'x2_ba')" v-model="trackerConfig" />
<progress-track v-else v-model="trackerConfig" />
<h1>Bankin Slip Approved</h1>
<h2>Transfer In Progress</h2>
<div class="goBackButton">
@@ -15,7 +16,7 @@
<table class="table table-striped">
<tbody>
<tr>
<td>Order Number :</td>
<td>Ref No:</td>
<td>{{ booking_details.id }}</td>
</tr>
<tr>
@@ -72,7 +73,7 @@
<div class="card-body">
<a target="_blank" :href="booking_details.user_bankslip_path">
<a target="_blank" :href="getURL(booking_details.user_bankslip_path)">
<img v-if="isImage(booking_details.user_bankslip_path)" v-bind:src="booking_details.user_bankslip_path" class="image">
<img v-if="this.bankslip_is_image" v-bind:src="booking_details.user_bankslip_path" class="image">
<p v-else>Download</p>
</a>
</a>
@@ -123,18 +124,23 @@
}
</style>
<script>
import VueCountdown from '@dmaksimovic/vue-countdown'
import ProgressTrack from '~/components/ProgressTrack'
import X2ProgressTrack from '~/components/X2ProgressTrack'
import axios from 'axios'
export default {
components: {
'progress-track': ProgressTrack
'progress-track': ProgressTrack,
'x2-progress-track': X2ProgressTrack
},
data () {
return {
status: 4,
trackerConfig :{
status: 4,
term: null
},
loading_btn: false,
bankslip_is_image: false,
booking_details:{
id: null,
amount: null,
@@ -155,6 +161,14 @@ export default {
.get('/api/booking/' + this.$route.params.id)
.then((response) => {
this.booking_details = response.data
this.trackerConfig.term = response.data.term
// check if path is image
var ext = this.booking_details.user_bankslip_path.split('.').pop();
if (ext === 'jpg' || ext === 'jpeg' || ext === 'bmp' || ext === 'png'){
this.bankslip_is_image = true
}
loading.close()
}).catch((error) => {
@@ -164,15 +178,11 @@ export default {
name: 'notfound'
})
})
},
methods: {
getExtension(path){
return path.slice(-3);
},
isImage(path){
var ext = this.getExtension(path);
return ext === 'jpg' || ext === 'jpeg' || ext === 'bmp' || ext === 'png';
},
getURL(path){
var getUrl = window.location;
var baseUrl = getUrl.protocol + "//" + getUrl.host;
resources/assets/js/pages/booking/uploadPo.vue
+169 -159
View File
@@ -1,79 +1,72 @@
<template>
<el-main>
<progress-track v-model="status"/>
<h1>Transfer Completed</h1>
<h2> Please upload your purchase order </h2>
<!-- upload card -->
<div class="row">
<div class="col">
<div class="card">
<div class="card-header">Upload PO</div>
<!-- upload image -->
<div class="card-body">
<el-upload :action="'/api/booking/' + booking_id + '/upload-po'" :on-exceed="handleExceed" :on-preview="handlePreview"
:on-remove="handleRemove"
:on-error="uploadError"
class="upload-demo uploadAreaOne"
accept=".jpeg, .jpg, .png, .bmp, .doc, .docx, .xls, .xlsx, .pdf"
drag
multiple>
<i class="el-icon-upload"/>
<div class="el-upload__text">Drop file here or
<em>click to upload</em>
</div>
<div slot="tip" class="el-upload__tip">bmp/jpeg/jpg/png/pdf/xls/xlxs/doc/docx files with a size less than 3MB</div>
</el-upload>
<el-upload
class="upload-demo uploadAreaTwo"
:action="'/api/booking/' + booking_id + '/upload-po'"
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-remove="beforeRemove"
multiple
:file-list="fileList">
<el-button size="small" type="primary">Click to upload</el-button>
<div slot="tip" class="el-upload__tip">jpg/png files with a size less than 500kb</div>
</el-upload>
<div class="bottom clearfix" style="text-align:right;">
<el-button :loading="loading_btn" type="primary" @click="uploadPo">Submit</el-button>
<el-main>
<x2-progress-track v-if="(booking_details.status == 'x2_cash' || booking_details.status == 'x2_cheque' || booking_details.status == 'x2_ba')" v-model="trackerConfig" />
<progress-track v-else v-model="trackerConfig" />
<h1>Transfer Completed</h1>
<h2> Please upload your purchase order </h2>
<!-- upload card -->
<div class="row">
<div class="col">
<div class="card">
<div class="card-header">Upload PO
<a href="/CIEF-X-Plan-PO-Format-15.0.xlsm" target="_blank">(Download Po Format)</a>
</div>
<!-- upload image -->
<div class="card-body">
<el-upload :action="'/api/booking/' + booking_id + '/upload-po'" :on-exceed="handleExceed" :on-preview="handlePreview" :on-remove="handleRemove"
:on-error="uploadError" class="upload-demo uploadAreaOne" accept=".jpeg, .jpg, .png, .bmp, .doc, .docx, .xls, .xlsx, .pdf"
drag multiple>
<i class="el-icon-upload" />
<div class="el-upload__text">Drop file here or
<em>click to upload</em>
</div>
<div slot="tip" class="el-upload__tip">bmp/jpeg/jpg/png/pdf/xls/xlxs/doc/docx files with a size less than 3MB</div>
</el-upload>
<el-upload class="upload-demo uploadAreaTwo" :action="'/api/booking/' + booking_id + '/upload-po'" :on-preview="handlePreview"
:on-remove="handleRemove" :before-remove="beforeRemove" multiple :file-list="fileList">
<el-button size="small" type="primary">Click to upload</el-button>
<div slot="tip" class="el-upload__tip">jpg/png files with a size less than 500kb</div>
</el-upload>
<div class="bottom clearfix" style="text-align:right;">
<el-button :loading="loading_btn" type="primary" @click="uploadPo">Submit</el-button>
</div>
<!-- upload image end -->
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-header">China Bank Slip</div>
<div class="card-body">
<a target="_blank" :href="getURL(booking_details.china_bankslip_path)">
<img v-if="isImage(booking_details.china_bankslip_path)" v-bind:src="booking_details.china_bankslip_path" class="image">
<p v-else>Download</p>
</a>
</div>
<!-- upload image end -->
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-header">China Bank Slip</div>
<div class="card-body">
<a target="_blank" :href="getURL(booking_details.china_bankslip_path)">
<img v-if="isImage(booking_details.china_bankslip_path)" v-bind:src="booking_details.china_bankslip_path" class="image">
<p v-else>Download</p>
</a>
</div>
</div>
</div>
</div>
<!-- order details -->
<div class="card">
<div class="card-header">Order Details</div>
<div class="card-body">
<!-- order details -->
<div class="card">
<div class="card-header">Order Details</div>
<div class="card-body">
<div class="row">
<div class="col">
<table class="table table-striped">
<tbody>
<tr>
<td>Order Number :</td>
<td>Ref No :</td>
<td>{{ booking_details.id }}</td>
</tr>
<tr>
<td>Date :</td>
<td>{{ booking_details.created_at }}</td>
<td>{{ booking_details.created_at }}</td>
</tr>
<tr>
<td>Customer Marking :</td>
<td>{{ booking_details.marking }}</td>
<td>{{ booking_details.marking }}</td>
</tr>
<tr>
<td>Term: </td>
@@ -95,15 +88,17 @@
</tr>
<tr>
<td>+ Service Charge :</td>
<td>CNY {{ booking_details.service_charge }}</td>
<td>CNY {{ booking_details.service_charge }}</td>
</tr>
<tr>
<td>RATE :</td>
<td>{{ booking_details.rate }}</td>
<td>{{ booking_details.rate }}</td>
</tr>
<tr>
<td></td>
<td><b>MYR {{ booking_details.bia }}</b></td>
<td>
<b>MYR {{ booking_details.bia }}</b>
</td>
</tr>
<tr>
<td>Beneficiary Account Number : </td>
@@ -120,9 +115,9 @@
<div class="row">
<div class="card-body">
<a target="_blank" :href="getURL(booking_details.user_bankslip_path)">
<img v-if="isImage(booking_details.user_bankslip_path)" v-bind:src="booking_details.user_bankslip_path" class="image">
<p v-else>Download</p>
</a>
<img v-if="isImage(booking_details.user_bankslip_path)" v-bind:src="booking_details.user_bankslip_path" class="image">
<p v-else>Download</p>
</a>
</div>
</div>
</div>
@@ -132,19 +127,23 @@
* {
box-sizing: border-box;
}
h1 {
margin-top:5%;
font-size:3vw;
text-align:center;
margin-top: 5%;
font-size: 3vw;
text-align: center;
}
h2 {
font-size:2vw;
text-align:center;
margin-bottom:3%;
font-size: 2vw;
text-align: center;
margin-bottom: 3%;
}
.booking-details {
font-weight: bold;
}
.bankinSlipImage {
border: 1px solid #ddd;
border-radius: 4px;
@@ -153,26 +152,30 @@
width: 150px;
display: block;
}
.bankinSlipImage:hover {
box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
.uploadAreaTwo {
display: none;
}
.card {
margin-bottom: 3%;
}
@media only screen and (max-width : 767px) {
@media only screen and (max-width: 767px) {
.uploadAreaOne {
display: none;
}
.uploadAreaTwo {
display: unset;
}
.table {
font-size: 3.5vmin;
}
h1 {
.table {
font-size: 3.5vmin;
}
h1 {
font-size: 1em;
}
h2 {
@@ -181,104 +184,111 @@
}
</style>
<script>
import VueCountdown from '@dmaksimovic/vue-countdown'
import ProgressTrack from '~/components/ProgressTrack'
import ProgressTrack from '~/components/ProgressTrack'
import X2ProgressTrack from '~/components/X2ProgressTrack'
import axios from 'axios'
export default {
components: {
'progress-track': ProgressTrack
'progress-track': ProgressTrack,
'x2-progress-track': X2ProgressTrack
},
data () {
return {
booking_id: this.$route.params.id,
status: 5,
loading_btn: false,
booking_details:{
id: null,
amount: null,
bia: null,
user_bankslip_path: null,
china_bankslip_path: null,
data() {
return {
booking_id: this.$route.params.id,
trackerConfig :{
status: 5,
term: null
},
loading_btn: false,
booking_details: {
id: null,
amount: null,
bia: null,
user_bankslip_path: null,
china_bankslip_path: null,
}
}
}
},
beforeCreate () {
const loading = this.$loading({
lock: true,
text: 'Please wait..',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
axios
.get('/api/booking/' + this.$route.params.id)
.then((response) => {
this.booking_details = response.data
loading.close()
}).catch((error) => {
console.log(error)
loading.close()
this.$router.push({
name: 'notfound'
})
},
beforeCreate() {
const loading = this.$loading({
lock: true,
text: 'Please wait..',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
},
methods: {
uploadPo () {
this.loading_btn = true
axios
.post('/api/booking/' + this.$route.params.id + '/confirm-po')
.get('/api/booking/' + this.$route.params.id)
.then((response) => {
this.$message({
showClose: true,
message: 'Your PO has been uploaded. We are processing the Invoice.',
type: 'success',
duration: 5000
})
this.$router.push({
name: 'home'
})
this.loading_btn = false
this.booking_details = response.data
this.trackerConfig.term = response.data.term
loading.close()
}).catch((error) => {
console.log(error)
loading.close()
this.$router.push({
name: 'notfound'
})
})
},
methods: {
uploadPo() {
this.loading_btn = true
axios
.post('/api/booking/' + this.$route.params.id + '/confirm-po')
.then((response) => {
this.$message({
showClose: true,
message: 'Your PO has been uploaded. We are processing the Invoice.',
type: 'success',
duration: 5000
})
this.$router.push({
name: 'home'
})
this.loading_btn = false
}).catch((error) => {
this.$message({
showClose: true,
message: "Please upload your purchase order",
type: 'error',
duration: 30000
})
this.loading_btn = false
})
},
handleRemove (file, fileList) {
console.log(file, fileList)
// Should send some reqeust to controller to delete the file
},
handlePreview (file) {
console.log(file)
},
handleExceed (files, fileList) {
this.$message.warning(`The limit is 3, you selected ${files.length} files this time, add up to ${files.length + fileList.length} totally`)
},
beforeRemove (file, fileList) {
return this.$confirm(`确定移除 ${file.name}？`)
},
uploadError(file,fileList){
this.$message.warning(`Incorrect file format or file size too big.`)
},
getExtension(path){
return path.slice(-3);
},
isImage(path){
var ext = this.getExtension(path);
return ext === 'jpg' || ext === 'jpeg' || ext === 'bmp' || ext === 'png';
},
getURL(path){
var getUrl = window.location;
var baseUrl = getUrl.protocol + "//" + getUrl.host;
return baseUrl + path;
this.loading_btn = false
})
},
handleRemove(file, fileList) {
console.log(file, fileList)
// Should send some reqeust to controller to delete the file
},
handlePreview(file) {
console.log(file)
},
handleExceed(files, fileList) {
this.$message.warning(
`The limit is 3, you selected ${files.length} files this time, add up to ${files.length + fileList.length} totally`
)
},
beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${file.name}？`)
},
uploadError(file, fileList) {
this.$message.warning(`Incorrect file format or file size too big.`)
},
getExtension(path) {
return path.slice(-3);
},
isImage(path) {
var ext = this.getExtension(path);
return ext === 'jpg' || ext === 'jpeg' || ext === 'bmp' || ext === 'png';
},
getURL(path) {
var getUrl = window.location;
var baseUrl = getUrl.protocol + "//" + getUrl.host;
return baseUrl + path;
}
}
}
}
</script>
</script>
resources/assets/js/pages/booking/uploadUserBankSlip.vue
+339 -243
View File
@@ -1,61 +1,71 @@
<template>
<el-main>
<progress-track v-model="status"/>
<div align="center" v-if="booking.user_bankslip_path">
<h4 style="margin-top:5%" >
Your Bankslip Has Been Rejected, Please Reupload Your Bankslip <br>
Reason : {{ booking.reject_reason }}
</h4>
<br>
<br>
</div>
<div v-else align="center">
<h1>Waiting For Payment</h1>
</div>
<x2-progress-track v-if="(booking.status == 'x2_cash' || booking.status == 'x2_cheque' || booking.status == 'x2_ba')"
v-model="trackerConfig" />
<progress-track v-else v-model="trackerConfig" />
<div align="center" v-if="booking.user_bankslip_path">
<h4 style="margin-top:5%">
Your Bankslip Has Been Rejected, Please Reupload Your Bankslip
<br> Reason : {{ booking.reject_reason }}
</h4>
<br>
<br>
</div>
<div v-else align="center">
<h1>Please Upload Bankslip</h1>
</div>
<div class="row">
<table class="table table-striped">
<tbody>
<tr>
<td>Amount : </td>
<td><b>RMB {{ booking.amount }}</b></td>
</tr>
<tr>
<td>Bankin Amount : </td>
<td><b> MYR {{ booking.bankin_amount }}</b></td>
</tr>
<tr>
<td colspan="2">
<b>{{ bankDetail.company_name }}</b><br>
{{ bankDetail.bank_name }} : {{ bankDetail.acc_no }}
</td>
</tr>
</tbody>
</table>
</div>
<div class="row timer">
<div class="col">
<vue-countdown :countdownend="handleCoutdownend" :time="booking.timeout">
<template slot-scope="props">Time Remaining：<br>{{ props.days }} days, {{ props.hours }} hours, {{ props.minutes }} minutes, {{ props.seconds }} seconds.</template>
</vue-countdown>
<div class="row">
<table class="table table-striped">
<tbody>
<tr>
<td>Amount : </td>
<td>
<b>RMB {{ booking.amount }}</b>
</td>
</tr>
<tr>
<td>Bankin Amount : </td>
<td>
<b> MYR {{ booking.bankin_amount }}</b>
</td>
</tr>
<tr>
<td colspan="2">
<b>{{ bankDetail.company_name }}</b>
<br> {{ bankDetail.bank_name }} : {{ bankDetail.acc_no }}
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- upload image -->
<div class="row upload">
<div class="col">
<el-upload :action="'/api/booking/' + booking_id + '/upload-user-bankslip'"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
:on-error="uploadError"
accept=".jpeg, .jpg, .png, .bmp, .doc, .docx, .xls, .xlsx, .pdf"
list-type="picture-card" align="center">
<i class="el-icon-plus" />
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img :src="dialogImageUrl" width="100%" alt="">
</el-dialog>
<div class="row timer">
<div class="col">
<vue-countdown :countdownend="handleCoutdownend" :time="booking.timeout">
<template slot-scope="props">Time Remaining：
<br>{{ props.days }} days, {{ props.hours }} hours, {{ props.minutes }} minutes, {{ props.seconds }} seconds.</template>
</vue-countdown>
</div>
</div>
</div>
<!-- upload image -->
<div class="row upload">
<div class="col">
<!-- <el-upload :action="'/api/booking/' + booking_id + '/upload-user-bankslip'" :show-file-list="false" :on-preview="handlePictureCardPreview"
:on-remove="handleRemove" :on-error="uploadError" accept=".jpeg, .jpg, .png, .bmp, .doc, .docx, .xls, .xlsx, .pdf" list-type="picture-card"
align="center">
<i class="el-icon-plus" />
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img :src="dialogImageUrl" width="100%" alt="">
</el-dialog> -->
<el-upload class="avatar-uploader" :action="'/api/booking/' + booking_id + '/upload-user-bankslip'" :show-file-list="false"
:on-success="handleUploadSuccess" :before-upload="beforeFileUpload" algin="center">
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</div>
</div>
<!-- upload image end -->
<div class="row bankinAmount">
<div class="col">
@@ -72,29 +82,34 @@
</el-form-item>
</el-form>
</div>
</div>
</el-main>
</template>
<style>
h1 {
margin-top:5%;
font-size:3vw;
text-align:center;
margin-bottom:3%;
}
.timer, .upload, .bankinAmount {
margin-top: 5%;
font-size: 3vw;
text-align: center;
margin-bottom: 3%;
}
.timer,
.upload,
.bankinAmount {
text-align: center;
}
.transferAmountInput {
width: 20%;
}
.row {
margin-bottom: 3%;
}
td:last-child {
text-align:center;
margin-bottom: 3%;
}
td:last-child {
text-align: center;
}
@media screen and (max-width: 767px) {
.transferAmountInput {
width: 60%;
@@ -103,200 +118,281 @@
font-size: 3.5vmin;
}
h1 {
font-size: 1em;
}
font-size: 1em;
}
}
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar {
width: 178px;
height: 178px;
display: block;
}
</style>
<script>
import VueCountdown from '@xkeshi/vue-countdown'
import ProgressTrack from '~/components/ProgressTrack'
import axios from 'axios'
import VueCountdown from '@xkeshi/vue-countdown'
import ProgressTrack from '~/components/ProgressTrack'
import X2ProgressTrack from '~/components/X2ProgressTrack'
import axios from 'axios'
export default {
middleware: ['auth'],
name: 'MyComponent',
components: {
'vue-countdown': VueCountdown,
'progress-track': ProgressTrack
},
data () {
return {
status: 2,
start: false,
loading: false,
dialogImageUrl: '',
dialogVisible: false,
booking_id: this.$route.params.id,
user_slip_form: {
transfer_amount: ''
},
booking: {
amount: '',
bankin_amount: '',
timeout: 1,
term : '123',
user_bankslip_path: null,
reject_reason: null,
},
rules: {
transfer_amount: [{
required: true,
message: 'Please input amount',
trigger: 'change'
}]
},
active_bank_setting: {
x1_bank_id: null,
x2_bank_id: null,
beneficiary_id: null
},
bankDetail: {}
}
},
beforeCreate () {
const loading = this.$loading({
lock: true,
text: 'Please wait..',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
axios.get('/api/booking/' + this.$route.params.id)
.then((response) => {
this.booking.amount = response.data.amount;
this.booking.bankin_amount = response.data.bia;
this.booking.timeout = response.data.timeout * 1000;
this.booking.term = response.data.term;
if (response.data.user_bankslip_path)
{
this.booking.user_bankslip_path = response.data.user_bankslip_path
this.booking.reject_reason = response.data.reject_reason
}
console.log(this.booking);
this.start = true;
if (this.booking.timeout < 0){
this.$message({
showClose: true,
message: 'Booking timeout, please make another booking.',
type: 'error',
duration: 30000
export default {
middleware: ['auth'],
name: 'MyComponent',
components: {
'vue-countdown': VueCountdown,
'progress-track': ProgressTrack,
'x2-progress-track': X2ProgressTrack
},
data() {
return {
trackerConfig: {
status: 2,
term: null
},
start: false,
loading: false,
dialogImageUrl: '',
imageUrl: null,
dialogVisible: false,
booking_id: this.$route.params.id,
user_slip_form: {
transfer_amount: ''
},
booking: {
amount: '',
bankin_amount: '',
timeout: 1,
term: '123',
user_bankslip_path: null,
reject_reason: null,
},
rules: {
transfer_amount: [{
required: true,
message: 'Please input amount',
trigger: 'change'
}]
},
active_bank_setting: {
x1_bank_id: null,
x2_bank_id: null,
beneficiary_id: null
},
bankDetail: {}
}
},
beforeCreate() {
const loading = this.$loading({
lock: true,
text: 'Please wait..',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
this.$router.push({
name: 'home'
})
}
}).catch((error) => {
this.$router.push({
name: 'notfound'
})
console.log(error)
})
axios.get('/api/active-bank')
.then((response) => {
this.active_bank_setting = response.data;
var url = '';
if(this.booking.term === 'x1_cash' || this.booking.term === 'x1_cheque' ||this.booking.term === 'x1_ba'){
url = '/api/malaysia-bank/' + this.active_bank_setting.x1_bank_id;
}
else if(this.booking.term === 'x2_cash' || this.booking.term === 'x2_cheque' ||this.booking.term === 'x2_ba'){
url = '/api/malaysia-bank/' + this.active_bank_setting.x2_bank_id;
}
axios.get(url)
.then((response) => {
this.bankDetail = response.data;
loading.close()
})
.catch((error) => {
loading.close()
console.log(error);
axios.get('/api/booking/' + this.$route.params.id)
.then((response) => {
this.booking.amount = response.data.amount;
this.booking.bankin_amount = response.data.bia;
this.booking.timeout = response.data.timeout * 1000;
this.booking.term = response.data.term;
this.booking.status = response.data.status;
this.trackerConfig.term = response.data.term
if (response.data.user_bankslip_path) {
this.booking.user_bankslip_path = response.data.user_bankslip_path
this.booking.reject_reason = response.data.reject_reason
}
console.log(this.booking);
this.start = true;
if (this.booking.timeout < 0) {
this.$message({
showClose: true,
message: 'Fetch data fail',
message: 'Booking timeout, please make another booking.',
type: 'error',
duration: 10000
duration: 30000
})
this.$router.push({
name: 'home'
})
}
}).catch((error) => {
this.$router.push({
name: 'notfound'
})
console.log(error)
})
axios.get('/api/active-bank')
.then((response) => {
this.active_bank_setting = response.data;
var url = '';
if (this.booking.term === 'x1_cash' || this.booking.term === 'x1_cheque' || this.booking.term === 'x1_ba') {
url = '/api/malaysia-bank/' + this.active_bank_setting.x1_bank_id;
} else if (this.booking.term === 'x2_cash' || this.booking.term === 'x2_cheque' || this.booking.term === 'x2_ba') {
url = '/api/malaysia-bank/' + this.active_bank_setting.x2_bank_id;
}
axios.get(url)
.then((response) => {
this.bankDetail = response.data;
loading.close()
})
.catch((error) => {
loading.close()
console.log(error);
this.$message({
showClose: true,
message: 'Fetch data fail',
type: 'error',
duration: 10000
});
});
})
.catch((error) => {
console.log(error);
this.$message({
showClose: true,
message: 'Fetch bank details fail',
type: 'error',
duration: 10000
});
})
.catch((error) => {
console.log(error);
});
},
methods: {
handleUploadSuccess(res, file) {
this.imageUrl = URL.createObjectURL(file.raw);
this.$message({
showClose: true,
message: 'Fetch data fail',
type: 'error',
duration: 10000
});
});
},
methods: {
handleCoutdownend () {
this.$message({
showClose: true,
message: 'Booking timeout, please make another booking.',
type: 'error',
duration: 30000
})
this.$router.push({
name: 'home'
})
},
handleRemove (file, fileList) {
// console.log(file, fileList)
},
uploadError(file,fileList){
this.$message.warning(`Incorrect file format or file size too big.`)
},
handlePictureCardPreview (file) {
this.dialogImageUrl = file.url
this.dialogVisible = true
},
submitUserSlip (formName) {
this.loading = true
this.$refs[formName].validate((valid) => {
if (valid) {
let newConfirmation = {
amount: this.booking.amount,
term: this.term
}
} else {
this.loading = false
}
})
let newUserSlip = {
transfer_amount: this.user_slip_form.transfer_amount
}
axios.patch('/api/booking/' + this.booking_id + '/bankslip-amount', newUserSlip)
.then((response) => {
this.$message({
showClose: true,
message: 'Your bankinslip has been submitted, please wait admin to approve.',
type: 'success',
duration: 5000
message: 'Uploaded.',
type: 'success',
duration: 5000
})
},
beforeFileUpload(file) {
//const isJPG = file.type === 'image/jpeg';
const isLt10M = file.size / 10240 / 10240 < 2;
// if (!isJPG) {
// this.$message.error('Avatar picture must be JPG format!');
// }
if (!isLt10M) {
this.$message.error('File size can not exceed 10MB!');
}
this.$router.push({
name: 'home'
})
})
.catch((error) => {
this.loading = false
this.$message({
showClose: true,
message: 'Please upload your bankin slip first.',
type: 'warning',
duration: 10000
showClose: true,
message: 'Uploading..',
type: 'success',
duration: 5000
})
console.log(error)
})
},
handleTimeExpire () {
alert('Booking expired')
},
startTimer () {
this.start = true;
// return isJPG && isLt2M;
return isLt10M;
},
handleCoutdownend() {
this.$message({
showClose: true,
message: 'Booking timeout, please make another booking.',
type: 'error',
duration: 30000
})
this.$router.push({
name: 'home'
})
},
handleRemove(file, fileList) {
// console.log(file, fileList)
},
uploadError(file, fileList) {
this.$message.warning(`Incorrect file format or file size too big.`)
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url
this.dialogVisible = true
},
submitUserSlip(formName) {
this.loading = true
if (this.booking.amount == '') {
this.$message({
showClose: true,
message: 'Please key in your bankin amount first.',
type: 'warning',
duration: 10000
})
return;
}
this.$refs[formName].validate((valid) => {
if (valid) {
let newConfirmation = {
amount: this.booking.amount,
term: this.term
}
} else {
this.loading = false
}
})
let newUserSlip = {
transfer_amount: this.user_slip_form.transfer_amount
}
axios.patch('/api/booking/' + this.booking_id + '/bankslip-amount/', newUserSlip)
.then((response) => {
console.log(response);
this.$message({
showClose: true,
message: 'Your bankinslip has been submitted, please wait admin to approve.',
type: 'success',
duration: 5000
})
this.$router.push({
name: 'home'
})
}).catch((error) => {
this.$message({
showClose: true,
message: 'Please upload your bankin slip first.',
type: 'warning',
duration: 10000
})
this.loading = false
console.log(error)
})
},
handleTimeExpire() {
alert('Booking expired')
},
startTimer() {
this.start = true;
}
}
}
}
</script>
</script>
resources/assets/js/pages/booking/x2Completed.vue
+196
View File
@@ -0,0 +1,196 @@
<template>
<el-main>
<x2-progress-track v-if="(booking_details.status == 'x2_cash' || booking_details.status == 'x2_cheque' || booking_details.status == 'x2_ba')"
v-model="trackerConfig" />
<progress-track v-else v-model="trackerConfig" />
<h1>Order Completed</h1>
<div class="goBackButton">
<el-button type="primary" @click="$router.go(-1)">Go Back</el-button>
</div>
<!-- bankslip -->
<div class="row">
<div class="col">
<div class="card">
<div class="card-header">China Bank Slip</div>
<div class="row">
<div v-for="cn_bankslip in booking_details.china_bankslip_path" :key='cn_bankslip'>
<a target="_blank" :href="getURL(cn_bankslip)">
<img v-if="isImage(cn_bankslip)" v-bind:src="cn_bankslip" class="image">
<p v-else>Download</p>
<br/>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- order details -->
<div class="card">
<div class="card-header">Order Details</div>
<div class="card-body">
<div class="row">
<div class="col">
<table class="table table-striped">
<tbody>
<tr>
<td>Ref No :</td>
<td>{{ booking_details.id }}</td>
</tr>
<tr>
<td>Date :</td>
<td>{{ booking_details.created_at }}</td>
</tr>
<tr>
<td>Customer Marking :</td>
<td>{{ booking_details.marking }}</td>
</tr>
<tr>
<td>Term: </td>
<td>{{ booking_details.term }}</td>
</tr>
</tbody>
</table>
</div>
<div class="col">
<table class="table table-striped">
<tbody>
<tr>
<td>CNY/RMB :</td>
<td>CNY {{ booking_details.amount }}</td>
</tr>
<tr>
<td>+ Service Charge :</td>
<td>CNY {{ booking_details.service_charge }}</td>
</tr>
<tr>
<td>RATE :</td>
<td>{{ booking_details.rate }}</td>
</tr>
<tr>
<td></td>
<td>
<b>MYR {{ booking_details.bia }}</b>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">Order Bankin Slip</div>
<div class="row">
<div class="card-body">
<a target="_blank" :href="getURL(booking_details.user_bankslip_path)">
<img v-if="isImage(booking_details.user_bankslip_path)" v-bind:src="booking_details.user_bankslip_path" class="image">
<p v-else>Download</p>
</a>
</div>
</div>
</div>
</el-main>
</template>
<style>
h1 {
margin-top: 5%;
font-size: 3vw;
text-align: center;
margin-bottom: 3%;
}
.goBackButton {
text-align: center;
margin-bottom: 3%;
}
.uploadedImage {
border: 1px solid #ddd;
border-radius: 4px;
margin-left: auto;
margin-right: auto;
width: 150px;
display: block;
}
.uploadedImage:hover {
box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
.card {
margin-bottom: 3%;
}
@media screen and (max-width: 767px) {
.table {
font-size: 3.5vmin;
}
h1 {
font-size: 1em;
}
}
</style>
<script>
import ProgressTrack from '~/components/ProgressTrack'
import X2ProgressTrack from '~/components/X2ProgressTrack'
import axios from 'axios'
export default {
components: {
'progress-track': ProgressTrack,
'x2-progress-track': X2ProgressTrack
},
data() {
return {
trackerConfig: {
status: 7,
term: null,
},
loading_btn: false,
booking_details: {
id: null,
amount: null,
bia: null,
user_bankslip_path: null,
}
}
},
beforeCreate() {
const loading = this.$loading({
lock: true,
text: 'Please wait..',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
axios
.get('/api/booking/' + this.$route.params.id)
.then((response) => {
this.booking_details = response.data
this.trackerConfig.term = response.data.term
loading.close();
}).catch((error) => {
console.log(error)
loading.close()
this.$router.push({
name: 'notfound'
})
})
},
methods: {
getExtension(path) {
return path.slice(-3);
},
isImage(path) {
var ext = this.getExtension(path);
return ext === 'jpg' || ext === 'jpeg' || ext === 'bmp' || ext === 'png';
},
getURL(path) {
var getUrl = window.location;
var baseUrl = getUrl.protocol + "//" + getUrl.host;
return baseUrl + path;
}
}
}
</script>
resources/assets/js/pages/home.vue
+249 -41
View File
@@ -22,7 +22,7 @@
<!-- Input-Amount-end -->
<div align="right">
<el-button icon="el-icon-refresh" type="primary" size="mini" @click="refreshRate()">Refresh Rate</el-button></div>
<el-button type="primary" :loading="loading_btn" size="mini" @click="refreshRate()">Refresh Rate</el-button></div>
<hr>
<!-- Rate-Display -->
@@ -142,22 +142,30 @@
<!-- Form_popup -->
<el-dialog :visible.sync="dialogFormVisible" :fullscreen="true" title="Booking" center>
<el-form ref="bookingForm" :model="bookingForm" :rules="rules">
<div align="center">
<div align="center">
<el-form-item prop="payment_for"> <!-- TODO : this should be payment for order number -->
<el-select v-model="bookingForm.payment_for" placeholder="Payment For" style="width: 80%" required="true">
<el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item prop="order_no">
<el-input v-model="bookingForm.order_no" placeholder="Order No. (Optional)" style="width: 80%" required="true" />
</el-form-item>
<el-form-item prop="account_name">
<el-input v-model="bookingForm.account_name" placeholder="China Beneficiary Account" style="width: 80%" required="true" />
<el-input v-model="bookingForm.account_name" placeholder="China Beneficiary Name" style="width: 80%" required="true" />
</el-form-item>
<el-form-item prop="bank_name">
<el-input v-model="bookingForm.bank_name" type="text" placeholder="Bank Name / AliPay / WechatPay" style="width: 80%" />
<el-input v-model="bookingForm.bank_name" type="text" placeholder="Bank Name" style="width: 80%" />
</el-form-item>
<el-form-item prop="bank_branch">
<el-input v-model="bookingForm.bank_branch" type="text" placeholder="Branch / 分行/支行" style="width: 80%" />
</el-form-item>
<el-form-item prop="account_num">
<el-input v-model="bookingForm.account_num" type="text" placeholder="Account Number / AliPay_ID / WechatPay_ID" style="width: 80%"
<el-input v-model="bookingForm.account_num" type="text" placeholder="Account Number" style="width: 80%"
/>
</el-form-item>
<el-form-item>
<el-button @click="dialogFormVisible = false">Cancel</el-button>
<!-- <el-button @click="dialogFormVisible = false">Cancel</el-button> -->
<el-button :loading="loading" type="primary" @click="getCalculationValue('bookingForm')">Book Now</el-button>
</el-form-item>
@@ -178,9 +186,13 @@
<td>Customer Marking : </td>
<td> {{ bookingConfirmTable.marking }}</td>
</tr>
<tr>
<tr v-if="bookingConfirmTable.order_no != null">
<td>Payment for (Order No.) : </td>
<td> {{ bookingConfirmTable.payment_order }}</td>
<td> {{ bookingConfirmTable.order_no }}</td>
</tr>
<tr>
<td>Payment for : </td>
<td> {{ bookingConfirmTable.payment_for }}</td>
</tr>
<tr>
<td>Payment Method : </td>
@@ -197,45 +209,62 @@
<tr>
<td>CNY/RMB :</td>
<td>
<b> RM {{ bookingConfirmTable.amount }}</b>
<b> CNY {{ bookingConfirmTable.amount }}</b>
</td>
</tr>
<tr>
<td>+ Service Charges :</td>
<td>
RM {{ bookingConfirmTable.service_charge }}
CNY {{ bookingConfirmTable.service_charge }}
</td>
</tr>
<tr>
<td>/ Rate :</td>
<td>
{{ bookingConfirmTable.rate }}
{{ bookingConfirmTable.rate }}
</td>
</tr>
<tr>
<td></td>
<td>
RM {{ bookingConfirmTable.subtotal }}
MYR {{ bookingConfirmTable.subtotal }}
</td>
</tr>
<tr>
<td>+ Tax :</td>
<td>
RM {{ bookingConfirmTable.taxAmount }}
MYR {{ bookingConfirmTable.taxAmount }}
</td>
</tr>
<tr>
<td>+ Billing Charge :</td>
<td>
RM {{ bookingConfirmTable.billingChargeAmount }}
MYR {{ bookingConfirmTable.billingChargeAmount }}
</td>
</tr>
<tr>
<td>Bank In Amount :</td>
<td>
<b> RM {{ bookingConfirmTable.bankin_amount }}</b>
<b> MYR {{ bookingConfirmTable.bankin_amount }}</b>
</td>
</tr>
<tr>
<td>China Beneficiary Acc : <br>
Name : {{ bookingConfirmTable.acc_name }} <br>
Account No. : {{ bookingConfirmTable.acc_no }} <br>
Bank : {{ bookingConfirmTable.bank_name }}<br>
Branch. : {{ bookingConfirmTable.bank_branch }}
</td>
<td></td>
</tr>
<tr>
<td>Bank In Amount :</td>
<td><b>RM {{ bookingConfirmTable.bankin_amount }}</b></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<span slot="footer" class="dialog-footer">
@@ -249,21 +278,79 @@
<br>
<hr>
<div align="right">
<el-button :loading="loading_btn" type="primary" size="mini" @click="RefreshBooking()">Refresh</el-button></div>
<el-button :loading="loading_btn" type="primary" size="mini" @click="RefreshBooking(); RefreshBookingTableComplete()">Refresh</el-button></div>
<!-- Booking Table -->
<el-row :gutter="20">
<el-tabs type="border-card" class="table-switch">
<el-tab-pane label="Booking Table">
<el-row :gutter="20">
<div>
<el-table :data="bookingTable">
<el-table-column label="No." width="100">
<el-table-column label="Ref No." width="100" >
<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">Update</el-button>
<el-button slot-scope="scope" type="text" @click="(event) => { BookingStatus(scope.row.status, scope.row.id, scope.row.term) }"> {{ scope.row.id }}</el-button>
</el-table-column>
<el-table-column label="DateTime" prop="created_at" width="180" sortable/>
<el-table-column :filters="[{text: 'X1 cash', value: 'x1_cash'}, {text: 'X1 ba', value: 'x1_ba'}, {text: 'X1 cheque', value: 'x1_cheque'}]" :filter-method="filterHandler" label="Term" prop="term" width="100"/> -->
<el-table-column label="Rate" width="100" prop="rate" sortable/>
<el-table-column label="Amount" prop="amount" justify="center" width="110" sortable/>
<el-table-column label="Transfer Amount" prop="transfer_amount" width="170" sortable/>
<!-- <el-table-column label="ETA" sortable width="100"/> -->
<!-- <el-table-column label="Payment Method" :filters="[{text: 'Cash', value: 'Cash'}, {text: 'Cheque', value: 'Cheque'}, {text: 'BA', value: 'BA'}]" :filter-method="filterHandler">
</el-table-column> -->
<!-- <el-table-column :filters="[{text: '(1/6)', value: '(1/6) Order Done'}, {text: '(2/6)', value: '(2/6) Waiting for Upload Bank in Slip'}, {text: '(3/6)', value: '(3/6) Order Confirmation'}, {text: '(4/6)', value: '(4/6) Processing Transfer'}, {text: '(5/6)', value: '(5/6) Waiting for Upload PO'}, {text: '(6/6)', value: '(6/6) Order Complete'}]" :filter-method="filterHandler" prop="status" label="Status"/> -->
<el-table-column label="Status" width="106" >
<template slot-scope="scope">
<el-popover trigger="click" placement="top">
<p>{{ scope.row.status_desc }}</p>
<div slot="reference" class="name-wrapper">
<el-tag size="medium">{{ scope.row.track_status }}</el-tag>
</div>
</el-popover>
</template>
</el-table-column>
<!-- <el-table-column label="Balance" prop="transfer_amount" sortable width="100"/> -->
<!-- <el-table-column prop="timeout" label="Bankin Timeout" /> -->
<el-table-column :filters="[{ text: 'Success', value: 'Success' }, { text: 'Pending', value: 'Pending' }]" :filter-method="filterTag"
label="" width="180" filter-placement="bottom-end">
<el-button slot-scope="scope" type="text" @click="(event) => { BookingStatus(scope.row.status, scope.row.id, scope.row.term) }"> View Status </el-button>
<!-- <template slot-scope="scope">
<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">View Status</el-button>
<el-button size="mini" type="danger" @click="BookingStatus(scope.$index, scope.row)">Cancel</el-button>
</template> -->
</el-table-column>
<el-table-column :filters="[{ text: 'Success', value: 'Success' }, { text: 'Pending', value: 'Pending' }]" :filter-method="filterTag"
label="" width="180" filter-placement="bottom-end">
<!-- <el-button slot-scope="scope" type="text" @click="(event) => { cancelBooking(scope.row.id) }"> Cancel Booking </el-button> -->
</el-table-column>
</el-table>
<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>
</div>
</el-row><br><br></el-tab-pane>
<el-tab-pane label="Completed">
<el-row :gutter="20">
<div>
<el-table :data="bookingTableComplete">
<el-table-column label="Ref No." width="100" >
<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">Update</el-button>
<el-button slot-scope="scope" type="text" @click="(event) => { BookingStatus(scope.row.status, scope.row.id) }"> {{ scope.row.id }}</el-button>
</el-table-column>
<el-table-column label="DateTime" prop="created_at" width="180" sortable/>
<el-table-column :filters="[{text: 'X1', value: 'X1'}, {text: 'X2', value: 'X2'}]" :filter-method="filterHandler" label="Term" prop="term" width="100"/> -->
<el-table-column label="Rate" width="74" prop="rate" />
<el-table-column label="Amount" prop="amount" justify="center" width="110" />
<el-table-column :filters="[{text: 'RMB', value: 'RMB'}, {text: 'USD', value: 'USD'}]" :filter-method="filterHandler" label="Transfer Amount"
prop="transfer_amount" width="170" />
<el-table-column :filters="[{text: 'X1 cash', value: 'x1_cash'}, {text: 'X1 ba', value: 'x1_ba'}, {text: 'X1 cheque', value: 'x1_cheque'}]" :filter-method="filterHandler" label="Term" prop="term" width="100"/> -->
<el-table-column label="Rate" width="120" prop="rate" sortable/>
<el-table-column label="Amount" prop="amount" justify="center" width="110" sortable />
<el-table-column label="Transfer Amount" prop="transfer_amount" width="170" sortable/>
<!-- <el-table-column label="ETA" sortable width="100"/> -->
<!-- <el-table-column label="Payment Method" :filters="[{text: 'Cash', value: 'Cash'}, {text: 'Cheque', value: 'Cheque'}, {text: 'BA', value: 'BA'}]" :filter-method="filterHandler">
</el-table-column> -->
@@ -288,19 +375,24 @@
<el-button size="mini" type="danger" @click="BookingStatus(scope.$index, scope.row)">Cancel</el-button>
</template> -->
</el-table-column>
</el-table>
</div>
</el-row><br><br>
<div align="right">
<el-button type="primary" size="mini" @click="fetchPaginateBooking(pagination.prev_page_url)" :disabled="!pagination.prev_page_url">
<div align="right">
<el-button type="primary" size="mini" @click="fetchCompletePaginateBooking(completePagination.prev_page_url)" :disabled="!completePagination.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">
<span>Page {{completePagination.current_page}} of {{completePagination.last_page}}</span>
<el-button type="primary" size="mini" @click="fetchCompletePaginateBooking(completePagination.next_page_url)" :disabled="!completePagination.next_page_url">
Next
</el-button>
</div>
</div>
</el-row><br><br>
</el-tab-pane>
</el-tabs>
<!-- Booking Table-end -->
</el-main>
</template>
<style>
@@ -313,12 +405,15 @@ import Form from 'vform'
import LoginWithGithub from '~/components/LoginWithGithub'
import store from '~/store'
import axios from 'axios'
import Echo from "laravel-echo"
import Pusher from "pusher-js"
export default {
middleware: ['auth'],
data () {
return {
loading_btn: false,
confirmForm: new Form({
term: '',
amount: ''
@@ -338,13 +433,23 @@ export default {
amount: '',
rate: ''
},
bookingForm: [{
bookingForm: {
account_name: '',
bank_name: '',
bank_branch: '',
account_num: ''
}],
},
rules: {
// order_no: [{
// required: true,
// message: 'Please input order number',
// trigger: 'change'
// }],
payment_for: [{
required: true,
message: 'Please input payment for',
trigger: 'change'
}],
amount: [{
required: true,
message: 'Please input amount',
@@ -380,14 +485,32 @@ export default {
value2: 'MYR',
label2: 'MYR'
}],
options3: [{
value: 'Full Payment',
label: 'Full Payment'
},
{
value: 'Deposit',
label: 'Deposit'
},
{
value: 'Balance',
label: 'Balance'
},
{
value: 'Others',
label: 'Others'
}],
value: 'RMB',
dialogFormVisible: false,
dialogFormVisible1: false,
formLabelWidth: '0px',
bookingTable: [
],
bookingTable: [],
bookingTableComplete: [],
url: 'api/booking',
completeBookingurl : "api/user-complete-booking",
pagination: [],
completePagination: [],
bookingConfirmTable: {
date: 'undefined',
marking: 'undefined',
@@ -397,6 +520,8 @@ export default {
rate: 'undefined',
bankin_amount: 'undefined',
china_beneficiary: 'undefined',
bank_name: null,
bank_branch: null,
status: 2
}
}
@@ -405,14 +530,58 @@ export default {
this.getBooking();
this.initBooking();
this.getRate();
this.getBookingTableComplete();
},
methods: {
// listen to update rate changes
listen(){
window.Echo = new Echo({
broadcaster: 'pusher',
key: window.config.pusherUrl,
cluster: 'ap1',
encrypted: true,
auth: {
headers: {
Authorization: 'Bearer ' + localStorage.getItem("token")
},
},
});
window.Echo.channel('rate-updated')
.listen('RateUpdated', response => {
if (! ('Notification' in window)) {
alert('Web Notification is not supported');
return;
}
this.$message({
showClose: true,
message: 'New rate updated at ' + response.rate.created_at,
duration: 20000
});
this.rate = response.rate
});
},
getBooking(){
let $this = this
axios.get(this.url).then(response => {
this.bookingTable = response.data.data
$this.makePagination(response.data)
console.log(response)
})
},
cancelBooking(id){
console.log(id)
let $this = this
axios.post("api/booking/"+id+"/cancel").then(response => {
this.getBooking();
})
},
getBookingTableComplete(){
let $this = this
axios.get(this.completeBookingurl).then(response => {
this.bookingTableComplete = response.data.data
$this.makeCompletePagination(response.data)
})
},
getRate() {
@@ -423,7 +592,9 @@ export default {
},
refreshRate() {
let $this = this
this.loading_btn = true
axios.get('api/rate').then(response => {
this.loading_btn = false
this.rate = response.data
this.$message({
showClose: true,
@@ -453,6 +624,14 @@ export default {
})
})
},
RefreshBookingTableComplete() {
let $this = this
this.loading_btn = true
axios.get(this.completeBookingurl).then(response => {
this.loading_btn = false;
this.bookingTableComplete = response.data.data
})
},
makePagination(data){
let pagination ={
current_page: data.current_page,
@@ -461,12 +640,28 @@ export default {
prev_page_url: data.prev_page_url
}
this.pagination = pagination
console.log(this.pagination)
},
makeCompletePagination(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.completePagination = pagination
},
fetchPaginateBooking(url) {
this.url = url
this.getBooking()
},
fetchCompletePaginateBooking(url) {
this.completeBookingurl = url
this.getCompleteBooking()
},
// TODO fetch booking data on load
formatter (row, column) {
return row.address
@@ -496,16 +691,18 @@ export default {
if (valid) {
let newConfirmation = {
amount: this.booking.amount,
term: this.term
term: this.term,
order_no: this.bookingForm.order_no,
payment_for: this.bookingForm.payment_for,
acc_name: this.bookingForm.account_name,
acc_no: this.bookingForm.account_num,
bank_name: this.bookingForm.bank_name,
bank_branch: this.bookingForm.bank_branch
}
axios.post('api/booking/calculation', newConfirmation)
.then((response) => {
this.loading = false
console.log(response)
this.bookingConfirmTable = response.data;
this.bookingConfirmTable.payment_for = 'Full Payment';//For future purpose
this.bookingConfirmTable.remark = '';//For future purpose
this.bookingConfirmTable.payment_order = '';//For future purpose
this.dialogFormVisible = false
this.dialogFormVisible1 = true
})
@@ -534,6 +731,8 @@ export default {
this.loading = true,
this.dialogFormVisible1 = true
let newBooking = {
order_no: this.bookingForm.order_no,
payment_for: this.bookingForm.payment_for,
account_name: this.bookingForm.account_name,
account_num: this.bookingForm.account_num,
bank_name: this.bookingForm.bank_name,
@@ -543,6 +742,7 @@ export default {
}
axios.post('api/booking', newBooking)
.then((response) => {
console.log(response);
this.loading = false
// push with return id
this.$router.push({
@@ -563,7 +763,7 @@ export default {
})
},
BookingStatus (status, booking_id) {
BookingStatus (status, booking_id, term) {
console.log(status)
// TODO : Get booking status from server
this.status = status
@@ -595,6 +795,14 @@ export default {
break
case 5:
console.log(term)
if(term == 'x2_cash' || term == 'x2_cheque' || term == 'x2_ba'){
this.$router.push({
name: 'booking.user.x2complete',
params: {id: booking_id }
})
break
}
this.$router.push({
name: 'booking.user.uploadpo',
params: {id: booking_id }
resources/assets/js/pages/settings/admin-bank-setting.vue
+11 -6
View File
@@ -3,8 +3,7 @@
<span align="center"><h4>Bank Setting</h4></span><br>
<el-form :inline="true">
<el-form-item>
Active CIEF bank account for today :
X1 :
Active Bank Account for X1:
<el-select v-model="active_bank_setting.x1_bank_id" size="mini">
<el-option
v-for="item in options_CIEF"
@@ -14,8 +13,9 @@
</el-option>
</el-select>
</el-form-item>
<br>
<el-form-item>
X2 :
Active Bank Account for X2 :
<el-select v-model="active_bank_setting.x2_bank_id" size="mini">
<el-option
v-for="item in options_CIEF"
@@ -26,7 +26,7 @@
</el-select>
</el-form-item>
<el-form-item>
Active CIEF China Beneficiary Account for Today :
Active China Beneficiary Account:
<el-select v-model="active_bank_setting.beneficiary_id" size="mini">
<el-option
v-for="item in options_china_bank"
@@ -36,6 +36,7 @@
</el-option>
</el-select>
</el-form-item>
<br>
<el-form-item>
<el-button type="primary" size="mini" :loading="loading_btn" @click="EditActiveBankSetting">Update</el-button>
</el-form-item>
@@ -74,7 +75,7 @@ export default {
this.options_CIEF = malaysiaBankData.map(function(item){
return {
value : item.id,
label : item.acc_no,
label : item.company_name + " : " + item.bank_name + " : " + item.acc_no,
};
});
})
@@ -96,9 +97,13 @@ export default {
this.options_china_bank = chinaBankData.map(function(item){
return {
value : item.id,
label : item.acc_no,
label : item.company_name + " : " + item.bank_name + " : " + item.acc_no,
};
});
this.options_china_bank.unshift({
value : 0,
label : "Use Customer's Beneficiary"
});
})
.catch((error) => {
console.log(error);
resources/assets/js/pages/settings/admin-china-bank.vue
+74 -50
View File
@@ -22,85 +22,80 @@
<!-- popup add new data -->
<el-dialog title="Add New Data" align="center" :visible.sync="AddDatadialogVisible" width="40%">
<el-form label-width="150px">
<el-form-item label="Company Name" :class="{'has-error': errors.has('company_name') }">
<el-input v-model="beneficiariesForm.company_name" v-validate="'required|max:191'" name="company_name"></el-input>
<span class="error-message text-danger" v-if="errors.has('company_name')">{{ errors.first('company_name') }}<br/></span>
<el-form-item label="Company Name">
<el-input v-model="beneficiariesForm.company_name" name="company_name"></el-input>
</el-form-item>
<el-form-item label="Bank Name" :class="{'has-error': errors.has('bank_name') }">
<el-input v-model="beneficiariesForm.bank_name" v-validate="'required|max:191'" name="bank_name"></el-input>
<span class="error-message text-danger" v-if="errors.has('bank_name')">{{ errors.first('bank_name') }}<br/></span>
<el-form-item label="Bank Name">
<el-input v-model="beneficiariesForm.bank_name" name="bank_name"></el-input>
</el-form-item>
<el-form-item label="Bank Account No" :class="{'has-error': errors.has('acc_no') }">
<el-input v-model="beneficiariesForm.acc_no" v-validate="'required|max:191'" name="acc_no"></el-input>
<span class="error-message text-danger" v-if="errors.has('acc_no')">{{ errors.first('acc_no') }}<br/></span>
<el-form-item label="Bank Account No">
<el-input v-model="beneficiariesForm.acc_no" name="acc_no"></el-input>
</el-form-item>
<el-form-item label="Bank Address" :class="{'has-error': errors.has('bank_address') }">
<el-input v-model="beneficiariesForm.bank_address" v-validate="'required|max:191'" name="bank_address"></el-input>
<span class="error-message text-danger" v-if="errors.has('bank_address')">{{ errors.first('bank_address') }}<br/></span>
<el-form-item label="Bank Address">
<el-input v-model="beneficiariesForm.bank_address" name="bank_address"></el-input>
</el-form-item>
<el-form-item label="SWIFT Code" :class="{'has-error': errors.has('swift') }">
<el-input v-model="beneficiariesForm.swift" v-validate="'required|max:191'" name="swift"></el-input>
<span class="error-message text-danger" v-if="errors.has('swift')">{{ errors.first('swift') }}<br/></span>
<el-form-item label="SWIFT Code">
<el-input v-model="beneficiariesForm.swift" name="swift"></el-input>
</el-form-item>
<el-form-item label="CNAP" :class="{'has-error': errors.has('cnap') }">
<el-input v-model="beneficiariesForm.cnap" v-validate="'required|max:191'" name="cnap" ></el-input>
<span class="error-message text-danger" v-if="errors.has('cnap')">{{ errors.first('cnap') }}<br/></span>
<el-form-item label="CNAP">
<el-input v-model="beneficiariesForm.cnap" name="cnap" ></el-input>
</el-form-item>
<el-form-item label="Bank Branch" :class="{'has-error': errors.has('bank_branch') }">
<el-input v-model="beneficiariesForm.bank_branch" v-validate="'required|max:191'" name="bank_branch"></el-input>
<span class="error-message text-danger" v-if="errors.has('bank_branch')">{{ errors.first('bank_branch') }}<br/></span>
<el-form-item label="Bank Branch">
<el-input v-model="beneficiariesForm.bank_branch" name="bank_branch"></el-input>
</el-form-item>
</el-form>
<div align="center">
<el-button @click="AddDatadialogVisible = false">Cancel</el-button>
<el-button type="primary" @click="CreateBeneficiaries" :disabled="errors.any() || beneficiariesForm.company_name=='' || beneficiariesForm.bank_name=='' || beneficiariesForm.acc_no=='' || beneficiariesForm.bank_address=='' || beneficiariesForm.swift =='' || beneficiariesForm.cnap=='' || beneficiariesForm.bank_branch=='' ? true : false">OK</el-button>
<el-button type="primary" :loading="loading_btn" @click="CreateBeneficiaries" :disabled="beneficiariesForm.company_name=='' || beneficiariesForm.bank_name=='' || beneficiariesForm.acc_no=='' ? true : false">OK</el-button>
</div>
<span slot="footer" class="dialog-footer">
* Please key in the data in Chinese
</span>
</el-dialog>
<el-dialog align="center" :visible.sync="DoneAddDatadialogVisible" width="30%">
<span>Data Added Successfully</span><br><br>
<div align="center">
<el-button type="primary" @click="DoneAddDatadialogVisible = false">OK</el-button>
<el-button type="primary" :loading="loading_btn" @click="DoneAddDatadialogVisible = false">OK</el-button>
</div>
</el-dialog>
<!-- popup add new data end -->
<!-- popup edit data -->
<el-dialog title="Edit Data" align="center" :visible.sync="EditDatadialogVisible" width="40%">
<el-form label-width="150px">
<el-form-item label="Company Name" :class="{'has-error': errors.has('company_name') }">
<el-input v-model="beneficiariesForm.company_name" v-validate="'required|max:191'" name="company_name"></el-input>
<span class="error-message text-danger" v-if="errors.has('company_name')">{{ errors.first('company_name') }}<br/></span>
<el-form-item label="Company Name">
<el-input v-model="beneficiariesForm.company_name" name="company_name"></el-input>
</el-form-item>
<el-form-item label="Bank Name" :class="{'has-error': errors.has('bank_name') }">
<el-input v-model="beneficiariesForm.bank_name" v-validate="'required|max:191'" name="bank_name"></el-input>
<span class="error-message text-danger" v-if="errors.has('bank_name')">{{ errors.first('bank_name') }}<br/></span>
<el-form-item label="Bank Name">
<el-input v-model="beneficiariesForm.bank_name" name="bank_name"></el-input>
</el-form-item>
<el-form-item label="Bank Account No" :class="{'has-error': errors.has('acc_no') }">
<el-input v-model="beneficiariesForm.acc_no" v-validate="'required|max:191'" name="acc_no"></el-input>
<span class="error-message text-danger" v-if="errors.has('acc_no')">{{ errors.first('acc_no') }}<br/></span>
<el-form-item label="Bank Account No">
<el-input v-model="beneficiariesForm.acc_no" name="acc_no"></el-input>
</el-form-item>
<el-form-item label="Bank Address" :class="{'has-error': errors.has('bank_address') }">
<el-input v-model="beneficiariesForm.bank_address" v-validate="'required|max:191'" name="bank_address"></el-input>
<span class="error-message text-danger" v-if="errors.has('bank_address')">{{ errors.first('bank_address') }}<br/></span>
<el-form-item label="Bank Address">
<el-input v-model="beneficiariesForm.bank_address" name="bank_address"></el-input>
</el-form-item>
<el-form-item label="SWIFT Code" :class="{'has-error': errors.has('swift') }">
<el-input v-model="beneficiariesForm.swift" v-validate="'required|max:191'" name="swift"></el-input>
<span class="error-message text-danger" v-if="errors.has('swift')">{{ errors.first('swift') }}<br/></span>
<el-form-item label="SWIFT Code">
<el-input v-model="beneficiariesForm.swift" name="swift"></el-input>
</el-form-item>
<el-form-item label="CNAP" :class="{'has-error': errors.has('cnap') }">
<el-input v-model="beneficiariesForm.cnap" v-validate="'required|max:191'" name="cnap" ></el-input>
<span class="error-message text-danger" v-if="errors.has('cnap')">{{ errors.first('cnap') }}<br/></span>
<el-form-item label="CNAP">
<el-input v-model="beneficiariesForm.cnap" name="cnap" ></el-input>
</el-form-item>
<el-form-item label="Bank Branch" :class="{'has-error': errors.has('bank_branch') }">
<el-input v-model="beneficiariesForm.bank_branch" v-validate="'required|max:191'" name="bank_branch"></el-input>
<span class="error-message text-danger" v-if="errors.has('bank_branch')">{{ errors.first('bank_branch') }}<br/></span>
<el-form-item label="Bank Branch">
<el-input v-model="beneficiariesForm.bank_branch" name="bank_branch"></el-input>
</el-form-item>
</el-form>
<div align="center">
<el-button @click="EditDatadialogVisible = false">Cancel</el-button>
<el-button type="primary" @click="EditBeneficiaries" :disabled="errors.any() || beneficiariesForm.company_name=='' || beneficiariesForm.bank_name=='' || beneficiariesForm.acc_no=='' || beneficiariesForm.bank_address=='' || beneficiariesForm.swift =='' || beneficiariesForm.cnap=='' || beneficiariesForm.bank_branch=='' ? true : false">Submit</el-button>
<el-button type="primary" :loading="loading_btn" @click="EditBeneficiaries" :disabled="beneficiariesForm.company_name=='' || beneficiariesForm.bank_name=='' || beneficiariesForm.acc_no=='' ? true : false">Submit</el-button>
</div>
<span slot="footer" class="dialog-footer">
* Please key in the data in Chinese
@@ -109,7 +104,7 @@
<el-dialog align="center" :visible.sync="DoneUpdateDatadialogVisible" width="30%">
<span>Data Updated Successfully</span><br><br>
<div align="center">
<el-button type="primary" @click="DoneUpdateDatadialogVisible = false">OK</el-button>
<el-button type="primary" :loading="loading_btn" @click="DoneUpdateDatadialogVisible = false">OK</el-button>
</div>
</el-dialog>
<!-- popup edit data end -->
@@ -117,7 +112,7 @@
<el-dialog align="center" :visible.sync="DeleteAdddialogVisible" width="30%">
<span>Data Deleted</span><br><br>
<div align="center">
<el-button type="primary" @click="DeleteAdddialogVisible = false">OK</el-button>
<el-button type="primary" :loading="loading_btn" @click="DeleteAdddialogVisible = false">OK</el-button>
</div>
</el-dialog>
<!-- popup delete end -->
@@ -130,6 +125,7 @@
export default {
data() {
return {
loading_btn: false,
tableData: [],
beneficiariesForm : {
company_name : '',
@@ -153,14 +149,17 @@
},
methods: {
CreateBeneficiaries : function(){
this.loading_btn = true
this.AddDatadialogVisible = false;
axios.post('/api/setting-beneficiary', this.beneficiariesForm)
.then((response) => {
this.loading_btn = false
this.DoneAddDatadialogVisible = true;
this.ClearBeneficiariesForm();
this.UpdateTableData();
})
.catch((error) => {
this.loading_btn = false
console.log(error);
this.$message({
showClose: true,
@@ -172,11 +171,17 @@
});
},
UpdateTableData : function(){
this.loading_btn = true
axios.get('/api/setting-beneficiary', this.beneficiariesForm)
.then((response) => {
this.loading_btn = false
this.tableData = response.data;
})
.catch((error) => {
this.loading_btn = false
console.log(error);
this.$message({
showClose: true,
@@ -187,12 +192,21 @@
})
},
DeleteBeneficiaries : function(beneficiaries_id){
this.loading_btn = true
this.DeleteAdddialogVisible = true;
axios.delete('/api/setting-beneficiary/' + beneficiaries_id)
.then((response) => {
this.loading_btn = false
this.UpdateTableData();
this.$message({
showClose: true,
message: 'Data Deleted Successfully',
type: 'success',
duration: 5000
});
})
.catch((error) => {
this.loading_btn = false
console.log(error);
this.$message({
showClose: true,
@@ -203,14 +217,24 @@
});
},
EditBeneficiaries : function(){
this.loading_btn = true
this.EditDatadialogVisible = false;
this.DoneUpdateDatadialogVisible = true;
axios.put('/api/setting-beneficiary/' + this.currentEdit, this.beneficiariesForm)
.then((response) => {
this.loading_btn = false
this.UpdateTableData();
this.$message({
showClose: true,
message: 'Data Updated Succesfully',
type: 'success',
duration: 5000
});
})
.catch((error) => {
this.loading_btn = false
console.log(error);
this.$message({
showClose: true,
resources/assets/js/pages/settings/admin-credit-setting.vue
+1 -11
View File
@@ -40,29 +40,19 @@
this.getCreditSetting();
},
methods: {
ValidateAll : function(){
var working;
this.$validator.validateAll().then((result) => {
working = result;
}).catch(() => {
});
},
getCreditSetting() {
axios.get('/api/setting-credit').then(response => {
this.credit_setting = response.data
})
},
updateCreditSetting (){
if(this.ValidateAll())
return;
this.loading_btn = true
axios.put('/api/setting-credit', this.credit_setting)
.then((response) => {
this.loading_btn = false
this.$message({
showClose: true,
message: 'Success',
message: 'Time Limit and Credit Limit Updated Successfully',
type: 'success',
duration: 5000
});
resources/assets/js/pages/settings/admin-malaysia-bank.vue
+83 -58
View File
@@ -11,8 +11,8 @@
<el-table-column prop="bank_branch" label="Bank Branch"></el-table-column>
<el-table-column label="Action">
<template slot-scope="scope">
<el-button type="text" size="small" @click="PopOutEditMalaysiaBank(scope.$index)">Edit</el-button>
<el-button type="text" size="small" @click="DeleteMalaysiaBank(tableData[scope.$index].id)">Delete</el-button>
<el-button type="text" size="small" :loading="loading_btn" @click="PopOutEditMalaysiaBank(scope.$index)">Edit</el-button>
<el-button type="text" size="small" :loading="loading_btn" @click="DeleteMalaysiaBank(tableData[scope.$index].id)">Delete</el-button>
</template>
</el-table-column>
</el-table><br>
@@ -22,94 +22,88 @@
<!-- popup add new data -->
<el-dialog title="Add New Data" align="center" :visible.sync="AddDatadialogVisible" width="40%">
<el-form label-width="150px">
<el-form-item label="Company Name" :class="{'has-error': errors.has('company_name') }">
<el-input v-model="malaysiaBankForm.company_name" v-validate="'required|max:191'" name="company_name"></el-input>
<span class="error-message text-danger" v-if="errors.has('company_name')">{{ errors.first('company_name') }}<br/></span>
<el-form-item label="Company Name">
<el-input v-model="malaysiaBankForm.company_name" name="company_name"></el-input>
</el-form-item>
<el-form-item label="Bank Name" :class="{'has-error': errors.has('bank_name') }">
<el-input v-model="malaysiaBankForm.bank_name" v-validate="'required|max:191'" name="bank_name"></el-input>
<span class="error-message text-danger" v-if="errors.has('bank_name')">{{ errors.first('bank_name') }}<br/></span>
<el-form-item label="Bank Name">
<el-input v-model="malaysiaBankForm.bank_name" name="bank_name"></el-input>
</el-form-item>
<el-form-item label="Bank Account No" :class="{'has-error': errors.has('acc_no') }">
<el-input v-model="malaysiaBankForm.acc_no" v-validate="'required|max:191'" name="acc_no"></el-input>
<span class="error-message text-danger" v-if="errors.has('acc_no')">{{ errors.first('acc_no') }}<br/></span>
<el-form-item label="Bank Account No">
<el-input v-model="malaysiaBankForm.acc_no" name="acc_no"></el-input>
</el-form-item>
<el-form-item label="Bank Address" :class="{'has-error': errors.has('bank_address') }">
<el-input v-model="malaysiaBankForm.bank_address" v-validate="'required|max:191'" name="bank_address"></el-input>
<span class="error-message text-danger" v-if="errors.has('bank_address')">{{ errors.first('bank_address') }}<br/></span>
<el-form-item label="Bank Address">
<el-input v-model="malaysiaBankForm.bank_address" name="bank_address"></el-input>
</el-form-item>
<el-form-item label="SWIFT Code" :class="{'has-error': errors.has('swift') }">
<el-input v-model="malaysiaBankForm.swift" v-validate="'required|max:191'" name="swift"></el-input>
<span class="error-message text-danger" v-if="errors.has('swift')">{{ errors.first('swift') }}<br/></span>
<el-form-item label="SWIFT Code">
<el-input v-model="malaysiaBankForm.swift" name="swift"></el-input>
</el-form-item>
<el-form-item label="CNAP" :class="{'has-error': errors.has('cnap') }">
<el-input v-model="malaysiaBankForm.cnap" v-validate="'required|max:191'" name="cnap" ></el-input>
<span class="error-message text-danger" v-if="errors.has('cnap')">{{ errors.first('cnap') }}<br/></span>
<el-form-item label="CNAP">
<el-input v-model="malaysiaBankForm.cnap" name="cnap" ></el-input>
</el-form-item>
<el-form-item label="Bank Branch" :class="{'has-error': errors.has('bank_branch') }">
<el-input v-model="malaysiaBankForm.bank_branch" v-validate="'required|max:191'" name="bank_branch"></el-input>
<span class="error-message text-danger" v-if="errors.has('bank_branch')">{{ errors.first('bank_branch') }}<br/></span>
<el-form-item label="Bank Branch">
<el-input v-model="malaysiaBankForm.bank_branch" name="bank_branch"></el-input>
</el-form-item>
</el-form>
<div align="center">
<el-button @click="AddDatadialogVisible = false">Cancel</el-button>
<el-button type="primary" @click="CreateMalaysiaBank" :disabled="errors.any() || malaysiaBankForm.company_name=='' || malaysiaBankForm.bank_name=='' || malaysiaBankForm.acc_no=='' || malaysiaBankForm.bank_address=='' || malaysiaBankForm.swift =='' || malaysiaBankForm.cnap=='' || malaysiaBankForm.bank_branch=='' ? true : false">OK</el-button>
<el-button type="primary" :loading="loading_btn" @click="CreateMalaysiaBank" :disabled="malaysiaBankForm.company_name=='' || malaysiaBankForm.bank_name=='' || malaysiaBankForm.acc_no=='' ? true : false">OK</el-button>
</div>
<span slot="footer" class="dialog-footer">
* Please key in the data in Chinese
</span>
</el-dialog>
<el-dialog align="center" :visible.sync="DoneAddDatadialogVisible" width="30%">
<span>Data Added Successfully</span><br><br>
<div align="center">
<el-button type="primary" @click="DoneAddDatadialogVisible = false">OK</el-button>
<el-button type="primary" :loading="loading_btn" @click="DoneAddDatadialogVisible = false">OK</el-button>
</div>
</el-dialog>
<!-- popup add new data end -->
<!-- popup edit data -->
<el-dialog title="Edit Data" align="center" :visible.sync="EditDatadialogVisible" width="40%">
<el-form label-width="150px">
<el-form-item label="Company Name" :class="{'has-error': errors.has('company_name') }">
<el-input v-model="malaysiaBankForm.company_name" v-validate="'required|max:191'" name="company_name"></el-input>
<span class="error-message text-danger" v-if="errors.has('company_name')">{{ errors.first('company_name') }}<br/></span>
<el-form-item label="Company Name">
<el-input v-model="malaysiaBankForm.company_name" name="company_name"></el-input>
</el-form-item>
<el-form-item label="Bank Name" :class="{'has-error': errors.has('bank_name') }">
<el-input v-model="malaysiaBankForm.bank_name" v-validate="'required|max:191'" name="bank_name"></el-input>
<span class="error-message text-danger" v-if="errors.has('bank_name')">{{ errors.first('bank_name') }}<br/></span>
<el-form-item label="Bank Name">
<el-input v-model="malaysiaBankForm.bank_name" name="bank_name"></el-input>
</el-form-item>
<el-form-item label="Bank Account No" :class="{'has-error': errors.has('acc_no') }">
<el-input v-model="malaysiaBankForm.acc_no" v-validate="'required|max:191'" name="acc_no"></el-input>
<span class="error-message text-danger" v-if="errors.has('acc_no')">{{ errors.first('acc_no') }}<br/></span>
<el-form-item label="Bank Account No">
<el-input v-model="malaysiaBankForm.acc_no" name="acc_no"></el-input>
</el-form-item>
<el-form-item label="Bank Address" :class="{'has-error': errors.has('bank_address') }">
<el-input v-model="malaysiaBankForm.bank_address" v-validate="'required|max:191'" name="bank_address"></el-input>
<span class="error-message text-danger" v-if="errors.has('bank_address')">{{ errors.first('bank_address') }}<br/></span>
<el-form-item label="Bank Address">
<el-input v-model="malaysiaBankForm.bank_address" name="bank_address"></el-input>
</el-form-item>
<el-form-item label="SWIFT Code" :class="{'has-error': errors.has('swift') }">
<el-input v-model="malaysiaBankForm.swift" v-validate="'required|max:191'" name="swift"></el-input>
<span class="error-message text-danger" v-if="errors.has('swift')">{{ errors.first('swift') }}<br/></span>
<el-form-item label="SWIFT Code">
<el-input v-model="malaysiaBankForm.swift" name="swift"></el-input>
</el-form-item>
<el-form-item label="CNAP" :class="{'has-error': errors.has('cnap') }">
<el-input v-model="malaysiaBankForm.cnap" v-validate="'required|max:191'" name="cnap" ></el-input>
<span class="error-message text-danger" v-if="errors.has('cnap')">{{ errors.first('cnap') }}<br/></span>
<el-form-item label="CNAP">
<el-input v-model="malaysiaBankForm.cnap" name="cnap" ></el-input>
</el-form-item>
<el-form-item label="Bank Branch" :class="{'has-error': errors.has('bank_branch') }">
<el-input v-model="malaysiaBankForm.bank_branch" v-validate="'required|max:191'" name="bank_branch"></el-input>
<span class="error-message text-danger" v-if="errors.has('bank_branch')">{{ errors.first('bank_branch') }}<br/></span>
<el-form-item label="Bank Branch">
<el-input v-model="malaysiaBankForm.bank_branch" name="bank_branch"></el-input>
</el-form-item>
</el-form>
<div align="center">
<el-button @click="EditDatadialogVisible = false">Cancel</el-button>
<el-button type="primary" @click="EditMalaysiaBank" :disabled="errors.any() || malaysiaBankForm.company_name=='' || malaysiaBankForm.bank_name=='' || malaysiaBankForm.acc_no=='' || malaysiaBankForm.bank_address=='' || malaysiaBankForm.swift =='' || malaysiaBankForm.cnap=='' || malaysiaBankForm.bank_branch=='' ? true : false">Submit</el-button>
<el-button type="primary" :loading="loading_btn" @click="EditMalaysiaBank" :disabled="malaysiaBankForm.company_name=='' || malaysiaBankForm.bank_name=='' || malaysiaBankForm.acc_no=='' ? true : false">Submit</el-button>
</div>
<span slot="footer" class="dialog-footer">
* Please key in the data in Chinese
</span>
</el-dialog>
<el-dialog align="center" :visible.sync="DoneUpdateDatadialogVisible" width="30%">
<span>Data Updated Successfully</span><br><br>
<div align="center">
<el-button type="primary" @click="DoneUpdateDatadialogVisible = false">OK</el-button>
<el-button type="primary" :loading="loading_btn" @click="DoneUpdateDatadialogVisible = false">OK</el-button>
</div>
</el-dialog>
<!-- popup edit data end -->
@@ -117,7 +111,7 @@
<el-dialog align="center" :visible.sync="DeleteAdddialogVisible" width="30%">
<span>Data Deleted</span><br><br>
<div align="center">
<el-button type="primary" @click="DeleteAdddialogVisible = false">OK</el-button>
<el-button type="primary" :loading="loading_btn" @click="DeleteAdddialogVisible = false">OK</el-button>
</div>
</el-dialog>
<!-- popup delete end -->
@@ -130,6 +124,7 @@
export default {
data() {
return {
loading_btn: false,
tableData: [],
malaysiaBankForm : {
company_name : '',
@@ -153,14 +148,23 @@
},
methods: {
CreateMalaysiaBank : function(){
this.loading_btn = true
this.AddDatadialogVisible = false;
axios.post('/api/setting-malaysia-bank', this.malaysiaBankForm)
.then((response) => {
this.loading_btn = false
this.DoneAddDatadialogVisible = true;
this.ClearMalaysiaBankForm();
this.UpdateTableData();
})
this.$message({
showClose: true,
message: 'Success',
type: 'success',
duration: 5000
});
})
.catch((error) => {
this.loading_btn = false
console.log(error);
this.$message({
showClose: true,
@@ -172,11 +176,16 @@
});
},
UpdateTableData : function(){
this.loading_btn = true
axios.get('/api/setting-malaysia-bank', this.malaysiaBankForm)
.then((response) => {
this.loading_btn = false;
this.tableData = response.data;
})
.catch((error) => {
this.loading_btn = false
console.log(error);
this.$message({
showClose: true,
@@ -187,12 +196,21 @@
})
},
DeleteMalaysiaBank : function(malaysiaBank_id){
this.loading_btn = true;
this.DeleteAdddialogVisible = true;
axios.delete('/api/setting-malaysia-bank/' + malaysiaBank_id)
.then((response) => {
this.UpdateTableData();
this.$message({
showClose: true,
message: 'Data Deleted Successfully',
type: 'success',
duration: 5000
});
})
.catch((error) => {
this.loading_btn = false;
console.log(error);
this.$message({
showClose: true,
@@ -203,11 +221,20 @@
});
},
EditMalaysiaBank : function(){
this.loading_btn = true;
this.EditDatadialogVisible = false;
this.DoneUpdateDatadialogVisible = true;
axios.put('/api/setting-malaysia-bank/' + this.currentEdit, this.malaysiaBankForm)
.then((response) => {
this.loading_btn = false;
this.UpdateTableData();
this.$message({
showClose: true,
message: 'Updated Successfully',
type: 'success',
duration: 5000
});
})
.catch((error) => {
console.log(error);
@@ -222,8 +249,6 @@
PopOutAddMalaysiaBank : function(){
this.AddDatadialogVisible = true;
this.ClearMalaysiaBankForm();
this.$validator.validateAll();
console.log(this.errors.count());
},
PopOutEditMalaysiaBank : function(tableDataRow){
this.EditDatadialogVisible = true;
resources/assets/js/pages/settings/admin-marking-setting.vue
+4 -2
View File
@@ -19,7 +19,7 @@
<el-form ref="markingForm" :model="markingForm" :rules="rules">
<div align="right">
<el-form-item label="Marking" prop="marking">
<el-input v-model="markingForm.marking" type="text" style="width: 80%" />
<input style="width: 80%" v-model="markingForm.marking" class="form-control" type="text" />
</el-form-item>
<el-form-item label="Email" prop="email">
<el-input v-model="markingForm.email" type="text" style="width: 80%" />
@@ -28,8 +28,9 @@
</el-form>
<div align="right">
<el-button @click="EditDatadialogVisible = false">Cancel</el-button>
<el-button type="primary" icon="el-icon-plus" @click="CreateMarking('markingForm')">Add New Data</el-button>
<el-button type="primary" :loading="loading_btn" @click="CreateMarking('markingForm')">Add New Data</el-button>
</div>
</el-dialog>
<el-dialog align="center" :visible.sync="DoneAddDatadialogVisible" width="30%">
<span>Data Added Successfully</span><br><br>
@@ -109,6 +110,7 @@
},
methods: {
CreateMarking : function(formName){
this.loading_btn = true
this.AddDatadialogVisible = false;
this.$refs[formName].validate((valid) => {
if (valid) {
resources/assets/js/pages/settings/admin-supplier.vue
+22 -22
View File
@@ -20,30 +20,30 @@
<!-- popup add new supplier -->
<el-dialog title="Add New Supplier" align="center" :visible.sync="AddNewSupplierdialogVisible" width="40%">
<el-form label-width="150px" >
<el-form-item label="Company Name" :class="{'has-error': errors.has('company_name') }">
<el-form-item label="Company Name">
<el-input v-model="supplierForm.company_name" v-validate="'required|max:191'" name="company_name"></el-input>
<span class="error-message text-danger" v-if="errors.has('company_name')">{{ errors.first('company_name') }}<br/></span>
</el-form-item>
<el-form-item label="Registration No" :class="{'has-error': errors.has('supplier_reg_no') }">
<el-form-item label="Registration No">
<el-input v-model="supplierForm.supplier_reg_no" v-validate="'required|max:191'" name="supplier_reg_no"></el-input>
<span class="error-message text-danger" v-if="errors.has('supplier_reg_no')">{{ errors.first('supplier_reg_no') }}<br/></span>
</el-form-item>
<el-form-item label="GST No" :class="{'has-error': errors.has('gst_no') }">
<el-form-item label="GST No">
<el-input v-model="supplierForm.gst_no" v-validate="'required|max:191'" name="gst_no"></el-input>
<span class="error-message text-danger" v-if="errors.has('gst_no')">{{ errors.first('gst_no') }}<br/></span>
</el-form-item>
<el-form-item label="Bank Name" :class="{'has-error': errors.has('bank_name') }">
<el-form-item label="Bank Name">
<el-input v-model="supplierForm.bank_name" v-validate="'required|max:191'" name="bank_name"></el-input>
<span class="error-message text-danger" v-if="errors.has('bank_name')">{{ errors.first('bank_name') }}<br/></span>
</el-form-item>
<el-form-item label="Account No" :class="{'has-error': errors.has('acc_no') }">
<el-form-item label="Account No">
<el-input v-model="supplierForm.acc_no" v-validate="'required|max:191'" name="acc_no"></el-input>
<span class="error-message text-danger" v-if="errors.has('acc_no')">{{ errors.first('acc_no') }}<br/></span>
</el-form-item>
</el-form>
<div align="center">
<el-button @click="AddNewSupplierdialogVisible = false">Cancel</el-button>
<el-button type="primary" @click="CreateSupplier" :disabled="errors.any() || supplierForm.company_name=='' || supplierForm.supplier_reg_no=='' || supplierForm.gst_no=='' || supplierForm.bank_name=='' || supplierForm.acc_no =='' ? true : false">OK</el-button>
<el-button type="primary" @click="CreateSupplier" :disabled="supplierForm.company_name=='' || supplierForm.supplier_reg_no=='' || supplierForm.gst_no=='' || supplierForm.bank_name=='' || supplierForm.acc_no =='' ? true : false">OK</el-button>
</div>
</el-dialog>
<el-dialog align="center" :visible.sync="DoneAddSupplierdialogVisible" width="30%">
@@ -56,30 +56,30 @@
<!-- popup edit supplier -->
<el-dialog title="Edit Supplier" align="center" :visible.sync="EditSupplierdialogVisible" width="40%">
<el-form label-width="150px" >
<el-form-item label="Company Name" :class="{'has-error': errors.has('company_name') }">
<el-form-item label="Company Name">
<el-input v-model="supplierForm.company_name" v-validate="'required|max:191'" name="company_name"></el-input>
<span class="error-message text-danger" v-if="errors.has('company_name')">{{ errors.first('company_name') }}<br/></span>
</el-form-item>
<el-form-item label="Registration No" :class="{'has-error': errors.has('supplier_reg_no') }">
<el-form-item label="Registration No">
<el-input v-model="supplierForm.supplier_reg_no" v-validate="'required|max:191'" name="supplier_reg_no"></el-input>
<span class="error-message text-danger" v-if="errors.has('supplier_reg_no')">{{ errors.first('supplier_reg_no') }}<br/></span>
</el-form-item>
<el-form-item label="GST No" :class="{'has-error': errors.has('gst_no') }">
<el-form-item label="GST No">
<el-input v-model="supplierForm.gst_no" v-validate="'required|max:191'" name="gst_no"></el-input>
<span class="error-message text-danger" v-if="errors.has('gst_no')">{{ errors.first('gst_no') }}<br/></span>
</el-form-item>
<el-form-item label="Bank Name" :class="{'has-error': errors.has('bank_name') }">
<el-form-item label="Bank Name">
<el-input v-model="supplierForm.bank_name" v-validate="'required|max:191'" name="bank_name"></el-input>
<span class="error-message text-danger" v-if="errors.has('bank_name')">{{ errors.first('bank_name') }}<br/></span>
</el-form-item>
<el-form-item label="Account No" :class="{'has-error': errors.has('acc_no') }">
<el-form-item label="Account No">
<el-input v-model="supplierForm.acc_no" v-validate="'required|max:191'" name="acc_no"></el-input>
<span class="error-message text-danger" v-if="errors.has('acc_no')">{{ errors.first('acc_no') }}<br/></span>
</el-form-item>
</el-form>
<div align="center">
<el-button @click="EditSupplierdialogVisible = false">Cancel</el-button>
<el-button type="primary" @click="EditSupplier" :disabled="errors.any() || supplierForm.company_name=='' || supplierForm.supplier_reg_no=='' || supplierForm.gst_no=='' || supplierForm.bank_name=='' || supplierForm.acc_no =='' ? true : false">OK</el-button>
<el-button type="primary" @click="EditSupplier" :disabled="supplierForm.company_name=='' || supplierForm.supplier_reg_no=='' || supplierForm.gst_no=='' || supplierForm.bank_name=='' || supplierForm.acc_no =='' ? true : false">OK</el-button>
</div>
</el-dialog>
<el-dialog align="center" :visible.sync="DoneUpdateSupplierdialogVisible" width="30%">
resources/assets/js/pages/settings/admin-tax-setting.vue
+1 -1
View File
@@ -7,7 +7,7 @@
<el-form>
<el-form-item align="center">
Tax :
<el-input size="mini" v-model="tax_setting.tax_rate" style=width:20%></el-input> %
<el-input size="mini" v-model="tax_setting.tax_rate" style=width:20%></el-input> <br>(Example : 1%, input 1.01 and 0% input 1.0)
</el-form-item>
<el-form-item align="center">
<el-button type="primary" align="center" :loading="loading_btn" size="primary" @click="updateTaxSetting">Update</el-button>
resources/assets/js/router/routes.js
+5 -2
View File
@@ -24,6 +24,7 @@ const Confirmation = () => import('~/pages/booking/confirmation').then(m => m.de
const Transfer = () => import('~/pages/booking/transfer').then(m => m.default || m)
const UploadPo = () => import('~/pages/booking/uploadPo').then(m => m.default || m)
const PoComplete = () => import('~/pages/booking/poComplete').then(m => m.default || m)
const X2Completed = () => import('~/pages/booking/x2Completed').then(m => m.default || m)
const Completed = () => import('~/pages/booking/completed').then(m => m.default || m)
const PurchaseOrder = () => import('~/pages/booking/po').then(m => m.default || m)
@@ -35,7 +36,7 @@ const SupplierReport = () => import('~/pages/admin/booking/supplierReport').then
const UploadCNSlip = () => import('~/pages/admin/booking/uploadChinaBankslip').then(m => m.default || m)
const UploadInvoice = () => import('~/pages/admin/booking/uploadInvoice').then(m => m.default || m)
const adminCompleted = () => import('~/pages/admin/booking/completed').then(m => m.default || m)
// const Completed = () => import('~/pages/booking/uploadUserBankSlip').then(m => m.default || m)
const adminX2Completed = () => import('~/pages/admin/booking/x2Completed').then(m => m.default || m)
// Admin pages
const AdminHome = () => import('~/pages/admin/home').then(m => m.default || m)
@@ -75,7 +76,8 @@ export default [
{ path: '/booking/:id/po-complete', name: 'booking.user.pocomplete', component: PoComplete },
{ path: '/booking/:id/po', name: 'booking.user.po', component: PurchaseOrder },
{ path: '/booking/:id/complete', name: 'booking.user.complete', component: Completed },
{ path: '/booking/:id/x2-complete', name: 'booking.user.x2complete', component: X2Completed },
// Admin booking
{ path: '/booking/:id/booking-detail', name: 'booking.admin.booking.detail', component: BookingDetail },
{ path: '/booking/:id/verification', name: 'booking.admin.verification', component: Verification },
@@ -84,6 +86,7 @@ export default [
{ path: '/booking/:id/upload-cn-bankslip', name: 'booking.admin.cnslip', component: UploadCNSlip },
{ path: '/booking/:id/upload-invoice', name: 'booking.admin.invoice', component: UploadInvoice },
{ path: '/booking/:id/admin/complete', name: 'booking.admin.complete', component: adminCompleted },
{ path: '/booking/:id/admin/x2-complete', name: 'booking.admin.x2complete', component: adminX2Completed },
// Admin pages
{ path: '/admin', name: 'admin.home', component: AdminHome },
resources/views/index.blade.php
+1 -1
View File
@@ -4,6 +4,7 @@ $config = [
'locale' => $locale = app()->getLocale(),
'locales' => config('app.locales'),
'githubAuth' => config('services.github.client_id'),
'pusherUrl' => env('PUSHER_APP_KEY'),
];
$polyfills = [
@@ -36,7 +37,6 @@ $polyfills = [
{{-- Global configuration object --}}
<script>window.config = @json($config);</script>
{{-- Polyfill JS features via polyfill.io --}}
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features={{ implode(',', $polyfills) }}"></script>