WIP
This commit is contained in:
parent
63f00c24d7
commit
09582ab6a8
|
|
@ -1164,6 +1164,22 @@ export default {
|
|||
warehouseText: 'Calculated on the warehouse of { warehouseName }',
|
||||
itemDiary: 'Item diary',
|
||||
},
|
||||
list: {
|
||||
id: 'Identifier',
|
||||
grouping: 'Grouping',
|
||||
description: 'Description',
|
||||
stems: 'Stems',
|
||||
category: 'Category',
|
||||
type: 'Type',
|
||||
intrastat: 'Intrastat',
|
||||
size: 'Size',
|
||||
origin: 'Origin',
|
||||
userName: 'Buyer',
|
||||
weightByPiece: 'Weight/Piece',
|
||||
multiplier: 'Multiplier',
|
||||
producer: 'Producer',
|
||||
landed: 'Landed',
|
||||
},
|
||||
},
|
||||
components: {
|
||||
topbar: {},
|
||||
|
|
|
|||
|
|
@ -1164,6 +1164,22 @@ export default {
|
|||
warehouseText: 'Calculado sobre el almacén de { warehouseName }',
|
||||
itemDiary: 'Registro de compra-venta',
|
||||
},
|
||||
list: {
|
||||
id: 'Identificador',
|
||||
grouping: 'Grouping',
|
||||
description: 'Descripción',
|
||||
stems: 'Tallos',
|
||||
category: 'Reino',
|
||||
type: 'Tipo',
|
||||
intrastat: 'Intrastat',
|
||||
size: 'Medida',
|
||||
origin: 'Origen',
|
||||
weightByPiece: 'Peso (gramos)/tallo',
|
||||
userName: 'Comprador',
|
||||
multiplier: 'Multiplicador',
|
||||
producer: 'Productor',
|
||||
landed: 'F. entrega',
|
||||
},
|
||||
},
|
||||
components: {
|
||||
topbar: {},
|
||||
|
|
|
|||
|
|
@ -1 +1,549 @@
|
|||
<template>Item list</template>
|
||||
<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 VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
|
||||
import ItemDescriptorProxy from '../Item/Card/ItemDescriptorProxy.vue';
|
||||
import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
|
||||
|
||||
import { useStateStore } from 'stores/useStateStore';
|
||||
import { toDate, toCurrency } from 'src/filters';
|
||||
import { useSession } from 'composables/useSession';
|
||||
import { dashIfEmpty } from 'src/filters';
|
||||
import { useArrayData } from 'composables/useArrayData';
|
||||
|
||||
const router = useRouter();
|
||||
const session = useSession();
|
||||
const token = session.getToken();
|
||||
const stateStore = useStateStore();
|
||||
const { t } = useI18n();
|
||||
|
||||
const itemTypesOptions = ref([]);
|
||||
const originsOptions = ref([]);
|
||||
const itemFamiliesOptions = ref([]);
|
||||
// const intrastatOptions = ref([]);
|
||||
const packagingsOptions = 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({});
|
||||
const arrayData = useArrayData('ItemList', {
|
||||
url: 'Items/filter',
|
||||
order: ['isActive DESC', 'name', 'id'],
|
||||
exprBuilder: exprBuilder,
|
||||
});
|
||||
const store = arrayData.store;
|
||||
const rows = computed(() => store.data);
|
||||
|
||||
// const getInputEvents = (col) => {
|
||||
// return col.columnFilter.type === 'select'
|
||||
// ? { 'update:modelValue': () => applyColumnFilter(col) }
|
||||
// : {
|
||||
// 'keyup.enter': () => applyColumnFilter(col),
|
||||
// };
|
||||
// };
|
||||
|
||||
const columns = computed(() => [
|
||||
{
|
||||
label: '',
|
||||
name: 'picture',
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
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),
|
||||
},
|
||||
{
|
||||
label: t('globals.description'),
|
||||
field: 'description',
|
||||
name: 'description',
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
// columnFilter: {
|
||||
// component: VnInput,
|
||||
// type: 'text',
|
||||
// filterValue: null,
|
||||
// event: getInputEvents,
|
||||
// attrs: {
|
||||
// dense: true,
|
||||
// },
|
||||
// },
|
||||
// format: (val) => dashIfEmpty(val),
|
||||
},
|
||||
{
|
||||
label: t('item.list.stems'),
|
||||
field: 'stems',
|
||||
name: 'stems',
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
// columnFilter: {
|
||||
// component: VnInput,
|
||||
// type: 'text',
|
||||
// filterValue: null,
|
||||
// event: getInputEvents,
|
||||
// attrs: {
|
||||
// dense: true,
|
||||
// },
|
||||
// },
|
||||
},
|
||||
{
|
||||
label: t('item.list.size'),
|
||||
field: 'size',
|
||||
name: 'size',
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
// columnFilter: {
|
||||
// component: VnInput,
|
||||
// type: 'text',
|
||||
// filterValue: null,
|
||||
// event: getInputEvents,
|
||||
// attrs: {
|
||||
// dense: true,
|
||||
// },
|
||||
// },
|
||||
},
|
||||
{
|
||||
label: t('item.list.type'),
|
||||
field: 'typeName',
|
||||
name: 'typeName',
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
// columnFilter: {
|
||||
// component: VnSelectFilter,
|
||||
// type: 'select',
|
||||
// filterValue: null,
|
||||
// event: getInputEvents,
|
||||
// attrs: {
|
||||
// options: itemTypesOptions.value,
|
||||
// 'option-value': 'code',
|
||||
// 'option-label': 'code',
|
||||
// dense: true,
|
||||
// },
|
||||
// },
|
||||
},
|
||||
|
||||
{
|
||||
label: t('item.list.category'),
|
||||
field: 'category',
|
||||
name: 'category',
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
// columnFilter: {
|
||||
// component: VnSelectFilter,
|
||||
// type: 'select',
|
||||
// filterValue: null,
|
||||
// event: getInputEvents,
|
||||
// attrs: {
|
||||
// options: intrastatOptions.value,
|
||||
// 'option-value': 'description',
|
||||
// 'option-label': 'description',
|
||||
// dense: true,
|
||||
// },
|
||||
// },
|
||||
},
|
||||
|
||||
{
|
||||
label: t('item.list.intrastat'),
|
||||
field: 'intrastat',
|
||||
name: 'intrastat',
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
// columnFilter: {
|
||||
// component: VnSelectFilter,
|
||||
// type: 'select',
|
||||
// filterValue: null,
|
||||
// event: getInputEvents,
|
||||
// attrs: {
|
||||
// options: originsOptions.value,
|
||||
// 'option-value': 'code',
|
||||
// 'option-label': 'code',
|
||||
// dense: true,
|
||||
// },
|
||||
// },
|
||||
},
|
||||
{
|
||||
label: t('item.list.origin'),
|
||||
field: 'origin',
|
||||
name: 'origin',
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
// columnFilter: {
|
||||
// component: VnInput,
|
||||
// type: 'text',
|
||||
// filterValue: null,
|
||||
// event: getInputEvents,
|
||||
// attrs: {
|
||||
// dense: true,
|
||||
// },
|
||||
// },
|
||||
},
|
||||
{
|
||||
label: t('item.list.userName'),
|
||||
field: 'userName',
|
||||
name: 'userName',
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
// columnFilter: {
|
||||
// component: VnSelectFilter,
|
||||
// type: 'select',
|
||||
// filterValue: null,
|
||||
// event: getInputEvents,
|
||||
// attrs: {
|
||||
// options: itemFamiliesOptions.value,
|
||||
// 'option-value': 'code',
|
||||
// 'option-label': 'code',
|
||||
// dense: true,
|
||||
// },
|
||||
// },
|
||||
},
|
||||
{
|
||||
label: t('item.list.weightByPiece'),
|
||||
field: 'weightByPiece',
|
||||
name: 'weightByPiece',
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
// columnFilter: {
|
||||
// component: VnInput,
|
||||
// type: 'text',
|
||||
// filterValue: null,
|
||||
// event: getInputEvents,
|
||||
// attrs: {
|
||||
// dense: true,
|
||||
// },
|
||||
// },
|
||||
format: (val) => dashIfEmpty(val),
|
||||
},
|
||||
{
|
||||
label: t('item.list.multiplier'),
|
||||
field: 'stemMultiplier',
|
||||
name: 'stemMultiplier',
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
// columnFilter: {
|
||||
// component: VnInput,
|
||||
// type: 'text',
|
||||
// filterValue: null,
|
||||
// event: getInputEvents,
|
||||
// attrs: {
|
||||
// dense: true,
|
||||
// },
|
||||
// },
|
||||
format: (val) => dashIfEmpty(val),
|
||||
},
|
||||
{
|
||||
label: t('entry.latestBuys.isActive'),
|
||||
field: 'isActive',
|
||||
name: 'isActive',
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
// columnFilter: {
|
||||
// component: VnInput,
|
||||
// type: 'text',
|
||||
// filterValue: null,
|
||||
// event: getInputEvents,
|
||||
// attrs: {
|
||||
// dense: true,
|
||||
// },
|
||||
// },
|
||||
},
|
||||
{
|
||||
label: t('item.list.producer'),
|
||||
field: 'producer',
|
||||
name: 'producer',
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
// columnFilter: {
|
||||
// component: VnInput,
|
||||
// type: 'text',
|
||||
// filterValue: null,
|
||||
// event: getInputEvents,
|
||||
// attrs: {
|
||||
// dense: true,
|
||||
// },
|
||||
// },
|
||||
format: (val) => dashIfEmpty(val),
|
||||
},
|
||||
{
|
||||
label: t('item.list.landed'),
|
||||
field: 'landed',
|
||||
name: 'landed',
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
// columnFilter: {
|
||||
// component: VnInput,
|
||||
// type: 'text',
|
||||
// filterValue: null,
|
||||
// event: getInputEvents,
|
||||
// attrs: {
|
||||
// dense: true,
|
||||
// },
|
||||
// },
|
||||
format: (val) => dashIfEmpty(toDate(val)),
|
||||
},
|
||||
{
|
||||
label: '',
|
||||
name: 'actions',
|
||||
align: 'left',
|
||||
},
|
||||
]);
|
||||
|
||||
const redirectToItemCreate = () => {
|
||||
// router.push({ name: 'EntryBuys', params: { id: entryFk } });
|
||||
};
|
||||
|
||||
const redirectToItemSummary = () => {
|
||||
// router.push({ name: 'EntryBuys', params: { id: entryFk } });
|
||||
};
|
||||
|
||||
// const applyColumnFilter = async (col) => {
|
||||
// try {
|
||||
// params[col.field] = col.columnFilter.filterValue;
|
||||
// await arrayData.addFilter({ params });
|
||||
// } catch (err) {
|
||||
// console.error('Error applying column filter', err);
|
||||
// }
|
||||
// };
|
||||
|
||||
onMounted(async () => {
|
||||
stateStore.rightDrawer = true;
|
||||
const filteredColumns = columns.value.filter((col) => col.name !== 'picture');
|
||||
allColumnNames.value = filteredColumns.map((col) => col.name);
|
||||
await arrayData.fetch({ append: false });
|
||||
});
|
||||
|
||||
onUnmounted(() => (stateStore.rightDrawer = false));
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- <FetchData
|
||||
url="ItemTypes"
|
||||
:filter="{ fields: ['code'], order: 'code ASC', limit: 30 }"
|
||||
auto-load
|
||||
@on-fetch="(data) => (itemTypesOptions = data)"
|
||||
/> -->
|
||||
<!-- <FetchData
|
||||
url="Origins"
|
||||
:filter="{ fields: ['code'], order: 'code ASC', limit: 30 }"
|
||||
auto-load
|
||||
@on-fetch="(data) => (originsOptions = data)"
|
||||
/> -->
|
||||
<!-- <FetchData
|
||||
url="ItemFamilies"
|
||||
:filter="{ fields: ['code'], order: 'code ASC', limit: 30 }"
|
||||
auto-load
|
||||
@on-fetch="(data) => (itemFamiliesOptions = data)"
|
||||
/> -->
|
||||
<!-- <FetchData
|
||||
url="Packagings"
|
||||
:filter="{ fields: ['id'], order: 'id ASC', limit: 30 }"
|
||||
auto-load
|
||||
@on-fetch="(data) => (packagingsOptions = 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]"
|
||||
/>
|
||||
</div>
|
||||
<QSpace />
|
||||
<div id="st-actions"></div>
|
||||
</QToolbar>
|
||||
<!-- <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
|
||||
<QScrollArea class="fit text-grey-8">
|
||||
<EntryLatestBuysFilter data-key="EntryLatestBuys" :tags="tags" />
|
||||
</QScrollArea>
|
||||
</QDrawer> -->
|
||||
<QPage class="column items-center q-pa-md">
|
||||
<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 />
|
||||
<QTd
|
||||
v-for="(col, index) in cols"
|
||||
:key="index"
|
||||
style="max-width: 100px"
|
||||
>
|
||||
<component
|
||||
:is="col.columnFilter.component"
|
||||
v-if="col.name !== 'picture'"
|
||||
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>
|
||||
<template #body-cell-id="{ row }">
|
||||
<QTd @click.stop>
|
||||
<QBtn flat color="primary">
|
||||
{{ row.id }}
|
||||
</QBtn>
|
||||
<ItemDescriptorProxy :id="row.id" />
|
||||
</QTd>
|
||||
</template>
|
||||
<template #body-cell-userName="{ row }">
|
||||
<QTd @click.stop>
|
||||
<QBtn flat color="primary" dense>
|
||||
{{ row.userName }}
|
||||
</QBtn>
|
||||
<WorkerDescriptorProxy :id="row.buyerFk" />
|
||||
</QTd>
|
||||
</template>
|
||||
<template #body-cell-description="{ row }">
|
||||
<QTd class="col">
|
||||
<span>{{ row.name }} {{ row.subName }}</span>
|
||||
<fetched-tags :item="row" :max-length="6" />
|
||||
</QTd>
|
||||
</template>
|
||||
<template #body-cell-isActive="{ row }">
|
||||
<QTd>
|
||||
<QCheckbox :model-value="!!row.isActive" disable />
|
||||
</QTd>
|
||||
</template>
|
||||
<template #body-cell-actions="{}">
|
||||
<QTd>
|
||||
<QIcon
|
||||
@click.stop="viewSummary($props.id, CustomerSummary)"
|
||||
class="q-ml-sm"
|
||||
color="primary"
|
||||
name="vn:clone"
|
||||
size="sm"
|
||||
>
|
||||
<QTooltip>
|
||||
{{ t('Preview') }}
|
||||
</QTooltip>
|
||||
</QIcon>
|
||||
<QIcon
|
||||
@click.stop="viewSummary($props.id, CustomerSummary)"
|
||||
class="q-ml-md"
|
||||
color="primary"
|
||||
name="preview"
|
||||
size="sm"
|
||||
>
|
||||
<QTooltip>
|
||||
{{ t('Preview') }}
|
||||
</QTooltip>
|
||||
</QIcon>
|
||||
</QTd>
|
||||
</template>
|
||||
</QTable>
|
||||
<QPageSticky :offset="[20, 20]">
|
||||
<QBtn @click="redirectToItemCreate()" color="primary" fab icon="add" />
|
||||
<QTooltip>
|
||||
{{ t('New item') }}
|
||||
</QTooltip>
|
||||
</QPageSticky>
|
||||
</QPage>
|
||||
</template>
|
||||
|
||||
<i18n>
|
||||
es:
|
||||
New item: Nuevo artículo
|
||||
</i18n>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ export default {
|
|||
component: RouterView,
|
||||
redirect: { name: 'ItemMain' },
|
||||
menus: {
|
||||
main: [],
|
||||
main: ['ItemList'],
|
||||
card: [],
|
||||
},
|
||||
children: [
|
||||
|
|
@ -18,7 +18,7 @@ export default {
|
|||
path: '',
|
||||
name: 'ItemMain',
|
||||
component: () => import('src/pages/Item/ItemMain.vue'),
|
||||
redirect: { name: 'Itemlist' },
|
||||
redirect: { name: 'ItemList' },
|
||||
children: [
|
||||
{
|
||||
path: 'list',
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ import routes from 'src/router/modules';
|
|||
|
||||
export const useNavigationStore = defineStore('navigationStore', () => {
|
||||
const modules = [
|
||||
'item',
|
||||
'shelving',
|
||||
'order',
|
||||
'customer',
|
||||
|
|
|
|||
Loading…
Reference in New Issue