forked from verdnatura/salix-front
feat: salesOrderTable
This commit is contained in:
parent
f45b623f24
commit
44294bb46a
|
|
@ -5,7 +5,8 @@ import { useI18n } from 'vue-i18n';
|
||||||
import FetchData from 'components/FetchData.vue';
|
import FetchData from 'components/FetchData.vue';
|
||||||
import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
|
import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
|
||||||
import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
|
import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
|
||||||
import VnPaginate from 'components/ui/VnPaginate.vue';
|
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
|
||||||
|
import VnTable from 'components/VnTable/VnTable.vue';
|
||||||
|
|
||||||
import { toDateFormat, toDateTimeFormat } from 'src/filters/date.js';
|
import { toDateFormat, toDateTimeFormat } from 'src/filters/date.js';
|
||||||
import { toCurrency } from 'src/filters';
|
import { toCurrency } from 'src/filters';
|
||||||
|
|
@ -51,18 +52,21 @@ const columns = computed(() => [
|
||||||
field: 'dated',
|
field: 'dated',
|
||||||
align: 'left',
|
align: 'left',
|
||||||
sortable: true,
|
sortable: true,
|
||||||
|
cardVisible: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: t('salesOrdersTable.client'),
|
label: t('salesOrdersTable.client'),
|
||||||
name: 'client',
|
name: 'client',
|
||||||
align: 'left',
|
align: 'left',
|
||||||
sortable: true,
|
sortable: true,
|
||||||
|
cardVisible: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: t('salesOrdersTable.salesPerson'),
|
label: t('salesOrdersTable.salesPerson'),
|
||||||
name: 'salesPerson',
|
name: 'salesPerson',
|
||||||
align: 'left',
|
align: 'left',
|
||||||
sortable: true,
|
sortable: true,
|
||||||
|
cardVisible: true,
|
||||||
},
|
},
|
||||||
]);
|
]);
|
||||||
|
|
||||||
|
|
@ -119,78 +123,78 @@ const redirectToOrderSummary = (orderId) => {
|
||||||
@on-fetch="(data) => (clientsOptions = data)"
|
@on-fetch="(data) => (clientsOptions = data)"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
<VnSubToolbar />
|
||||||
<QCard style="max-height: 380px; overflow-y: scroll">
|
<QCard style="max-height: 380px; overflow-y: scroll">
|
||||||
<VnPaginate
|
<VnTable
|
||||||
ref="paginateRef"
|
ref="paginateRef"
|
||||||
data-key="SalesMonitorOrders"
|
data-key="SalesMonitorOrders"
|
||||||
url="SalesMonitors/ordersFilter"
|
url="SalesMonitors/ordersFilter"
|
||||||
order="date_make DESC"
|
order="date_make DESC"
|
||||||
:limit="6"
|
:limit="6"
|
||||||
|
:right-search="false"
|
||||||
:expr-builder="exprBuilder"
|
:expr-builder="exprBuilder"
|
||||||
auto-load
|
auto-load
|
||||||
|
:columns="columns"
|
||||||
|
:table="{
|
||||||
|
'row-key': 'id',
|
||||||
|
selection: 'multiple',
|
||||||
|
'hide-bottom': true,
|
||||||
|
}"
|
||||||
|
default-mode="table"
|
||||||
|
:without-header="false"
|
||||||
|
@row-click="(_, row) => redirectToOrderSummary(row.id)"
|
||||||
|
v-model:selected="selectedRows"
|
||||||
>
|
>
|
||||||
<template #body="{ rows }">
|
<template #top-left>
|
||||||
<QTable
|
<QBtn
|
||||||
:rows="rows"
|
v-if="selectedRows.length > 0"
|
||||||
:columns="columns"
|
icon="delete"
|
||||||
row-key="id"
|
size="md"
|
||||||
selection="multiple"
|
color="primary"
|
||||||
v-model:selected="selectedRows"
|
@click="
|
||||||
:pagination="{ rowsPerPage: 0 }"
|
openConfirmationModal(
|
||||||
:no-data-label="t('globals.noResults')"
|
t('salesOrdersTable.deleteConfirmTitle'),
|
||||||
@row-click="(_, row) => redirectToOrderSummary(row.id)"
|
t('salesOrdersTable.deleteConfirmMessage'),
|
||||||
|
removeOrders
|
||||||
|
)
|
||||||
|
"
|
||||||
>
|
>
|
||||||
<template #top>
|
<QTooltip>{{ t('salesOrdersTable.delete') }}</QTooltip>
|
||||||
<QBtn
|
</QBtn>
|
||||||
v-if="selectedRows.length > 0"
|
|
||||||
icon="delete"
|
|
||||||
size="md"
|
|
||||||
color="primary"
|
|
||||||
@click="
|
|
||||||
openConfirmationModal(
|
|
||||||
t('salesOrdersTable.deleteConfirmTitle'),
|
|
||||||
t('salesOrdersTable.deleteConfirmMessage'),
|
|
||||||
removeOrders
|
|
||||||
)
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<QTooltip>{{ t('salesOrdersTable.delete') }}</QTooltip>
|
|
||||||
</QBtn>
|
|
||||||
</template>
|
|
||||||
<template #body-cell-date="{ row }">
|
|
||||||
<QTd>
|
|
||||||
<QBadge
|
|
||||||
:color="getBadgeColor(row.date_send)"
|
|
||||||
text-color="black"
|
|
||||||
class="q-pa-sm q-mb-md"
|
|
||||||
style="font-size: 14px"
|
|
||||||
>
|
|
||||||
{{ toDateFormat(row.date_send) }}
|
|
||||||
</QBadge>
|
|
||||||
<div>{{ toDateTimeFormat(row.date_make) }}</div>
|
|
||||||
</QTd>
|
|
||||||
</template>
|
|
||||||
<template #body-cell-client="{ row }">
|
|
||||||
<QTd>
|
|
||||||
<div class="q-mb-md">
|
|
||||||
<span class="link">{{ row.clientName }}</span>
|
|
||||||
<CustomerDescriptorProxy :id="row.clientFk" />
|
|
||||||
</div>
|
|
||||||
<span> {{ row.agencyName }}</span>
|
|
||||||
</QTd>
|
|
||||||
</template>
|
|
||||||
<template #body-cell-salesPerson="{ row }">
|
|
||||||
<QTd>
|
|
||||||
<div class="q-mb-md">
|
|
||||||
<span class="link">{{ row.salesPerson }}</span>
|
|
||||||
<WorkerDescriptorProxy :id="row.salesPersonFk" dense />
|
|
||||||
</div>
|
|
||||||
<span>{{ toCurrency(row.import) }}</span>
|
|
||||||
</QTd>
|
|
||||||
</template>
|
|
||||||
</QTable>
|
|
||||||
</template>
|
</template>
|
||||||
</VnPaginate>
|
<template #column-date="{ row }">
|
||||||
|
<QTd>
|
||||||
|
<QBadge
|
||||||
|
:color="getBadgeColor(row.date_send)"
|
||||||
|
text-color="black"
|
||||||
|
class="q-pa-sm q-mb-md"
|
||||||
|
style="font-size: 14px"
|
||||||
|
>
|
||||||
|
{{ toDateFormat(row.date_send) }}
|
||||||
|
</QBadge>
|
||||||
|
<div>{{ toDateTimeFormat(row.date_make) }}</div>
|
||||||
|
</QTd>
|
||||||
|
</template>
|
||||||
|
<template #column-client="{ row }">
|
||||||
|
<QTd>
|
||||||
|
<div class="q-mb-md">
|
||||||
|
<span class="link">{{ row.clientName }}</span>
|
||||||
|
<CustomerDescriptorProxy :id="row.clientFk" />
|
||||||
|
</div>
|
||||||
|
<span> {{ row.agencyName }}</span>
|
||||||
|
</QTd>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #column-salesPerson="{ row }">
|
||||||
|
<QTd>
|
||||||
|
<div class="q-mb-md">
|
||||||
|
<span class="link">{{ row.salesPerson }}</span>
|
||||||
|
<WorkerDescriptorProxy :id="row.salesPersonFk" dense />
|
||||||
|
</div>
|
||||||
|
<span>{{ toCurrency(row.import) }}</span>
|
||||||
|
</QTd>
|
||||||
|
</template>
|
||||||
|
</VnTable>
|
||||||
</QCard>
|
</QCard>
|
||||||
</template>
|
</template>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue