148 lines
3.8 KiB
Vue
148 lines
3.8 KiB
Vue
<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>
|