mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/exchange-2.0.git
synced 2026-08-19 04:23:55 +00:00
glovetleong
125 lines
6.9 KiB
Vue
125 lines
6.9 KiB
Vue
<template>
|
|
<div class="row m-b-20">
|
|
<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="col-12 col-md mb-2 mb-md-0 pointer">
|
|
<div class="row h-100">
|
|
<div class="col">
|
|
<div class="bg-white bg-hover-complete h-100 btn btn-xs btn-outline-none btn-block text-left b-rad-none p-t-0 p-b-0 p-l-15 p-r-15" @click="selectedDocumentStatus = !selectedDocumentStatus">
|
|
<div class="row h-100">
|
|
<div class="col fs-9 d-flex align-items-center flex-column" style="padding-top: 7px; padding-bottom: 4px;">
|
|
<label class="all-caps w-100 m-b-0" style="font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500;">Document Type</label>
|
|
<span class="w-100 fs-14">{{parameters.type.replaceAll('_', ' ')}}</span>
|
|
</div>
|
|
<div class="col-auto b-l b-grey">
|
|
<div class="row h-100 align-items-center">
|
|
<div class="col">
|
|
<i class="fa" :class="[{'fa-angle-down': !selectedDocumentStatus}, {'fa-angle-up': selectedDocumentStatus}]"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="relative w-100">
|
|
<div class="absolute w-100 b-l b-b b-r b-grey" :class="[{'hide': !selectedDocumentStatus}]" style="top: 100%; right: 0; z-index: 1;">
|
|
<div class="row text-left no-margin bg-white">
|
|
<div class="col no-padding">
|
|
<div class="row no-margin" v-for="document in documents" :key="document">
|
|
<div class="col b-grey p-t-10 p-b-10 pointer hover-t-10 p-b-10 b-a" :class="[{'bg-primary-light': document === parameters.type}, {'text-white': document === parameters.type}, {'b-primary': document === parameters.type}, {'hover-primary': document !== parameters.type}, {'pointer': document !== parameters.type}]" @click="updateDocumentType(document)">
|
|
<div class="row align-items-center justify-content-center">
|
|
<div class="col">
|
|
<div class="font-heading fs-10">{{document.replaceAll('_', ' ')}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<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>
|
|
<div class="col-12 col-md mb-2 mb-md-0">
|
|
<validation-wrapper-component :validator="$v.parameters.startDate">
|
|
<label class="all-caps">Start Date</label>
|
|
<date-picker-component :parameters="parameters" v-model.lazy="parameters.startDate"></date-picker-component>
|
|
</validation-wrapper-component>
|
|
</div>
|
|
<div class="col-12 col-md mb-2 mb-md-0">
|
|
<validation-wrapper-component :validator="$v.parameters.endDate">
|
|
<label class="all-caps">End Date</label>
|
|
<date-picker-component :parameters="parameters" v-model.lazy="parameters.endDate"></date-picker-component>
|
|
</validation-wrapper-component>
|
|
</div>
|
|
<div class="col-12 col-md-auto d-flex justify-content-center align-items-center">
|
|
<button type="button" class="btn btn-lg btn-primary fs-11 w-100" @click="submitSearch()">Download</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import componentHandler from "../../../general/mixins/componentHandler";
|
|
import { required, minValue} from "vuelidate/lib/validators";
|
|
import {VMoney} from 'v-money'
|
|
|
|
export default {
|
|
data(){
|
|
return {
|
|
parameters: {
|
|
startDate: '',
|
|
endDate: '',
|
|
type: 'INVOICE',
|
|
supplier: null
|
|
},
|
|
documents: [
|
|
'INVOICE',
|
|
'PURCHASE_ORDER',
|
|
'DELIVER_ORDER',
|
|
'SUPPLIER_DELIVER_ORDER',
|
|
'INVOICE + PO + DO',
|
|
'INVOICE + PO + DO + SDO'
|
|
],
|
|
selectedDocumentStatus: false
|
|
}
|
|
},
|
|
validations: {
|
|
parameters: {
|
|
startDate: {
|
|
required
|
|
},
|
|
endDate: {
|
|
required
|
|
},
|
|
type: {
|
|
required
|
|
},
|
|
supplier: {},
|
|
}
|
|
},
|
|
methods: {
|
|
submitSearch(){
|
|
if(!this.validate()){ return; }
|
|
window.open(route('documents.download')+'?type='+this.parameters.type+'&startDate='+this.parameters.startDate+'&endDate='+this.parameters.endDate+'&supplier='+this.parameters.supplier, '_blank');
|
|
},
|
|
updateDocumentType(documentType) {
|
|
this.parameters.type = documentType;
|
|
this.selectedDocumentStatus = !this.selectedDocumentStatus
|
|
}
|
|
},
|
|
mixins: [componentHandler]
|
|
};
|
|
</script>
|