401 lines
11 KiB
Vue
401 lines
11 KiB
Vue
<script setup>
|
|
import { onMounted, computed, ref } from 'vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
/* import { QBadge, QBtn } from 'quasar';
|
|
import CustomerDescriptor from 'src/pages/Customer/Card/CustomerDescriptor.vue'; */
|
|
import invoiceOutService from 'src/services/invoiceOut.service';
|
|
import { toCurrency } from 'src/filters';
|
|
import { QBadge, QCheckbox, exportFile } from 'quasar';
|
|
|
|
const rows = ref([]);
|
|
const { t } = useI18n();
|
|
|
|
// invoiceOutGlobalStore state and getters
|
|
|
|
const payload = ref({
|
|
from: new Date('2001-01-01'),
|
|
to: new Date('2001-01-31'),
|
|
});
|
|
|
|
const filter = ref({
|
|
company: null,
|
|
country: null,
|
|
clientId: null,
|
|
client: null,
|
|
amount: null,
|
|
base: null,
|
|
ticketId: null,
|
|
active: null,
|
|
hasToInvoice: null,
|
|
verifiedData: null,
|
|
comercial: null,
|
|
});
|
|
|
|
const tableColumnComponents = {
|
|
company: {
|
|
component: 'span',
|
|
props: {},
|
|
},
|
|
country: {
|
|
component: 'span',
|
|
props: {},
|
|
},
|
|
clientId: {
|
|
component: 'a',
|
|
props: { href: '#' },
|
|
},
|
|
client: {
|
|
component: 'span',
|
|
props: {},
|
|
},
|
|
amount: {
|
|
component: 'span',
|
|
props: {},
|
|
},
|
|
base: {
|
|
component: 'span',
|
|
props: {},
|
|
},
|
|
ticketId: {
|
|
component: 'span',
|
|
props: {},
|
|
},
|
|
active: {
|
|
component: 'span',
|
|
props: { type: 'boolean' },
|
|
},
|
|
hasToInvoice: {
|
|
component: 'span',
|
|
props: { type: 'boolean' },
|
|
},
|
|
verifiedData: {
|
|
component: 'span',
|
|
props: { type: 'boolean' },
|
|
},
|
|
comercial: {
|
|
component: 'a',
|
|
props: { href: '#' },
|
|
},
|
|
};
|
|
|
|
const columns = ref([
|
|
{
|
|
label: 'company',
|
|
field: 'company',
|
|
name: 'company',
|
|
align: 'left',
|
|
},
|
|
{
|
|
label: 'country',
|
|
field: 'country',
|
|
name: 'country',
|
|
align: 'left',
|
|
},
|
|
{
|
|
label: 'clientId',
|
|
field: 'clientId',
|
|
name: 'clientId',
|
|
align: 'left',
|
|
},
|
|
{
|
|
label: 'client',
|
|
field: 'clientSocialName',
|
|
name: 'client',
|
|
align: 'left',
|
|
},
|
|
{
|
|
label: 'amount',
|
|
field: 'amount',
|
|
name: 'amount',
|
|
align: 'left',
|
|
format: (value) => toCurrency(value),
|
|
},
|
|
{
|
|
label: 'base',
|
|
field: 'taxableBase',
|
|
name: 'base',
|
|
align: 'left',
|
|
},
|
|
{
|
|
label: 'ticketId',
|
|
field: 'ticketFk',
|
|
name: 'ticketId',
|
|
align: 'left',
|
|
},
|
|
{
|
|
label: 'active',
|
|
field: 'isActive',
|
|
name: 'active',
|
|
align: 'left',
|
|
},
|
|
{
|
|
label: 'hasToInvoice',
|
|
field: 'hasToInvoice',
|
|
name: 'hasToInvoice',
|
|
align: 'left',
|
|
},
|
|
{
|
|
label: 'verifiedData',
|
|
field: 'isTaxDataChecked',
|
|
name: 'verifiedData',
|
|
align: 'left',
|
|
},
|
|
{
|
|
label: 'comercial',
|
|
field: 'comercialName',
|
|
name: 'comercial',
|
|
align: 'left',
|
|
},
|
|
]);
|
|
|
|
const wrapCsvValue = (val, formatFn, row) => {
|
|
let formatted = formatFn !== void 0 ? formatFn(val, row) : val;
|
|
formatted = formatted === void 0 || formatted === null ? '' : String(formatted);
|
|
formatted = formatted.split('"').join('""');
|
|
return `"${formatted}"`;
|
|
};
|
|
|
|
const exportTable = () => {
|
|
const content = [columns.value.map((col) => wrapCsvValue(col.label))]
|
|
.concat(
|
|
rows.value.map((row) =>
|
|
columns.value
|
|
.map((col) =>
|
|
wrapCsvValue(
|
|
typeof col.field === 'function'
|
|
? col.field(row)
|
|
: row[col.field === void 0 ? col.name : col.field],
|
|
col.format,
|
|
row
|
|
)
|
|
)
|
|
.join(',')
|
|
)
|
|
)
|
|
.join('\r\n');
|
|
|
|
const status = exportFile('table-export.csv', content, 'text/csv');
|
|
|
|
if (status !== true) {
|
|
console.log('Browser denied file download...');
|
|
}
|
|
};
|
|
|
|
const search = async () => {
|
|
const and = [];
|
|
Object.keys(filter.value).forEach((key) => {
|
|
if (filter.value[key]) {
|
|
and.push({
|
|
[key]: filter.value[key],
|
|
});
|
|
}
|
|
});
|
|
|
|
const params = {
|
|
...payload.value,
|
|
filter: {
|
|
limit: 20,
|
|
where: { and },
|
|
},
|
|
};
|
|
rows.value = await invoiceOutService.getNegativeBases(params);
|
|
};
|
|
|
|
const refresh = () => {
|
|
payload.value = {
|
|
from: new Date('2001-01-01'),
|
|
to: new Date('2001-01-31'),
|
|
};
|
|
filter.value = {
|
|
company: null,
|
|
country: null,
|
|
clientId: null,
|
|
client: null,
|
|
amount: null,
|
|
base: null,
|
|
ticketId: null,
|
|
active: null,
|
|
hasToInvoice: null,
|
|
verifiedData: null,
|
|
comercial: null,
|
|
};
|
|
search();
|
|
};
|
|
|
|
onMounted(async () => {
|
|
refresh();
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<QPage class="column items-center q-pa-md">
|
|
<QTable
|
|
flat
|
|
:rows="rows"
|
|
:columns="columns"
|
|
hide-bottom
|
|
row-key="clientId"
|
|
class="full-width q-mt-md"
|
|
>
|
|
<template #top-left>
|
|
<div class="row justify-start items-end">
|
|
<QInput
|
|
dense
|
|
v-model="payload.from"
|
|
type="date"
|
|
mask="date"
|
|
class="q-mr-md q"
|
|
:label="t('invoiceOut.negativeBases.from')"
|
|
/>
|
|
<QInput
|
|
dense
|
|
v-model="payload.to"
|
|
type="date"
|
|
mask="date"
|
|
class="q-mr-md q"
|
|
:label="t('invoiceOut.negativeBases.to')"
|
|
/>
|
|
<QBtn
|
|
color="primary"
|
|
icon-right="archive"
|
|
no-caps
|
|
@click="exportTable"
|
|
/>
|
|
</div>
|
|
</template>
|
|
<template #top-right>
|
|
<div class="row justify-start items-center">
|
|
<span class="q-mr-md text-grey-7">
|
|
{{ rows.length }} {{ t('results') }}
|
|
</span>
|
|
<QBtn
|
|
color="primary"
|
|
icon-right="search"
|
|
no-caps
|
|
class="q-mr-sm"
|
|
@click="search"
|
|
/>
|
|
<QBtn color="primary" icon-right="refresh" no-caps @click="refresh" />
|
|
</div>
|
|
</template>
|
|
<template #header="props">
|
|
<QTr :props="props" class="full-height">
|
|
<QTh v-for="col in props.cols" :key="col.name" :props="props">
|
|
<div class="column justify-start items-start full-height">
|
|
{{ t(`invoiceOut.negativeBases.${col.label}`) }}
|
|
<QInput
|
|
:disable="
|
|
[
|
|
'isActive',
|
|
'hasToInvoice',
|
|
'isTaxDataChecked',
|
|
].includes(col.field)
|
|
"
|
|
:borderless="
|
|
[
|
|
'isActive',
|
|
'hasToInvoice',
|
|
'isTaxDataChecked',
|
|
].includes(col.field)
|
|
"
|
|
dense
|
|
standout
|
|
v-model="filter[col.field]"
|
|
type="text"
|
|
/>
|
|
</div>
|
|
</QTh>
|
|
</QTr>
|
|
</template>
|
|
<template #body-cell="props">
|
|
<QTd :props="props">
|
|
<component
|
|
:is="tableColumnComponents[props.col.name].component"
|
|
class="col-content"
|
|
v-bind="tableColumnComponents[props.col.name].props"
|
|
@click="tableColumnComponents[props.col.name].event(props)"
|
|
>
|
|
<span
|
|
v-if="
|
|
tableColumnComponents[props.col.name].props.type !=
|
|
'boolean'
|
|
"
|
|
>
|
|
{{ props.value }}
|
|
</span>
|
|
<span v-else>
|
|
<QBadge v-if="props.value" color="grey">
|
|
<QIcon name="check" size="xs" />
|
|
</QBadge>
|
|
|
|
<QBadge v-else color="grey" outline>
|
|
<QIcon name="" size="xs" />
|
|
</QBadge>
|
|
</span>
|
|
<QPopupProxy>
|
|
<CustomerDescriptor
|
|
v-if="selectedCustomerId === props.value"
|
|
:id="selectedCustomerId"
|
|
/>
|
|
</QPopupProxy>
|
|
</component>
|
|
</QTd>
|
|
</template>
|
|
</QTable>
|
|
</QPage>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.card {
|
|
display: flex;
|
|
justify-content: center;
|
|
width: 100%;
|
|
background-color: #292929;
|
|
padding: 16px;
|
|
|
|
.card-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 0px;
|
|
}
|
|
|
|
.status-text {
|
|
font-size: 14px;
|
|
color: #eeeeee;
|
|
}
|
|
|
|
.text {
|
|
font-size: 14px;
|
|
color: #aaaaaa;
|
|
}
|
|
}
|
|
|
|
.col-content {
|
|
border-radius: 4px;
|
|
padding: 6px 6px 6px 6px;
|
|
}
|
|
</style>
|
|
|
|
<i18n>
|
|
{
|
|
"en": {
|
|
"status": {
|
|
"packageInvoicing": "Build packaging tickets",
|
|
"invoicing": "Invoicing client",
|
|
"stopping": "Stopping process",
|
|
"done": "Ended process"
|
|
},
|
|
"of": "of"
|
|
},
|
|
"es": {
|
|
"status":{
|
|
"packageInvoicing": "Generación de tickets de empaque",
|
|
"invoicing": "Facturando a cliente",
|
|
"stopping": "Deteniendo proceso",
|
|
"done": "Proceso detenido",
|
|
},
|
|
"of": "de"
|
|
}
|
|
}
|
|
</i18n>
|