493 lines
23 KiB
Vue
493 lines
23 KiB
Vue
<script setup>
|
|
import { onMounted, ref, computed } from 'vue';
|
|
import { useRoute } from 'vue-router';
|
|
import { useI18n } from 'vue-i18n';
|
|
import axios from 'axios';
|
|
import { toCurrency, toPercentage, toDate } from 'src/filters';
|
|
import SkeletonSummary from 'src/components/SkeletonSummary';
|
|
|
|
onMounted(() => fetch());
|
|
|
|
const route = useRoute();
|
|
const { t } = useI18n();
|
|
|
|
const $props = defineProps({
|
|
customerId: {
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
});
|
|
|
|
const entityId = computed(() => $props.customerId || route.params.id);
|
|
|
|
const customer = ref(null);
|
|
function fetch() {
|
|
const id = entityId.value;
|
|
axios.get(`Clients/${id}/summary`).then(({ data }) => {
|
|
customer.value = data;
|
|
});
|
|
}
|
|
|
|
const balanceDue = computed(() => {
|
|
return customer.value.defaulters.length && customer.value.defaulters[0].amount;
|
|
});
|
|
|
|
const balanceDueWarning = computed(() => (balanceDue.value ? 'negative' : ''));
|
|
|
|
const claimRate = computed(() => {
|
|
const data = customer.value;
|
|
|
|
return data.claimsRatio.claimingRate * 100;
|
|
});
|
|
|
|
const priceIncreasingRate = computed(() => {
|
|
const data = customer.value;
|
|
|
|
return data.claimsRatio.priceIncreasing / 100;
|
|
});
|
|
|
|
const debtWarning = computed(() => {
|
|
const data = customer.value;
|
|
|
|
return data.debt.debt > data.credit ? 'negative' : '';
|
|
});
|
|
|
|
const creditWarning = computed(() => {
|
|
const data = customer.value;
|
|
const tooMuchInsurance = data.credit > data.creditInsurance;
|
|
const noCreditInsurance = data.credit && data.creditInsurance == null;
|
|
|
|
return tooMuchInsurance || noCreditInsurance ? 'negative' : '';
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="summary container">
|
|
<q-card>
|
|
<skeleton-summary v-if="!customer" />
|
|
<template v-if="customer">
|
|
<div class="header bg-primary q-pa-sm q-mb-md">{{ customer.id }} - {{ customer.name }}</div>
|
|
<div class="row q-pa-md q-col-gutter-md q-mb-md">
|
|
<div class="col">
|
|
<q-list>
|
|
<q-item-label header class="text-h6">
|
|
{{ t('customer.summary.basicData') }}
|
|
<router-link
|
|
:to="{ name: 'CustomerBasicData', params: { id: entityId } }"
|
|
target="_blank"
|
|
>
|
|
<q-icon name="open_in_new" />
|
|
</router-link>
|
|
</q-item-label>
|
|
|
|
<q-item>
|
|
<q-item-section>
|
|
<q-item-label caption>{{ t('customer.summary.customerId') }}</q-item-label>
|
|
<q-item-label>{{ customer.id }}</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-item>
|
|
<q-item-section>
|
|
<q-item-label caption>{{ t('customer.summary.name') }}</q-item-label>
|
|
<q-item-label>{{ customer.name }}</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-item>
|
|
<q-item-section>
|
|
<q-item-label caption>{{ t('customer.summary.contact') }}</q-item-label>
|
|
<q-item-label>{{ customer.contact }}</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-item v-if="customer.salesPersonUser">
|
|
<q-item-section>
|
|
<q-item-label caption>{{ t('customer.summary.salesPerson') }}</q-item-label>
|
|
<q-item-label>{{ customer.salesPersonUser.name }}</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-item>
|
|
<q-item-section>
|
|
<q-item-label caption>{{ t('customer.summary.phone') }}</q-item-label>
|
|
<q-item-label>{{ customer.phone }}</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-item>
|
|
<q-item-section>
|
|
<q-item-label caption>{{ t('customer.summary.mobile') }}</q-item-label>
|
|
<q-item-label>{{ customer.mobile }}</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-item>
|
|
<q-item-section>
|
|
<q-item-label caption>{{ t('customer.summary.email') }}</q-item-label>
|
|
<q-item-label>{{ customer.email }}</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-item v-if="customer.contactChannel">
|
|
<q-item-section>
|
|
<q-item-label caption>{{ t('customer.summary.contactChannel') }}</q-item-label>
|
|
<q-item-label>{{ customer.contactChannel.name }}</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</div>
|
|
<div class="col">
|
|
<q-list>
|
|
<q-item-label header class="text-h6">
|
|
{{ t('customer.summary.fiscalAddress') }}
|
|
</q-item-label>
|
|
<q-item>
|
|
<q-item-section>
|
|
<q-item-label caption>{{ t('customer.summary.socialName') }}</q-item-label>
|
|
<q-item-label>{{ customer.socialName }}</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-item>
|
|
<q-item-section>
|
|
<q-item-label caption>{{ t('customer.summary.fiscalId') }}</q-item-label>
|
|
<q-item-label>{{ customer.fi }}</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-item>
|
|
<q-item-section>
|
|
<q-item-label caption>{{ t('customer.summary.postcode') }}</q-item-label>
|
|
<q-item-label>{{ customer.postcode }}</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-item v-if="customer.province">
|
|
<q-item-section>
|
|
<q-item-label caption>{{ t('customer.summary.province') }}</q-item-label>
|
|
<q-item-label>{{ customer.province.name }}</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-item v-if="customer.country">
|
|
<q-item-section>
|
|
<q-item-label caption>{{ t('customer.summary.country') }}</q-item-label>
|
|
<q-item-label>{{ customer.country.country }}</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-item>
|
|
<q-item-section>
|
|
<q-item-label caption>{{ t('customer.summary.street') }}</q-item-label>
|
|
<q-item-label>{{ customer.street }}</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</div>
|
|
<div class="col">
|
|
<q-list>
|
|
<q-item-label header class="text-h6">
|
|
{{ t('customer.summary.fiscalData') }}
|
|
</q-item-label>
|
|
<q-item dense>
|
|
<q-checkbox
|
|
v-model="customer.isEqualizated"
|
|
:label="t('customer.summary.isEqualizated')"
|
|
disable
|
|
/>
|
|
</q-item>
|
|
<q-item dense>
|
|
<q-checkbox
|
|
v-model="customer.isActive"
|
|
:label="t('customer.summary.isActive')"
|
|
disable
|
|
/>
|
|
</q-item>
|
|
<q-item dense>
|
|
<q-checkbox
|
|
v-model="customer.hasToInvoiceByAddress"
|
|
:label="t('customer.summary.invoiceByAddress')"
|
|
disable
|
|
/>
|
|
</q-item>
|
|
<q-item dense>
|
|
<q-checkbox
|
|
v-model="customer.isTaxDataChecked"
|
|
:label="t('customer.summary.verifiedData')"
|
|
disable
|
|
/>
|
|
</q-item>
|
|
<q-item dense>
|
|
<q-checkbox
|
|
v-model="customer.hasToInvoice"
|
|
:label="t('customer.summary.hasToInvoice')"
|
|
disable
|
|
/>
|
|
</q-item>
|
|
<q-item dense>
|
|
<q-checkbox
|
|
v-model="customer.isToBeMailed"
|
|
:label="t('customer.summary.notifyByEmail')"
|
|
disable
|
|
/>
|
|
</q-item>
|
|
<q-item dense>
|
|
<q-checkbox v-model="customer.isVies" :label="t('customer.summary.vies')" disable />
|
|
</q-item>
|
|
</q-list>
|
|
</div>
|
|
<div class="col">
|
|
<q-list>
|
|
<q-item-label header class="text-h6">
|
|
{{ t('customer.summary.billingData') }}
|
|
</q-item-label>
|
|
<q-item>
|
|
<q-item-section>
|
|
<q-item-label caption>{{ t('customer.summary.payMethod') }}</q-item-label>
|
|
<q-item-label>{{ customer.payMethod.name }}</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-item>
|
|
<q-item-section>
|
|
<q-item-label caption>{{ t('customer.summary.bankAccount') }}</q-item-label>
|
|
<q-item-label>{{ customer.iban }}</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-item>
|
|
<q-item-section>
|
|
<q-item-label caption>{{ t('customer.summary.dueDay') }}</q-item-label>
|
|
<q-item-label>{{ customer.dueDay }}</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-item dense>
|
|
<q-checkbox v-model="customer.hasLcr" :label="t('customer.summary.hasLcr')" disable />
|
|
</q-item>
|
|
<q-item dense>
|
|
<q-checkbox
|
|
v-model="customer.hasCoreVnl"
|
|
:label="t('customer.summary.hasCoreVnl')"
|
|
disable
|
|
/>
|
|
</q-item>
|
|
<q-item dense>
|
|
<q-checkbox
|
|
v-model="customer.hasSepaVnl"
|
|
:label="t('customer.summary.hasB2BVnl')"
|
|
disable
|
|
/>
|
|
</q-item>
|
|
</q-list>
|
|
</div>
|
|
<div class="col" v-if="customer.defaultAddress">
|
|
<q-list>
|
|
<q-item-label header class="text-h6">
|
|
{{ t('customer.summary.consignee') }}
|
|
</q-item-label>
|
|
<q-item>
|
|
<q-item-section>
|
|
<q-item-label caption>{{ t('customer.summary.addressName') }}</q-item-label>
|
|
<q-item-label>{{ customer.defaultAddress.nickname }}</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-item>
|
|
<q-item-section>
|
|
<q-item-label caption>{{ t('customer.summary.addressCity') }}</q-item-label>
|
|
<q-item-label>{{ customer.defaultAddress.city }}</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-item>
|
|
<q-item-section>
|
|
<q-item-label caption>{{ t('customer.summary.addressStreet') }}</q-item-label>
|
|
<q-item-label>{{ customer.defaultAddress.street }}</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</div>
|
|
<div class="col" v-if="customer.account">
|
|
<q-list>
|
|
<q-item-label header class="text-h6">
|
|
{{ t('customer.summary.webAccess') }}
|
|
</q-item-label>
|
|
<q-item>
|
|
<q-item-section>
|
|
<q-item-label caption>{{ t('customer.summary.username') }}</q-item-label>
|
|
<q-item-label>{{ customer.account.name }}</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-item dense>
|
|
<q-checkbox
|
|
v-model="customer.account.active"
|
|
:label="t('customer.summary.webAccess')"
|
|
disable
|
|
/>
|
|
</q-item>
|
|
</q-list>
|
|
</div>
|
|
<div class="col">
|
|
<q-list>
|
|
<q-item-label header class="text-h6">
|
|
{{ t('customer.summary.businessData') }}
|
|
</q-item-label>
|
|
<q-item>
|
|
<q-item-section>
|
|
<q-item-label caption>{{ t('customer.summary.totalGreuge') }}</q-item-label>
|
|
<q-item-label>{{ toCurrency(customer.totalGreuge) }}</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-item v-if="customer.mana">
|
|
<q-item-section>
|
|
<q-item-label caption>{{ t('customer.summary.mana') }}</q-item-label>
|
|
<q-item-label>{{ toCurrency(customer.mana.mana) }}</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-item v-if="customer.claimsRatio">
|
|
<q-item-section>
|
|
<q-item-label caption>
|
|
{{ t('customer.summary.priceIncreasingRate') }}
|
|
</q-item-label>
|
|
<q-item-label>{{ toPercentage(priceIncreasingRate) }}</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-item v-if="customer.averageInvoiced">
|
|
<q-item-section>
|
|
<q-item-label caption>{{ t('customer.summary.averageInvoiced') }}</q-item-label>
|
|
<q-item-label>{{ toCurrency(customer.averageInvoiced.invoiced) }}</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-item v-if="customer.claimsRatio">
|
|
<q-item-section>
|
|
<q-item-label caption>{{ t('customer.summary.claimRate') }}</q-item-label>
|
|
<q-item-label>{{ toPercentage(claimRate) }}</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</div>
|
|
<div class="col">
|
|
<q-list>
|
|
<q-item-label header class="text-h6">
|
|
{{ t('customer.summary.financialData') }}
|
|
</q-item-label>
|
|
<q-item v-if="customer.debt">
|
|
<q-item-section>
|
|
<q-item-label caption>{{ t('customer.summary.risk') }}</q-item-label>
|
|
<q-item-label :class="debtWarning">
|
|
{{ toCurrency(customer.debt.debt) }}
|
|
</q-item-label>
|
|
</q-item-section>
|
|
<q-item-section side>
|
|
<q-icon name="vn:info">
|
|
<q-tooltip>{{ t('customer.summary.riskInfo') }}</q-tooltip>
|
|
</q-icon>
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-item>
|
|
<q-item-section>
|
|
<q-item-label caption>{{ t('customer.summary.credit') }}</q-item-label>
|
|
<q-item-label :class="creditWarning">
|
|
{{ toCurrency(customer.credit) }}
|
|
</q-item-label>
|
|
</q-item-section>
|
|
<q-item-section side>
|
|
<q-icon name="vn:info">
|
|
<q-tooltip>{{ t('customer.summary.creditInfo') }}</q-tooltip>
|
|
</q-icon>
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-item v-if="customer.creditInsurance">
|
|
<q-item-section>
|
|
<q-item-label caption>{{ t('customer.summary.securedCredit') }}</q-item-label>
|
|
<q-item-label>{{ toCurrency(customer.creditInsurance) }}</q-item-label>
|
|
</q-item-section>
|
|
<q-item-section side>
|
|
<q-icon name="vn:info">
|
|
<q-tooltip>{{ t('customer.summary.securedCreditInfo') }}</q-tooltip>
|
|
</q-icon>
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-item>
|
|
<q-item-section>
|
|
<q-item-label caption>{{ t('customer.summary.balance') }}</q-item-label>
|
|
<q-item-label>{{ toCurrency(customer.sumRisk) || toCurrency(0) }}</q-item-label>
|
|
</q-item-section>
|
|
<q-item-section side>
|
|
<q-icon name="vn:info">
|
|
<q-tooltip>{{ t('customer.summary.balanceInfo') }}</q-tooltip>
|
|
</q-icon>
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-item v-if="customer.defaulters">
|
|
<q-item-section>
|
|
<q-item-label caption>{{ t('customer.summary.balanceDue') }}</q-item-label>
|
|
<q-item-label :class="balanceDueWarning">
|
|
{{ toCurrency(balanceDue) }}
|
|
</q-item-label>
|
|
</q-item-section>
|
|
<q-item-section side>
|
|
<q-icon name="vn:info">
|
|
<q-tooltip>{{ t('customer.summary.balanceDueInfo') }}</q-tooltip>
|
|
</q-icon>
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-item v-if="customer.recovery">
|
|
<q-item-section>
|
|
<q-item-label caption>{{ t('customer.summary.recoverySince') }}</q-item-label>
|
|
<q-item-label>{{ toDate(customer.recovery.started) }}</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</q-card>
|
|
</div>
|
|
</template>
|
|
<style lang="scss" scoped>
|
|
.container {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.q-card {
|
|
width: 100%;
|
|
max-width: 1200px;
|
|
}
|
|
|
|
.negative {
|
|
color: red;
|
|
}
|
|
|
|
.summary {
|
|
.q-list {
|
|
.q-item__label--header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
a {
|
|
color: $primary;
|
|
}
|
|
}
|
|
}
|
|
.row {
|
|
flex-wrap: wrap;
|
|
|
|
.col {
|
|
min-width: 250px;
|
|
}
|
|
}
|
|
|
|
.header {
|
|
text-align: center;
|
|
font-size: 18px;
|
|
}
|
|
|
|
#slider-container {
|
|
max-width: 80%;
|
|
margin: 0 auto;
|
|
|
|
.q-slider {
|
|
.q-slider__marker-labels:nth-child(1) {
|
|
transform: none;
|
|
}
|
|
.q-slider__marker-labels:nth-child(2) {
|
|
transform: none;
|
|
left: auto !important;
|
|
right: 0%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.q-dialog .summary {
|
|
max-width: 1200px;
|
|
}
|
|
</style>
|