#7353 fine tunning monitors #624
|
|
@ -73,6 +73,10 @@ const $props = defineProps({
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: true,
|
default: true,
|
||||||
},
|
},
|
||||||
|
params: {
|
||||||
|
type: Object,
|
||||||
|
default: null,
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
|
|
@ -205,6 +209,7 @@ function nullishToTrue(value) {
|
||||||
:limit="limit"
|
:limit="limit"
|
||||||
:sort-by="sortBy"
|
:sort-by="sortBy"
|
||||||
:fields="fields"
|
:fields="fields"
|
||||||
|
:params="params"
|
||||||
/>
|
/>
|
||||||
<QSelect
|
<QSelect
|
||||||
v-model="value"
|
v-model="value"
|
||||||
|
|
|
||||||
|
|
@ -180,10 +180,10 @@ const tagsList = computed(() => {
|
||||||
});
|
});
|
||||||
|
|
||||||
const tags = computed(() => {
|
const tags = computed(() => {
|
||||||
return tagsList.value.filter((tag) => !($props.customTags || []).includes(tag.key));
|
return tagsList.value.filter((tag) => !($props.customTags || []).includes(tag.label));
|
||||||
|
|
|||||||
});
|
});
|
||||||
const customTags = computed(() =>
|
const customTags = computed(() =>
|
||||||
tagsList.value.filter((tag) => ($props.customTags || []).includes(tag.key))
|
tagsList.value.filter((tag) => ($props.customTags || []).includes(tag.label))
|
||||||
);
|
);
|
||||||
|
|
||||||
async function remove(key) {
|
async function remove(key) {
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
export default function dateRange(value) {
|
export default function dateRange(value) {
|
||||||
const minHour = new Date(value);
|
const minHour = new Date(value);
|
||||||
minHour.setHours(0, 0, 0, 0);
|
minHour.setHours(0, 0, 0, 0);
|
||||||
const maxHour = new Date();
|
const maxHour = new Date(value);
|
||||||
jorgep
commented
Si no te pone hasta la fecha de hoy. Si no te pone hasta la fecha de hoy.
|
|||||||
maxHour.setHours(23, 59, 59, 59);
|
maxHour.setHours(23, 59, 59, 59);
|
||||||
|
|
||||||
return [minHour, maxHour];
|
return [minHour, maxHour];
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import SalesClientTable from './MonitorSaleClients.vue';
|
import SalesClientTable from './MonitorClients.vue';
|
||||||
import SalesOrdersTable from './MonitorSaleOrders.vue';
|
import SalesOrdersTable from './MonitorOrders.vue';
|
||||||
import VnRow from 'src/components/ui/VnRow.vue';
|
import VnRow from 'src/components/ui/VnRow.vue';
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
|
|
|
||||||
|
|
@ -191,7 +191,6 @@ const openTab = (id) =>
|
||||||
</template>
|
</template>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
jorgep marked this conversation as resolved
jsegarra
commented
Está diferente a MonitorClients, por algún detalle en concreto que se me pase? Está diferente a MonitorClients, por algún detalle en concreto que se me pase?
jorgep
commented
Las filas redirigen al hacer click. En clients no. Las filas redirigen al hacer click. En clients no.
|
|||||||
.q-td {
|
.q-td {
|
||||||
color: gray;
|
|
||||||
max-width: 140px;
|
max-width: 140px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -0,0 +1,261 @@
|
||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
import { useI18n } from 'vue-i18n';
|
||||||
|
|
||||||
|
import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
|
||||||
|
import VnFilterPanelChip from 'src/components/ui/VnFilterPanelChip.vue';
|
||||||
|
import VnSelect from 'src/components/common/VnSelect.vue';
|
||||||
|
import VnInput from 'src/components/common/VnInput.vue';
|
||||||
|
import VnInputNumber from 'src/components/common/VnInputNumber.vue';
|
||||||
|
import FetchData from 'src/components/FetchData.vue';
|
||||||
|
|
||||||
|
defineProps({ dataKey: { type: String, required: true } });
|
||||||
|
const { t } = useI18n();
|
||||||
|
const warehouses = ref();
|
||||||
|
const groupedStates = ref();
|
||||||
|
|
||||||
|
const handleScopeDays = (params, days, callback) => {
|
||||||
|
if (!days) {
|
||||||
|
Object.assign(params, { from: undefined, to: undefined, scopeDays: undefined });
|
||||||
|
} else {
|
||||||
|
params.from = Date.vnNew();
|
||||||
|
const to = Date.vnNew();
|
||||||
|
to.setDate(to.getDate() + days);
|
||||||
|
to.setHours(23, 59, 59, 999);
|
||||||
|
params.to = to;
|
||||||
|
}
|
||||||
|
if (callback) callback();
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<FetchData url="Warehouses" auto-load @on-fetch="(data) => (warehouses = data)" />
|
||||||
|
jsegarra
commented
VnSelect podria tener esta url no? VnSelect podria tener esta url no?
No nos quitaremos la dependencia de FetchData pero ya que tenemos esa funcionalidad...
Y realmente warehouses solo se repite 4 veces y nos quitamos la variable que no tiene recorrido en este componente
jorgep
commented
Solo hay 88 registros en la tabla warehouse, cuando son tablas pequeñas se acordó cargarla toda de golpe. Solo hay 88 registros en la tabla warehouse, cuando son tablas pequeñas se acordó cargarla toda de golpe.
|
|||||||
|
<FetchData url="AlertLevels" auto-load @on-fetch="(data) => (groupedStates = data)" />
|
||||||
|
<VnFilterPanel
|
||||||
|
:data-key="dataKey"
|
||||||
|
:search-button="true"
|
||||||
|
:hidden-tags="['from', 'to']"
|
||||||
|
:custom-tags="['scopeDays']"
|
||||||
|
>
|
||||||
|
<template #tags="{ tag, formatFn }">
|
||||||
|
<div class="q-gutter-x-xs">
|
||||||
|
<strong v-text="`${t(`params.${tag.label}`)}:`" />
|
||||||
|
<span v-text="formatFn(tag.value)" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template #customTags="{ params, searchFn, formatFn }">
|
||||||
|
<VnFilterPanelChip
|
||||||
|
v-if="params.scopeDays"
|
||||||
|
removable
|
||||||
|
@remove="handleScopeDays(params, null, searchFn)"
|
||||||
|
>
|
||||||
|
<strong v-text="`${t(`params.scopeDays`)}:`" />
|
||||||
|
<span v-text="formatFn(params.scopeDays)" />
|
||||||
|
</VnFilterPanelChip>
|
||||||
|
</template>
|
||||||
|
<template #body="{ params }">
|
||||||
|
<QItem>
|
||||||
|
<QItemSection>
|
||||||
|
<VnInput
|
||||||
|
:label="t('params.clientFk')"
|
||||||
|
v-model="params.clientFk"
|
||||||
|
is-outlined
|
||||||
|
/>
|
||||||
|
</QItemSection>
|
||||||
|
</QItem>
|
||||||
|
<QItem>
|
||||||
|
<QItemSection>
|
||||||
|
<VnInput
|
||||||
|
:label="t('params.orderFk')"
|
||||||
|
v-model="params.orderFk"
|
||||||
|
is-outlined
|
||||||
|
/>
|
||||||
|
</QItemSection>
|
||||||
|
</QItem>
|
||||||
|
<QItem>
|
||||||
|
<QItemSection>
|
||||||
|
<!-- Si se borran desde los tags no funciona-->
|
||||||
|
<VnInputNumber
|
||||||
|
:label="t('params.scopeDays')"
|
||||||
|
v-model="params.scopeDays"
|
||||||
|
is-outlined
|
||||||
|
@update:model-value="(val) => handleScopeDays(params, val)"
|
||||||
|
@remove="(val) => handleScopeDays(params, val)"
|
||||||
|
/>
|
||||||
|
</QItemSection>
|
||||||
|
</QItem>
|
||||||
|
<QItem>
|
||||||
|
<QItemSection>
|
||||||
|
<VnInput
|
||||||
|
:label="t('params.nickname')"
|
||||||
|
v-model="params.nickname"
|
||||||
|
is-outlined
|
||||||
|
/>
|
||||||
|
</QItemSection>
|
||||||
|
</QItem>
|
||||||
|
<QItem>
|
||||||
|
<QItemSection>
|
||||||
|
<VnSelect
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
rounded
|
||||||
|
:label="t('params.salesPersonFk')"
|
||||||
|
v-model="params.salesPersonFk"
|
||||||
|
url="Workers/search"
|
||||||
|
:params="{ departmentCodes: ['VT'] }"
|
||||||
|
is-outlined
|
||||||
|
option-value="code"
|
||||||
|
option-label="nickname"
|
||||||
|
/>
|
||||||
|
</QItemSection>
|
||||||
|
</QItem>
|
||||||
|
<QItem>
|
||||||
|
<QItemSection>
|
||||||
|
<VnInput
|
||||||
|
:label="t('params.refFk')"
|
||||||
|
v-model="params.refFk"
|
||||||
|
is-outlined
|
||||||
|
/>
|
||||||
|
</QItemSection>
|
||||||
|
</QItem>
|
||||||
|
<QItem>
|
||||||
|
<QItemSection>
|
||||||
|
<VnSelect
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
rounded
|
||||||
|
:label="t('params.agencyModeFk')"
|
||||||
|
v-model="params.agencyModeFk"
|
||||||
|
url="AgencyModes/isActive"
|
||||||
|
is-outlined
|
||||||
|
/>
|
||||||
|
</QItemSection>
|
||||||
|
</QItem>
|
||||||
|
<QItem>
|
||||||
|
<QItemSection>
|
||||||
|
<VnSelect
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
rounded
|
||||||
|
:label="t('params.stateFk')"
|
||||||
|
v-model="params.stateFk"
|
||||||
|
url="States"
|
||||||
|
is-outlined
|
||||||
|
/>
|
||||||
|
</QItemSection>
|
||||||
|
</QItem>
|
||||||
|
<QItem>
|
||||||
|
<QItemSection>
|
||||||
|
<VnSelect
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
rounded
|
||||||
|
:label="t('params.groupedStates')"
|
||||||
|
v-model="params.alertLevel"
|
||||||
|
:options="groupedStates"
|
||||||
|
option-label="code"
|
||||||
|
/>
|
||||||
|
</QItemSection>
|
||||||
|
</QItem>
|
||||||
|
<QItem>
|
||||||
|
<QItemSection>
|
||||||
|
<VnSelect
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
rounded
|
||||||
|
:label="t('params.warehouseFk')"
|
||||||
|
v-model="params.warehouseFk"
|
||||||
|
:options="warehouses"
|
||||||
|
/>
|
||||||
|
</QItemSection>
|
||||||
|
</QItem>
|
||||||
|
<QItem>
|
||||||
|
<QItemSection>
|
||||||
|
<VnSelect
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
rounded
|
||||||
|
:label="t('params.provinceFk')"
|
||||||
|
v-model="params.provinceFk"
|
||||||
|
url="Provinces"
|
||||||
|
/>
|
||||||
|
</QItemSection>
|
||||||
|
</QItem>
|
||||||
|
<QItem>
|
||||||
|
<QItemSection>
|
||||||
|
<QCheckbox
|
||||||
|
:label="t('params.myTeam')"
|
||||||
|
v-model="params.myTeam"
|
||||||
|
toggle-indeterminate
|
||||||
|
/>
|
||||||
|
</QItemSection>
|
||||||
|
</QItem>
|
||||||
|
<QItem>
|
||||||
|
<QItemSection>
|
||||||
|
<QCheckbox
|
||||||
|
:label="t('params.problems')"
|
||||||
|
v-model="params.problems"
|
||||||
|
toggle-indeterminate
|
||||||
|
/>
|
||||||
|
</QItemSection>
|
||||||
|
</QItem>
|
||||||
|
<QItem>
|
||||||
|
<QItemSection>
|
||||||
|
<QCheckbox
|
||||||
|
:label="t('params.pending')"
|
||||||
|
v-model="params.pending"
|
||||||
|
toggle-indeterminate
|
||||||
|
/>
|
||||||
|
</QItemSection>
|
||||||
|
</QItem>
|
||||||
|
</template>
|
||||||
|
</VnFilterPanel>
|
||||||
|
</template>
|
||||||
|
<i18n>
|
||||||
|
en:
|
||||||
|
params:
|
||||||
|
clientFk: Client id
|
||||||
|
orderFk: Order id
|
||||||
|
scopeDays: Days onward
|
||||||
|
nickname: Nickname
|
||||||
|
salesPersonFk: Sales person
|
||||||
|
refFk: Invoice
|
||||||
|
agencyModeFk: Agency
|
||||||
|
stateFk: State
|
||||||
|
groupedStates: Grouped State
|
||||||
|
warehouseFk: Warehouse
|
||||||
|
provinceFk: Province
|
||||||
|
myTeam: My team
|
||||||
|
problems: With problems
|
||||||
|
pending: Pending
|
||||||
|
from: From
|
||||||
|
to: To
|
||||||
|
FREE: Free
|
||||||
|
DELIVERED: Delivered
|
||||||
|
ON_PREPARATION: On preparation
|
||||||
|
ON_PREVIOUS: On previous
|
||||||
|
PACKED: Packed
|
||||||
|
|
||||||
|
es:
|
||||||
|
params:
|
||||||
|
clientFk: Id cliente
|
||||||
|
orderFk: Id cesta
|
||||||
|
scopeDays: Días en adelante
|
||||||
|
nickname: Nombre mostrado
|
||||||
|
salesPersonFk: Comercial
|
||||||
|
refFk: Factura
|
||||||
|
agencyModeFk: Agencia
|
||||||
|
stateFk: Estado
|
||||||
|
groupedStates: Estado agrupado
|
||||||
|
warehouseFk: Almacén
|
||||||
|
provinceFk: Provincia
|
||||||
|
myTeam: Mi equipo
|
||||||
|
problems: Con problemas
|
||||||
|
pending: Pendiente
|
||||||
|
from: Desde
|
||||||
|
To: Hasta
|
||||||
|
FREE: Libre
|
||||||
|
DELIVERED: Servido
|
||||||
|
ON_PREPARATION: En preparación
|
||||||
|
ON_PREVIOUS: En previa
|
||||||
|
PACKED: Encajado
|
||||||
|
</i18n>
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
<script setup>
|
||||||
|
import VnSearchbar from 'components/ui/VnSearchbar.vue';
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<VnSearchbar
|
||||||
|
data-key="SalesMonitorTickets"
|
||||||
|
url="SalesMonitors/salesFilter"
|
||||||
|
:redirect="false"
|
||||||
|
:label="$t('searchBar.label')"
|
||||||
|
:info="$t('searchBar.info')"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
|
@ -12,12 +12,12 @@ import VnTable from 'components/VnTable/VnTable.vue';
|
||||||
import { useSummaryDialog } from 'src/composables/useSummaryDialog';
|
import { useSummaryDialog } from 'src/composables/useSummaryDialog';
|
||||||
import { toDateFormat } from 'src/filters/date.js';
|
import { toDateFormat } from 'src/filters/date.js';
|
||||||
import { toCurrency, dateRange } from 'src/filters';
|
import { toCurrency, dateRange } from 'src/filters';
|
||||||
import { useStateStore } from 'stores/useStateStore';
|
import RightMenu from 'src/components/common/RightMenu.vue';
|
||||||
import VnSearchbar from 'components/ui/VnSearchbar.vue';
|
import MonitorTicketSearchbar from './MonitorTicketSearchbar.vue';
|
||||||
|
import MonitorTicketFilter from './MonitorTicketFilter.vue';
|
||||||
|
|
||||||
const DEFAULT_AUTO_REFRESH = 2 * 60 * 1000; // 2min in ms
|
const DEFAULT_AUTO_REFRESH = 2 * 60 * 1000; // 2min in ms
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
const stateStore = useStateStore();
|
|
||||||
const autoRefresh = ref(false);
|
const autoRefresh = ref(false);
|
||||||
const tableRef = ref(null);
|
const tableRef = ref(null);
|
||||||
const provinceOpts = ref([]);
|
const provinceOpts = ref([]);
|
||||||
|
|
@ -325,23 +325,17 @@ const openTab = (id) =>
|
||||||
auto-load
|
auto-load
|
||||||
@on-fetch="(data) => (zoneOpts = data)"
|
@on-fetch="(data) => (zoneOpts = data)"
|
||||||
/>
|
/>
|
||||||
<template v-if="stateStore.isHeaderMounted()">
|
<MonitorTicketSearchbar />
|
||||||
<Teleport to="#searchbar">
|
<RightMenu>
|
||||||
<VnSearchbar
|
<template #right-panel>
|
||||||
data-key="SalesMonitorTickets"
|
<MonitorTicketFilter data-key="saleMonitorTickets" />
|
||||||
url="SalesMonitors/salesFilter"
|
</template>
|
||||||
:redirect="false"
|
</RightMenu>
|
||||||
:label="$t('searchBar.label')"
|
|
||||||
:info="$t('searchBar.info')"
|
|
||||||
/>
|
|
||||||
</Teleport>
|
|
||||||
</template>
|
|
||||||
<VnTable
|
<VnTable
|
||||||
ref="tableRef"
|
ref="tableRef"
|
||||||
data-key="SalesMonitorTickets"
|
data-key="saleMonitorTickets"
|
||||||
url="SalesMonitors/salesFilter"
|
url="SalesMonitors/salesFilter"
|
||||||
search-url="SalesMonitorTickets"
|
search-url="saleMonitorTickets"
|
||||||
:limit="20"
|
|
||||||
:expr-builder="exprBuilder"
|
:expr-builder="exprBuilder"
|
||||||
:offset="50"
|
:offset="50"
|
||||||
:columns="columns"
|
:columns="columns"
|
||||||
|
|
@ -357,6 +351,7 @@ const openTab = (id) =>
|
||||||
icon="refresh"
|
icon="refresh"
|
||||||
size="md"
|
size="md"
|
||||||
|
jorgep marked this conversation as resolved
jsegarra
commented
Añadir tooltip. Añadir tooltip.
|
|||||||
color="primary"
|
color="primary"
|
||||||
|
class="q-mr-sm"
|
||||||
dense
|
dense
|
||||||
flat
|
flat
|
||||||
@click="$refs.tableRef.reload()"
|
@click="$refs.tableRef.reload()"
|
||||||
|
|
@ -365,6 +360,7 @@ const openTab = (id) =>
|
||||||
v-model="autoRefresh"
|
v-model="autoRefresh"
|
||||||
:label="$t('salesTicketsTable.autoRefresh')"
|
:label="$t('salesTicketsTable.autoRefresh')"
|
||||||
@update:model-value="autoRefreshHandler"
|
@update:model-value="autoRefreshHandler"
|
||||||
|
dense
|
||||||
>
|
>
|
||||||
<QTooltip>{{ $t('refreshInfo') }}</QTooltip>
|
<QTooltip>{{ $t('refreshInfo') }}</QTooltip>
|
||||||
</QCheckbox>
|
</QCheckbox>
|
||||||
|
|
@ -28,7 +28,8 @@ export default {
|
||||||
title: 'ticketsMonitor',
|
title: 'ticketsMonitor',
|
||||||
icon: 'grid_view',
|
icon: 'grid_view',
|
||||||
},
|
},
|
||||||
component: () => import('src/pages/Monitor/MonitorTickets.vue'),
|
component: () =>
|
||||||
|
import('src/pages/Monitor/Ticket/MonitorTickets.vue'),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: 'clients-actions',
|
path: 'clients-actions',
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
esto no iba.