forked from verdnatura/salix-front
Create order filter
This commit is contained in:
Kevin Martinez
parent
c0f6906119
commit
17dd42dd5c
|
|
@ -27,6 +27,10 @@ const $props = defineProps({
|
|||
type: String,
|
||||
default: '',
|
||||
},
|
||||
params: {
|
||||
type: Object,
|
||||
default: null,
|
||||
}
|
||||
});
|
||||
|
||||
const emit = defineEmits(['onFetch']);
|
||||
|
|
@ -46,7 +50,7 @@ async function fetch() {
|
|||
if ($props.limit) filter.limit = $props.limit;
|
||||
|
||||
const { data } = await axios.get($props.url, {
|
||||
params: { filter: JSON.stringify(filter) },
|
||||
params: { filter: JSON.stringify(filter), ...$props.params },
|
||||
});
|
||||
|
||||
emit('onFetch', data);
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import { useI18n } from 'vue-i18n';
|
|||
import FetchData from 'components/FetchData.vue';
|
||||
import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
|
||||
import VnSelectFilter from 'components/common/VnSelectFilter.vue';
|
||||
import VnInputDate from "components/common/VnInputDate.vue";
|
||||
|
||||
const { t } = useI18n();
|
||||
const props = defineProps({
|
||||
|
|
@ -13,10 +14,6 @@ const props = defineProps({
|
|||
},
|
||||
});
|
||||
|
||||
const workers = ref();
|
||||
const states = ref();
|
||||
|
||||
// New
|
||||
const agencyFilter = { fields: ['id', 'name'] };
|
||||
const agencyList = ref(null);
|
||||
const salesPersonFilter = {
|
||||
|
|
@ -24,12 +21,12 @@ const salesPersonFilter = {
|
|||
};
|
||||
const salesPersonList = ref(null);
|
||||
const sourceFilter = { fields: ['value'] };
|
||||
const sourceList = ref(null)
|
||||
const sourceList = ref(null);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FetchData
|
||||
url="AgencyMode/isActive"
|
||||
url="AgencyModes/isActive"
|
||||
:filter="agencyFilter"
|
||||
limit="30"
|
||||
sort-by="name ASC"
|
||||
|
|
@ -42,6 +39,7 @@ const sourceList = ref(null)
|
|||
limit="30"
|
||||
sort-by="nickname ASC"
|
||||
@on-fetch="(data) => (salesPersonList = data)"
|
||||
:params="{ departmentCodes: ['VT'] }"
|
||||
auto-load
|
||||
/>
|
||||
<FetchData
|
||||
|
|
@ -59,12 +57,12 @@ const sourceList = ref(null)
|
|||
<span>{{ formatFn(tag.value) }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #body="{ params, searchFn }">
|
||||
<template #body="{ params }">
|
||||
<QList dense>
|
||||
<QItem>
|
||||
<QItemSection>
|
||||
<QInput
|
||||
:label="t('Customer ID')"
|
||||
:label="t('customerId')"
|
||||
v-model="params.clientFk"
|
||||
lazy-rules
|
||||
>
|
||||
|
|
@ -74,139 +72,119 @@ const sourceList = ref(null)
|
|||
</QInput>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
<QItem>
|
||||
<QItemSection v-if="agencyList">
|
||||
<VnSelectFilter
|
||||
:label="t('agency')"
|
||||
v-model="params.agencyModeFk"
|
||||
:options="agencyList"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
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">
|
||||
<VnSelectFilter
|
||||
:label="t('salesPerson')"
|
||||
v-model="params.workerFk"
|
||||
:options="salesPersonList"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
emit-value
|
||||
map-options
|
||||
use-input
|
||||
:input-debounce="0"
|
||||
>
|
||||
<template #option="{ itemProps, opt }">
|
||||
<QItem v-bind="itemProps">
|
||||
<QItemSection>
|
||||
<QItemLabel>{{ opt.name }}</QItemLabel>
|
||||
<QItemLabel caption>
|
||||
{{ opt.nickname }},{{ opt.code }}
|
||||
</QItemLabel>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
</template>
|
||||
</VnSelectFilter>
|
||||
</QItemSection>
|
||||
<QItemSection v-else>
|
||||
<QSkeleton type="QInput" class="full-width" />
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
<QItem>
|
||||
<QItemSection>
|
||||
<VnInputDate
|
||||
v-model="params.from"
|
||||
:label="t('fromLanded')" />
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
<QItem>
|
||||
<QItemSection>
|
||||
<VnInputDate
|
||||
v-model="params.to"
|
||||
:label="t('toLanded')" />
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
<QItem>
|
||||
<QItemSection>
|
||||
<QInput
|
||||
:label="t('Client Name')"
|
||||
v-model="params.clientName"
|
||||
:label="t('orderId')"
|
||||
v-model="params.orderFk"
|
||||
lazy-rules
|
||||
/>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
<QItem>
|
||||
<QItemSection v-if="!workers">
|
||||
<QSkeleton type="QInput" class="full-width" />
|
||||
</QItemSection>
|
||||
<QItemSection v-if="workers">
|
||||
<QItemSection v-if="sourceList">
|
||||
<VnSelectFilter
|
||||
:label="t('Salesperson')"
|
||||
v-model="params.salesPersonFk"
|
||||
@update:model-value="searchFn()"
|
||||
:options="workers"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
:label="t('application')"
|
||||
v-model="params.sourceApp"
|
||||
:options="sourceList"
|
||||
option-label="value"
|
||||
emit-value
|
||||
map-options
|
||||
use-input
|
||||
: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 v-if="!workers">
|
||||
<QSkeleton type="QInput" class="full-width" />
|
||||
</QItemSection>
|
||||
<QItemSection v-if="workers">
|
||||
<VnSelectFilter
|
||||
:label="t('Attender')"
|
||||
v-model="params.attenderFk"
|
||||
@update:model-value="searchFn()"
|
||||
:options="workers"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
emit-value
|
||||
map-options
|
||||
use-input
|
||||
:input-debounce="0"
|
||||
<QItemSection>
|
||||
<QCheckbox
|
||||
v-model="params.isConfirmed"
|
||||
:label="t('isConfirmed')"
|
||||
toggle-indeterminate
|
||||
/>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
<QItem>
|
||||
<QItemSection v-if="!workers">
|
||||
<QSkeleton type="QInput" class="full-width" />
|
||||
</QItemSection>
|
||||
<QItemSection v-if="workers">
|
||||
<VnSelectFilter
|
||||
:label="t('Responsible')"
|
||||
v-model="params.claimResponsibleFk"
|
||||
@update:model-value="searchFn()"
|
||||
:options="workers"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
emit-value
|
||||
map-options
|
||||
use-input
|
||||
:input-debounce="0"
|
||||
<QItemSection>
|
||||
<QCheckbox
|
||||
v-model="params.showEmpty"
|
||||
:label="t('showEmpty')"
|
||||
/>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
<QItem class="q-mb-md">
|
||||
<QItemSection v-if="!states">
|
||||
<QSkeleton type="QInput" class="full-width" />
|
||||
</QItemSection>
|
||||
<QItemSection v-if="states">
|
||||
<VnSelectFilter
|
||||
:label="t('State')"
|
||||
v-model="params.claimStateFk"
|
||||
@update:model-value="searchFn()"
|
||||
:options="states"
|
||||
option-value="id"
|
||||
option-label="description"
|
||||
emit-value
|
||||
map-options
|
||||
/>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
<QSeparator />
|
||||
<QExpansionItem :label="t('More options')" expand-separator>
|
||||
<!-- <QItem>
|
||||
<QItemSection>
|
||||
<qSelect
|
||||
:label="t('Item')"
|
||||
v-model="params.itemFk"
|
||||
:options="items"
|
||||
:loading="loading"
|
||||
@filter="filterFn"
|
||||
@virtual-scroll="onScroll"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
emit-value
|
||||
map-options
|
||||
/>
|
||||
</QItemSection>
|
||||
</QItem> -->
|
||||
<QItem>
|
||||
<QItemSection>
|
||||
<QInput
|
||||
v-model="params.created"
|
||||
:label="t('Created')"
|
||||
autofocus
|
||||
readonly
|
||||
>
|
||||
<template #append>
|
||||
<QIcon name="event" class="cursor-pointer">
|
||||
<QPopupProxy
|
||||
cover
|
||||
transition-show="scale"
|
||||
transition-hide="scale"
|
||||
>
|
||||
<QDate v-model="params.created">
|
||||
<div class="row items-center justify-end">
|
||||
<QBtn
|
||||
v-close-popup
|
||||
:label="t('globals.close')"
|
||||
color="primary"
|
||||
flat
|
||||
/>
|
||||
</div>
|
||||
</QDate>
|
||||
</QPopupProxy>
|
||||
</QIcon>
|
||||
</template>
|
||||
</QInput>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
</QExpansionItem>
|
||||
</QList>
|
||||
</template>
|
||||
</VnFilterPanel>
|
||||
|
|
@ -215,31 +193,48 @@ const sourceList = ref(null)
|
|||
<i18n>
|
||||
en:
|
||||
params:
|
||||
search: Contains
|
||||
clientFk: Customer
|
||||
clientName: Customer
|
||||
salesPersonFk: Salesperson
|
||||
attenderFk: Attender
|
||||
claimResponsibleFk: Responsible
|
||||
claimStateFk: State
|
||||
created: Created
|
||||
search: Includes
|
||||
clientFk: Client
|
||||
agencyModeFk: Agency
|
||||
salesPersonFk: Sales Person
|
||||
from: From
|
||||
to: To
|
||||
orderFk: Order
|
||||
sourceApp: Application
|
||||
myTeam: My Team
|
||||
isConfirmed: Is Confirmed
|
||||
showEmpty: Show Empty
|
||||
customerId: Customer ID
|
||||
agency: Agency
|
||||
salesPerson: Sales Person
|
||||
fromLanded: From Landed
|
||||
toLanded: To Landed
|
||||
orderId: Order ID
|
||||
application: Application
|
||||
myTeam: My Team
|
||||
isConfirmed: Order Confirmed
|
||||
showEmpty: Show Empty
|
||||
es:
|
||||
params:
|
||||
search: Contiene
|
||||
search: Búsqueda
|
||||
clientFk: Cliente
|
||||
clientName: Cliente
|
||||
agencyModeFk: Agencia
|
||||
salesPersonFk: Comercial
|
||||
attenderFk: Asistente
|
||||
claimResponsibleFk: Responsable
|
||||
claimStateFk: Estado
|
||||
created: Creada
|
||||
Customer ID: ID cliente
|
||||
Client Name: Nombre del cliente
|
||||
Salesperson: Comercial
|
||||
Attender: Asistente
|
||||
Responsible: Responsable
|
||||
State: Estado
|
||||
Item: Artículo
|
||||
Created: Creada
|
||||
More options: Más opciones
|
||||
from: Desde
|
||||
to: Hasta
|
||||
orderFk: Cesta
|
||||
sourceApp: Aplicación
|
||||
myTeam: Mi Equipo
|
||||
isConfirmed: Confirmado
|
||||
showEmpty: Mostrar vacías
|
||||
customerId: ID Cliente
|
||||
agency: Agencia
|
||||
salesPerson: Comercial
|
||||
fromLanded: Desde F. entrega
|
||||
toLanded: Hasta F. entrega
|
||||
orderId: ID Cesta
|
||||
application: Aplicación
|
||||
myTeam: Mi Equipo
|
||||
isConfirmed: Confirmado
|
||||
showEmpty: Mostrar vacías
|
||||
</i18n>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<script setup>
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { onMounted } from 'vue';
|
||||
import { onMounted, onUnmounted } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useStateStore } from 'stores/useStateStore';
|
||||
import { toCurrency, toDate } from 'src/filters';
|
||||
|
|
@ -10,14 +10,14 @@ import CustomerDescriptorProxy from 'pages/Customer/Card/CustomerDescriptorProxy
|
|||
import VnPaginate from 'components/ui/VnPaginate.vue';
|
||||
import VnLv from 'components/ui/VnLv.vue';
|
||||
import OrderSearchbar from 'pages/Order/Card/OrderSearchbar.vue';
|
||||
import OrderFilter from "pages/Order/Card/OrderFilter.vue";
|
||||
|
||||
const stateStore = useStateStore();
|
||||
const router = useRouter();
|
||||
const { t } = useI18n();
|
||||
|
||||
onMounted(() => (stateStore.rightDrawer = false));
|
||||
// onMounted(() => (stateStore.rightDrawer = true));
|
||||
// onUnmounted(() => (stateStore.rightDrawer = false));
|
||||
onMounted(() => (stateStore.rightDrawer = true));
|
||||
onUnmounted(() => (stateStore.rightDrawer = false));
|
||||
|
||||
function navigate(id) {
|
||||
router.push({ path: `/order/${id}` });
|
||||
|
|
@ -29,27 +29,27 @@ function navigate(id) {
|
|||
<Teleport to="#searchbar">
|
||||
<OrderSearchbar />
|
||||
</Teleport>
|
||||
<!-- <Teleport to="#actions-append">-->
|
||||
<!-- <div class="row q-gutter-x-sm">-->
|
||||
<!-- <QBtn-->
|
||||
<!-- flat-->
|
||||
<!-- @click="stateStore.toggleRightDrawer()"-->
|
||||
<!-- round-->
|
||||
<!-- dense-->
|
||||
<!-- icon="menu"-->
|
||||
<!-- >-->
|
||||
<!-- <QTooltip bottom anchor="bottom right">-->
|
||||
<!-- {{ t('globals.collapseMenu') }}-->
|
||||
<!-- </QTooltip>-->
|
||||
<!-- </QBtn>-->
|
||||
<!-- </div>-->
|
||||
<!-- </Teleport>-->
|
||||
<Teleport to="#actions-append">
|
||||
<div class="row q-gutter-x-sm">
|
||||
<QBtn
|
||||
flat
|
||||
@click="stateStore.toggleRightDrawer()"
|
||||
round
|
||||
dense
|
||||
icon="menu"
|
||||
>
|
||||
<QTooltip bottom anchor="bottom right">
|
||||
{{ t('globals.collapseMenu') }}
|
||||
</QTooltip>
|
||||
</QBtn>
|
||||
</div>
|
||||
</Teleport>
|
||||
</template>
|
||||
<!-- <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>-->
|
||||
<!-- <QScrollArea class="fit text-grey-8">-->
|
||||
<!-- <ShelvingFilter data-key="OrderList" />-->
|
||||
<!-- </QScrollArea>-->
|
||||
<!-- </QDrawer>-->
|
||||
<QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
|
||||
<QScrollArea class="fit text-grey-8">
|
||||
<OrderFilter data-key="OrderList" />
|
||||
</QScrollArea>
|
||||
</QDrawer>
|
||||
<QPage class="column items-center q-pa-md">
|
||||
<div class="card-list">
|
||||
<VnPaginate
|
||||
|
|
@ -65,7 +65,7 @@ function navigate(id) {
|
|||
v-for="row of rows"
|
||||
:key="row.id"
|
||||
:id="row.id"
|
||||
:title="row.code"
|
||||
:title="`${row?.clientName} (${row?.clientFk})`"
|
||||
@click="navigate(row.id)"
|
||||
>
|
||||
<template #list-items>
|
||||
|
|
|
|||
Loading…
Reference in New Issue