forked from verdnatura/salix-front
feat: salesTicketTable
This commit is contained in:
parent
44294bb46a
commit
85f94fa1f4
|
|
@ -6,7 +6,6 @@ import { useRouter } from 'vue-router';
|
|||
import FetchData from 'components/FetchData.vue';
|
||||
import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
|
||||
import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
|
||||
import VnPaginate from 'components/ui/VnPaginate.vue';
|
||||
import TableVisibleColumns from 'src/components/common/TableVisibleColumns.vue';
|
||||
import TicketDescriptorProxy from 'src/pages/Ticket/Card/TicketDescriptorProxy.vue';
|
||||
import InvoiceOutDescriptorProxy from 'src/pages/InvoiceOut/Card/InvoiceOutDescriptorProxy.vue';
|
||||
|
|
@ -15,6 +14,7 @@ import TicketSummary from 'src/pages/Ticket/Card/TicketSummary.vue';
|
|||
import VnInput from 'src/components/common/VnInput.vue';
|
||||
import VnSelect from 'src/components/common/VnSelect.vue';
|
||||
import VnInputDate from 'src/components/common/VnInputDate.vue';
|
||||
import VnTable from 'components/VnTable/VnTable.vue';
|
||||
|
||||
import { useSummaryDialog } from 'src/composables/useSummaryDialog';
|
||||
import { toDateFormat, toTimeFormat } from 'src/filters/date.js';
|
||||
|
|
@ -103,7 +103,10 @@ const columns = computed(() => [
|
|||
name: 'problems',
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
columnFilter: null,
|
||||
columnFilter: false,
|
||||
attrs: {
|
||||
style: 'max-width: 50px',
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t('salesTicketsTable.identifier'),
|
||||
|
|
@ -112,10 +115,8 @@ const columns = computed(() => [
|
|||
align: 'left',
|
||||
sortable: true,
|
||||
columnFilter: {
|
||||
component: VnInput,
|
||||
type: 'text',
|
||||
filterValue: null,
|
||||
event: getInputEvents,
|
||||
component: 'input',
|
||||
|
||||
attrs: {
|
||||
dense: true,
|
||||
},
|
||||
|
|
@ -128,10 +129,7 @@ const columns = computed(() => [
|
|||
field: 'nickname',
|
||||
sortable: true,
|
||||
columnFilter: {
|
||||
component: VnInput,
|
||||
type: 'text',
|
||||
filterValue: null,
|
||||
event: getInputEvents,
|
||||
component: 'input',
|
||||
attrs: {
|
||||
dense: true,
|
||||
},
|
||||
|
|
@ -144,7 +142,7 @@ const columns = computed(() => [
|
|||
align: 'left',
|
||||
sortable: true,
|
||||
columnFilter: {
|
||||
component: VnSelect,
|
||||
component: 'select',
|
||||
filterParamKey: 'salesPersonFk',
|
||||
type: 'select',
|
||||
filterValue: null,
|
||||
|
|
@ -163,9 +161,9 @@ const columns = computed(() => [
|
|||
align: 'left',
|
||||
sortable: true,
|
||||
columnFilter: {
|
||||
component: VnInputDate,
|
||||
component: 'date',
|
||||
filterParamKey: 'shippedDate',
|
||||
type: 'date',
|
||||
|
||||
filterValue: null,
|
||||
event: getInputEvents,
|
||||
attrs: {
|
||||
|
|
@ -188,10 +186,7 @@ const columns = computed(() => [
|
|||
align: 'left',
|
||||
sortable: true,
|
||||
columnFilter: {
|
||||
component: VnInput,
|
||||
type: 'text',
|
||||
filterValue: null,
|
||||
event: getInputEvents,
|
||||
component: 'input',
|
||||
attrs: {
|
||||
dense: true,
|
||||
},
|
||||
|
|
@ -213,7 +208,7 @@ const columns = computed(() => [
|
|||
align: 'left',
|
||||
sortable: true,
|
||||
columnFilter: {
|
||||
component: VnSelect,
|
||||
component: 'select',
|
||||
filterParamKey: 'provinceFk',
|
||||
type: 'select',
|
||||
filterValue: null,
|
||||
|
|
@ -232,7 +227,7 @@ const columns = computed(() => [
|
|||
align: 'left',
|
||||
sortable: true,
|
||||
columnFilter: {
|
||||
component: VnSelect,
|
||||
component: 'select',
|
||||
filterParamKey: 'stateFk',
|
||||
type: 'select',
|
||||
filterValue: null,
|
||||
|
|
@ -252,7 +247,7 @@ const columns = computed(() => [
|
|||
align: 'left',
|
||||
sortable: true,
|
||||
columnFilter: {
|
||||
component: VnInput,
|
||||
component: 'input',
|
||||
type: 'text',
|
||||
filterValue: null,
|
||||
event: getInputEvents,
|
||||
|
|
@ -267,7 +262,7 @@ const columns = computed(() => [
|
|||
align: 'left',
|
||||
sortable: true,
|
||||
columnFilter: {
|
||||
component: VnSelect,
|
||||
component: 'select',
|
||||
filterParamKey: 'zoneFk',
|
||||
type: 'select',
|
||||
filterValue: null,
|
||||
|
|
@ -287,7 +282,7 @@ const columns = computed(() => [
|
|||
align: 'left',
|
||||
sortable: true,
|
||||
columnFilter: {
|
||||
component: VnInput,
|
||||
component: 'input',
|
||||
type: 'text',
|
||||
filterValue: null,
|
||||
event: getInputEvents,
|
||||
|
|
@ -297,9 +292,33 @@ const columns = computed(() => [
|
|||
},
|
||||
},
|
||||
{
|
||||
name: 'rowActions',
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
align: 'right',
|
||||
name: 'tableActions',
|
||||
label: '',
|
||||
actions: [
|
||||
{
|
||||
title: t('salesTicketsTable.goToLines'),
|
||||
icon: 'vn:lines',
|
||||
color: 'priamry',
|
||||
action: (row) => redirectToSales(row.id),
|
||||
isPrimary: true,
|
||||
attrs: {
|
||||
flat: true,
|
||||
dense: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
title: t('salesTicketsTable.preview'),
|
||||
icon: 'preview',
|
||||
color: 'priamry',
|
||||
action: (row) => viewSummary(row.id, TicketSummary),
|
||||
isPrimary: true,
|
||||
attrs: {
|
||||
flat: true,
|
||||
dense: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
]);
|
||||
|
||||
|
|
@ -357,12 +376,12 @@ const redirectToSales = (id) => {
|
|||
window.open(url, '_blank');
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
const filteredColumns = columns.value.filter((col) => col.name !== 'rowActions');
|
||||
allColumnNames.value = filteredColumns.map((col) => col.name);
|
||||
params = fetchParams();
|
||||
await paginateRef.value.addFilter(null, params);
|
||||
});
|
||||
// onMounted(async () => {
|
||||
// const filteredColumns = columns.value.filter((col) => col.name !== 'rowActions');
|
||||
// allColumnNames.value = filteredColumns.map((col) => col.name);
|
||||
// params = fetchParams();
|
||||
// await paginateRef.value.addFilter(null, params);
|
||||
// });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -403,7 +422,8 @@ onMounted(async () => {
|
|||
auto-load
|
||||
@on-fetch="(data) => (zonesOptions = data)"
|
||||
/>
|
||||
<VnPaginate
|
||||
<VnTable
|
||||
class="column flex-center fit"
|
||||
ref="paginateRef"
|
||||
data-key="SalesMonitorTickets"
|
||||
url="SalesMonitors/salesFilter"
|
||||
|
|
@ -412,222 +432,153 @@ onMounted(async () => {
|
|||
:expr-builder="exprBuilder"
|
||||
:user-params="params"
|
||||
:offset="50"
|
||||
:columns="columns"
|
||||
:visible-columns="visibleColumns"
|
||||
:right-search="false"
|
||||
default-mode="table"
|
||||
auto-load
|
||||
@row-click="(_, row) => redirectToTicketSummary(row.id)"
|
||||
>
|
||||
<template #body="{ rows }">
|
||||
<QTable
|
||||
:rows="rows"
|
||||
:columns="columns"
|
||||
row-key="id"
|
||||
:pagination="{ rowsPerPage: 0 }"
|
||||
:visible-columns="visibleColumns"
|
||||
:no-data-label="t('globals.noResults')"
|
||||
@row-click="(_, row) => redirectToTicketSummary(row.id)"
|
||||
>
|
||||
<template #top>
|
||||
<TableVisibleColumns
|
||||
:all-columns="allColumnNames"
|
||||
table-code="ticketsMonitor"
|
||||
labels-traductions-path="salesTicketsTable"
|
||||
@on-config-saved="visibleColumns = [...$event, 'rowActions']"
|
||||
/>
|
||||
<QCheckbox
|
||||
v-model="autoRefresh"
|
||||
:label="t('salesTicketsTable.autoRefresh')"
|
||||
@update:model-value="autoRefreshHandler"
|
||||
/>
|
||||
</template>
|
||||
<template #top-row="{ cols }">
|
||||
<QTr>
|
||||
<QTd
|
||||
v-for="(col, index) in cols"
|
||||
:key="index"
|
||||
style="max-width: 100px"
|
||||
>
|
||||
<component
|
||||
:is="col.columnFilter.component"
|
||||
v-if="col.columnFilter"
|
||||
v-model="col.columnFilter.filterValue"
|
||||
v-bind="col.columnFilter.attrs"
|
||||
v-on="col.columnFilter.event(col)"
|
||||
dense
|
||||
style="padding-bottom: 0"
|
||||
/>
|
||||
</QTd>
|
||||
</QTr>
|
||||
</template>
|
||||
<template #body-cell-problems="{ row }">
|
||||
<QTd class="q-gutter-x-sm">
|
||||
<QIcon
|
||||
v-if="row.isTaxDataChecked === 0"
|
||||
name="vn:no036"
|
||||
color="primary"
|
||||
size="xs"
|
||||
>
|
||||
<QTooltip>{{
|
||||
t('salesTicketsTable.noVerifiedData')
|
||||
}}</QTooltip>
|
||||
</QIcon>
|
||||
<QIcon
|
||||
v-if="row.hasTicketRequest"
|
||||
name="vn:buyrequest"
|
||||
color="primary"
|
||||
size="xs"
|
||||
>
|
||||
<QTooltip>{{
|
||||
t('salesTicketsTable.purchaseRequest')
|
||||
}}</QTooltip>
|
||||
</QIcon>
|
||||
<QIcon
|
||||
v-if="row.itemShortage"
|
||||
name="vn:unavailable"
|
||||
color="primary"
|
||||
size="xs"
|
||||
>
|
||||
<QTooltip>{{ t('salesTicketsTable.notVisible') }}</QTooltip>
|
||||
</QIcon>
|
||||
<QIcon
|
||||
v-if="row.isFreezed"
|
||||
name="vn:frozen"
|
||||
color="primary"
|
||||
size="xs"
|
||||
>
|
||||
<QTooltip>{{ t('salesTicketsTable.clientFrozen') }}</QTooltip>
|
||||
</QIcon>
|
||||
<QIcon
|
||||
v-if="row.risk"
|
||||
name="vn:risk"
|
||||
:color="row.hasHighRisk ? 'negative' : 'primary'"
|
||||
size="xs"
|
||||
>
|
||||
<QTooltip
|
||||
>{{ t('salesTicketsTable.risk') }}:
|
||||
{{ row.risk }}</QTooltip
|
||||
>
|
||||
</QIcon>
|
||||
<QIcon
|
||||
v-if="row.hasComponentLack"
|
||||
name="vn:components"
|
||||
color="primary"
|
||||
size="xs"
|
||||
>
|
||||
<QTooltip>{{
|
||||
t('salesTicketsTable.componentLack')
|
||||
}}</QTooltip>
|
||||
</QIcon>
|
||||
<QIcon
|
||||
v-if="row.isTooLittle"
|
||||
name="vn:isTooLittle"
|
||||
color="primary"
|
||||
size="xs"
|
||||
>
|
||||
<QTooltip>{{ t('salesTicketsTable.tooLittle') }}</QTooltip>
|
||||
</QIcon>
|
||||
</QTd>
|
||||
</template>
|
||||
<template #body-cell-identifier="{ row }">
|
||||
<QTd>
|
||||
<span class="link" @click.stop.prevent>
|
||||
{{ row.id }}
|
||||
<TicketDescriptorProxy :id="row.id" />
|
||||
</span>
|
||||
</QTd>
|
||||
</template>
|
||||
<template #body-cell-client="{ row }">
|
||||
<QTd @click.stop.prevent>
|
||||
<span class="link">{{ row.nickname }}</span>
|
||||
<CustomerDescriptorProxy :id="row.clientFk" />
|
||||
</QTd>
|
||||
</template>
|
||||
<template #body-cell-salesPerson="{ row }">
|
||||
<QTd @click.stop.prevent>
|
||||
<span class="link">{{ row.userName }}</span>
|
||||
<WorkerDescriptorProxy :id="row.salesPersonFk" />
|
||||
</QTd>
|
||||
</template>
|
||||
<template #body-cell-date="{ row }">
|
||||
<QTd>
|
||||
<QBadge
|
||||
v-bind="getBadgeAttrs(row.shippedDate)"
|
||||
class="q-pa-sm"
|
||||
style="font-size: 14px"
|
||||
>
|
||||
{{ formatShippedDate(row.shippedDate) }}
|
||||
</QBadge>
|
||||
</QTd>
|
||||
</template>
|
||||
<template #body-cell-state="{ row }">
|
||||
<QTd @click.stop.prevent>
|
||||
<div v-if="row.refFk">
|
||||
<span class="link">{{ row.refFk }}</span>
|
||||
<InvoiceOutDescriptorProxy :id="row.invoiceOutId" />
|
||||
</div>
|
||||
<QBadge
|
||||
v-else
|
||||
:color="stateColors[row.classColor] || 'transparent'"
|
||||
:text-color="stateColors[row.classColor] ? 'black' : 'white'"
|
||||
class="q-pa-sm"
|
||||
style="font-size: 14px"
|
||||
>
|
||||
{{ row.state }}
|
||||
</QBadge>
|
||||
</QTd>
|
||||
</template>
|
||||
<template #body-cell-isFragile="{ row }">
|
||||
<QTd>
|
||||
<QIcon
|
||||
v-if="row.isFragile"
|
||||
name="local_bar"
|
||||
color="primary"
|
||||
size="sm"
|
||||
>
|
||||
<QTooltip>{{ t('salesTicketsTable.isFragile') }}</QTooltip>
|
||||
</QIcon>
|
||||
</QTd>
|
||||
</template>
|
||||
<template #body-cell-zone="{ row }">
|
||||
<QTd @click.stop.prevent>
|
||||
<span class="link">{{ row.zoneName }}</span>
|
||||
<ZoneDescriptorProxy :id="row.zoneFk" />
|
||||
</QTd>
|
||||
</template>
|
||||
<template #body-cell-total="{ row }">
|
||||
<QTd>
|
||||
<QBadge
|
||||
:color="totalPriceColor(row) || 'transparent'"
|
||||
:text-color="totalPriceColor(row) ? 'black' : 'white'"
|
||||
class="q-pa-sm"
|
||||
style="font-size: 14px"
|
||||
>
|
||||
{{ toCurrency(row.totalWithVat) }}
|
||||
</QBadge>
|
||||
</QTd>
|
||||
</template>
|
||||
<template #body-cell-rowActions="{ row }">
|
||||
<QTd @click.stop.prevent>
|
||||
<QBtn
|
||||
icon="vn:lines"
|
||||
color="primary"
|
||||
size="md"
|
||||
class="q-mr-sm"
|
||||
flat
|
||||
dense
|
||||
@click="redirectToSales(row.id)"
|
||||
>
|
||||
<QTooltip>{{ t('salesTicketsTable.goToLines') }}</QTooltip>
|
||||
</QBtn>
|
||||
<QBtn
|
||||
icon="preview"
|
||||
color="primary"
|
||||
size="md"
|
||||
dense
|
||||
flat
|
||||
@click="viewSummary(row.id, TicketSummary)"
|
||||
>
|
||||
<QTooltip>{{ t('salesTicketsTable.preview') }}</QTooltip>
|
||||
</QBtn>
|
||||
</QTd>
|
||||
</template>
|
||||
</QTable>
|
||||
<template #top-left>
|
||||
<TableVisibleColumns
|
||||
:all-columns="allColumnNames"
|
||||
table-code="ticketsMonitor"
|
||||
labels-traductions-path="salesTicketsTable"
|
||||
@on-config-saved="visibleColumns = [...$event, 'rowActions']"
|
||||
/>
|
||||
<QCheckbox
|
||||
v-model="autoRefresh"
|
||||
:label="t('salesTicketsTable.autoRefresh')"
|
||||
@update:model-value="autoRefreshHandler"
|
||||
/>
|
||||
</template>
|
||||
</VnPaginate>
|
||||
<template #column-problems="{ row }">
|
||||
<QTd class="q-gutter-x-sm" style="max-width: 50px">
|
||||
<QIcon
|
||||
v-if="row.isTaxDataChecked === 0"
|
||||
name="vn:no036"
|
||||
color="primary"
|
||||
size="xs"
|
||||
>
|
||||
<QTooltip>{{ t('salesTicketsTable.noVerifiedData') }}</QTooltip>
|
||||
</QIcon>
|
||||
<QIcon
|
||||
v-if="row.hasTicketRequest"
|
||||
name="vn:buyrequest"
|
||||
color="primary"
|
||||
size="xs"
|
||||
>
|
||||
<QTooltip>{{ t('salesTicketsTable.purchaseRequest') }}</QTooltip>
|
||||
</QIcon>
|
||||
<QIcon
|
||||
v-if="row.itemShortage"
|
||||
name="vn:unavailable"
|
||||
color="primary"
|
||||
size="xs"
|
||||
>
|
||||
<QTooltip>{{ t('salesTicketsTable.notVisible') }}</QTooltip>
|
||||
</QIcon>
|
||||
<QIcon v-if="row.isFreezed" name="vn:frozen" color="primary" size="xs">
|
||||
<QTooltip>{{ t('salesTicketsTable.clientFrozen') }}</QTooltip>
|
||||
</QIcon>
|
||||
<QIcon
|
||||
v-if="row.risk"
|
||||
name="vn:risk"
|
||||
:color="row.hasHighRisk ? 'negative' : 'primary'"
|
||||
size="xs"
|
||||
>
|
||||
<QTooltip>{{ t('salesTicketsTable.risk') }}: {{ row.risk }}</QTooltip>
|
||||
</QIcon>
|
||||
<QIcon
|
||||
v-if="row.hasComponentLack"
|
||||
name="vn:components"
|
||||
color="primary"
|
||||
size="xs"
|
||||
>
|
||||
<QTooltip>{{ t('salesTicketsTable.componentLack') }}</QTooltip>
|
||||
</QIcon>
|
||||
<QIcon
|
||||
v-if="row.isTooLittle"
|
||||
name="vn:isTooLittle"
|
||||
color="primary"
|
||||
size="xs"
|
||||
>
|
||||
<QTooltip>{{ t('salesTicketsTable.tooLittle') }}</QTooltip>
|
||||
</QIcon>
|
||||
</QTd>
|
||||
</template>
|
||||
<template #column-identifier="{ row }">
|
||||
<QTd>
|
||||
<span class="link" @click.stop.prevent>
|
||||
{{ row.id }}
|
||||
<TicketDescriptorProxy :id="row.id" />
|
||||
</span>
|
||||
</QTd>
|
||||
</template>
|
||||
<template #column-client="{ row }">
|
||||
<QTd @click.stop.prevent>
|
||||
<span class="link">{{ row.nickname }}</span>
|
||||
<CustomerDescriptorProxy :id="row.clientFk" />
|
||||
</QTd>
|
||||
</template>
|
||||
<template #column-salesPerson="{ row }">
|
||||
<QTd @click.stop.prevent>
|
||||
<span class="link">{{ row.userName }}</span>
|
||||
<WorkerDescriptorProxy :id="row.salesPersonFk" />
|
||||
</QTd>
|
||||
</template>
|
||||
<template #column-date="{ row }">
|
||||
<QTd>
|
||||
<QBadge
|
||||
v-bind="getBadgeAttrs(row.shippedDate)"
|
||||
class="q-pa-sm"
|
||||
style="font-size: 14px"
|
||||
>
|
||||
{{ formatShippedDate(row.shippedDate) }}
|
||||
</QBadge>
|
||||
</QTd>
|
||||
</template>
|
||||
<template #column-state="{ row }">
|
||||
<QTd @click.stop.prevent>
|
||||
<div v-if="row.refFk">
|
||||
<span class="link">{{ row.refFk }}</span>
|
||||
<InvoiceOutDescriptorProxy :id="row.invoiceOutId" />
|
||||
</div>
|
||||
<QBadge
|
||||
v-else
|
||||
:color="stateColors[row.classColor] || 'transparent'"
|
||||
:text-color="stateColors[row.classColor] ? 'black' : 'white'"
|
||||
class="q-pa-sm"
|
||||
style="font-size: 14px"
|
||||
>
|
||||
{{ row.state }}
|
||||
</QBadge>
|
||||
</QTd>
|
||||
</template>
|
||||
<template #column-isFragile="{ row }">
|
||||
<QTd>
|
||||
<QIcon v-if="row.isFragile" name="local_bar" color="primary" size="sm">
|
||||
<QTooltip>{{ t('salesTicketsTable.isFragile') }}</QTooltip>
|
||||
</QIcon>
|
||||
</QTd>
|
||||
</template>
|
||||
<template #column-zone="{ row }">
|
||||
<QTd @click.stop.prevent>
|
||||
<span class="link">{{ row.zoneName }}</span>
|
||||
<ZoneDescriptorProxy :id="row.zoneFk" />
|
||||
</QTd>
|
||||
</template>
|
||||
<template #column-total="{ row }">
|
||||
<QTd>
|
||||
<QBadge
|
||||
:color="totalPriceColor(row) || 'transparent'"
|
||||
:text-color="totalPriceColor(row) ? 'black' : 'white'"
|
||||
class="q-pa-sm"
|
||||
style="font-size: 14px"
|
||||
>
|
||||
{{ toCurrency(row.totalWithVat) }}
|
||||
</QBadge>
|
||||
</QTd>
|
||||
</template>
|
||||
</VnTable>
|
||||
</template>
|
||||
|
|
|
|||
Loading…
Reference in New Issue