forked from verdnatura/salix-front
feat: CustomerConsumptionFilter
This commit is contained in:
parent
14961d0aec
commit
390ab9cfd1
|
@ -5,6 +5,8 @@ import VnInput from 'src/components/common/VnInput.vue';
|
|||
import { QItem } from 'quasar';
|
||||
import VnSelect from 'src/components/common/VnSelect.vue';
|
||||
import { QItemSection } from 'quasar';
|
||||
import VnInputDate from 'src/components/common/VnInputDate.vue';
|
||||
import { toDate } from 'src/filters';
|
||||
|
||||
const { t } = useI18n();
|
||||
defineProps({ dataKey: { type: String, required: true } });
|
||||
|
@ -33,6 +35,8 @@ defineProps({ dataKey: { type: String, required: true } });
|
|||
<VnSelect
|
||||
v-model="params.buyerId"
|
||||
url="TicketRequests/getItemTypeWorker"
|
||||
:fields="['id', 'nickname']"
|
||||
sort-by="nickname ASC"
|
||||
:label="t('params.buyer')"
|
||||
option-value="id"
|
||||
option-label="nickname"
|
||||
|
@ -48,30 +52,93 @@ defineProps({ dataKey: { type: String, required: true } });
|
|||
<VnSelect
|
||||
v-model="params.typeId"
|
||||
url="ItemTypes"
|
||||
:label="t('params.type')"
|
||||
:include="['category']"
|
||||
:fields="['id', 'name', 'categoryFk']"
|
||||
sort-by="name ASC"
|
||||
:label="t('params.typeId')"
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
dense
|
||||
outlined
|
||||
rounded
|
||||
>
|
||||
<template #option="scope">
|
||||
<QItem v-bind="scope.itemProps">
|
||||
<QItemSection>
|
||||
<QItemLabel>{{ scope.opt?.name }}</QItemLabel>
|
||||
<QItemLabel caption>{{
|
||||
scope.opt?.category?.name
|
||||
}}</QItemLabel>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
</template>
|
||||
</VnSelect>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
<QItem>
|
||||
<QItemSection>
|
||||
<VnSelect
|
||||
v-model="params.categoryId"
|
||||
url="ItemCategories"
|
||||
:label="t('params.category')"
|
||||
:fields="['id', 'name']"
|
||||
sort-by="name ASC"
|
||||
:label="t('params.categoryId')"
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
v-model="params.categoryId"
|
||||
dense
|
||||
outlined
|
||||
rounded
|
||||
/>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
<QItem>
|
||||
<QItemSection>
|
||||
<VnSelect
|
||||
v-model="params.campaignId"
|
||||
url="Campaigns/latest"
|
||||
sort-by="dated DESC"
|
||||
:label="t('params.campaignId')"
|
||||
option-label="code"
|
||||
option-value="id"
|
||||
dense
|
||||
outlined
|
||||
rounded
|
||||
>
|
||||
<template #option="scope">
|
||||
<QItem v-bind="scope.itemProps">
|
||||
<QItemSection>
|
||||
<QItemLabel>{{
|
||||
t(`params.${scope.opt?.code}`)
|
||||
}}</QItemLabel>
|
||||
<QItemLabel caption>{{
|
||||
toDate(scope.opt.dated)
|
||||
}}</QItemLabel>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
</template>
|
||||
</VnSelect>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
<QItem>
|
||||
<QItemSection>
|
||||
<VnInputDate
|
||||
:label="t('params.from')"
|
||||
v-model="params.from"
|
||||
@update:model-value="searchFn()"
|
||||
is-outlined
|
||||
/>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
<QItem>
|
||||
<QItemSection>
|
||||
<VnInputDate
|
||||
:label="t('params.to')"
|
||||
v-model="params.to"
|
||||
@update:model-value="searchFn()"
|
||||
is-outlined
|
||||
/>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
</template>
|
||||
</VnFilterPanel>
|
||||
</template>
|
||||
|
@ -82,10 +149,30 @@ en:
|
|||
buyer: Buyer
|
||||
type: Type
|
||||
category: Category
|
||||
itemId: Item id
|
||||
buyerId: Buyer
|
||||
typeId: Type
|
||||
categoryId: Category
|
||||
from: From
|
||||
to: To
|
||||
campaignId: Campaña
|
||||
valentinesDay: Valentine's Day
|
||||
mothersDay: Mother's Day
|
||||
allSaints: All Saints' Day
|
||||
es:
|
||||
params:
|
||||
item: Id artículo
|
||||
buyer: Comprador
|
||||
type: Tipo
|
||||
category: Categoría
|
||||
itemId: Id Artículo
|
||||
buyerId: Comprador
|
||||
typeId: Tipo
|
||||
categoryId: Reino
|
||||
from: Desde
|
||||
to: Hasta
|
||||
campaignId: Campaña
|
||||
valentinesDay: Día de San Valentín
|
||||
mothersDay: Día de la Madre
|
||||
allSaints: Día de Todos los Santos
|
||||
</i18n>
|
||||
|
|
|
@ -1,56 +1,21 @@
|
|||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
|
||||
import VnSelect from 'src/components/common/VnSelect.vue';
|
||||
import VnInput from 'src/components/common/VnInput.vue';
|
||||
import FetchData from 'components/FetchData.vue';
|
||||
import VnInputDate from 'src/components/common/VnInputDate.vue';
|
||||
|
||||
const { t } = useI18n();
|
||||
const props = defineProps({
|
||||
defineProps({
|
||||
dataKey: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const buyersOptions = ref([]);
|
||||
const itemTypesOptions = ref([]);
|
||||
const itemCategoriesOptions = ref([]);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FetchData
|
||||
url="TicketRequests/getItemTypeWorker"
|
||||
:filter="{
|
||||
fields: ['id', 'nickname'],
|
||||
order: 'nickname ASC',
|
||||
}"
|
||||
@on-fetch="(data) => (buyersOptions = data)"
|
||||
auto-load
|
||||
/>
|
||||
<FetchData
|
||||
url="ItemTypes"
|
||||
:filter="{
|
||||
fields: ['id', 'name', 'categoryFk'],
|
||||
include: 'category',
|
||||
order: 'name ASC',
|
||||
}"
|
||||
@on-fetch="(data) => (itemTypesOptions = data)"
|
||||
auto-load
|
||||
/>
|
||||
<FetchData
|
||||
url="ItemCategories"
|
||||
:filter="{
|
||||
fields: ['id', 'name'],
|
||||
order: 'name ASC',
|
||||
}"
|
||||
@on-fetch="(data) => (itemCategoriesOptions = data)"
|
||||
auto-load
|
||||
/>
|
||||
<VnFilterPanel :data-key="props.dataKey" :search-button="true" :redirect="false">
|
||||
<VnFilterPanel :data-key="dataKey" :search-button="true" :redirect="false">
|
||||
<template #tags="{ tag, formatFn }">
|
||||
<div class="q-gutter-x-xs">
|
||||
<strong>{{ t(`params.${tag.label}`) }}: </strong>
|
||||
|
@ -82,7 +47,9 @@ const itemCategoriesOptions = ref([]);
|
|||
:label="t('params.buyerId')"
|
||||
v-model="params.buyerId"
|
||||
@update:model-value="searchFn()"
|
||||
:options="buyersOptions"
|
||||
url="TicketRequests/getItemTypeWorker"
|
||||
:fields="['id', 'nickname']"
|
||||
sort-by="nickname ASC"
|
||||
option-value="id"
|
||||
option-label="nickname"
|
||||
hide-selected
|
||||
|
@ -98,7 +65,10 @@ const itemCategoriesOptions = ref([]);
|
|||
:label="t('params.typeId')"
|
||||
v-model="params.typeId"
|
||||
@update:model-value="searchFn()"
|
||||
:options="itemTypesOptions"
|
||||
url="ItemTypes"
|
||||
:include="['category']"
|
||||
:fields="['id', 'name', 'categoryFk']"
|
||||
sort-by="name ASC"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
hide-selected
|
||||
|
@ -125,7 +95,9 @@ const itemCategoriesOptions = ref([]);
|
|||
:label="t('params.categoryId')"
|
||||
v-model="params.categoryId"
|
||||
@update:model-value="searchFn()"
|
||||
:options="itemCategoriesOptions"
|
||||
url="ItemCategories"
|
||||
:fields="['id', 'name']"
|
||||
sort-by="name ASC"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
hide-selected
|
||||
|
|
Loading…
Reference in New Issue