WIP: refs #6416 - refactor-InvoiceIn #196
|
|
@ -11,7 +11,10 @@ import VnLv from 'src/components/ui/VnLv.vue';
|
|||
import VnTable from 'src/components/ui/VnTable.vue';
|
||||
import VnCardSection from 'src/components/ui/VnCardSection.vue';
|
||||
import VnCard from 'src/components/ui/VnCard.vue';
|
||||
import VnIcon from 'src/components/ui/VnIcon.vue';
|
||||
import VnBtn from 'src/components/ui/VnBtn.vue';
|
||||
import in18n from '../in18n';
|
||||
import VnChip from 'src/components/ui/VnChip.vue';
|
||||
|
||||
onMounted(async () => {
|
||||
salixUrl.value = await getUrl('');
|
||||
|
|
@ -197,166 +200,129 @@ function setData(entity) {
|
|||
</template>
|
||||
<template #body="{ entity: invoiceIn }">
|
||||
<!--Basic Data-->
|
||||
<QCard class="vn-one">
|
||||
<QCardSection class="q-pa-none">
|
||||
<a class="header" :href="`#/invoice-in/${entityId}/basic-data`">
|
||||
{{ t('invoiceIn.pageTitles.basicData') }}
|
||||
<QIcon name="open_in_new" color="primary" />
|
||||
</a>
|
||||
<QBtn
|
||||
class="q-ml-sm"
|
||||
padding="xs"
|
||||
flat
|
||||
color="primary"
|
||||
round
|
||||
icon="cloud_download"
|
||||
@click.stop="downloadFile(invoiceIn.dmsFk)"
|
||||
<VnCard class="vn-max">
|
||||
<template #header>
|
||||
<VnCardSection
|
||||
:title="'invoiceIn.pageTitles.basicData'"
|
||||
:href="`#/invoice-in/${entityId}/basic-data`"
|
||||
>
|
||||
<QTooltip>
|
||||
{{ t('components.smartCard.downloadFile') }}
|
||||
</QTooltip>
|
||||
</QBtn>
|
||||
</QCardSection>
|
||||
<VnLv
|
||||
:label="t('invoiceIn.summary.supplier')"
|
||||
:value="invoiceIn.supplier.name"
|
||||
/>
|
||||
<VnLv
|
||||
:label="t('invoiceIn.summary.supplierRef')"
|
||||
:value="invoiceIn.supplierRef"
|
||||
/>
|
||||
<VnLv
|
||||
:label="t('invoiceIn.summary.currency')"
|
||||
:value="invoiceIn.currency.code"
|
||||
/>
|
||||
<VnLv
|
||||
:label="t('invoiceIn.summary.docNumber')"
|
||||
:value="`${invoiceIn.serial}/${invoiceIn.serialNumber}`"
|
||||
/>
|
||||
</QCard>
|
||||
<QCard class="vn-one">
|
||||
<QCardSection class="q-pa-none">
|
||||
<a class="header" :href="`#/invoice-in/${entityId}/basic-data`">
|
||||
{{ t('invoiceIn.pageTitles.basicData') }}
|
||||
<QIcon name="open_in_new" color="primary" />
|
||||
</a>
|
||||
<QBtn
|
||||
class="q-ml-sm"
|
||||
padding="xs"
|
||||
flat
|
||||
color="primary"
|
||||
round
|
||||
icon="cloud_download"
|
||||
@click.stop="downloadFile(invoiceIn.dmsFk)"
|
||||
>
|
||||
<QTooltip>
|
||||
{{ t('components.smartCard.downloadFile') }}
|
||||
</QTooltip>
|
||||
</QBtn>
|
||||
</QCardSection>
|
||||
<VnLv
|
||||
:label="t('invoiceIn.summary.issued')"
|
||||
:value="toDate(invoiceIn.issued)"
|
||||
/>
|
||||
<VnLv
|
||||
:label="t('invoiceIn.summary.operated')"
|
||||
:value="toDate(invoiceIn.operated)"
|
||||
/>
|
||||
<VnLv
|
||||
:label="t('invoiceIn.summary.bookEntried')"
|
||||
:value="toDate(invoiceIn.bookEntried)"
|
||||
/>
|
||||
<VnLv
|
||||
:label="t('invoiceIn.summary.bookedDate')"
|
||||
:value="toDate(invoiceIn.booked)"
|
||||
/>
|
||||
</QCard>
|
||||
<QCard class="vn-one">
|
||||
<QCardSection class="q-pa-none">
|
||||
<a class="header" :href="`#/invoice-in/${entityId}/basic-data`">
|
||||
{{ t('invoiceIn.pageTitles.basicData') }}
|
||||
<QIcon name="open_in_new" color="primary" />
|
||||
</a>
|
||||
<QBtn
|
||||
class="q-ml-sm"
|
||||
padding="xs"
|
||||
flat
|
||||
color="primary"
|
||||
round
|
||||
icon="cloud_download"
|
||||
@click.stop="downloadFile(invoiceIn.dmsFk)"
|
||||
>
|
||||
<QTooltip>
|
||||
{{ t('components.smartCard.downloadFile') }}
|
||||
</QTooltip>
|
||||
</QBtn>
|
||||
</QCardSection>
|
||||
<QCardSection class="q-pa-none">
|
||||
<div class="bordered q-px-sm q-mx-auto">
|
||||
<VnLv
|
||||
:label="t('invoiceIn.summary.taxableBase')"
|
||||
:value="toCurrency(invoiceIn.totals.totalTaxableBase)"
|
||||
/>
|
||||
<VnLv
|
||||
label="Total"
|
||||
:value="toCurrency(invoiceIn.totals.totalVat)"
|
||||
/>
|
||||
<VnLv :label="t('invoiceIn.summary.dueTotal')">
|
||||
<template #value>
|
||||
<QChip
|
||||
dense
|
||||
class="q-pa-xs"
|
||||
:color="amountsNotMatch ? 'negative' : 'transparent'"
|
||||
:title="
|
||||
amountsNotMatch
|
||||
? t('invoiceIn.summary.noMatch')
|
||||
: t('invoiceIn.summary.dueTotal')
|
||||
"
|
||||
>
|
||||
{{ toCurrency(invoiceIn.totals.totalDueDay) }}
|
||||
</QChip>
|
||||
</template>
|
||||
</VnLv>
|
||||
<template #icon>
|
||||
<VnIcon name="open_in_new" color="primary" />
|
||||
</template>
|
||||
<template #btn>
|
||||
<VnBtn
|
||||
class="q-ml-sm"
|
||||
padding="xs"
|
||||
flat
|
||||
color="primary"
|
||||
round
|
||||
icon="cloud_download"
|
||||
:promise="() => downloadFile(invoiceIn.dmsFk)"
|
||||
>
|
||||
<template #tooltip>
|
||||
{{ t('components.smartCard.downloadFile') }}
|
||||
</template>
|
||||
</VnBtn>
|
||||
</template>
|
||||
</VnCardSection>
|
||||
</template>
|
||||
<template #body>
|
||||
<div class="card-section">
|
||||
<div class="vn-one card">
|
||||
<VnLv
|
||||
:label="t('invoiceIn.summary.supplier')"
|
||||
:value="invoiceIn.supplier.name"
|
||||
/>
|
||||
<VnLv
|
||||
:label="t('invoiceIn.summary.supplierRef')"
|
||||
:value="invoiceIn.supplierRef"
|
||||
/>
|
||||
<VnLv
|
||||
:label="t('invoiceIn.summary.currency')"
|
||||
:value="invoiceIn.currency.code"
|
||||
/>
|
||||
<VnLv
|
||||
:label="t('invoiceIn.summary.docNumber')"
|
||||
:value="`${invoiceIn.serial}/${invoiceIn.serialNumber}`"
|
||||
/>
|
||||
</div>
|
||||
<div class="card vn-two">
|
||||
<VnLv
|
||||
:label="t('invoiceIn.summary.issued')"
|
||||
:value="toDate(invoiceIn.issued)"
|
||||
/>
|
||||
<VnLv
|
||||
:label="t('invoiceIn.summary.operated')"
|
||||
:value="toDate(invoiceIn.operated)"
|
||||
/>
|
||||
<VnLv
|
||||
:label="t('invoiceIn.summary.bookEntried')"
|
||||
:value="toDate(invoiceIn.bookEntried)"
|
||||
/>
|
||||
<VnLv
|
||||
:label="t('invoiceIn.summary.bookedDate')"
|
||||
:value="toDate(invoiceIn.booked)"
|
||||
/>
|
||||
</div>
|
||||
<div class="card vn-three">
|
||||
<div class="q-px-sm">
|
||||
<VnLv
|
||||
:label="t('invoiceIn.summary.taxableBase')"
|
||||
:value="toCurrency(invoiceIn.totals.totalTaxableBase)"
|
||||
/>
|
||||
<VnLv
|
||||
label="Total"
|
||||
:value="toCurrency(invoiceIn.totals.totalVat)"
|
||||
/>
|
||||
<VnLv :label="t('invoiceIn.summary.dueTotal')">
|
||||
<template #value>
|
||||
<VnChip
|
||||
dense
|
||||
class="q-pa-xs"
|
||||
:color="
|
||||
amountsNotMatch
|
||||
? 'negative'
|
||||
: 'transparent'
|
||||
"
|
||||
:title="
|
||||
amountsNotMatch
|
||||
? t('invoiceIn.summary.noMatch')
|
||||
: t('invoiceIn.summary.dueTotal')
|
||||
"
|
||||
>
|
||||
<template #body>
|
||||
{{
|
||||
toCurrency(
|
||||
invoiceIn.totals.totalDueDay
|
||||
)
|
||||
}}
|
||||
</template>
|
||||
</VnChip>
|
||||
</template>
|
||||
</VnLv>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card vn-four q-mb-md">
|
||||
<VnLv
|
||||
:label="t('invoiceIn.summary.sage')"
|
||||
:value="invoiceIn.sageWithholding.withholding"
|
||||
/>
|
||||
<VnLv
|
||||
:label="t('invoiceIn.summary.vat')"
|
||||
:value="invoiceIn.expenseDeductible?.name"
|
||||
/>
|
||||
<VnLv
|
||||
:label="t('invoiceIn.summary.company')"
|
||||
:value="invoiceIn.company.code"
|
||||
/>
|
||||
<VnLv
|
||||
:label="t('invoiceIn.summary.booked')"
|
||||
:value="invoiceIn.isBooked"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</QCardSection>
|
||||
</QCard>
|
||||
<QCard class="q-mb-md">
|
||||
<QCardSection class="q-pa-none">
|
||||
<a class="header" :href="`#/invoice-in/${entityId}/basic-data`">
|
||||
{{ t('invoiceIn.pageTitles.basicData') }}
|
||||
<QIcon name="open_in_new" color="primary" />
|
||||
</a>
|
||||
<QBtn
|
||||
class="q-ml-sm"
|
||||
padding="xs"
|
||||
flat
|
||||
color="primary"
|
||||
round
|
||||
icon="cloud_download"
|
||||
@click.stop="downloadFile(invoiceIn.dmsFk)"
|
||||
>
|
||||
<QTooltip>
|
||||
{{ t('components.smartCard.downloadFile') }}
|
||||
</QTooltip>
|
||||
</QBtn>
|
||||
</QCardSection>
|
||||
<VnLv
|
||||
:label="t('invoiceIn.summary.sage')"
|
||||
:value="invoiceIn.sageWithholding.withholding"
|
||||
/>
|
||||
<VnLv
|
||||
:label="t('invoiceIn.summary.vat')"
|
||||
:value="invoiceIn.expenseDeductible?.name"
|
||||
/>
|
||||
<VnLv
|
||||
:label="t('invoiceIn.summary.company')"
|
||||
:value="invoiceIn.company.code"
|
||||
/>
|
||||
<VnLv
|
||||
:label="t('invoiceIn.summary.booked')"
|
||||
:value="invoiceIn.isBooked"
|
||||
/>
|
||||
</QCard>
|
||||
</template>
|
||||
</VnCard>
|
||||
<!--Vat-->
|
||||
<VnCard v-if="invoiceIn.invoiceInTax.length" class="vn-three">
|
||||
<template #header>
|
||||
|
|
@ -423,6 +389,26 @@ function setData(entity) {
|
|||
</CardSummary>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
.q-card {
|
||||
.vn-max {
|
||||
background-color: unset;
|
||||
}
|
||||
.card-section {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
row-gap: 10px;
|
||||
column-gap: 10px;
|
||||
.card {
|
||||
flex: 1 1 30%;
|
||||
width: 100%;
|
||||
background-color: var(--vn-gray);
|
||||
padding: 15px;
|
||||
font-size: 16px;
|
||||
min-width: 275px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.bg {
|
||||
background-color: var(--vn-light-gray);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue