cief/exchange-2.0
1
0
Fork 0
mirror of https://gitlab.com/CIEFWorldwideSdnBhd/exchange-2.0.git synced 2026-08-19 04:23:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

export booking transaction ui

Browse Source
This commit is contained in:
edmondlang
2022-04-26 21:52:38 +08:00
parent dcea71dbf4
commit ef77463c06
3 changed files with 131 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/assets/vue/components/bookings/forms/ExportBookingTransactionFormComponent.vue
+29 -12
View File
@@ -3,12 +3,19 @@
<div class="col">
<div class="row">
<div class="col">
<div class="row m-l-0 m-r-0 bg-master-light padding-10">
<div class="row m-l-0 m-r-0 bg-master-light padding-10 parentContainer">
<div class="col">
<validation-wrapper-component selectable :validator="$v.parameters.supplier">
<label>Supplier</label>
<selectable-component :endpoint="route('api.company.list')+'?filters={%22business_type%22:3}'" section="supplierListSection" valueColumn="id" :labelColumn="['name']" v-model="parameters.supplier"></selectable-component>
</validation-wrapper-component>
<div class="row requestModal pointer" data-type="deleteBank">
<div class="col">
<validation-wrapper-component :validator="$v.parameters.supplierNames">
<label>Supplier</label>
<input type="text" class="form-control fs-12 pointer" v-model="parameters.supplierNames" disabled>
</validation-wrapper-component>
</div>
</div>
<modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="deleteBank">
<select-supplier-form-component section="supplierListSection" v-on:input="updateList($event)"></select-supplier-form-component>
</modal-component>
</div>
<div class="col-12 col-md mb-2 mb-md-0">
<validation-wrapper-component :validator="$v.parameters.startDate">
@@ -44,7 +51,8 @@ export default {
startDate: '',
endDate: '',
supplier: null,
supplierIds: []
supplierIds: [],
supplierNames: []
},
}
},
@@ -56,7 +64,10 @@ export default {
endDate: {
required
},
supplier: {
supplierIds: {
required
},
supplierNames: {
required
},
}
@@ -65,14 +76,20 @@ export default {
submitSearch(){
if(!this.validate()){ return; }
var supplierIds = [];
supplierIds.push(parseInt(this.parameters.supplier));
supplierIds = JSON.stringify(supplierIds);
console.log(supplierIds);
var supplierIds = JSON.stringify(this.parameters.supplierIds);
window.open(route('export.transactions.booking')+'?startDate='+this.parameters.startDate+'&endDate='+this.parameters.endDate+'&supplierIds='+supplierIds, '_blank');
},
updateList(supplierList){
let supplierIds = [];
let supplierNames = [];
supplierList.forEach(function(supplier) {
supplierIds.push(supplier.id);
supplierNames.push(supplier.name);
});
this.parameters.supplierIds = supplierIds;
this.parameters.supplierNames = supplierNames;
},
},
mixins: [componentHandler]
};
resources/assets/vue/components/bookings/forms/SelectIndividualSupplierFormComponent.vue
+43
View File
@@ -0,0 +1,43 @@
<template>
<div class="row">
<div class="col b-a b-grey" :class="{'b-gray': !selected, 'b-primary': selected, 'bg-primary-lighter': selected}">
<div class="row">
<div class="col padding-20">
<div class="row align-items-center">
<div class="col-auto pointer align-items-center" @click="selectSupplier()">
<i class="fa fs-30 fa-fw" :class="{'fa-square-o': !selected, 'fa-check-square': selected, 'text-primary':selected}" ></i>
</div>
<div class="col">
<h5 class="no-margin">{{ item.name }}</h5>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import componentHandler from "../../../general/mixins/componentHandler";
export default {
props: {
selectedSupplier: {
type: Array,
required: false,
}
},
data(){
return {
selected: false
}
},
methods: {
selectSupplier(){
this.selected = !this.selected;
this.$emit('input', this.item);
}
},
mixins: [componentHandler]
};
</script>
resources/assets/vue/components/bookings/forms/SelectSupplierFormComponent.vue
+59
View File
@@ -0,0 +1,59 @@
<template>
<div class="row bg-white padding-40">
<div class="col">
<loading-component style="height: 300px; top: 0;" key="1" color="success" v-show="isLoading" ></loading-component>
<div class="row justify-content-center" v-show="!isLoading">
<div class="col">
<div class="row m-b-20">
<div class="col">
<h3 class="all-caps text-center">Please select the supplier.</h3>
</div>
</div>
<div class="row m-b-20">
<div class="col">
<list-component section="supplierListSection" :endpoint="route('api.company.list')" :options="{business_type: 3}">
<template slot="list" slot-scope="{data}">
<div class="row">
<div class="col">
<select-individual-supplier-form-component :data="data" :selectedSupplier="selectedSupplier" v-on:input="updateList($event)"></select-individual-supplier-form-component>
</div>
</div>
</template>
</list-component>
</div>
</div>
<div class="row">
<div class="col">
<div class="btn btn-sm btn-success btn-block b-rad-none" @click="submitForm()">Confirm</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import componentHandler from "../../../general/mixins/componentHandler";
import ModalFormHandler from '../../../general/mixins/modalFormHandler';
import { required, minValue} from "vuelidate/lib/validators";
import {VMoney} from 'v-money'
export default {
data(){
return {
selectedSupplier: [],
}
},
methods: {
submitForm() {
this.$emit('input', this.selectedSupplier);
this.closeModal();
},
updateList(supplier){
this.selectedSupplier.includes(supplier) ? this.selectedSupplier.splice(this.selectedSupplier.indexOf(supplier), 1) : this.selectedSupplier.push(supplier);
},
},
mixins: [componentHandler, ModalFormHandler]
};
</script>