mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/exchange-2.0.git
synced 2026-08-19 04:23:55 +00:00
edmondlang
209 lines
14 KiB
Vue
209 lines
14 KiB
Vue
<template>
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="row">
|
|
<div class="col p-r-5">
|
|
<div class="row m-b-20">
|
|
<div class="col-12 col-md-7">
|
|
<div class="row m-b-15">
|
|
<div class="col">
|
|
<div class="row">
|
|
<div class="col p-r-0">
|
|
<div class="btn btn-xs btn-outline-primary btn-block text-left b-rad-none p-t-0 p-b-0 p-l-15 p-r-15" @click="serviceDropdownLaunch.status = ! serviceDropdownLaunch.status">
|
|
<div class="row">
|
|
<div class="col p-t-5 p-b-5">
|
|
{{selectedService.name}}
|
|
</div>
|
|
<div class="col-auto b-l b-primary">
|
|
<div class="row h-100 align-items-center">
|
|
<div class="col">
|
|
<i class="fa" :class="[{'fa-angle-down': !serviceDropdownLaunch.status}, {'fa-angle-up': serviceDropdownLaunch.status}]"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="relative w-100">
|
|
<div class="absolute w-100 b-l b-b b-r b-success" v-show="serviceDropdownLaunch.status" 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="service in selectedSupplier.services" v-bind:key="service.id" :data="service">
|
|
<div class="col b-b b-grey p-t-10 p-b-10 pointer hover-t-10 p-b-10" :class="[{'bg-primary-light': selectedService.id === service.id}, {'text-white': selectedService.id === service.id}, {'hover-primary': selectedService.id !== service.id}, {'pointer': selectedService.id !== service.id}]" @click="updateService(service)">
|
|
<div class="row align-items-center justify-content-center">
|
|
<div class="col">
|
|
<div class="font-heading fs-10">{{service.name}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col p-r-0">
|
|
<div class="btn btn-xs btn-outline-primary btn-block text-left b-rad-none p-t-0 p-b-0 p-l-15 p-r-15" @click="currencyDropdownLaunch.status = ! currencyDropdownLaunch.status">
|
|
<div class="row">
|
|
<div class="col p-t-5 p-b-5">
|
|
{{selectedCurrency.short_code}}
|
|
</div>
|
|
<div class="col-auto b-l b-primary">
|
|
<div class="row h-100 align-items-center">
|
|
<div class="col">
|
|
<i class="fa" :class="[{'fa-angle-down': !currencyDropdownLaunch.status}, {'fa-angle-up': currencyDropdownLaunch.status}]"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="relative w-100">
|
|
<div class="absolute w-100 b-l b-b b-r b-success" v-show="currencyDropdownLaunch.status" 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="currency in selectedSupplier.currencies" v-bind:key="currency.id" :data="currency">
|
|
<div class="col b-b b-grey p-t-10 p-b-10 pointer hover-t-10 p-b-10" :class="[{'bg-primary-light': selectedCurrency.id === currency.id}, {'text-white': selectedCurrency.id === currency.id}, {'hover-primary': selectedCurrency.id !== currency.id}, {'pointer': selectedCurrency.id !== currency.id}]" @click="updateCurrency(currency)">
|
|
<div class="row align-items-center justify-content-center">
|
|
<div class="col">
|
|
<div class="font-heading fs-10">{{currency.short_code}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row m-t-5">
|
|
<div class="col p-r-0">
|
|
<div class="btn btn-xs btn-outline-primary btn-block text-left b-rad-none p-t-0 p-b-0 p-l-15 p-r-15" @click="selectedSupplier.status = !selectedSupplier.status">
|
|
<div class="row">
|
|
<div class="col p-t-5 p-b-5 fs-9">
|
|
{{selectedSupplier.name}}
|
|
</div>
|
|
<div class="col-auto b-l b-success">
|
|
<div class="row h-100 align-items-center">
|
|
<div class="col">
|
|
<i class="fa" :class="[{'fa-angle-down': !selectedSupplier.status}, {'fa-angle-up': selectedSupplier.status}]"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="relative w-100">
|
|
<div class="absolute w-100 b-l b-b b-r b-primary" :class="[{'hide': !selectedSupplier.status}]" 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="supplier in suppliers" v-bind:key="supplier.id" :data="supplier">
|
|
<div class="col b-b b-grey p-t-10 p-b-10 pointer hover-t-10 p-b-10" :class="[{'bg-primary-light': selectedSupplier.id === supplier.id}, {'text-white': selectedSupplier.id === supplier.id}, {'hover-primary': selectedSupplier.id !== supplier.id}, {'pointer': selectedSupplier.id !== supplier.id}]" @click="updateSupplier(supplier)">
|
|
<div class="row align-items-center justify-content-center">
|
|
<div class="col">
|
|
<div class="font-heading fs-10">{{supplier.name}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<list-component ref="pendingOrdersList" section="pendingOrdersSection" :endpoint="route('api.transaction.list')" :options="{per_page: 10000, status: 2, type: 1, original_currency_id_in: [selectedCurrency.id], service_type_id_in: [selectedService.id]}">
|
|
<template slot="list" slot-scope="{data}">
|
|
<supplier-pending-order-component :data="data" v-on:input="updateOrder($event)"></supplier-pending-order-component>
|
|
</template>
|
|
</list-component>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-md">
|
|
<supplier-place-order-form-component :payments="payments" :currency="selectedCurrency" :supplier="selectedSupplier" section="pendingOrdersSection"></supplier-place-order-form-component>
|
|
<div class="row m-t-20">
|
|
<div class="col">
|
|
<list-component key="2" section="currencyOrdersListSection" :options="{'per_page': 5, 'document_type_in': ['CURRENCY_VENDOR_ORDER'], 'status': 1, 'with_company': true}" :endpoint="route('api.document.list')">
|
|
<template slot="list" slot-scope="{data}">
|
|
<currency-order-component section="currencyOrdersListSection" :data="data"></currency-order-component>
|
|
</template>
|
|
</list-component>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data(){
|
|
return {
|
|
suppliers: [],
|
|
selectedSupplier: {
|
|
id: '',
|
|
name: '',
|
|
status: false
|
|
},
|
|
selectedCurrency: {
|
|
id: 2,
|
|
name: '',
|
|
status: false
|
|
},
|
|
currencyDropdownLaunch: {
|
|
status: false
|
|
},
|
|
serviceDropdownLaunch: {
|
|
status: false
|
|
},
|
|
selectedService: {
|
|
id: 1,
|
|
name: '',
|
|
status: false
|
|
},
|
|
payments: []
|
|
}
|
|
},
|
|
created(){
|
|
this.submit(route('api.company.list') + '?filters=' + JSON.stringify({'business_type': 3}), 'get', 'pendingOrdersSection', false, false)
|
|
},
|
|
methods: {
|
|
successHandler(response){
|
|
this.suppliers = response.payload.data;
|
|
this.updateSupplier(this.suppliers[0]);
|
|
this.updateCurrency(this.suppliers[0].currencies[0]);
|
|
this.updateService(this.suppliers[0].services[0]);
|
|
},
|
|
updateSupplier(supplier){
|
|
this.selectedSupplier = supplier;
|
|
this.selectedSupplier.status = false;
|
|
this.updateCurrency(supplier.currencies[0]);
|
|
},
|
|
updateCurrency(currency){
|
|
|
|
if(currency !== this.selectedCurrency){
|
|
this.selectedCurrency = currency;
|
|
this.$refs.pendingOrdersList.updateFilters({per_page: 10000, status: 2, type: 1, original_currency_id_in: [this.selectedCurrency.id]});
|
|
}
|
|
this.currencyDropdownLaunch.status = false;
|
|
this.payments = [];
|
|
|
|
},
|
|
updateService(service){
|
|
this.selectedService = service;
|
|
this.serviceDropdownLaunch.status = false;
|
|
},
|
|
updateOrder(payment){
|
|
this.payments.includes(payment) ? this.payments.splice(this.payments.indexOf(payment), 1) : this.payments.push(payment);
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
</script> |