forked from verdnatura/salix-front
fix: refs #7717 fix order sections
This commit is contained in:
parent
3dc2ac8bac
commit
3f76b5496a
|
@ -28,7 +28,7 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
|
||||||
delete params.filter;
|
delete params.filter;
|
||||||
store.userParams = { ...params, ...store.userParams };
|
store.userParams = { ...params, ...store.userParams };
|
||||||
store.userFilter = { ...filter, ...store.userFilter };
|
store.userFilter = { ...filter, ...store.userFilter };
|
||||||
if (filter.order) store.order = filter.order;
|
if (filter?.order) store.order = filter.order;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -1,7 +1,8 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import { useStateStore } from 'stores/useStateStore';
|
import { useStateStore } from 'stores/useStateStore';
|
||||||
import { useRoute } from 'vue-router';
|
import { useRoute, useRouter } from 'vue-router';
|
||||||
import { onMounted, onUnmounted, ref } from 'vue';
|
import { onMounted, onUnmounted, ref } from 'vue';
|
||||||
|
import axios from 'axios';
|
||||||
import { useI18n } from 'vue-i18n';
|
import { useI18n } from 'vue-i18n';
|
||||||
import VnPaginate from 'components/ui/VnPaginate.vue';
|
import VnPaginate from 'components/ui/VnPaginate.vue';
|
||||||
import CatalogItem from 'components/ui/CatalogItem.vue';
|
import CatalogItem from 'components/ui/CatalogItem.vue';
|
||||||
|
@ -9,10 +10,15 @@ import OrderCatalogFilter from 'pages/Order/Card/OrderCatalogFilter.vue';
|
||||||
import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
|
import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
|
||||||
|
|
||||||
const route = useRoute();
|
const route = useRoute();
|
||||||
|
const router = useRouter();
|
||||||
const stateStore = useStateStore();
|
const stateStore = useStateStore();
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
|
const tags = ref([]);
|
||||||
|
|
||||||
onMounted(() => (stateStore.rightDrawer = true));
|
onMounted(() => {
|
||||||
|
stateStore.rightDrawer = true;
|
||||||
|
checkOrderConfirmation();
|
||||||
|
});
|
||||||
onUnmounted(() => (stateStore.rightDrawer = false));
|
onUnmounted(() => (stateStore.rightDrawer = false));
|
||||||
|
|
||||||
const catalogParams = {
|
const catalogParams = {
|
||||||
|
@ -20,7 +26,12 @@ const catalogParams = {
|
||||||
orderBy: JSON.stringify({ field: 'relevancy DESC, name', way: 'ASC', isTag: false }),
|
orderBy: JSON.stringify({ field: 'relevancy DESC, name', way: 'ASC', isTag: false }),
|
||||||
};
|
};
|
||||||
|
|
||||||
const tags = ref([]);
|
async function checkOrderConfirmation() {
|
||||||
|
const response = await axios.get(`Orders/${route.params.id}`);
|
||||||
|
if (response.data.isConfirmed === 1) {
|
||||||
|
router.push(`/order/${route.params.id}/line`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
function extractTags(items) {
|
function extractTags(items) {
|
||||||
const resultTags = [];
|
const resultTags = [];
|
||||||
|
@ -60,7 +71,7 @@ function extractValueTags(items) {
|
||||||
:redirect="false"
|
:redirect="false"
|
||||||
url="Orders/CatalogFilter"
|
url="Orders/CatalogFilter"
|
||||||
:label="t('Search items')"
|
:label="t('Search items')"
|
||||||
:info="t('You can search orders by reference')"
|
:info="t('You can search items by name or id')"
|
||||||
/>
|
/>
|
||||||
<QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
|
<QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
|
||||||
<QScrollArea class="fit text-grey-8">
|
<QScrollArea class="fit text-grey-8">
|
||||||
|
@ -78,7 +89,6 @@ function extractValueTags(items) {
|
||||||
url="Orders/CatalogFilter"
|
url="Orders/CatalogFilter"
|
||||||
:limit="50"
|
:limit="50"
|
||||||
:user-params="catalogParams"
|
:user-params="catalogParams"
|
||||||
auto-load
|
|
||||||
@on-fetch="extractTags"
|
@on-fetch="extractTags"
|
||||||
:update-router="false"
|
:update-router="false"
|
||||||
>
|
>
|
||||||
|
@ -116,3 +126,8 @@ function extractValueTags(items) {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
<i18n>
|
||||||
|
es:
|
||||||
|
You can search items by name or id: Puedes buscar items por nombre o id
|
||||||
|
</i18n>
|
||||||
|
|
|
@ -102,7 +102,8 @@ function exprBuilder(param, value) {
|
||||||
case 'typeFk':
|
case 'typeFk':
|
||||||
return { [param]: value };
|
return { [param]: value };
|
||||||
case 'search':
|
case 'search':
|
||||||
return { 'i.name': { like: `%${value}%` } };
|
if (/^\d+$/.test(value)) return { 'i.id': value };
|
||||||
|
else return { 'i.name': { like: `%${value}%` } };
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -5,10 +5,12 @@ import { useI18n } from 'vue-i18n';
|
||||||
import axios from 'axios';
|
import axios from 'axios';
|
||||||
import { useRoute } from 'vue-router';
|
import { useRoute } from 'vue-router';
|
||||||
import useNotify from 'composables/useNotify';
|
import useNotify from 'composables/useNotify';
|
||||||
|
import { useArrayData } from 'composables/useArrayData';
|
||||||
|
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
const route = useRoute();
|
|
||||||
const { notify } = useNotify();
|
const { notify } = useNotify();
|
||||||
|
const emit = defineEmits(['added']);
|
||||||
|
const route = useRoute();
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
prices: {
|
prices: {
|
||||||
type: Array,
|
type: Array,
|
||||||
|
@ -16,9 +18,8 @@ const props = defineProps({
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
const emit = defineEmits(['added']);
|
|
||||||
|
|
||||||
const fields = ref((props.prices || []).map((item) => ({ ...item, quantity: 0 })));
|
const fields = ref((props.prices || []).map((item) => ({ ...item, quantity: 0 })));
|
||||||
|
const descriptorData = useArrayData('orderData');
|
||||||
|
|
||||||
const addToOrder = async () => {
|
const addToOrder = async () => {
|
||||||
const items = (fields.value || []).filter((item) => Number(item.quantity) > 0);
|
const items = (fields.value || []).filter((item) => Number(item.quantity) > 0);
|
||||||
|
@ -28,19 +29,20 @@ const addToOrder = async () => {
|
||||||
});
|
});
|
||||||
notify(t('globals.dataSaved'), 'positive');
|
notify(t('globals.dataSaved'), 'positive');
|
||||||
emit('added');
|
emit('added');
|
||||||
|
descriptorData.fetch({});
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="container order-catalog-item q-pb-md">
|
<div class="container order-catalog-item q-pa-md">
|
||||||
<QForm @submit="addToOrder">
|
<QForm @submit="addToOrder">
|
||||||
<QMarkupTable class="shadow-0">
|
<QMarkupTable class="shadow-0">
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr v-for="item in fields" :key="item.warehouse">
|
<tr v-for="item in fields" :key="item.warehouse">
|
||||||
<td class="text-bold q-py-lg">
|
<td class="text-bold q-pr-md td" style="width: 35%">
|
||||||
{{ item.warehouse }}
|
{{ item.warehouse }}
|
||||||
</td>
|
</td>
|
||||||
<td class="text-right">
|
<td class="text-right" style="width: 35%">
|
||||||
<span
|
<span
|
||||||
class="link"
|
class="link"
|
||||||
@click="
|
@click="
|
||||||
|
@ -75,8 +77,11 @@ const addToOrder = async () => {
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.container {
|
// .container {
|
||||||
max-width: 448px;
|
// max-width: 768px;
|
||||||
width: 100%;
|
// width: 100%;
|
||||||
|
// }
|
||||||
|
.td {
|
||||||
|
width: 200px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -4,13 +4,13 @@ import { useRoute } from 'vue-router';
|
||||||
import { useI18n } from 'vue-i18n';
|
import { useI18n } from 'vue-i18n';
|
||||||
import { toCurrency, toDate } from 'src/filters';
|
import { toCurrency, toDate } from 'src/filters';
|
||||||
import { useState } from 'src/composables/useState';
|
import { useState } from 'src/composables/useState';
|
||||||
|
|
||||||
import useCardDescription from 'src/composables/useCardDescription';
|
import useCardDescription from 'src/composables/useCardDescription';
|
||||||
import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
|
|
||||||
import CardDescriptor from 'components/ui/CardDescriptor.vue';
|
import CardDescriptor from 'components/ui/CardDescriptor.vue';
|
||||||
import VnLv from 'src/components/ui/VnLv.vue';
|
import VnLv from 'src/components/ui/VnLv.vue';
|
||||||
import OrderDescriptorMenu from 'pages/Order/Card/OrderDescriptorMenu.vue';
|
|
||||||
import FetchData from 'components/FetchData.vue';
|
import FetchData from 'components/FetchData.vue';
|
||||||
|
import OrderDescriptorMenu from 'pages/Order/Card/OrderDescriptorMenu.vue';
|
||||||
|
import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
|
||||||
|
|
||||||
const DEFAULT_ITEMS = 0;
|
const DEFAULT_ITEMS = 0;
|
||||||
|
|
||||||
|
@ -25,6 +25,8 @@ const $props = defineProps({
|
||||||
const route = useRoute();
|
const route = useRoute();
|
||||||
const state = useState();
|
const state = useState();
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
|
const data = ref(useCardDescription());
|
||||||
|
const getTotalRef = ref();
|
||||||
|
|
||||||
const entityId = computed(() => {
|
const entityId = computed(() => {
|
||||||
return $props.id || route.params.id;
|
return $props.id || route.params.id;
|
||||||
|
@ -57,11 +59,11 @@ const filter = {
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
|
|
||||||
const data = ref(useCardDescription());
|
|
||||||
const setData = (entity) => {
|
const setData = (entity) => {
|
||||||
if (!entity) return;
|
if (!entity) return;
|
||||||
|
getTotalRef.value && getTotalRef.value.fetch();
|
||||||
data.value = useCardDescription(entity?.client?.name, entity?.id);
|
data.value = useCardDescription(entity?.client?.name, entity?.id);
|
||||||
state.set('OrderDescriptor', entity);
|
state.set('orderData', entity);
|
||||||
};
|
};
|
||||||
|
|
||||||
const getConfirmationValue = (isConfirmed) => {
|
const getConfirmationValue = (isConfirmed) => {
|
||||||
|
@ -69,10 +71,15 @@ const getConfirmationValue = (isConfirmed) => {
|
||||||
};
|
};
|
||||||
|
|
||||||
const total = ref(null);
|
const total = ref(null);
|
||||||
|
|
||||||
|
function ticketFilter(order) {
|
||||||
|
return JSON.stringify({ id: order.id });
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<FetchData
|
<FetchData
|
||||||
|
ref="getTotalRef"
|
||||||
:url="`Orders/${entityId}/getTotal`"
|
:url="`Orders/${entityId}/getTotal`"
|
||||||
@on-fetch="(response) => (total = response)"
|
@on-fetch="(response) => (total = response)"
|
||||||
auto-load
|
auto-load
|
||||||
|
@ -120,7 +127,7 @@ const total = ref(null);
|
||||||
color="primary"
|
color="primary"
|
||||||
:to="{
|
:to="{
|
||||||
name: 'TicketList',
|
name: 'TicketList',
|
||||||
query: { params: JSON.stringify({ orderFk: entity.id }) },
|
query: { table: ticketFilter(entity) },
|
||||||
}"
|
}"
|
||||||
>
|
>
|
||||||
<QTooltip>{{ t('order.summary.orderTicketList') }}</QTooltip>
|
<QTooltip>{{ t('order.summary.orderTicketList') }}</QTooltip>
|
||||||
|
|
|
@ -64,11 +64,14 @@ const fetchOrderDetails = (order) => {
|
||||||
};
|
};
|
||||||
|
|
||||||
const orderMapper = (order) => {
|
const orderMapper = (order) => {
|
||||||
return {
|
const mappedOrder = {
|
||||||
addressId: order.addressFk,
|
addressId: order.addressFk,
|
||||||
agencyModeId: order.agencyModeFk,
|
|
||||||
landed: new Date(order.landed).toISOString(),
|
landed: new Date(order.landed).toISOString(),
|
||||||
};
|
};
|
||||||
|
if (order.agencyModeFk !== null && order.agencyModeFk !== undefined) {
|
||||||
|
mappedOrder.agencyModeId = order.agencyModeFk;
|
||||||
|
}
|
||||||
|
return mappedOrder;
|
||||||
};
|
};
|
||||||
const orderFilter = {
|
const orderFilter = {
|
||||||
include: [
|
include: [
|
||||||
|
@ -184,7 +187,19 @@ const onClientChange = async (clientId) => {
|
||||||
option-value="agencyModeFk"
|
option-value="agencyModeFk"
|
||||||
option-label="agencyMode"
|
option-label="agencyMode"
|
||||||
hide-selected
|
hide-selected
|
||||||
:disable="!agencyList?.length"
|
:disable="!agencyList?.length && data.isConfirmed === 1"
|
||||||
|
clearable
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
:model-value="
|
||||||
|
!data.isConfirmed &&
|
||||||
|
agencyList?.length &&
|
||||||
|
agencyList.some(
|
||||||
|
(agency) => agency.agencyModeFk === data.agency_id
|
||||||
|
)
|
||||||
|
? data.agencyModeFk
|
||||||
|
: null
|
||||||
|
"
|
||||||
>
|
>
|
||||||
</VnSelect>
|
</VnSelect>
|
||||||
</VnRow>
|
</VnRow>
|
||||||
|
|
|
@ -61,6 +61,13 @@ const lineFilter = ref({
|
||||||
fields: ['id', 'name'],
|
fields: ['id', 'name'],
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
relation: 'order',
|
||||||
|
scope: {
|
||||||
|
fields: ['id', 'isConfirmed'],
|
||||||
|
where: { id: route.params.id },
|
||||||
|
},
|
||||||
|
},
|
||||||
],
|
],
|
||||||
where: { orderFk: route.params.id },
|
where: { orderFk: route.params.id },
|
||||||
});
|
});
|
||||||
|
@ -157,8 +164,9 @@ const columns = computed(() => [
|
||||||
name: 'tableActions',
|
name: 'tableActions',
|
||||||
actions: [
|
actions: [
|
||||||
{
|
{
|
||||||
title: t('delete'),
|
title: t('Delete'),
|
||||||
icon: 'delete',
|
icon: 'delete',
|
||||||
|
show: (row) => !row.order.isConfirmed,
|
||||||
action: (row) => confirmRemove(row),
|
action: (row) => confirmRemove(row),
|
||||||
isPrimary: true,
|
isPrimary: true,
|
||||||
},
|
},
|
||||||
|
@ -281,6 +289,15 @@ watch(
|
||||||
<template #column-amount="{ row }">
|
<template #column-amount="{ row }">
|
||||||
{{ toCurrency(row.quantity * row.price) }}
|
{{ toCurrency(row.quantity * row.price) }}
|
||||||
</template>
|
</template>
|
||||||
|
<template #column-tableActions="{ row }">
|
||||||
|
<QIcon
|
||||||
|
v-if="row.order?.isConfirmed === 0"
|
||||||
|
name="delete"
|
||||||
|
icon="delete"
|
||||||
|
@click="confirmRemove(row)"
|
||||||
|
class="cursor-pointer"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
</VnTable>
|
</VnTable>
|
||||||
</div>
|
</div>
|
||||||
<QPageSticky :offset="[20, 20]" v-if="!order?.isConfirmed" style="z-index: 2">
|
<QPageSticky :offset="[20, 20]" v-if="!order?.isConfirmed" style="z-index: 2">
|
||||||
|
|
|
@ -10,14 +10,16 @@ import FetchData from 'components/FetchData.vue';
|
||||||
import VnLv from 'components/ui/VnLv.vue';
|
import VnLv from 'components/ui/VnLv.vue';
|
||||||
import CardList from 'components/ui/CardList.vue';
|
import CardList from 'components/ui/CardList.vue';
|
||||||
import FetchedTags from 'components/ui/FetchedTags.vue';
|
import FetchedTags from 'components/ui/FetchedTags.vue';
|
||||||
|
import { useStateStore } from 'stores/useStateStore';
|
||||||
import { dashIfEmpty } from 'src/filters';
|
import { dashIfEmpty } from 'src/filters';
|
||||||
|
import { onMounted } from 'vue';
|
||||||
|
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const route = useRoute();
|
const route = useRoute();
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
const volumeSummary = ref(null);
|
const volumeSummary = ref(null);
|
||||||
const volumeRef = ref();
|
const volumeRef = ref();
|
||||||
|
const stateStore = useStateStore();
|
||||||
const volumeFilter = ref({
|
const volumeFilter = ref({
|
||||||
include: [
|
include: [
|
||||||
{
|
{
|
||||||
|
@ -46,6 +48,7 @@ watch(
|
||||||
volumeRef.value.fetch();
|
volumeRef.value.fetch();
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
onMounted(() => (stateStore.rightDrawer = false));
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
@ -63,9 +66,6 @@ watch(
|
||||||
{{ t('globals.noResults') }}
|
{{ t('globals.noResults') }}
|
||||||
</div>
|
</div>
|
||||||
<QCard v-else class="order-volume-summary q-pa-lg">
|
<QCard v-else class="order-volume-summary q-pa-lg">
|
||||||
<p class="header text-right block">
|
|
||||||
{{ t('summary') }}
|
|
||||||
</p>
|
|
||||||
<VnLv :label="t('total')" :value="`${volumeSummary?.totalVolume} m³`" />
|
<VnLv :label="t('total')" :value="`${volumeSummary?.totalVolume} m³`" />
|
||||||
<VnLv
|
<VnLv
|
||||||
:label="t('boxes')"
|
:label="t('boxes')"
|
||||||
|
|
Loading…
Reference in New Issue