0
0
Fork 0

Merge branch 'branch-PR-2' of https://gitea.verdnatura.es/hyervoni/salix-front-mindshore into hyervoni-branch-PR-2

This commit is contained in:
Alex Moreno 2024-01-09 07:43:29 +01:00
commit bc8b9501c0
53 changed files with 1862 additions and 857 deletions

View File

@ -135,12 +135,11 @@ async function save() {
await axios.patch($props.urlUpdate || $props.url, body); await axios.patch($props.urlUpdate || $props.url, body);
} }
emit('onDataSaved', formData.value); emit('onDataSaved', formData.value);
originalData.value = JSON.parse(JSON.stringify(formData.value));
hasChanges.value = false;
} catch (err) { } catch (err) {
notify('errors.create', 'negative'); notify('errors.create', 'negative');
} }
originalData.value = JSON.parse(JSON.stringify(formData.value));
hasChanges.value = false;
isLoading.value = false; isLoading.value = false;
} }

View File

@ -62,12 +62,7 @@ const closeForm = () => {
@on-data-saved="onDataSaved()" @on-data-saved="onDataSaved()"
> >
<template #form="{ data, validate }"> <template #form="{ data, validate }">
<span <span ref="closeButton" class="close-icon" v-close-popup>
ref="closeButton"
class="absolute cursor-pointer"
style="top: 20px; right: 20px"
v-close-popup
>
<QIcon name="close" size="sm" /> <QIcon name="close" size="sm" />
</span> </span>
<h1 class="title">{{ title }}</h1> <h1 class="title">{{ title }}</h1>
@ -102,4 +97,11 @@ const closeForm = () => {
font-weight: bold; font-weight: bold;
line-height: 20px; line-height: 20px;
} }
.close-icon {
position: absolute;
top: 20px;
right: 20px;
cursor: pointer;
}
</style> </style>

View File

