forked from verdnatura/salix-front
refactor(customer_recovery): to vnTable
This commit is contained in:
parent
cb95f0637f
commit
810e579ea9
|
|
@ -90,6 +90,9 @@ globals:
|
|||
salesPerson: SalesPerson
|
||||
send: Send
|
||||
code: Code
|
||||
since: Since
|
||||
from: From
|
||||
to: To
|
||||
pageTitles:
|
||||
logIn: Login
|
||||
summary: Summary
|
||||
|
|
|
|||
|
|
@ -90,6 +90,9 @@ globals:
|
|||
salesPerson: Comercial
|
||||
send: Enviar
|
||||
code: Código
|
||||
since: Desde
|
||||
from: Desde
|
||||
to: Hasta
|
||||
pageTitles:
|
||||
logIn: Inicio de sesión
|
||||
summary: Resumen
|
||||
|
|
@ -697,8 +700,6 @@ invoiceOut:
|
|||
percentageText: '{getPercentage}% {getAddressNumber} de {getNAddresses}'
|
||||
pdfsNumberText: '{nPdfs} de {totalPdfs} PDFs'
|
||||
negativeBases:
|
||||
from: Desde
|
||||
to: Hasta
|
||||
company: Empresa
|
||||
country: País
|
||||
clientId: Id cliente
|
||||
|
|
@ -1240,8 +1241,6 @@ components:
|
|||
# LatestBuysFilter
|
||||
salesPersonFk: Comprador
|
||||
supplierFk: Proveedor
|
||||
from: Desde
|
||||
to: Hasta
|
||||
active: Activo
|
||||
visible: Visible
|
||||
floramondo: Floramondo
|
||||
|
|
|
|||
|
|
@ -1,146 +1,107 @@
|
|||
<script setup>
|
||||
import axios from 'axios';
|
||||
import { ref, computed } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
|
||||
import { useRoute } from 'vue-router';
|
||||
import { toCurrency, toDate } from 'src/filters';
|
||||
|
||||
import FetchData from 'components/FetchData.vue';
|
||||
import VnTable from 'components/VnTable/VnTable.vue';
|
||||
|
||||
const { t } = useI18n();
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const rows = ref([]);
|
||||
|
||||
const filter = {
|
||||
where: { clientFk: route.params.id },
|
||||
order: ['started DESC'],
|
||||
limit: 20,
|
||||
const tableRef = ref();
|
||||
const filter = computed(() => {
|
||||
return {
|
||||
where: { clientFk: route.params.id },
|
||||
};
|
||||
});
|
||||
const componentColumn = (type) => {
|
||||
return {
|
||||
columnFilter: {
|
||||
component: type,
|
||||
},
|
||||
columnCreate: {
|
||||
component: type,
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
const tableColumnComponents = {
|
||||
since: {
|
||||
component: 'span',
|
||||
props: () => {},
|
||||
event: () => {},
|
||||
},
|
||||
to: {
|
||||
component: 'span',
|
||||
props: () => {},
|
||||
event: () => {},
|
||||
},
|
||||
amount: {
|
||||
component: 'span',
|
||||
props: () => {},
|
||||
event: () => {},
|
||||
},
|
||||
period: {
|
||||
component: 'span',
|
||||
props: () => {},
|
||||
event: () => {},
|
||||
},
|
||||
};
|
||||
|
||||
const columns = computed(() => [
|
||||
{
|
||||
align: 'left',
|
||||
field: 'started',
|
||||
label: t('Since'),
|
||||
name: 'since',
|
||||
format: (value) => toDate(value),
|
||||
label: t('globals.since'),
|
||||
name: 'started',
|
||||
format: ({ started }) => toDate(started),
|
||||
create: true,
|
||||
...componentColumn('date'),
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
field: 'finished',
|
||||
label: t('To'),
|
||||
name: 'to',
|
||||
format: (value) => toDate(value),
|
||||
name: 'finished',
|
||||
label: t('globals.to'),
|
||||
format: ({ finished }) => toDate(finished),
|
||||
create: true,
|
||||
...componentColumn('date'),
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
field: 'amount',
|
||||
label: t('Amount'),
|
||||
name: 'amount',
|
||||
format: (value) => toCurrency(value),
|
||||
label: t('globals.amount'),
|
||||
format: ({ amount }) => toCurrency(amount),
|
||||
create: true,
|
||||
...componentColumn('number'),
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
field: 'period',
|
||||
label: t('Period'),
|
||||
name: 'period',
|
||||
label: t('Period'),
|
||||
create: true,
|
||||
...componentColumn('number'),
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
name: 'tableActions',
|
||||
actions: [
|
||||
{
|
||||
title: t('Finish that recovery period'),
|
||||
icon: 'lock',
|
||||
show: (row) => !row.finished,
|
||||
action: ({ id }) => setFinished(id),
|
||||
isPrimary: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
]);
|
||||
|
||||
const toCustomerRecoverieCreate = () => {
|
||||
router.push({ name: 'CustomerRecoverieCreate' });
|
||||
};
|
||||
function setFinished(id) {
|
||||
axios.patch(`Recoveries/${id}`, { finished: Date.vnNow() });
|
||||
tableRef.value.reload();
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FetchData
|
||||
:filter="filter"
|
||||
@on-fetch="(data) => (rows = data)"
|
||||
auto-load
|
||||
<VnTable
|
||||
ref="tableRef"
|
||||
data-key="Recoveries"
|
||||
url="Recoveries"
|
||||
search-url="recoveries"
|
||||
:filter="filter"
|
||||
order="started DESC"
|
||||
:columns="columns"
|
||||
:use-model="true"
|
||||
:right-search="false"
|
||||
:create="{
|
||||
urlCreate: 'Recoveries',
|
||||
title: 'New recovery',
|
||||
onDataSaved: () => tableRef.reload(),
|
||||
formInitialData: { clientFk: route.params.id, started: Date.vnNew() },
|
||||
}"
|
||||
auto-load
|
||||
/>
|
||||
|
||||
<div class="full-width flex justify-center">
|
||||
<QPage class="card-width q-pa-lg">
|
||||
<QTable
|
||||
:columns="columns"
|
||||
:no-data-label="t('globals.noResults')"
|
||||
:pagination="{ rowsPerPage: 12 }"
|
||||
:rows="rows"
|
||||
class="full-width q-mt-md"
|
||||
row-key="id"
|
||||
>
|
||||
<template #body-cell="props">
|
||||
<QTd :props="props">
|
||||
<QTr :props="props" class="cursor-pointer">
|
||||
<component
|
||||
:is="tableColumnComponents[props.col.name].component"
|
||||
class="col-content"
|
||||
v-bind="
|
||||
tableColumnComponents[props.col.name].props(props)
|
||||
"
|
||||
@click="
|
||||
tableColumnComponents[props.col.name].event(props)
|
||||
"
|
||||
>
|
||||
{{ props.value }}
|
||||
</component>
|
||||
</QTr>
|
||||
</QTd>
|
||||
</template>
|
||||
</QTable>
|
||||
</QPage>
|
||||
</div>
|
||||
|
||||
<QPageSticky :offset="[18, 18]">
|
||||
<QBtn @click.stop="toCustomerRecoverieCreate()" color="primary" fab icon="add" />
|
||||
<QTooltip>
|
||||
{{ t('New recoverie') }}
|
||||
</QTooltip>
|
||||
</QPageSticky>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.consignees-card {
|
||||
border: 2px solid var(--vn-accent-color);
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.label-color {
|
||||
color: var(--vn-label-color);
|
||||
}
|
||||
</style>
|
||||
|
||||
<i18n>
|
||||
es:
|
||||
Since: Desde
|
||||
To: Hasta
|
||||
Amount: Importe
|
||||
Period: Periodo
|
||||
New recoverie: Nuevo recobro
|
||||
New recovery: Nuevo recobro
|
||||
Finish that recovery period: Terminar recobro
|
||||
</i18n>
|
||||
|
|
|
|||
|
|
@ -226,31 +226,13 @@ export default {
|
|||
},
|
||||
{
|
||||
path: 'recoveries',
|
||||
name: 'RecoveriesCard',
|
||||
redirect: { name: 'CustomerRecoveries' },
|
||||
children: [
|
||||
{
|
||||
path: '',
|
||||
name: 'CustomerRecoveries',
|
||||
meta: {
|
||||
title: 'recoveries',
|
||||
icon: 'vn:recovery',
|
||||
},
|
||||
component: () =>
|
||||
import('src/pages/Customer/Card/CustomerRecoveries.vue'),
|
||||
},
|
||||
{
|
||||
path: 'create',
|
||||
name: 'CustomerRecoverieCreate',
|
||||
meta: {
|
||||
title: 'recoverie-create',
|
||||
},
|
||||
component: () =>
|
||||
import(
|
||||
'src/pages/Customer/components/CustomerRecoverieCreate.vue'
|
||||
),
|
||||
},
|
||||
],
|
||||
name: 'CustomerRecoveries',
|
||||
meta: {
|
||||
title: 'recoveries',
|
||||
icon: 'vn:recovery',
|
||||
},
|
||||
component: () =>
|
||||
import('src/pages/Customer/Card/CustomerRecoveries.vue'),
|
||||
},
|
||||
{
|
||||
path: 'web-access',
|
||||
|
|
|
|||
Loading…
Reference in New Issue