forked from verdnatura/salix-front
Refresh FormModel on state changes
This commit is contained in:
parent
37c91f47b6
commit
bbdae4b629
|
|
@ -1,9 +1,8 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
|
import axios from 'axios';
|
||||||
import { onMounted, onUnmounted, computed, ref, watch } from 'vue';
|
import { onMounted, onUnmounted, computed, ref, watch } from 'vue';
|
||||||
import { useI18n } from 'vue-i18n';
|
import { useI18n } from 'vue-i18n';
|
||||||
import { useQuasar } from 'quasar';
|
import { useQuasar } from 'quasar';
|
||||||
import axios from 'axios';
|
|
||||||
|
|
||||||
import { useState } from 'src/composables/useState';
|
import { useState } from 'src/composables/useState';
|
||||||
import { useValidator } from 'src/composables/useValidator';
|
import { useValidator } from 'src/composables/useValidator';
|
||||||
import SkeletonForm from 'components/ui/SkeletonForm.vue';
|
import SkeletonForm from 'components/ui/SkeletonForm.vue';
|
||||||
|
|
@ -44,6 +43,7 @@ const isLoading = ref(false);
|
||||||
const hasChanges = ref(false);
|
const hasChanges = ref(false);
|
||||||
const formData = computed(() => state.get($props.model));
|
const formData = computed(() => state.get($props.model));
|
||||||
const originalData = ref();
|
const originalData = ref();
|
||||||
|
const formUrl = computed(() => $props.url);
|
||||||
|
|
||||||
async function fetch() {
|
async function fetch() {
|
||||||
const { data } = await axios.get($props.url, {
|
const { data } = await axios.get($props.url, {
|
||||||
|
|
@ -91,6 +91,12 @@ function filter(value, update, filterOptions) {
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
watch(formUrl, async () => {
|
||||||
|
originalData.value = null;
|
||||||
|
reset();
|
||||||
|
fetch();
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<q-banner v-if="hasChanges" class="text-white bg-warning">
|
<q-banner v-if="hasChanges" class="text-white bg-warning">
|
||||||
|
|
|
||||||
|
|
@ -1,26 +1,19 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import { onMounted, toRef, ref, watch } from 'vue';
|
import { onMounted, toRef, ref, watch } from 'vue';
|
||||||
import axios from 'axios';
|
import axios from 'axios';
|
||||||
|
import SkeletonSummary from 'components/ui/SkeletonSummary.vue';
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
id: {
|
id: {
|
||||||
type: Number,
|
type: Number,
|
||||||
required: true,
|
required: true,
|
||||||
},
|
},
|
||||||
description: {
|
|
||||||
type: String,
|
|
||||||
required: false,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
});
|
});
|
||||||
|
|
||||||
onMounted(() => fetch());
|
onMounted(() => fetch());
|
||||||
|
|
||||||
const entity = ref();
|
const entity = ref();
|
||||||
const entityId = toRef(props, 'id');
|
const entityId = toRef(props, 'id');
|
||||||
// const description = computed(() => {
|
|
||||||
// return props.description || entity.value.name;
|
|
||||||
// });
|
|
||||||
|
|
||||||
async function fetch() {
|
async function fetch() {
|
||||||
const id = entityId.value;
|
const id = entityId.value;
|
||||||
|
|
@ -35,25 +28,36 @@ watch(entityId, async () => {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<slot name="body" :entity="entity" />
|
<div class="summary container">
|
||||||
|
<q-card>
|
||||||
|
<skeleton-summary v-if="!entity" />
|
||||||
|
<template v-if="entity">
|
||||||
|
<div class="header bg-primary q-pa-sm q-mb-md">
|
||||||
|
<slot name="header" :entity="entity"> {{ entity.id }} - {{ entity.name }} </slot>
|
||||||
|
</div>
|
||||||
|
<div class="row q-pa-md q-col-gutter-md q-mb-md">
|
||||||
|
<slot name="body" :entity="entity" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</q-card>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss">
|
||||||
.container {
|
.summary.container {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.q-card {
|
|
||||||
width: 100%;
|
|
||||||
max-width: 1200px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.negative {
|
|
||||||
color: red;
|
|
||||||
}
|
|
||||||
|
|
||||||
.summary {
|
.summary {
|
||||||
|
.q-card {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 1200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.negative {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
.q-list {
|
.q-list {
|
||||||
.q-item__label--header {
|
.q-item__label--header {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
|
||||||
|
|
@ -28,6 +28,7 @@ $color-spacer: rgba(255, 255, 255, 0.3);
|
||||||
$border-thin-light: 1px solid $color-spacer-light;
|
$border-thin-light: 1px solid $color-spacer-light;
|
||||||
|
|
||||||
$dark-shadow-color: #000;
|
$dark-shadow-color: #000;
|
||||||
|
$dark: #3c3b3b;
|
||||||
$layout-shadow-dark: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0px 10px rgba(0, 0, 0, 0.24);
|
$layout-shadow-dark: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0px 10px rgba(0, 0, 0, 0.24);
|
||||||
|
|
||||||
$spacing-md: 16px;
|
$spacing-md: 16px;
|
||||||
|
|
|
||||||
|
|
@ -1,16 +1,12 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import { onMounted, computed } from 'vue';
|
import { computed } from 'vue';
|
||||||
import { useRoute } from 'vue-router';
|
import { useRoute } from 'vue-router';
|
||||||
// import { useI18n } from 'vue-i18n';
|
import { useI18n } from 'vue-i18n';
|
||||||
// import axios from 'axios';
|
import { toCurrency, toPercentage, toDate } from 'src/filters';
|
||||||
// import { toCurrency, toPercentage, toDate } from 'src/filters';
|
|
||||||
import CardSummary from 'components/ui/CardSummary.vue';
|
import CardSummary from 'components/ui/CardSummary.vue';
|
||||||
// import SkeletonSummary from 'components/ui/SkeletonSummary.vue';
|
|
||||||
|
|
||||||
onMounted(() => fetch());
|
|
||||||
|
|
||||||
const route = useRoute();
|
const route = useRoute();
|
||||||
// const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
|
|
||||||
const $props = defineProps({
|
const $props = defineProps({
|
||||||
id: {
|
id: {
|
||||||
|
|
@ -19,480 +15,346 @@ const $props = defineProps({
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
const entityId = computed(() => $props.id || route.params.id);
|
const entityId = computed(() => Number($props.id) || Number(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>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<card-summary :id="entityId">
|
<card-summary :id="entityId">
|
||||||
<template #body="{ entity }">
|
<template #body="{ entity }">
|
||||||
{{ entity }}
|
<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>{{ entity.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>{{ entity.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>{{ entity.contact }}</q-item-label>
|
||||||
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
<q-item v-if="entity.salesPersonUser">
|
||||||
|
<q-item-section>
|
||||||
|
<q-item-label caption>{{ t('customer.summary.salesPerson') }}</q-item-label>
|
||||||
|
<q-item-label>{{ entity.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>{{ entity.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>{{ entity.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>{{ entity.email }}</q-item-label>
|
||||||
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
<q-item v-if="entity.contactChannel">
|
||||||
|
<q-item-section>
|
||||||
|
<q-item-label caption>{{ t('customer.summary.contactChannel') }}</q-item-label>
|
||||||
|
<q-item-label>{{ entity.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>{{ entity.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>{{ entity.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>{{ entity.postcode }}</q-item-label>
|
||||||
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
<q-item v-if="entity.province">
|
||||||
|
<q-item-section>
|
||||||
|
<q-item-label caption>{{ t('customer.summary.province') }}</q-item-label>
|
||||||
|
<q-item-label>{{ entity.province.name }}</q-item-label>
|
||||||
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
<q-item v-if="entity.country">
|
||||||
|
<q-item-section>
|
||||||
|
<q-item-label caption>{{ t('customer.summary.country') }}</q-item-label>
|
||||||
|
<q-item-label>{{ entity.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>{{ entity.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="entity.isEqualizated"
|
||||||
|
:label="t('customer.summary.isEqualizated')"
|
||||||
|
disable
|
||||||
|
/>
|
||||||
|
</q-item>
|
||||||
|
<q-item dense>
|
||||||
|
<q-checkbox v-model="entity.isActive" :label="t('customer.summary.isActive')" disable />
|
||||||
|
</q-item>
|
||||||
|
<q-item dense>
|
||||||
|
<q-checkbox
|
||||||
|
v-model="entity.hasToInvoiceByAddress"
|
||||||
|
:label="t('customer.summary.invoiceByAddress')"
|
||||||
|
disable
|
||||||
|
/>
|
||||||
|
</q-item>
|
||||||
|
<q-item dense>
|
||||||
|
<q-checkbox
|
||||||
|
v-model="entity.isTaxDataChecked"
|
||||||
|
:label="t('customer.summary.verifiedData')"
|
||||||
|
disable
|
||||||
|
/>
|
||||||
|
</q-item>
|
||||||
|
<q-item dense>
|
||||||
|
<q-checkbox v-model="entity.hasToInvoice" :label="t('customer.summary.hasToInvoice')" disable />
|
||||||
|
</q-item>
|
||||||
|
<q-item dense>
|
||||||
|
<q-checkbox
|
||||||
|
v-model="entity.isToBeMailed"
|
||||||
|
:label="t('customer.summary.notifyByEmail')"
|
||||||
|
disable
|
||||||
|
/>
|
||||||
|
</q-item>
|
||||||
|
<q-item dense>
|
||||||
|
<q-checkbox v-model="entity.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>{{ entity.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>{{ entity.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>{{ entity.dueDay }}</q-item-label>
|
||||||
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
<q-item dense>
|
||||||
|
<q-checkbox v-model="entity.hasLcr" :label="t('customer.summary.hasLcr')" disable />
|
||||||
|
</q-item>
|
||||||
|
<q-item dense>
|
||||||
|
<q-checkbox v-model="entity.hasCoreVnl" :label="t('customer.summary.hasCoreVnl')" disable />
|
||||||
|
</q-item>
|
||||||
|
<q-item dense>
|
||||||
|
<q-checkbox v-model="entity.hasSepaVnl" :label="t('customer.summary.hasB2BVnl')" disable />
|
||||||
|
</q-item>
|
||||||
|
</q-list>
|
||||||
|
</div>
|
||||||
|
<div class="col" v-if="entity.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>{{ entity.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>{{ entity.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>{{ entity.defaultAddress.street }}</q-item-label>
|
||||||
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
</q-list>
|
||||||
|
</div>
|
||||||
|
<div class="col" v-if="entity.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>{{ entity.account.name }}</q-item-label>
|
||||||
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
<q-item dense>
|
||||||
|
<q-checkbox v-model="entity.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(entity.totalGreuge) }}</q-item-label>
|
||||||
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
<q-item v-if="entity.mana">
|
||||||
|
<q-item-section>
|
||||||
|
<q-item-label caption>{{ t('customer.summary.mana') }}</q-item-label>
|
||||||
|
<q-item-label>{{ toCurrency(entity.mana.mana) }}</q-item-label>
|
||||||
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
<q-item v-if="entity.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="entity.averageInvoiced">
|
||||||
|
<q-item-section>
|
||||||
|
<q-item-label caption>{{ t('customer.summary.averageInvoiced') }}</q-item-label>
|
||||||
|
<q-item-label>{{ toCurrency(entity.averageInvoiced.invoiced) }}</q-item-label>
|
||||||
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
<q-item v-if="entity.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="entity.debt">
|
||||||
|
<q-item-section>
|
||||||
|
<q-item-label caption>{{ t('customer.summary.risk') }}</q-item-label>
|
||||||
|
<q-item-label :class="debtWarning">
|
||||||
|
{{ toCurrency(entity.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(entity.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="entity.creditInsurance">
|
||||||
|
<q-item-section>
|
||||||
|
<q-item-label caption>{{ t('customer.summary.securedCredit') }}</q-item-label>
|
||||||
|
<q-item-label>{{ toCurrency(entity.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(entity.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="entity.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="entity.recovery">
|
||||||
|
<q-item-section>
|
||||||
|
<q-item-label caption>{{ t('customer.summary.recoverySince') }}</q-item-label>
|
||||||
|
<q-item-label>{{ toDate(entity.recovery.started) }}</q-item-label>
|
||||||
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
</q-list>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</card-summary>
|
</card-summary>
|
||||||
<!-- <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>
|
</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>
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue