forked from verdnatura/salix-front
Merge branch 'dev' into 7346-invoiceOutMultilple
This commit is contained in:
commit
defb11a6d7
|
@ -26,7 +26,10 @@ const url = computed(() => {
|
|||
if (props.baseUrl) return `${props.baseUrl}/${route.params.id}`;
|
||||
return props.customUrl;
|
||||
});
|
||||
|
||||
const searchRightDataKey = computed(() => {
|
||||
if (!props.searchDataKey) return route.name;
|
||||
return props.searchDataKey;
|
||||
});
|
||||
const arrayData = useArrayData(props.dataKey, {
|
||||
url: url.value,
|
||||
filter: props.filter,
|
||||
|
@ -62,10 +65,9 @@ if (props.baseUrl) {
|
|||
<slot name="searchbar" v-if="props.searchDataKey">
|
||||
<VnSearchbar :data-key="props.searchDataKey" v-bind="props.searchbarProps" />
|
||||
</slot>
|
||||
<slot v-else name="searchbar" />
|
||||
<RightMenu>
|
||||
<template #right-panel v-if="props.filterPanel">
|
||||
<component :is="props.filterPanel" :data-key="props.searchDataKey" />
|
||||
<component :is="props.filterPanel" :data-key="searchRightDataKey" />
|
||||
</template>
|
||||
</RightMenu>
|
||||
<QPageContainer>
|
||||
|
|
|
@ -111,6 +111,7 @@ watch(
|
|||
|
||||
const isLoading = ref(false);
|
||||
async function search(evt) {
|
||||
try {
|
||||
if (evt && $props.disableSubmitEvent) return;
|
||||
|
||||
store.filter.where = {};
|
||||
|
@ -123,9 +124,10 @@ async function search(evt) {
|
|||
userParams.value = newParams;
|
||||
|
||||
if (!$props.showAll && !Object.values(filter).length) store.data = [];
|
||||
|
||||
isLoading.value = false;
|
||||
emit('search');
|
||||
} finally {
|
||||
isLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function reload() {
|
||||
|
@ -140,6 +142,7 @@ async function reload() {
|
|||
}
|
||||
|
||||
async function clearFilters() {
|
||||
try {
|
||||
isLoading.value = true;
|
||||
store.userParamsChanged = true;
|
||||
arrayData.reset(['skip', 'filter.skip', 'page']);
|
||||
|
@ -159,10 +162,11 @@ async function clearFilters() {
|
|||
if (!$props.showAll) {
|
||||
store.data = [];
|
||||
}
|
||||
|
||||
isLoading.value = false;
|
||||
emit('clear');
|
||||
emit('update:modelValue', userParams.value);
|
||||
} finally {
|
||||
isLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
const tagsList = computed(() => {
|
||||
|
|
|
@ -104,9 +104,7 @@ onMounted(() => {
|
|||
});
|
||||
|
||||
async function search() {
|
||||
const staticParams = Object.entries(store.userParams).filter(
|
||||
([key, value]) => value && (props.staticParams || []).includes(key)
|
||||
);
|
||||
const staticParams = Object.entries(store.userParams);
|
||||
arrayData.reset(['skip', 'page']);
|
||||
|
||||
if (props.makeFetch)
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<script setup>
|
||||
import { watch, computed } from 'vue';
|
||||
import { computed } from 'vue';
|
||||
import { date } from 'quasar';
|
||||
import VnPaginate from 'src/components/ui/VnPaginate.vue';
|
||||
import VnAvatar from '../ui/VnAvatar.vue';
|
||||
|
|
|
@ -264,3 +264,10 @@ input::-webkit-inner-spin-button {
|
|||
max-width: 400px;
|
||||
}
|
||||
}
|
||||
.edit-photo-btn {
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
bottom: 12px;
|
||||
z-index: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
|
@ -0,0 +1,21 @@
|
|||
// parsing JSON safely
|
||||
function parseJSON(str, fallback) {
|
||||
try {
|
||||
return JSON.parse(str ?? '{}');
|
||||
} catch (e) {
|
||||
console.error('Error parsing JSON:', e);
|
||||
return fallback;
|
||||
}
|
||||
}
|
||||
export default function (route, param) {
|
||||
// catch route query params
|
||||
const params = parseJSON(route?.query?.params, {});
|
||||
|
||||
// extract and parse filter from params
|
||||
const { filter: filterStr = '{}' } = params;
|
||||
const where = parseJSON(filterStr, {})?.where;
|
||||
if (where && where[param] !== undefined) {
|
||||
return where[param];
|
||||
}
|
||||
return null;
|
||||
}
|
|
@ -11,6 +11,7 @@ import dashIfEmpty from './dashIfEmpty';
|
|||
import dateRange from './dateRange';
|
||||
import toHour from './toHour';
|
||||
import dashOrCurrency from './dashOrCurrency';
|
||||
import getParamWhere from './getParamWhere';
|
||||
|
||||
export {
|
||||
toLowerCase,
|
||||
|
@ -26,4 +27,5 @@ export {
|
|||
toPercentage,
|
||||
dashIfEmpty,
|
||||
dateRange,
|
||||
getParamWhere,
|
||||
};
|
||||
|
|
|
@ -93,6 +93,7 @@ globals:
|
|||
since: Since
|
||||
from: From
|
||||
to: To
|
||||
notes: Notes
|
||||
pageTitles:
|
||||
logIn: Login
|
||||
summary: Summary
|
||||
|
|
|
@ -93,6 +93,7 @@ globals:
|
|||
since: Desde
|
||||
from: Desde
|
||||
to: Hasta
|
||||
notes: Notas
|
||||
pageTitles:
|
||||
logIn: Inicio de sesión
|
||||
summary: Resumen
|
||||
|
|
|
@ -6,7 +6,6 @@ import axios from 'axios';
|
|||
import useNotify from 'src/composables/useNotify.js';
|
||||
import { useQuasar } from 'quasar';
|
||||
|
||||
import FetchData from 'components/FetchData.vue';
|
||||
import VnTable from 'components/VnTable/VnTable.vue';
|
||||
import VnSearchbar from 'components/ui/VnSearchbar.vue';
|
||||
import VnConfirm from 'components/ui/VnConfirm.vue';
|
||||
|
@ -24,7 +23,6 @@ const stateStore = useStateStore();
|
|||
const quasar = useQuasar();
|
||||
|
||||
const tableRef = ref();
|
||||
const rolesOptions = ref([]);
|
||||
|
||||
const exprBuilder = (param, value) => {
|
||||
switch (param) {
|
||||
|
|
|
@ -1,15 +1,12 @@
|
|||
<script setup>
|
||||
import axios from 'axios';
|
||||
import { computed, ref, toRefs } from 'vue';
|
||||
import { useQuasar } from 'quasar';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useVnConfirm } from 'composables/useVnConfirm';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { useArrayData } from 'src/composables/useArrayData';
|
||||
import CustomerChangePassword from 'src/pages/Customer/components/CustomerChangePassword.vue';
|
||||
import VnConfirm from 'src/components/ui/VnConfirm.vue';
|
||||
import useNotify from 'src/composables/useNotify.js';
|
||||
const quasar = useQuasar();
|
||||
const $props = defineProps({
|
||||
hasAccount: {
|
||||
type: Boolean,
|
||||
|
@ -35,7 +32,7 @@ async function updateStatusAccount(active) {
|
|||
|
||||
account.value.hasAccount = active;
|
||||
const status = active ? 'enable' : 'disable';
|
||||
quasar.notify({
|
||||
notify({
|
||||
message: t(`account.card.${status}Account.success`),
|
||||
type: 'positive',
|
||||
});
|
||||
|
@ -44,19 +41,11 @@ async function updateStatusUser(active) {
|
|||
await axios.patch(`VnUsers/${entityId.value}`, { active });
|
||||
account.value.active = active;
|
||||
const status = active ? 'activate' : 'deactivate';
|
||||
quasar.notify({
|
||||
notify({
|
||||
message: t(`account.card.actions.${status}User.success`),
|
||||
type: 'positive',
|
||||
});
|
||||
}
|
||||
function setPassword() {
|
||||
quasar.dialog({
|
||||
component: CustomerChangePassword,
|
||||
componentProps: {
|
||||
id: entityId.value,
|
||||
},
|
||||
});
|
||||
}
|
||||
const showSyncDialog = ref(false);
|
||||
const syncPassword = ref(null);
|
||||
const shouldSyncPassword = ref(false);
|
||||
|
@ -66,20 +55,11 @@ async function sync() {
|
|||
await axios.patch(`Accounts/${account.value.name}/sync`, {
|
||||
params,
|
||||
});
|
||||
quasar.notify({
|
||||
notify({
|
||||
message: t('account.card.actions.sync.success'),
|
||||
type: 'positive',
|
||||
});
|
||||
}
|
||||
|
||||
const removeAccount = async () => {
|
||||
try {
|
||||
await axios.delete(`VnUsers/${account.value.id}`);
|
||||
notify(t('Account removed'), 'positive');
|
||||
} catch (error) {
|
||||
console.error('Error deleting user', error);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<VnConfirm
|
||||
|
@ -112,24 +92,6 @@ const removeAccount = async () => {
|
|||
/>
|
||||
</template>
|
||||
</VnConfirm>
|
||||
<!-- <QItem v-ripple clickable @click="setPassword">
|
||||
<QItemSection>{{ t('account.card.actions.setPassword') }}</QItemSection>
|
||||
</QItem>
|
||||
<QItem
|
||||
v-if="!account.hasAccount"
|
||||
v-ripple
|
||||
clickable
|
||||
@click="
|
||||
openConfirmationModal(
|
||||
t('account.card.actions.enableAccount.title'),
|
||||
t('account.card.actions.enableAccount.subtitle'),
|
||||
() => updateStatusAccount(true)
|
||||
)
|
||||
"
|
||||
>
|
||||
<QItemSection>{{ t('account.card.actions.enableAccount.name') }}</QItemSection>
|
||||
</QItem> -->
|
||||
|
||||
<QItem
|
||||
v-if="account.hasAccount"
|
||||
v-ripple
|
||||
|
@ -178,10 +140,4 @@ const removeAccount = async () => {
|
|||
</QItem>
|
||||
|
||||
<QSeparator />
|
||||
<!-- <QItem @click="removeAccount(id)" v-ripple clickable>
|
||||
<QItemSection avatar>
|
||||
<QIcon name="delete" />
|
||||
</QItemSection>
|
||||
<QItemSection>{{ t('account.card.actions.delete.name') }}</QItemSection>
|
||||
</QItem> -->
|
||||
</template>
|
||||
|
|
|
@ -4,11 +4,9 @@ import { computed, ref } from 'vue';
|
|||
import VnTable from 'components/VnTable/VnTable.vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import VnSearchbar from 'components/ui/VnSearchbar.vue';
|
||||
import { useStateStore } from 'stores/useStateStore';
|
||||
import { useSummaryDialog } from 'src/composables/useSummaryDialog';
|
||||
import RoleSummary from './Card/RoleSummary.vue';
|
||||
const route = useRoute();
|
||||
const stateStore = useStateStore();
|
||||
const { t } = useI18n();
|
||||
const $props = defineProps({
|
||||
id: {
|
||||
|
|
|
@ -78,6 +78,9 @@ const columns = computed(() => [
|
|||
{
|
||||
align: 'left',
|
||||
label: t('claim.state'),
|
||||
format: ({ stateCode }) =>
|
||||
claimFilterRef.value?.states.find(({code}) => code === stateCode)
|
||||
?.description,
|
||||
name: 'stateCode',
|
||||
chip: {
|
||||
condition: () => true,
|
||||
|
|
|
@ -1,8 +1,6 @@
|
|||
<script setup>
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import CustomerConsumptionFilter from './CustomerConsumptionFilter.vue';
|
||||
import { useStateStore } from 'src/stores/useStateStore';
|
||||
const { t } = useI18n();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
|
@ -19,7 +19,7 @@ const props = defineProps({
|
|||
<VnFilterPanel
|
||||
:data-key="props.dataKey"
|
||||
:search-button="true"
|
||||
:unremovable-params="['from', 'to']"
|
||||
:un-removable-params="['from', 'to']"
|
||||
:hidden-tags="['from', 'to']"
|
||||
>
|
||||
<template #tags="{ tag, formatFn }">
|
||||
|
|
|
@ -138,14 +138,6 @@ en:
|
|||
</i18n>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.edit-photo-btn {
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
bottom: 12px;
|
||||
z-index: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.separation-borders {
|
||||
border-left: 1px solid $white;
|
||||
border-right: 1px solid $white;
|
||||
|
|
|
@ -1,8 +1,6 @@
|
|||
<script setup>
|
||||
import { ref, computed, onMounted, reactive } from 'vue';
|
||||
import { ref, computed, reactive } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
import FetchData from 'components/FetchData.vue';
|
||||
import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
|
||||
import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
|
||||
|
@ -11,18 +9,14 @@ import TicketDescriptorProxy from 'src/pages/Ticket/Card/TicketDescriptorProxy.v
|
|||
import InvoiceOutDescriptorProxy from 'src/pages/InvoiceOut/Card/InvoiceOutDescriptorProxy.vue';
|
||||
import ZoneDescriptorProxy from 'src/pages/Zone/Card/ZoneDescriptorProxy.vue';
|
||||
import TicketSummary from 'src/pages/Ticket/Card/TicketSummary.vue';
|
||||
import VnInput from 'src/components/common/VnInput.vue';
|
||||
import VnSelect from 'src/components/common/VnSelect.vue';
|
||||
import VnInputDate from 'src/components/common/VnInputDate.vue';
|
||||
import VnTable from 'components/VnTable/VnTable.vue';
|
||||
|
||||
import { useSummaryDialog } from 'src/composables/useSummaryDialog';
|
||||
import { toDateFormat, toTimeFormat } from 'src/filters/date.js';
|
||||
import { toCurrency, dateRange } from 'src/filters';
|
||||
|
||||
const DEFAULT_AUTO_REFRESH = 1000;
|
||||
const { t } = useI18n();
|
||||
const autoRefresh = ref(false);
|
||||
const router = useRouter();
|
||||
const paginateRef = ref(null);
|
||||
const workersActiveOptions = ref([]);
|
||||
const provincesOptions = ref([]);
|
||||
|
@ -57,46 +51,6 @@ function exprBuilder(param, value) {
|
|||
const filter = { order: ['totalProblems DESC'] };
|
||||
let params = reactive({});
|
||||
|
||||
const applyColumnFilter = async (col) => {
|
||||
try {
|
||||
const paramKey = col.columnFilter?.filterParamKey || col.field;
|
||||
params[paramKey] = col.columnFilter.filterValue;
|
||||
await paginateRef.value.addFilter(null, params);
|
||||
} catch (err) {
|
||||
console.error('Error applying column filter', err);
|
||||
}
|
||||
};
|
||||
|
||||
const getInputEvents = (col) => {
|
||||
return col.columnFilter.type === 'select' || col.columnFilter.type === 'date'
|
||||
? { 'update:modelValue': () => applyColumnFilter(col) }
|
||||
: {
|
||||
'keyup.enter': () => applyColumnFilter(col),
|
||||
};
|
||||
};
|
||||
|
||||
const fetchParams = ($params = {}) => {
|
||||
const excludedParams = ['search', 'clientFk', 'orderFk', 'refFk', 'scopeDays'];
|
||||
|
||||
const hasExcludedParams = excludedParams.some((param) => {
|
||||
return $params && $params[param] != undefined;
|
||||
});
|
||||
const hasParams = Object.entries($params).length;
|
||||
if (!hasParams || !hasExcludedParams) $params.scopeDays = 1;
|
||||
|
||||
if (typeof $params.scopeDays === 'number') {
|
||||
const from = Date.vnNew();
|
||||
from.setHours(0, 0, 0, 0);
|
||||
|
||||
const to = new Date(from.getTime());
|
||||
to.setDate(to.getDate() + $params.scopeDays);
|
||||
to.setHours(23, 59, 59, 999);
|
||||
|
||||
Object.assign($params, { from, to });
|
||||
}
|
||||
return { tableOrder: 'totalProblems DESC', ...$params };
|
||||
};
|
||||
|
||||
const columns = computed(() => [
|
||||
{
|
||||
label: t('salesTicketsTable.problems'),
|
||||
|
@ -379,13 +333,6 @@ const redirectToSales = (id) => {
|
|||
const url = `#/ticket/${id}/sale`;
|
||||
window.open(url, '_blank');
|
||||
};
|
||||
|
||||
// onMounted(async () => {
|
||||
// const filteredColumns = columns.value.filter((col) => col.name !== 'rowActions');
|
||||
// allColumnNames.value = filteredColumns.map((col) => col.name);
|
||||
// params = fetchParams();
|
||||
// await paginateRef.value.addFilter(null, params);
|
||||
// });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<script setup>
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { ref } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import axios from 'axios';
|
||||
|
@ -7,6 +7,7 @@ import { useState } from 'composables/useState';
|
|||
import FormModel from 'components/FormModel.vue';
|
||||
import VnRow from 'components/ui/VnRow.vue';
|
||||
import VnSelect from 'components/common/VnSelect.vue';
|
||||
import VnInput from 'components/common/VnInput.vue';
|
||||
import VnInputDate from 'components/common/VnInputDate.vue';
|
||||
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
|
||||
|
||||
|
@ -15,7 +16,6 @@ const route = useRoute();
|
|||
const state = useState();
|
||||
const ORDER_MODEL = 'order';
|
||||
|
||||
const router = useRouter();
|
||||
const isNew = Boolean(!route.params.id);
|
||||
const clientList = ref([]);
|
||||
const agencyList = ref([]);
|
||||
|
@ -64,13 +64,6 @@ const fetchOrderDetails = (order) => {
|
|||
fetchAgencyList(order?.landed, order?.addressFk);
|
||||
};
|
||||
|
||||
const orderMapper = (order) => {
|
||||
return {
|
||||
addressId: order.addressFk,
|
||||
agencyModeId: order.agencyModeFk,
|
||||
landed: new Date(order.landed).toISOString(),
|
||||
};
|
||||
};
|
||||
const orderFilter = {
|
||||
include: [
|
||||
{ relation: 'agencyMode', scope: { fields: ['name'] } },
|
||||
|
@ -106,10 +99,6 @@ const onClientChange = async (clientId) => {
|
|||
console.error('Error al cambiar el cliente:', error);
|
||||
}
|
||||
};
|
||||
|
||||
async function onDataSaved({ id }) {
|
||||
await router.push({ path: `/order/${id}/catalog` });
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
@ -117,9 +106,8 @@ async function onDataSaved({ id }) {
|
|||
<div class="q-pa-md">
|
||||
<FormModel
|
||||
:url="`Orders/${route.params.id}`"
|
||||
@on-data-saved="onDataSaved"
|
||||
:url-update="`Orders/${route.params.id}/updateBasicData`"
|
||||
:model="ORDER_MODEL"
|
||||
:mapper="orderMapper"
|
||||
:filter="orderFilter"
|
||||
@on-fetch="fetchOrderDetails"
|
||||
auto-load
|
||||
|
@ -180,8 +168,6 @@ async function onDataSaved({ id }) {
|
|||
() => fetchAgencyList(data.landed, data.addressFk)
|
||||
"
|
||||
/>
|
||||
</VnRow>
|
||||
<VnRow>
|
||||
<VnSelect
|
||||
:label="t('order.form.agencyModeFk')"
|
||||
v-model="data.agencyModeFk"
|
||||
|
@ -189,9 +175,29 @@ async function onDataSaved({ id }) {
|
|||
option-value="agencyModeFk"
|
||||
option-label="agencyMode"
|
||||
hide-selected
|
||||
:disable="!agencyList?.length"
|
||||
>
|
||||
</VnSelect>
|
||||
:disable="!agencyList?.length && data.isConfirmed === 1"
|
||||
clearable
|
||||
emit-value
|
||||
map-options
|
||||
:model-value="
|
||||
!data.isConfirmed &&
|
||||
agencyList?.length &&
|
||||
agencyList.some(
|
||||
(agency) => agency.agencyModeFk === data.agency_id
|
||||
)
|
||||
? data.agencyModeFk
|
||||
: null
|
||||
"
|
||||
/>
|
||||
</VnRow>
|
||||
<VnRow>
|
||||
<VnInput
|
||||
:label="t('globals.notes')"
|
||||
type="textarea"
|
||||
v-model="data.note"
|
||||
fill-input
|
||||
autogrow
|
||||
/>
|
||||
</VnRow>
|
||||
</template>
|
||||
</FormModel>
|
|
@ -1,16 +1,35 @@
|
|||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import VnCard from 'components/common/VnCard.vue';
|
||||
import OrderDescriptor from 'pages/Order/Card/OrderDescriptor.vue';
|
||||
import OrderFilter from './OrderFilter.vue';
|
||||
import OrderSearchbar from './OrderSearchbar.vue';
|
||||
import OrderCatalogFilter from './OrderCatalogFilter.vue';
|
||||
const config = {
|
||||
OrderCatalog: OrderCatalogFilter,
|
||||
};
|
||||
const route = useRoute();
|
||||
|
||||
const routeName = computed(() => route.name);
|
||||
const customRouteRedirectName = computed(() => {
|
||||
const route = config[routeName.value];
|
||||
if (route) return null;
|
||||
return 'OrderList';
|
||||
});
|
||||
const customFilterPanel = computed(() => {
|
||||
const filterPanel = config[routeName.value] ?? OrderFilter;
|
||||
return filterPanel;
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VnCard
|
||||
data-key="Order"
|
||||
base-url="Orders"
|
||||
:descriptor="OrderDescriptor"
|
||||
:filter-panel="OrderFilter"
|
||||
search-data-key="OrderList"
|
||||
:filter-panel="customFilterPanel"
|
||||
:search-data-key="customRouteRedirectName"
|
||||
>
|
||||
<template #searchbar>
|
||||
<OrderSearchbar />
|
||||
|
|
|
@ -1,17 +1,24 @@
|
|||
<script setup>
|
||||
import { useStateStore } from 'stores/useStateStore';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { onMounted, onUnmounted, ref } from 'vue';
|
||||
import axios from 'axios';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import VnPaginate from 'components/ui/VnPaginate.vue';
|
||||
import CatalogItem from 'components/ui/CatalogItem.vue';
|
||||
import OrderCatalogFilter from 'pages/Order/Card/OrderCatalogFilter.vue';
|
||||
import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const stateStore = useStateStore();
|
||||
const { t } = useI18n();
|
||||
const tags = ref([]);
|
||||
|
||||
onMounted(() => (stateStore.rightDrawer = true));
|
||||
onMounted(() => {
|
||||
stateStore.rightDrawer = true;
|
||||
checkOrderConfirmation();
|
||||
});
|
||||
onUnmounted(() => (stateStore.rightDrawer = false));
|
||||
|
||||
const catalogParams = {
|
||||
|
@ -19,7 +26,12 @@ const catalogParams = {
|
|||
orderBy: JSON.stringify({ field: 'relevancy DESC, name', way: 'ASC', isTag: false }),
|
||||
};
|
||||
|
||||
const tags = ref([]);
|
||||
async function checkOrderConfirmation() {
|
||||
const response = await axios.get(`Orders/${route.params.id}`);
|
||||
if (response.data.isConfirmed === 1) {
|
||||
router.push(`/order/${route.params.id}/line`);
|
||||
}
|
||||
}
|
||||
|
||||
function extractTags(items) {
|
||||
const resultTags = [];
|
||||
|
@ -52,6 +64,15 @@ function extractValueTags(items) {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<VnSearchbar
|
||||
data-key="OrderCatalogList"
|
||||
:user-params="catalogParams"
|
||||
:static-params="['orderFk', 'orderBy']"
|
||||
:redirect="false"
|
||||
url="Orders/CatalogFilter"
|
||||
:label="t('Search items')"
|
||||
:info="t('You can search items by name or id')"
|
||||
/>
|
||||
<QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
|
||||
<QScrollArea class="fit text-grey-8">
|
||||
<OrderCatalogFilter
|
||||
|
@ -68,7 +89,6 @@ function extractValueTags(items) {
|
|||
url="Orders/CatalogFilter"
|
||||
:limit="50"
|
||||
:user-params="catalogParams"
|
||||
auto-load
|
||||
@on-fetch="extractTags"
|
||||
:update-router="false"
|
||||
>
|
||||
|
@ -106,3 +126,8 @@ function extractValueTags(items) {
|
|||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
<i18n>
|
||||
es:
|
||||
You can search items by name or id: Puedes buscar items por nombre o id
|
||||
</i18n>
|
|
@ -7,8 +7,8 @@ import FetchData from 'components/FetchData.vue';
|
|||
import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
|
||||
import VnSelect from 'components/common/VnSelect.vue';
|
||||
import VnFilterPanelChip from 'components/ui/VnFilterPanelChip.vue';
|
||||
import { useValidator } from 'src/composables/useValidator';
|
||||
import VnInput from 'src/components/common/VnInput.vue';
|
||||
import getParamWhere from 'src/filters/getParamWhere';
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
|
@ -27,19 +27,26 @@ const props = defineProps({
|
|||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const categoryList = ref(null);
|
||||
const selectedCategoryFk = ref(null);
|
||||
const typeList = ref(null);
|
||||
const selectedCategoryFk = ref(getParamWhere(route, 'categoryFk'));
|
||||
const typeList = ref([]);
|
||||
const selectedTypeFk = ref(null);
|
||||
const validationsStore = useValidator();
|
||||
const selectedOrder = ref(null);
|
||||
const selectedOrderField = ref(null);
|
||||
const moreFields = ref([]);
|
||||
const moreFieldsOrder = ref([]);
|
||||
const selectedTag = ref(null);
|
||||
const tagValues = ref([{}]);
|
||||
const tagOptions = ref([]);
|
||||
const vnFilterPanelRef = ref();
|
||||
const orderByList = ref([
|
||||
{ id: 'relevancy DESC, name', name: t('params.relevancy'), priority: 999 },
|
||||
{ id: 'showOrder, price', name: t('params.colorAndPrice'), priority: 999 },
|
||||
{ id: 'name', name: t('params.name'), priority: 999 },
|
||||
{ id: 'price', name: t('params.price'), priority: 999 },
|
||||
]);
|
||||
const orderWayList = ref([
|
||||
{ id: 'ASC', name: t('params.ASC') },
|
||||
{ id: 'DESC', name: t('params.DESC') },
|
||||
]);
|
||||
const orderBySelected = ref('relevancy DESC, name');
|
||||
const orderWaySelected = ref('ASC');
|
||||
|
||||
const createValue = (val, done) => {
|
||||
if (val.length > 2) {
|
||||
|
@ -72,7 +79,7 @@ const selectCategory = (params, category, search) => {
|
|||
search();
|
||||
};
|
||||
|
||||
const loadTypes = async (categoryFk) => {
|
||||
const loadTypes = async (categoryFk = selectedCategoryFk.value) => {
|
||||
const { data } = await axios.get(`Orders/${route.params.id}/getItemTypeAvailable`, {
|
||||
params: { itemCategoryId: categoryFk },
|
||||
});
|
||||
|
@ -84,7 +91,14 @@ const selectedCategory = computed(() =>
|
|||
(category) => category?.id === selectedCategoryFk.value
|
||||
)
|
||||
);
|
||||
|
||||
function filterFn(val, update) {
|
||||
update(() => {
|
||||
const needle = val.toLowerCase();
|
||||
tagOptions.value = props.tagValue.filter(
|
||||
(v) => v.toLowerCase().indexOf(needle) > -1
|
||||
);
|
||||
});
|
||||
}
|
||||
const selectedType = computed(() => {
|
||||
return (typeList.value || []).find((type) => type?.id === selectedTypeFk.value);
|
||||
});
|
||||
|
@ -95,7 +109,8 @@ function exprBuilder(param, value) {
|
|||
case 'typeFk':
|
||||
return { [param]: value };
|
||||
case 'search':
|
||||
return { 'i.name': { like: `%${value}%` } };
|
||||
if (/^\d+$/.test(value)) return { 'i.id': value };
|
||||
else return { 'i.name': { like: `%${value}%` } };
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -132,36 +147,6 @@ const removeTagChip = (selection, params, search) => {
|
|||
search();
|
||||
};
|
||||
|
||||
const onOrderChange = (value, params) => {
|
||||
const tagObj = JSON.parse(params.orderBy);
|
||||
tagObj.way = value.name;
|
||||
params.orderBy = JSON.stringify(tagObj);
|
||||
};
|
||||
|
||||
const onOrderFieldChange = (value, params) => {
|
||||
const tagObj = JSON.parse(params.orderBy);
|
||||
switch (value) {
|
||||
case 'Relevancy':
|
||||
tagObj.name = value + ' DESC, name';
|
||||
params.orderBy = JSON.stringify(tagObj);
|
||||
break;
|
||||
case 'ColorAndPrice':
|
||||
tagObj.name = 'showOrder, price';
|
||||
params.orderBy = JSON.stringify(tagObj);
|
||||
break;
|
||||
case 'Name':
|
||||
tagObj.name = 'name';
|
||||
params.orderBy = JSON.stringify(tagObj);
|
||||
break;
|
||||
case 'Price':
|
||||
tagObj.name = 'price';
|
||||
params.orderBy = JSON.stringify(tagObj);
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const _moreFields = ['ASC', 'DESC'];
|
||||
const _moreFieldsTypes = ['Relevancy', 'ColorAndPrice', 'Name', 'Price'];
|
||||
const setCategoryList = (data) => {
|
||||
categoryList.value = (data || [])
|
||||
.filter((category) => category.display)
|
||||
|
@ -169,8 +154,8 @@ const setCategoryList = (data) => {
|
|||
...category,
|
||||
icon: `vn:${(category.icon || '').split('-')[1]}`,
|
||||
}));
|
||||
moreFields.value = useLang(_moreFields);
|
||||
moreFieldsOrder.value = useLang(_moreFieldsTypes);
|
||||
|
||||
selectedCategoryFk.value && loadTypes();
|
||||
};
|
||||
|
||||
const getCategoryClass = (category, params) => {
|
||||
|
@ -179,27 +164,22 @@ const getCategoryClass = (category, params) => {
|
|||
}
|
||||
};
|
||||
|
||||
const useLang = (values) => {
|
||||
const { models } = validationsStore;
|
||||
const properties = models.Item?.properties || {};
|
||||
return values.map((name) => {
|
||||
let prop = properties[name];
|
||||
const label = t(`params.${name}`);
|
||||
return {
|
||||
name,
|
||||
label,
|
||||
type: prop ? prop.type : null,
|
||||
};
|
||||
});
|
||||
};
|
||||
function addOrder(value, field, params) {
|
||||
let { orderBy } = params;
|
||||
orderBy = JSON.parse(orderBy);
|
||||
orderBy[field] = value;
|
||||
params.orderBy = JSON.stringify(orderBy);
|
||||
vnFilterPanelRef.value.search();
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FetchData url="ItemCategories" limit="30" auto-load @on-fetch="setCategoryList" />
|
||||
<VnFilterPanel
|
||||
ref="vnFilterPanelRef"
|
||||
:data-key="props.dataKey"
|
||||
:hidden-tags="['orderFk', 'orderBy']"
|
||||
:unremovable-params="['orderFk', 'orderBy']"
|
||||
:un-removable-params="['orderFk', 'orderBy']"
|
||||
:expr-builder="exprBuilder"
|
||||
:custom-tags="['tagGroups']"
|
||||
@remove="clearFilter"
|
||||
|
@ -289,33 +269,29 @@ const useLang = (values) => {
|
|||
</QItemSection>
|
||||
</QItem>
|
||||
<QSeparator />
|
||||
<QItem class="q-my-md">
|
||||
<QItemSection>
|
||||
<VnSelect
|
||||
:label="t('Order')"
|
||||
v-model="selectedOrder"
|
||||
:options="moreFields"
|
||||
option-label="label"
|
||||
option-value="way"
|
||||
dense
|
||||
outlined
|
||||
rounded
|
||||
@update:model-value="(value) => onOrderChange(value, params)"
|
||||
/>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
<QItem class="q-mb-md">
|
||||
<QItemSection>
|
||||
<VnSelect
|
||||
:label="t('Order by')"
|
||||
v-model="selectedOrderField"
|
||||
:options="moreFieldsOrder"
|
||||
option-label="label"
|
||||
option-value="name"
|
||||
v-model="orderBySelected"
|
||||
:options="orderByList"
|
||||
dense
|
||||
outlined
|
||||
rounded
|
||||
@update:model-value="(value) => onOrderFieldChange(value, params)"
|
||||
@update:model-value="(value) => addOrder(value, 'field', params)"
|
||||
/>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
<QItem class="q-my-md">
|
||||
<QItemSection>
|
||||
<VnSelect
|
||||
:label="t('Order')"
|
||||
v-model="orderWaySelected"
|
||||
:options="orderWayList"
|
||||
dense
|
||||
outlined
|
||||
rounded
|
||||
@update:model-value="(value) => addOrder(value, 'way', params)"
|
||||
/>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
|
@ -352,7 +328,7 @@ const useLang = (values) => {
|
|||
v-if="!selectedTag"
|
||||
:label="t('params.value')"
|
||||
v-model="value.value"
|
||||
:options="tagValue || []"
|
||||
:options="tagOptions || []"
|
||||
option-value="value"
|
||||
option-label="value"
|
||||
dense
|
||||
|
@ -362,6 +338,8 @@ const useLang = (values) => {
|
|||
use-input
|
||||
class="filter-input"
|
||||
@new-value="createValue"
|
||||
@filter="filterFn"
|
||||
@update:model-value="applyTagFilter(params, searchFn)"
|
||||
/>
|
||||
<VnSelect
|
||||
v-else-if="selectedTag === 1"
|
||||
|
@ -377,6 +355,7 @@ const useLang = (values) => {
|
|||
use-input
|
||||
class="filter-input"
|
||||
@new-value="createValue"
|
||||
@update:model-value="applyTagFilter(params, searchFn)"
|
||||
/>
|
||||
<VnInput
|
||||
v-else
|
||||
|
@ -386,6 +365,7 @@ const useLang = (values) => {
|
|||
outlined
|
||||
rounded
|
||||
class="filter-input"
|
||||
@keyup.enter="applyTagFilter(params, searchFn)"
|
||||
/>
|
||||
<QIcon
|
||||
name="delete"
|
||||
|
@ -400,7 +380,7 @@ const useLang = (values) => {
|
|||
@click="tagValues.push({})"
|
||||
/>
|
||||
</QItem>
|
||||
<QItem>
|
||||
<!-- <QItem>
|
||||
<QItemSection class="q-py-sm">
|
||||
<QBtn
|
||||
:label="t('Search')"
|
||||
|
@ -414,7 +394,7 @@ const useLang = (values) => {
|
|||
@click.stop="applyTagFilter(params, searchFn)"
|
||||
/>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
</QItem> -->
|
||||
<QSeparator />
|
||||
</template>
|
||||
</VnFilterPanel>
|
||||
|
@ -477,10 +457,10 @@ en:
|
|||
order: Order
|
||||
ASC: Ascendant
|
||||
DESC: Descendant
|
||||
Relevancy: Relevancy
|
||||
ColorAndPrice: Color and price
|
||||
Name: Name
|
||||
Price: Price
|
||||
relevancy: Relevancy
|
||||
colorAndPrice: Color and price
|
||||
name: Name
|
||||
price: Price
|
||||
es:
|
||||
params:
|
||||
type: Tipo
|
||||
|
@ -490,10 +470,10 @@ es:
|
|||
order: Orden
|
||||
ASC: Ascendiente
|
||||
DESC: Descendiente
|
||||
Relevancy: Relevancia
|
||||
ColorAndPrice: Color y precio
|
||||
Name: Nombre
|
||||
Price: Precio
|
||||
relevancy: Relevancia
|
||||
colorAndPrice: Color y precio
|
||||
name: Nombre
|
||||
price: Precio
|
||||
Order: Orden
|
||||
Order by: Ordenar por
|
||||
Plant: Planta
|
||||
|
|
|
@ -5,10 +5,12 @@ import { useI18n } from 'vue-i18n';
|
|||
import axios from 'axios';
|
||||
import { useRoute } from 'vue-router';
|
||||
import useNotify from 'composables/useNotify';
|
||||
import { useArrayData } from 'composables/useArrayData';
|
||||
|
||||
const { t } = useI18n();
|
||||
const route = useRoute();
|
||||
const { notify } = useNotify();
|
||||
const emit = defineEmits(['added']);
|
||||
const route = useRoute();
|
||||
const props = defineProps({
|
||||
prices: {
|
||||
type: Array,
|
||||
|
@ -16,9 +18,8 @@ const props = defineProps({
|
|||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['added']);
|
||||
|
||||
const fields = ref((props.prices || []).map((item) => ({ ...item, quantity: 0 })));
|
||||
const descriptorData = useArrayData('orderData');
|
||||
|
||||
const addToOrder = async () => {
|
||||
const items = (fields.value || []).filter((item) => Number(item.quantity) > 0);
|
||||
|
@ -28,19 +29,20 @@ const addToOrder = async () => {
|
|||
});
|
||||
notify(t('globals.dataSaved'), 'positive');
|
||||
emit('added');
|
||||
descriptorData.fetch({});
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="container order-catalog-item q-pb-md">
|
||||
<div class="container order-catalog-item q-pa-md">
|
||||
<QForm @submit="addToOrder">
|
||||
<QMarkupTable class="shadow-0">
|
||||
<tbody>
|
||||
<tr v-for="item in fields" :key="item.warehouse">
|
||||
<td class="text-bold q-py-lg">
|
||||
<td class="text-bold q-pr-md td" style="width: 35%">
|
||||
{{ item.warehouse }}
|
||||
</td>
|
||||
<td class="text-right">
|
||||
<td class="text-right" style="width: 35%">
|
||||
<span
|
||||
class="link"
|
||||
@click="
|
||||
|
@ -75,8 +77,11 @@ const addToOrder = async () => {
|
|||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
max-width: 448px;
|
||||
width: 100%;
|
||||
// .container {
|
||||
// max-width: 768px;
|
||||
// width: 100%;
|
||||
// }
|
||||
.td {
|
||||
width: 200px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -4,13 +4,13 @@ import { useRoute } from 'vue-router';
|
|||
import { useI18n } from 'vue-i18n';
|
||||
import { toCurrency, toDate } from 'src/filters';
|
||||
import { useState } from 'src/composables/useState';
|
||||
|
||||
import useCardDescription from 'src/composables/useCardDescription';
|
||||
import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
|
||||
|
||||
import CardDescriptor from 'components/ui/CardDescriptor.vue';
|
||||
import VnLv from 'src/components/ui/VnLv.vue';
|
||||
import OrderDescriptorMenu from 'pages/Order/Card/OrderDescriptorMenu.vue';
|
||||
import FetchData from 'components/FetchData.vue';
|
||||
import OrderDescriptorMenu from 'pages/Order/Card/OrderDescriptorMenu.vue';
|
||||
import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
|
||||
|
||||
const DEFAULT_ITEMS = 0;
|
||||
|
||||
|
@ -25,6 +25,8 @@ const $props = defineProps({
|
|||
const route = useRoute();
|
||||
const state = useState();
|
||||
const { t } = useI18n();
|
||||
const data = ref(useCardDescription());
|
||||
const getTotalRef = ref();
|
||||
|
||||
const entityId = computed(() => {
|
||||
return $props.id || route.params.id;
|
||||
|
@ -57,11 +59,11 @@ const filter = {
|
|||
],
|
||||
};
|
||||
|
||||
const data = ref(useCardDescription());
|
||||
const setData = (entity) => {
|
||||
if (!entity) return;
|
||||
getTotalRef.value && getTotalRef.value.fetch();
|
||||
data.value = useCardDescription(entity?.client?.name, entity?.id);
|
||||
state.set('OrderDescriptor', entity);
|
||||
state.set('orderData', entity);
|
||||
};
|
||||
|
||||
const getConfirmationValue = (isConfirmed) => {
|
||||
|
@ -69,13 +71,17 @@ const getConfirmationValue = (isConfirmed) => {
|
|||
};
|
||||
|
||||
const total = ref(null);
|
||||
|
||||
function ticketFilter(order) {
|
||||
return JSON.stringify({ id: order.id });
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FetchData
|
||||
ref="getTotalRef"
|
||||
:url="`Orders/${entityId}/getTotal`"
|
||||
@on-fetch="(response) => (total = response)"
|
||||
auto-load
|
||||
/>
|
||||
<CardDescriptor
|
||||
ref="descriptor"
|
||||
|
@ -120,7 +126,7 @@ const total = ref(null);
|
|||
color="primary"
|
||||
:to="{
|
||||
name: 'TicketList',
|
||||
query: { params: JSON.stringify({ orderFk: entity.id }) },
|
||||
query: { table: ticketFilter(entity) },
|
||||
}"
|
||||
>
|
||||
<QTooltip>{{ t('order.summary.orderTicketList') }}</QTooltip>
|
||||
|
|
|
@ -21,15 +21,13 @@ const salesPersonFilter = {
|
|||
fields: ['id', 'nickname'],
|
||||
};
|
||||
const salesPersonList = ref(null);
|
||||
const sourceFilter = { fields: ['value'] };
|
||||
const sourceList = ref(null);
|
||||
const sourceList = ref([]);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FetchData
|
||||
url="AgencyModes/isActive"
|
||||
:filter="agencyFilter"
|
||||
limit="30"
|
||||
sort-by="name ASC"
|
||||
auto-load
|
||||
@on-fetch="(data) => (agencyList = data)"
|
||||
|
@ -37,7 +35,6 @@ const sourceList = ref(null);
|
|||
<FetchData
|
||||
url="Workers/search"
|
||||
:filter="salesPersonFilter"
|
||||
limit="30"
|
||||
sort-by="nickname ASC"
|
||||
@on-fetch="(data) => (salesPersonList = data)"
|
||||
:params="{ departmentCodes: ['VT'] }"
|
||||
|
@ -45,8 +42,7 @@ const sourceList = ref(null);
|
|||
/>
|
||||
<FetchData
|
||||
url="Orders/getSourceValues"
|
||||
:filter="sourceFilter"
|
||||
limit="30"
|
||||
:filter="{ fields: ['value'] }"
|
||||
sort-by="value ASC"
|
||||
@on-fetch="(data) => (sourceList = data)"
|
||||
auto-load
|
||||
|
@ -59,56 +55,34 @@ const sourceList = ref(null);
|
|||
</div>
|
||||
</template>
|
||||
<template #body="{ params }">
|
||||
<QItem>
|
||||
<QItemSection>
|
||||
<div class="q-px-md q-gutter-y-sm">
|
||||
<VnInput
|
||||
is-outlined
|
||||
:label="t('customerId')"
|
||||
v-model="params.clientFk"
|
||||
lazy-rules
|
||||
>
|
||||
<template #prepend>
|
||||
<QIcon name="badge" size="sm"></QIcon>
|
||||
</template>
|
||||
</VnInput>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
<QItem>
|
||||
<QItemSection v-if="agencyList">
|
||||
dense
|
||||
outlined
|
||||
rounded
|
||||
/>
|
||||
<VnSelect
|
||||
:label="t('agency')"
|
||||
v-model="params.agencyModeFk"
|
||||
:options="agencyList"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
:input-debounce="0"
|
||||
dense
|
||||
outlined
|
||||
rounded
|
||||
emit-value
|
||||
map-options
|
||||
use-input
|
||||
:input-debounce="0"
|
||||
/>
|
||||
</QItemSection>
|
||||
<QItemSection v-else>
|
||||
<QSkeleton type="QInput" class="full-width" />
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
<QItem>
|
||||
<QItemSection v-if="salesPersonList">
|
||||
<VnSelect
|
||||
:label="t('salesPerson')"
|
||||
v-model="params.workerFk"
|
||||
:options="salesPersonList"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
url="Workers/search"
|
||||
:filter="{ departmentCodes: ['VT'] }"
|
||||
sort-by="nickname ASC"
|
||||
option-label="nickname"
|
||||
dense
|
||||
outlined
|
||||
rounded
|
||||
emit-value
|
||||
map-options
|
||||
use-input
|
||||
:input-debounce="0"
|
||||
>
|
||||
<template #option="{ itemProps, opt }">
|
||||
<QItem v-bind="itemProps">
|
||||
|
@ -121,13 +95,6 @@ const sourceList = ref(null);
|
|||
</QItem>
|
||||
</template>
|
||||
</VnSelect>
|
||||
</QItemSection>
|
||||
<QItemSection v-else>
|
||||
<QSkeleton type="QInput" class="full-width" />
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
<QItem>
|
||||
<QItemSection>
|
||||
<VnInputDate
|
||||
v-model="params.from"
|
||||
:label="t('fromLanded')"
|
||||
|
@ -135,10 +102,6 @@ const sourceList = ref(null);
|
|||
outlined
|
||||
rounded
|
||||
/>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
<QItem>
|
||||
<QItemSection>
|
||||
<VnInputDate
|
||||
v-model="params.to"
|
||||
:label="t('toLanded')"
|
||||
|
@ -146,61 +109,34 @@ const sourceList = ref(null);
|
|||
outlined
|
||||
rounded
|
||||
/>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
<QItem>
|
||||
<QItemSection>
|
||||
<VnInput
|
||||
:label="t('orderId')"
|
||||
v-model="params.orderFk"
|
||||
lazy-rules
|
||||
is-outlined
|
||||
/>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
<QItem>
|
||||
<QItemSection v-if="sourceList">
|
||||
<VnSelect
|
||||
:label="t('application')"
|
||||
v-model="params.sourceApp"
|
||||
:options="sourceList"
|
||||
option-label="value"
|
||||
emit-value
|
||||
map-options
|
||||
use-input
|
||||
dense
|
||||
outlined
|
||||
rounded
|
||||
:input-debounce="0"
|
||||
/>
|
||||
</QItemSection>
|
||||
<QItemSection v-else>
|
||||
<QSkeleton type="QInput" class="full-width" />
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
<QItem>
|
||||
<QItemSection>
|
||||
<QCheckbox
|
||||
v-model="params.myTeam"
|
||||
:label="t('myTeam')"
|
||||
toggle-indeterminate
|
||||
/>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
<QItem>
|
||||
<QItemSection>
|
||||
<QCheckbox
|
||||
v-model="params.isConfirmed"
|
||||
:label="t('isConfirmed')"
|
||||
toggle-indeterminate
|
||||
/>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
<QItem>
|
||||
<QItemSection>
|
||||
<QCheckbox v-model="params.showEmpty" :label="t('showEmpty')" />
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
</div>
|
||||
</template>
|
||||
</VnFilterPanel>
|
||||
</template>
|
||||
|
|
|
@ -1,23 +1,26 @@
|
|||
<script setup>
|
||||
import { useRoute } from 'vue-router';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { ref, computed } from 'vue';
|
||||
import { ref, computed, watch } from 'vue';
|
||||
import { useQuasar } from 'quasar';
|
||||
import axios from 'axios';
|
||||
import { useStateStore } from 'stores/useStateStore';
|
||||
import { useArrayData } from 'composables/useArrayData';
|
||||
import { toCurrency, toDate } from 'src/filters';
|
||||
|
||||
import VnConfirm from 'components/ui/VnConfirm.vue';
|
||||
import { toCurrency, toDate } from 'src/filters';
|
||||
import axios from 'axios';
|
||||
import VnTable from 'src/components/VnTable/VnTable.vue';
|
||||
import FetchData from 'src/components/FetchData.vue';
|
||||
import VnImg from 'src/components/ui/VnImg.vue';
|
||||
import VnLv from 'src/components/ui/VnLv.vue';
|
||||
import FetchedTags from 'src/components/ui/FetchedTags.vue';
|
||||
import { useStateStore } from 'stores/useStateStore';
|
||||
|
||||
const router = useRouter();
|
||||
const stateStore = useStateStore();
|
||||
const route = useRoute();
|
||||
const { t } = useI18n();
|
||||
const quasar = useQuasar();
|
||||
const descriptorData = useArrayData('orderData');
|
||||
const componentKey = ref(0);
|
||||
const tableLinesRef = ref();
|
||||
const order = ref();
|
||||
|
@ -25,6 +28,8 @@ const orderSummary = ref({
|
|||
total: null,
|
||||
vat: null,
|
||||
});
|
||||
const getTotalRef = ref();
|
||||
const getVATRef = ref();
|
||||
|
||||
const lineFilter = ref({
|
||||
include: [
|
||||
|
@ -59,6 +64,13 @@ const lineFilter = ref({
|
|||
fields: ['id', 'name'],
|
||||
},
|
||||
},
|
||||
{
|
||||
relation: 'order',
|
||||
scope: {
|
||||
fields: ['id', 'isConfirmed'],
|
||||
where: { id: route.params.id },
|
||||
},
|
||||
},
|
||||
],
|
||||
where: { orderFk: route.params.id },
|
||||
});
|
||||
|
@ -104,6 +116,7 @@ const columns = computed(() => [
|
|||
component: null,
|
||||
},
|
||||
format: (row) => row?.item?.name,
|
||||
columnClass: 'expand',
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
|
@ -147,7 +160,6 @@ const columns = computed(() => [
|
|||
align: 'left',
|
||||
name: 'amount',
|
||||
label: t('lines.amount'),
|
||||
format: (row) => toCurrency(row.amount),
|
||||
},
|
||||
{
|
||||
align: 'right',
|
||||
|
@ -155,8 +167,9 @@ const columns = computed(() => [
|
|||
name: 'tableActions',
|
||||
actions: [
|
||||
{
|
||||
title: t('delete'),
|
||||
title: t('Delete'),
|
||||
icon: 'delete',
|
||||
show: (row) => !row.order.isConfirmed,
|
||||
action: (row) => confirmRemove(row),
|
||||
isPrimary: true,
|
||||
},
|
||||
|
@ -185,6 +198,9 @@ async function remove(item) {
|
|||
type: 'positive',
|
||||
});
|
||||
tableLinesRef.value.reload();
|
||||
descriptorData.fetch({});
|
||||
getTotalRef.value.fetch();
|
||||
getVATRef.value.fetch();
|
||||
}
|
||||
|
||||
async function confirmOrder() {
|
||||
|
@ -193,7 +209,22 @@ async function confirmOrder() {
|
|||
message: t('globals.confirm'),
|
||||
type: 'positive',
|
||||
});
|
||||
router.push({
|
||||
name: 'TicketList',
|
||||
query: {
|
||||
table: JSON.stringify({ clientFk: descriptorData.store.data.clientFk }),
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
watch(
|
||||
() => router.currentRoute.value.params.id,
|
||||
() => {
|
||||
lineFilter.value.where.orderFk = router.currentRoute.value.params.id;
|
||||
|
||||
tableLinesRef.value.reload();
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
@ -204,44 +235,36 @@ async function confirmOrder() {
|
|||
auto-load
|
||||
/>
|
||||
<FetchData
|
||||
ref="getTotalRef"
|
||||
:key="componentKey"
|
||||
:url="`Orders/${route.params.id}/getTotal`"
|
||||
@on-fetch="(data) => (orderSummary.total = data)"
|
||||
auto-load
|
||||
/>
|
||||
<FetchData
|
||||
ref="getVATRef"
|
||||
:key="componentKey"
|
||||
:url="`Orders/${route.params.id}/getVAT`"
|
||||
@on-fetch="(data) => (orderSummary.vat = data)"
|
||||
auto-load
|
||||
/>
|
||||
<QDrawer side="right" :width="270" v-model="stateStore.rightDrawer">
|
||||
<QCard class="order-lines-summary q-pa-lg">
|
||||
<QCard
|
||||
class="order-lines-summary q-pa-lg"
|
||||
v-if="orderSummary.vat && orderSummary.total"
|
||||
>
|
||||
<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)"
|
||||
/>
|
||||
<VnLv :label="t('VAT') + ': '" :value="toCurrency(orderSummary?.vat)" />
|
||||
<VnLv :label="t('total') + ': '" :value="toCurrency(orderSummary?.total)" />
|
||||
</QCard>
|
||||
</QDrawer>
|
||||
<QPage :key="componentKey" class="column items-center">
|
||||
<div class="order-list full-width">
|
||||
<div v-if="!orderSummary.total" class="no-result">
|
||||
{{ t('globals.noResults') }}
|
||||
</div>
|
||||
|
||||
<VnTable
|
||||
ref="tableLinesRef"
|
||||
data-key="OrderLines"
|
||||
|
@ -267,15 +290,25 @@ async function confirmOrder() {
|
|||
</div>
|
||||
<FetchedTags :item="row?.item" :max-length="6" />
|
||||
</template>
|
||||
<template #column-amount="{ row }">
|
||||
{{ toCurrency(row.quantity * row.price) }}
|
||||
</template>
|
||||
<template #column-tableActions="{ row }">
|
||||
<QIcon
|
||||
v-if="row.order?.isConfirmed === 0"
|
||||
name="delete"
|
||||
icon="delete"
|
||||
@click="confirmRemove(row)"
|
||||
class="cursor-pointer"
|
||||
/>
|
||||
</template>
|
||||
</VnTable>
|
||||
</div>
|
||||
<QPageSticky :offset="[20, 20]" v-if="!order?.isConfirmed" style="z-index: 2">
|
||||
<QBtn fab icon="check" color="primary" @click="confirmOrder()" />
|
||||
<QTooltip>
|
||||
{{ t('confirm') }}
|
||||
</QTooltip>
|
||||
</QPageSticky>
|
||||
</QPage>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
|
@ -180,9 +180,10 @@ const detailsColumns = ref([
|
|||
<ItemDescriptorProxy :id="props.row.item?.id" />
|
||||
</span>
|
||||
</QTd>
|
||||
<QTd key="description" :props="props" class="description">
|
||||
<QTd key="description" :props="props">
|
||||
<div class="description">
|
||||
<div class="name">
|
||||
<span>{{ props.row.item.name }}</span>
|
||||
{{ props.row.item.name }}
|
||||
<span
|
||||
v-if="props.row.item.subName"
|
||||
class="subName"
|
||||
|
@ -190,6 +191,7 @@ const detailsColumns = ref([
|
|||
{{ props.row.item.subName }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<FetchedTags :item="props.row.item" :max-length="5" />
|
||||
</QTd>
|
||||
<QTd key="quantity" :props="props">
|
||||
|
@ -228,24 +230,13 @@ const detailsColumns = ref([
|
|||
}
|
||||
|
||||
.description {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
text-align: left;
|
||||
height: auto;
|
||||
padding-top: 12px;
|
||||
padding-bottom: 12px;
|
||||
padding-top: 15px;
|
||||
padding-bottom: 15px;
|
||||
|
||||
.name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-bottom: 8px;
|
||||
|
||||
& > * {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.subName {
|
||||
margin-left: 5%;
|
||||
text-transform: uppercase;
|
||||
color: var(--vn-label-color);
|
||||
}
|
||||
|
|
|
@ -0,0 +1,140 @@
|
|||
<script setup>
|
||||
import axios from 'axios';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { ref } from 'vue';
|
||||
import { dashIfEmpty } from 'src/filters';
|
||||
|
||||
import FetchData from 'components/FetchData.vue';
|
||||
import FetchedTags from 'components/ui/FetchedTags.vue';
|
||||
import ItemDescriptorProxy from 'pages/Item/Card/ItemDescriptorProxy.vue';
|
||||
import VnLv from 'components/ui/VnLv.vue';
|
||||
import VnTable from 'components/VnTable/VnTable.vue';
|
||||
|
||||
const route = useRoute();
|
||||
const { t } = useI18n();
|
||||
const volumeSummary = ref(null);
|
||||
const volumeRef = ref();
|
||||
const volumes = ref([]);
|
||||
const volumeFilter = ref({
|
||||
include: [
|
||||
{
|
||||
relation: 'item',
|
||||
},
|
||||
],
|
||||
where: { orderFk: route.params.id },
|
||||
});
|
||||
|
||||
const columns = [
|
||||
{
|
||||
name: 'itemFk',
|
||||
label: t('item'),
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
name: 'description',
|
||||
label: t('globals.description'),
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
name: 'quantity',
|
||||
label: t('quantity'),
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
name: 'volume',
|
||||
label: t('volume'),
|
||||
align: 'left',
|
||||
},
|
||||
];
|
||||
|
||||
const loadVolumes = async (rows) => {
|
||||
if (!rows) return;
|
||||
const { data } = await axios.get(`Orders/${route.params.id}/getVolumes`);
|
||||
rows.forEach((order) => {
|
||||
(data.volumes || []).forEach((volume) => {
|
||||
if (order.itemFk === volume.itemFk) order.volume = volume.volume;
|
||||
});
|
||||
});
|
||||
volumes.value = rows;
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FetchData
|
||||
:url="`Orders/${route.params.id}/getTotalVolume`"
|
||||
@on-fetch="(data) => (volumeSummary = data)"
|
||||
auto-load
|
||||
/>
|
||||
<QCard v-if="volumeSummary" class="order-volume-summary q-pa-lg">
|
||||
<VnLv :label="t('total')" :value="`${volumeSummary?.totalVolume} m³`" />
|
||||
<VnLv
|
||||
:label="t('boxes')"
|
||||
:value="`${dashIfEmpty(volumeSummary?.totalBoxes)} U`"
|
||||
/>
|
||||
</QCard>
|
||||
<VnTable
|
||||
ref="volumeRef"
|
||||
data-key="OrderCatalogVolume"
|
||||
url="OrderRows"
|
||||
:columns="columns"
|
||||
auto-load
|
||||
:user-filter="volumeFilter"
|
||||
order="itemFk"
|
||||
@on-fetch="(data) => loadVolumes(data)"
|
||||
:right-search="false"
|
||||
:column-search="false"
|
||||
>
|
||||
<template #column-itemFk="{ row }">
|
||||
<span class="link">
|
||||
{{ row.itemFk }}
|
||||
<ItemDescriptorProxy :id="row.itemFk" />
|
||||
</span>
|
||||
</template>
|
||||
<template #column-description="{ row }">
|
||||
<FetchedTags :item="row.item" :max-length="5" />
|
||||
</template>
|
||||
<template #column-volume="{ rowIndex }">
|
||||
{{ volumes?.[rowIndex]?.volume }}
|
||||
</template>
|
||||
</VnTable>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.order-volume-summary {
|
||||
.vn-label-value {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 2%;
|
||||
|
||||
.label {
|
||||
color: var(--vn-label-color);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.value {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<i18n>
|
||||
en:
|
||||
summary: Summary
|
||||
total: Total
|
||||
boxes: Boxes
|
||||
item: Item
|
||||
quantity: Quantity
|
||||
volume: m³ per quantity
|
||||
es:
|
||||
summary: Resumen
|
||||
total: Total
|
||||
boxes: Cajas
|
||||
item: Artículo
|
||||
quantity: Cantidad
|
||||
volume: m³ por cantidad
|
||||
</i18n>
|
|
@ -3,19 +3,21 @@ import axios from 'axios';
|
|||
import { useI18n } from 'vue-i18n';
|
||||
import { computed, ref } from 'vue';
|
||||
import { dashIfEmpty, toCurrency, toDate } from 'src/filters';
|
||||
import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
|
||||
import OrderSummary from 'pages/Order/Card/OrderSummary.vue';
|
||||
import { useSummaryDialog } from 'src/composables/useSummaryDialog';
|
||||
import VnTable from 'src/components/VnTable/VnTable.vue';
|
||||
import VnInputDate from 'src/components/common/VnInputDate.vue';
|
||||
import VnSelect from 'src/components/common/VnSelect.vue';
|
||||
import OrderSearchbar from './Card/OrderSearchbar.vue';
|
||||
import RightMenu from 'src/components/common/RightMenu.vue';
|
||||
import OrderFilter from './Card/OrderFilter.vue';
|
||||
|
||||
const { t } = useI18n();
|
||||
const { viewSummary } = useSummaryDialog();
|
||||
const tableRef = ref();
|
||||
const clientList = ref([]);
|
||||
const agencyList = ref([]);
|
||||
const selectedAddress = ref();
|
||||
const addressesList = ref([]);
|
||||
const clientId = ref();
|
||||
|
||||
const columns = computed(() => [
|
||||
{
|
||||
|
@ -29,7 +31,7 @@ const columns = computed(() => [
|
|||
},
|
||||
{
|
||||
align: 'left',
|
||||
name: 'clientName',
|
||||
name: 'clientFk',
|
||||
label: t('module.customer'),
|
||||
isTitle: true,
|
||||
cardVisible: true,
|
||||
|
@ -41,20 +43,26 @@ const columns = computed(() => [
|
|||
columnField: {
|
||||
component: null,
|
||||
},
|
||||
format: (row) => row?.clientName,
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
name: 'name',
|
||||
name: 'salesPersonFk',
|
||||
label: t('module.salesPerson'),
|
||||
columnFilter: {
|
||||
component: 'select',
|
||||
inWhere: true,
|
||||
attrs: {
|
||||
url: 'Workers/activeWithInheritedRole',
|
||||
fields: ['id', 'name'],
|
||||
where: { role: 'salesPerson' },
|
||||
useLike: false,
|
||||
optionValue: 'id',
|
||||
optionLabel: 'name',
|
||||
optionFilter: 'firstName',
|
||||
},
|
||||
columnField: {
|
||||
component: null,
|
||||
},
|
||||
format: (row) => row?.name,
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
|
@ -92,18 +100,22 @@ const columns = computed(() => [
|
|||
},
|
||||
{
|
||||
align: 'left',
|
||||
name: 'agencyName',
|
||||
name: 'agencyModeFk',
|
||||
label: t('module.agency'),
|
||||
format: (row) => row?.agencyName,
|
||||
columnFilter: {
|
||||
component: 'select',
|
||||
cardVisible: true,
|
||||
attrs: {
|
||||
url: 'Agencies',
|
||||
url: 'agencyModes',
|
||||
fields: ['id', 'name'],
|
||||
find: {
|
||||
value: 'agencyModeFk',
|
||||
label: 'agencyName',
|
||||
},
|
||||
columnField: {
|
||||
component: null,
|
||||
},
|
||||
},
|
||||
cardVisible: true,
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
name: 'total',
|
||||
|
@ -125,22 +137,36 @@ const columns = computed(() => [
|
|||
},
|
||||
]);
|
||||
|
||||
async function fetchClientAddress(id, data) {
|
||||
const clientData = await axios.get(`Clients/${id}`);
|
||||
selectedAddress.value = clientData.data.defaultAddressFk;
|
||||
data.addressId = selectedAddress.value;
|
||||
async function fetchClientAddress(id, formData) {
|
||||
const { data } = await axios.get(`Clients/${id}`, {
|
||||
params: { filter: { include: { relation: 'addresses' } } },
|
||||
});
|
||||
addressesList.value = data.addresses;
|
||||
formData.addressId = data.defaultAddressFk;
|
||||
fetchAgencies(formData);
|
||||
}
|
||||
|
||||
async function fetchAgencies({ landed, addressId }) {
|
||||
if (!landed || !addressId) return (agencyList.value = []);
|
||||
|
||||
const { data } = await axios.get('Agencies/landsThatDay', {
|
||||
params: { addressFk: addressId, landed },
|
||||
});
|
||||
agencyList.value = data;
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<VnSearchbar
|
||||
data-key="OrderList"
|
||||
:label="t('Search order')"
|
||||
:info="t('You can search orders by reference')"
|
||||
/>
|
||||
<OrderSearchbar />
|
||||
<RightMenu>
|
||||
<template #right-panel>
|
||||
<OrderFilter data-key="OrderList" />
|
||||
</template>
|
||||
</RightMenu>
|
||||
<VnTable
|
||||
ref="tableRef"
|
||||
data-key="OrderList"
|
||||
url="Orders/filter"
|
||||
:order="['landed DESC', 'clientFk ASC', 'id DESC']"
|
||||
:create="{
|
||||
urlCreate: 'Orders/new',
|
||||
title: 'Create Order',
|
||||
|
@ -152,36 +178,49 @@ async function fetchClientAddress(id, data) {
|
|||
addressId: null,
|
||||
},
|
||||
}"
|
||||
:user-params="{ showEmpty: false }"
|
||||
:right-search="false"
|
||||
:columns="columns"
|
||||
redirect="order"
|
||||
auto-load
|
||||
>
|
||||
<template #more-create-dialog="{ data }">
|
||||
<VnSelect
|
||||
url="Clients"
|
||||
v-model="data.id"
|
||||
:include="{ relation: 'addresses' }"
|
||||
v-model="clientId"
|
||||
:label="t('module.customer')"
|
||||
:options="clientList"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
@update:model-value="(id) => fetchClientAddress(id, data)"
|
||||
/>
|
||||
<VnSelect
|
||||
url="Clients"
|
||||
v-model="selectedAddress"
|
||||
v-model="data.addressId"
|
||||
:options="addressesList"
|
||||
:label="t('module.address')"
|
||||
:options="selectedAddress"
|
||||
option-value="defaultAddressFk"
|
||||
option-label="street"
|
||||
option-value="id"
|
||||
option-label="nickname"
|
||||
@update:model-value="() => fetchAgencies(data)"
|
||||
>
|
||||
<template #option="scope">
|
||||
<QItem v-bind="scope.itemProps">
|
||||
<QItemSection>
|
||||
<QItemLabel>
|
||||
{{ scope.opt?.nickname }}: {{ scope.opt?.street }},
|
||||
{{ scope.opt?.city }}</QItemLabel
|
||||
>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
</template>
|
||||
</VnSelect>
|
||||
<VnInputDate
|
||||
v-model="data.landed"
|
||||
:label="t('module.landed')"
|
||||
@update:model-value="() => fetchAgencies(data)"
|
||||
/>
|
||||
<VnInputDate v-model="data.landed" :label="t('module.landed')" />
|
||||
<VnSelect
|
||||
url="Agencies"
|
||||
v-model="data.agencyModeId"
|
||||
:label="t('module.agency')"
|
||||
:options="agencyList"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
option-value="agencyModeFk"
|
||||
option-label="agencyMode"
|
||||
/>
|
||||
</template>
|
||||
</VnTable>
|
||||
|
|
|
@ -1,156 +0,0 @@
|
|||
<script setup>
|
||||
import { useRoute } from 'vue-router';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { ref } from 'vue';
|
||||
|
||||
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 { dashIfEmpty } from 'src/filters';
|
||||
import axios from 'axios';
|
||||
|
||||
const route = useRoute();
|
||||
const { t } = useI18n();
|
||||
const volumeSummary = ref(null);
|
||||
|
||||
const loadVolumes = async (rows) => {
|
||||
const { data } = await axios.get(`Orders/${route.params.id}/getVolumes`);
|
||||
(rows || []).forEach((order) => {
|
||||
(data.volumes || []).forEach((volume) => {
|
||||
if (order.itemFk === volume.itemFk) {
|
||||
order.volume = volume.volume;
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FetchData
|
||||
:url="`Orders/${route.params.id}/getTotalVolume`"
|
||||
@on-fetch="(data) => (volumeSummary = data)"
|
||||
auto-load
|
||||
/>
|
||||
<QPage class="column items-center q-pa-md">
|
||||
<div class="vn-card-list">
|
||||
<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">
|
||||
{{ t('summary') }}
|
||||
</p>
|
||||
<VnLv :label="t('total')" :value="`${volumeSummary?.totalVolume} m³`" />
|
||||
<VnLv
|
||||
:label="t('boxes')"
|
||||
:value="`${dashIfEmpty(volumeSummary?.totalBoxes)} U`"
|
||||
/>
|
||||
</QCard>
|
||||
<VnPaginate
|
||||
data-key="OrderCatalogVolume"
|
||||
url="OrderRows"
|
||||
:limit="20"
|
||||
auto-load
|
||||
:filter="{
|
||||
include: {
|
||||
relation: 'item',
|
||||
},
|
||||
where: { orderFk: route.params.id },
|
||||
}"
|
||||
order="itemFk"
|
||||
@on-fetch="(data) => loadVolumes(data)"
|
||||
>
|
||||
<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 #list-items>
|
||||
<div class="q-mb-sm">
|
||||
<FetchedTags :item="row.item" :max-length="5" />
|
||||
</div>
|
||||
<VnLv :label="t('item')" :value="row.item.id" />
|
||||
<VnLv :label="t('subName')">
|
||||
<template #value>
|
||||
<span class="text-uppercase">
|
||||
{{ row.item.subName }}
|
||||
</span>
|
||||
</template>
|
||||
</VnLv>
|
||||
<VnLv :label="t('quantity')" :value="row.quantity" />
|
||||
<VnLv :label="t('volume')" :value="row.volume" />
|
||||
</template>
|
||||
</CardList>
|
||||
</div>
|
||||
</template>
|
||||
</VnPaginate>
|
||||
</div>
|
||||
</QPage>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.order-volume-summary {
|
||||
.vn-label-value {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 2%;
|
||||
|
||||
.label {
|
||||
color: var(--vn-label-color);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.value {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
.header {
|
||||
color: $primary;
|
||||
font-weight: bold;
|
||||
margin-bottom: 25px;
|
||||
font-size: 20px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.no-result {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
color: var(--vn-label-color);
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
<i18n>
|
||||
en:
|
||||
summary: Summary
|
||||
total: Total
|
||||
boxes: Boxes
|
||||
item: Item
|
||||
subName: Subname
|
||||
quantity: Quantity
|
||||
volume: m³ per quantity
|
||||
es:
|
||||
summary: Resumen
|
||||
total: Total
|
||||
boxes: Cajas
|
||||
item: Artículo
|
||||
subName: Subname
|
||||
quantity: Cantidad
|
||||
volume: m³ por cantidad
|
||||
</i18n>
|
|
@ -11,7 +11,6 @@ import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
|
|||
import TicketEditManaProxy from './TicketEditMana.vue';
|
||||
import VnImg from 'src/components/ui/VnImg.vue';
|
||||
|
||||
import RightMenu from 'src/components/common/RightMenu.vue';
|
||||
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
|
||||
import TicketSaleMoreActions from './TicketSaleMoreActions.vue';
|
||||
import TicketTransfer from './TicketTransfer.vue';
|
||||
|
|
|
@ -10,6 +10,7 @@ import useCardDescription from 'src/composables/useCardDescription';
|
|||
import { useState } from 'src/composables/useState';
|
||||
import axios from 'axios';
|
||||
import VnImg from 'src/components/ui/VnImg.vue';
|
||||
import EditPictureForm from 'components/EditPictureForm.vue';
|
||||
|
||||
const $props = defineProps({
|
||||
id: {
|
||||
|
@ -18,6 +19,7 @@ const $props = defineProps({
|
|||
default: null,
|
||||
},
|
||||
});
|
||||
const image = ref(null);
|
||||
|
||||
const route = useRoute();
|
||||
const { t } = useI18n();
|
||||
|
@ -25,6 +27,10 @@ const state = useState();
|
|||
const user = state.getUser();
|
||||
const changePasswordFormDialog = ref(null);
|
||||
const cardDescriptorRef = ref(null);
|
||||
const showEditPhotoForm = ref(false);
|
||||
const toggleEditPictureForm = () => {
|
||||
showEditPhotoForm.value = !showEditPhotoForm.value;
|
||||
};
|
||||
|
||||
const entityId = computed(() => {
|
||||
return $props.id || route.params.id;
|
||||
|
@ -99,7 +105,9 @@ const handleExcluded = async () => {
|
|||
|
||||
workerExcluded.value = !workerExcluded.value;
|
||||
};
|
||||
|
||||
const handlePhotoUpdated = (evt = false) => {
|
||||
image.value.reload(evt);
|
||||
};
|
||||
const refetch = async () => await cardDescriptorRef.value.getData();
|
||||
</script>
|
||||
<template>
|
||||
|
@ -144,7 +152,9 @@ const refetch = async () => await cardDescriptorRef.value.getData();
|
|||
</QItem>
|
||||
</template>
|
||||
<template #before>
|
||||
<div class="relative-position">
|
||||
<VnImg
|
||||
ref="image"
|
||||
:id="parseInt(entityId)"
|
||||
collection="user"
|
||||
resolution="520x520"
|
||||
|
@ -155,7 +165,10 @@ const refetch = async () => await cardDescriptorRef.value.getData();
|
|||
class="absolute-full picture text-center q-pa-md flex flex-center"
|
||||
>
|
||||
<div>
|
||||
<div class="text-grey-5" style="opacity: 0.4; font-size: 5vh">
|
||||
<div
|
||||
class="text-grey-5"
|
||||
style="opacity: 0.4; font-size: 5vh"
|
||||
>
|
||||
<QIcon name="vn:claims" />
|
||||
</div>
|
||||
<div class="text-grey-5" style="opacity: 0.4">
|
||||
|
@ -163,8 +176,25 @@ const refetch = async () => await cardDescriptorRef.value.getData();
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</VnImg>
|
||||
</template> </VnImg
|
||||
><QBtn
|
||||
color="primary"
|
||||
size="lg"
|
||||
round
|
||||
class="edit-photo-btn"
|
||||
@click="toggleEditPictureForm()"
|
||||
>
|
||||
<QIcon name="edit" size="sm" />
|
||||
<QDialog ref="editPhotoFormDialog" v-model="showEditPhotoForm">
|
||||
<EditPictureForm
|
||||
collection="user"
|
||||
:id="entityId"
|
||||
@close-form="toggleEditPictureForm()"
|
||||
@on-photo-uploaded="handlePhotoUpdated"
|
||||
/>
|
||||
</QDialog>
|
||||
</QBtn>
|
||||
</div>
|
||||
</template>
|
||||
<template #body="{ entity }">
|
||||
<VnLv :label="t('worker.card.name')" :value="entity.user?.nickname" />
|
||||
|
|
|
@ -10,11 +10,6 @@ const { t } = useI18n();
|
|||
const route = useRoute();
|
||||
|
||||
const routeName = computed(() => route.name);
|
||||
const customRouteRedirectName = computed(() => {
|
||||
if (routeName.value === 'ZoneLocations') return null;
|
||||
return routeName.value;
|
||||
});
|
||||
const searchbarMakeFetch = computed(() => routeName.value !== 'ZoneEvents');
|
||||
const searchBarDataKeys = {
|
||||
ZoneWarehouses: 'ZoneWarehouses',
|
||||
ZoneSummary: 'ZoneSummary',
|
||||
|
|
|
@ -63,7 +63,7 @@ export default {
|
|||
title: 'basicData',
|
||||
icon: 'vn:settings',
|
||||
},
|
||||
component: () => import('src/pages/Order/Card/OrderForm.vue'),
|
||||
component: () => import('src/pages/Order/Card/OrderBasicData.vue'),
|
||||
},
|
||||
{
|
||||
name: 'OrderCatalog',
|
||||
|
@ -72,7 +72,7 @@ export default {
|
|||
title: 'catalog',
|
||||
icon: 'vn:basket',
|
||||
},
|
||||
component: () => import('src/pages/Order/OrderCatalog.vue'),
|
||||
component: () => import('src/pages/Order/Card/OrderCatalog.vue'),
|
||||
},
|
||||
{
|
||||
name: 'OrderVolume',
|
||||
|
@ -81,7 +81,7 @@ export default {
|
|||
title: 'volume',
|
||||
icon: 'vn:volume',
|
||||
},
|
||||
component: () => import('src/pages/Order/OrderVolume.vue'),
|
||||
component: () => import('src/pages/Order/Card/OrderVolume.vue'),
|
||||
},
|
||||
{
|
||||
name: 'OrderLines',
|
||||
|
@ -90,7 +90,7 @@ export default {
|
|||
title: 'lines',
|
||||
icon: 'vn:lines',
|
||||
},
|
||||
component: () => import('src/pages/Order/OrderLines.vue'),
|
||||
component: () => import('src/pages/Order/Card/OrderLines.vue'),
|
||||
},
|
||||
],
|
||||
},
|
||||
|
|
Loading…
Reference in New Issue