@ -1,11 +1,10 @@
<script setup> <script setup>
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { ref, computed } from 'vue'; import { ref, computed, onMounted } from 'vue';
import FetchData from 'components/FetchData.vue';
import { useState } from 'src/composables/useState'; import { useState } from 'src/composables/useState';
import axios from 'axios'; import axios from 'axios';
import useNotify from 'src/composables/useNotify.js';
const $props = defineProps({ const $props = defineProps({
allColumns: { allColumns: {
@ -24,17 +23,12 @@ const $props = defineProps({
const emit = defineEmits(['onConfigSaved']); const emit = defineEmits(['onConfigSaved']);
const { notify } = useNotify();
const state = useState(); const state = useState();
const { t } = useI18n(); const { t } = useI18n();
const popupProxyRef = ref(null); const popupProxyRef = ref(null);
const user = state.getUser(); const user = state.getUser();
const initialUserConfigViewData = ref(null); const initialUserConfigViewData = ref(null);
const userConfigFilter = {
where: {
tableCode: $props.tableCode,
userFk: user.id,
},
};
const formattedCols = ref([]); const formattedCols = ref([]);
@ -43,16 +37,12 @@ const areAllChecksMarked = computed(() => {
}); });
const setUserConfigViewData = (data) => { const setUserConfigViewData = (data) => {
initialUserConfigViewData.value = data; if (!data) return;
if (data.length === 0) return; // Importante: El name de las columnas de la tabla debe conincidir con el name de las variables que devuelve la view config
formattedCols.value = $props.allColumns.map((col) => { formattedCols.value = $props.allColumns.map((col) => ({
// Importante: El name de las columnas de la tabla debe conincidir con el name de las variables que devuelve la view config name: col,
const obj = { active: data[col],
name: col, }));
active: data[0].configuration[col],
};
return obj;
});
emitSavedConfig(); emitSavedConfig();
}; };
@ -60,40 +50,95 @@ const toggleMarkAll = (val) => {
formattedCols.value.forEach((col) => (col.active = val)); formattedCols.value.forEach((col) => (col.active = val));
}; };
const saveConfig = async () => { const getConfig = async (url, filter) => {
const response = await axios.get(url, {
params: { filter: filter },
});
return response.data && response.data.length > 0 ? response.data[0] : null;
};
const fetchViewConfigData = async () => {
try { try {
const data = { const userConfigFilter = {
id: initialUserConfigViewData.value[0].id, where: { tableCode: $props.tableCode, userFk: user.id },
userFk: 9,
tableCode: $props.tableCode,
configuration: {},
}; };
const userConfig = await getConfig('UserConfigViews', userConfigFilter);
formattedCols.value.forEach((col) => { if (userConfig) {
data.configuration[col.name] = col.active; initialUserConfigViewData.value = userConfig;
}); setUserConfigViewData(userConfig.configuration);
return;
}
await axios.patch('UserConfigViews', data); const defaultConfigFilter = { where: { tableCode: $props.tableCode } };
emitSavedConfig(); const defaultConfig = await getConfig('DefaultViewConfigs', defaultConfigFilter);
popupProxyRef.value.hide();
if (defaultConfig) {
setUserConfigViewData(defaultConfig.columns);
return;
}
} catch (err) { } catch (err) {
console.error('Error saving user view config'); console.err('Error fetching config view data', err);
} }
}; };
const emitSavedConfig = () => {
const filteredCols = formattedCols.value.filter((col) => col.active); const saveConfig = async () => {
const mappedCols = filteredCols.map((col) => col.name); try {
emit('onConfigSaved', mappedCols); const params = {};
const configuration = {};
formattedCols.value.forEach((col) => {
const { name, active } = col;
configuration[name] = active;
});
// Si existe una view config del usuario hacemos un update si no la creamos
if (initialUserConfigViewData.value) {
params.updates = [
{
data: {
configuration: configuration,
},
where: {
id: initialUserConfigViewData.value.id,
},
},
];
} else {
params.creates = [
{
userFk: user.value.id,
tableCode: $props.tableCode,
tableConfig: $props.tableCode,
configuration: configuration,
},
];
}
const response = await axios.post('UserConfigViews/crud', params);
if (response.data && response.data[0]) {
initialUserConfigViewData.value = response.data[0];
}
emitSavedConfig();
notify('globals.dataSaved', 'positive');
popupProxyRef.value.hide();
} catch (err) {
console.error('Error saving user view config', err);
}
}; };
const emitSavedConfig = () => {
const activeColumns = formattedCols.value
.filter((col) => col.active)
.map((col) => col.name);
emit('onConfigSaved', activeColumns);
};
onMounted(async () => {
await fetchViewConfigData();
});
</script> </script>
<template> <template>
<fetch-data
v-if="user"
url="UserConfigViews"
:filter="userConfigFilter"
@on-fetch="(data) => setUserConfigViewData(data)"
auto-load
/>
<QBtn color="primary" icon="view_column"> <QBtn color="primary" icon="view_column">
<QPopupProxy ref="popupProxyRef"> <QPopupProxy ref="popupProxyRef">
<QCard class="column q-pa-md"> <QCard class="column q-pa-md">
@ -108,7 +153,7 @@ const emitSavedConfig = () => {
class="q-mb-sm" class="q-mb-sm"
/> />
<div <div
v-if="allColumns.length !== 0 && formattedCols.length !== 0" v-if="allColumns.length > 0 && formattedCols.length > 0"
class="checks-layout" class="checks-layout"
> >
<QCheckbox <QCheckbox
@ -123,6 +168,7 @@ const emitSavedConfig = () => {
}}</QBtn> }}</QBtn>
</QCard> </QCard>
</QPopupProxy> </QPopupProxy>
<QTooltip>{{ t('Visible columns') }}</QTooltip>
</QBtn> </QBtn>
</template> </template>
@ -138,3 +184,9 @@ const emitSavedConfig = () => {
grid-template-columns: repeat(3, 200px); grid-template-columns: repeat(3, 200px);
} }
</style> </style>
<i18n>
es:
Check the columns you want to see: Marca las columnas que quieres ver
Visible columns: Columnas visibles
</i18n>

View File

@ -40,6 +40,7 @@ const styleAttrs = computed(() => {
v-model="value" v-model="value"
v-bind="{ ...$attrs, ...styleAttrs }" v-bind="{ ...$attrs, ...styleAttrs }"
type="text" type="text"
:class="{ required: $attrs.required }"
> >
<template v-if="$slots.prepend" #prepend> <template v-if="$slots.prepend" #prepend>
<slot name="prepend" /> <slot name="prepend" />

View File

@ -49,7 +49,7 @@ const toggleForm = () => {
<QIcon <QIcon
@click.stop.prevent="toggleForm()" @click.stop.prevent="toggleForm()"
name="add" name="add"
size="19px" size="xs"
class="add-icon" class="add-icon"
/> />
<QDialog v-model="showForm" transition-show="scale" transition-hide="scale"> <QDialog v-model="showForm" transition-show="scale" transition-hide="scale">

View File

@ -87,13 +87,14 @@ const value = computed({
hide-selected hide-selected
fill-input fill-input
ref="vnSelectRef" ref="vnSelectRef"
:class="{ required: $attrs.required }"
> >
<template v-if="isClearable" #append> <template v-if="isClearable" #append>
<QIcon <QIcon
name="close" name="close"
@click.stop="value = null" @click.stop="value = null"
class="cursor-pointer" class="cursor-pointer"
size="18px" size="xs"
/> />
</template> </template>
<template v-for="(_, slotName) in $slots" #[slotName]="slotData" :key="slotName"> <template v-for="(_, slotName) in $slots" #[slotName]="slotData" :key="slotName">

View File

@ -4,6 +4,8 @@ import { useI18n } from 'vue-i18n';
import { useArrayData } from 'composables/useArrayData'; import { useArrayData } from 'composables/useArrayData';
import toDate from 'filters/toDate'; import toDate from 'filters/toDate';
import VnFilterPanelChip from 'components/ui/VnFilterPanelChip.vue';
const { t } = useI18n(); const { t } = useI18n();
const props = defineProps({ const props = defineProps({
dataKey: { dataKey: {
@ -39,9 +41,13 @@ const props = defineProps({
type: Array, type: Array,
default: () => [], default: () => [],
}, },
customTags: {
type: Array,
default: () => [],
},
}); });
const emit = defineEmits(['refresh', 'clear', 'search', 'init']); const emit = defineEmits(['refresh', 'clear', 'search', 'init', 'remove']);
const arrayData = useArrayData(props.dataKey, { const arrayData = useArrayData(props.dataKey, {
exprBuilder: props.exprBuilder, exprBuilder: props.exprBuilder,
@ -104,18 +110,26 @@ async function clearFilters() {
emit('clear'); emit('clear');
} }
const tags = computed(() => { const tagsList = computed(() =>
return Object.entries(userParams.value) Object.entries(userParams.value)
.filter(([key, value]) => value && !(props.hiddenTags || []).includes(key)) .filter(([key, value]) => value && !(props.hiddenTags || []).includes(key))
.map(([key, value]) => ({ .map(([key, value]) => ({
label: key, label: key,
value: value, value: value,
})); }))
}); );
const tags = computed(() =>
tagsList.value.filter((tag) => !(props.customTags || []).includes(tag.label))
);
const customTags = computed(() =>
tagsList.value.filter((tag) => (props.customTags || []).includes(tag.label))
);
async function remove(key) { async function remove(key) {
userParams.value[key] = null; userParams.value[key] = null;
await search(); await search();
emit('remove', key);
} }
function formatValue(value) { function formatValue(value) {
@ -171,21 +185,17 @@ function formatValue(value) {
</QItem> </QItem>
<QItem class="q-mb-sm"> <QItem class="q-mb-sm">
<div <div
v-if="tags.length === 0" v-if="tagsList.length === 0"
class="text-grey font-xs text-center full-width" class="text-grey font-xs text-center full-width"
> >
{{ t(`No filters applied`) }} {{ t(`No filters applied`) }}
</div> </div>
<div> <div>
<QChip <VnFilterPanelChip
:key="chip.label"
@remove="remove(chip.label)"
class="text-dark"
color="primary"
icon="label"
:removable="!unremovableParams.includes(chip.label)"
size="sm"
v-for="chip of tags" v-for="chip of tags"
:key="chip.label"
:removable="!unremovableParams.includes(chip.label)"
@remove="remove(chip.label)"
> >
<slot name="tags" :tag="chip" :format-fn="formatValue"> <slot name="tags" :tag="chip" :format-fn="formatValue">
<div class="q-gutter-x-xs"> <div class="q-gutter-x-xs">
@ -193,7 +203,15 @@ function formatValue(value) {
<span>"{{ chip.value }}"</span> <span>"{{ chip.value }}"</span>
</div> </div>
</slot> </slot>
</QChip> </VnFilterPanelChip>
<slot
v-if="$slots.customTags"
name="customTags"
:params="userParams"
:tags="customTags"
:format-fn="formatValue"
:search-fn="search"
/>
</div> </div>
</QItem> </QItem>
<QSeparator /> <QSeparator />

View File

@ -0,0 +1,7 @@
<script setup></script>
<template>
<QChip class="text-dark" color="primary" icon="label" size="sm" v-bind="$attrs">
<slot />
</QChip>
</template>

View File

@ -53,10 +53,11 @@ const fetchNodeLeaves = async (nodeKey) => {
}; };
const removeNode = (node) => { const removeNode = (node) => {
const { id, parentFk } = node;
quasar quasar
.dialog({ .dialog({
title: 'Are you sure you want to delete it?', title: t('Are you sure you want to delete it?'),
message: 'Delete department', message: t('Delete department'),
ok: { ok: {
push: true, push: true,
color: 'primary', color: 'primary',
@ -65,9 +66,9 @@ const removeNode = (node) => {
}) })
.onOk(async () => { .onOk(async () => {
try { try {
await axios.post(`/Departments/${node.id}/removeChild`, node.id); await axios.post(`/Departments/${id}/removeChild`, id);
notify('department.departmentRemoved', 'positive'); notify(t('department.departmentRemoved'), 'positive');
await fetchNodeLeaves(node.parentFk); await fetchNodeLeaves(parentFk);
} catch (err) { } catch (err) {
console.log('Error removing department'); console.log('Error removing department');
} }
@ -85,7 +86,7 @@ const onNodeCreated = async () => {
const redirectToDepartmentSummary = (id) => { const redirectToDepartmentSummary = (id) => {
if (!id) return; if (!id) return;
router.push({ name: 'DepartmentSummary', params: { id: id } }); router.push({ name: 'DepartmentSummary', params: { id } });
}; };
</script> </script>
@ -99,22 +100,22 @@ const redirectToDepartmentSummary = (id) => {
v-model:expanded="expanded" v-model:expanded="expanded"
@update:expanded="onNodeExpanded($event)" @update:expanded="onNodeExpanded($event)"
> >
<template #default-header="prop"> <template #default-header="{ node }">
<div <div
class="row justify-between full-width q-pr-md cursor-pointer" class="row justify-between full-width q-pr-md cursor-pointer"
@click.stop="redirectToDepartmentSummary(prop.node.id)" @click.stop="redirectToDepartmentSummary(node.id)"
> >
<span class="text-uppercase"> <span class="text-uppercase">
{{ prop.node.name }} {{ node.name }}
</span> </span>
<div class="row justify-between" style="max-width: max-content"> <div class="row justify-between" style="max-width: max-content">
<QIcon <QIcon
v-if="prop.node.id" v-if="node.id"
name="delete" name="delete"
color="primary" color="primary"
size="sm" size="sm"
class="q-pr-xs cursor-pointer" class="q-pr-xs cursor-pointer"
@click.stop="removeNode(prop.node)" @click.stop="removeNode(node)"
> >
<QTooltip> <QTooltip>
{{ t('Remove') }} {{ t('Remove') }}
@ -125,7 +126,7 @@ const redirectToDepartmentSummary = (id) => {
color="primary" color="primary"
size="sm" size="sm"
class="cursor-pointer" class="cursor-pointer"
@click.stop="showCreateNodeForm(prop.node.id)" @click.stop="showCreateNodeForm(node.id)"
> >
<QTooltip> <QTooltip>
{{ t('Create') }} {{ t('Create') }}

View File

@ -53,3 +53,8 @@ body.body--dark {
color: var(--vn-text); color: var(--vn-text);
border-radius: 8px; border-radius: 8px;
} }
/* Estilo para el asterisco en campos requeridos */
.q-field.required .q-field__label:after {
content: ' *';
}

8
src/filters/dateRange.js Normal file
View File

@ -0,0 +1,8 @@
export default function 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];
}

View File

@ -7,6 +7,7 @@ import toCurrency from './toCurrency';
import toPercentage from './toPercentage'; import toPercentage from './toPercentage';
import toLowerCamel from './toLowerCamel'; import toLowerCamel from './toLowerCamel';
import dashIfEmpty from './dashIfEmpty'; import dashIfEmpty from './dashIfEmpty';
import dateRange from './dateRange';
export { export {
toLowerCase, toLowerCase,
@ -18,4 +19,5 @@ export {
toCurrency, toCurrency,
toPercentage, toPercentage,
dashIfEmpty, dashIfEmpty,
dateRange,
}; };

View File

@ -62,6 +62,7 @@ export default {
selectRows: 'Select all { numberRows } row(s)', selectRows: 'Select all { numberRows } row(s)',
allRows: 'All { numberRows } row(s)', allRows: 'All { numberRows } row(s)',
markAll: 'Mark all', markAll: 'Mark all',
noResults: 'No results'
}, },
errors: { errors: {
statusUnauthorized: 'Access denied', statusUnauthorized: 'Access denied',
@ -115,7 +116,20 @@ export default {
defaulter: 'Defaulter', defaulter: 'Defaulter',
createCustomer: 'Create customer', createCustomer: 'Create customer',
summary: 'Summary', summary: 'Summary',
basicData: 'Basic Data', basicData: 'Basic data',
fiscalData: 'Fiscal data',
billingData: 'Billing data',
consignees: 'Consignees',
notes: 'Notes',
credits: 'Credits',
greuges: 'Greuges',
balance: 'Balance',
recoveries: 'Recoveries',
webAccess: 'Web access',
log: 'Log',
sms: 'Sms',
creditManagement: 'Credit management',
others: 'Others',
}, },
list: { list: {
phone: 'Phone', phone: 'Phone',
@ -605,6 +619,7 @@ export default {
basicData: 'Basic Data', basicData: 'Basic Data',
catalog: 'Catalog', catalog: 'Catalog',
volume: 'Volume', volume: 'Volume',
lines: 'Lines',
}, },
field: { field: {
salesPersonFk: 'Sales Person', salesPersonFk: 'Sales Person',

View File

@ -62,6 +62,7 @@ export default {
selectRows: 'Seleccionar las { numberRows } filas(s)', selectRows: 'Seleccionar las { numberRows } filas(s)',
allRows: 'Todo { numberRows } filas(s)', allRows: 'Todo { numberRows } filas(s)',
markAll: 'Marcar todo', markAll: 'Marcar todo',
noResults: 'Sin resultados',
}, },
errors: { errors: {
statusUnauthorized: 'Acceso denegado', statusUnauthorized: 'Acceso denegado',
@ -114,8 +115,21 @@ export default {
notifications: 'Notificaciones', notifications: 'Notificaciones',
defaulter: 'Morosos', defaulter: 'Morosos',
createCustomer: 'Crear cliente', createCustomer: 'Crear cliente',
basicData: 'Datos básicos',
summary: 'Resumen', summary: 'Resumen',
basicData: 'Datos básicos',
fiscalData: 'Datos fiscales',
billingData: 'Forma de pago',
consignees: 'Consignatarios',
notes: 'Notas',
credits: 'Créditos',
greuges: 'Greuges',
balance: 'Balance',
recoveries: 'Recobros',
webAccess: 'Acceso web',
log: 'Historial',
sms: 'Sms',
creditManagement: 'Gestión de crédito',
others: 'Otros',
}, },
list: { list: {
phone: 'Teléfono', phone: 'Teléfono',
@ -513,6 +527,7 @@ export default {
basicData: 'Datos básicos', basicData: 'Datos básicos',
catalog: 'Catálogo', catalog: 'Catálogo',
volume: 'Volumen', volume: 'Volumen',
lines: 'Líneas',
}, },
field: { field: {
salesPersonFk: 'Comercial', salesPersonFk: 'Comercial',
@ -841,7 +856,7 @@ export default {
payDeadline: 'Plazo de pago', payDeadline: 'Plazo de pago',
payDay: 'Día de pago', payDay: 'Día de pago',
account: 'Cuenta', account: 'Cuenta',
fiscalData: 'Data fiscal', fiscalData: 'Datos fiscales',
sageTaxType: 'Tipo de impuesto Sage', sageTaxType: 'Tipo de impuesto Sage',
sageTransactionType: 'Tipo de transacción Sage', sageTransactionType: 'Tipo de transacción Sage',
sageWithholding: 'Retención sage', sageWithholding: 'Retención sage',

View File

@ -0,0 +1,3 @@
<template>
<div class="flex justify-center">Balance</div>
</template>

View File

@ -0,0 +1,3 @@
<template>
<div class="flex justify-center">Billing data</div>
</template>

View File

@ -0,0 +1,3 @@
<template>
<div class="flex justify-center">Consignees</div>
</template>

View File

@ -0,0 +1,3 @@
<template>
<div class="flex justify-center">Credit management</div>
</template>

View File

@ -0,0 +1,3 @@
<template>
<div class="flex justify-center">Credits</div>
</template>

View File

@ -0,0 +1,3 @@
<template>
<div class="flex justify-center">Fiscal data</div>
</template>

View File

@ -0,0 +1,3 @@
<template>
<div class="flex justify-center">Greuges</div>
</template>

View File

@ -0,0 +1,3 @@
<template>
<div class="flex justify-center">Log</div>
</template>

View File

@ -0,0 +1,3 @@
<template>
<div class="flex justify-center">Notes</div>
</template>

View File

@ -0,0 +1,3 @@
<template>
<div class="flex justify-center">Others</div>
</template>

View File

@ -0,0 +1,3 @@
<template>
<div class="flex justify-center">Recoveries</div>
</template>

View File

@ -0,0 +1,3 @@
<template>
<div class="flex justify-center">Sms</div>
</template>

View File

@ -0,0 +1,3 @@
<template>
<div class="flex justify-center">Web access</div>
</template>

View File

@ -0,0 +1,51 @@
<script setup>
import { useI18n } from 'vue-i18n';
import { toCurrency } from 'filters/index';
const $props = defineProps({
amount: {
type: Number,
required: true,
},
});
const { t } = useI18n();
</script>
<template>
<div class="card_balance q-px-md q-py-sm q-my-sm">
<h6 class="title_balance text-center">{{ t('Total') }}</h6>
<div class="row">
<p class="key_balance">{{ t('Balance due') }}:&ensp;</p>
<b class="value_balance">
{{ toCurrency($props.amount) }}
</b>
</div>
</div>
</template>
<style lang="scss">
.card_balance {
border: 1px solid black;
}
.title_balance {
color: var(--vn-text);
margin-top: 0;
margin-bottom: 0;
}
.key_balance {
color: var(--vn-label);
margin-bottom: 0;
}
.value_balance {
color: var(--vn-text);
margin-bottom: 0;
}
</style>
<i18n>
es:
Total: Total
Balance due: Saldo vencido
</i18n>

View File

@ -4,11 +4,12 @@ import { useI18n } from 'vue-i18n';
import { QBtn, QCheckbox } from 'quasar'; import { QBtn, QCheckbox } from 'quasar';
import { toCurrency, toDate } from 'filters/index';
import { useArrayData } from 'composables/useArrayData'; import { useArrayData } from 'composables/useArrayData';
import { useStateStore } from 'stores/useStateStore'; import { useStateStore } from 'stores/useStateStore';
import { toCurrency, toDate } from 'filters/index';
import CustomerNotificationsFilter from './CustomerDefaulterFilter.vue'; import CustomerNotificationsFilter from './CustomerDefaulterFilter.vue';
import CustomerBalanceDueTotal from './CustomerBalanceDueTotal.vue';
import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue'; import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue'; import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
@ -16,6 +17,7 @@ const { t } = useI18n();
const stateStore = useStateStore(); const stateStore = useStateStore();
const arrayData = ref(null); const arrayData = ref(null);
const balanceDueTotal = ref(0);
onBeforeMount(async () => { onBeforeMount(async () => {
arrayData.value = useArrayData('CustomerDefaulter', { arrayData.value = useArrayData('CustomerDefaulter', {
@ -23,33 +25,40 @@ onBeforeMount(async () => {
limit: 0, limit: 0,
}); });
await arrayData.value.fetch({ append: false }); await arrayData.value.fetch({ append: false });
balanceDueTotal.value = arrayData.value.store.data.reduce(
(accumulator, currentValue) => {
return accumulator + (currentValue['amount'] || 0);
},
0
);
console.log(balanceDueTotal.value);
stateStore.rightDrawer = true; stateStore.rightDrawer = true;
}); });
const rows = computed(() => arrayData.value.store.data); const rows = computed(() => arrayData.value.store.data);
const selected = ref([]); const selected = ref([]);
const worderId = ref(0); const workerId = ref(0);
const customerId = ref(0); const customerId = ref(0);
const tableColumnComponents = { const tableColumnComponents = {
client: { client: {
component: QBtn, component: QBtn,
props: () => ({ flat: true, color: 'blue' }), props: () => ({ flat: true, color: 'blue' }),
event: (prop) => selectClientId(prop.row.clientFk), event: ({ row }) => selectCustomerId(row.clientFk),
}, },
isWorker: { isWorker: {
component: QCheckbox, component: QCheckbox,
props: (prop) => ({ props: ({ value }) => ({
disable: true, disable: true,
'model-value': Boolean(prop.value), 'model-value': Boolean(value),
}), }),
event: () => {}, event: () => {},
}, },
salesperson: { salesperson: {
component: QBtn, component: QBtn,
props: () => ({ flat: true, color: 'blue' }), props: () => ({ flat: true, color: 'blue' }),
event: (prop) => selectSalespersonId(prop.row.salesPersonFk), event: ({ row }) => selectWorkerId(row.salesPersonFk),
}, },
country: { country: {
component: 'span', component: 'span',
@ -69,7 +78,7 @@ const tableColumnComponents = {
author: { author: {
component: QBtn, component: QBtn,
props: () => ({ flat: true, color: 'blue' }), props: () => ({ flat: true, color: 'blue' }),
event: (prop) => selectAuthorId(prop.row.workerFk), event: ({ row }) => selectWorkerId(row.workerFk),
}, },
lastObservation: { lastObservation: {
component: 'span', component: 'span',
@ -93,90 +102,83 @@ const tableColumnComponents = {
}, },
}; };
const columns = computed(() => { const columns = computed(() => [
return [ {
{ align: 'left',
align: 'left', field: 'clientName',
field: 'clientName', label: t('Client'),
label: t('Client'), name: 'client',
name: 'client', },
}, {
{ align: 'left',
align: 'left', field: 'isWorker',
field: 'isWorker', label: t('Is worker'),
label: t('Is worker'), name: 'isWorker',
name: 'isWorker', },
}, {
{ align: 'left',
align: 'left', field: 'salesPersonName',
field: 'salesPersonName', label: t('Salesperson'),
label: t('Salesperson'), name: 'salesperson',
name: 'salesperson', },
}, {
{ align: 'left',
align: 'left', field: 'country',
field: 'country', label: t('Country'),
label: t('Country'), name: 'country',
name: 'country', },
}, {
{ align: 'left',
align: 'left', field: 'payMethod',
field: 'payMethod', label: t('P. Method'),
label: t('P. Method'), name: 'paymentMethod',
name: 'paymentMethod', },
}, {
{ align: 'left',
align: 'left', field: ({ amount }) => toCurrency(amount),
field: (row) => toCurrency(row.amount), label: t('Balance D.'),
label: t('Balance D.'), name: 'balance',
name: 'balance', },
}, {
{ align: 'left',
align: 'left', field: 'workerName',
field: 'workerName', label: t('Author'),
label: t('Author'), name: 'author',
name: 'author', },
}, {
{ align: 'left',
align: 'left', field: 'observation',
field: 'observation', label: t('Last observation'),
label: t('Last observation'), name: 'lastObservation',
name: 'lastObservation', },
}, {
{ align: 'left',
align: 'left', field: ({ created }) => toDate(created),
field: (row) => toDate(row.created), label: t('L. O. Date'),
label: t('L. O. Date'), name: 'date',
name: 'date', },
}, {
{ align: 'left',
align: 'left', field: ({ creditInsurance }) => toCurrency(creditInsurance),
field: (row) => toCurrency(row.creditInsurance), label: t('Credit I.'),
label: t('Credit I.'), name: 'credit',
name: 'credit', },
}, {
{ align: 'left',
align: 'left', field: ({ defaulterSinced }) => toDate(defaulterSinced),
field: (row) => toDate(row.defaulterSinced), label: t('From'),
label: t('From'), name: 'from',
name: 'from', },
}, ]);
];
});
const selectClientId = (id) => { const selectCustomerId = (id) => {
worderId.value = 0; workerId.value = 0;
customerId.value = id; customerId.value = id;
}; };
const selectSalespersonId = (id) => { const selectWorkerId = (id) => {
customerId.value = 0; customerId.value = 0;
worderId.value = id; workerId.value = id;
};
const selectAuthorId = (id) => {
customerId.value = 0;
worderId.value = id;
}; };
</script> </script>
@ -188,7 +190,9 @@ const selectAuthorId = (id) => {
</QDrawer> </QDrawer>
<QToolbar class="bg-vn-dark"> <QToolbar class="bg-vn-dark">
<div id="st-data"></div> <div id="st-data">
<CustomerBalanceDueTotal :amount="balanceDueTotal" />
</div>
<QSpace /> <QSpace />
<div id="st-actions"></div> <div id="st-actions"></div>
</QToolbar> </QToolbar>
@ -204,11 +208,6 @@ const selectAuthorId = (id) => {
selection="multiple" selection="multiple"
v-model:selected="selected" v-model:selected="selected"
> >
<template #top>
<div v-if="rows" class="full-width flex justify-end">
{{ `${rows.length} ${t('route.cmr.list.results')}` }}
</div>
</template>
<template #body-cell="props"> <template #body-cell="props">
<QTd :props="props"> <QTd :props="props">
<QTr :props="props" class="cursor-pointer"> <QTr :props="props" class="cursor-pointer">
@ -220,7 +219,7 @@ const selectAuthorId = (id) => {
> >
{{ props.value }} {{ props.value }}
<WorkerDescriptorProxy v-if="worderId" :id="worderId" /> <WorkerDescriptorProxy v-if="workerId" :id="workerId" />
<CustomerDescriptorProxy v-else :id="customerId" /> <CustomerDescriptorProxy v-else :id="customerId" />
</component> </component>
</QTr> </QTr>

View File

@ -262,215 +262,213 @@ const tableColumnComponents = {
}, },
}; };
const columns = computed(() => { const columns = computed(() => [
return [ {
{ align: 'left',
align: 'left', field: '',
field: '', label: '',
label: '', name: 'customerStatus',
name: 'customerStatus', format: () => ' ',
format: () => ' ', },
}, {
{ align: 'left',
align: 'left', field: 'id',
field: 'id', label: t('customer.extendedList.tableVisibleColumns.id'),
label: t('customer.extendedList.tableVisibleColumns.id'), name: 'id',
name: 'id', },
}, {
{ align: 'left',
align: 'left', field: 'name',
field: 'name', label: t('customer.extendedList.tableVisibleColumns.name'),
label: t('customer.extendedList.tableVisibleColumns.name'), name: 'name',
name: 'name', },
}, {
{ align: 'left',
align: 'left', field: 'fi',
field: 'fi', label: t('customer.extendedList.tableVisibleColumns.fi'),
label: t('customer.extendedList.tableVisibleColumns.fi'), name: 'fi',
name: 'fi', },
}, {
{ align: 'left',
align: 'left', field: 'salesPerson',
field: 'salesPerson', label: t('customer.extendedList.tableVisibleColumns.salesPersonFk'),
label: t('customer.extendedList.tableVisibleColumns.salesPersonFk'), name: 'salesPersonFk',
name: 'salesPersonFk', },
}, {
{ align: 'left',
align: 'left', field: 'credit',
field: 'credit', label: t('customer.extendedList.tableVisibleColumns.credit'),
label: t('customer.extendedList.tableVisibleColumns.credit'), name: 'credit',
name: 'credit', },
}, {
{ align: 'left',
align: 'left', field: 'creditInsurance',
field: 'creditInsurance', label: t('customer.extendedList.tableVisibleColumns.creditInsurance'),
label: t('customer.extendedList.tableVisibleColumns.creditInsurance'), name: 'creditInsurance',
name: 'creditInsurance', },
}, {
{ align: 'left',
align: 'left', field: 'phone',
field: 'phone', label: t('customer.extendedList.tableVisibleColumns.phone'),
label: t('customer.extendedList.tableVisibleColumns.phone'), name: 'phone',
name: 'phone', },
}, {
{ align: 'left',
align: 'left', field: 'mobile',
field: 'mobile', label: t('customer.extendedList.tableVisibleColumns.mobile'),
label: t('customer.extendedList.tableVisibleColumns.mobile'), name: 'mobile',
name: 'mobile', },
}, {
{ align: 'left',
align: 'left', field: 'street',
field: 'street', label: t('customer.extendedList.tableVisibleColumns.street'),
label: t('customer.extendedList.tableVisibleColumns.street'), name: 'street',
name: 'street', },
}, {
{ align: 'left',
align: 'left', field: 'country',
field: 'country', label: t('customer.extendedList.tableVisibleColumns.countryFk'),
label: t('customer.extendedList.tableVisibleColumns.countryFk'), name: 'countryFk',
name: 'countryFk', },
}, {
{ align: 'left',
align: 'left', field: 'province',
field: 'province', label: t('customer.extendedList.tableVisibleColumns.provinceFk'),
label: t('customer.extendedList.tableVisibleColumns.provinceFk'), name: 'provinceFk',
name: 'provinceFk', },
}, {
{ align: 'left',
align: 'left', field: 'city',
field: 'city', label: t('customer.extendedList.tableVisibleColumns.city'),
label: t('customer.extendedList.tableVisibleColumns.city'), name: 'city',
name: 'city', },
}, {
{ align: 'left',
align: 'left', field: 'postcode',
field: 'postcode', label: t('customer.extendedList.tableVisibleColumns.postcode'),
label: t('customer.extendedList.tableVisibleColumns.postcode'), name: 'postcode',
name: 'postcode', },
}, {
{ align: 'left',
align: 'left', field: 'email',
field: 'email', label: t('customer.extendedList.tableVisibleColumns.email'),
label: t('customer.extendedList.tableVisibleColumns.email'), name: 'email',
name: 'email', },
}, {
{ align: 'left',
align: 'left', field: 'created',
field: 'created', label: t('customer.extendedList.tableVisibleColumns.created'),
label: t('customer.extendedList.tableVisibleColumns.created'), name: 'created',
name: 'created', format: (value) => toDate(value),
format: (value) => toDate(value), },
}, {
{ align: 'left',
align: 'left', field: 'businessType',
field: 'businessType', label: t('customer.extendedList.tableVisibleColumns.businessTypeFk'),
label: t('customer.extendedList.tableVisibleColumns.businessTypeFk'), name: 'businessTypeFk',
name: 'businessTypeFk', },
}, {
{ align: 'left',
align: 'left', field: 'payMethod',
field: 'payMethod', label: t('customer.extendedList.tableVisibleColumns.payMethodFk'),
label: t('customer.extendedList.tableVisibleColumns.payMethodFk'), name: 'payMethodFk',
name: 'payMethodFk', },
}, {
{ align: 'left',
align: 'left', field: 'sageTaxType',
field: 'sageTaxType', label: t('customer.extendedList.tableVisibleColumns.sageTaxTypeFk'),
label: t('customer.extendedList.tableVisibleColumns.sageTaxTypeFk'), name: 'sageTaxTypeFk',
name: 'sageTaxTypeFk', },
}, {
{ align: 'left',
align: 'left', field: 'sageTransactionType',
field: 'sageTransactionType', label: t('customer.extendedList.tableVisibleColumns.sageTransactionTypeFk'),
label: t('customer.extendedList.tableVisibleColumns.sageTransactionTypeFk'), name: 'sageTransactionTypeFk',
name: 'sageTransactionTypeFk', },
}, {
{ align: 'left',
align: 'left', field: 'isActive',
field: 'isActive', label: t('customer.extendedList.tableVisibleColumns.isActive'),
label: t('customer.extendedList.tableVisibleColumns.isActive'), name: 'isActive',
name: 'isActive', format: () => ' ',
format: () => ' ', },
}, {
{ align: 'left',
align: 'left', field: 'isVies',
field: 'isVies', label: t('customer.extendedList.tableVisibleColumns.isVies'),
label: t('customer.extendedList.tableVisibleColumns.isVies'), name: 'isVies',
name: 'isVies', format: () => ' ',
format: () => ' ', },
}, {
{ align: 'left',
align: 'left', field: 'isTaxDataChecked',
field: 'isTaxDataChecked', label: t('customer.extendedList.tableVisibleColumns.isTaxDataChecked'),
label: t('customer.extendedList.tableVisibleColumns.isTaxDataChecked'), name: 'isTaxDataChecked',
name: 'isTaxDataChecked', format: () => ' ',
format: () => ' ', },
}, {
{ align: 'left',
align: 'left', field: 'isEqualizated',
field: 'isEqualizated', label: t('customer.extendedList.tableVisibleColumns.isEqualizated'),
label: t('customer.extendedList.tableVisibleColumns.isEqualizated'), name: 'isEqualizated',
name: 'isEqualizated', format: () => ' ',
format: () => ' ', },
}, {
{ align: 'left',
align: 'left', field: 'isFreezed',
field: 'isFreezed', label: t('customer.extendedList.tableVisibleColumns.isFreezed'),
label: t('customer.extendedList.tableVisibleColumns.isFreezed'), name: 'isFreezed',
name: 'isFreezed', format: () => ' ',
format: () => ' ', },
}, {
{ align: 'left',
align: 'left', field: 'hasToInvoice',
field: 'hasToInvoice', label: t('customer.extendedList.tableVisibleColumns.hasToInvoice'),
label: t('customer.extendedList.tableVisibleColumns.hasToInvoice'), name: 'hasToInvoice',
name: 'hasToInvoice', format: () => ' ',
format: () => ' ', },
}, {
{ align: 'left',
align: 'left', field: 'hasToInvoiceByAddress',
field: 'hasToInvoiceByAddress', label: t('customer.extendedList.tableVisibleColumns.hasToInvoiceByAddress'),
label: t('customer.extendedList.tableVisibleColumns.hasToInvoiceByAddress'), name: 'hasToInvoiceByAddress',
name: 'hasToInvoiceByAddress', format: () => ' ',
format: () => ' ', },
}, {
{ align: 'left',
align: 'left', field: 'isToBeMailed',
field: 'isToBeMailed', label: t('customer.extendedList.tableVisibleColumns.isToBeMailed'),
label: t('customer.extendedList.tableVisibleColumns.isToBeMailed'), name: 'isToBeMailed',
name: 'isToBeMailed', format: () => ' ',
format: () => ' ', },
}, {
{ align: 'left',
align: 'left', field: 'hasLcr',
field: 'hasLcr', label: t('customer.extendedList.tableVisibleColumns.hasLcr'),
label: t('customer.extendedList.tableVisibleColumns.hasLcr'), name: 'hasLcr',
name: 'hasLcr', format: () => ' ',
format: () => ' ', },
}, {
{ align: 'left',
align: 'left', field: 'hasCoreVnl',
field: 'hasCoreVnl', label: t('customer.extendedList.tableVisibleColumns.hasCoreVnl'),
label: t('customer.extendedList.tableVisibleColumns.hasCoreVnl'), name: 'hasCoreVnl',
name: 'hasCoreVnl', format: () => ' ',
format: () => ' ', },
}, {
{ align: 'left',
align: 'left', field: 'hasSepaVnl',
field: 'hasSepaVnl', label: t('customer.extendedList.tableVisibleColumns.hasSepaVnl'),
label: t('customer.extendedList.tableVisibleColumns.hasSepaVnl'), name: 'hasSepaVnl',
name: 'hasSepaVnl', format: () => ' ',
format: () => ' ', },
}, {
{ align: 'right',
align: 'right', field: 'actions',
field: 'actions', label: '',
label: '', name: 'actions',
name: 'actions', },
}, ]);
];
});
const stopEventPropagation = (event, col) => { const stopEventPropagation = (event, col) => {
if (!['id', 'salesPersonFk'].includes(col.name)) return; if (!['id', 'salesPersonFk'].includes(col.name)) return;

View File

@ -7,6 +7,7 @@ import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
import VnSelectFilter from 'components/common/VnSelectFilter.vue'; import VnSelectFilter from 'components/common/VnSelectFilter.vue';
import VnInput from 'src/components/common/VnInput.vue'; import VnInput from 'src/components/common/VnInput.vue';
import VnInputDate from 'components/common/VnInputDate.vue'; import VnInputDate from 'components/common/VnInputDate.vue';
import { dateRange } from 'src/filters';
const props = defineProps({ const props = defineProps({
dataKey: { dataKey: {
@ -32,6 +33,48 @@ const sageTransactionTypesOptions = ref([]);
const visibleColumnsSet = computed(() => new Set(props.visibleColumns)); const visibleColumnsSet = computed(() => new Set(props.visibleColumns));
const exprBuilder = (param, value) => {
switch (param) {
case 'created':
return {
'c.created': {
between: dateRange(value),
},
};
case 'id':
case 'name':
case 'socialName':
case 'fi':
case 'credit':
case 'creditInsurance':
case 'phone':
case 'mobile':
case 'street':
case 'city':
case 'postcode':
case 'email':
case 'isActive':
case 'isVies':
case 'isTaxDataChecked':
case 'isEqualizated':
case 'isFreezed':
case 'hasToInvoice':
case 'hasToInvoiceByAddress':
case 'isToBeMailed':
case 'hasSepaVnl':
case 'hasLcr':
case 'hasCoreVnl':
case 'countryFk':
case 'provinceFk':
case 'salesPersonFk':
case 'businessTypeFk':
case 'payMethodFk':
case 'sageTaxTypeFk':
case 'sageTransactionTypeFk':
return { [`c.${param}`]: value };
}
};
const shouldRenderColumn = (colName) => { const shouldRenderColumn = (colName) => {
return visibleColumnsSet.value.has(colName); return visibleColumnsSet.value.has(colName);
}; };
@ -88,7 +131,11 @@ const shouldRenderColumn = (colName) => {
auto-load auto-load
@on-fetch="(data) => (sageTransactionTypesOptions = data)" @on-fetch="(data) => (sageTransactionTypesOptions = data)"
/> />
<VnFilterPanel :data-key="props.dataKey" :search-button="true"> <VnFilterPanel
:data-key="props.dataKey"
:search-button="true"
:expr-builder="exprBuilder"
>
<template #tags="{ tag, formatFn }"> <template #tags="{ tag, formatFn }">
<div class="q-gutter-x-xs"> <div class="q-gutter-x-xs">
<strong <strong

View File

@ -57,40 +57,38 @@ const tableColumnComponents = {
}, },
}; };
const columns = computed(() => { const columns = computed(() => [
return [ {
{ align: 'left',
align: 'left', field: 'id',
field: 'id', label: t('Identifier'),
label: t('Identifier'), name: 'id',
name: 'id', },
}, {
{ align: 'left',
align: 'left', field: 'socialName',
field: 'socialName', label: t('Social name'),
label: t('Social name'), name: 'socialName',
name: 'socialName', },
}, {
{ align: 'left',
align: 'left', field: 'city',
field: 'city', label: t('City'),
label: t('City'), name: 'city',
name: 'city', },
}, {
{ align: 'left',
align: 'left', field: 'phone',
field: 'phone', label: t('Phone'),
label: t('Phone'), name: 'phone',
name: 'phone', },
}, {
{ align: 'left',
align: 'left', field: 'email',
field: 'email', label: t('Email'),
label: t('Email'), name: 'email',
name: 'email', },
}, ]);
];
});
const selectCustomerId = (id) => { const selectCustomerId = (id) => {
selectedCustomerId.value = id; selectedCustomerId.value = id;
@ -121,11 +119,6 @@ const selectCustomerId = (id) => {
selection="multiple" selection="multiple"
v-model:selected="selected" v-model:selected="selected"
> >
<template #top>
<div v-if="rows" class="full-width flex justify-end">
{{ `${rows.length} ${t('route.cmr.list.results')}` }}
</div>
</template>
<template #body-cell="props"> <template #body-cell="props">
<QTd :props="props"> <QTd :props="props">
<QTr :props="props" class="cursor-pointer"> <QTr :props="props" class="cursor-pointer">

View File

@ -60,13 +60,14 @@ const companiesOptions = ref([]);
<template #form="{ data, validate }"> <template #form="{ data, validate }">
<VnRow class="row q-gutter-md q-mb-md"> <VnRow class="row q-gutter-md q-mb-md">
<VnSelectFilter <VnSelectFilter
:label="t('Supplier *')" :label="t('Supplier')"
class="full-width" class="full-width"
v-model="data.supplierFk" v-model="data.supplierFk"
:options="suppliersOptions" :options="suppliersOptions"
option-value="id" option-value="id"
option-label="nickname" option-label="nickname"
hide-selected hide-selected
:required="true"
:rules="validate('entry.supplierFk')" :rules="validate('entry.supplierFk')"
> >
<template #option="scope"> <template #option="scope">
@ -83,7 +84,7 @@ const companiesOptions = ref([]);
</VnRow> </VnRow>
<VnRow class="row q-gutter-md q-mb-md"> <VnRow class="row q-gutter-md q-mb-md">
<VnSelectFilter <VnSelectFilter
:label="t('Travel *')" :label="t('Travel')"
class="full-width" class="full-width"
v-model="data.travelFk" v-model="data.travelFk"
:options="travelsOptionsOptions" :options="travelsOptionsOptions"
@ -91,6 +92,7 @@ const companiesOptions = ref([]);
option-label="warehouseInName" option-label="warehouseInName"
map-options map-options
hide-selected hide-selected
:required="true"
:rules="validate('entry.travelFk')" :rules="validate('entry.travelFk')"
> >
<template #option="scope"> <template #option="scope">
@ -111,7 +113,7 @@ const companiesOptions = ref([]);
</VnRow> </VnRow>
<VnRow class="row q-gutter-md q-mb-md"> <VnRow class="row q-gutter-md q-mb-md">
<VnSelectFilter <VnSelectFilter
:label="t('Company *')" :label="t('Company')"
class="full-width" class="full-width"
v-model="data.companyFk" v-model="data.companyFk"
:options="companiesOptions" :options="companiesOptions"
@ -119,6 +121,7 @@ const companiesOptions = ref([]);
option-label="code" option-label="code"
map-options map-options
hide-selected hide-selected
:required="true"
:rules="validate('entry.companyFk')" :rules="validate('entry.companyFk')"
/> />
</VnRow> </VnRow>
@ -129,7 +132,7 @@ const companiesOptions = ref([]);
<i18n> <i18n>
es: es:
Supplier *: Proveedor * Supplier: Proveedor
Travel *: Envío * Travel: Envío
Company *: Empresa * Company: Empresa
</i18n> </i18n>

View File

@ -49,30 +49,28 @@ const tableColumnComponents = {
}, },
}; };
const columns = computed(() => { const columns = computed(() => [
return [ { label: 'Id', field: 'clientId', name: 'clientId', align: 'left' },
{ label: 'Id', field: 'clientId', name: 'clientId', align: 'left' }, {
{ label: t('invoiceOut.globalInvoices.table.client'),
label: t('invoiceOut.globalInvoices.table.client'), field: 'clientName',
field: 'clientName', name: 'clientName',
name: 'clientName', align: 'left',
align: 'left', },
}, {
{ label: t('invoiceOut.globalInvoices.table.addressId'),
label: t('invoiceOut.globalInvoices.table.addressId'), field: 'id',
field: 'id', name: 'id',
name: 'id', align: 'left',
align: 'left', },
}, {
{ label: t('invoiceOut.globalInvoices.table.streetAddress'),
label: t('invoiceOut.globalInvoices.table.streetAddress'), field: 'nickname',
field: 'nickname', name: 'nickname',
name: 'nickname', align: 'left',
align: 'left', },
}, { label: 'Error', field: 'message', name: 'message', align: 'left' },
{ label: 'Error', field: 'message', name: 'message', align: 'left' }, ]);
];
});
const rows = computed(() => { const rows = computed(() => {
if (!errors && !errors.length > 0) return []; if (!errors && !errors.length > 0) return [];

View File

@ -1,12 +0,0 @@
<script setup>
import OrderForm from 'pages/Order/Card/OrderForm.vue';
</script>
<template>
<QToolbar>
<div id="st-data"></div>
<QSpace />
<div id="st-actions"></div>
</QToolbar>
<OrderForm />
</template>
<style lang="scss" scoped></style>

View File

@ -15,9 +15,7 @@ const stateStore = useStateStore();
</QDrawer> </QDrawer>
<QPageContainer> <QPageContainer>
<QPage> <QPage>
<div class="q-pa-md"> <RouterView></RouterView>
<RouterView></RouterView>
</div>
</QPage> </QPage>
</QPageContainer> </QPageContainer>
</template> </template>

View File

@ -1,11 +1,14 @@
<script setup> <script setup>
import { computed, ref } from 'vue'; import { computed, ref } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { useRoute } from 'vue-router';
import axios from 'axios';
import VnInput from 'components/common/VnInput.vue';
import FetchData from 'components/FetchData.vue'; import FetchData from 'components/FetchData.vue';
import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue'; import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
import VnSelectFilter from 'components/common/VnSelectFilter.vue'; import VnSelectFilter from 'components/common/VnSelectFilter.vue';
import axios from 'axios'; import VnFilterPanelChip from 'components/ui/VnFilterPanelChip.vue';
import { useRoute } from 'vue-router';
const { t } = useI18n(); const { t } = useI18n();
const route = useRoute(); const route = useRoute();
@ -14,6 +17,10 @@ const props = defineProps({
type: String, type: String,
required: true, required: true,
}, },
tags: {
type: Array,
required: true,
},
}); });
const categoryList = ref(null); const categoryList = ref(null);
@ -21,16 +28,41 @@ const selectedCategoryFk = ref(null);
const typeList = ref(null); const typeList = ref(null);
const selectedTypeFk = ref(null); const selectedTypeFk = ref(null);
const selectCategory = (params, category) => { const resetCategory = () => {
selectedCategoryFk.value = null;
typeList.value = null;
};
const selectedOrder = ref(null);
const orderList = [
{ way: 'ASC', name: 'Ascendant' },
{ way: 'DESC', name: 'Descendant' },
];
const selectedOrderField = ref(null);
const OrderFields = [
{ field: 'relevancy DESC, name', name: 'Relevancy', priority: 999 },
{ field: 'showOrder, price', name: 'Color and price', priority: 999 },
{ field: 'name', name: 'Name', priority: 999 },
{ field: 'price', name: 'Price', priority: 999 },
];
const clearFilter = (key) => {
if (key === 'categoryFk') {
resetCategory();
}
};
const selectCategory = (params, category, search) => {
if (params.categoryFk === category?.id) { if (params.categoryFk === category?.id) {
selectedCategoryFk.value = null; resetCategory();
params.categoryFk = null; params.categoryFk = null;
typeList.value = null;
} else { } else {
selectedCategoryFk.value = category?.id; selectedCategoryFk.value = category?.id;
params.categoryFk = category?.id; params.categoryFk = category?.id;
loadTypes(category?.id); loadTypes(category?.id);
} }
search();
}; };
const loadTypes = async (categoryFk) => { const loadTypes = async (categoryFk) => {
@ -48,6 +80,11 @@ const onFilterInit = async ({ params }) => {
await loadTypes(params.categoryFk); await loadTypes(params.categoryFk);
selectedCategoryFk.value = params.categoryFk; selectedCategoryFk.value = params.categoryFk;
} }
if (params.orderBy) {
orderByParam.value = JSON.parse(params.orderBy);
selectedOrder.value = orderByParam.value?.way;
selectedOrderField.value = orderByParam.value?.field;
}
}; };
const selectedCategory = computed(() => const selectedCategory = computed(() =>
@ -65,9 +102,65 @@ function exprBuilder(param, value) {
case 'categoryFk': case 'categoryFk':
case 'typeFk': case 'typeFk':
return { [param]: value }; return { [param]: value };
case 'search':
return { 'i.name': { like: `%${value}%` } };
} }
} }
const selectedTag = ref(null);
const tagValues = ref([{}]);
const tagOptions = ref(null);
const isButtonDisabled = computed(
() => !selectedTag.value || tagValues.value.some((item) => !item.value)
);
const applyTagFilter = (params, search) => {
if (!tagValues.value?.length) {
params.tagGroups = null;
search();
return;
}
if (!params.tagGroups) {
params.tagGroups = [];
}
params.tagGroups.push(
JSON.stringify({
values: tagValues.value,
tagSelection: {
...selectedTag.value,
orgShowField: selectedTag.value.name,
},
tagFk: selectedTag.value.tagFk,
})
);
search();
selectedTag.value = null;
tagValues.value = [{}];
};
const removeTagChip = (selection, params, search) => {
if (params.tagGroups) {
params.tagGroups = (params.tagGroups || []).filter(
(value) => value !== selection
);
}
search();
};
const orderByParam = ref(null);
const onOrderFieldChange = (value, params, search) => {
const orderBy = Object.assign({}, orderByParam.value, { field: value.field });
params.orderBy = JSON.stringify(orderBy);
search();
};
const onOrderChange = (value, params, search) => {
const orderBy = Object.assign({}, orderByParam.value, { way: value.way });
params.orderBy = JSON.stringify(orderBy);
search();
};
const setCategoryList = (data) => { const setCategoryList = (data) => {
categoryList.value = (data || []) categoryList.value = (data || [])
.filter((category) => category.display) .filter((category) => category.display)
@ -88,10 +181,11 @@ const getCategoryClass = (category, params) => {
<FetchData url="ItemCategories" limit="30" auto-load @on-fetch="setCategoryList" /> <FetchData url="ItemCategories" limit="30" auto-load @on-fetch="setCategoryList" />
<VnFilterPanel <VnFilterPanel
:data-key="props.dataKey" :data-key="props.dataKey"
:search-button="true"
:hidden-tags="['orderFk', 'orderBy']" :hidden-tags="['orderFk', 'orderBy']"
:expr-builder="exprBuilder" :expr-builder="exprBuilder"
:custom-tags="['tagGroups']"
@init="onFilterInit" @init="onFilterInit"
@remove="clearFilter"
> >
<template #tags="{ tag, formatFn }"> <template #tags="{ tag, formatFn }">
<strong v-if="tag.label === 'categoryFk'"> <strong v-if="tag.label === 'categoryFk'">
@ -105,8 +199,27 @@ const getCategoryClass = (category, params) => {
<span>{{ formatFn(tag.value) }}</span> <span>{{ formatFn(tag.value) }}</span>
</div> </div>
</template> </template>
<template #body="{ params }"> <template #customTags="{ tags: customTags, params, searchFn }">
<QList dense> <template v-for="tag in customTags" :key="tag.label">
<template v-if="tag.label === 'tagGroups'">
<VnFilterPanelChip
v-for="chip in tag.value"
:key="chip"
removable
@remove="removeTagChip(chip, params, searchFn)"
>
<strong> {{ JSON.parse(chip).tagSelection?.name }}: </strong>
<span>{{
(JSON.parse(chip).values || [])
.map((item) => item.value)
.join(' | ')
}}</span>
</VnFilterPanelChip>
</template>
</template>
</template>
<template #body="{ params, searchFn }">
<QList dense style="max-width: 256px">
<QItem class="category-filter q-mt-md"> <QItem class="category-filter q-mt-md">
<div <div
v-for="category in categoryList" v-for="category in categoryList"
@ -116,7 +229,7 @@ const getCategoryClass = (category, params) => {
<QIcon <QIcon
:name="category.icon" :name="category.icon"
class="category-icon" class="category-icon"
@click="selectCategory(params, category)" @click="selectCategory(params, category, searchFn)"
> >
<QTooltip> <QTooltip>
{{ t(category.name) }} {{ t(category.name) }}
@ -124,7 +237,7 @@ const getCategoryClass = (category, params) => {
</QIcon> </QIcon>
</div> </div>
</QItem> </QItem>
<QItem class="q-mt-md"> <QItem class="q-my-md">
<QItemSection> <QItemSection>
<VnSelectFilter <VnSelectFilter
:label="t('params.type')" :label="t('params.type')"
@ -138,7 +251,12 @@ const getCategoryClass = (category, params) => {
emit-value emit-value
use-input use-input
:disable="!selectedCategoryFk" :disable="!selectedCategoryFk"
@update:model-value="(value) => (selectedTypeFk = value)" @update:model-value="
(value) => {
selectedTypeFk = value;
searchFn();
}
"
> >
<template #option="{ itemProps, opt }"> <template #option="{ itemProps, opt }">
<QItem v-bind="itemProps"> <QItem v-bind="itemProps">
@ -153,6 +271,130 @@ const getCategoryClass = (category, params) => {
</VnSelectFilter> </VnSelectFilter>
</QItemSection> </QItemSection>
</QItem> </QItem>
<QSeparator />
<QItem class="q-my-md">
<QItemSection>
<VnSelectFilter
:label="t('params.order')"
v-model="selectedOrder"
:options="orderList || []"
option-value="way"
option-label="name"
dense
outlined
rounded
:emit-value="false"
use-input
:is-clearable="false"
@update:model-value="
(value) => onOrderChange(value, params, searchFn)
"
/>
</QItemSection>
</QItem>
<QItem class="q-mb-md">
<QItemSection>
<VnSelectFilter
:label="t('params.order')"
v-model="selectedOrderField"
:options="OrderFields || []"
option-value="field"
option-label="name"
dense
outlined
rounded
:emit-value="false"
use-input
:is-clearable="false"
@update:model-value="
(value) => onOrderFieldChange(value, params, searchFn)
"
/>
</QItemSection>
</QItem>
<QSeparator />
<QItem class="q-mt-md">
<QItemSection>
<VnSelectFilter
:label="t('params.tag')"
v-model="selectedTag"
:options="props.tags || []"
option-value="id"
option-label="name"
dense
outlined
rounded
:emit-value="false"
use-input
/>
</QItemSection>
</QItem>
<QItem
v-for="(value, index) in tagValues"
:key="value"
class="q-mt-md filter-value"
>
<VnInput
v-if="selectedTag?.isFree"
v-model="value.value"
:label="t('params.value')"
is-outlined
class="filter-input"
/>
<VnSelectFilter
v-else
:label="t('params.value')"
v-model="value.value"
:options="tagOptions || []"
option-value="value"
option-label="value"
dense
outlined
rounded
emit-value
use-input
:disable="!selectedTag"
class="filter-input"
/>
<FetchData
v-if="selectedTag && !selectedTag.isFree"
:url="`Tags/${selectedTag?.id}/filterValue`"
limit="30"
auto-load
@on-fetch="(data) => (tagOptions = data)"
/>
<QIcon
name="delete"
class="filter-icon"
@click="(tagValues || []).splice(index, 1)"
/>
</QItem>
<QItem class="q-mt-lg">
<QIcon
name="add_circle"
class="filter-icon"
@click="tagValues.push({})"
/>
</QItem>
<QItem>
<QItemSection class="q-py-sm">
<QBtn
:label="t('Search')"
class="full-width"
color="primary"
dense
icon="search"
rounded
type="button"
unelevated
:disable="isButtonDisabled"
@click.stop="applyTagFilter(params, searchFn)"
/>
</QItemSection>
</QItem>
<QSeparator />
</QList> </QList>
</template> </template>
</VnFilterPanel> </VnFilterPanel>
@ -180,12 +422,29 @@ const getCategoryClass = (category, params) => {
.category-icon { .category-icon {
border-radius: 50%; border-radius: 50%;
background-color: var(--vn-label); background-color: var(--vn-light-gray);
font-size: 2.6rem; font-size: 2.6rem;
padding: 8px; padding: 8px;
cursor: pointer; cursor: pointer;
} }
} }
.filter-icon {
font-size: 24px;
color: $primary;
padding: 0 4px;
cursor: pointer;
}
.filter-input {
flex-shrink: 1;
min-width: 0;
}
.filter-value {
display: flex;
align-items: center;
}
</style> </style>
<i18n> <i18n>
@ -193,10 +452,16 @@ en:
params: params:
type: Type type: Type
orderBy: Order By orderBy: Order By
tag: Tag
value: Value
order: Order
es: es:
params: params:
type: Tipo type: Tipo
orderBy: Ordenar por orderBy: Ordenar por
tag: Etiqueta
value: Valor
order: Orden
Plant: Planta Plant: Planta
Flower: Flor Flower: Flor
Handmade: Confección Handmade: Confección

View File

@ -24,7 +24,7 @@ const dialog = ref(null);
<template> <template>
<div class="container order-catalog-item overflow-hidden"> <div class="container order-catalog-item overflow-hidden">
<div class="card shadow-6 bg-dark"> <QCard class="card shadow-6">
<div class="img-wrapper"> <div class="img-wrapper">
<QImg <QImg
:src="`/api/Images/catalog/200x200/${item.id}/download?access_token=${token}`" :src="`/api/Images/catalog/200x200/${item.id}/download?access_token=${token}`"
@ -76,7 +76,7 @@ const dialog = ref(null);
</p> </p>
</div> </div>
</div> </div>
</div> </QCard>
</div> </div>
</template> </template>

View File

@ -10,6 +10,7 @@ import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.v
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 OrderDescriptorMenu from 'pages/Order/Card/OrderDescriptorMenu.vue';
import FetchData from 'components/FetchData.vue';
const DEFAULT_ITEMS = 0; const DEFAULT_ITEMS = 0;
@ -66,9 +67,16 @@ const setData = (entity) => {
const getConfirmationValue = (isConfirmed) => { const getConfirmationValue = (isConfirmed) => {
return t(isConfirmed ? 'order.summary.confirmed' : 'order.summary.notConfirmed'); return t(isConfirmed ? 'order.summary.confirmed' : 'order.summary.notConfirmed');
}; };
const total = ref(null);
</script> </script>
<template> <template>
<FetchData
:url="`Orders/${entityId}/getTotal`"
@on-fetch="(response) => (total = response)"
auto-load
/>
<CardDescriptor <CardDescriptor
ref="descriptor" ref="descriptor"
:url="`Orders/${entityId}`" :url="`Orders/${entityId}`"
@ -102,7 +110,7 @@ const getConfirmationValue = (isConfirmed) => {
:label="t('order.summary.items')" :label="t('order.summary.items')"
:value="(entity?.rows?.length || DEFAULT_ITEMS).toString()" :value="(entity?.rows?.length || DEFAULT_ITEMS).toString()"
/> />
<VnLv :label="t('order.summary.total')" :value="toCurrency(entity?.total)" /> <VnLv :label="t('order.summary.total')" :value="toCurrency(total)" />
</template> </template>
<template #actions="{ entity }"> <template #actions="{ entity }">
<QCardActions> <QCardActions>

View File

@ -51,13 +51,13 @@ async function remove() {
<i18n> <i18n>
en: en:
deleteOrder: Delete order, deleteOrder: Delete order
confirmDeletion: Confirm deletion, confirmDeletion: Confirm deletion
confirmDeletionMessage: Are you sure you want to delete this order? confirmDeletionMessage: Are you sure you want to delete this order?
es: es:
deleteOrder: Eliminar pedido, deleteOrder: Eliminar pedido
confirmDeletion: Confirmar eliminación, confirmDeletion: Confirmar eliminación
confirmDeletionMessage: Seguro que quieres eliminar este pedido? confirmDeletionMessage: Seguro que quieres eliminar este pedido?
</i18n> </i18n>

View File

@ -65,8 +65,8 @@ const fetchAgencyList = async (landed, addressFk) => {
}; };
const fetchOrderDetails = (order) => { const fetchOrderDetails = (order) => {
fetchAddressList(order?.addressFk) fetchAddressList(order?.addressFk);
fetchAgencyList(order?.landed, order?.addressFk) fetchAgencyList(order?.landed, order?.addressFk);
}; };
const orderMapper = (order) => { const orderMapper = (order) => {
@ -105,7 +105,7 @@ const orderFilter = {
</script> </script>
<template> <template>
<QToolbar> <QToolbar class="bg-vn-dark justify-end">
<div id="st-data"></div> <div id="st-data"></div>
<QSpace /> <QSpace />
<div id="st-actions"></div> <div id="st-actions"></div>
@ -116,94 +116,97 @@ const orderFilter = {
:filter="{ fields: ['id', 'name', 'defaultAddressFk'] }" :filter="{ fields: ['id', 'name', 'defaultAddressFk'] }"
auto-load auto-load
/> />
<FormModel
:url="!isNew ? `Orders/${route.params.id}` : null" <div class="q-pa-md">
:url-create="isNew ? 'Orders/new' : null" <FormModel
:model="ORDER_MODEL" :url="!isNew ? `Orders/${route.params.id}` : null"
:form-initial-data="isNew ? initialFormState : null" :url-create="isNew ? 'Orders/new' : null"
:observe-form-changes="!isNew" :model="ORDER_MODEL"
:mapper="isNew ? orderMapper : null" :form-initial-data="isNew ? initialFormState : null"
:filter="orderFilter" :observe-form-changes="!isNew"
@on-fetch="fetchOrderDetails" :mapper="isNew ? orderMapper : null"
> :filter="orderFilter"
<template #form="{ data }"> @on-fetch="fetchOrderDetails"
<VnRow class="row q-gutter-md q-mb-md"> >
<div class="col"> <template #form="{ data }">
<VnSelectFilter <VnRow class="row q-gutter-md q-mb-md">
:label="t('order.form.clientFk')" <div class="col">
v-model="data.clientFk" <VnSelectFilter
:options="clientList" :label="t('order.form.clientFk')"
option-value="id" v-model="data.clientFk"
option-label="name" :options="clientList"
hide-selected option-value="id"
@update:model-value=" option-label="name"
(client) => fetchAddressList(client.defaultAddressFk) hide-selected
" @update:model-value="
> (client) => fetchAddressList(client.defaultAddressFk)
<template #option="scope"> "
<QItem v-bind="scope.itemProps"> >
<QItemSection> <template #option="scope">
<QItemLabel> <QItem v-bind="scope.itemProps">
{{ `${scope.opt.id}: ${scope.opt.name}` }} <QItemSection>
</QItemLabel> <QItemLabel>
</QItemSection> {{ `${scope.opt.id}: ${scope.opt.name}` }}
</QItem> </QItemLabel>
</template> </QItemSection>
</VnSelectFilter> </QItem>
</div> </template>
<div class="col"> </VnSelectFilter>
<VnSelectFilter </div>
:label="t('order.form.addressFk')" <div class="col">
v-model="data.addressFk" <VnSelectFilter
:options="addressList" :label="t('order.form.addressFk')"
option-value="id" v-model="data.addressFk"
option-label="nickname" :options="addressList"
hide-selected option-value="id"
:disable="!addressList?.length" option-label="nickname"
@update:model-value=" hide-selected
() => fetchAgencyList(data.landed, data.addressFk) :disable="!addressList?.length"
" @update:model-value="
> () => fetchAgencyList(data.landed, data.addressFk)
<template #option="scope"> "
<QItem v-bind="scope.itemProps"> >
<QItemSection> <template #option="scope">
<QItemLabel> <QItem v-bind="scope.itemProps">
{{ <QItemSection>
`${scope.opt.nickname}: ${scope.opt.street},${scope.opt.city}` <QItemLabel>
}} {{
</QItemLabel> `${scope.opt.nickname}: ${scope.opt.street},${scope.opt.city}`
</QItemSection> }}
</QItem> </QItemLabel>
</template> </QItemSection>
</VnSelectFilter> </QItem>
</div> </template>
</VnRow> </VnSelectFilter>
<VnRow class="row q-gutter-md q-mb-md"> </div>
<div class="col"> </VnRow>
<VnInputDate <VnRow class="row q-gutter-md q-mb-md">
placeholder="dd-mm-aaa" <div class="col">
:label="t('order.form.landed')" <VnInputDate
v-model="data.landed" placeholder="dd-mm-aaa"
@update:model-value=" :label="t('order.form.landed')"
() => fetchAgencyList(data.landed, data.addressFk) v-model="data.landed"
" @update:model-value="
/> () => fetchAgencyList(data.landed, data.addressFk)
</div> "
</VnRow> />
<VnRow class="row q-gutter-md q-mb-md"> </div>
<div class="col"> </VnRow>
<VnSelectFilter <VnRow class="row q-gutter-md q-mb-md">
:label="t('order.form.agencyModeFk')" <div class="col">
v-model="data.agencyModeFk" <VnSelectFilter
:options="agencyList" :label="t('order.form.agencyModeFk')"
option-value="agencyModeFk" v-model="data.agencyModeFk"
option-label="agencyMode" :options="agencyList"
hide-selected option-value="agencyModeFk"
:disable="!agencyList?.length" option-label="agencyMode"
> hide-selected
</VnSelectFilter> :disable="!agencyList?.length"
</div> >
</VnRow> </VnSelectFilter>
</template> </div>
</FormModel> </VnRow>
</template>
</FormModel>
</div>
</template> </template>

View File

@ -56,148 +56,161 @@ const detailsColumns = ref([
<Teleport to="#searchbar" v-if="stateStore.isHeaderMounted()"> <Teleport to="#searchbar" v-if="stateStore.isHeaderMounted()">
<OrderSearchbar /> <OrderSearchbar />
</Teleport> </Teleport>
<CardSummary ref="summary" :url="`Orders/${entityId}/summary`">
<template #header="{ entity }"> <div class="q-pa-md">
{{ t('order.summary.basket') }} #{{ entity?.id }} - <CardSummary ref="summary" :url="`Orders/${entityId}/summary`">
{{ entity?.client?.name }} ({{ entity?.clientFk }}) <template #header="{ entity }">
</template> {{ t('order.summary.basket') }} #{{ entity?.id }} -
<template #body="{ entity }"> {{ entity?.client?.name }} ({{ entity?.clientFk }})
<QCard class="vn-one"> </template>
<VnLv label="ID" :value="entity.id" /> <template #body="{ entity }">
<VnLv :label="t('order.summary.nickname')" dash> <QCard class="vn-one">
<template #value> <VnLv label="ID" :value="entity.id" />
<span class="link"> <VnLv :label="t('order.summary.nickname')" dash>
{{ dashIfEmpty(entity?.address?.nickname) }} <template #value>
<CustomerDescriptorProxy :id="entity?.clientFk" /> <span class="link">
</span> {{ dashIfEmpty(entity?.address?.nickname) }}
</template> <CustomerDescriptorProxy :id="entity?.clientFk" />
</VnLv> </span>
<VnLv </template>
:label="t('order.summary.company')" </VnLv>
:value="entity?.address?.companyFk" <VnLv
/> :label="t('order.summary.company')"
<VnLv :value="entity?.address?.companyFk"
:label="t('order.summary.confirmed')" />
:value="Boolean(entity?.isConfirmed)" <VnLv
/> :label="t('order.summary.confirmed')"
</QCard> :value="Boolean(entity?.isConfirmed)"
<QCard class="vn-one"> />
<VnLv </QCard>
:label="t('order.summary.created')" <QCard class="vn-one">
:value="toDateHour(entity?.created)" <VnLv
/> :label="t('order.summary.created')"
<VnLv :value="toDateHour(entity?.created)"
:label="t('order.summary.confirmed')" />
:value="toDateHour(entity?.confirmed)" <VnLv
/> :label="t('order.summary.confirmed')"
<VnLv :value="toDateHour(entity?.confirmed)"
:label="t('order.summary.landed')" />
:value="toDateHour(entity?.landed)" <VnLv
/> :label="t('order.summary.landed')"
<VnLv :label="t('order.summary.phone')"> :value="toDateHour(entity?.landed)"
<template #value> />
{{ dashIfEmpty(entity?.address?.phone) }} <VnLv :label="t('order.summary.phone')">
<a <template #value>
v-if="entity?.address?.phone" {{ dashIfEmpty(entity?.address?.phone) }}
:href="`tel:${entity?.address?.phone}`" <a
class="text-primary" v-if="entity?.address?.phone"
> :href="`tel:${entity?.address?.phone}`"
<QIcon name="phone" /> class="text-primary"
</a> >
</template> <QIcon name="phone" />
</VnLv> </a>
<VnLv </template>
:label="t('order.summary.createdFrom')" </VnLv>
:value="entity?.sourceApp" <VnLv
/> :label="t('order.summary.createdFrom')"
<VnLv :value="entity?.sourceApp"
:label="t('order.summary.address')" />
:value="`${entity?.address?.street} - ${entity?.address?.city} (${entity?.address?.province?.name})`" <VnLv
class="order-summary-address" :label="t('order.summary.address')"
/> :value="`${entity?.address?.street} - ${entity?.address?.city} (${entity?.address?.province?.name})`"
</QCard> class="order-summary-address"
<QCard class="vn-one"> />
<p class="header"> </QCard>
{{ t('order.summary.notes') }} <QCard class="vn-one">
</p> <p class="header">
<p v-if="entity?.note" class="no-margin"> {{ t('order.summary.notes') }}
{{ entity?.note }} </p>
</p> <p v-if="entity?.note" class="no-margin">
</QCard> {{ entity?.note }}
<QCard class="vn-one"> </p>
<VnLv> </QCard>
<template #label> <QCard class="vn-one">
<span class="text-h6">{{ t('order.summary.subtotal') }}</span> <VnLv>
</template> <template #label>
<template #value> <span class="text-h6">{{ t('order.summary.subtotal') }}</span>
<span class="text-h6">{{ toCurrency(entity?.subTotal) }}</span> </template>
</template> <template #value>
</VnLv> <span class="text-h6">{{
<VnLv> toCurrency(entity?.subTotal)
<template #label> }}</span>
<span class="text-h6">{{ t('order.summary.vat') }}</span> </template>
</template> </VnLv>
<template #value> <VnLv>
<span class="text-h6">{{ toCurrency(entity?.VAT) }}</span> <template #label>
</template> <span class="text-h6">{{ t('order.summary.vat') }}</span>
</VnLv> </template>
<VnLv> <template #value>
<template #label> <span class="text-h6">{{ toCurrency(entity?.VAT) }}</span>
<span class="text-h6">{{ t('order.summary.total') }}</span> </template>
</template> </VnLv>
<template #value> <VnLv>
<span class="text-h6">{{ toCurrency(entity?.total) }}</span> <template #label>
</template> <span class="text-h6">{{ t('order.summary.total') }}</span>
</VnLv> </template>
</QCard> <template #value>
<QCard> <span class="text-h6">{{ toCurrency(entity?.total) }}</span>
<p class="header"> </template>
{{ t('order.summary.details') }} </VnLv>
</p> </QCard>
<QTable <QCard>
:columns="detailsColumns" <p class="header">
:rows="entity?.rows" {{ t('order.summary.details') }}
flat </p>
hide-pagination <QTable
> :columns="detailsColumns"
<template #header="props"> :rows="entity?.rows"
<QTr :props="props"> flat
<QTh auto-width>{{ t('order.summary.item') }}</QTh> hide-pagination
<QTh>{{ t('order.summary.description') }}</QTh> >
<QTh auto-width>{{ t('order.summary.quantity') }}</QTh> <template #header="props">
<QTh auto-width>{{ t('order.summary.price') }}</QTh> <QTr :props="props">
<QTh auto-width>{{ t('order.summary.amount') }}</QTh> <QTh auto-width>{{ t('order.summary.item') }}</QTh>
</QTr> <QTh>{{ t('order.summary.description') }}</QTh>
</template> <QTh auto-width>{{ t('order.summary.quantity') }}</QTh>
<template #body="props"> <QTh auto-width>{{ t('order.summary.price') }}</QTh>
<QTr :props="props"> <QTh auto-width>{{ t('order.summary.amount') }}</QTh>
<QTd key="item" :props="props" class="item"> </QTr>
{{ props.row.item?.id }} </template>
</QTd> <template #body="props">
<QTd key="description" :props="props" class="description"> <QTr :props="props">
<div class="name"> <QTd key="item" :props="props" class="item">
<span>{{ props.row.item.name }}</span> {{ props.row.item?.id }}
<span v-if="props.row.item.subName" class="subName"> </QTd>
{{ props.row.item.subName }} <QTd key="description" :props="props" class="description">
</span> <div class="name">
</div> <span>{{ props.row.item.name }}</span>
<fetched-tags :item="props.row.item" :max-length="5" /> <span
</QTd> v-if="props.row.item.subName"
<QTd key="quantity" :props="props"> class="subName"
{{ props.row.quantity }} >
</QTd> {{ props.row.item.subName }}
<QTd key="price" :props="props"> </span>
{{ props.row.price }} </div>
</QTd> <fetched-tags
<QTd key="amount" :props="props"> :item="props.row.item"
{{ toCurrency(props.row?.quantity * props.row?.price) }} :max-length="5"
</QTd> />
</QTr> </QTd>
</template> <QTd key="quantity" :props="props">
</QTable> {{ props.row.quantity }}
</QCard> </QTd>
</template> <QTd key="price" :props="props">
</CardSummary> {{ props.row.price }}
</QTd>
<QTd key="amount" :props="props">
{{
toCurrency(props.row?.quantity * props.row?.price)
}}
</QTd>
</QTr>
</template>
</QTable>
</QCard>
</template>
</CardSummary>
</div>
</template> </template>
<style lang="scss"> <style lang="scss">
.cardSummary .summaryBody .vn-label-value.order-summary-address { .cardSummary .summaryBody .vn-label-value.order-summary-address {

View File

@ -1,7 +1,7 @@
<script setup> <script setup>
import { useStateStore } from 'stores/useStateStore'; import { useStateStore } from 'stores/useStateStore';
import { useRoute } from 'vue-router'; import { useRoute } from 'vue-router';
import { onMounted, onUnmounted } from 'vue'; import {onMounted, onUnmounted, ref} from 'vue';
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 VnSearchbar from 'components/ui/VnSearchbar.vue'; import VnSearchbar from 'components/ui/VnSearchbar.vue';
@ -20,11 +20,21 @@ const catalogParams = {
orderBy: JSON.stringify({ field: 'relevancy DESC, name', way: 'ASC', isTag: false }), orderBy: JSON.stringify({ field: 'relevancy DESC, name', way: 'ASC', isTag: false }),
}; };
function exprBuilder(param, value) { const tags = ref([])
switch (param) {
case 'search': function extractTags(items) {
return { 'i.name': { like: `%${value}%` } }; const resultTags = [];
} (items || []).forEach((item) => {
(item.tags || []).forEach((tag) => {
const index = resultTags.findIndex((item) => item.tagFk === tag.tagFk);
if (index === -1) {
resultTags.push({ ...tag, priority: 1 });
} else {
resultTags[index].priority += 1;
}
});
});
tags.value = resultTags
} }
</script> </script>
@ -35,8 +45,8 @@ function exprBuilder(param, value) {
url="Orders/CatalogFilter" url="Orders/CatalogFilter"
:limit="50" :limit="50"
:user-params="catalogParams" :user-params="catalogParams"
:expr-builder="exprBuilder"
:static-params="['orderFk', 'orderBy']" :static-params="['orderFk', 'orderBy']"
:redirect="false"
/> />
</Teleport> </Teleport>
<Teleport v-if="stateStore.isHeaderMounted()" to="#actions-append"> <Teleport v-if="stateStore.isHeaderMounted()" to="#actions-append">
@ -56,7 +66,7 @@ function exprBuilder(param, value) {
</Teleport> </Teleport>
<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">
<OrderCatalogFilter data-key="OrderCatalogList" /> <OrderCatalogFilter data-key="OrderCatalogList" :tags="tags" />
</QScrollArea> </QScrollArea>
</QDrawer> </QDrawer>
<QPage class="column items-center q-pa-md"> <QPage class="column items-center q-pa-md">
@ -67,9 +77,13 @@ function exprBuilder(param, value) {
:limit="50" :limit="50"
:user-params="catalogParams" :user-params="catalogParams"
auto-load auto-load
@on-fetch="extractTags"
> >
<template #body="{ rows }"> <template #body="{ rows }">
<div class="catalog-list"> <div class="catalog-list">
<div v-if="rows && !rows?.length" class="no-result">
{{ t('globals.noResults') }}
</div>
<OrderCatalogItem v-for="row in rows" :key="row.id" :item="row" /> <OrderCatalogItem v-for="row in rows" :key="row.id" :item="row" />
</div> </div>
</template> </template>
@ -78,7 +92,7 @@ function exprBuilder(param, value) {
</QPage> </QPage>
</template> </template>
<style lang="scss"> <style lang="scss" scoped>
.card-list { .card-list {
width: 100%; width: 100%;
} }
@ -90,4 +104,11 @@ function exprBuilder(param, value) {
justify-content: center; justify-content: center;
gap: 16px; gap: 16px;
} }
.no-result {
font-size: 24px;
font-weight: bold;
color: var(--vn-label);
text-align: center;
}
</style> </style>

View File

@ -0,0 +1,295 @@
<script setup>
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { ref } from 'vue';
import { useQuasar } from 'quasar';
import VnPaginate from 'components/ui/VnPaginate.vue';
import FetchData from 'components/FetchData.vue';
import VnLv from 'components/ui/VnLv.vue';
import CardList from 'components/ui/CardList.vue';
import FetchedTags from 'components/ui/FetchedTags.vue';
import VnConfirm from 'components/ui/VnConfirm.vue';
import { toCurrency, toDate } from 'src/filters';
import { useSession } from 'composables/useSession';
import axios from 'axios';
const route = useRoute();
const { t } = useI18n();
const session = useSession();
const quasar = useQuasar();
const token = session.getToken();
const orderSummary = ref({
total: null,
vat: null,
});
const componentKey = ref(0);
const order = ref(0);
const refresh = () => {
componentKey.value += 1;
};
function confirmRemove(item) {
quasar.dialog({
component: VnConfirm,
componentProps: {
title: t('confirmDeletion'),
message: t('confirmDeletionMessage'),
promise: async () => remove(item),
},
});
}
async function remove(item) {
await axios.post('OrderRows/removes', {
actualOrderId: route.params.id,
rows: [item.id],
});
quasar.notify({
message: t('globals.dataDeleted'),
type: 'positive',
});
refresh();
}
async function confirmOrder() {
await axios.post(`Orders/${route.params.id}/confirm`);
quasar.notify({
message: t('globals.confirm'),
type: 'positive',
});
}
</script>
<template>
<FetchData
:key="componentKey"
:url="`Orders/${route.params.id}`"
@on-fetch="(data) => (order = data)"
auto-load
/>
<FetchData
:key="componentKey"
:url="`Orders/${route.params.id}/getTotal`"
@on-fetch="(data) => (orderSummary.total = data)"
auto-load
/>
<FetchData
:key="componentKey"
:url="`Orders/${route.params.id}/getVAT`"
@on-fetch="(data) => (orderSummary.vat = data)"
auto-load
/>
<QPage :key="componentKey" class="column items-center q-pa-md">
<div class="card-list">
<div v-if="!orderSummary.total" class="no-result">
{{ t('globals.noResults') }}
</div>
<QCard v-else class="order-lines-summary q-pa-lg">
<p class="header text-right block">
{{ t('summary') }}
</p>
<VnLv
v-if="orderSummary.vat && orderSummary.total"
:label="t('subtotal')"
:value="toCurrency(orderSummary.total - orderSummary.vat)"
/>
<VnLv
v-if="orderSummary.vat"
:label="t('VAT')"
:value="toCurrency(orderSummary?.vat)"
/>
<VnLv
v-if="orderSummary.total"
:label="t('total')"
:value="toCurrency(orderSummary?.total)"
/>
</QCard>
<VnPaginate
data-key="OrderLines"
url="OrderRows"
:limit="20"
auto-load
:filter="{
include: [
{
relation: 'item',
},
{
relation: 'warehouse',
},
],
where: { orderFk: route.params.id },
}"
>
<template #body="{ rows }">
<div class="catalog-list q-mt-xl">
<CardList
v-for="row in rows"
:key="row.id"
:id="row.id"
:title="row?.item?.name"
class="cursor-inherit"
>
<template #title>
<div class="flex items-center">
<div class="image-wrapper q-mr-md">
<QImg
:src="`/api/Images/catalog/50x50/${row?.item?.id}/download?access_token=${token}`"
spinner-color="primary"
:ratio="1"
height="50"
width="50"
class="image"
/>
</div>
<div
class="title text-primary text-weight-bold text-h5"
>
{{ row?.item?.name }}
</div>
<QChip class="q-chip-color" outline size="sm">
{{ t('ID') }}: {{ row.id }}
</QChip>
</div>
</template>
<template #list-items>
<div class="q-mb-sm">
<span class="text-uppercase subname">
{{ row.item.subName }}
</span>
<fetched-tags :item="row.item" :max-length="5" />
</div>
<VnLv :label="t('item')" :value="String(row.item.id)" />
<VnLv
:label="t('warehouse')"
:value="row.warehouse.name"
/>
<VnLv
:label="t('shipped')"
:value="toDate(row.shipped)"
/>
<VnLv
:label="t('quantity')"
:value="String(row.quantity)"
/>
<VnLv
:label="t('price')"
:value="toCurrency(row.price)"
/>
<VnLv
:label="t('amount')"
:value="toCurrency(row.price * row.quantity)"
/>
</template>
<template #actions v-if="!order?.isConfirmed">
<QBtn
:label="t('remove')"
@click.stop="confirmRemove(row)"
color="primary"
style="margin-top: 15px"
/>
</template>
</CardList>
</div>
</template>
</VnPaginate>
</div>
<QPageSticky :offset="[20, 20]" v-if="!order?.isConfirmed">
<QBtn fab icon="check" color="primary" @click="confirmOrder()" />
<QTooltip>
{{ t('confirm') }}
</QTooltip>
</QPageSticky>
</QPage>
</template>
<style lang="scss">
.order-lines-summary {
.vn-label-value {
display: flex;
justify-content: flex-end;
gap: 2%;
.label {
color: var(--vn-label);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.value {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
</style>
<style lang="scss" scoped>
.card-list {
width: 100%;
max-width: 60em;
}
.header {
color: $primary;
font-weight: bold;
margin-bottom: 25px;
font-size: 20px;
display: inline-block;
}
.image-wrapper {
height: 50px;
width: 50px;
.image {
border-radius: 50%;
}
}
.subname {
color: var(--vn-label);
}
.no-result {
font-size: 24px;
font-weight: bold;
color: var(--vn-label);
text-align: center;
}
</style>
<i18n>
en:
summary: Summary
subtotal: Subtotal
VAT: VAT
total: Total
item: Item
warehouse: Warehouse
shipped: Shipped
quantity: Quantity
price: Price
amount: Amount
remove: Remove
confirmDeletion: Confirm deletion,
confirmDeletionMessage: Are you sure you want to delete this item?
confirm: Confirm
es:
summary: Resumen
subtotal: Subtotal
VAT: IVA
total: Total
item: Artículo
warehouse: Almacén
shipped: F. envío
quantity: Cantidad
price: Precio
amount: Importe
remove: Eliminar
confirmDeletion: Confirmar eliminación,
confirmDeletionMessage: Seguro que quieres eliminar este artículo?
confirm: Confirmar
</i18n>

View File

@ -1,15 +1,17 @@
<script setup> <script setup>
import { useRoute } from 'vue-router'; import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { ref } from 'vue';
import VnPaginate from 'components/ui/VnPaginate.vue'; import VnPaginate from 'components/ui/VnPaginate.vue';
import FetchData from 'components/FetchData.vue'; import FetchData from 'components/FetchData.vue';
import VnLv from 'components/ui/VnLv.vue'; import VnLv from 'components/ui/VnLv.vue';
import { ref } from 'vue';
import { dashIfEmpty } from 'src/filters';
import CardList from 'components/ui/CardList.vue'; import CardList from 'components/ui/CardList.vue';
import axios from 'axios';
import FetchedTags from 'components/ui/FetchedTags.vue'; import FetchedTags from 'components/ui/FetchedTags.vue';
import { dashIfEmpty } from 'src/filters';
import axios from 'axios';
const route = useRoute(); const route = useRoute();
const { t } = useI18n(); const { t } = useI18n();
const volumeSummary = ref(null); const volumeSummary = ref(null);
@ -34,14 +36,17 @@ const loadVolumes = async (rows) => {
/> />
<QPage class="column items-center q-pa-md"> <QPage class="column items-center q-pa-md">
<div class="card-list"> <div class="card-list">
<QCard class="order-volume-summary q-pa-lg"> <div
v-if="!volumeSummary?.totalVolume && !volumeSummary?.totalBoxes"
class="no-result"
>
{{ t('globals.noResults') }}
</div>
<QCard v-else class="order-volume-summary q-pa-lg">
<p class="header text-right block"> <p class="header text-right block">
{{ t('summary') }} {{ t('summary') }}
</p> </p>
<VnLv <VnLv :label="t('total')" :value="`${volumeSummary?.totalVolume} m³`" />
:label="t('total')"
:value="`${volumeSummary?.totalVolume} m³`"
/>
<VnLv <VnLv
:label="t('boxes')" :label="t('boxes')"
:value="`${dashIfEmpty(volumeSummary?.totalBoxes)} U`" :value="`${dashIfEmpty(volumeSummary?.totalBoxes)} U`"
@ -128,6 +133,13 @@ const loadVolumes = async (rows) => {
font-size: 20px; font-size: 20px;
display: inline-block; display: inline-block;
} }
.no-result {
font-size: 24px;
font-weight: bold;
color: var(--vn-label);
text-align: center;
}
</style> </style>
<i18n> <i18n>
en: en:

View File

@ -150,7 +150,7 @@ function downloadPdfs() {
<QIcon <QIcon
name="visibility" name="visibility"
color="primary" color="primary"
size="2em" size="md"
class="q-mr-sm q-ml-sm" class="q-mr-sm q-ml-sm"
/> />
<QTooltip> <QTooltip>

View File

@ -53,7 +53,7 @@ const isAdministrative = computed(() => {
> >
<template #header-left> <template #header-left>
<a v-if="isAdministrative" class="header link" :href="supplierUrl"> <a v-if="isAdministrative" class="header link" :href="supplierUrl">
<QIcon name="open_in_new" color="white" size="25px" /> <QIcon name="open_in_new" color="white" size="sm" />
</a> </a>
</template> </template>
<template #header> <template #header>

View File

@ -195,7 +195,7 @@ const openEntryDescriptor = () => {};
> >
<template #header-left> <template #header-left>
<a class="header link" :href="travelUrl"> <a class="header link" :href="travelUrl">
<QIcon name="open_in_new" color="white" size="25px" /> <QIcon name="open_in_new" color="white" size="sm" />
</a> </a>
</template> </template>
<template #header> <template #header>

View File

@ -103,111 +103,109 @@ const tableColumnComponents = {
}, },
}; };
const columns = computed(() => { const columns = computed(() => [
return [ {
{ label: 'id',
label: 'id', field: 'id',
field: 'id', name: 'id',
name: 'id', align: 'left',
align: 'left', showValue: true,
showValue: true, },
}, {
{ label: t('supplier.pageTitles.supplier'),
label: t('supplier.pageTitles.supplier'), field: 'cargoSupplierNickname',
field: 'cargoSupplierNickname', name: 'cargoSupplierNickname',
name: 'cargoSupplierNickname', align: 'left',
align: 'left', showValue: true,
showValue: true, },
}, {
{ label: t('globals.agency'),
label: t('globals.agency'), field: 'agencyModeName',
field: 'agencyModeName', name: 'agencyModeName',
name: 'agencyModeName', align: 'left',
align: 'left', showValue: true,
showValue: true, },
}, {
{ label: t('globals.amount'),
label: t('globals.amount'), name: 'invoiceAmount',
name: 'invoiceAmount', field: 'entries',
field: 'entries', align: 'left',
align: 'left', showValue: true,
showValue: true, format: (value) =>
format: (value) => toCurrency(
toCurrency( value
value ? value.reduce((sum, entry) => {
? value.reduce((sum, entry) => { return sum + (entry.invoiceAmount || 0);
return sum + (entry.invoiceAmount || 0); }, 0)
}, 0) : 0
: 0 ),
), },
}, {
{ label: t('globals.reference'),
label: t('globals.reference'), field: 'ref',
field: 'ref', name: 'ref',
name: 'ref', align: 'left',
align: 'left', showValue: false,
showValue: false, },
}, {
{ label: t('globals.packages'),
label: t('globals.packages'), field: 'stickers',
field: 'stickers', name: 'stickers',
name: 'stickers', align: 'left',
align: 'left', showValue: true,
showValue: true, },
}, {
{ label: t('kg'),
label: t('kg'), field: 'kg',
field: 'kg', name: 'kg',
name: 'kg', align: 'left',
align: 'left', showValue: true,
showValue: true, },
}, {
{ label: t('physicKg'),
label: t('physicKg'), field: 'loadedKg',
field: 'loadedKg', name: 'loadedKg',
name: 'loadedKg', align: 'left',
align: 'left', showValue: true,
showValue: true, },
}, {
{ label: 'KG Vol.',
label: 'KG Vol.', field: 'volumeKg',
field: 'volumeKg', name: 'volumeKg',
name: 'volumeKg', align: 'left',
align: 'left', showValue: true,
showValue: true, },
}, {
{ label: t('globals.wareHouseOut'),
label: t('globals.wareHouseOut'), field: 'warehouseOutName',
field: 'warehouseOutName', name: 'warehouseOutName',
name: 'warehouseOutName', align: 'left',
align: 'left', showValue: true,
showValue: true, },
}, {
{ label: t('shipped'),
label: t('shipped'), field: 'shipped',
field: 'shipped', name: 'shipped',
name: 'shipped', align: 'left',
align: 'left', format: (value) => toDate(value.substring(0, 10)),
format: (value) => toDate(value.substring(0, 10)), showValue: true,
showValue: true, },
}, {
{ label: t('globals.wareHouseIn'),
label: t('globals.wareHouseIn'), field: 'warehouseInName',
field: 'warehouseInName', name: 'warehouseInName',
name: 'warehouseInName', align: 'left',
align: 'left', showValue: true,
showValue: true, },
}, {
{ label: t('landed'),
label: t('landed'), field: 'landed',
field: 'landed', name: 'landed',
name: 'landed', align: 'left',
align: 'left', format: (value) => toDate(value.substring(0, 10)),
format: (value) => toDate(value.substring(0, 10)), showValue: true,
showValue: true, },
}, ]);
];
});
async function getData() { async function getData() {
await arrayData.fetch({ append: false }); await arrayData.fetch({ append: false });

View File

@ -1,5 +1,5 @@
<script setup> <script setup>
import { reactive, ref } from 'vue'; import { ref } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import FetchData from 'components/FetchData.vue'; import FetchData from 'components/FetchData.vue';

View File

@ -309,8 +309,8 @@ function exceedMaxHeight(pos) {
</div> </div>
</div> </div>
<div class="q-mb-sm wheels"> <div class="q-mb-sm wheels">
<QIcon color="grey-6" name="trip_origin" size="3rem" /> <QIcon color="grey-6" name="trip_origin" size="xl" />
<QIcon color="grey-6" name="trip_origin" size="3rem" /> <QIcon color="grey-6" name="trip_origin" size="xl" />
</div> </div>
<QDialog <QDialog
v-model="colorPickerActive" v-model="colorPickerActive"

View File

@ -17,7 +17,22 @@ export default {
'CustomerNotifications', 'CustomerNotifications',
'CustomerDefaulter', 'CustomerDefaulter',
], ],
card: ['CustomerBasicData'], card: [
'CustomerBasicData',
'CustomerFiscalData',
'CustomerBillingData',
'CustomerConsignees',
'CustomerNotes',
'CustomerCredits',
'CustomerGreuges',
'CustomerBalance',
'CustomerRecoveries',
'CustomerWebAccess',
'CustomerLog',
'CustomerSms',
'CustomerCreditManagement',
'CustomerOthers',
],
}, },
children: [ children: [
{ {
@ -115,6 +130,132 @@ export default {
component: () => component: () =>
import('src/pages/Customer/Card/CustomerBasicData.vue'), import('src/pages/Customer/Card/CustomerBasicData.vue'),
}, },
{
path: 'fiscal-data',
name: 'CustomerFiscalData',
meta: {
title: 'fiscalData',
icon: 'vn:dfiscales',
},
component: () =>
import('src/pages/Customer/Card/CustomerFiscalData.vue'),
},
{
path: 'billing-data',
name: 'CustomerBillingData',
meta: {
title: 'billingData',
icon: 'vn:payment',
},
component: () =>
import('src/pages/Customer/Card/CustomerBillingData.vue'),
},
{
path: 'consignees',
name: 'CustomerConsignees',
meta: {
title: 'consignees',
icon: 'vn:delivery',
},
component: () =>
import('src/pages/Customer/Card/CustomerConsignees.vue'),
},
{
path: 'notes',
name: 'CustomerNotes',
meta: {
title: 'notes',
icon: 'vn:notes',
},
component: () => import('src/pages/Customer/Card/CustomerNotes.vue'),
},
{
path: 'credits',
name: 'CustomerCredits',
meta: {
title: 'credits',
icon: 'vn:credit',
},
component: () =>
import('src/pages/Customer/Card/CustomerCredits.vue'),
},
{
path: 'greuges',
name: 'CustomerGreuges',
meta: {
title: 'greuges',
icon: 'vn:greuge',
},
component: () =>
import('src/pages/Customer/Card/CustomerGreuges.vue'),
},
{
path: 'balance',
name: 'CustomerBalance',
meta: {
title: 'balance',
icon: 'vn:invoice',
},
component: () =>
import('src/pages/Customer/Card/CustomerBalance.vue'),
},
{
path: 'recoveries',
name: 'CustomerRecoveries',
meta: {
title: 'recoveries',
icon: 'vn:recovery',
},
component: () =>
import('src/pages/Customer/Card/CustomerRecoveries.vue'),
},
{
path: 'web-access',
name: 'CustomerWebAccess',
meta: {
title: 'webAccess',
icon: 'vn:web',
},
component: () =>
import('src/pages/Customer/Card/CustomerWebAccess.vue'),
},
{
path: 'log',
name: 'CustomerLog',
meta: {
title: 'log',
icon: 'vn:History',
},
component: () => import('src/pages/Customer/Card/CustomerLog.vue'),
},
{
path: 'sms',
name: 'CustomerSms',
meta: {
title: 'sms',
icon: 'sms',
},
component: () => import('src/pages/Customer/Card/CustomerSms.vue'),
},
{
path: 'credit-management',
name: 'CustomerCreditManagement',
meta: {
title: 'creditManagement',
icon: 'paid',
},
component: () =>
import('src/pages/Customer/Card/CustomerCreditManagement.vue'),
},
{
path: 'others',
name: 'CustomerOthers',
meta: {
title: 'others',
icon: 'pending',
},
component: () => import('src/pages/Customer/Card/CustomerOthers.vue'),
},
], ],
}, },
], ],

View File

@ -11,7 +11,7 @@ export default {
redirect: { name: 'OrderMain' }, redirect: { name: 'OrderMain' },
menus: { menus: {
main: ['OrderList'], main: ['OrderList'],
card: ['OrderBasicData', 'OrderCatalog', 'OrderVolume'], card: ['OrderBasicData', 'OrderCatalog', 'OrderVolume', 'OrderLines'],
}, },
children: [ children: [
{ {
@ -81,6 +81,15 @@ export default {
}, },
component: () => import('src/pages/Order/OrderVolume.vue'), component: () => import('src/pages/Order/OrderVolume.vue'),
}, },
{
name: 'OrderLines',
path: 'line',
meta: {
title: 'lines',
icon: 'vn:lines',
},
component: () => import('src/pages/Order/OrderLines.vue'),
},
], ],
}, },
], ],