forked from verdnatura/salix-front
Create items module base structure, item descriptor and add it to supplier consumption
This commit is contained in:
parent
899633171d
commit
4fae8e633b
|
|
@ -0,0 +1,81 @@
|
|||
<script setup>
|
||||
import { reactive, ref } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
|
||||
import FetchData from 'components/FetchData.vue';
|
||||
import VnRow from 'components/ui/VnRow.vue';
|
||||
import FormModelPopup from './FormModelPopup.vue';
|
||||
|
||||
const emit = defineEmits(['onDataSaved']);
|
||||
|
||||
const props = defineProps({
|
||||
itemFk: {
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
warehouseFk: {
|
||||
type: Boolean,
|
||||
default: null,
|
||||
},
|
||||
});
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const regularizeFormData = reactive({
|
||||
itemFk: props.itemFk,
|
||||
warehouseFk: props.warehouseFk,
|
||||
quantity: null,
|
||||
});
|
||||
|
||||
const warehousesOptions = ref([]);
|
||||
|
||||
const onDataSaved = (data) => {
|
||||
emit('onDataSaved', data);
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FetchData
|
||||
url="Warehouses"
|
||||
@on-fetch="(data) => (warehousesOptions = data)"
|
||||
auto-load
|
||||
/>
|
||||
<FormModelPopup
|
||||
url-create="Items/regularize"
|
||||
model="Items"
|
||||
:title="t('Regularize stock')"
|
||||
:form-initial-data="regularizeFormData"
|
||||
@on-data-saved="onDataSaved($event)"
|
||||
>
|
||||
<template #form-inputs="{ data }">
|
||||
<VnRow class="row q-gutter-md q-mb-md">
|
||||
<div class="col">
|
||||
<QInput
|
||||
:label="t('Type the visible quantity')"
|
||||
v-model.number="data.quantity"
|
||||
/>
|
||||
</div>
|
||||
</VnRow>
|
||||
<VnRow class="row q-gutter-md q-mb-md">
|
||||
<div class="col">
|
||||
<VnSelectFilter
|
||||
:label="t('Warehouse')"
|
||||
v-model="data.warehouseFk"
|
||||
:options="warehousesOptions"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
hide-selected
|
||||
/>
|
||||
</div>
|
||||
</VnRow>
|
||||
</template>
|
||||
</FormModelPopup>
|
||||
</template>
|
||||
|
||||
<i18n>
|
||||
es:
|
||||
Warehouse: Almacén
|
||||
Type the visible quantity: Introduce la cantidad visible
|
||||
Regularize stock: Regularizar stock
|
||||
</i18n>
|
||||
|
|
@ -25,6 +25,7 @@ export function useState() {
|
|||
lang: user.value.lang,
|
||||
darkMode: user.value.darkMode,
|
||||
companyFk: user.value.companyFk,
|
||||
warehouseFk: user.value.warehouseFk,
|
||||
};
|
||||
});
|
||||
}
|
||||
|
|
@ -37,6 +38,7 @@ export function useState() {
|
|||
lang: data.lang,
|
||||
darkMode: data.darkMode,
|
||||
companyFk: data.companyFk,
|
||||
warehouseFk: data.warehouseFk,
|
||||
};
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@ export function useUserConfig() {
|
|||
const user = state.getUser().value;
|
||||
user.darkMode = data.darkMode;
|
||||
user.companyFk = data.companyFk;
|
||||
user.warehouseFk = data.warehouseFk;
|
||||
state.setUser(user);
|
||||
|
||||
return data;
|
||||
|
|
|
|||
|
|
@ -1060,6 +1060,25 @@ export default {
|
|||
totalEntries: 'Total entries',
|
||||
},
|
||||
},
|
||||
item: {
|
||||
pageTitles: {
|
||||
items: 'Items',
|
||||
list: 'List',
|
||||
diary: 'Diary',
|
||||
tags: 'Tags',
|
||||
},
|
||||
descriptor: {
|
||||
item: 'Item',
|
||||
buyer: 'Buyer',
|
||||
color: 'Color',
|
||||
category: 'Category',
|
||||
stems: 'Stems',
|
||||
visible: 'Visible',
|
||||
available: 'Available',
|
||||
warehouseText: 'Calculated on the warehouse of { warehouseName }',
|
||||
itemDiary: 'Item diary',
|
||||
},
|
||||
},
|
||||
components: {
|
||||
topbar: {},
|
||||
userPanel: {
|
||||
|
|
|
|||
|
|
@ -1060,6 +1060,25 @@ export default {
|
|||
totalEntries: 'Ent. totales',
|
||||
},
|
||||
},
|
||||
item: {
|
||||
pageTitles: {
|
||||
items: 'Artículos',
|
||||
list: 'Listado',
|
||||
diary: 'Histórico',
|
||||
tags: 'Etiquetas',
|
||||
},
|
||||
descriptor: {
|
||||
item: 'Artículo',
|
||||
buyer: 'Comprador',
|
||||
color: 'Color',
|
||||
category: 'Categoría',
|
||||
stems: 'Tallos',
|
||||
visible: 'Visible',
|
||||
available: 'Disponible',
|
||||
warehouseText: 'Calculado sobre el almacén de { warehouseName }',
|
||||
itemDiary: 'Registro de compra-venta',
|
||||
},
|
||||
},
|
||||
components: {
|
||||
topbar: {},
|
||||
userPanel: {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,25 @@
|
|||
<script setup>
|
||||
import LeftMenu from 'components/LeftMenu.vue';
|
||||
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
|
||||
import ItemDescriptor from './ItemDescriptor.vue';
|
||||
|
||||
import { useStateStore } from 'stores/useStateStore';
|
||||
|
||||
const stateStore = useStateStore();
|
||||
</script>
|
||||
<template>
|
||||
<QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
|
||||
<QScrollArea class="fit">
|
||||
<ItemDescriptor />
|
||||
<QSeparator />
|
||||
<LeftMenu source="card" />
|
||||
</QScrollArea>
|
||||
</QDrawer>
|
||||
<QPageContainer>
|
||||
<QPage>
|
||||
<VnSubToolbar />
|
||||
|
||||
<div class="q-pa-md"><RouterView></RouterView></div>
|
||||
</QPage>
|
||||
</QPageContainer>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,260 @@
|
|||
<script setup>
|
||||
import { computed, ref, onMounted } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useQuasar } from 'quasar';
|
||||
|
||||
import CardDescriptor from 'src/components/ui/CardDescriptor.vue';
|
||||
import VnLv from 'src/components/ui/VnLv.vue';
|
||||
import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
|
||||
import VnConfirm from 'components/ui/VnConfirm.vue';
|
||||
import RegularizeStockForm from 'components/RegularizeStockForm.vue';
|
||||
|
||||
import { useState } from 'src/composables/useState';
|
||||
import useCardDescription from 'src/composables/useCardDescription';
|
||||
import { useSession } from 'src/composables/useSession';
|
||||
import axios from 'axios';
|
||||
|
||||
const $props = defineProps({
|
||||
id: {
|
||||
type: Number,
|
||||
required: false,
|
||||
default: null,
|
||||
},
|
||||
summary: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
dated: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
});
|
||||
|
||||
const quasar = useQuasar();
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const { t } = useI18n();
|
||||
const { getToken } = useSession();
|
||||
const state = useState();
|
||||
const user = state.getUser();
|
||||
|
||||
const entityId = computed(() => {
|
||||
return $props.id || route.params.id;
|
||||
});
|
||||
const regularizeStockFormDialog = ref(null);
|
||||
const item = ref(null);
|
||||
const available = ref(null);
|
||||
const visible = ref(null);
|
||||
const _warehouseFk = ref(null);
|
||||
const warehouseText = ref(null);
|
||||
const warehouseFk = computed({
|
||||
get() {
|
||||
return _warehouseFk.value;
|
||||
},
|
||||
set(val) {
|
||||
_warehouseFk.value = val;
|
||||
if (val) {
|
||||
updateStock();
|
||||
getWarehouseName(val);
|
||||
}
|
||||
},
|
||||
});
|
||||
const showWarehouseIconTooltip = ref(true);
|
||||
|
||||
onMounted(() => {
|
||||
warehouseFk.value = user.value.warehouseFk;
|
||||
});
|
||||
|
||||
function getItemAvatar() {
|
||||
const token = getToken();
|
||||
return `/api/Images/catalog/200x200/${entityId.value}/download?access_token=${token}`;
|
||||
}
|
||||
|
||||
const data = ref(useCardDescription());
|
||||
const setData = (entity) => {
|
||||
if (!entity) return;
|
||||
data.value = useCardDescription(entity.name, entity.id);
|
||||
};
|
||||
|
||||
const getWarehouseName = async (warehouseFk) => {
|
||||
try {
|
||||
showWarehouseIconTooltip.value = false;
|
||||
|
||||
const filter = {
|
||||
where: { id: warehouseFk },
|
||||
};
|
||||
|
||||
const { data } = await axios.get('Warehouses/findOne', { filter });
|
||||
|
||||
warehouseText.value = t('item.descriptor.warehouseText', {
|
||||
warehouseName: data.name,
|
||||
});
|
||||
|
||||
showWarehouseIconTooltip.value = true;
|
||||
} catch (err) {
|
||||
console.error('Error finding warehouse');
|
||||
}
|
||||
};
|
||||
|
||||
const updateStock = async () => {
|
||||
try {
|
||||
available.value = null;
|
||||
visible.value = null;
|
||||
|
||||
const params = {
|
||||
warehouseFk: warehouseFk.value,
|
||||
dated: $props.dated,
|
||||
};
|
||||
|
||||
const { data } = await axios.get(`Items/${entityId.value}/getVisibleAvailable`, {
|
||||
params,
|
||||
});
|
||||
|
||||
available.value = data.available;
|
||||
visible.value = data.visible;
|
||||
} catch (err) {
|
||||
console.error('Error updating stock');
|
||||
}
|
||||
};
|
||||
|
||||
const openRegularizeStockForm = () => {
|
||||
regularizeStockFormDialog.value.show();
|
||||
};
|
||||
|
||||
const cloneItem = async () => {
|
||||
try {
|
||||
const { data } = await axios.post(`Items/${entityId.value}/clone`);
|
||||
router.push({ name: 'ItemTags', params: { id: data.id } });
|
||||
} catch (err) {
|
||||
console.error('Error cloning item');
|
||||
}
|
||||
};
|
||||
|
||||
const openCloneDialog = async () => {
|
||||
quasar
|
||||
.dialog({
|
||||
component: VnConfirm,
|
||||
componentProps: {
|
||||
title: t("All it's properties will be copied"),
|
||||
message: t('Do you want to clone this item?'),
|
||||
},
|
||||
})
|
||||
.onOk(async () => {
|
||||
await cloneItem();
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CardDescriptor
|
||||
data-key="ItemData"
|
||||
module="Item"
|
||||
:title="data.title"
|
||||
:subtitle="data.subtitle"
|
||||
:summary="$props.summary"
|
||||
:url="`Items/${entityId}/getCard`"
|
||||
@on-fetch="
|
||||
(data) => {
|
||||
item = data;
|
||||
setData(data);
|
||||
}
|
||||
"
|
||||
>
|
||||
<template #menu="{}">
|
||||
<QItem v-ripple clickable @click="openRegularizeStockForm()">
|
||||
<QItemSection>
|
||||
{{ t('Regularize stock') }}
|
||||
<QDialog ref="regularizeStockFormDialog">
|
||||
<RegularizeStockForm
|
||||
:item-fk="entityId"
|
||||
:warehouse-fk="warehouseFk"
|
||||
@on-data-saved="updateStock()"
|
||||
/>
|
||||
</QDialog>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
<QItem v-ripple clickable @click="openCloneDialog()">
|
||||
<QItemSection>
|
||||
{{ t('Clone') }}
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
</template>
|
||||
<template #before>
|
||||
<QImg :src="getItemAvatar()" class="photo">
|
||||
<template #error>
|
||||
<div
|
||||
class="absolute-full picture text-center q-pa-md flex flex-center"
|
||||
>
|
||||
<div>
|
||||
<div class="text-grey-5" style="opacity: 0.4; font-size: 5vh">
|
||||
<QIcon name="vn:item" />
|
||||
</div>
|
||||
<div class="text-grey-5" style="opacity: 0.4">
|
||||
{{ t('item.descriptor.item') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</QImg>
|
||||
<div class="row justify-between full-width bg-primary">
|
||||
<div class="col column items-center">
|
||||
<span class="text-uppercase">
|
||||
{{ t('item.descriptor.visible') }}
|
||||
</span>
|
||||
<span class="text-weight-bold text-h5">{{ visible }}</span>
|
||||
</div>
|
||||
<div class="col column items-center">
|
||||
<span class="text-uppercase">
|
||||
{{ t('item.descriptor.available') }}
|
||||
</span>
|
||||
<span class="text-weight-bold text-h5">{{ available }}</span>
|
||||
</div>
|
||||
<div class="col column items-center justify-center">
|
||||
<QIcon name="info" class="cursor-pointer" size="md">
|
||||
<QTooltip>{{ warehouseText }}</QTooltip>
|
||||
</QIcon>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #body="{ entity }">
|
||||
<VnLv :label="t('item.descriptor.buyer')">
|
||||
<template #value>
|
||||
<span class="link">
|
||||
{{ t('item.descriptor.buyer') }}
|
||||
<WorkerDescriptorProxy :id="entity.itemType?.worker?.id" />
|
||||
</span>
|
||||
</template>
|
||||
</VnLv>
|
||||
<VnLv :label="t('item.descriptor.color')" :value="entity.value5"> </VnLv>
|
||||
<VnLv :label="t('item.descriptor.color')" :value="entity.value6" />
|
||||
<VnLv :label="t('item.descriptor.stems')" :value="entity.value7" />
|
||||
</template>
|
||||
<template #actions="{}">
|
||||
<QCardActions>
|
||||
<QBtn
|
||||
:to="{ name: 'ItemDiary' }"
|
||||
size="md"
|
||||
icon="vn:transaction"
|
||||
color="primary"
|
||||
>
|
||||
<QTooltip>{{ t('item.descriptor.itemDiary') }}</QTooltip>
|
||||
</QBtn>
|
||||
</QCardActions>
|
||||
</template>
|
||||
</CardDescriptor>
|
||||
</template>
|
||||
|
||||
<i18n>
|
||||
es:
|
||||
Regularize stock: Regularizar stock
|
||||
Clone: Clonar
|
||||
All it's properties will be copied: Todas sus propiedades serán copiadas
|
||||
Do you want to clone this item?: ¿Desea clonar este artículo?
|
||||
</i18n>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.photo {
|
||||
height: 256px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<script setup>
|
||||
import ItemDescriptor from './ItemDescriptor.vue';
|
||||
import ItemSummaryDialog from './ItemSummaryDialog.vue';
|
||||
|
||||
const $props = defineProps({
|
||||
id: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
dated: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<QPopupProxy>
|
||||
<ItemDescriptor
|
||||
v-if="$props.id"
|
||||
:id="$props.id"
|
||||
:summary="ItemSummaryDialog"
|
||||
:dated="dated"
|
||||
/>
|
||||
</QPopupProxy>
|
||||
</template>
|
||||
|
|
@ -0,0 +1 @@
|
|||
<template>Item diary (CREAR CUANDO SE DESARROLLE EL MODULO DE ITEMS)</template>
|
||||
|
|
@ -0,0 +1 @@
|
|||
<template>Item summary</template>
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
<template>
|
||||
<QDialog
|
||||
>Item summary dialog (A DESARROLLAR CUANDO SE CREE EL MODULO DE ITEMS)</QDialog
|
||||
>
|
||||
</template>
|
||||
|
|
@ -0,0 +1 @@
|
|||
<template>Item tags (CREAR CUANDO SE DESARROLLE EL MODULO DE ITEMS)</template>
|
||||
|
|
@ -0,0 +1 @@
|
|||
<template>Item list</template>
|
||||
|
|
@ -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>
|
||||
|
|
@ -7,6 +7,7 @@ import { useQuasar } from 'quasar';
|
|||
import FetchedTags from 'components/ui/FetchedTags.vue';
|
||||
import SendEmailDialog from 'components/common/SendEmailDialog.vue';
|
||||
import SupplierConsumptionFilter from './SupplierConsumptionFilter.vue';
|
||||
import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
|
||||
|
||||
import { toDate } from 'src/filters';
|
||||
import { dashIfEmpty } from 'src/filters';
|
||||
|
|
@ -174,7 +175,10 @@ onMounted(async () => {
|
|||
<QTd no-hover>{{ row.invoiceNumber }}</QTd>
|
||||
</QTr>
|
||||
<QTr v-for="(buy, index) in row.buys" :key="index">
|
||||
<QTd no-hover> {{ buy.itemName }}</QTd>
|
||||
<QTd no-hover>
|
||||
<QBtn flat color="blue" dense>{{ buy.itemName }}</QBtn>
|
||||
<ItemDescriptorProxy :id="buy.itemFk" />
|
||||
</QTd>
|
||||
|
||||
<QTd no-hover>
|
||||
<span>{{ buy.subName }}</span>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
import Item from './item';
|
||||
import Customer from './customer';
|
||||
import Ticket from './ticket';
|
||||
import Claim from './claim';
|
||||
|
|
@ -14,6 +15,7 @@ import Department from './department';
|
|||
import Entry from './entry';
|
||||
|
||||
export default [
|
||||
Item,
|
||||
Customer,
|
||||
Ticket,
|
||||
Claim,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,70 @@
|
|||
import { RouterView } from 'vue-router';
|
||||
|
||||
export default {
|
||||
path: '/item',
|
||||
name: 'Item',
|
||||
meta: {
|
||||
title: 'items',
|
||||
icon: 'vn:item',
|
||||
},
|
||||
component: RouterView,
|
||||
redirect: { name: 'ItemMain' },
|
||||
menus: {
|
||||
main: [],
|
||||
card: [],
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: '',
|
||||
name: 'ItemMain',
|
||||
component: () => import('src/pages/Item/ItemMain.vue'),
|
||||
redirect: { name: 'Itemlist' },
|
||||
children: [
|
||||
{
|
||||
path: 'list',
|
||||
name: 'ItemList',
|
||||
meta: {
|
||||
title: 'list',
|
||||
icon: 'view_list',
|
||||
},
|
||||
component: () => import('src/pages/Item/ItemList.vue'),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'ItemCard',
|
||||
path: ':id',
|
||||
component: () => import('src/pages/Item/Card/ItemCard.vue'),
|
||||
redirect: { name: 'ItemSummary' },
|
||||
children: [
|
||||
{
|
||||
name: 'ItemSummary',
|
||||
path: 'summary',
|
||||
meta: {
|
||||
title: 'summary',
|
||||
icon: 'launch',
|
||||
},
|
||||
component: () => import('src/pages/Item/Card/ItemSummary.vue'),
|
||||
},
|
||||
{
|
||||
path: 'diary',
|
||||
name: 'ItemDiary',
|
||||
meta: {
|
||||
title: 'diary',
|
||||
icon: 'vn:transaction',
|
||||
},
|
||||
component: () => import('src/pages/Item/Card/ItemDiary.vue'),
|
||||
},
|
||||
{
|
||||
path: 'tags',
|
||||
name: 'ItemTags',
|
||||
meta: {
|
||||
title: 'Tags',
|
||||
icon: 'vn:tags',
|
||||
},
|
||||
component: () => import('src/pages/Item/Card/ItemTags.vue'),
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
|
@ -1,3 +1,4 @@
|
|||
import item from './modules/item';
|
||||
import customer from './modules/customer';
|
||||
import ticket from './modules/ticket';
|
||||
import claim from './modules/claim';
|
||||
|
|
@ -51,6 +52,7 @@ const routes = [
|
|||
component: () => import('../pages/Dashboard/DashboardMain.vue'),
|
||||
},
|
||||
// Module routes
|
||||
item,
|
||||
customer,
|
||||
ticket,
|
||||
claim,
|
||||
|
|
|
|||
|
|
@ -7,19 +7,19 @@ import routes from 'src/router/modules';
|
|||
|
||||
export const useNavigationStore = defineStore('navigationStore', () => {
|
||||
const modules = [
|
||||
'customer',
|
||||
'claim',
|
||||
'ticket',
|
||||
'invoiceOut',
|
||||
'invoiceIn',
|
||||
'worker',
|
||||
'shelving',
|
||||
'order',
|
||||
'wagon',
|
||||
'route',
|
||||
'supplier',
|
||||
'travel',
|
||||
'customer',
|
||||
'entry',
|
||||
'travel',
|
||||
'invoiceOut',
|
||||
'invoiceIn',
|
||||
'supplier',
|
||||
'claim',
|
||||
'route',
|
||||
'ticket',
|
||||
'worker',
|
||||
'wagon',
|
||||
];
|
||||
const pinnedModules = ref([]);
|
||||
const role = useRole();
|
||||
|
|
|
|||
Loading…
Reference in New Issue