forked from verdnatura/salix-front
fix: refs #7353 saleTicketMonitors
This commit is contained in:
parent
e6e61e5717
commit
3f9bdfcc9c
|
|
@ -1,5 +1,4 @@
|
|||
<script setup>
|
||||
import { onMounted, onUnmounted } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useStateStore } from 'stores/useStateStore';
|
||||
import SalesClientTable from './SalesClientsTable.vue';
|
||||
|
|
@ -9,9 +8,6 @@ import VnRow from 'src/components/ui/VnRow.vue';
|
|||
|
||||
const { t } = useI18n();
|
||||
const stateStore = useStateStore();
|
||||
|
||||
onMounted(async () => (stateStore.leftDrawer = false));
|
||||
onUnmounted(() => (stateStore.leftDrawer = true));
|
||||
</script>
|
||||
<template>
|
||||
<template v-if="stateStore.isHeaderMounted()">
|
||||
|
|
@ -27,14 +23,20 @@ onUnmounted(() => (stateStore.leftDrawer = true));
|
|||
</template>
|
||||
<VnRow
|
||||
class="q-pa-md"
|
||||
:style="{ 'flex-direction': $q.screen.lt.lg ? 'column' : 'row' }"
|
||||
:style="{ 'flex-direction': $q.screen.lt.lg ? 'column' : 'row', gap: '0px' }"
|
||||
>
|
||||
<div style="flex: 0.4">
|
||||
<span class="text-body1" v-text="t('salesMonitor.clientsOnWebsite')" />
|
||||
<span
|
||||
class="q-ml-md text-body1"
|
||||
v-text="t('salesMonitor.clientsOnWebsite')"
|
||||
/>
|
||||
<SalesClientTable />
|
||||
</div>
|
||||
<div style="flex: 0.6">
|
||||
<span class="text-body1" v-text="t('salesMonitor.recentOrderActions')" />
|
||||
<span
|
||||
class="q-ml-md text-body1"
|
||||
v-text="t('salesMonitor.recentOrderActions')"
|
||||
/>
|
||||
<SalesOrdersTable />
|
||||
</div>
|
||||
</VnRow>
|
||||
|
|
|
|||
|
|
@ -1,27 +1,477 @@
|
|||
<script setup>
|
||||
import { onMounted, onUnmounted } from 'vue';
|
||||
import { ref, computed } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useStateStore } from 'stores/useStateStore';
|
||||
import SalesTicketsTable from './SalesTicketsTable.vue';
|
||||
import VnSearchbar from 'components/ui/VnSearchbar.vue';
|
||||
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 TicketDescriptorProxy from 'src/pages/Ticket/Card/TicketDescriptorProxy.vue';
|
||||
import InvoiceOutDescriptorProxy from 'src/pages/InvoiceOut/Card/InvoiceOutDescriptorProxy.vue';
|
||||
import ZoneDescriptorProxy from 'src/pages/Zone/Card/ZoneDescriptorProxy.vue';
|
||||
import TicketSummary from 'src/pages/Ticket/Card/TicketSummary.vue';
|
||||
import VnTable from 'components/VnTable/VnTable.vue';
|
||||
import { useSummaryDialog } from 'src/composables/useSummaryDialog';
|
||||
import { toDateFormat } from 'src/filters/date.js';
|
||||
import { toCurrency, dateRange } from 'src/filters';
|
||||
|
||||
const DEFAULT_AUTO_REFRESH = 2 * 60 * 1000; // 2min in ms
|
||||
const { t } = useI18n();
|
||||
const stateStore = useStateStore();
|
||||
const autoRefresh = ref(false);
|
||||
const tableRef = ref(null);
|
||||
const provinceOpts = ref([]);
|
||||
const stateOpts = ref([]);
|
||||
const zoneOpts = ref([]);
|
||||
const visibleColumns = ref([]);
|
||||
const { viewSummary } = useSummaryDialog();
|
||||
|
||||
onMounted(async () => (stateStore.leftDrawer = false));
|
||||
onUnmounted(() => (stateStore.leftDrawer = true));
|
||||
function exprBuilder(param, value) {
|
||||
switch (param) {
|
||||
case 'stateFk':
|
||||
return { 'ts.stateFk': value };
|
||||
case 'salesPersonFk':
|
||||
return { 'c.salesPersonFk': value };
|
||||
case 'provinceFk':
|
||||
return { 'a.provinceFk': value };
|
||||
case 'theoreticalHour':
|
||||
return { 'z.hour': value };
|
||||
case 'practicalHour':
|
||||
return { 'zed.etc': value };
|
||||
case 'shippedDate':
|
||||
return { 't.shipped': { between: dateRange(value) } };
|
||||
case 'nickname':
|
||||
return { [`t.nickname`]: { like: `%${value}%` } };
|
||||
case 'zoneFk':
|
||||
case 'totalWithVat':
|
||||
return { [`t.${param}`]: value };
|
||||
}
|
||||
}
|
||||
|
||||
const columns = computed(() => [
|
||||
{
|
||||
label: t('salesTicketsTable.problems'),
|
||||
name: 'totalProblems',
|
||||
align: 'left',
|
||||
|
||||
columnFilter: false,
|
||||
attrs: {
|
||||
dense: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t('salesTicketsTable.identifier'),
|
||||
name: 'id',
|
||||
field: 'id',
|
||||
align: 'left',
|
||||
|
||||
columnFilter: {
|
||||
component: 'number',
|
||||
name: 'id',
|
||||
attrs: {
|
||||
dense: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t('salesTicketsTable.client'),
|
||||
name: 'clientFk',
|
||||
align: 'left',
|
||||
field: 'nickname',
|
||||
columnFilter: {
|
||||
component: 'select',
|
||||
attrs: {
|
||||
url: 'Clients',
|
||||
fields: ['id', 'name', 'nickname'],
|
||||
sortBy: 'name ASC',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t('salesTicketsTable.salesPerson'),
|
||||
name: 'salesPersonFk',
|
||||
field: 'userName',
|
||||
align: 'left',
|
||||
optionFilter: 'firstName',
|
||||
columnFilter: {
|
||||
component: 'select',
|
||||
attrs: {
|
||||
url: 'Workers/activeWithInheritedRole',
|
||||
fields: ['id', 'name'],
|
||||
sortBy: 'nickname ASC',
|
||||
where: { role: 'salesPerson' },
|
||||
useLike: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t('salesTicketsTable.date'),
|
||||
name: 'shippedDate',
|
||||
style: { 'max-width': '100px' },
|
||||
align: 'left',
|
||||
|
||||
columnFilter: {
|
||||
component: 'date',
|
||||
name: 'shippedDate',
|
||||
attrs: {
|
||||
dense: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t('salesTicketsTable.theoretical'),
|
||||
name: 'theoreticalhour',
|
||||
field: 'zoneLanding',
|
||||
align: 'left',
|
||||
format: (row) => row.theoreticalhour,
|
||||
columnFilter: false,
|
||||
},
|
||||
{
|
||||
label: t('salesTicketsTable.practical'),
|
||||
name: 'practicalHour',
|
||||
field: 'practicalHour',
|
||||
align: 'left',
|
||||
format: (row) => row.practicalHour,
|
||||
columnFilter: false,
|
||||
},
|
||||
{
|
||||
label: t('salesTicketsTable.preparation'),
|
||||
name: 'preparationHour',
|
||||
field: 'shipped',
|
||||
align: 'left',
|
||||
format: (row) => row.preparationHour,
|
||||
columnFilter: false,
|
||||
},
|
||||
{
|
||||
label: t('salesTicketsTable.province'),
|
||||
name: 'provinceFk',
|
||||
field: 'province',
|
||||
align: 'left',
|
||||
format: (row) => row.province,
|
||||
columnFilter: {
|
||||
component: 'select',
|
||||
name: 'provinceFk',
|
||||
attrs: {
|
||||
options: provinceOpts.value,
|
||||
'option-value': 'id',
|
||||
'option-label': 'name',
|
||||
dense: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t('salesTicketsTable.state'),
|
||||
name: 'state',
|
||||
align: 'left',
|
||||
style: { 'max-width': '100px' },
|
||||
columnFilter: {
|
||||
component: 'select',
|
||||
name: 'stateFk',
|
||||
attrs: {
|
||||
options: stateOpts.value,
|
||||
'option-value': 'id',
|
||||
'option-label': 'name',
|
||||
dense: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t('salesTicketsTable.isFragile'),
|
||||
name: 'isFragile',
|
||||
field: 'isFragile',
|
||||
align: 'left',
|
||||
columnFilter: false,
|
||||
attrs: {
|
||||
'checked-icon': 'local_bar',
|
||||
'unchecked-icon': 'local_bar',
|
||||
'false-value': 0,
|
||||
'true-value': 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t('salesTicketsTable.zone'),
|
||||
name: 'zoneFk',
|
||||
align: 'left',
|
||||
|
||||
columnFilter: {
|
||||
component: 'select',
|
||||
name: 'zoneFk',
|
||||
attrs: {
|
||||
options: zoneOpts.value,
|
||||
'option-value': 'id',
|
||||
'option-label': 'name',
|
||||
dense: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t('salesTicketsTable.total'),
|
||||
name: 'totalWithVat',
|
||||
field: 'totalWithVat',
|
||||
align: 'left',
|
||||
style: { 'max-width': '75px' },
|
||||
|
||||
columnFilter: {
|
||||
component: 'number',
|
||||
name: 'totalWithVat',
|
||||
attrs: {
|
||||
dense: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
align: 'right',
|
||||
name: 'tableActions',
|
||||
label: '',
|
||||
actions: [
|
||||
{
|
||||
title: t('salesTicketsTable.goToLines'),
|
||||
icon: 'vn:lines',
|
||||
color: 'priamry',
|
||||
action: (row) => openTab(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,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
]);
|
||||
|
||||
const getBadgeAttrs = (date) => {
|
||||
let today = Date.vnNew();
|
||||
today.setHours(0, 0, 0, 0);
|
||||
let timeTicket = new Date(date);
|
||||
timeTicket.setHours(0, 0, 0, 0);
|
||||
|
||||
let comparation = today - timeTicket;
|
||||
|
||||
if (comparation == 0) return { color: 'warning', 'text-color': 'black' };
|
||||
if (comparation < 0) return { color: 'success', 'text-color': 'black' };
|
||||
return { color: 'transparent', 'text-color': 'white' };
|
||||
};
|
||||
|
||||
let refreshTimer = null;
|
||||
|
||||
const autoRefreshHandler = (value) => {
|
||||
if (value)
|
||||
refreshTimer = setInterval(() => tableRef.value.reload(), DEFAULT_AUTO_REFRESH);
|
||||
else {
|
||||
clearInterval(refreshTimer);
|
||||
refreshTimer = null;
|
||||
}
|
||||
};
|
||||
|
||||
const stateColors = {
|
||||
notice: 'info',
|
||||
success: 'positive',
|
||||
warning: 'warning',
|
||||
alert: 'negative',
|
||||
};
|
||||
|
||||
const totalPriceColor = (ticket) => {
|
||||
const total = parseInt(ticket.totalWithVat);
|
||||
if (total > 0 && total < 50) return 'warning';
|
||||
};
|
||||
|
||||
const formatShippedDate = (date) => {
|
||||
if (!date) return '-';
|
||||
const split1 = date.split('T');
|
||||
const [year, month, day] = split1[0].split('-');
|
||||
const _date = new Date(year, month - 1, day);
|
||||
return toDateFormat(_date);
|
||||
};
|
||||
|
||||
const openTab = (id) =>
|
||||
window.open(`#/ticket/${id}/sale`, '_blank', 'noopener, noreferrer');
|
||||
</script>
|
||||
<template>
|
||||
<template v-if="stateStore.isHeaderMounted()">
|
||||
<Teleport to="#searchbar">
|
||||
<VnSearchbar
|
||||
<FetchData
|
||||
url="Provinces"
|
||||
:filter="{
|
||||
fields: ['id', 'name'],
|
||||
order: 'name ASC',
|
||||
}"
|
||||
auto-load
|
||||
@on-fetch="(data) => (provinceOpts = data)"
|
||||
/>
|
||||
<FetchData
|
||||
url="States"
|
||||
:filter="{
|
||||
fields: ['id', 'name'],
|
||||
order: 'name ASC',
|
||||
}"
|
||||
auto-load
|
||||
@on-fetch="(data) => (stateOpts = data)"
|
||||
/>
|
||||
<FetchData
|
||||
url="Zones"
|
||||
:filter="{
|
||||
fields: ['id', 'name'],
|
||||
order: 'name ASC',
|
||||
}"
|
||||
auto-load
|
||||
@on-fetch="(data) => (zoneOpts = data)"
|
||||
/>
|
||||
<VnTable
|
||||
ref="tableRef"
|
||||
data-key="SalesMonitorTickets"
|
||||
url="SalesMonitors/salesFilter"
|
||||
:redirect="false"
|
||||
:label="t('searchBar.label')"
|
||||
:info="t('searchBar.info')"
|
||||
search-url="SalesMonitorTickets"
|
||||
:limit="20"
|
||||
:expr-builder="exprBuilder"
|
||||
:offset="50"
|
||||
:columns="columns"
|
||||
:visible-columns="visibleColumns"
|
||||
:right-search="false"
|
||||
default-mode="table"
|
||||
auto-load
|
||||
:row-click="({ id }) => openTab(id)"
|
||||
:disable-option="{ card: true }"
|
||||
>
|
||||
<template #top-left>
|
||||
<QCheckbox
|
||||
v-model="autoRefresh"
|
||||
:label="t('salesTicketsTable.autoRefresh')"
|
||||
@update:model-value="autoRefreshHandler"
|
||||
/>
|
||||
</Teleport>
|
||||
</template>
|
||||
<SalesTicketsTable />
|
||||
<template #column-totalProblems="{ row }">
|
||||
<QTd class="no-padding" 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-id="{ row }">
|
||||
<QTd class="no-padding">
|
||||
<span class="link" @click.stop.prevent>
|
||||
{{ row.id }}
|
||||
<TicketDescriptorProxy :id="row.id" />
|
||||
</span>
|
||||
</QTd>
|
||||
</template>
|
||||
<template #column-clientFk="{ row }">
|
||||
<QTd class="no-padding" @click.stop.prevent>
|
||||
<span class="link">{{ row.nickname }}</span>
|
||||
<CustomerDescriptorProxy :id="row.clientFk" />
|
||||
</QTd>
|
||||
</template>
|
||||
<template #column-salesPersonFk="{ row }">
|
||||
<QTd class="no-padding" @click.stop.prevent>
|
||||
<span class="link">{{ row.userName }}</span>
|
||||
<WorkerDescriptorProxy :id="row.salesPersonFk" />
|
||||
</QTd>
|
||||
</template>
|
||||
<template #column-shippedDate="{ row }">
|
||||
<QTd class="no-padding">
|
||||
<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 class="no-padding" @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 class="no-padding">
|
||||
<QIcon v-if="row.isFragile" name="local_bar" color="primary" size="sm">
|
||||
<QTooltip>{{ t('salesTicketsTable.isFragile') }}</QTooltip>
|
||||
</QIcon>
|
||||
</QTd>
|
||||
</template>
|
||||
<template #column-zoneFk="{ row }">
|
||||
<QTd class="no-padding" @click.stop.prevent>
|
||||
<span class="link">{{ row.zoneName }}</span>
|
||||
<ZoneDescriptorProxy :id="row.zoneFk" />
|
||||
</QTd>
|
||||
</template>
|
||||
<template #column-totalWithVat="{ row }">
|
||||
<QTd class="no-padding">
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -106,13 +106,6 @@ const columns = computed(() => [
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<QCard style="max-height: 380px; overflow-y: scroll">
|
||||
<QCardSection>
|
||||
<VnRow>
|
||||
<VnInputDate v-model="from" label="From" dense style="flex: 0.25" />
|
||||
<VnInputDate v-model="to" label="To" dense style="flex: 0.25" />
|
||||
</VnRow>
|
||||
</QCardSection>
|
||||
<VnTable
|
||||
ref="table"
|
||||
data-key="SalesMonitorClients"
|
||||
|
|
@ -127,9 +120,16 @@ const columns = computed(() => [
|
|||
:columns="columns"
|
||||
:right-search="false"
|
||||
default-mode="table"
|
||||
:disable-option="{ card: true }"
|
||||
dense
|
||||
:without-header="true"
|
||||
style="max-height: 380px; overflow-y: scroll"
|
||||
>
|
||||
<template #top-left>
|
||||
<VnRow>
|
||||
<VnInputDate v-model="from" label="From" dense style="flex: 0.25" />
|
||||
<VnInputDate v-model="to" label="To" dense style="flex: 0.25" />
|
||||
</VnRow>
|
||||
</template>
|
||||
<template #column-salesPersonFk="{ row }">
|
||||
<QTd>
|
||||
<span class="link">{{ row.salesPerson }}</span>
|
||||
|
|
@ -143,5 +143,4 @@ const columns = computed(() => [
|
|||
</QTd>
|
||||
</template>
|
||||
</VnTable>
|
||||
</QCard>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.v
|
|||
import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
|
||||
import VnTable from 'components/VnTable/VnTable.vue';
|
||||
|
||||
import { toDateFormat, toDateTimeFormat } from 'src/filters/date.js';
|
||||
import { toDateFormat } from 'src/filters/date.js';
|
||||
import { toCurrency } from 'src/filters';
|
||||
import { useVnConfirm } from 'composables/useVnConfirm';
|
||||
import axios from 'axios';
|
||||
|
|
@ -103,9 +103,9 @@ const openTab = (id) =>
|
|||
window.open(`#/order/${id}/summary`, '_blank', 'noopener, noreferrer');
|
||||
</script>
|
||||
<template>
|
||||
<QCard style="max-height: 380px; overflow-y: scroll">
|
||||
<VnTable
|
||||
ref="table"
|
||||
class="q-px-none"
|
||||
data-key="SalesMonitorOrders"
|
||||
url="SalesMonitors/ordersFilter"
|
||||
search-url="SalesMonitorOrders"
|
||||
|
|
@ -124,6 +124,7 @@ const openTab = (id) =>
|
|||
:row-click="({ id }) => openTab(id)"
|
||||
v-model:selected="selectedRows"
|
||||
:disable-option="{ card: true }"
|
||||
style="max-height: 380px; overflow-y: scroll"
|
||||
>
|
||||
<template #top-left>
|
||||
<QBtn
|
||||
|
|
@ -189,14 +190,9 @@ const openTab = (id) =>
|
|||
</QTd>
|
||||
</template>
|
||||
</VnTable>
|
||||
</QCard>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
.q-td {
|
||||
color: gray;
|
||||
}
|
||||
|
||||
:deep(.q-table__container > div:first-child) {
|
||||
background-color: var(--vn-section-color);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,588 +0,0 @@
|
|||
<script setup>
|
||||
import { ref, computed, onMounted, reactive } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
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 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';
|
||||
import ZoneDescriptorProxy from 'src/pages/Zone/Card/ZoneDescriptorProxy.vue';
|
||||
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';
|
||||
import { toCurrency, dateRange } from 'src/filters';
|
||||
const DEFAULT_AUTO_REFRESH = 1000;
|
||||
const { t } = useI18n();
|
||||
const autoRefresh = ref(false);
|
||||
const router = useRouter();
|
||||
const paginateRef = ref(null);
|
||||
const workersActiveOptions = ref([]);
|
||||
const provincesOptions = ref([]);
|
||||
const statesOptions = ref([]);
|
||||
const zonesOptions = ref([]);
|
||||
const visibleColumns = ref([]);
|
||||
const allColumnNames = ref([]);
|
||||
const { viewSummary } = useSummaryDialog();
|
||||
|
||||
function exprBuilder(param, value) {
|
||||
switch (param) {
|
||||
case 'stateFk':
|
||||
return { 'ts.stateFk': value };
|
||||
case 'salesPersonFk':
|
||||
return { 'c.salesPersonFk': value };
|
||||
case 'provinceFk':
|
||||
return { 'a.provinceFk': value };
|
||||
case 'theoreticalHour':
|
||||
return { 'z.hour': value };
|
||||
case 'practicalHour':
|
||||
return { 'zed.etc': value };
|
||||
case 'shippedDate':
|
||||
return { 't.shipped': { between: dateRange(value) } };
|
||||
case 'nickname':
|
||||
return { [`t.nickname`]: { like: `%${value}%` } };
|
||||
case 'zoneFk':
|
||||
case 'totalWithVat':
|
||||
return { [`t.${param}`]: value };
|
||||
}
|
||||
}
|
||||
|
||||
const filter = { order: ['totalProblems DESC'] };
|
||||
let params = reactive({});
|
||||
|
||||
const applyColumnFilter = async (col) => {
|
||||
try {
|
||||
const paramKey = col.columnFilter?.filterParamKey || col.field;
|
||||
params[paramKey] = col.columnFilter.filterValue;
|
||||
await paginateRef.value.addFilter(null, params);
|
||||
} catch (err) {
|
||||
console.error('Error applying column filter', err);
|
||||
}
|
||||
};
|
||||
|
||||
const getInputEvents = (col) => {
|
||||
return col.columnFilter.type === 'select' || col.columnFilter.type === 'date'
|
||||
? { 'update:modelValue': () => applyColumnFilter(col) }
|
||||
: {
|
||||
'keyup.enter': () => applyColumnFilter(col),
|
||||
};
|
||||
};
|
||||
|
||||
const fetchParams = ($params = {}) => {
|
||||
const excludedParams = ['search', 'clientFk', 'orderFk', 'refFk', 'scopeDays'];
|
||||
|
||||
const hasExcludedParams = excludedParams.some((param) => {
|
||||
return $params && $params[param] != undefined;
|
||||
});
|
||||
const hasParams = Object.entries($params).length;
|
||||
if (!hasParams || !hasExcludedParams) $params.scopeDays = 1;
|
||||
|
||||
if (typeof $params.scopeDays === 'number') {
|
||||
const from = Date.vnNew();
|
||||
from.setHours(0, 0, 0, 0);
|
||||
|
||||
const to = new Date(from.getTime());
|
||||
to.setDate(to.getDate() + $params.scopeDays);
|
||||
to.setHours(23, 59, 59, 999);
|
||||
|
||||
Object.assign($params, { from, to });
|
||||
}
|
||||
return { tableOrder: 'totalProblems DESC', ...$params };
|
||||
};
|
||||
|
||||
const columns = computed(() => [
|
||||
{
|
||||
label: t('salesTicketsTable.problems'),
|
||||
name: 'problems',
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
columnFilter: false,
|
||||
attrs: {
|
||||
dense: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t('salesTicketsTable.identifier'),
|
||||
name: 'identifier',
|
||||
field: 'id',
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
|
||||
columnFilter: {
|
||||
component: 'input',
|
||||
name: 'id',
|
||||
attrs: {
|
||||
dense: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t('salesTicketsTable.client'),
|
||||
name: 'client',
|
||||
align: 'left',
|
||||
field: 'nickname',
|
||||
sortable: true,
|
||||
columnFilter: {
|
||||
component: 'input',
|
||||
name: 'nickname',
|
||||
attrs: {
|
||||
dense: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t('salesTicketsTable.salesPerson'),
|
||||
name: 'salesPerson',
|
||||
field: 'userName',
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
columnFilter: {
|
||||
component: 'select',
|
||||
name: 'salesPersonFk',
|
||||
attrs: {
|
||||
options: workersActiveOptions.value,
|
||||
'option-value': 'id',
|
||||
'option-label': 'name',
|
||||
dense: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t('salesTicketsTable.date'),
|
||||
name: 'date',
|
||||
style: { 'max-width': '100px' },
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
columnFilter: {
|
||||
component: 'date',
|
||||
name: 'shippedDate',
|
||||
attrs: {
|
||||
dense: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t('salesTicketsTable.theoretical'),
|
||||
name: 'theoretical',
|
||||
field: 'zoneLanding',
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
format: (val) => toTimeFormat(val),
|
||||
columnFilter: {
|
||||
component: 'input',
|
||||
name: 'theoreticalHour',
|
||||
attrs: {
|
||||
dense: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t('salesTicketsTable.practical'),
|
||||
name: 'practical',
|
||||
field: 'practicalHour',
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
columnFilter: {
|
||||
component: 'input',
|
||||
name: 'practicalHour',
|
||||
attrs: {
|
||||
dense: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t('salesTicketsTable.preparation'),
|
||||
name: 'preparation',
|
||||
field: 'shipped',
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
format: (val) => toTimeFormat(val),
|
||||
columnFilter: {
|
||||
component: 'input',
|
||||
name: 'shippedDate',
|
||||
attrs: {
|
||||
dense: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
label: t('salesTicketsTable.province'),
|
||||
name: 'province',
|
||||
field: 'province',
|
||||
align: 'left',
|
||||
style: { 'max-width': '100px' },
|
||||
sortable: true,
|
||||
columnFilter: {
|
||||
component: 'select',
|
||||
name: 'provinceFk',
|
||||
attrs: {
|
||||
options: provincesOptions.value,
|
||||
'option-value': 'id',
|
||||
'option-label': 'name',
|
||||
dense: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t('salesTicketsTable.state'),
|
||||
name: 'state',
|
||||
align: 'left',
|
||||
style: { 'max-width': '100px' },
|
||||
sortable: true,
|
||||
columnFilter: {
|
||||
component: 'select',
|
||||
name: 'stateFk',
|
||||
attrs: {
|
||||
options: statesOptions.value,
|
||||
'option-value': 'id',
|
||||
'option-label': 'name',
|
||||
dense: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t('salesTicketsTable.isFragile'),
|
||||
name: 'isFragile',
|
||||
field: 'isFragile',
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
columnFilter: {
|
||||
inWhere: true,
|
||||
},
|
||||
attrs: {
|
||||
'checked-icon': 'local_bar',
|
||||
'unchecked-icon': 'local_bar',
|
||||
'false-value': 0,
|
||||
'true-value': 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t('salesTicketsTable.zone'),
|
||||
name: 'zone',
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
columnFilter: {
|
||||
component: 'select',
|
||||
name: 'zoneFk',
|
||||
attrs: {
|
||||
options: zonesOptions.value,
|
||||
'option-value': 'id',
|
||||
'option-label': 'name',
|
||||
dense: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t('salesTicketsTable.total'),
|
||||
name: 'total',
|
||||
field: 'totalWithVat',
|
||||
align: 'left',
|
||||
style: { 'max-width': '75px' },
|
||||
sortable: true,
|
||||
columnFilter: {
|
||||
component: 'input',
|
||||
name: 'totalWithVat',
|
||||
attrs: {
|
||||
dense: 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,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
]);
|
||||
|
||||
const getBadgeAttrs = (date) => {
|
||||
let today = Date.vnNew();
|
||||
today.setHours(0, 0, 0, 0);
|
||||
let timeTicket = new Date(date);
|
||||
timeTicket.setHours(0, 0, 0, 0);
|
||||
|
||||
let comparation = today - timeTicket;
|
||||
|
||||
if (comparation == 0) return { color: 'warning', 'text-color': 'black' };
|
||||
if (comparation < 0) return { color: 'success', 'text-color': 'black' };
|
||||
return { color: 'transparent', 'text-color': 'white' };
|
||||
};
|
||||
|
||||
let refreshTimer = null;
|
||||
|
||||
const autoRefreshHandler = (value) => {
|
||||
if (value)
|
||||
refreshTimer = setInterval(() => paginateRef.value.fetch(), DEFAULT_AUTO_REFRESH);
|
||||
else {
|
||||
clearInterval(refreshTimer);
|
||||
refreshTimer = null;
|
||||
}
|
||||
};
|
||||
|
||||
const redirectToTicketSummary = (id) => {
|
||||
const url = `#/ticket/${id}/summary`;
|
||||
window.open(url, '_blank');
|
||||
};
|
||||
|
||||
const stateColors = {
|
||||
notice: 'info',
|
||||
success: 'positive',
|
||||
warning: 'warning',
|
||||
alert: 'negative',
|
||||
};
|
||||
|
||||
const totalPriceColor = (ticket) => {
|
||||
const total = parseInt(ticket.totalWithVat);
|
||||
if (total > 0 && total < 50) return 'warning';
|
||||
};
|
||||
|
||||
const formatShippedDate = (date) => {
|
||||
if (!date) return '-';
|
||||
const split1 = date.split('T');
|
||||
const [year, month, day] = split1[0].split('-');
|
||||
const _date = new Date(year, month - 1, day);
|
||||
return toDateFormat(_date);
|
||||
};
|
||||
|
||||
const redirectToSales = (id) => {
|
||||
const url = `#/ticket/${id}/sale`;
|
||||
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);
|
||||
// });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FetchData
|
||||
url="Workers/activeWithInheritedRole"
|
||||
:filter="{
|
||||
fields: ['id', 'nickname'],
|
||||
order: 'nickname ASC',
|
||||
where: { role: 'salesPerson' },
|
||||
}"
|
||||
auto-load
|
||||
@on-fetch="(data) => (workersActiveOptions = data)"
|
||||
/>
|
||||
<FetchData
|
||||
url="Provinces"
|
||||
:filter="{
|
||||
fields: ['id', 'name'],
|
||||
order: 'name ASC',
|
||||
}"
|
||||
auto-load
|
||||
@on-fetch="(data) => (provincesOptions = data)"
|
||||
/>
|
||||
<FetchData
|
||||
url="States"
|
||||
:filter="{
|
||||
fields: ['id', 'name'],
|
||||
order: 'name ASC',
|
||||
}"
|
||||
auto-load
|
||||
@on-fetch="(data) => (statesOptions = data)"
|
||||
/>
|
||||
<FetchData
|
||||
url="Zones"
|
||||
:filter="{
|
||||
fields: ['id', 'name'],
|
||||
order: 'name ASC',
|
||||
}"
|
||||
auto-load
|
||||
@on-fetch="(data) => (zonesOptions = data)"
|
||||
/>
|
||||
<VnTable
|
||||
ref="paginateRef"
|
||||
data-key="SalesMonitorTickets"
|
||||
url="SalesMonitors/salesFilter"
|
||||
search-url="SalesMonitorTickets"
|
||||
:filter="filter"
|
||||
:limit="20"
|
||||
: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 #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>
|
||||
<template #column-problems="{ row }">
|
||||
<QTd class="no-padding" 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 class="no-padding">
|
||||
<span class="link" @click.stop.prevent>
|
||||
{{ row.id }}
|
||||
<TicketDescriptorProxy :id="row.id" />
|
||||
</span>
|
||||
</QTd>
|
||||
</template>
|
||||
<template #column-client="{ row }">
|
||||
<QTd class="no-padding" @click.stop.prevent>
|
||||
<span class="link">{{ row.nickname }}</span>
|
||||
<CustomerDescriptorProxy :id="row.clientFk" />
|
||||
</QTd>
|
||||
</template>
|
||||
<template #column-salesPerson="{ row }">
|
||||
<QTd class="no-padding" @click.stop.prevent>
|
||||
<span class="link">{{ row.userName }}</span>
|
||||
<WorkerDescriptorProxy :id="row.salesPersonFk" />
|
||||
</QTd>
|
||||
</template>
|
||||
<template #column-date="{ row }">
|
||||
<QTd class="no-padding">
|
||||
<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 class="no-padding" @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 class="no-padding">
|
||||
<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 class="no-padding" @click.stop.prevent>
|
||||
<span class="link">{{ row.zoneName }}</span>
|
||||
<ZoneDescriptorProxy :id="row.zoneFk" />
|
||||
</QTd>
|
||||
</template>
|
||||
<template #column-total="{ row }">
|
||||
<QTd class="no-padding">
|
||||
<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