forked from verdnatura/salix-front
Merge branch 'branch-PR-2' of https://gitea.verdnatura.es/hyervoni/salix-front-mindshore into hyervoni-branch-PR-2
This commit is contained in:
commit
bc8b9501c0
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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" />
|
||||||
|
|
|
@ -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">
|
||||||
|
|
|
@ -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">
|
||||||
|
|
|
@ -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 />
|
||||||
|
|
|
@ -0,0 +1,7 @@
|
||||||
|
<script setup></script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<QChip class="text-dark" color="primary" icon="label" size="sm" v-bind="$attrs">
|
||||||
|
<slot />
|
||||||
|
</QChip>
|
||||||
|
</template>
|
|
@ -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') }}
|
||||||
|
|
|
@ -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: ' *';
|
||||||
|
}
|
||||||
|
|
|
@ -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];
|
||||||
|
}
|
|
@ -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,
|
||||||
};
|
};
|
||||||
|
|
|
@ -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',
|
||||||
|
|
|
@ -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',
|
||||||
|
|
|
@ -0,0 +1,3 @@
|
||||||
|
<template>
|
||||||
|
<div class="flex justify-center">Balance</div>
|
||||||
|
</template>
|
|
@ -0,0 +1,3 @@
|
||||||
|
<template>
|
||||||
|
<div class="flex justify-center">Billing data</div>
|
||||||
|
</template>
|
|
@ -0,0 +1,3 @@
|
||||||
|
<template>
|
||||||
|
<div class="flex justify-center">Consignees</div>
|
||||||
|
</template>
|
|
@ -0,0 +1,3 @@
|
||||||
|
<template>
|
||||||
|
<div class="flex justify-center">Credit management</div>
|
||||||
|
</template>
|
|
@ -0,0 +1,3 @@
|
||||||
|
<template>
|
||||||
|
<div class="flex justify-center">Credits</div>
|
||||||
|
</template>
|
|
@ -0,0 +1,3 @@
|
||||||
|
<template>
|
||||||
|
<div class="flex justify-center">Fiscal data</div>
|
||||||
|
</template>
|
|
@ -0,0 +1,3 @@
|
||||||
|
<template>
|
||||||
|
<div class="flex justify-center">Greuges</div>
|
||||||
|
</template>
|
|
@ -0,0 +1,3 @@
|
||||||
|
<template>
|
||||||
|
<div class="flex justify-center">Log</div>
|
||||||
|
</template>
|
|
@ -0,0 +1,3 @@
|
||||||
|
<template>
|
||||||
|
<div class="flex justify-center">Notes</div>
|
||||||
|
</template>
|
|
@ -0,0 +1,3 @@
|
||||||
|
<template>
|
||||||
|
<div class="flex justify-center">Others</div>
|
||||||
|
</template>
|
|
@ -0,0 +1,3 @@
|
||||||
|
<template>
|
||||||
|
<div class="flex justify-center">Recoveries</div>
|
||||||
|
</template>
|
|
@ -0,0 +1,3 @@
|
||||||
|
<template>
|
||||||
|
<div class="flex justify-center">Sms</div>
|
||||||
|
</template>
|
|
@ -0,0 +1,3 @@
|
||||||
|
<template>
|
||||||
|
<div class="flex justify-center">Web access</div>
|
||||||
|
</template>
|
|
@ -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') }}: </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>
|
|
@ -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>
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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">
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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 [];
|
||||||
|
|
|
@ -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>
|
|
|
@ -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>
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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>
|
||||||
|
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
|
@ -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:
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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 });
|
||||||
|
|
|
@ -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';
|
||||||
|
|
|
@ -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"
|
||||||
|
|
|
@ -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'),
|
||||||
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
|
|
@ -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'),
|
||||||
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
|
Loading…
Reference in New Issue