Tables development
This commit is contained in:
parent
dbc9e9dd71
commit
5bdbbf426a
|
|
@ -54,6 +54,13 @@ async function fetch() {
|
|||
emit('onFetch', Array.isArray(data) ? data[0] : data);
|
||||
isLoading.value = false;
|
||||
}
|
||||
|
||||
const showRedirectToSummaryIcon = computed(() => {
|
||||
const routeExists = route.matched.some(
|
||||
(route) => route.name === `${route.meta.moduleName}Summary`
|
||||
);
|
||||
return !isSummary.value && route.meta.moduleName && routeExists;
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -64,7 +71,7 @@ async function fetch() {
|
|||
<div class="summaryHeader bg-primary q-pa-sm text-weight-bolder">
|
||||
<slot name="header-left">
|
||||
<router-link
|
||||
v-if="!isSummary && route.meta.moduleName"
|
||||
v-if="showRedirectToSummaryIcon"
|
||||
class="header link"
|
||||
:to="{
|
||||
name: `${route.meta.moduleName}Summary`,
|
||||
|
|
|
|||
|
|
@ -426,6 +426,7 @@ ticket:
|
|||
boxing: Boxing
|
||||
sms: Sms
|
||||
notes: Notes
|
||||
sale: Sale
|
||||
list:
|
||||
nickname: Nickname
|
||||
state: State
|
||||
|
|
@ -1237,8 +1238,8 @@ zone:
|
|||
upcomingList: Upcoming deliveries
|
||||
monitor:
|
||||
pageTitles:
|
||||
monitors: Monitors
|
||||
salesMonitor: Sales monitor
|
||||
monitors: Monitores
|
||||
list: Listado
|
||||
components:
|
||||
topbar: {}
|
||||
itemsFilterPanel:
|
||||
|
|
|
|||
|
|
@ -424,6 +424,7 @@ ticket:
|
|||
boxing: Encajado
|
||||
sms: Sms
|
||||
notes: Notas
|
||||
sale: Lineas del pedido
|
||||
list:
|
||||
nickname: Alias
|
||||
state: Estado
|
||||
|
|
@ -1234,10 +1235,10 @@ zone:
|
|||
zonesList: Zonas
|
||||
deliveryList: Días de entrega
|
||||
upcomingList: Próximos repartos
|
||||
monitors:
|
||||
monitor:
|
||||
pageTitles:
|
||||
monitors: Monitores
|
||||
salesMonitor: Monitor de ventas
|
||||
list: Listado
|
||||
components:
|
||||
topbar: {}
|
||||
itemsFilterPanel:
|
||||
|
|
|
|||
|
|
@ -0,0 +1,69 @@
|
|||
<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';
|
||||
|
||||
const { t } = useI18n();
|
||||
const stateStore = useStateStore();
|
||||
|
||||
const expanded = ref(true);
|
||||
|
||||
onMounted(async () => {
|
||||
stateStore.rightDrawer = true;
|
||||
});
|
||||
|
||||
onUnmounted(() => (stateStore.rightDrawer = false));
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<QPage class="column items-center q-pa-md">
|
||||
<QExpansionItem
|
||||
v-model="expanded"
|
||||
dense
|
||||
:duration="150"
|
||||
class="full-width q-mb-lg"
|
||||
>
|
||||
<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>
|
||||
<QCard class="card">
|
||||
<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>
|
||||
</QCard>
|
||||
</template>
|
||||
</QExpansionItem>
|
||||
<SalesTicketsTable />
|
||||
</QPage>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.card {
|
||||
display: flex;
|
||||
|
||||
@media (max-width: $breakpoint-md-max) {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,219 @@
|
|||
<script setup>
|
||||
import { ref, computed, reactive, watch } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import FetchData from 'components/FetchData.vue';
|
||||
import VnSelect from 'src/components/common/VnSelect.vue';
|
||||
import VnInputDate from 'src/components/common/VnInputDate.vue';
|
||||
import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
|
||||
import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
|
||||
import VnPaginate from 'components/ui/VnPaginate.vue';
|
||||
|
||||
import { toDateFormat } from 'src/filters/date.js';
|
||||
import { dashIfEmpty } from 'src/filters';
|
||||
|
||||
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: [from.value, to.value],
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
watch(dateRange, (val) => {
|
||||
filter.where['v.stamp'].between = val;
|
||||
paginateRef.value.fetch();
|
||||
});
|
||||
|
||||
function exprBuilder(param, value) {
|
||||
switch (param) {
|
||||
case 'clientFk':
|
||||
return { [`c.id`]: value };
|
||||
case 'salesPersonFk':
|
||||
return { [`c.${param}`]: value };
|
||||
}
|
||||
}
|
||||
|
||||
const params = reactive({});
|
||||
|
||||
const applyColumnFilter = async (col) => {
|
||||
try {
|
||||
const paramKey = col.columnFilter?.filterParamKey || col.field;
|
||||
params[paramKey] = col.columnFilter.filterValue;
|
||||
await paginateRef.value.addFilter(null, params);
|
||||
} catch (err) {
|
||||
console.error('Error applying column filter', err);
|
||||
}
|
||||
};
|
||||
|
||||
const columns = computed(() => [
|
||||
{
|
||||
label: t('salesClientsTable.date'),
|
||||
name: 'date',
|
||||
field: 'dated',
|
||||
align: 'left',
|
||||
columnFilter: null,
|
||||
sortable: true,
|
||||
format: (val) => toDateFormat(val),
|
||||
},
|
||||
{
|
||||
label: t('salesClientsTable.hour'),
|
||||
name: 'hour',
|
||||
field: 'hour',
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
label: t('salesClientsTable.salesPerson'),
|
||||
name: 'salesPerson',
|
||||
field: 'salesPerson',
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
columnFilter: {
|
||||
component: VnSelect,
|
||||
filterParamKey: 'salesPersonFk',
|
||||
type: 'select',
|
||||
filterValue: null,
|
||||
attrs: {
|
||||
options: workersActiveOptions.value,
|
||||
'option-value': 'id',
|
||||
'option-label': 'name',
|
||||
dense: true,
|
||||
},
|
||||
},
|
||||
format: (val) => dashIfEmpty(val),
|
||||
},
|
||||
{
|
||||
label: t('salesClientsTable.client'),
|
||||
field: 'clientName',
|
||||
name: 'client',
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
columnFilter: {
|
||||
component: VnSelect,
|
||||
filterParamKey: 'clientFk',
|
||||
type: 'select',
|
||||
filterValue: null,
|
||||
attrs: {
|
||||
options: clientsOptions.value,
|
||||
'option-value': 'id',
|
||||
'option-label': 'name',
|
||||
dense: true,
|
||||
},
|
||||
},
|
||||
format: (val) => dashIfEmpty(val),
|
||||
},
|
||||
]);
|
||||
</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">
|
||||
<VnPaginate
|
||||
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
|
||||
>
|
||||
<template #body="{ rows }">
|
||||
<QTable
|
||||
:rows="rows"
|
||||
:columns="columns"
|
||||
row-key="id"
|
||||
:pagination="{ rowsPerPage: 0 }"
|
||||
class="full-width"
|
||||
:no-data-label="t('globals.noResults')"
|
||||
>
|
||||
<template #top>
|
||||
<VnInputDate
|
||||
:label="t('salesClientsTable.from')"
|
||||
dense
|
||||
emit-date-format
|
||||
v-model="from"
|
||||
class="q-mr-lg"
|
||||
style="width: 150px"
|
||||
/>
|
||||
<VnInputDate
|
||||
:label="t('salesClientsTable.to')"
|
||||
dense
|
||||
emit-date-format
|
||||
v-model="to"
|
||||
style="width: 150px"
|
||||
/>
|
||||
</template>
|
||||
<template #top-row="{ cols }">
|
||||
<QTr>
|
||||
<QTd
|
||||
v-for="(col, index) in cols"
|
||||
:key="index"
|
||||
style="max-width: 100px"
|
||||
>
|
||||
<VnSelect
|
||||
:is="col.columnFilter.component"
|
||||
v-if="col.columnFilter"
|
||||
v-model="col.columnFilter.filterValue"
|
||||
v-bind="col.columnFilter.attrs"
|
||||
@update:model-value="applyColumnFilter(col)"
|
||||
dense
|
||||
/>
|
||||
</QTd>
|
||||
</QTr>
|
||||
</template>
|
||||
<template #body-cell-salesPerson="{ row }">
|
||||
<QTd>
|
||||
<span class="link">{{ row.salesPerson }}</span>
|
||||
<WorkerDescriptorProxy :id="row.salesPersonFk" dense />
|
||||
</QTd>
|
||||
</template>
|
||||
<template #body-cell-client="{ row }">
|
||||
<QTd>
|
||||
<span class="link">{{ row.clientName }}</span>
|
||||
<CustomerDescriptorProxy :id="row.clientFk" />
|
||||
</QTd>
|
||||
</template>
|
||||
</QTable>
|
||||
</template>
|
||||
</VnPaginate>
|
||||
</QCard>
|
||||
</template>
|
||||
|
|
@ -1,270 +0,0 @@
|
|||
<script setup>
|
||||
import { onMounted, ref, computed, reactive, onUnmounted } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
import FetchData from 'components/FetchData.vue';
|
||||
import FetchedTags from 'components/ui/FetchedTags.vue';
|
||||
import TableVisibleColumns from 'src/components/common/TableVisibleColumns.vue';
|
||||
import VnInput from 'src/components/common/VnInput.vue';
|
||||
import VnSelect from 'src/components/common/VnSelect.vue';
|
||||
import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
|
||||
import VnPaginate from 'components/ui/VnPaginate.vue';
|
||||
|
||||
import { useStateStore } from 'stores/useStateStore';
|
||||
// import { toDateFormat } from 'src/filters/date.js';
|
||||
import { useSession } from 'composables/useSession';
|
||||
import { dashIfEmpty } from 'src/filters';
|
||||
// import { useSummaryDialog } from 'src/composables/useSummaryDialog';
|
||||
// import { useVnConfirm } from 'composables/useVnConfirm';
|
||||
import axios from 'axios';
|
||||
|
||||
const router = useRouter();
|
||||
const { getTokenMultimedia } = useSession();
|
||||
const token = getTokenMultimedia();
|
||||
const stateStore = useStateStore();
|
||||
const { t } = useI18n();
|
||||
// const { viewSummary } = useSummaryDialog();
|
||||
// const { openConfirmationModal } = useVnConfirm();
|
||||
|
||||
const paginateRef = ref(null);
|
||||
const itemTypesOptions = ref([]);
|
||||
const originsOptions = ref([]);
|
||||
const buyersOptions = ref([]);
|
||||
const intrastatOptions = ref([]);
|
||||
const itemCategoriesOptions = ref([]);
|
||||
const visibleColumns = ref([]);
|
||||
const allColumnNames = ref([]);
|
||||
|
||||
// const exprBuilder = (param, value) => {
|
||||
// switch (param) {
|
||||
// case 'category':
|
||||
// return { 'ic.name': value };
|
||||
// case 'buyerFk':
|
||||
// return { 'it.workerFk': value };
|
||||
// case 'grouping':
|
||||
// return { 'b.grouping': value };
|
||||
// case 'packing':
|
||||
// return { 'b.packing': value };
|
||||
// case 'origin':
|
||||
// return { 'ori.code': value };
|
||||
// case 'typeFk':
|
||||
// return { 'i.typeFk': value };
|
||||
// case 'intrastat':
|
||||
// return { 'intr.description': value };
|
||||
// case 'name':
|
||||
// return { 'i.name': { like: `%${value}%` } };
|
||||
// case 'producer':
|
||||
// return { 'pr.name': { like: `%${value}%` } };
|
||||
// case 'id':
|
||||
// case 'size':
|
||||
// case 'subname':
|
||||
// case 'isActive':
|
||||
// case 'weightByPiece':
|
||||
// case 'stemMultiplier':
|
||||
// case 'stems':
|
||||
// return { [`i.${param}`]: value };
|
||||
// }
|
||||
// };
|
||||
|
||||
// const params = reactive({ isFloramondo: false, isActive: true });
|
||||
|
||||
// const applyColumnFilter = async (col) => {
|
||||
// try {
|
||||
// const paramKey = col.columnFilter?.filterParamKey || col.field;
|
||||
// params[paramKey] = col.columnFilter.filterValue;
|
||||
// await paginateRef.value.addFilter(null, params);
|
||||
// } catch (err) {
|
||||
// console.error('Error applying column filter', err);
|
||||
// }
|
||||
// };
|
||||
|
||||
// const getInputEvents = (col) => {
|
||||
// return col.columnFilter.type === 'select'
|
||||
// ? { 'update:modelValue': () => applyColumnFilter(col) }
|
||||
// : {
|
||||
// 'keyup.enter': () => applyColumnFilter(col),
|
||||
// };
|
||||
// };
|
||||
|
||||
const columns = computed(() => [
|
||||
{
|
||||
label: '',
|
||||
name: 'picture',
|
||||
align: 'left',
|
||||
columnFilter: null,
|
||||
},
|
||||
{
|
||||
label: t('item.list.id'),
|
||||
name: 'id',
|
||||
field: 'id',
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
// columnFilter: {
|
||||
// component: VnInput,
|
||||
// type: 'text',
|
||||
// filterValue: null,
|
||||
// event: getInputEvents,
|
||||
// attrs: {
|
||||
// dense: true,
|
||||
// },
|
||||
// },
|
||||
},
|
||||
{
|
||||
label: t('item.list.grouping'),
|
||||
field: 'grouping',
|
||||
name: 'grouping',
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
// columnFilter: {
|
||||
// component: VnInput,
|
||||
// type: 'text',
|
||||
// filterValue: null,
|
||||
// event: getInputEvents,
|
||||
// attrs: {
|
||||
// dense: true,
|
||||
// },
|
||||
// },
|
||||
format: (val) => dashIfEmpty(val),
|
||||
},
|
||||
{
|
||||
label: t('item.list.packing'),
|
||||
field: 'packing',
|
||||
name: 'packing',
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
// columnFilter: {
|
||||
// component: VnInput,
|
||||
// type: 'text',
|
||||
// filterValue: null,
|
||||
// event: getInputEvents,
|
||||
// attrs: {
|
||||
// dense: true,
|
||||
// },
|
||||
// },
|
||||
format: (val) => dashIfEmpty(val),
|
||||
},
|
||||
]);
|
||||
|
||||
const redirectToItemCreate = () => {
|
||||
// router.push({ name: 'ItemCreate' });
|
||||
};
|
||||
|
||||
const redirectToItemSummary = (id) => {
|
||||
router.push({ name: 'ItemSummary', params: { id } });
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
stateStore.rightDrawer = true;
|
||||
const filteredColumns = columns.value.filter(
|
||||
(col) => col.name !== 'picture' && col.name !== 'actions'
|
||||
);
|
||||
allColumnNames.value = filteredColumns.map((col) => col.name);
|
||||
});
|
||||
|
||||
onUnmounted(() => (stateStore.rightDrawer = false));
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FetchData
|
||||
url="ItemTypes"
|
||||
:filter="{ fields: ['id', 'name'], order: 'name ASC' }"
|
||||
auto-load
|
||||
@on-fetch="(data) => (itemTypesOptions = data)"
|
||||
/>
|
||||
<FetchData
|
||||
url="ItemCategories"
|
||||
:filter="{ fields: ['name'], order: 'name ASC' }"
|
||||
auto-load
|
||||
@on-fetch="(data) => (itemCategoriesOptions = data)"
|
||||
/>
|
||||
<FetchData
|
||||
url="Intrastats"
|
||||
:filter="{ fields: ['description'], order: 'description ASC' }"
|
||||
auto-load
|
||||
@on-fetch="(data) => (intrastatOptions = data)"
|
||||
/>
|
||||
<FetchData
|
||||
url="Origins"
|
||||
:filter="{ fields: ['code'], order: 'code ASC' }"
|
||||
auto-load
|
||||
@on-fetch="(data) => (originsOptions = data)"
|
||||
/>
|
||||
<FetchData
|
||||
url="TicketRequests/getItemTypeWorker"
|
||||
:filter="{ fields: ['id', 'nickname'], order: 'nickname ASC' }"
|
||||
auto-load
|
||||
@on-fetch="(data) => (buyersOptions = data)"
|
||||
/>
|
||||
|
||||
<QToolbar class="bg-vn-dark justify-end">
|
||||
<div id="st-data">
|
||||
<TableVisibleColumns
|
||||
:all-columns="allColumnNames"
|
||||
table-code="itemsIndex"
|
||||
labels-traductions-path="item.list"
|
||||
@on-config-saved="visibleColumns = ['picture', ...$event, 'actions']"
|
||||
/>
|
||||
</div>
|
||||
<QSpace />
|
||||
<div id="st-actions"></div>
|
||||
</QToolbar>
|
||||
|
||||
<QPage class="column items-center q-pa-md">
|
||||
<VnPaginate
|
||||
ref="paginateRef"
|
||||
data-key="ItemList"
|
||||
url="Items/filter"
|
||||
:order="['isActive DESC', 'name', 'id']"
|
||||
:limit="12"
|
||||
:expr-builder="exprBuilder"
|
||||
:user-params="params"
|
||||
:offset="50"
|
||||
auto-load
|
||||
>
|
||||
<template #body="{ rows }">
|
||||
<QTable
|
||||
:rows="rows"
|
||||
:columns="columns"
|
||||
row-key="id"
|
||||
:pagination="{ rowsPerPage: 0 }"
|
||||
class="full-width q-mt-md"
|
||||
:visible-columns="visibleColumns"
|
||||
:no-data-label="t('globals.noResults')"
|
||||
@row-click="(_, row) => redirectToItemSummary(row.id)"
|
||||
>
|
||||
<!-- <template #top-row="{ cols }">
|
||||
<QTr>
|
||||
<QTd
|
||||
v-for="(col, index) in cols"
|
||||
:key="index"
|
||||
style="max-width: 100px"
|
||||
>
|
||||
<component
|
||||
:is="col.columnFilter.component"
|
||||
v-if="col.columnFilter"
|
||||
v-model="col.columnFilter.filterValue"
|
||||
v-bind="col.columnFilter.attrs"
|
||||
v-on="col.columnFilter.event(col)"
|
||||
dense
|
||||
/>
|
||||
</QTd>
|
||||
</QTr>
|
||||
</template> -->
|
||||
<template #body-cell-picture="{ row }">
|
||||
<QTd>
|
||||
<QImg
|
||||
:src="`/api/Images/catalog/50x50/${row.id}/download?access_token=${token}`"
|
||||
spinner-color="primary"
|
||||
:ratio="1"
|
||||
height="50px"
|
||||
width="50px"
|
||||
class="image"
|
||||
/>
|
||||
</QTd>
|
||||
</template>
|
||||
</QTable>
|
||||
</template>
|
||||
</VnPaginate>
|
||||
</QPage>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,198 @@
|
|||
<script setup>
|
||||
import { ref, computed } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
import FetchData from 'components/FetchData.vue';
|
||||
import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
|
||||
import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
|
||||
import VnPaginate from 'components/ui/VnPaginate.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 router = useRouter();
|
||||
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',
|
||||
columnFilter: null,
|
||||
},
|
||||
{
|
||||
label: t('salesOrdersTable.client'),
|
||||
name: 'client',
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
label: t('salesOrdersTable.salesPerson'),
|
||||
name: 'salesPerson',
|
||||
align: 'left',
|
||||
sortable: 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)"
|
||||
/>
|
||||
|
||||
<QCard style="max-height: 380px; overflow-y: scroll">
|
||||
<VnPaginate
|
||||
ref="paginateRef"
|
||||
data-key="SalesMonitorOrders"
|
||||
url="SalesMonitors/ordersFilter"
|
||||
order="date_make DESC"
|
||||
:limit="6"
|
||||
:expr-builder="exprBuilder"
|
||||
auto-load
|
||||
>
|
||||
<template #body="{ rows }">
|
||||
<QTable
|
||||
:rows="rows"
|
||||
:columns="columns"
|
||||
row-key="id"
|
||||
selection="multiple"
|
||||
v-model:selected="selectedRows"
|
||||
:pagination="{ rowsPerPage: 0 }"
|
||||
:no-data-label="t('globals.noResults')"
|
||||
@row-click="(_, row) => redirectToOrderSummary(row.id)"
|
||||
>
|
||||
<template #top>
|
||||
<QBtn
|
||||
v-if="selectedRows.length > 0"
|
||||
icon="delete"
|
||||
size="md"
|
||||
color="primary"
|
||||
@click="
|
||||
openConfirmationModal(
|
||||
t('salesOrdersTable.deleteConfirmTitle'),
|
||||
t('salesOrdersTable.deleteConfirmMessage'),
|
||||
removeOrders
|
||||
)
|
||||
"
|
||||
>
|
||||
<QTooltip>{{ t('salesOrdersTable.delete') }}</QTooltip>
|
||||
</QBtn>
|
||||
</template>
|
||||
<template #body-cell-date="{ row }">
|
||||
<QTd>
|
||||
<QBadge
|
||||
:color="getBadgeColor(row.date_send)"
|
||||
text-color="black"
|
||||
class="q-ma-none q-mb-md"
|
||||
dense
|
||||
style="font-size: 14px"
|
||||
>
|
||||
{{ toDateFormat(row.date_send) }}
|
||||
</QBadge>
|
||||
<div>{{ toDateTimeFormat(row.date_make) }}</div>
|
||||
</QTd>
|
||||
</template>
|
||||
<template #body-cell-client="{ row }">
|
||||
<QTd>
|
||||
<div class="q-mb-md">
|
||||
<span class="link">{{ row.salesPerson }}</span>
|
||||
<WorkerDescriptorProxy :id="row.salesPersonFk" dense />
|
||||
</div>
|
||||
<span> {{ row.agencyName }}</span>
|
||||
</QTd>
|
||||
</template>
|
||||
<template #body-cell-salesPerson="{ row }">
|
||||
<QTd>
|
||||
<div class="q-mb-md">
|
||||
<span class="link">{{ row.clientName }}</span>
|
||||
<CustomerDescriptorProxy :id="row.clientFk" />
|
||||
</div>
|
||||
<span>{{ toCurrency(row.import) }}</span>
|
||||
</QTd>
|
||||
</template>
|
||||
</QTable>
|
||||
</template>
|
||||
</VnPaginate>
|
||||
</QCard>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,622 @@
|
|||
<script setup>
|
||||
import { ref, computed, onMounted, reactive } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
import FetchData from 'components/FetchData.vue';
|
||||
import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
|
||||
import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
|
||||
import VnPaginate from 'components/ui/VnPaginate.vue';
|
||||
import TableVisibleColumns from 'src/components/common/TableVisibleColumns.vue';
|
||||
import TicketDescriptorProxy from 'src/pages/Ticket/Card/TicketDescriptorProxy.vue';
|
||||
import InvoiceOutDescriptorProxy from 'src/pages/InvoiceOut/Card/InvoiceOutDescriptorProxy.vue';
|
||||
import ZoneDescriptorProxy from 'src/pages/Zone/Card/ZoneDescriptorProxy.vue';
|
||||
import TicketSummary from 'src/pages/Ticket/Card/TicketSummary.vue';
|
||||
import VnInput from 'src/components/common/VnInput.vue';
|
||||
import VnSelect from 'src/components/common/VnSelect.vue';
|
||||
import VnInputDate from 'src/components/common/VnInputDate.vue';
|
||||
|
||||
import { useSummaryDialog } from 'src/composables/useSummaryDialog';
|
||||
import { toDateFormat, toTimeFormat } from 'src/filters/date.js';
|
||||
import { toCurrency } from 'src/filters';
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const router = useRouter();
|
||||
const paginateRef = ref(null);
|
||||
const workersActiveOptions = ref([]);
|
||||
const provincesOptions = ref([]);
|
||||
const statesOptions = ref([]);
|
||||
const zonesOptions = ref([]);
|
||||
const visibleColumns = ref([]);
|
||||
const allColumnNames = ref([]);
|
||||
const { viewSummary } = useSummaryDialog();
|
||||
|
||||
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 'stateFk':
|
||||
return { 'ts.stateFk': value };
|
||||
case 'salesPersonFk':
|
||||
return { 'c.salesPersonFk': value };
|
||||
case 'provinceFk':
|
||||
return { 'a.provinceFk': value };
|
||||
case 'theoreticalHour':
|
||||
return { 'z.hour': value };
|
||||
case 'practicalHour':
|
||||
return { 'zed.etc': value };
|
||||
case 'shippedDate':
|
||||
return {
|
||||
't.shipped': {
|
||||
between: dateRange(value),
|
||||
},
|
||||
};
|
||||
case 'nickname':
|
||||
return { [`t.nickname`]: { like: `%${value}%` } };
|
||||
case 'zoneFk':
|
||||
case 'totalWithVat':
|
||||
return { [`t.${param}`]: value };
|
||||
}
|
||||
}
|
||||
|
||||
const filter = { order: ['totalProblems DESC'] };
|
||||
let params = reactive({});
|
||||
|
||||
const applyColumnFilter = async (col) => {
|
||||
try {
|
||||
const paramKey = col.columnFilter?.filterParamKey || col.field;
|
||||
params[paramKey] = col.columnFilter.filterValue;
|
||||
await paginateRef.value.addFilter(null, params);
|
||||
} catch (err) {
|
||||
console.error('Error applying column filter', err);
|
||||
}
|
||||
};
|
||||
|
||||
const getInputEvents = (col) => {
|
||||
return col.columnFilter.type === 'select' || col.columnFilter.type === 'date'
|
||||
? { 'update:modelValue': () => applyColumnFilter(col) }
|
||||
: {
|
||||
'keyup.enter': () => applyColumnFilter(col),
|
||||
};
|
||||
};
|
||||
|
||||
const fetchParams = ($params = {}) => {
|
||||
const excludedParams = ['search', 'clientFk', 'orderFk', 'refFk', 'scopeDays'];
|
||||
|
||||
const hasExcludedParams = excludedParams.some((param) => {
|
||||
return $params && $params[param] != undefined;
|
||||
});
|
||||
const hasParams = Object.entries($params).length;
|
||||
if (!hasParams || !hasExcludedParams) $params.scopeDays = 1;
|
||||
|
||||
if (typeof $params.scopeDays === 'number') {
|
||||
const from = Date.vnNew();
|
||||
from.setHours(0, 0, 0, 0);
|
||||
|
||||
const to = new Date(from.getTime());
|
||||
to.setDate(to.getDate() + $params.scopeDays);
|
||||
to.setHours(23, 59, 59, 999);
|
||||
|
||||
Object.assign($params, { from, to });
|
||||
}
|
||||
return { tableOrder: 'totalProblems DESC', ...$params };
|
||||
};
|
||||
|
||||
const columns = computed(() => [
|
||||
{
|
||||
label: t('salesTicketsTable.problems'),
|
||||
name: 'problems',
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
columnFilter: null,
|
||||
},
|
||||
{
|
||||
label: t('salesTicketsTable.identifier'),
|
||||
name: 'identifier',
|
||||
field: 'id',
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
columnFilter: {
|
||||
component: VnInput,
|
||||
type: 'text',
|
||||
filterValue: null,
|
||||
event: getInputEvents,
|
||||
attrs: {
|
||||
dense: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t('salesTicketsTable.client'),
|
||||
name: 'client',
|
||||
align: 'left',
|
||||
field: 'nickname',
|
||||
sortable: true,
|
||||
columnFilter: {
|
||||
component: VnInput,
|
||||
type: 'text',
|
||||
filterValue: null,
|
||||
event: getInputEvents,
|
||||
attrs: {
|
||||
dense: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t('salesTicketsTable.salesPerson'),
|
||||
name: 'salesPerson',
|
||||
field: 'userName',
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
columnFilter: {
|
||||
component: VnSelect,
|
||||
filterParamKey: 'salesPersonFk',
|
||||
type: 'select',
|
||||
filterValue: null,
|
||||
event: getInputEvents,
|
||||
attrs: {
|
||||
options: workersActiveOptions.value,
|
||||
'option-value': 'id',
|
||||
'option-label': 'name',
|
||||
dense: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t('salesTicketsTable.date'),
|
||||
name: 'date',
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
columnFilter: {
|
||||
component: VnInputDate,
|
||||
filterParamKey: 'shippedDate',
|
||||
type: 'date',
|
||||
filterValue: null,
|
||||
event: getInputEvents,
|
||||
attrs: {
|
||||
dense: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t('salesTicketsTable.theoretical'),
|
||||
name: 'theoretical',
|
||||
field: 'zoneLanding',
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
format: (val) => toTimeFormat(val),
|
||||
},
|
||||
{
|
||||
label: t('salesTicketsTable.practical'),
|
||||
name: 'practical',
|
||||
field: 'practicalHour',
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
columnFilter: {
|
||||
component: VnInput,
|
||||
type: 'text',
|
||||
filterValue: null,
|
||||
event: getInputEvents,
|
||||
attrs: {
|
||||
dense: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t('salesTicketsTable.preparation'),
|
||||
name: 'preparation',
|
||||
field: 'shipped',
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
format: (val) => toTimeFormat(val),
|
||||
},
|
||||
|
||||
{
|
||||
label: t('salesTicketsTable.province'),
|
||||
name: 'province',
|
||||
field: 'province',
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
columnFilter: {
|
||||
component: VnSelect,
|
||||
filterParamKey: 'provinceFk',
|
||||
type: 'select',
|
||||
filterValue: null,
|
||||
event: getInputEvents,
|
||||
attrs: {
|
||||
options: provincesOptions.value,
|
||||
'option-value': 'id',
|
||||
'option-label': 'name',
|
||||
dense: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t('salesTicketsTable.state'),
|
||||
name: 'state',
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
columnFilter: {
|
||||
component: VnSelect,
|
||||
filterParamKey: 'stateFk',
|
||||
type: 'select',
|
||||
filterValue: null,
|
||||
event: getInputEvents,
|
||||
attrs: {
|
||||
options: statesOptions.value,
|
||||
'option-value': 'id',
|
||||
'option-label': 'name',
|
||||
dense: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t('salesTicketsTable.isFragile'),
|
||||
name: 'isFragile',
|
||||
field: 'isFragile',
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
columnFilter: {
|
||||
component: VnInput,
|
||||
type: 'text',
|
||||
filterValue: null,
|
||||
event: getInputEvents,
|
||||
attrs: {
|
||||
dense: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t('salesTicketsTable.zone'),
|
||||
name: 'zone',
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
columnFilter: {
|
||||
component: VnSelect,
|
||||
filterParamKey: 'zoneFk',
|
||||
type: 'select',
|
||||
filterValue: null,
|
||||
event: getInputEvents,
|
||||
attrs: {
|
||||
options: zonesOptions.value,
|
||||
'option-value': 'id',
|
||||
'option-label': 'name',
|
||||
dense: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t('salesTicketsTable.total'),
|
||||
name: 'total',
|
||||
field: 'totalWithVat',
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
columnFilter: {
|
||||
component: VnInput,
|
||||
type: 'text',
|
||||
filterValue: null,
|
||||
event: getInputEvents,
|
||||
attrs: {
|
||||
dense: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'rowActions',
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
},
|
||||
]);
|
||||
|
||||
const getBadgeAttrs = (date) => {
|
||||
let today = Date.vnNew();
|
||||
today.setHours(0, 0, 0, 0);
|
||||
let timeTicket = new Date(date);
|
||||
timeTicket.setHours(0, 0, 0, 0);
|
||||
|
||||
let comparation = today - timeTicket;
|
||||
|
||||
if (comparation == 0) return { color: 'warning', 'text-color': 'black' };
|
||||
if (comparation < 0) return { color: 'success', 'text-color': 'black' };
|
||||
return { color: 'transparent', 'text-color': 'white' };
|
||||
};
|
||||
|
||||
const redirectToTicketSummary = (id) => {
|
||||
router.push({ name: 'TicketSummary', params: { id } });
|
||||
};
|
||||
|
||||
const stateColors = {
|
||||
notice: 'info',
|
||||
success: 'positive',
|
||||
warning: 'warning',
|
||||
alert: 'negative',
|
||||
};
|
||||
|
||||
const totalPriceColor = (ticket) => {
|
||||
const total = parseInt(ticket.totalWithVat);
|
||||
if (total > 0 && total < 50) return 'warning';
|
||||
};
|
||||
|
||||
const formatShippedDate = (date) => {
|
||||
if (!date) return '-';
|
||||
const split1 = date.split('T');
|
||||
const [year, month, day] = split1[0].split('-');
|
||||
const _date = new Date(year, month - 1, day);
|
||||
return toDateFormat(_date);
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
const filteredColumns = columns.value.filter((col) => col.name !== 'rowActions');
|
||||
allColumnNames.value = filteredColumns.map((col) => col.name);
|
||||
params = fetchParams();
|
||||
await paginateRef.value.addFilter(null, params);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FetchData
|
||||
url="Workers/activeWithInheritedRole"
|
||||
:filter="{
|
||||
fields: ['id', 'nickname'],
|
||||
order: 'nickname ASC',
|
||||
where: { role: 'salesPerson' },
|
||||
}"
|
||||
auto-load
|
||||
@on-fetch="(data) => (workersActiveOptions = data)"
|
||||
/>
|
||||
<FetchData
|
||||
url="Provinces"
|
||||
:filter="{
|
||||
fields: ['id', 'name'],
|
||||
order: 'name ASC',
|
||||
}"
|
||||
auto-load
|
||||
@on-fetch="(data) => (provincesOptions = data)"
|
||||
/>
|
||||
<FetchData
|
||||
url="States"
|
||||
:filter="{
|
||||
fields: ['id', 'name'],
|
||||
order: 'name ASC',
|
||||
}"
|
||||
auto-load
|
||||
@on-fetch="(data) => (statesOptions = data)"
|
||||
/>
|
||||
<FetchData
|
||||
url="Zones"
|
||||
:filter="{
|
||||
fields: ['id', 'name'],
|
||||
order: 'name ASC',
|
||||
}"
|
||||
auto-load
|
||||
@on-fetch="(data) => (zonesOptions = data)"
|
||||
/>
|
||||
<VnPaginate
|
||||
ref="paginateRef"
|
||||
data-key="SalesMonitorTickets"
|
||||
url="SalesMonitors/salesFilter"
|
||||
:filter="filter"
|
||||
:limit="20"
|
||||
:expr-builder="exprBuilder"
|
||||
:user-params="params"
|
||||
:offset="50"
|
||||
>
|
||||
<template #body="{ rows }">
|
||||
<QTable
|
||||
:rows="rows"
|
||||
:columns="columns"
|
||||
row-key="id"
|
||||
:pagination="{ rowsPerPage: 0 }"
|
||||
:visible-columns="visibleColumns"
|
||||
:no-data-label="t('globals.noResults')"
|
||||
@row-click="(_, row) => redirectToTicketSummary(row.id)"
|
||||
>
|
||||
<template #top>
|
||||
<TableVisibleColumns
|
||||
:all-columns="allColumnNames"
|
||||
table-code="ticketsMonitor"
|
||||
labels-traductions-path="salesTicketsTable"
|
||||
@on-config-saved="visibleColumns = [...$event, 'rowActions']"
|
||||
/>
|
||||
</template>
|
||||
<template #top-row="{ cols }">
|
||||
<QTr>
|
||||
<QTd
|
||||
v-for="(col, index) in cols"
|
||||
:key="index"
|
||||
style="max-width: 100px"
|
||||
>
|
||||
<component
|
||||
:is="col.columnFilter.component"
|
||||
v-if="col.columnFilter"
|
||||
v-model="col.columnFilter.filterValue"
|
||||
v-bind="col.columnFilter.attrs"
|
||||
v-on="col.columnFilter.event(col)"
|
||||
dense
|
||||
/>
|
||||
</QTd>
|
||||
</QTr>
|
||||
</template>
|
||||
<template #body-cell-problems="{ row }">
|
||||
<QTd class="q-gutter-x-sm">
|
||||
<QIcon
|
||||
v-if="row.isTaxDataChecked === 0"
|
||||
name="vn:no036"
|
||||
color="primary"
|
||||
size="xs"
|
||||
>
|
||||
<QTooltip>{{
|
||||
t('salesTicketsTable.noVerifiedData')
|
||||
}}</QTooltip>
|
||||
</QIcon>
|
||||
<QIcon
|
||||
v-if="row.hasTicketRequest"
|
||||
name="vn:buyrequest"
|
||||
color="primary"
|
||||
size="xs"
|
||||
>
|
||||
<QTooltip>{{
|
||||
t('salesTicketsTable.purchaseRequest')
|
||||
}}</QTooltip>
|
||||
</QIcon>
|
||||
<QIcon
|
||||
v-if="row.itemShortage"
|
||||
name="vn:unavailable"
|
||||
color="primary"
|
||||
size="xs"
|
||||
>
|
||||
<QTooltip>{{ t('salesTicketsTable.notVisible') }}</QTooltip>
|
||||
</QIcon>
|
||||
<QIcon
|
||||
v-if="row.isFreezed"
|
||||
name="vn:frozen"
|
||||
color="primary"
|
||||
size="xs"
|
||||
>
|
||||
<QTooltip>{{ t('salesTicketsTable.clientFrozen') }}</QTooltip>
|
||||
</QIcon>
|
||||
<QIcon
|
||||
v-if="row.risk"
|
||||
name="vn:risk"
|
||||
:color="row.hasHighRisk ? 'negative' : 'primary'"
|
||||
size="xs"
|
||||
>
|
||||
<QTooltip
|
||||
>{{ t('salesTicketsTable.risk') }}:
|
||||
{{ row.risk }}</QTooltip
|
||||
>
|
||||
</QIcon>
|
||||
<QIcon
|
||||
v-if="row.hasComponentLack"
|
||||
name="vn:components"
|
||||
color="primary"
|
||||
size="xs"
|
||||
>
|
||||
<QTooltip>{{
|
||||
t('salesTicketsTable.componentLack')
|
||||
}}</QTooltip>
|
||||
</QIcon>
|
||||
<QIcon
|
||||
v-if="row.isTooLittle"
|
||||
name="vn:isTooLittle"
|
||||
color="primary"
|
||||
size="xs"
|
||||
>
|
||||
<QTooltip>{{ t('salesTicketsTable.tooLittle') }}</QTooltip>
|
||||
</QIcon>
|
||||
</QTd>
|
||||
</template>
|
||||
<template #body-cell-identifier="{ row }">
|
||||
<QTd>
|
||||
<span class="link" @click.stop.prevent>{{ row.id }}</span>
|
||||
<TicketDescriptorProxy :id="row.id" />
|
||||
</QTd>
|
||||
</template>
|
||||
<template #body-cell-client="{ row }">
|
||||
<QTd @click.stop.prevent>
|
||||
<span class="link">{{ row.nickname }}</span>
|
||||
<CustomerDescriptorProxy :id="row.clientFk" />
|
||||
</QTd>
|
||||
</template>
|
||||
<template #body-cell-salesPerson="{ row }">
|
||||
<QTd @click.stop.prevent>
|
||||
<span class="link">{{ row.userName }}</span>
|
||||
<WorkerDescriptorProxy :id="row.salesPersonFk" />
|
||||
</QTd>
|
||||
</template>
|
||||
<template #body-cell-date="{ row }">
|
||||
<QTd>
|
||||
<QBadge
|
||||
v-bind="getBadgeAttrs(row.shippedDate)"
|
||||
class="q-ma-none"
|
||||
dense
|
||||
style="font-size: 14px"
|
||||
>
|
||||
{{ formatShippedDate(row.shippedDate) }}
|
||||
</QBadge>
|
||||
</QTd>
|
||||
</template>
|
||||
<template #body-cell-state="{ row }">
|
||||
<QTd @click.stop.prevent>
|
||||
<div v-if="row.refFk">
|
||||
<span class="link">{{ row.refFk }}</span>
|
||||
<InvoiceOutDescriptorProxy :id="row.invoiceOutId" />
|
||||
</div>
|
||||
<QBadge
|
||||
v-else
|
||||
:color="stateColors[row.classColor] || 'transparent'"
|
||||
:text-color="stateColors[row.classColor] ? 'black' : 'white'"
|
||||
dense
|
||||
style="font-size: 14px"
|
||||
>
|
||||
{{ row.state }}
|
||||
</QBadge>
|
||||
</QTd>
|
||||
</template>
|
||||
<template #body-cell-isFragile="{ row }">
|
||||
<QTd>
|
||||
<QIcon
|
||||
v-if="row.isFragile"
|
||||
name="local_bar"
|
||||
color="primary"
|
||||
size="sm"
|
||||
>
|
||||
<QTooltip>{{ t('salesTicketsTable.isFragile') }}</QTooltip>
|
||||
</QIcon>
|
||||
</QTd>
|
||||
</template>
|
||||
<template #body-cell-zone="{ row }">
|
||||
<QTd @click.stop.prevent>
|
||||
<span class="link">{{ row.zoneName }}</span>
|
||||
<ZoneDescriptorProxy :id="row.zoneFk" />
|
||||
</QTd>
|
||||
</template>
|
||||
<template #body-cell-total="{ row }">
|
||||
<QTd>
|
||||
<QBadge
|
||||
:color="totalPriceColor(row) || 'transparent'"
|
||||
:text-color="totalPriceColor(row) ? 'black' : 'white'"
|
||||
dense
|
||||
style="font-size: 14px"
|
||||
>
|
||||
{{ toCurrency(row.totalWithVat) }}
|
||||
</QBadge>
|
||||
</QTd>
|
||||
</template>
|
||||
<template #body-cell-rowActions="{ row }">
|
||||
<QTd @click.stop.prevent>
|
||||
<QBtn
|
||||
icon="vn:lines"
|
||||
color="primary"
|
||||
size="md"
|
||||
class="q-mr-sm"
|
||||
flat
|
||||
dense
|
||||
:to="{ name: 'TicketSale', params: { id: row.id } }"
|
||||
>
|
||||
<QTooltip>{{ t('salesTicketsTable.goToLines') }}</QTooltip>
|
||||
</QBtn>
|
||||
<QBtn
|
||||
icon="preview"
|
||||
color="primary"
|
||||
size="md"
|
||||
dense
|
||||
flat
|
||||
@click="viewSummary(row.id, TicketSummary)"
|
||||
>
|
||||
<QTooltip>{{ t('salesTicketsTable.preview') }}</QTooltip>
|
||||
</QBtn>
|
||||
</QTd>
|
||||
</template>
|
||||
</QTable>
|
||||
</template>
|
||||
</VnPaginate>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
salesMonitor:
|
||||
clientsOnWebsite: Clients on website
|
||||
recentOrderActions: Recent order actions
|
||||
salesClientsTable:
|
||||
from: From
|
||||
to: To
|
||||
date: Date
|
||||
hour: Hour
|
||||
salesPerson: Salesperson
|
||||
client: Client
|
||||
salesOrdersTable:
|
||||
delete: Delete
|
||||
date: Date
|
||||
client: Client
|
||||
salesPerson: Salesperson
|
||||
deleteConfirmTitle: Delete selected elements
|
||||
deleteConfirmMessage: All the selected elements will be deleted. Are you sure you want to continue?
|
||||
salesTicketsTable:
|
||||
problems: Problems
|
||||
noVerifiedData: No verified data
|
||||
notVisible: Not visible
|
||||
purchaseRequest: Purchase request
|
||||
clientFrozen: Client frozen
|
||||
risk: Risk
|
||||
componentLack: Component lack
|
||||
tooLittle: Ticket too little
|
||||
identifier: Identifier
|
||||
client: Client
|
||||
salesPerson: Salesperson
|
||||
date: Date
|
||||
theoretical: Theoretical
|
||||
practical: Practical
|
||||
province: Province
|
||||
state: State
|
||||
isFragile: Is fragile
|
||||
zone: Zone
|
||||
goToLines: Go to lines
|
||||
preview: Preview
|
||||
total: Total
|
||||
preparation: Preparation
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
salesMonitor:
|
||||
clientsOnWebsite: Clientes activos en la web
|
||||
recentOrderActions: Acciones recientes en pedidos
|
||||
salesClientsTable:
|
||||
from: Desde
|
||||
to: Hasta
|
||||
date: Fecha
|
||||
hour: Hora
|
||||
salesPerson: Comercial
|
||||
client: Cliente
|
||||
salesOrdersTable:
|
||||
delete: Eliminar
|
||||
date: Fecha
|
||||
client: Cliente
|
||||
salesPerson: Comercial
|
||||
deleteConfirmTitle: Eliminar los elementos seleccionados
|
||||
deleteConfirmMessage: Todos los elementos seleccionados serán eliminados. ¿Seguro que quieres continuar?
|
||||
salesTicketsTable:
|
||||
problems: Problemas
|
||||
noVerifiedData: Sin datos comprobados
|
||||
notVisible: No visible
|
||||
purchaseRequest: Petición de compra
|
||||
clientFrozen: Cliente congelado
|
||||
risk: Riesgo
|
||||
componentLack: Faltan componentes
|
||||
tooLittle: Ticket demasiado pequeño
|
||||
identifier: Identificador
|
||||
client: Cliente
|
||||
salesPerson: Comercial
|
||||
date: Fecha
|
||||
theoretical: Teórica
|
||||
practical: Práctica
|
||||
province: Provincia
|
||||
state: Estado
|
||||
isFragile: Es frágil
|
||||
zone: Zona
|
||||
goToLines: Ir a líneas
|
||||
preview: Vista previa
|
||||
total: Total
|
||||
preparation: Preparación
|
||||
|
|
@ -0,0 +1 @@
|
|||
<template>Ticket sale</template>
|
||||
|
|
@ -5,13 +5,13 @@ export default {
|
|||
name: 'Monitor',
|
||||
meta: {
|
||||
title: 'monitors',
|
||||
icon: 'vn:grid',
|
||||
icon: 'grid_view',
|
||||
moduleName: 'Monitor',
|
||||
},
|
||||
component: RouterView,
|
||||
redirect: { name: 'MonitorMain' },
|
||||
menus: {
|
||||
main: ['SalesMonitor'],
|
||||
main: ['MonitorList'],
|
||||
card: [],
|
||||
},
|
||||
children: [
|
||||
|
|
@ -19,24 +19,18 @@ export default {
|
|||
path: '',
|
||||
name: 'MonitorMain',
|
||||
component: () => import('src/pages/Monitor/MonitorMain.vue'),
|
||||
redirect: { name: 'SalesMonitor' },
|
||||
redirect: { name: 'MonitorList' },
|
||||
children: [
|
||||
{
|
||||
path: 'index',
|
||||
name: 'SalesMonitor',
|
||||
path: 'list',
|
||||
name: 'MonitorList',
|
||||
meta: {
|
||||
title: 'salesMonitor',
|
||||
icon: 'vn:grid',
|
||||
title: 'list',
|
||||
icon: 'grid_view',
|
||||
},
|
||||
component: () => import('src/pages/Monitor/SalesMonitor.vue'),
|
||||
component: () => import('src/pages/Monitor/MonitorList.vue'),
|
||||
},
|
||||
],
|
||||
},
|
||||
// {
|
||||
// name: 'ItemCard',
|
||||
// path: ':id',
|
||||
// component: () => import('src/pages/Item/Card/ItemCard.vue'),
|
||||
// children: [],
|
||||
// },
|
||||
],
|
||||
};
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ export default {
|
|||
redirect: { name: 'TicketMain' },
|
||||
menus: {
|
||||
main: ['TicketList'],
|
||||
card: ['TicketBoxing', 'TicketSms'],
|
||||
card: ['TicketBoxing', 'TicketSms', 'TicketSale'],
|
||||
},
|
||||
children: [
|
||||
{
|
||||
|
|
@ -66,6 +66,15 @@ export default {
|
|||
},
|
||||
component: () => import('src/pages/Ticket/Card/TicketBasicData.vue'),
|
||||
},
|
||||
{
|
||||
name: 'TicketSale',
|
||||
path: 'sale',
|
||||
meta: {
|
||||
title: 'sale',
|
||||
icon: 'vn:lines',
|
||||
},
|
||||
component: () => import('src/pages/Ticket/Card/TicketSale.vue'),
|
||||
},
|
||||
{
|
||||
path: 'boxing',
|
||||
name: 'TicketBoxing',
|
||||
|
|
|
|||
Loading…
Reference in New Issue