Sales monitor base
This commit is contained in:
parent
e3a36c0ab1
commit
dbc9e9dd71
|
|
@ -1235,6 +1235,10 @@ zone:
|
|||
zonesList: Zones
|
||||
deliveryList: Delivery days
|
||||
upcomingList: Upcoming deliveries
|
||||
monitor:
|
||||
pageTitles:
|
||||
monitors: Monitors
|
||||
salesMonitor: Sales monitor
|
||||
components:
|
||||
topbar: {}
|
||||
itemsFilterPanel:
|
||||
|
|
|
|||
|
|
@ -1234,6 +1234,10 @@ zone:
|
|||
zonesList: Zonas
|
||||
deliveryList: Días de entrega
|
||||
upcomingList: Próximos repartos
|
||||
monitors:
|
||||
pageTitles:
|
||||
monitors: Monitores
|
||||
salesMonitor: Monitor de ventas
|
||||
components:
|
||||
topbar: {}
|
||||
itemsFilterPanel:
|
||||
|
|
|
|||
|
|
@ -0,0 +1,18 @@
|
|||
<script setup>
|
||||
import LeftMenu from 'src/components/LeftMenu.vue';
|
||||
|
||||
import { useStateStore } from 'stores/useStateStore';
|
||||
|
||||
const stateStore = useStateStore();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
|
||||
<QScrollArea class="fit text-grey-8">
|
||||
<LeftMenu />
|
||||
</QScrollArea>
|
||||
</QDrawer>
|
||||
<QPageContainer>
|
||||
<RouterView></RouterView>
|
||||
</QPageContainer>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,270 @@
|
|||
<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>
|
||||
|
|
@ -18,6 +18,7 @@ import Parking from './parking';
|
|||
import Agency from './agency';
|
||||
import ItemType from './itemType';
|
||||
import Zone from './zone';
|
||||
import Monitor from './monitor';
|
||||
|
||||
export default [
|
||||
Item,
|
||||
|
|
@ -40,4 +41,5 @@ export default [
|
|||
Agency,
|
||||
ItemType,
|
||||
Zone,
|
||||
Monitor,
|
||||
];
|
||||
|
|
|
|||
|
|
@ -0,0 +1,42 @@
|
|||
import { RouterView } from 'vue-router';
|
||||
|
||||
export default {
|
||||
path: '/monitor',
|
||||
name: 'Monitor',
|
||||
meta: {
|
||||
title: 'monitors',
|
||||
icon: 'vn:grid',
|
||||
moduleName: 'Monitor',
|
||||
},
|
||||
component: RouterView,
|
||||
redirect: { name: 'MonitorMain' },
|
||||
menus: {
|
||||
main: ['SalesMonitor'],
|
||||
card: [],
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: '',
|
||||
name: 'MonitorMain',
|
||||
component: () => import('src/pages/Monitor/MonitorMain.vue'),
|
||||
redirect: { name: 'SalesMonitor' },
|
||||
children: [
|
||||
{
|
||||
path: 'index',
|
||||
name: 'SalesMonitor',
|
||||
meta: {
|
||||
title: 'salesMonitor',
|
||||
icon: 'vn:grid',
|
||||
},
|
||||
component: () => import('src/pages/Monitor/SalesMonitor.vue'),
|
||||
},
|
||||
],
|
||||
},
|
||||
// {
|
||||
// name: 'ItemCard',
|
||||
// path: ':id',
|
||||
// component: () => import('src/pages/Item/Card/ItemCard.vue'),
|
||||
// children: [],
|
||||
// },
|
||||
],
|
||||
};
|
||||
|
|
@ -18,6 +18,7 @@ import roadmap from 'src/router/modules/roadmap';
|
|||
import parking from 'src/router/modules/parking';
|
||||
import agency from 'src/router/modules/agency';
|
||||
import zone from 'src/router/modules/zone';
|
||||
import monitor from 'src/router/modules/monitor';
|
||||
|
||||
const routes = [
|
||||
{
|
||||
|
|
@ -65,6 +66,7 @@ const routes = [
|
|||
shelving,
|
||||
invoiceOut,
|
||||
invoiceIn,
|
||||
monitor,
|
||||
wagon,
|
||||
order,
|
||||
route,
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@ export const useNavigationStore = defineStore('navigationStore', () => {
|
|||
'travel',
|
||||
'invoiceOut',
|
||||
'invoiceIn',
|
||||
'monitor',
|
||||
'supplier',
|
||||
'claim',
|
||||
'route',
|
||||
|
|
@ -31,7 +32,6 @@ export const useNavigationStore = defineStore('navigationStore', () => {
|
|||
for (const module of modules) {
|
||||
const moduleDef = routes.find((route) => toLowerCamel(route.name) === module);
|
||||
if (!moduleDef) continue;
|
||||
|
||||
const item = addMenuItem(module, moduleDef, modulesRoutes.value);
|
||||
if (!item) continue;
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue