feat: refs #8316 add slots on VnTable from VnFilterPanel
gitea/salix-front/pipeline/pr-dev This commit looks good
Details
gitea/salix-front/pipeline/pr-dev This commit looks good
Details
This commit is contained in:
parent
aee29345a5
commit
350dedd78d
|
|
@ -314,7 +314,19 @@ function handleSelection({ evt, added, rows: selectedRows }, rows) {
|
||||||
show-if-above
|
show-if-above
|
||||||
>
|
>
|
||||||
<QScrollArea class="fit">
|
<QScrollArea class="fit">
|
||||||
<VnTableFilter :data-key="$attrs['data-key']" :columns="columns" :redirect="redirect" />
|
<VnTableFilter
|
||||||
|
:data-key="$attrs['data-key']"
|
||||||
|
:columns="columns"
|
||||||
|
:redirect="redirect"
|
||||||
|
>
|
||||||
|
<template
|
||||||
|
v-for="(_, slotName) in $slots"
|
||||||
|
#[slotName]="slotData"
|
||||||
|
:key="slotName"
|
||||||
|
>
|
||||||
|
<slot :name="slotName" v-bind="slotData ?? {}" :key="slotName" />
|
||||||
|
</template>
|
||||||
|
</VnTableFilter>
|
||||||
</QScrollArea>
|
</QScrollArea>
|
||||||
</QDrawer>
|
</QDrawer>
|
||||||
<CrudModel
|
<CrudModel
|
||||||
|
|
|
||||||
|
|
@ -62,5 +62,8 @@ function columnName(col) {
|
||||||
<span>{{ formatFn(tag.value) }}</span>
|
<span>{{ formatFn(tag.value) }}</span>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
<template v-for="(_, slotName) in $slots" #[slotName]="slotData" :key="slotName">
|
||||||
|
<slot :name="slotName" v-bind="slotData ?? {}" :key="slotName" />
|
||||||
|
</template>
|
||||||
</VnFilterPanel>
|
</VnFilterPanel>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -1,177 +0,0 @@
|
||||||
<script setup>
|
|
||||||
import { useI18n } from 'vue-i18n';
|
|
||||||
import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
|
|
||||||
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 } });
|
|
||||||
</script>
|
|
||||||
<template>
|
|
||||||
<VnFilterPanel :data-key="dataKey" :search-button="true">
|
|
||||||
<template #tags="{ tag, formatFn }">
|
|
||||||
<div class="q-gutter-x-xs">
|
|
||||||
<strong>{{ t(`params.${tag.label}`) }}: </strong>
|
|
||||||
<span>{{ formatFn(tag.value) }}</span>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<template #body="{ params }">
|
|
||||||
<QItem>
|
|
||||||
<QItemSection>
|
|
||||||
<VnInput
|
|
||||||
:label="t('params.item')"
|
|
||||||
v-model="params.itemId"
|
|
||||||
is-outlined
|
|
||||||
lazy-rules
|
|
||||||
/>
|
|
||||||
</QItemSection>
|
|
||||||
</QItem>
|
|
||||||
<QItem>
|
|
||||||
<QItemSection>
|
|
||||||
<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"
|
|
||||||
dense
|
|
||||||
outlined
|
|
||||||
rounded
|
|
||||||
/>
|
|
||||||
</QItemSection>
|
|
||||||
</QItem>
|
|
||||||
<QItem>
|
|
||||||
<QItemSection>
|
|
||||||
<VnSelect
|
|
||||||
v-model="params.typeId"
|
|
||||||
url="ItemTypes"
|
|
||||||
: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"
|
|
||||||
:fields="['id', 'name']"
|
|
||||||
sort-by="name ASC"
|
|
||||||
:label="t('params.categoryId')"
|
|
||||||
option-label="name"
|
|
||||||
option-value="id"
|
|
||||||
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>
|
|
||||||
<i18n>
|
|
||||||
en:
|
|
||||||
params:
|
|
||||||
item: Item id
|
|
||||||
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>
|
|
||||||
|
|
@ -406,7 +406,6 @@ function handleLocation(data, location) {
|
||||||
:array-data-props="{
|
:array-data-props="{
|
||||||
url: 'Clients/filter',
|
url: 'Clients/filter',
|
||||||
order: ['id DESC'],
|
order: ['id DESC'],
|
||||||
exprBuilder,
|
|
||||||
}"
|
}"
|
||||||
>
|
>
|
||||||
<template #rightMenu>
|
<template #rightMenu>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue