forked from verdnatura/salix-front
feat: VnTable SalesTicketTable
This commit is contained in:
parent
167ba2aed0
commit
5ad317df65
|
@ -104,8 +104,9 @@ const columns = computed(() => [
|
||||||
align: 'left',
|
align: 'left',
|
||||||
sortable: true,
|
sortable: true,
|
||||||
columnFilter: false,
|
columnFilter: false,
|
||||||
|
style: { 'max-width': '75px' },
|
||||||
attrs: {
|
attrs: {
|
||||||
style: 'max-width: 50px',
|
dense: true,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
@ -114,9 +115,11 @@ const columns = computed(() => [
|
||||||
field: 'id',
|
field: 'id',
|
||||||
align: 'left',
|
align: 'left',
|
||||||
sortable: true,
|
sortable: true,
|
||||||
|
style: { 'max-width': '75px' },
|
||||||
|
|
||||||
columnFilter: {
|
columnFilter: {
|
||||||
component: 'input',
|
component: 'input',
|
||||||
|
name: 'id',
|
||||||
attrs: {
|
attrs: {
|
||||||
dense: true,
|
dense: true,
|
||||||
},
|
},
|
||||||
|
@ -130,6 +133,7 @@ const columns = computed(() => [
|
||||||
sortable: true,
|
sortable: true,
|
||||||
columnFilter: {
|
columnFilter: {
|
||||||
component: 'input',
|
component: 'input',
|
||||||
|
name: 'nickname',
|
||||||
attrs: {
|
attrs: {
|
||||||
dense: true,
|
dense: true,
|
||||||
},
|
},
|
||||||
|
@ -139,14 +143,12 @@ const columns = computed(() => [
|
||||||
label: t('salesTicketsTable.salesPerson'),
|
label: t('salesTicketsTable.salesPerson'),
|
||||||
name: 'salesPerson',
|
name: 'salesPerson',
|
||||||
field: 'userName',
|
field: 'userName',
|
||||||
|
style: { 'max-width': '125px' },
|
||||||
align: 'left',
|
align: 'left',
|
||||||
sortable: true,
|
sortable: true,
|
||||||
columnFilter: {
|
columnFilter: {
|
||||||
component: 'select',
|
component: 'select',
|
||||||
filterParamKey: 'salesPersonFk',
|
name: 'salesPersonFk',
|
||||||
type: 'select',
|
|
||||||
filterValue: null,
|
|
||||||
event: getInputEvents,
|
|
||||||
attrs: {
|
attrs: {
|
||||||
options: workersActiveOptions.value,
|
options: workersActiveOptions.value,
|
||||||
'option-value': 'id',
|
'option-value': 'id',
|
||||||
|
@ -158,14 +160,12 @@ const columns = computed(() => [
|
||||||
{
|
{
|
||||||
label: t('salesTicketsTable.date'),
|
label: t('salesTicketsTable.date'),
|
||||||
name: 'date',
|
name: 'date',
|
||||||
|
style: { 'max-width': '100px' },
|
||||||
align: 'left',
|
align: 'left',
|
||||||
sortable: true,
|
sortable: true,
|
||||||
columnFilter: {
|
columnFilter: {
|
||||||
component: 'date',
|
component: 'date',
|
||||||
filterParamKey: 'shippedDate',
|
name: 'shippedDate',
|
||||||
|
|
||||||
filterValue: null,
|
|
||||||
event: getInputEvents,
|
|
||||||
attrs: {
|
attrs: {
|
||||||
dense: true,
|
dense: true,
|
||||||
},
|
},
|
||||||
|
@ -175,18 +175,28 @@ const columns = computed(() => [
|
||||||
label: t('salesTicketsTable.theoretical'),
|
label: t('salesTicketsTable.theoretical'),
|
||||||
name: 'theoretical',
|
name: 'theoretical',
|
||||||
field: 'zoneLanding',
|
field: 'zoneLanding',
|
||||||
|
style: { 'max-width': '75px' },
|
||||||
align: 'left',
|
align: 'left',
|
||||||
sortable: true,
|
sortable: true,
|
||||||
format: (val) => toTimeFormat(val),
|
format: (val) => toTimeFormat(val),
|
||||||
|
columnFilter: {
|
||||||
|
component: 'input',
|
||||||
|
name: 'theoreticalHour',
|
||||||
|
attrs: {
|
||||||
|
dense: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: t('salesTicketsTable.practical'),
|
label: t('salesTicketsTable.practical'),
|
||||||
name: 'practical',
|
name: 'practical',
|
||||||
field: 'practicalHour',
|
field: 'practicalHour',
|
||||||
align: 'left',
|
align: 'left',
|
||||||
|
style: { 'max-width': '75px' },
|
||||||
sortable: true,
|
sortable: true,
|
||||||
columnFilter: {
|
columnFilter: {
|
||||||
component: 'input',
|
component: 'input',
|
||||||
|
name: 'practicalHour',
|
||||||
attrs: {
|
attrs: {
|
||||||
dense: true,
|
dense: true,
|
||||||
},
|
},
|
||||||
|
@ -197,8 +207,16 @@ const columns = computed(() => [
|
||||||
name: 'preparation',
|
name: 'preparation',
|
||||||
field: 'shipped',
|
field: 'shipped',
|
||||||
align: 'left',
|
align: 'left',
|
||||||
|
style: { 'max-width': '75px' },
|
||||||
sortable: true,
|
sortable: true,
|
||||||
format: (val) => toTimeFormat(val),
|
format: (val) => toTimeFormat(val),
|
||||||
|
columnFilter: {
|
||||||
|
component: 'input',
|
||||||
|
name: 'shippedDate',
|
||||||
|
attrs: {
|
||||||
|
dense: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
|
@ -206,13 +224,11 @@ const columns = computed(() => [
|
||||||
name: 'province',
|
name: 'province',
|
||||||
field: 'province',
|
field: 'province',
|
||||||
align: 'left',
|
align: 'left',
|
||||||
|
style: { 'max-width': '100px' },
|
||||||
sortable: true,
|
sortable: true,
|
||||||
columnFilter: {
|
columnFilter: {
|
||||||
component: 'select',
|
component: 'select',
|
||||||
filterParamKey: 'provinceFk',
|
name: 'provinceFk',
|
||||||
type: 'select',
|
|
||||||
filterValue: null,
|
|
||||||
event: getInputEvents,
|
|
||||||
attrs: {
|
attrs: {
|
||||||
options: provincesOptions.value,
|
options: provincesOptions.value,
|
||||||
'option-value': 'id',
|
'option-value': 'id',
|
||||||
|
@ -225,13 +241,11 @@ const columns = computed(() => [
|
||||||
label: t('salesTicketsTable.state'),
|
label: t('salesTicketsTable.state'),
|
||||||
name: 'state',
|
name: 'state',
|
||||||
align: 'left',
|
align: 'left',
|
||||||
|
style: { 'max-width': '100px' },
|
||||||
sortable: true,
|
sortable: true,
|
||||||
columnFilter: {
|
columnFilter: {
|
||||||
component: 'select',
|
component: 'select',
|
||||||
filterParamKey: 'stateFk',
|
name: 'stateFk',
|
||||||
type: 'select',
|
|
||||||
filterValue: null,
|
|
||||||
event: getInputEvents,
|
|
||||||
attrs: {
|
attrs: {
|
||||||
options: statesOptions.value,
|
options: statesOptions.value,
|
||||||
'option-value': 'id',
|
'option-value': 'id',
|
||||||
|
@ -244,16 +258,17 @@ const columns = computed(() => [
|
||||||
label: t('salesTicketsTable.isFragile'),
|
label: t('salesTicketsTable.isFragile'),
|
||||||
name: 'isFragile',
|
name: 'isFragile',
|
||||||
field: 'isFragile',
|
field: 'isFragile',
|
||||||
|
style: { 'max-width': '75px' },
|
||||||
align: 'left',
|
align: 'left',
|
||||||
sortable: true,
|
sortable: true,
|
||||||
columnFilter: {
|
columnFilter: {
|
||||||
component: 'input',
|
inWhere: true,
|
||||||
type: 'text',
|
|
||||||
filterValue: null,
|
|
||||||
event: getInputEvents,
|
|
||||||
attrs: {
|
|
||||||
dense: true,
|
|
||||||
},
|
},
|
||||||
|
attrs: {
|
||||||
|
'checked-icon': 'local_bar',
|
||||||
|
'unchecked-icon': 'local_bar',
|
||||||
|
'false-value': 0,
|
||||||
|
'true-value': 1,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
@ -263,10 +278,7 @@ const columns = computed(() => [
|
||||||
sortable: true,
|
sortable: true,
|
||||||
columnFilter: {
|
columnFilter: {
|
||||||
component: 'select',
|
component: 'select',
|
||||||
filterParamKey: 'zoneFk',
|
name: 'zoneFk',
|
||||||
type: 'select',
|
|
||||||
filterValue: null,
|
|
||||||
event: getInputEvents,
|
|
||||||
attrs: {
|
attrs: {
|
||||||
options: zonesOptions.value,
|
options: zonesOptions.value,
|
||||||
'option-value': 'id',
|
'option-value': 'id',
|
||||||
|
@ -280,12 +292,11 @@ const columns = computed(() => [
|
||||||
name: 'total',
|
name: 'total',
|
||||||
field: 'totalWithVat',
|
field: 'totalWithVat',
|
||||||
align: 'left',
|
align: 'left',
|
||||||
|
style: { 'max-width': '75px' },
|
||||||
sortable: true,
|
sortable: true,
|
||||||
columnFilter: {
|
columnFilter: {
|
||||||
component: 'input',
|
component: 'input',
|
||||||
type: 'text',
|
name: 'totalWithVat',
|
||||||
filterValue: null,
|
|
||||||
event: getInputEvents,
|
|
||||||
attrs: {
|
attrs: {
|
||||||
dense: true,
|
dense: true,
|
||||||
},
|
},
|
||||||
|
@ -423,7 +434,6 @@ const redirectToSales = (id) => {
|
||||||
@on-fetch="(data) => (zonesOptions = data)"
|
@on-fetch="(data) => (zonesOptions = data)"
|
||||||
/>
|
/>
|
||||||
<VnTable
|
<VnTable
|
||||||
class="column flex-center fit"
|
|
||||||
ref="paginateRef"
|
ref="paginateRef"
|
||||||
data-key="SalesMonitorTickets"
|
data-key="SalesMonitorTickets"
|
||||||
url="SalesMonitors/salesFilter"
|
url="SalesMonitors/salesFilter"
|
||||||
|
@ -453,7 +463,7 @@ const redirectToSales = (id) => {
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
<template #column-problems="{ row }">
|
<template #column-problems="{ row }">
|
||||||
<QTd class="q-gutter-x-sm" style="max-width: 50px">
|
<QTd class="no-padding" style="max-width: 50px">
|
||||||
<QIcon
|
<QIcon
|
||||||
v-if="row.isTaxDataChecked === 0"
|
v-if="row.isTaxDataChecked === 0"
|
||||||
name="vn:no036"
|
name="vn:no036"
|
||||||
|
@ -508,7 +518,7 @@ const redirectToSales = (id) => {
|
||||||
</QTd>
|
</QTd>
|
||||||
</template>
|
</template>
|
||||||
<template #column-identifier="{ row }">
|
<template #column-identifier="{ row }">
|
||||||
<QTd>
|
<QTd class="no-padding">
|
||||||
<span class="link" @click.stop.prevent>
|
<span class="link" @click.stop.prevent>
|
||||||
{{ row.id }}
|
{{ row.id }}
|
||||||
<TicketDescriptorProxy :id="row.id" />
|
<TicketDescriptorProxy :id="row.id" />
|
||||||
|
@ -516,19 +526,19 @@ const redirectToSales = (id) => {
|
||||||
</QTd>
|
</QTd>
|
||||||
</template>
|
</template>
|
||||||
<template #column-client="{ row }">
|
<template #column-client="{ row }">
|
||||||
<QTd @click.stop.prevent>
|
<QTd class="no-padding" @click.stop.prevent>
|
||||||
<span class="link">{{ row.nickname }}</span>
|
<span class="link">{{ row.nickname }}</span>
|
||||||
<CustomerDescriptorProxy :id="row.clientFk" />
|
<CustomerDescriptorProxy :id="row.clientFk" />
|
||||||
</QTd>
|
</QTd>
|
||||||
</template>
|
</template>
|
||||||
<template #column-salesPerson="{ row }">
|
<template #column-salesPerson="{ row }">
|
||||||
<QTd @click.stop.prevent>
|
<QTd class="no-padding" @click.stop.prevent>
|
||||||
<span class="link">{{ row.userName }}</span>
|
<span class="link">{{ row.userName }}</span>
|
||||||
<WorkerDescriptorProxy :id="row.salesPersonFk" />
|
<WorkerDescriptorProxy :id="row.salesPersonFk" />
|
||||||
</QTd>
|
</QTd>
|
||||||
</template>
|
</template>
|
||||||
<template #column-date="{ row }">
|
<template #column-date="{ row }">
|
||||||
<QTd>
|
<QTd class="no-padding">
|
||||||
<QBadge
|
<QBadge
|
||||||
v-bind="getBadgeAttrs(row.shippedDate)"
|
v-bind="getBadgeAttrs(row.shippedDate)"
|
||||||
class="q-pa-sm"
|
class="q-pa-sm"
|
||||||
|
@ -539,7 +549,7 @@ const redirectToSales = (id) => {
|
||||||
</QTd>
|
</QTd>
|
||||||
</template>
|
</template>
|
||||||
<template #column-state="{ row }">
|
<template #column-state="{ row }">
|
||||||
<QTd @click.stop.prevent>
|
<QTd class="no-padding" @click.stop.prevent>
|
||||||
<div v-if="row.refFk">
|
<div v-if="row.refFk">
|
||||||
<span class="link">{{ row.refFk }}</span>
|
<span class="link">{{ row.refFk }}</span>
|
||||||
<InvoiceOutDescriptorProxy :id="row.invoiceOutId" />
|
<InvoiceOutDescriptorProxy :id="row.invoiceOutId" />
|
||||||
|
@ -556,20 +566,20 @@ const redirectToSales = (id) => {
|
||||||
</QTd>
|
</QTd>
|
||||||
</template>
|
</template>
|
||||||
<template #column-isFragile="{ row }">
|
<template #column-isFragile="{ row }">
|
||||||
<QTd>
|
<QTd class="no-padding">
|
||||||
<QIcon v-if="row.isFragile" name="local_bar" color="primary" size="sm">
|
<QIcon v-if="row.isFragile" name="local_bar" color="primary" size="sm">
|
||||||
<QTooltip>{{ t('salesTicketsTable.isFragile') }}</QTooltip>
|
<QTooltip>{{ t('salesTicketsTable.isFragile') }}</QTooltip>
|
||||||
</QIcon>
|
</QIcon>
|
||||||
</QTd>
|
</QTd>
|
||||||
</template>
|
</template>
|
||||||
<template #column-zone="{ row }">
|
<template #column-zone="{ row }">
|
||||||
<QTd @click.stop.prevent>
|
<QTd class="no-padding" @click.stop.prevent>
|
||||||
<span class="link">{{ row.zoneName }}</span>
|
<span class="link">{{ row.zoneName }}</span>
|
||||||
<ZoneDescriptorProxy :id="row.zoneFk" />
|
<ZoneDescriptorProxy :id="row.zoneFk" />
|
||||||
</QTd>
|
</QTd>
|
||||||
</template>
|
</template>
|
||||||
<template #column-total="{ row }">
|
<template #column-total="{ row }">
|
||||||
<QTd>
|
<QTd class="no-padding">
|
||||||
<QBadge
|
<QBadge
|
||||||
:color="totalPriceColor(row) || 'transparent'"
|
:color="totalPriceColor(row) || 'transparent'"
|
||||||
:text-color="totalPriceColor(row) ? 'black' : 'white'"
|
:text-color="totalPriceColor(row) ? 'black' : 'white'"
|
||||||
|
|
Loading…
Reference in New Issue