forked from verdnatura/salix-front
Merge branch 'dev' into 7129-someFixesAfterMigration
This commit is contained in:
commit
77d306ffeb
|
|
@ -332,299 +332,280 @@ defineExpose({
|
||||||
</QScrollArea>
|
</QScrollArea>
|
||||||
</QDrawer>
|
</QDrawer>
|
||||||
<!-- class in div to fix warn-->
|
<!-- class in div to fix warn-->
|
||||||
<div class="q-px-md">
|
|
||||||
<CrudModel
|
<CrudModel
|
||||||
v-bind="$attrs"
|
v-bind="$attrs"
|
||||||
:limit="20"
|
:class="$attrs['class'] ?? 'q-px-md'"
|
||||||
ref="CrudModelRef"
|
:limit="20"
|
||||||
@on-fetch="(...args) => emit('onFetch', ...args)"
|
ref="CrudModelRef"
|
||||||
:search-url="searchUrl"
|
@on-fetch="(...args) => emit('onFetch', ...args)"
|
||||||
:disable-infinite-scroll="isTableMode"
|
:search-url="searchUrl"
|
||||||
@save-changes="reload"
|
:disable-infinite-scroll="isTableMode"
|
||||||
:has-sub-toolbar="$attrs['hasSubToolbar'] ?? isEditable"
|
@save-changes="reload"
|
||||||
:auto-load="hasParams || $attrs['auto-load']"
|
:has-sub-toolbar="$attrs['hasSubToolbar'] ?? isEditable"
|
||||||
>
|
:auto-load="hasParams || $attrs['auto-load']"
|
||||||
<template
|
>
|
||||||
v-for="(_, slotName) in $slots"
|
<template v-for="(_, slotName) in $slots" #[slotName]="slotData" :key="slotName">
|
||||||
#[slotName]="slotData"
|
<slot :name="slotName" v-bind="slotData ?? {}" :key="slotName" />
|
||||||
:key="slotName"
|
</template>
|
||||||
|
<template #body="{ rows }">
|
||||||
|
<QTable
|
||||||
|
v-bind="table"
|
||||||
|
class="vnTable"
|
||||||
|
:columns="splittedColumns.columns"
|
||||||
|
:rows="rows"
|
||||||
|
v-model:selected="selected"
|
||||||
|
:grid="!isTableMode"
|
||||||
|
table-header-class="bg-header"
|
||||||
|
card-container-class="grid-three"
|
||||||
|
flat
|
||||||
|
:style="isTableMode && `max-height: ${tableHeight}`"
|
||||||
|
virtual-scroll
|
||||||
|
@virtual-scroll="
|
||||||
|
(event) =>
|
||||||
|
event.index > rows.length - 2 &&
|
||||||
|
CrudModelRef.vnPaginateRef.paginate()
|
||||||
|
"
|
||||||
|
@row-click="(_, row) => rowClickFunction && rowClickFunction(row)"
|
||||||
|
@update:selected="emit('update:selected', $event)"
|
||||||
>
|
>
|
||||||
<slot :name="slotName" v-bind="slotData ?? {}" :key="slotName" />
|
<template #top-left v-if="!$props.withoutHeader">
|
||||||
</template>
|
<slot name="top-left"></slot>
|
||||||
<template #body="{ rows }">
|
</template>
|
||||||
<QTable
|
<template #top-right v-if="!$props.withoutHeader">
|
||||||
v-bind="table"
|
<VnVisibleColumn
|
||||||
class="vnTable"
|
v-if="isTableMode"
|
||||||
:columns="splittedColumns.columns"
|
v-model="splittedColumns.columns"
|
||||||
:rows="rows"
|
:table-code="tableCode ?? route.name"
|
||||||
v-model:selected="selected"
|
:skip="columnsVisibilitySkipped"
|
||||||
:grid="!isTableMode"
|
/>
|
||||||
table-header-class="bg-header"
|
<QBtnToggle
|
||||||
card-container-class="grid-three"
|
v-model="mode"
|
||||||
flat
|
toggle-color="primary"
|
||||||
:style="isTableMode && `max-height: ${tableHeight}`"
|
class="bg-vn-section-color"
|
||||||
virtual-scroll
|
dense
|
||||||
@virtual-scroll="
|
:options="tableModes.filter((mode) => !mode.disable)"
|
||||||
(event) =>
|
/>
|
||||||
event.index > rows.length - 2 &&
|
<QBtn
|
||||||
CrudModelRef.vnPaginateRef.paginate()
|
v-if="$props.rightSearch"
|
||||||
"
|
icon="filter_alt"
|
||||||
@row-click="(_, row) => rowClickFunction && rowClickFunction(row)"
|
class="bg-vn-section-color q-ml-md"
|
||||||
@update:selected="emit('update:selected', $event)"
|
dense
|
||||||
>
|
@click="stateStore.toggleRightDrawer()"
|
||||||
<template #top-left v-if="!$props.withoutHeader">
|
/>
|
||||||
<slot name="top-left"></slot>
|
</template>
|
||||||
</template>
|
<template #header-cell="{ col }">
|
||||||
<template #top-right v-if="!$props.withoutHeader">
|
<QTh v-if="col.visible ?? true">
|
||||||
<VnVisibleColumn
|
<div
|
||||||
v-if="isTableMode"
|
class="column self-start q-ml-xs ellipsis"
|
||||||
v-model="splittedColumns.columns"
|
:class="`text-${col?.align ?? 'left'}`"
|
||||||
:table-code="tableCode ?? route.name"
|
:style="$props.columnSearch ? 'height: 75px' : ''"
|
||||||
:skip="columnsVisibilitySkipped"
|
>
|
||||||
/>
|
<div class="row items-center no-wrap" style="height: 30px">
|
||||||
<QBtnToggle
|
<QTooltip v-if="col.toolTip">{{ col.toolTip }}</QTooltip>
|
||||||
v-model="mode"
|
<VnTableOrder
|
||||||
toggle-color="primary"
|
v-model="orders[col.orderBy ?? col.name]"
|
||||||
class="bg-vn-section-color"
|
:name="col.orderBy ?? col.name"
|
||||||
dense
|
:label="col?.label"
|
||||||
:options="tableModes.filter((mode) => !mode.disable)"
|
|
||||||
/>
|
|
||||||
<QBtn
|
|
||||||
v-if="$props.rightSearch"
|
|
||||||
icon="filter_alt"
|
|
||||||
class="bg-vn-section-color q-ml-md"
|
|
||||||
dense
|
|
||||||
@click="stateStore.toggleRightDrawer()"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
<template #header-cell="{ col }">
|
|
||||||
<QTh v-if="col.visible ?? true">
|
|
||||||
<div
|
|
||||||
class="column self-start q-ml-xs ellipsis"
|
|
||||||
:class="`text-${col?.align ?? 'left'}`"
|
|
||||||
:style="$props.columnSearch ? 'height: 75px' : ''"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="row items-center no-wrap"
|
|
||||||
style="height: 30px"
|
|
||||||
>
|
|
||||||
<QTooltip v-if="col.toolTip">{{
|
|
||||||
col.toolTip
|
|
||||||
}}</QTooltip>
|
|
||||||
<VnTableOrder
|
|
||||||
v-model="orders[col.orderBy ?? col.name]"
|
|
||||||
:name="col.orderBy ?? col.name"
|
|
||||||
:label="col?.label"
|
|
||||||
:data-key="$attrs['data-key']"
|
|
||||||
:search-url="searchUrl"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<VnTableFilter
|
|
||||||
v-if="$props.columnSearch"
|
|
||||||
:column="col"
|
|
||||||
:show-title="true"
|
|
||||||
:data-key="$attrs['data-key']"
|
:data-key="$attrs['data-key']"
|
||||||
v-model="params[columnName(col)]"
|
|
||||||
:search-url="searchUrl"
|
:search-url="searchUrl"
|
||||||
class="full-width"
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</QTh>
|
<VnTableFilter
|
||||||
</template>
|
v-if="$props.columnSearch"
|
||||||
<template #header-cell-tableActions>
|
:column="col"
|
||||||
<QTh auto-width class="sticky" />
|
:show-title="true"
|
||||||
</template>
|
:data-key="$attrs['data-key']"
|
||||||
<template #body-cell-tableStatus="{ col, row }">
|
v-model="params[columnName(col)]"
|
||||||
<QTd auto-width :class="getColAlign(col)">
|
:search-url="searchUrl"
|
||||||
<VnTableChip
|
class="full-width"
|
||||||
:columns="splittedColumns.columnChips"
|
/>
|
||||||
|
</div>
|
||||||
|
</QTh>
|
||||||
|
</template>
|
||||||
|
<template #header-cell-tableActions>
|
||||||
|
<QTh auto-width class="sticky" />
|
||||||
|
</template>
|
||||||
|
<template #body-cell-tableStatus="{ col, row }">
|
||||||
|
<QTd auto-width :class="getColAlign(col)">
|
||||||
|
<VnTableChip :columns="splittedColumns.columnChips" :row="row">
|
||||||
|
<template #afterChip>
|
||||||
|
<slot name="afterChip" :row="row"></slot>
|
||||||
|
</template>
|
||||||
|
</VnTableChip>
|
||||||
|
</QTd>
|
||||||
|
</template>
|
||||||
|
<template #body-cell="{ col, row, rowIndex }">
|
||||||
|
<!-- Columns -->
|
||||||
|
<QTd
|
||||||
|
auto-width
|
||||||
|
class="no-margin q-px-xs"
|
||||||
|
:class="[getColAlign(col), col.columnClass]"
|
||||||
|
v-if="col.visible ?? true"
|
||||||
|
@click.ctrl="
|
||||||
|
($event) =>
|
||||||
|
rowCtrlClickFunction && rowCtrlClickFunction($event, row)
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<slot
|
||||||
|
:name="`column-${col.name}`"
|
||||||
|
:col="col"
|
||||||
|
:row="row"
|
||||||
|
:row-index="rowIndex"
|
||||||
|
>
|
||||||
|
<VnTableColumn
|
||||||
|
:column="col"
|
||||||
:row="row"
|
:row="row"
|
||||||
>
|
:is-editable="col.isEditable ?? isEditable"
|
||||||
<template #afterChip>
|
v-model="row[col.name]"
|
||||||
<slot name="afterChip" :row="row"></slot>
|
component-prop="columnField"
|
||||||
</template>
|
/>
|
||||||
</VnTableChip>
|
</slot>
|
||||||
</QTd>
|
</QTd>
|
||||||
</template>
|
</template>
|
||||||
<template #body-cell="{ col, row, rowIndex }">
|
<template #body-cell-tableActions="{ col, row }">
|
||||||
<!-- Columns -->
|
<QTd
|
||||||
<QTd
|
auto-width
|
||||||
auto-width
|
:class="getColAlign(col)"
|
||||||
class="no-margin q-px-xs"
|
class="sticky no-padding"
|
||||||
:class="[getColAlign(col), col.columnClass]"
|
@click="stopEventPropagation($event)"
|
||||||
v-if="col.visible ?? true"
|
>
|
||||||
@click.ctrl="
|
<QBtn
|
||||||
($event) =>
|
v-for="(btn, index) of col.actions"
|
||||||
rowCtrlClickFunction &&
|
:key="index"
|
||||||
rowCtrlClickFunction($event, row)
|
:title="btn.title"
|
||||||
|
:icon="btn.icon"
|
||||||
|
class="q-px-sm"
|
||||||
|
flat
|
||||||
|
:class="
|
||||||
|
btn.isPrimary ? 'text-primary-light' : 'color-vn-text '
|
||||||
|
"
|
||||||
|
:style="`visibility: ${
|
||||||
|
(btn.show && btn.show(row)) ?? true ? 'visible' : 'hidden'
|
||||||
|
}`"
|
||||||
|
@click="btn.action(row)"
|
||||||
|
/>
|
||||||
|
</QTd>
|
||||||
|
</template>
|
||||||
|
<template #item="{ row, colsMap }">
|
||||||
|
<component
|
||||||
|
:is="$props.redirect ? 'router-link' : 'span'"
|
||||||
|
:to="`/${$props.redirect}/` + row.id"
|
||||||
|
>
|
||||||
|
<QCard
|
||||||
|
bordered
|
||||||
|
flat
|
||||||
|
class="row no-wrap justify-between cursor-pointer"
|
||||||
|
@click="
|
||||||
|
(_, row) => {
|
||||||
|
$props.rowClick && $props.rowClick(row);
|
||||||
|
}
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
<slot
|
<QCardSection
|
||||||
:name="`column-${col.name}`"
|
vertical
|
||||||
:col="col"
|
class="no-margin no-padding"
|
||||||
:row="row"
|
:class="colsMap.tableActions ? 'w-80' : 'fit'"
|
||||||
:row-index="rowIndex"
|
|
||||||
>
|
|
||||||
<VnTableColumn
|
|
||||||
:column="col"
|
|
||||||
:row="row"
|
|
||||||
:is-editable="col.isEditable ?? isEditable"
|
|
||||||
v-model="row[col.name]"
|
|
||||||
component-prop="columnField"
|
|
||||||
/>
|
|
||||||
</slot>
|
|
||||||
</QTd>
|
|
||||||
</template>
|
|
||||||
<template #body-cell-tableActions="{ col, row }">
|
|
||||||
<QTd
|
|
||||||
auto-width
|
|
||||||
:class="getColAlign(col)"
|
|
||||||
class="sticky no-padding"
|
|
||||||
@click="stopEventPropagation($event)"
|
|
||||||
>
|
|
||||||
<QBtn
|
|
||||||
v-for="(btn, index) of col.actions"
|
|
||||||
:key="index"
|
|
||||||
:title="btn.title"
|
|
||||||
:icon="btn.icon"
|
|
||||||
class="q-px-sm"
|
|
||||||
flat
|
|
||||||
:class="
|
|
||||||
btn.isPrimary
|
|
||||||
? 'text-primary-light'
|
|
||||||
: 'color-vn-text '
|
|
||||||
"
|
|
||||||
:style="`visibility: ${
|
|
||||||
(btn.show && btn.show(row)) ?? true
|
|
||||||
? 'visible'
|
|
||||||
: 'hidden'
|
|
||||||
}`"
|
|
||||||
@click="btn.action(row)"
|
|
||||||
/>
|
|
||||||
</QTd>
|
|
||||||
</template>
|
|
||||||
<template #item="{ row, colsMap }">
|
|
||||||
<component
|
|
||||||
:is="$props.redirect ? 'router-link' : 'span'"
|
|
||||||
:to="`/${$props.redirect}/` + row.id"
|
|
||||||
>
|
|
||||||
<QCard
|
|
||||||
bordered
|
|
||||||
flat
|
|
||||||
class="row no-wrap justify-between cursor-pointer"
|
|
||||||
@click="
|
|
||||||
(_, row) => {
|
|
||||||
$props.rowClick && $props.rowClick(row);
|
|
||||||
}
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
|
<!-- Chips -->
|
||||||
<QCardSection
|
<QCardSection
|
||||||
vertical
|
v-if="splittedColumns.chips.length"
|
||||||
class="no-margin no-padding"
|
class="no-margin q-px-xs q-py-none"
|
||||||
:class="colsMap.tableActions ? 'w-80' : 'fit'"
|
|
||||||
>
|
>
|
||||||
<!-- Chips -->
|
<VnTableChip
|
||||||
<QCardSection
|
:columns="splittedColumns.chips"
|
||||||
v-if="splittedColumns.chips.length"
|
:row="row"
|
||||||
class="no-margin q-px-xs q-py-none"
|
|
||||||
>
|
>
|
||||||
<VnTableChip
|
<template #afterChip>
|
||||||
:columns="splittedColumns.chips"
|
<slot name="afterChip" :row="row"></slot>
|
||||||
:row="row"
|
</template>
|
||||||
>
|
</VnTableChip>
|
||||||
<template #afterChip>
|
</QCardSection>
|
||||||
<slot name="afterChip" :row="row"></slot>
|
<!-- Title -->
|
||||||
</template>
|
<QCardSection
|
||||||
</VnTableChip>
|
v-if="splittedColumns.title"
|
||||||
</QCardSection>
|
class="q-pl-sm q-py-none text-primary-light text-bold text-h6 cardEllipsis"
|
||||||
<!-- Title -->
|
>
|
||||||
<QCardSection
|
<span
|
||||||
v-if="splittedColumns.title"
|
:title="row[splittedColumns.title.name]"
|
||||||
class="q-pl-sm q-py-none text-primary-light text-bold text-h6 cardEllipsis"
|
@click="stopEventPropagation($event)"
|
||||||
|
class="cursor-text"
|
||||||
>
|
>
|
||||||
<span
|
{{ row[splittedColumns.title.name] }}
|
||||||
:title="row[splittedColumns.title.name]"
|
</span>
|
||||||
@click="stopEventPropagation($event)"
|
</QCardSection>
|
||||||
class="cursor-text"
|
<!-- Fields -->
|
||||||
>
|
<QCardSection
|
||||||
{{ row[splittedColumns.title.name] }}
|
class="q-pl-sm q-pr-lg q-py-xs"
|
||||||
</span>
|
:class="$props.cardClass"
|
||||||
</QCardSection>
|
>
|
||||||
<!-- Fields -->
|
<div
|
||||||
<QCardSection
|
v-for="(
|
||||||
class="q-pl-sm q-pr-lg q-py-xs"
|
col, index
|
||||||
:class="$props.cardClass"
|
) of splittedColumns.cardVisible"
|
||||||
|
:key="col.name"
|
||||||
|
class="fields"
|
||||||
>
|
>
|
||||||
<div
|
<VnLv
|
||||||
v-for="(
|
:label="
|
||||||
col, index
|
!col.component && col.label
|
||||||
) of splittedColumns.cardVisible"
|
? `${col.label}:`
|
||||||
:key="col.name"
|
: ''
|
||||||
class="fields"
|
"
|
||||||
>
|
>
|
||||||
<VnLv
|
<template #value>
|
||||||
:label="
|
<span
|
||||||
!col.component && col.label
|
@click="stopEventPropagation($event)"
|
||||||
? `${col.label}:`
|
>
|
||||||
: ''
|
<slot
|
||||||
"
|
:name="`column-${col.name}`"
|
||||||
>
|
:col="col"
|
||||||
<template #value>
|
:row="row"
|
||||||
<span
|
:row-index="index"
|
||||||
@click="
|
|
||||||
stopEventPropagation($event)
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
<slot
|
<VnTableColumn
|
||||||
:name="`column-${col.name}`"
|
:column="col"
|
||||||
:col="col"
|
|
||||||
:row="row"
|
:row="row"
|
||||||
:row-index="index"
|
:is-editable="false"
|
||||||
>
|
v-model="row[col.name]"
|
||||||
<VnTableColumn
|
component-prop="columnField"
|
||||||
:column="col"
|
:show-label="true"
|
||||||
:row="row"
|
/>
|
||||||
:is-editable="false"
|
</slot>
|
||||||
v-model="row[col.name]"
|
</span>
|
||||||
component-prop="columnField"
|
</template>
|
||||||
:show-label="true"
|
</VnLv>
|
||||||
/>
|
</div>
|
||||||
</slot>
|
|
||||||
</span>
|
|
||||||
</template>
|
|
||||||
</VnLv>
|
|
||||||
</div>
|
|
||||||
</QCardSection>
|
|
||||||
</QCardSection>
|
</QCardSection>
|
||||||
<!-- Actions -->
|
</QCardSection>
|
||||||
<QCardSection
|
<!-- Actions -->
|
||||||
v-if="colsMap.tableActions"
|
<QCardSection
|
||||||
class="column flex-center w-10 no-margin q-pa-xs q-gutter-y-xs"
|
v-if="colsMap.tableActions"
|
||||||
@click="stopEventPropagation($event)"
|
class="column flex-center w-10 no-margin q-pa-xs q-gutter-y-xs"
|
||||||
>
|
@click="stopEventPropagation($event)"
|
||||||
<QBtn
|
>
|
||||||
v-for="(btn, index) of splittedColumns.actions
|
<QBtn
|
||||||
.actions"
|
v-for="(btn, index) of splittedColumns.actions
|
||||||
:key="index"
|
.actions"
|
||||||
:title="btn.title"
|
:key="index"
|
||||||
:icon="btn.icon"
|
:title="btn.title"
|
||||||
class="q-pa-xs"
|
:icon="btn.icon"
|
||||||
flat
|
class="q-pa-xs"
|
||||||
:class="
|
flat
|
||||||
btn.isPrimary
|
:class="
|
||||||
? 'text-primary-light'
|
btn.isPrimary
|
||||||
: 'color-vn-text '
|
? 'text-primary-light'
|
||||||
"
|
: 'color-vn-text '
|
||||||
@click="btn.action(row)"
|
"
|
||||||
/>
|
@click="btn.action(row)"
|
||||||
</QCardSection>
|
/>
|
||||||
</QCard>
|
</QCardSection>
|
||||||
</component>
|
</QCard>
|
||||||
</template>
|
</component>
|
||||||
</QTable>
|
</template>
|
||||||
</template>
|
</QTable>
|
||||||
</CrudModel>
|
</template>
|
||||||
</div>
|
</CrudModel>
|
||||||
<QPageSticky v-if="create" :offset="[20, 20]" style="z-index: 2">
|
<QPageSticky v-if="create" :offset="[20, 20]" style="z-index: 2">
|
||||||
<QBtn @click="showForm = !showForm" color="primary" fab icon="add" />
|
<QBtn @click="showForm = !showForm" color="primary" fab icon="add" />
|
||||||
<QTooltip>
|
<QTooltip>
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@ import { onMounted, watch, computed, ref } from 'vue';
|
||||||
import { date } from 'quasar';
|
import { date } from 'quasar';
|
||||||
import { useI18n } from 'vue-i18n';
|
import { useI18n } from 'vue-i18n';
|
||||||
|
|
||||||
const model = defineModel({ type: String });
|
const model = defineModel({ type: [String, Date] });
|
||||||
const $props = defineProps({
|
const $props = defineProps({
|
||||||
isOutlined: {
|
isOutlined: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
|
|
|
||||||
|
|
@ -77,6 +77,10 @@ const $props = defineProps({
|
||||||
type: Object,
|
type: Object,
|
||||||
default: null,
|
default: null,
|
||||||
},
|
},
|
||||||
|
noOne: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
|
|
@ -89,6 +93,11 @@ const myOptionsOriginal = ref([]);
|
||||||
const vnSelectRef = ref();
|
const vnSelectRef = ref();
|
||||||
const dataRef = ref();
|
const dataRef = ref();
|
||||||
const lastVal = ref();
|
const lastVal = ref();
|
||||||
|
const noOneText = t('globals.noOne');
|
||||||
|
const noOneOpt = ref({
|
||||||
|
[optionValue.value]: false,
|
||||||
|
[optionLabel.value]: noOneText,
|
||||||
|
});
|
||||||
|
|
||||||
const value = computed({
|
const value = computed({
|
||||||
get() {
|
get() {
|
||||||
|
|
@ -104,9 +113,11 @@ watch(options, (newValue) => {
|
||||||
setOptions(newValue);
|
setOptions(newValue);
|
||||||
});
|
});
|
||||||
|
|
||||||
watch(modelValue, (newValue) => {
|
watch(modelValue, async (newValue) => {
|
||||||
if (!myOptions.value.some((option) => option[optionValue.value] == newValue))
|
if (!myOptions.value.some((option) => option[optionValue.value] == newValue))
|
||||||
fetchFilter(newValue);
|
await fetchFilter(newValue);
|
||||||
|
|
||||||
|
if ($props.noOne) myOptions.value.unshift(noOneOpt.value);
|
||||||
});
|
});
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
|
|
@ -169,6 +180,7 @@ async function fetchFilter(val) {
|
||||||
const fetchOptions = { where, include, limit };
|
const fetchOptions = { where, include, limit };
|
||||||
if (fields) fetchOptions.fields = fields;
|
if (fields) fetchOptions.fields = fields;
|
||||||
if (sortBy) fetchOptions.order = sortBy;
|
if (sortBy) fetchOptions.order = sortBy;
|
||||||
|
|
||||||
return dataRef.value.fetch(fetchOptions);
|
return dataRef.value.fetch(fetchOptions);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -189,6 +201,9 @@ async function filterHandler(val, update) {
|
||||||
} else newOptions = filter(val, myOptionsOriginal.value);
|
} else newOptions = filter(val, myOptionsOriginal.value);
|
||||||
update(
|
update(
|
||||||
() => {
|
() => {
|
||||||
|
if ($props.noOne && noOneText.toLowerCase().includes(val.toLowerCase()))
|
||||||
|
newOptions.unshift(noOneOpt.value);
|
||||||
|
|
||||||
myOptions.value = newOptions;
|
myOptions.value = newOptions;
|
||||||
},
|
},
|
||||||
(ref) => {
|
(ref) => {
|
||||||
|
|
|
||||||
|
|
@ -24,7 +24,7 @@ const $props = defineProps({
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: true,
|
default: true,
|
||||||
},
|
},
|
||||||
unRemovableParams: {
|
unremovableParams: {
|
||||||
type: Array,
|
type: Array,
|
||||||
required: false,
|
required: false,
|
||||||
default: () => [],
|
default: () => [],
|
||||||
|
|
@ -148,7 +148,7 @@ async function clearFilters() {
|
||||||
arrayData.reset(['skip', 'filter.skip', 'page']);
|
arrayData.reset(['skip', 'filter.skip', 'page']);
|
||||||
// Filtrar los params no removibles
|
// Filtrar los params no removibles
|
||||||
const removableFilters = Object.keys(userParams.value).filter((param) =>
|
const removableFilters = Object.keys(userParams.value).filter((param) =>
|
||||||
$props.unRemovableParams.includes(param)
|
$props.unremovableParams.includes(param)
|
||||||
);
|
);
|
||||||
const newParams = {};
|
const newParams = {};
|
||||||
// Conservar solo los params que no son removibles
|
// Conservar solo los params que no son removibles
|
||||||
|
|
@ -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) {
|
||||||
|
|
@ -268,7 +268,7 @@ function sanitizer(params) {
|
||||||
<VnFilterPanelChip
|
<VnFilterPanelChip
|
||||||
v-for="chip of tags"
|
v-for="chip of tags"
|
||||||
:key="chip.label"
|
:key="chip.label"
|
||||||
:removable="!unRemovableParams.includes(chip.label)"
|
:removable="!unremovableParams?.includes(chip.label)"
|
||||||
@remove="remove(chip.label)"
|
@remove="remove(chip.label)"
|
||||||
>
|
>
|
||||||
<slot name="tags" :tag="chip" :format-fn="formatValue">
|
<slot name="tags" :tag="chip" :format-fn="formatValue">
|
||||||
|
|
|
||||||
|
|
@ -10,6 +10,10 @@ const props = defineProps({
|
||||||
type: String,
|
type: String,
|
||||||
required: true,
|
required: true,
|
||||||
},
|
},
|
||||||
|
class: {
|
||||||
|
type: String,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
autoLoad: {
|
autoLoad: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false,
|
default: false,
|
||||||
|
|
@ -215,7 +219,7 @@ defineExpose({ fetch, addFilter, paginate });
|
||||||
v-if="store.data"
|
v-if="store.data"
|
||||||
@load="onLoad"
|
@load="onLoad"
|
||||||
:offset="offset"
|
:offset="offset"
|
||||||
class="full-width"
|
:class="['full-width', props.class]"
|
||||||
:disable="disableInfiniteScroll || !store.hasMoreData"
|
:disable="disableInfiniteScroll || !store.hasMoreData"
|
||||||
v-bind="$attrs"
|
v-bind="$attrs"
|
||||||
>
|
>
|
||||||
|
|
|
||||||
|
|
@ -253,7 +253,6 @@ input::-webkit-inner-spin-button {
|
||||||
}
|
}
|
||||||
td {
|
td {
|
||||||
font-size: 11pt;
|
font-size: 11pt;
|
||||||
border-top: 1px solid var(--vn-page-color);
|
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -20,21 +20,21 @@ export function isValidDate(date) {
|
||||||
* Converts a given date to a specific format.
|
* Converts a given date to a specific format.
|
||||||
*
|
*
|
||||||
* @param {number|string|Date} date - The date to be formatted.
|
* @param {number|string|Date} date - The date to be formatted.
|
||||||
|
* @param {Object} opts - Optional parameters to customize the output format.
|
||||||
* @returns {string} The formatted date as a string in 'dd/mm/yyyy' format. If the provided date is not valid, an empty string is returned.
|
* @returns {string} The formatted date as a string in 'dd/mm/yyyy' format. If the provided date is not valid, an empty string is returned.
|
||||||
*
|
*
|
||||||
* @example
|
* @example
|
||||||
* // returns "02/12/2022"
|
* // returns "02/12/2022"
|
||||||
* toDateFormat(new Date(2022, 11, 2));
|
* toDateFormat(new Date(2022, 11, 2));
|
||||||
*/
|
*/
|
||||||
export function toDateFormat(date, locale = 'es-ES') {
|
export function toDateFormat(date, locale = 'es-ES', opts = {}) {
|
||||||
if (!isValidDate(date)) {
|
if (!isValidDate(date)) return '';
|
||||||
return '';
|
|
||||||
}
|
const format = Object.assign(
|
||||||
return new Date(date).toLocaleDateString(locale, {
|
{ year: 'numeric', month: '2-digit', day: '2-digit' },
|
||||||
year: 'numeric',
|
opts
|
||||||
month: '2-digit',
|
);
|
||||||
day: '2-digit',
|
return new Date(date).toLocaleDateString(locale, format);
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
||||||
|
|
@ -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);
|
||||||
maxHour.setHours(23, 59, 59, 59);
|
maxHour.setHours(23, 59, 59, 59);
|
||||||
|
|
||||||
return [minHour, maxHour];
|
return [minHour, maxHour];
|
||||||
|
|
|
||||||
|
|
@ -94,6 +94,7 @@ globals:
|
||||||
from: From
|
from: From
|
||||||
to: To
|
to: To
|
||||||
notes: Notes
|
notes: Notes
|
||||||
|
refresh: Refresh
|
||||||
pageTitles:
|
pageTitles:
|
||||||
logIn: Login
|
logIn: Login
|
||||||
summary: Summary
|
summary: Summary
|
||||||
|
|
@ -255,6 +256,8 @@ globals:
|
||||||
twoFactor: Two factor
|
twoFactor: Two factor
|
||||||
recoverPassword: Recover password
|
recoverPassword: Recover password
|
||||||
resetPassword: Reset password
|
resetPassword: Reset password
|
||||||
|
ticketsMonitor: Tickets monitor
|
||||||
|
clientsActionsMonitor: Clients and actions
|
||||||
serial: Serial
|
serial: Serial
|
||||||
created: Created
|
created: Created
|
||||||
worker: Worker
|
worker: Worker
|
||||||
|
|
@ -269,6 +272,7 @@ globals:
|
||||||
subtitle: Are you sure exit without saving?
|
subtitle: Are you sure exit without saving?
|
||||||
createInvoiceIn: Create invoice in
|
createInvoiceIn: Create invoice in
|
||||||
myAccount: My account
|
myAccount: My account
|
||||||
|
noOne: No one
|
||||||
errors:
|
errors:
|
||||||
statusUnauthorized: Access denied
|
statusUnauthorized: Access denied
|
||||||
statusInternalServerError: An internal server error has ocurred
|
statusInternalServerError: An internal server error has ocurred
|
||||||
|
|
|
||||||
|
|
@ -94,6 +94,7 @@ globals:
|
||||||
from: Desde
|
from: Desde
|
||||||
to: Hasta
|
to: Hasta
|
||||||
notes: Notas
|
notes: Notas
|
||||||
|
refresh: Actualizar
|
||||||
pageTitles:
|
pageTitles:
|
||||||
logIn: Inicio de sesión
|
logIn: Inicio de sesión
|
||||||
summary: Resumen
|
summary: Resumen
|
||||||
|
|
@ -257,6 +258,8 @@ globals:
|
||||||
twoFactor: Doble factor
|
twoFactor: Doble factor
|
||||||
recoverPassword: Recuperar contraseña
|
recoverPassword: Recuperar contraseña
|
||||||
resetPassword: Restablecer contraseña
|
resetPassword: Restablecer contraseña
|
||||||
|
ticketsMonitor: Monitor de tickets
|
||||||
|
clientsActionsMonitor: Clientes y acciones
|
||||||
serial: Facturas por serie
|
serial: Facturas por serie
|
||||||
created: Fecha creación
|
created: Fecha creación
|
||||||
worker: Trabajador
|
worker: Trabajador
|
||||||
|
|
@ -271,6 +274,7 @@ globals:
|
||||||
subtitle: ¿Seguro que quiere salir sin guardar?
|
subtitle: ¿Seguro que quiere salir sin guardar?
|
||||||
createInvoiceIn: Crear factura recibida
|
createInvoiceIn: Crear factura recibida
|
||||||
myAccount: Mi cuenta
|
myAccount: Mi cuenta
|
||||||
|
noOne: Nadie
|
||||||
errors:
|
errors:
|
||||||
statusUnauthorized: Acceso denegado
|
statusUnauthorized: Acceso denegado
|
||||||
statusInternalServerError: Ha ocurrido un error interno del servidor
|
statusInternalServerError: Ha ocurrido un error interno del servidor
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,145 @@
|
||||||
|
<script setup>
|
||||||
|
import { ref, computed } from 'vue';
|
||||||
|
import { useI18n } from 'vue-i18n';
|
||||||
|
import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
|
||||||
|
import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
|
||||||
|
import { toDateFormat } from 'src/filters/date.js';
|
||||||
|
import VnTable from 'src/components/VnTable/VnTable.vue';
|
||||||
|
import VnInputDate from 'src/components/common/VnInputDate.vue';
|
||||||
|
import VnRow from 'src/components/ui/VnRow.vue';
|
||||||
|
import { dateRange } from 'src/filters';
|
||||||
|
const { t } = useI18n();
|
||||||
|
|
||||||
|
const dates = dateRange(Date.vnNew());
|
||||||
|
const from = ref(dates[0]);
|
||||||
|
const to = ref(dates[1]);
|
||||||
|
|
||||||
|
const filter = computed(() => {
|
||||||
|
const obj = {};
|
||||||
|
const formatFrom = setHours(from.value, 'from');
|
||||||
|
const formatTo = setHours(to.value, 'to');
|
||||||
|
let stamp;
|
||||||
|
|
||||||
|
if (!formatFrom && formatTo) stamp = { lte: formatTo };
|
||||||
|
else if (formatFrom && !formatTo) stamp = { gte: formatFrom };
|
||||||
|
else if (formatFrom && formatTo) stamp = { between: [formatFrom, formatTo] };
|
||||||
|
|
||||||
|
return Object.assign(obj, { where: { 'v.stamp': stamp } });
|
||||||
|
});
|
||||||
|
|
||||||
|
function exprBuilder(param, value) {
|
||||||
|
switch (param) {
|
||||||
|
case 'clientFk':
|
||||||
|
return { [`c.id`]: value };
|
||||||
|
case 'salesPersonFk':
|
||||||
|
return { [`c.${param}`]: value };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function setHours(date, type) {
|
||||||
|
if (!date) return null;
|
||||||
|
|
||||||
|
const d = new Date(date);
|
||||||
|
if (type == 'from') d.setHours(0, 0, 0, 0);
|
||||||
|
else d.setHours(23, 59, 59, 59);
|
||||||
|
return d;
|
||||||
|
}
|
||||||
|
|
||||||
|
const columns = computed(() => [
|
||||||
|
{
|
||||||
|
label: t('salesClientsTable.date'),
|
||||||
|
name: 'dated',
|
||||||
|
field: 'dated',
|
||||||
|
align: 'left',
|
||||||
|
columnFilter: false,
|
||||||
|
format: (row) => toDateFormat(row.dated, 'es-ES', { year: '2-digit' }),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: t('salesClientsTable.hour'),
|
||||||
|
name: 'hour',
|
||||||
|
field: 'hour',
|
||||||
|
align: 'left',
|
||||||
|
columnFilter: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: t('salesClientsTable.salesPerson'),
|
||||||
|
name: 'salesPersonFk',
|
||||||
|
field: 'salesPerson',
|
||||||
|
align: 'left',
|
||||||
|
columnField: {
|
||||||
|
component: null,
|
||||||
|
},
|
||||||
|
optionFilter: 'firstName',
|
||||||
|
columnFilter: {
|
||||||
|
component: 'select',
|
||||||
|
attrs: {
|
||||||
|
url: 'Workers/activeWithInheritedRole',
|
||||||
|
fields: ['id', 'name'],
|
||||||
|
sortBy: 'nickname ASC',
|
||||||
|
where: { role: 'salesPerson' },
|
||||||
|
useLike: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
columnClass: 'no-padding',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: t('salesClientsTable.client'),
|
||||||
|
field: 'clientName',
|
||||||
|
name: 'clientFk',
|
||||||
|
align: 'left',
|
||||||
|
columnField: {
|
||||||
|
component: null,
|
||||||
|
},
|
||||||
|
orderBy: 'c.name',
|
||||||
|
columnFilter: {
|
||||||
|
component: 'select',
|
||||||
|
attrs: {
|
||||||
|
url: 'Clients',
|
||||||
|
fields: ['id', 'name'],
|
||||||
|
sortBy: 'name ASC',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
columnClass: 'no-padding',
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<VnTable
|
||||||
|
ref="table"
|
||||||
|
data-key="SalesMonitorClients"
|
||||||
|
url="SalesMonitors/clientsFilter"
|
||||||
|
search-url="SalesMonitorClients"
|
||||||
|
:order="['dated DESC', 'hour DESC']"
|
||||||
|
:expr-builder="exprBuilder"
|
||||||
|
:filter="filter"
|
||||||
|
:offset="50"
|
||||||
|
auto-load
|
||||||
|
:columns="columns"
|
||||||
|
:right-search="false"
|
||||||
|
default-mode="table"
|
||||||
|
:disable-option="{ card: true }"
|
||||||
|
dense
|
||||||
|
class="q-px-none"
|
||||||
|
>
|
||||||
|
<template #top-left>
|
||||||
|
<VnRow>
|
||||||
|
<VnInputDate v-model="from" :label="$t('globals.from')" dense />
|
||||||
|
<VnInputDate v-model="to" :label="$t('globals.to')" dense />
|
||||||
|
</VnRow>
|
||||||
|
</template>
|
||||||
|
<template #column-salesPersonFk="{ row }">
|
||||||
|
<span class="link" :title="row.salesPerson" v-text="row.salesPerson" />
|
||||||
|
<WorkerDescriptorProxy :id="row.salesPersonFk" dense />
|
||||||
|
</template>
|
||||||
|
<template #column-clientFk="{ row }">
|
||||||
|
<span class="link" :title="row.clientName" v-text="row.clientName" />
|
||||||
|
<CustomerDescriptorProxy :id="row.clientFk" />
|
||||||
|
</template>
|
||||||
|
</VnTable>
|
||||||
|
</template>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.full-width .vn-row > * {
|
||||||
|
flex: 0.4;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,26 @@
|
||||||
|
<script setup>
|
||||||
|
import SalesClientTable from './MonitorClients.vue';
|
||||||
|
import SalesOrdersTable from './MonitorOrders.vue';
|
||||||
|
import VnRow from 'src/components/ui/VnRow.vue';
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<VnRow
|
||||||
|
class="q-pa-md"
|
||||||
|
:style="{ 'flex-direction': $q.screen.lt.lg ? 'column' : 'row', gap: '0px' }"
|
||||||
|
>
|
||||||
|
<div style="flex: 0.3">
|
||||||
|
<span
|
||||||
|
class="q-ml-md text-body1"
|
||||||
|
v-text="$t('salesMonitor.clientsOnWebsite')"
|
||||||
|
/>
|
||||||
|
<SalesClientTable />
|
||||||
|
</div>
|
||||||
|
<div style="flex: 0.7">
|
||||||
|
<span
|
||||||
|
class="q-ml-md text-body1"
|
||||||
|
v-text="$t('salesMonitor.recentOrderActions')"
|
||||||
|
/>
|
||||||
|
<SalesOrdersTable />
|
||||||
|
</div>
|
||||||
|
</VnRow>
|
||||||
|
</template>
|
||||||
|
|
@ -1,90 +0,0 @@
|
||||||
<script setup>
|
|
||||||
import { onMounted, onUnmounted, ref } from 'vue';
|
|
||||||
import { useI18n } from 'vue-i18n';
|
|
||||||
|
|
||||||
import { useStateStore } from 'stores/useStateStore';
|
|
||||||
import SalesClientTable from './SalesClientsTable.vue';
|
|
||||||
import SalesOrdersTable from './SalesOrdersTable.vue';
|
|
||||||
import SalesTicketsTable from './SalesTicketsTable.vue';
|
|
||||||
import VnSearchbar from 'components/ui/VnSearchbar.vue';
|
|
||||||
|
|
||||||
const { t } = useI18n();
|
|
||||||
const stateStore = useStateStore();
|
|
||||||
|
|
||||||
const expanded = ref(true);
|
|
||||||
|
|
||||||
onMounted(async () => {
|
|
||||||
stateStore.leftDrawer = false;
|
|
||||||
});
|
|
||||||
|
|
||||||
onUnmounted(() => (stateStore.leftDrawer = true));
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<template v-if="stateStore.isHeaderMounted()">
|
|
||||||
<Teleport to="#searchbar">
|
|
||||||
<VnSearchbar
|
|
||||||
data-key="SalesMonitorTickets"
|
|
||||||
url="SalesMonitors/salesFilter"
|
|
||||||
:redirect="false"
|
|
||||||
:label="t('searchBar.label')"
|
|
||||||
:info="t('searchBar.info')"
|
|
||||||
/>
|
|
||||||
</Teleport>
|
|
||||||
</template>
|
|
||||||
<QPage class="column items-center q-pa-md">
|
|
||||||
<QCard class="full-width q-mb-lg">
|
|
||||||
<QExpansionItem v-model="expanded" dense :duration="150">
|
|
||||||
<template v-if="!expanded" #header>
|
|
||||||
<div class="row full-width">
|
|
||||||
<span class="flex col text-body1">
|
|
||||||
{{ t('salesMonitor.clientsOnWebsite') }}
|
|
||||||
</span>
|
|
||||||
<span class="flex col q-ml-xl text-body1">
|
|
||||||
{{ t('salesMonitor.recentOrderActions') }}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<template #default>
|
|
||||||
<div class="expansion-tables-container">
|
|
||||||
<QCardSection class="col">
|
|
||||||
<span class="flex col q-mb-sm text-body1">
|
|
||||||
{{ t('salesMonitor.clientsOnWebsite') }}
|
|
||||||
</span>
|
|
||||||
<SalesClientTable />
|
|
||||||
</QCardSection>
|
|
||||||
<QCardSection class="col">
|
|
||||||
<span class="flex col q-mb-sm text-body1">
|
|
||||||
{{ t('salesMonitor.recentOrderActions') }}
|
|
||||||
</span>
|
|
||||||
<SalesOrdersTable />
|
|
||||||
</QCardSection>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</QExpansionItem>
|
|
||||||
</QCard>
|
|
||||||
<QCard class="full-width">
|
|
||||||
<QItem class="justify-between">
|
|
||||||
<QItemLabel class="col slider-container">
|
|
||||||
<span class="text-body1"
|
|
||||||
>{{ t('salesMonitor.ticketsMonitor') }}
|
|
||||||
</span>
|
|
||||||
<QCardSection class="col" style="padding-inline: 0"
|
|
||||||
><SalesTicketsTable />
|
|
||||||
</QCardSection>
|
|
||||||
</QItemLabel>
|
|
||||||
</QItem>
|
|
||||||
</QCard>
|
|
||||||
</QPage>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.expansion-tables-container {
|
|
||||||
display: flex;
|
|
||||||
border-top: 1px solid $color-spacer;
|
|
||||||
|
|
||||||
@media (max-width: $breakpoint-md-max) {
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -0,0 +1,203 @@
|
||||||
|
<script setup>
|
||||||
|
import { ref, computed } from 'vue';
|
||||||
|
import { useI18n } from 'vue-i18n';
|
||||||
|
import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
|
||||||
|
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 { toCurrency } from 'src/filters';
|
||||||
|
import { useVnConfirm } from 'composables/useVnConfirm';
|
||||||
|
import axios from 'axios';
|
||||||
|
|
||||||
|
const { t } = useI18n();
|
||||||
|
const { openConfirmationModal } = useVnConfirm();
|
||||||
|
|
||||||
|
const table = ref();
|
||||||
|
const selectedRows = ref([]);
|
||||||
|
|
||||||
|
function exprBuilder(param, value) {
|
||||||
|
switch (param) {
|
||||||
|
case 'clientFk':
|
||||||
|
return { [`c.id`]: value };
|
||||||
|
case 'salesPersonFk':
|
||||||
|
return { [`c.salesPersonFk`]: value };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const columns = computed(() => [
|
||||||
|
{
|
||||||
|
label: t('salesOrdersTable.dateSend'),
|
||||||
|
name: 'dateSend',
|
||||||
|
field: 'dateSend',
|
||||||
|
align: 'left',
|
||||||
|
orderBy: 'date_send',
|
||||||
|
columnFilter: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: t('salesOrdersTable.dateMake'),
|
||||||
|
name: 'dateMake',
|
||||||
|
field: 'dateMake',
|
||||||
|
align: 'left',
|
||||||
|
orderBy: 'date_make',
|
||||||
|
columnFilter: false,
|
||||||
|
format: (row) => toDateTimeFormat(row.date_make),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: t('salesOrdersTable.client'),
|
||||||
|
name: 'clientFk',
|
||||||
|
align: 'left',
|
||||||
|
columnFilter: {
|
||||||
|
component: 'select',
|
||||||
|
attrs: {
|
||||||
|
url: 'Clients',
|
||||||
|
fields: ['id', 'name'],
|
||||||
|
sortBy: 'name ASC',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: t('salesOrdersTable.agency'),
|
||||||
|
name: 'agencyName',
|
||||||
|
align: 'left',
|
||||||
|
columnFilter: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: t('salesOrdersTable.salesPerson'),
|
||||||
|
name: 'salesPersonFk',
|
||||||
|
align: 'left',
|
||||||
|
optionFilter: 'firstName',
|
||||||
|
columnFilter: {
|
||||||
|
component: 'select',
|
||||||
|
attrs: {
|
||||||
|
url: 'Workers/activeWithInheritedRole',
|
||||||
|
fields: ['id', 'name'],
|
||||||
|
sortBy: 'nickname ASC',
|
||||||
|
where: { role: 'salesPerson' },
|
||||||
|
useLike: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: t('salesOrdersTable.import'),
|
||||||
|
name: 'import',
|
||||||
|
field: 'import',
|
||||||
|
align: 'left',
|
||||||
|
columnFilter: false,
|
||||||
|
format: (row) => toCurrency(row.import),
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
|
const getBadgeColor = (date) => {
|
||||||
|
const today = Date.vnNew();
|
||||||
|
today.setHours(0, 0, 0, 0);
|
||||||
|
|
||||||
|
const orderLanded = new Date(date);
|
||||||
|
orderLanded.setHours(0, 0, 0, 0);
|
||||||
|
|
||||||
|
const difference = today - orderLanded;
|
||||||
|
|
||||||
|
if (difference == 0) return 'warning';
|
||||||
|
if (difference < 0) return 'success';
|
||||||
|
if (difference > 0) return 'alert';
|
||||||
|
};
|
||||||
|
|
||||||
|
const removeOrders = async () => {
|
||||||
|
try {
|
||||||
|
const selectedIds = selectedRows.value.map((row) => row.id);
|
||||||
|
const params = { deletes: selectedIds };
|
||||||
|
await axios.post('SalesMonitors/deleteOrders', params);
|
||||||
|
selectedRows.value = [];
|
||||||
|
await table.value.reload();
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Error deleting orders', err);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const openTab = (id) =>
|
||||||
|
window.open(`#/order/${id}/summary`, '_blank', 'noopener, noreferrer');
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<VnTable
|
||||||
|
ref="table"
|
||||||
|
class="q-px-none"
|
||||||
|
data-key="SalesMonitorOrders"
|
||||||
|
url="SalesMonitors/ordersFilter"
|
||||||
|
search-url="SalesMonitorOrders"
|
||||||
|
order="date_send DESC"
|
||||||
|
:right-search="false"
|
||||||
|
:expr-builder="exprBuilder"
|
||||||
|
auto-load
|
||||||
|
:columns="columns"
|
||||||
|
:table="{
|
||||||
|
'row-key': 'id',
|
||||||
|
selection: 'multiple',
|
||||||
|
'hide-bottom': true,
|
||||||
|
}"
|
||||||
|
default-mode="table"
|
||||||
|
:row-click="({ id }) => openTab(id)"
|
||||||
|
v-model:selected="selectedRows"
|
||||||
|
:disable-option="{ card: true }"
|
||||||
|
>
|
||||||
|
<template #top-left>
|
||||||
|
<QBtn
|
||||||
|
icon="refresh"
|
||||||
|
size="md"
|
||||||
|
color="primary"
|
||||||
|
dense
|
||||||
|
flat
|
||||||
|
@click="$refs.table.reload()"
|
||||||
|
>
|
||||||
|
<QTooltip>{{ $t('globals.refresh') }}</QTooltip>
|
||||||
|
</QBtn>
|
||||||
|
<QBtn
|
||||||
|
v-if="selectedRows.length"
|
||||||
|
icon="delete"
|
||||||
|
size="md"
|
||||||
|
dense
|
||||||
|
flat
|
||||||
|
color="primary"
|
||||||
|
@click="
|
||||||
|
openConfirmationModal(
|
||||||
|
$t('salesOrdersTable.deleteConfirmTitle'),
|
||||||
|
$t('salesOrdersTable.deleteConfirmMessage'),
|
||||||
|
removeOrders
|
||||||
|
)
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<QTooltip>{{ t('salesOrdersTable.delete') }}</QTooltip>
|
||||||
|
</QBtn>
|
||||||
|
</template>
|
||||||
|
<template #column-dateSend="{ row }">
|
||||||
|
<QTd>
|
||||||
|
<QBadge
|
||||||
|
:color="getBadgeColor(row.date_send)"
|
||||||
|
text-color="black"
|
||||||
|
class="q-pa-sm"
|
||||||
|
style="font-size: 14px"
|
||||||
|
>
|
||||||
|
{{ toDateFormat(row.date_send) }}
|
||||||
|
</QBadge>
|
||||||
|
</QTd>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #column-clientFk="{ row }">
|
||||||
|
<QTd @click.stop>
|
||||||
|
<span class="link" v-text="row.clientName" :title="row.clientName" />
|
||||||
|
<CustomerDescriptorProxy :id="row.clientFk" />
|
||||||
|
</QTd>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #column-salesPersonFk="{ row }">
|
||||||
|
<QTd @click.stop>
|
||||||
|
<span class="link" v-text="row.salesPerson" />
|
||||||
|
<WorkerDescriptorProxy :id="row.salesPersonFk" dense />
|
||||||
|
</QTd>
|
||||||
|
</template>
|
||||||
|
</VnTable>
|
||||||
|
</template>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.q-td {
|
||||||
|
max-width: 140px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1,147 +0,0 @@
|
||||||
<script setup>
|
|
||||||
import { ref, computed, reactive, watch } from 'vue';
|
|
||||||
import { useI18n } from 'vue-i18n';
|
|
||||||
|
|
||||||
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 { toDateFormat } from 'src/filters/date.js';
|
|
||||||
import VnTable from 'src/components/VnTable/VnTable.vue';
|
|
||||||
|
|
||||||
const { t } = useI18n();
|
|
||||||
|
|
||||||
const paginateRef = ref(null);
|
|
||||||
const workersActiveOptions = ref([]);
|
|
||||||
const clientsOptions = ref([]);
|
|
||||||
|
|
||||||
const from = ref(Date.vnNew());
|
|
||||||
const to = ref(Date.vnNew());
|
|
||||||
|
|
||||||
const dateRange = computed(() => {
|
|
||||||
const minHour = new Date(from.value);
|
|
||||||
minHour.setHours(0, 0, 0, 0);
|
|
||||||
const maxHour = new Date(to.value);
|
|
||||||
maxHour.setHours(23, 59, 59, 59);
|
|
||||||
return [minHour, maxHour];
|
|
||||||
});
|
|
||||||
|
|
||||||
const filter = reactive({
|
|
||||||
where: {
|
|
||||||
'v.stamp': {
|
|
||||||
between: dateRange.value,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const refetch = async () => await paginateRef.value.fetch();
|
|
||||||
|
|
||||||
watch(dateRange, (val) => {
|
|
||||||
filter.where['v.stamp'].between = val;
|
|
||||||
refetch();
|
|
||||||
});
|
|
||||||
|
|
||||||
function exprBuilder(param, value) {
|
|
||||||
switch (param) {
|
|
||||||
case 'clientFk':
|
|
||||||
return { [`c.id`]: value };
|
|
||||||
case 'salesPersonFk':
|
|
||||||
return { [`c.${param}`]: value };
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const params = reactive({});
|
|
||||||
|
|
||||||
const columns = computed(() => [
|
|
||||||
{
|
|
||||||
label: t('salesClientsTable.date'),
|
|
||||||
name: 'dated',
|
|
||||||
field: 'dated',
|
|
||||||
align: 'left',
|
|
||||||
columnFilter: null,
|
|
||||||
sortable: true,
|
|
||||||
format: (row) => toDateFormat(row.dated),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: t('salesClientsTable.hour'),
|
|
||||||
name: 'hour',
|
|
||||||
field: 'hour',
|
|
||||||
align: 'left',
|
|
||||||
sortable: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: t('salesClientsTable.salesPerson'),
|
|
||||||
name: 'salesPerson',
|
|
||||||
field: 'salesPerson',
|
|
||||||
align: 'left',
|
|
||||||
sortable: true,
|
|
||||||
columnField: {
|
|
||||||
component: null,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: t('salesClientsTable.client'),
|
|
||||||
field: 'clientName',
|
|
||||||
name: 'client',
|
|
||||||
align: 'left',
|
|
||||||
sortable: true,
|
|
||||||
columnField: {
|
|
||||||
component: null,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
</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="Clients"
|
|
||||||
:filter="{
|
|
||||||
fields: ['id', 'name'],
|
|
||||||
order: 'name ASC',
|
|
||||||
}"
|
|
||||||
auto-load
|
|
||||||
@on-fetch="(data) => (clientsOptions = data)"
|
|
||||||
/>
|
|
||||||
<QCard style="max-height: 380px; overflow-y: scroll">
|
|
||||||
<VnTable
|
|
||||||
ref="paginateRef"
|
|
||||||
data-key="SalesMonitorClients"
|
|
||||||
url="SalesMonitors/clientsFilter"
|
|
||||||
:order="['dated DESC', 'hour DESC']"
|
|
||||||
:limit="6"
|
|
||||||
:expr-builder="exprBuilder"
|
|
||||||
:user-params="params"
|
|
||||||
:filter="filter"
|
|
||||||
:offset="50"
|
|
||||||
auto-load
|
|
||||||
:columns="columns"
|
|
||||||
:right-search="false"
|
|
||||||
default-mode="table"
|
|
||||||
dense
|
|
||||||
:without-header="true"
|
|
||||||
>
|
|
||||||
<template #column-salesPerson="{ row }">
|
|
||||||
<QTd>
|
|
||||||
<span class="link">{{ row.salesPerson }}</span>
|
|
||||||
<WorkerDescriptorProxy :id="row.salesPersonFk" dense />
|
|
||||||
</QTd>
|
|
||||||
</template>
|
|
||||||
<template #column-client="{ row }">
|
|
||||||
<QTd>
|
|
||||||
<span class="link">{{ row.clientName }}</span>
|
|
||||||
<CustomerDescriptorProxy :id="row.clientFk" />
|
|
||||||
</QTd>
|
|
||||||
</template>
|
|
||||||
</VnTable>
|
|
||||||
</QCard>
|
|
||||||
</template>
|
|
||||||
|
|
@ -1,204 +0,0 @@
|
||||||
<script setup>
|
|
||||||
import { ref, computed } from 'vue';
|
|
||||||
import { useI18n } from 'vue-i18n';
|
|
||||||
|
|
||||||
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 VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
|
|
||||||
import VnTable from 'components/VnTable/VnTable.vue';
|
|
||||||
|
|
||||||
import { toDateFormat, toDateTimeFormat } from 'src/filters/date.js';
|
|
||||||
import { toCurrency } from 'src/filters';
|
|
||||||
import { useVnConfirm } from 'composables/useVnConfirm';
|
|
||||||
import axios from 'axios';
|
|
||||||
|
|
||||||
const { t } = useI18n();
|
|
||||||
const { openConfirmationModal } = useVnConfirm();
|
|
||||||
|
|
||||||
const paginateRef = ref(null);
|
|
||||||
const workersActiveOptions = ref([]);
|
|
||||||
const clientsOptions = ref([]);
|
|
||||||
const selectedRows = ref([]);
|
|
||||||
|
|
||||||
const dateRange = (value) => {
|
|
||||||
const minHour = new Date(value);
|
|
||||||
minHour.setHours(0, 0, 0, 0);
|
|
||||||
const maxHour = new Date(value);
|
|
||||||
maxHour.setHours(23, 59, 59, 59);
|
|
||||||
|
|
||||||
return [minHour, maxHour];
|
|
||||||
};
|
|
||||||
|
|
||||||
function exprBuilder(param, value) {
|
|
||||||
switch (param) {
|
|
||||||
case 'date_send':
|
|
||||||
return {
|
|
||||||
[`o.date_send`]: {
|
|
||||||
between: dateRange(value),
|
|
||||||
},
|
|
||||||
};
|
|
||||||
case 'clientFk':
|
|
||||||
return { [`c.id`]: value };
|
|
||||||
case 'salesPersonFk':
|
|
||||||
return { [`c.${param}`]: value };
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const columns = computed(() => [
|
|
||||||
{
|
|
||||||
label: t('salesOrdersTable.date'),
|
|
||||||
name: 'date',
|
|
||||||
field: 'dated',
|
|
||||||
align: 'left',
|
|
||||||
sortable: true,
|
|
||||||
cardVisible: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: t('salesOrdersTable.client'),
|
|
||||||
name: 'client',
|
|
||||||
align: 'left',
|
|
||||||
sortable: true,
|
|
||||||
cardVisible: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: t('salesOrdersTable.salesPerson'),
|
|
||||||
name: 'salesPerson',
|
|
||||||
align: 'left',
|
|
||||||
sortable: true,
|
|
||||||
cardVisible: true,
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
|
|
||||||
const getBadgeColor = (date) => {
|
|
||||||
const today = Date.vnNew();
|
|
||||||
today.setHours(0, 0, 0, 0);
|
|
||||||
|
|
||||||
const orderLanded = new Date(date);
|
|
||||||
orderLanded.setHours(0, 0, 0, 0);
|
|
||||||
|
|
||||||
const difference = today - orderLanded;
|
|
||||||
|
|
||||||
if (difference == 0) return 'warning';
|
|
||||||
if (difference < 0) return 'success';
|
|
||||||
if (difference > 0) return 'alert';
|
|
||||||
};
|
|
||||||
|
|
||||||
const removeOrders = async () => {
|
|
||||||
try {
|
|
||||||
const selectedIds = selectedRows.value.map((row) => row.id);
|
|
||||||
const params = { deletes: selectedIds };
|
|
||||||
await axios.post('SalesMonitors/deleteOrders', params);
|
|
||||||
selectedRows.value = [];
|
|
||||||
await paginateRef.value.fetch();
|
|
||||||
} catch (err) {
|
|
||||||
console.error('Error deleting orders', err);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const redirectToOrderSummary = (orderId) => {
|
|
||||||
const url = `#/order/${orderId}/summary`;
|
|
||||||
window.open(url, '_blank');
|
|
||||||
};
|
|
||||||
</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="Clients"
|
|
||||||
:filter="{
|
|
||||||
fields: ['id', 'name'],
|
|
||||||
order: 'name ASC',
|
|
||||||
}"
|
|
||||||
auto-load
|
|
||||||
@on-fetch="(data) => (clientsOptions = data)"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<VnSubToolbar />
|
|
||||||
<QCard style="max-height: 380px; overflow-y: scroll">
|
|
||||||
<VnTable
|
|
||||||
ref="paginateRef"
|
|
||||||
data-key="SalesMonitorOrders"
|
|
||||||
url="SalesMonitors/ordersFilter"
|
|
||||||
order="date_make DESC"
|
|
||||||
:limit="6"
|
|
||||||
:right-search="false"
|
|
||||||
:expr-builder="exprBuilder"
|
|
||||||
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 #top-left>
|
|
||||||
<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 #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>
|
|
||||||
</template>
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.q-td {
|
|
||||||
color: gray;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -0,0 +1,286 @@
|
||||||
|
<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';
|
||||||
|
import { dateRange } from 'src/filters';
|
||||||
|
|
||||||
|
defineProps({ dataKey: { type: String, required: true } });
|
||||||
|
const { t } = useI18n();
|
||||||
|
const warehouses = ref();
|
||||||
|
const groupedStates = ref();
|
||||||
|
|
||||||
|
const handleScopeDays = (params, days, callback) => {
|
||||||
|
const [from, to] = dateRange(Date.vnNew());
|
||||||
|
if (!days) {
|
||||||
|
Object.assign(params, { from, to, scopeDays: 1 });
|
||||||
|
} else {
|
||||||
|
params.from = from;
|
||||||
|
to.setDate(to.getDate() + days);
|
||||||
|
params.to = to;
|
||||||
|
}
|
||||||
|
if (callback) callback();
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<FetchData url="Warehouses" auto-load @on-fetch="(data) => (warehouses = data)" />
|
||||||
|
<FetchData
|
||||||
|
url="AlertLevels"
|
||||||
|
auto-load
|
||||||
|
@on-fetch="
|
||||||
|
(data) =>
|
||||||
|
(groupedStates = data.map((x) => Object.assign(x, { code: t(x.code) })))
|
||||||
|
"
|
||||||
|
/>
|
||||||
|
<VnFilterPanel
|
||||||
|
:data-key="dataKey"
|
||||||
|
:search-button="true"
|
||||||
|
:hidden-tags="['from', 'to']"
|
||||||
|
:custom-tags="['scopeDays']"
|
||||||
|
:unremovable-params="['from', 'to', '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>
|
||||||
|
<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="name"
|
||||||
|
:no-one="true"
|
||||||
|
>
|
||||||
|
<template #option="{ opt, itemProps }">
|
||||||
|
<QItem v-bind="itemProps">
|
||||||
|
<QItemSection>
|
||||||
|
<QItemLabel>{{ opt.name }}</QItemLabel>
|
||||||
|
<QItemLabel
|
||||||
|
v-if="opt.code"
|
||||||
|
class="text-grey text-caption"
|
||||||
|
>
|
||||||
|
{{ `${opt.nickname}, ${opt.code}` }}
|
||||||
|
</QItemLabel>
|
||||||
|
</QItemSection>
|
||||||
|
</QItem>
|
||||||
|
</template>
|
||||||
|
</VnSelect>
|
||||||
|
</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
|
||||||
|
alertLevel: Grouped State
|
||||||
|
FREE: Free
|
||||||
|
DELIVERED: Delivered
|
||||||
|
ON_PREPARATION: On preparation
|
||||||
|
ON_PREVIOUS: On previous
|
||||||
|
PACKED: Packed
|
||||||
|
No one: No one
|
||||||
|
|
||||||
|
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
|
||||||
|
alertLevel: Estado agrupado
|
||||||
|
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>
|
||||||
|
|
@ -1,37 +1,38 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, computed, reactive } from 'vue';
|
import { ref, computed } from 'vue';
|
||||||
import { useI18n } from 'vue-i18n';
|
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 TableVisibleColumns from 'src/components/common/TableVisibleColumns.vue';
|
|
||||||
import TicketDescriptorProxy from 'src/pages/Ticket/Card/TicketDescriptorProxy.vue';
|
import TicketDescriptorProxy from 'src/pages/Ticket/Card/TicketDescriptorProxy.vue';
|
||||||
import InvoiceOutDescriptorProxy from 'src/pages/InvoiceOut/Card/InvoiceOutDescriptorProxy.vue';
|
import InvoiceOutDescriptorProxy from 'src/pages/InvoiceOut/Card/InvoiceOutDescriptorProxy.vue';
|
||||||
import ZoneDescriptorProxy from 'src/pages/Zone/Card/ZoneDescriptorProxy.vue';
|
import ZoneDescriptorProxy from 'src/pages/Zone/Card/ZoneDescriptorProxy.vue';
|
||||||
import TicketSummary from 'src/pages/Ticket/Card/TicketSummary.vue';
|
import TicketSummary from 'src/pages/Ticket/Card/TicketSummary.vue';
|
||||||
import VnTable from 'components/VnTable/VnTable.vue';
|
import VnTable from 'components/VnTable/VnTable.vue';
|
||||||
import { useSummaryDialog } from 'src/composables/useSummaryDialog';
|
import { useSummaryDialog } from 'src/composables/useSummaryDialog';
|
||||||
import { toDateFormat, toTimeFormat } from 'src/filters/date.js';
|
import { toDateFormat } from 'src/filters/date.js';
|
||||||
import { toCurrency, dateRange } from 'src/filters';
|
import { toCurrency, dateRange, dashIfEmpty } from 'src/filters';
|
||||||
|
import RightMenu from 'src/components/common/RightMenu.vue';
|
||||||
|
import MonitorTicketSearchbar from './MonitorTicketSearchbar.vue';
|
||||||
|
import MonitorTicketFilter from './MonitorTicketFilter.vue';
|
||||||
|
|
||||||
const DEFAULT_AUTO_REFRESH = 1000;
|
const DEFAULT_AUTO_REFRESH = 2 * 60 * 1000; // 2min in ms
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
const autoRefresh = ref(false);
|
const autoRefresh = ref(false);
|
||||||
const paginateRef = ref(null);
|
const tableRef = ref(null);
|
||||||
const workersActiveOptions = ref([]);
|
const provinceOpts = ref([]);
|
||||||
const provincesOptions = ref([]);
|
const stateOpts = ref([]);
|
||||||
const statesOptions = ref([]);
|
const zoneOpts = ref([]);
|
||||||
const zonesOptions = ref([]);
|
|
||||||
const visibleColumns = ref([]);
|
const visibleColumns = ref([]);
|
||||||
const allColumnNames = ref([]);
|
|
||||||
const { viewSummary } = useSummaryDialog();
|
const { viewSummary } = useSummaryDialog();
|
||||||
|
const [from, to] = dateRange(Date.vnNew());
|
||||||
|
|
||||||
function exprBuilder(param, value) {
|
function exprBuilder(param, value) {
|
||||||
switch (param) {
|
switch (param) {
|
||||||
case 'stateFk':
|
case 'stateFk':
|
||||||
return { 'ts.stateFk': value };
|
return { 'ts.stateFk': value };
|
||||||
case 'salesPersonFk':
|
case 'salesPersonFk':
|
||||||
return { 'c.salesPersonFk': value };
|
return { 'c.salesPersonFk': !value ? null : value };
|
||||||
case 'provinceFk':
|
case 'provinceFk':
|
||||||
return { 'a.provinceFk': value };
|
return { 'a.provinceFk': value };
|
||||||
case 'theoreticalHour':
|
case 'theoreticalHour':
|
||||||
|
|
@ -48,15 +49,12 @@ function exprBuilder(param, value) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const filter = { order: ['totalProblems DESC'] };
|
|
||||||
let params = reactive({});
|
|
||||||
|
|
||||||
const columns = computed(() => [
|
const columns = computed(() => [
|
||||||
{
|
{
|
||||||
label: t('salesTicketsTable.problems'),
|
label: t('salesTicketsTable.problems'),
|
||||||
name: 'problems',
|
name: 'totalProblems',
|
||||||
align: 'left',
|
align: 'left',
|
||||||
sortable: true,
|
|
||||||
columnFilter: false,
|
columnFilter: false,
|
||||||
attrs: {
|
attrs: {
|
||||||
dense: true,
|
dense: true,
|
||||||
|
|
@ -64,13 +62,12 @@ const columns = computed(() => [
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: t('salesTicketsTable.identifier'),
|
label: t('salesTicketsTable.identifier'),
|
||||||
name: 'identifier',
|
name: 'id',
|
||||||
field: 'id',
|
field: 'id',
|
||||||
align: 'left',
|
align: 'left',
|
||||||
sortable: true,
|
|
||||||
|
|
||||||
columnFilter: {
|
columnFilter: {
|
||||||
component: 'input',
|
component: 'number',
|
||||||
name: 'id',
|
name: 'id',
|
||||||
attrs: {
|
attrs: {
|
||||||
dense: true,
|
dense: true,
|
||||||
|
|
@ -79,41 +76,41 @@ const columns = computed(() => [
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: t('salesTicketsTable.client'),
|
label: t('salesTicketsTable.client'),
|
||||||
name: 'client',
|
name: 'clientFk',
|
||||||
align: 'left',
|
align: 'left',
|
||||||
field: 'nickname',
|
field: 'nickname',
|
||||||
sortable: true,
|
|
||||||
columnFilter: {
|
columnFilter: {
|
||||||
component: 'input',
|
component: 'select',
|
||||||
name: 'nickname',
|
|
||||||
attrs: {
|
attrs: {
|
||||||
dense: true,
|
url: 'Clients',
|
||||||
|
fields: ['id', 'name', 'nickname'],
|
||||||
|
sortBy: 'name ASC',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: t('salesTicketsTable.salesPerson'),
|
label: t('salesTicketsTable.salesPerson'),
|
||||||
name: 'salesPerson',
|
name: 'salesPersonFk',
|
||||||
field: 'userName',
|
field: 'userName',
|
||||||
align: 'left',
|
align: 'left',
|
||||||
sortable: true,
|
optionFilter: 'firstName',
|
||||||
columnFilter: {
|
columnFilter: {
|
||||||
component: 'select',
|
component: 'select',
|
||||||
name: 'salesPersonFk',
|
|
||||||
attrs: {
|
attrs: {
|
||||||
options: workersActiveOptions.value,
|
url: 'Workers/activeWithInheritedRole',
|
||||||
'option-value': 'id',
|
fields: ['id', 'name'],
|
||||||
'option-label': 'name',
|
sortBy: 'nickname ASC',
|
||||||
dense: true,
|
where: { role: 'salesPerson' },
|
||||||
|
useLike: false,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: t('salesTicketsTable.date'),
|
label: t('salesTicketsTable.date'),
|
||||||
name: 'date',
|
name: 'shippedDate',
|
||||||
style: { 'max-width': '100px' },
|
style: { 'max-width': '100px' },
|
||||||
align: 'left',
|
align: 'left',
|
||||||
sortable: true,
|
|
||||||
columnFilter: {
|
columnFilter: {
|
||||||
component: 'date',
|
component: 'date',
|
||||||
name: 'shippedDate',
|
name: 'shippedDate',
|
||||||
|
|
@ -124,61 +121,39 @@ const columns = computed(() => [
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: t('salesTicketsTable.theoretical'),
|
label: t('salesTicketsTable.theoretical'),
|
||||||
name: 'theoretical',
|
name: 'theoreticalhour',
|
||||||
field: 'zoneLanding',
|
field: 'zoneLanding',
|
||||||
align: 'left',
|
align: 'left',
|
||||||
sortable: true,
|
format: (row) => row.theoreticalhour,
|
||||||
format: (val) => toTimeFormat(val),
|
columnFilter: false,
|
||||||
columnFilter: {
|
|
||||||
component: 'input',
|
|
||||||
name: 'theoreticalHour',
|
|
||||||
attrs: {
|
|
||||||
dense: true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: t('salesTicketsTable.practical'),
|
label: t('salesTicketsTable.practical'),
|
||||||
name: 'practical',
|
name: 'practicalHour',
|
||||||
field: 'practicalHour',
|
field: 'practicalHour',
|
||||||
align: 'left',
|
align: 'left',
|
||||||
sortable: true,
|
format: (row) => row.practicalHour,
|
||||||
columnFilter: {
|
columnFilter: false,
|
||||||
component: 'input',
|
|
||||||
name: 'practicalHour',
|
|
||||||
attrs: {
|
|
||||||
dense: true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: t('salesTicketsTable.preparation'),
|
label: t('salesTicketsTable.preparation'),
|
||||||
name: 'preparation',
|
name: 'preparationHour',
|
||||||
field: 'shipped',
|
field: 'shipped',
|
||||||
align: 'left',
|
align: 'left',
|
||||||
sortable: true,
|
format: (row) => row.preparationHour,
|
||||||
format: (val) => toTimeFormat(val),
|
columnFilter: false,
|
||||||
columnFilter: {
|
|
||||||
component: 'input',
|
|
||||||
name: 'shippedDate',
|
|
||||||
attrs: {
|
|
||||||
dense: true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
label: t('salesTicketsTable.province'),
|
label: t('salesTicketsTable.province'),
|
||||||
name: 'province',
|
name: 'provinceFk',
|
||||||
field: 'province',
|
field: 'province',
|
||||||
align: 'left',
|
align: 'left',
|
||||||
style: { 'max-width': '100px' },
|
format: (row) => row.province,
|
||||||
sortable: true,
|
|
||||||
columnFilter: {
|
columnFilter: {
|
||||||
component: 'select',
|
component: 'select',
|
||||||
name: 'provinceFk',
|
name: 'provinceFk',
|
||||||
attrs: {
|
attrs: {
|
||||||
options: provincesOptions.value,
|
options: provinceOpts.value,
|
||||||
'option-value': 'id',
|
'option-value': 'id',
|
||||||
'option-label': 'name',
|
'option-label': 'name',
|
||||||
dense: true,
|
dense: true,
|
||||||
|
|
@ -190,12 +165,11 @@ const columns = computed(() => [
|
||||||
name: 'state',
|
name: 'state',
|
||||||
align: 'left',
|
align: 'left',
|
||||||
style: { 'max-width': '100px' },
|
style: { 'max-width': '100px' },
|
||||||
sortable: true,
|
|
||||||
columnFilter: {
|
columnFilter: {
|
||||||
component: 'select',
|
component: 'select',
|
||||||
name: 'stateFk',
|
name: 'stateFk',
|
||||||
attrs: {
|
attrs: {
|
||||||
options: statesOptions.value,
|
options: stateOpts.value,
|
||||||
'option-value': 'id',
|
'option-value': 'id',
|
||||||
'option-label': 'name',
|
'option-label': 'name',
|
||||||
dense: true,
|
dense: true,
|
||||||
|
|
@ -207,10 +181,7 @@ const columns = computed(() => [
|
||||||
name: 'isFragile',
|
name: 'isFragile',
|
||||||
field: 'isFragile',
|
field: 'isFragile',
|
||||||
align: 'left',
|
align: 'left',
|
||||||
sortable: true,
|
columnFilter: false,
|
||||||
columnFilter: {
|
|
||||||
inWhere: true,
|
|
||||||
},
|
|
||||||
attrs: {
|
attrs: {
|
||||||
'checked-icon': 'local_bar',
|
'checked-icon': 'local_bar',
|
||||||
'unchecked-icon': 'local_bar',
|
'unchecked-icon': 'local_bar',
|
||||||
|
|
@ -220,14 +191,14 @@ const columns = computed(() => [
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: t('salesTicketsTable.zone'),
|
label: t('salesTicketsTable.zone'),
|
||||||
name: 'zone',
|
name: 'zoneFk',
|
||||||
align: 'left',
|
align: 'left',
|
||||||
sortable: true,
|
|
||||||
columnFilter: {
|
columnFilter: {
|
||||||
component: 'select',
|
component: 'select',
|
||||||
name: 'zoneFk',
|
name: 'zoneFk',
|
||||||
attrs: {
|
attrs: {
|
||||||
options: zonesOptions.value,
|
options: zoneOpts.value,
|
||||||
'option-value': 'id',
|
'option-value': 'id',
|
||||||
'option-label': 'name',
|
'option-label': 'name',
|
||||||
dense: true,
|
dense: true,
|
||||||
|
|
@ -236,13 +207,13 @@ const columns = computed(() => [
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: t('salesTicketsTable.total'),
|
label: t('salesTicketsTable.total'),
|
||||||
name: 'total',
|
name: 'totalWithVat',
|
||||||
field: 'totalWithVat',
|
field: 'totalWithVat',
|
||||||
align: 'left',
|
align: 'left',
|
||||||
style: { 'max-width': '75px' },
|
style: { 'max-width': '75px' },
|
||||||
sortable: true,
|
|
||||||
columnFilter: {
|
columnFilter: {
|
||||||
component: 'input',
|
component: 'number',
|
||||||
name: 'totalWithVat',
|
name: 'totalWithVat',
|
||||||
attrs: {
|
attrs: {
|
||||||
dense: true,
|
dense: true,
|
||||||
|
|
@ -258,7 +229,7 @@ const columns = computed(() => [
|
||||||
title: t('salesTicketsTable.goToLines'),
|
title: t('salesTicketsTable.goToLines'),
|
||||||
icon: 'vn:lines',
|
icon: 'vn:lines',
|
||||||
color: 'priamry',
|
color: 'priamry',
|
||||||
action: (row) => redirectToSales(row.id),
|
action: (row) => openTab(row.id),
|
||||||
isPrimary: true,
|
isPrimary: true,
|
||||||
attrs: {
|
attrs: {
|
||||||
flat: true,
|
flat: true,
|
||||||
|
|
@ -297,18 +268,13 @@ let refreshTimer = null;
|
||||||
|
|
||||||
const autoRefreshHandler = (value) => {
|
const autoRefreshHandler = (value) => {
|
||||||
if (value)
|
if (value)
|
||||||
refreshTimer = setInterval(() => paginateRef.value.fetch(), DEFAULT_AUTO_REFRESH);
|
refreshTimer = setInterval(() => tableRef.value.reload(), DEFAULT_AUTO_REFRESH);
|
||||||
else {
|
else {
|
||||||
clearInterval(refreshTimer);
|
clearInterval(refreshTimer);
|
||||||
refreshTimer = null;
|
refreshTimer = null;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const redirectToTicketSummary = (id) => {
|
|
||||||
const url = `#/ticket/${id}/summary`;
|
|
||||||
window.open(url, '_blank');
|
|
||||||
};
|
|
||||||
|
|
||||||
const stateColors = {
|
const stateColors = {
|
||||||
notice: 'info',
|
notice: 'info',
|
||||||
success: 'positive',
|
success: 'positive',
|
||||||
|
|
@ -329,23 +295,10 @@ const formatShippedDate = (date) => {
|
||||||
return toDateFormat(_date);
|
return toDateFormat(_date);
|
||||||
};
|
};
|
||||||
|
|
||||||
const redirectToSales = (id) => {
|
const openTab = (id) =>
|
||||||
const url = `#/ticket/${id}/sale`;
|
window.open(`#/ticket/${id}/sale`, '_blank', 'noopener, noreferrer');
|
||||||
window.open(url, '_blank');
|
|
||||||
};
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<FetchData
|
|
||||||
url="Workers/activeWithInheritedRole"
|
|
||||||
:filter="{
|
|
||||||
fields: ['id', 'nickname'],
|
|
||||||
order: 'nickname ASC',
|
|
||||||
where: { role: 'salesPerson' },
|
|
||||||
}"
|
|
||||||
auto-load
|
|
||||||
@on-fetch="(data) => (workersActiveOptions = data)"
|
|
||||||
/>
|
|
||||||
<FetchData
|
<FetchData
|
||||||
url="Provinces"
|
url="Provinces"
|
||||||
:filter="{
|
:filter="{
|
||||||
|
|
@ -353,7 +306,7 @@ const redirectToSales = (id) => {
|
||||||
order: 'name ASC',
|
order: 'name ASC',
|
||||||
}"
|
}"
|
||||||
auto-load
|
auto-load
|
||||||
@on-fetch="(data) => (provincesOptions = data)"
|
@on-fetch="(data) => (provinceOpts = data)"
|
||||||
/>
|
/>
|
||||||
<FetchData
|
<FetchData
|
||||||
url="States"
|
url="States"
|
||||||
|
|
@ -362,7 +315,7 @@ const redirectToSales = (id) => {
|
||||||
order: 'name ASC',
|
order: 'name ASC',
|
||||||
}"
|
}"
|
||||||
auto-load
|
auto-load
|
||||||
@on-fetch="(data) => (statesOptions = data)"
|
@on-fetch="(data) => (stateOpts = data)"
|
||||||
/>
|
/>
|
||||||
<FetchData
|
<FetchData
|
||||||
url="Zones"
|
url="Zones"
|
||||||
|
|
@ -371,46 +324,60 @@ const redirectToSales = (id) => {
|
||||||
order: 'name ASC',
|
order: 'name ASC',
|
||||||
}"
|
}"
|
||||||
auto-load
|
auto-load
|
||||||
@on-fetch="(data) => (zonesOptions = data)"
|
@on-fetch="(data) => (zoneOpts = data)"
|
||||||
/>
|
/>
|
||||||
|
<MonitorTicketSearchbar />
|
||||||
|
<RightMenu>
|
||||||
|
<template #right-panel>
|
||||||
|
<MonitorTicketFilter data-key="saleMonitorTickets" />
|
||||||
|
</template>
|
||||||
|
</RightMenu>
|
||||||
<VnTable
|
<VnTable
|
||||||
ref="paginateRef"
|
ref="tableRef"
|
||||||
data-key="SalesMonitorTickets"
|
data-key="saleMonitorTickets"
|
||||||
url="SalesMonitors/salesFilter"
|
url="SalesMonitors/salesFilter"
|
||||||
:filter="filter"
|
search-url="saleMonitorTickets"
|
||||||
:limit="20"
|
|
||||||
:expr-builder="exprBuilder"
|
:expr-builder="exprBuilder"
|
||||||
:user-params="params"
|
|
||||||
:offset="50"
|
:offset="50"
|
||||||
:columns="columns"
|
:columns="columns"
|
||||||
:visible-columns="visibleColumns"
|
:visible-columns="visibleColumns"
|
||||||
:right-search="false"
|
:right-search="false"
|
||||||
default-mode="table"
|
default-mode="table"
|
||||||
auto-load
|
auto-load
|
||||||
@row-click="(_, row) => redirectToTicketSummary(row.id)"
|
:row-click="({ id }) => openTab(id)"
|
||||||
|
:disable-option="{ card: true }"
|
||||||
|
:user-params="{ from, to, scopeDays: 1 }"
|
||||||
>
|
>
|
||||||
<template #top-left>
|
<template #top-left>
|
||||||
<TableVisibleColumns
|
<QBtn
|
||||||
:all-columns="allColumnNames"
|
icon="refresh"
|
||||||
table-code="ticketsMonitor"
|
size="md"
|
||||||
labels-traductions-path="salesTicketsTable"
|
color="primary"
|
||||||
@on-config-saved="visibleColumns = [...$event, 'rowActions']"
|
class="q-mr-sm"
|
||||||
/>
|
dense
|
||||||
|
flat
|
||||||
|
@click="$refs.tableRef.reload()"
|
||||||
|
>
|
||||||
|
<QTooltip>{{ $t('globals.refresh') }}</QTooltip>
|
||||||
|
</QBtn>
|
||||||
<QCheckbox
|
<QCheckbox
|
||||||
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>
|
||||||
|
</QCheckbox>
|
||||||
</template>
|
</template>
|
||||||
<template #column-problems="{ row }">
|
<template #column-totalProblems="{ row }">
|
||||||
<QTd class="no-padding" style="max-width: 50px">
|
<QTd class="no-padding" style="max-width: 60px">
|
||||||
<QIcon
|
<QIcon
|
||||||
v-if="row.isTaxDataChecked === 0"
|
v-if="row.isTaxDataChecked === 0"
|
||||||
name="vn:no036"
|
name="vn:no036"
|
||||||
color="primary"
|
color="primary"
|
||||||
size="xs"
|
size="xs"
|
||||||
>
|
>
|
||||||
<QTooltip>{{ t('salesTicketsTable.noVerifiedData') }}</QTooltip>
|
<QTooltip>{{ $t('salesTicketsTable.noVerifiedData') }}</QTooltip>
|
||||||
</QIcon>
|
</QIcon>
|
||||||
<QIcon
|
<QIcon
|
||||||
v-if="row.hasTicketRequest"
|
v-if="row.hasTicketRequest"
|
||||||
|
|
@ -418,7 +385,7 @@ const redirectToSales = (id) => {
|
||||||
color="primary"
|
color="primary"
|
||||||
size="xs"
|
size="xs"
|
||||||
>
|
>
|
||||||
<QTooltip>{{ t('salesTicketsTable.purchaseRequest') }}</QTooltip>
|
<QTooltip>{{ $t('salesTicketsTable.purchaseRequest') }}</QTooltip>
|
||||||
</QIcon>
|
</QIcon>
|
||||||
<QIcon
|
<QIcon
|
||||||
v-if="row.itemShortage"
|
v-if="row.itemShortage"
|
||||||
|
|
@ -426,10 +393,10 @@ const redirectToSales = (id) => {
|
||||||
color="primary"
|
color="primary"
|
||||||
size="xs"
|
size="xs"
|
||||||
>
|
>
|
||||||
<QTooltip>{{ t('salesTicketsTable.notVisible') }}</QTooltip>
|
<QTooltip>{{ $t('salesTicketsTable.notVisible') }}</QTooltip>
|
||||||
</QIcon>
|
</QIcon>
|
||||||
<QIcon v-if="row.isFreezed" name="vn:frozen" color="primary" size="xs">
|
<QIcon v-if="row.isFreezed" name="vn:frozen" color="primary" size="xs">
|
||||||
<QTooltip>{{ t('salesTicketsTable.clientFrozen') }}</QTooltip>
|
<QTooltip>{{ $t('salesTicketsTable.clientFrozen') }}</QTooltip>
|
||||||
</QIcon>
|
</QIcon>
|
||||||
<QIcon
|
<QIcon
|
||||||
v-if="row.risk"
|
v-if="row.risk"
|
||||||
|
|
@ -437,7 +404,9 @@ const redirectToSales = (id) => {
|
||||||
:color="row.hasHighRisk ? 'negative' : 'primary'"
|
:color="row.hasHighRisk ? 'negative' : 'primary'"
|
||||||
size="xs"
|
size="xs"
|
||||||
>
|
>
|
||||||
<QTooltip>{{ t('salesTicketsTable.risk') }}: {{ row.risk }}</QTooltip>
|
<QTooltip
|
||||||
|
>{{ $t('salesTicketsTable.risk') }}: {{ row.risk }}</QTooltip
|
||||||
|
>
|
||||||
</QIcon>
|
</QIcon>
|
||||||
<QIcon
|
<QIcon
|
||||||
v-if="row.hasComponentLack"
|
v-if="row.hasComponentLack"
|
||||||
|
|
@ -445,7 +414,7 @@ const redirectToSales = (id) => {
|
||||||
color="primary"
|
color="primary"
|
||||||
size="xs"
|
size="xs"
|
||||||
>
|
>
|
||||||
<QTooltip>{{ t('salesTicketsTable.componentLack') }}</QTooltip>
|
<QTooltip>{{ $t('salesTicketsTable.componentLack') }}</QTooltip>
|
||||||
</QIcon>
|
</QIcon>
|
||||||
<QIcon
|
<QIcon
|
||||||
v-if="row.isTooLittle"
|
v-if="row.isTooLittle"
|
||||||
|
|
@ -453,11 +422,11 @@ const redirectToSales = (id) => {
|
||||||
color="primary"
|
color="primary"
|
||||||
size="xs"
|
size="xs"
|
||||||
>
|
>
|
||||||
<QTooltip>{{ t('salesTicketsTable.tooLittle') }}</QTooltip>
|
<QTooltip>{{ $t('salesTicketsTable.tooLittle') }}</QTooltip>
|
||||||
</QIcon>
|
</QIcon>
|
||||||
</QTd>
|
</QTd>
|
||||||
</template>
|
</template>
|
||||||
<template #column-identifier="{ row }">
|
<template #column-id="{ row }">
|
||||||
<QTd class="no-padding">
|
<QTd class="no-padding">
|
||||||
<span class="link" @click.stop.prevent>
|
<span class="link" @click.stop.prevent>
|
||||||
{{ row.id }}
|
{{ row.id }}
|
||||||
|
|
@ -465,19 +434,19 @@ const redirectToSales = (id) => {
|
||||||
</span>
|
</span>
|
||||||
</QTd>
|
</QTd>
|
||||||
</template>
|
</template>
|
||||||
<template #column-client="{ row }">
|
<template #column-clientFk="{ row }">
|
||||||
<QTd class="no-padding" @click.stop.prevent>
|
<QTd class="no-padding" @click.stop :title="row.nickname">
|
||||||
<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-salesPersonFk="{ row }">
|
||||||
<QTd class="no-padding" @click.stop.prevent>
|
<QTd class="no-padding" @click.stop :title="row.userName">
|
||||||
<span class="link">{{ row.userName }}</span>
|
<span class="link" v-text="dashIfEmpty(row.userName)" />
|
||||||
<WorkerDescriptorProxy :id="row.salesPersonFk" />
|
<WorkerDescriptorProxy :id="row.salesPersonFk" />
|
||||||
</QTd>
|
</QTd>
|
||||||
</template>
|
</template>
|
||||||
<template #column-date="{ row }">
|
<template #column-shippedDate="{ row }">
|
||||||
<QTd class="no-padding">
|
<QTd class="no-padding">
|
||||||
<QBadge
|
<QBadge
|
||||||
v-bind="getBadgeAttrs(row.shippedDate)"
|
v-bind="getBadgeAttrs(row.shippedDate)"
|
||||||
|
|
@ -488,6 +457,11 @@ const redirectToSales = (id) => {
|
||||||
</QBadge>
|
</QBadge>
|
||||||
</QTd>
|
</QTd>
|
||||||
</template>
|
</template>
|
||||||
|
<template #column-provinceFk="{ row }">
|
||||||
|
<QTd class="no-padding">
|
||||||
|
<span :title="row.province" v-text="row.province" />
|
||||||
|
</QTd>
|
||||||
|
</template>
|
||||||
<template #column-state="{ row }">
|
<template #column-state="{ row }">
|
||||||
<QTd class="no-padding" @click.stop.prevent>
|
<QTd class="no-padding" @click.stop.prevent>
|
||||||
<div v-if="row.refFk">
|
<div v-if="row.refFk">
|
||||||
|
|
@ -508,17 +482,17 @@ const redirectToSales = (id) => {
|
||||||
<template #column-isFragile="{ row }">
|
<template #column-isFragile="{ row }">
|
||||||
<QTd class="no-padding">
|
<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-zoneFk="{ row }">
|
||||||
<QTd class="no-padding" @click.stop.prevent>
|
<QTd class="no-padding" @click.stop.prevent :title="row.zoneName">
|
||||||
<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-totalWithVat="{ row }">
|
||||||
<QTd class="no-padding">
|
<QTd class="no-padding">
|
||||||
<QBadge
|
<QBadge
|
||||||
:color="totalPriceColor(row) || 'transparent'"
|
:color="totalPriceColor(row) || 'transparent'"
|
||||||
|
|
@ -11,11 +11,14 @@ salesClientsTable:
|
||||||
client: Client
|
client: Client
|
||||||
salesOrdersTable:
|
salesOrdersTable:
|
||||||
delete: Delete
|
delete: Delete
|
||||||
date: Date
|
dateSend: Send date
|
||||||
|
dateMake: Make date
|
||||||
client: Client
|
client: Client
|
||||||
salesPerson: Salesperson
|
salesPerson: Salesperson
|
||||||
deleteConfirmTitle: Delete selected elements
|
deleteConfirmTitle: Delete selected elements
|
||||||
deleteConfirmMessage: All the selected elements will be deleted. Are you sure you want to continue?
|
deleteConfirmMessage: All the selected elements will be deleted. Are you sure you want to continue?
|
||||||
|
agency: Agency
|
||||||
|
import: Import
|
||||||
salesTicketsTable:
|
salesTicketsTable:
|
||||||
autoRefresh: Auto-refresh
|
autoRefresh: Auto-refresh
|
||||||
problems: Problems
|
problems: Problems
|
||||||
|
|
@ -43,3 +46,4 @@ salesTicketsTable:
|
||||||
searchBar:
|
searchBar:
|
||||||
label: Search tickets
|
label: Search tickets
|
||||||
info: Search tickets by id or alias
|
info: Search tickets by id or alias
|
||||||
|
refreshInfo: Toggle auto-refresh every 2 minutes
|
||||||
|
|
|
||||||
|
|
@ -11,11 +11,14 @@ salesClientsTable:
|
||||||
client: Cliente
|
client: Cliente
|
||||||
salesOrdersTable:
|
salesOrdersTable:
|
||||||
delete: Eliminar
|
delete: Eliminar
|
||||||
date: Fecha
|
dateSend: Fecha de envío
|
||||||
|
dateMake: Fecha de realización
|
||||||
client: Cliente
|
client: Cliente
|
||||||
salesPerson: Comercial
|
salesPerson: Comercial
|
||||||
deleteConfirmTitle: Eliminar los elementos seleccionados
|
deleteConfirmTitle: Eliminar los elementos seleccionados
|
||||||
deleteConfirmMessage: Todos los elementos seleccionados serán eliminados. ¿Seguro que quieres continuar?
|
deleteConfirmMessage: Todos los elementos seleccionados serán eliminados. ¿Seguro que quieres continuar?
|
||||||
|
agency: Agencia
|
||||||
|
import: Importe
|
||||||
salesTicketsTable:
|
salesTicketsTable:
|
||||||
autoRefresh: Auto-refresco
|
autoRefresh: Auto-refresco
|
||||||
problems: Problemas
|
problems: Problemas
|
||||||
|
|
@ -43,3 +46,4 @@ salesTicketsTable:
|
||||||
searchBar:
|
searchBar:
|
||||||
label: Buscar tickets
|
label: Buscar tickets
|
||||||
info: Buscar tickets por identificador o alias
|
info: Buscar tickets por identificador o alias
|
||||||
|
refreshInfo: Conmuta el refresco automático cada 2 minutos
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@ export default {
|
||||||
component: RouterView,
|
component: RouterView,
|
||||||
redirect: { name: 'MonitorMain' },
|
redirect: { name: 'MonitorMain' },
|
||||||
menus: {
|
menus: {
|
||||||
main: ['MonitorList'],
|
main: ['MonitorTickets', 'MonitorClientsActions'],
|
||||||
card: [],
|
card: [],
|
||||||
},
|
},
|
||||||
children: [
|
children: [
|
||||||
|
|
@ -19,16 +19,27 @@ export default {
|
||||||
path: '',
|
path: '',
|
||||||
name: 'MonitorMain',
|
name: 'MonitorMain',
|
||||||
component: () => import('src/components/common/VnSectionMain.vue'),
|
component: () => import('src/components/common/VnSectionMain.vue'),
|
||||||
redirect: { name: 'MonitorList' },
|
redirect: { name: 'MonitorTickets' },
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
path: 'list',
|
path: 'tickets',
|
||||||
name: 'MonitorList',
|
name: 'MonitorTickets',
|
||||||
meta: {
|
meta: {
|
||||||
title: 'list',
|
title: 'ticketsMonitor',
|
||||||
icon: 'grid_view',
|
icon: 'vn:ticket',
|
||||||
},
|
},
|
||||||
component: () => import('src/pages/Monitor/MonitorList.vue'),
|
component: () =>
|
||||||
|
import('src/pages/Monitor/Ticket/MonitorTickets.vue'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'clients-actions',
|
||||||
|
name: 'MonitorClientsActions',
|
||||||
|
meta: {
|
||||||
|
title: 'clientsActionsMonitor',
|
||||||
|
icon: 'vn:client',
|
||||||
|
},
|
||||||
|
component: () =>
|
||||||
|
import('src/pages/Monitor/MonitorClientsActions.vue'),
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue