fix(orderCatalogFilter): fix searchByTag
gitea/salix-front/pipeline/pr-master This commit looks good
Details
gitea/salix-front/pipeline/pr-master This commit looks good
Details
This commit is contained in:
parent
00fdbfa2e4
commit
c2db7be8cd
|
|
@ -1,5 +1,5 @@
|
|||
<script setup>
|
||||
import { computed, ref } from 'vue';
|
||||
import { computed, ref, onMounted } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useRoute } from 'vue-router';
|
||||
import axios from 'axios';
|
||||
|
|
@ -9,10 +9,9 @@ import VnSelect from 'components/common/VnSelect.vue';
|
|||
import VnFilterPanelChip from 'components/ui/VnFilterPanelChip.vue';
|
||||
import VnInput from 'src/components/common/VnInput.vue';
|
||||
import getParamWhere from 'src/filters/getParamWhere';
|
||||
// import CatalogFilterValueDialog from 'src/pages/Order/Card/CatalogFilterValueDialog.vue';
|
||||
import { useArrayData } from 'composables/useArrayData';
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const route = useRoute();
|
||||
const props = defineProps({
|
||||
dataKey: {
|
||||
type: String,
|
||||
|
|
@ -27,13 +26,19 @@ const props = defineProps({
|
|||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const { t } = useI18n();
|
||||
const route = useRoute();
|
||||
|
||||
const arrayData = useArrayData(props.dataKey);
|
||||
|
||||
const currentParams = ref({});
|
||||
const categoryList = ref(null);
|
||||
const selectedCategoryFk = ref(getParamWhere(route, 'categoryFk'));
|
||||
const selectedCategoryFk = ref(null);
|
||||
const typeList = ref([]);
|
||||
const selectedTypeFk = ref(null);
|
||||
const selectedTag = ref(null);
|
||||
const tagValues = ref([{}]);
|
||||
const tagOptions = ref([]);
|
||||
const searchByTag = ref(null);
|
||||
|
||||
const vnFilterPanelRef = ref();
|
||||
const orderByList = ref([
|
||||
{ id: 'relevancy DESC, name', name: t('params.relevancy'), priority: 999 },
|
||||
|
|
@ -48,32 +53,24 @@ const orderWayList = ref([
|
|||
const orderBySelected = ref('relevancy DESC, name');
|
||||
const orderWaySelected = ref('ASC');
|
||||
|
||||
const createValue = (val, done) => {
|
||||
if (val.length > 2) {
|
||||
if (!tagOptions.value.includes(val)) {
|
||||
done(tagOptions.value, 'add-unique');
|
||||
}
|
||||
tagValues.value.push({ value: val });
|
||||
}
|
||||
};
|
||||
const resetCategory = () => {
|
||||
const resetCategory = (params, search) => {
|
||||
selectedCategoryFk.value = null;
|
||||
typeList.value = null;
|
||||
};
|
||||
|
||||
const clearFilter = (key) => {
|
||||
if (key === 'categoryFk') {
|
||||
resetCategory();
|
||||
}
|
||||
params.categoryFk = null;
|
||||
params.typeFk = null;
|
||||
arrayData.store.userFilter = null;
|
||||
removeTagGroupParam(params, search);
|
||||
};
|
||||
|
||||
const selectCategory = (params, category, search) => {
|
||||
if (params.categoryFk === category?.id) {
|
||||
resetCategory();
|
||||
resetCategory(params, search);
|
||||
params.categoryFk = null;
|
||||
} else {
|
||||
selectedCategoryFk.value = category?.id;
|
||||
params.categoryFk = category?.id;
|
||||
params.typeFk = null;
|
||||
selectedTypeFk.value = null;
|
||||
loadTypes(category?.id);
|
||||
}
|
||||
search();
|
||||
|
|
@ -86,19 +83,12 @@ const loadTypes = async (categoryFk = selectedCategoryFk.value) => {
|
|||
typeList.value = data;
|
||||
};
|
||||
|
||||
const selectedCategory = computed(() =>
|
||||
(categoryList.value || []).find(
|
||||
const selectedCategory = computed(() => {
|
||||
return (categoryList.value || []).find(
|
||||
(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);
|
||||
});
|
||||
|
|
@ -114,37 +104,38 @@ function exprBuilder(param, value) {
|
|||
}
|
||||
}
|
||||
|
||||
const applyTagFilter = (params, search) => {
|
||||
if (!tagValues.value?.length) {
|
||||
const applyTags = (tagInfo, params, search) => {
|
||||
if (!tagInfo || !tagInfo.values.length) {
|
||||
params.tagGroups = null;
|
||||
search();
|
||||
return;
|
||||
}
|
||||
if (!params.tagGroups) {
|
||||
params.tagGroups = [];
|
||||
}
|
||||
params.tagGroups.push(
|
||||
JSON.stringify({
|
||||
values: tagValues.value.filter((obj) => Object.keys(obj).length > 0),
|
||||
tagSelection: {
|
||||
...selectedTag.value,
|
||||
orgShowField: selectedTag?.value?.name,
|
||||
},
|
||||
tagFk: selectedTag?.value?.tagFk,
|
||||
})
|
||||
);
|
||||
|
||||
if (!params.tagGroups) params.tagGroups = [];
|
||||
params.tagGroups.push(tagInfo);
|
||||
search();
|
||||
selectedTag.value = null;
|
||||
tagValues.value = [{}];
|
||||
};
|
||||
|
||||
const removeTagChip = (selection, params, search) => {
|
||||
if (params.tagGroups) {
|
||||
params.tagGroups = (params.tagGroups || []).filter(
|
||||
(value) => value !== selection
|
||||
);
|
||||
async function onSearchByTag(value) {
|
||||
if (!value.target.value) return;
|
||||
if (!currentParams.value?.tagGroups) {
|
||||
currentParams.value.tagGroups = [];
|
||||
}
|
||||
|
||||
currentParams.value.tagGroups.push({
|
||||
values: [{ value: value.target.value }],
|
||||
});
|
||||
searchByTag.value = null;
|
||||
}
|
||||
|
||||
const removeTagGroupParam = (params, search, valIndex = null) => {
|
||||
if (!valIndex) {
|
||||
params.tagGroups = null;
|
||||
search();
|
||||
} else {
|
||||
params.tagGroups.splice(valIndex, 1);
|
||||
search();
|
||||
}
|
||||
};
|
||||
|
||||
const setCategoryList = (data) => {
|
||||
|
|
@ -171,26 +162,27 @@ function addOrder(value, field, params) {
|
|||
params.orderBy = JSON.stringify(orderBy);
|
||||
vnFilterPanelRef.value.search();
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
selectedCategoryFk.value = getParamWhere(route, 'categoryFk');
|
||||
selectedTypeFk.value = getParamWhere(route, 'typeFk');
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FetchData url="ItemCategories" limit="30" auto-load @on-fetch="setCategoryList" />
|
||||
<FetchData url="ItemCategories" auto-load @on-fetch="setCategoryList" />
|
||||
<VnFilterPanel
|
||||
ref="vnFilterPanelRef"
|
||||
:data-key="props.dataKey"
|
||||
:hidden-tags="['orderFk', 'orderBy']"
|
||||
:un-removable-params="['orderFk', 'orderBy']"
|
||||
:expr-builder="exprBuilder"
|
||||
:custom-tags="['tagGroups']"
|
||||
@remove="clearFilter"
|
||||
:custom-tags="['tagGroups', 'categoryFk']"
|
||||
:redirect="false"
|
||||
search-url="params"
|
||||
v-model="currentParams"
|
||||
>
|
||||
<template #tags="{ tag, formatFn }">
|
||||
<strong v-if="tag.label === 'categoryFk'">
|
||||
{{ t(selectedCategory?.name || '') }}
|
||||
</strong>
|
||||
<strong v-else-if="tag.label === 'typeFk'">
|
||||
<strong v-if="tag.label === 'typeFk'">
|
||||
{{ t(selectedType?.name || '') }}
|
||||
</strong>
|
||||
<div v-else class="q-gutter-x-xs">
|
||||
|
|
@ -199,25 +191,37 @@ function addOrder(value, field, params) {
|
|||
</div>
|
||||
</template>
|
||||
<template #customTags="{ tags: customTags, params, searchFn }">
|
||||
<template v-for="tag in customTags" :key="tag.label">
|
||||
<template v-if="tag.label === 'tagGroups'">
|
||||
<template v-for="customTag in customTags" :key="customTag.label">
|
||||
<VnFilterPanelChip
|
||||
v-for="chip in tag.value"
|
||||
:key="chip"
|
||||
v-for="(tag, valIndex) in Array.isArray(customTag.value)
|
||||
? customTag.value
|
||||
: 1"
|
||||
:key="valIndex"
|
||||
removable
|
||||
@remove="removeTagChip(chip, params, searchFn)"
|
||||
@remove="
|
||||
customTag.label === 'categoryFk'
|
||||
? resetCategory(params, searchFn)
|
||||
: removeTagGroupParam(params, searchFn, valIndex)
|
||||
"
|
||||
>
|
||||
<strong> {{ JSON.parse(chip).tagSelection?.name }}: </strong>
|
||||
<span>{{
|
||||
(JSON.parse(chip).values || [])
|
||||
.map((item) => item.value)
|
||||
.join(' | ')
|
||||
}}</span>
|
||||
<strong v-if="customTag.label === 'categoryFk'">
|
||||
{{ t(selectedCategory?.name || '') }}
|
||||
</strong>
|
||||
<strong v-if="tag?.tagSelection?.name" class="q-mr-xs">
|
||||
{{ tag.tagSelection.name }}:
|
||||
</strong>
|
||||
<span>
|
||||
{{
|
||||
(tag?.values || [])
|
||||
.map((item) => `"${item.value}"`)
|
||||
.join(', ')
|
||||
}}
|
||||
</span>
|
||||
</VnFilterPanelChip>
|
||||
</template>
|
||||
</template>
|
||||
</template>
|
||||
<template #body="{ params, searchFn }">
|
||||
{{ params }}
|
||||
<QItem class="category-filter q-mt-md">
|
||||
<div
|
||||
v-for="category in categoryList"
|
||||
|
|
@ -298,91 +302,39 @@ function addOrder(value, field, params) {
|
|||
</QItemSection>
|
||||
</QItem>
|
||||
<QSeparator />
|
||||
<QItem class="q-mt-md">
|
||||
<QItemSection>
|
||||
<VnSelect
|
||||
:label="t('params.tag')"
|
||||
v-model="selectedTag"
|
||||
:options="props.tags || []"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
dense
|
||||
outlined
|
||||
rounded
|
||||
:emit-value="false"
|
||||
use-input
|
||||
/>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
<QItem
|
||||
v-for="(value, index) in tagValues"
|
||||
:key="value"
|
||||
class="q-mt-md filter-value"
|
||||
>
|
||||
<FetchData
|
||||
v-if="selectedTag"
|
||||
:url="`Tags/${selectedTag}/filterValue`"
|
||||
limit="30"
|
||||
auto-load
|
||||
@on-fetch="(data) => (tagOptions = data)"
|
||||
/>
|
||||
<VnSelect
|
||||
v-if="!selectedTag"
|
||||
:label="t('params.value')"
|
||||
v-model="value.value"
|
||||
:options="tagOptions || []"
|
||||
option-value="value"
|
||||
option-label="value"
|
||||
dense
|
||||
outlined
|
||||
rounded
|
||||
emit-value
|
||||
use-input
|
||||
class="filter-input"
|
||||
@new-value="createValue"
|
||||
@filter="filterFn"
|
||||
@update:model-value="applyTagFilter(params, searchFn)"
|
||||
/>
|
||||
<VnSelect
|
||||
v-else-if="selectedTag === 1"
|
||||
:label="t('params.value')"
|
||||
v-model="value.value"
|
||||
:options="tagOptions || []"
|
||||
option-value="value"
|
||||
option-label="value"
|
||||
dense
|
||||
outlined
|
||||
rounded
|
||||
emit-value
|
||||
use-input
|
||||
class="filter-input"
|
||||
@new-value="createValue"
|
||||
@update:model-value="applyTagFilter(params, searchFn)"
|
||||
/>
|
||||
<QItem class="q-mt-lg q-pa-none">
|
||||
<VnInput
|
||||
v-else
|
||||
:label="t('params.value')"
|
||||
v-model="value.value"
|
||||
:label="t('components.itemsFilterPanel.value')"
|
||||
dense
|
||||
outlined
|
||||
rounded
|
||||
class="filter-input"
|
||||
@keyup.enter="applyTagFilter(params, searchFn)"
|
||||
/>
|
||||
<QIcon
|
||||
name="delete"
|
||||
class="filter-icon"
|
||||
@click="(tagValues || []).splice(index, 1)"
|
||||
/>
|
||||
</QItem>
|
||||
<QItem class="q-mt-lg">
|
||||
:is-clearable="false"
|
||||
v-model="searchByTag"
|
||||
@keyup.enter="(val) => onSearchByTag(val, params)"
|
||||
>
|
||||
<template #prepend>
|
||||
<QIcon name="search" />
|
||||
</template>
|
||||
<template #append>
|
||||
<QBtn
|
||||
icon="add_circle"
|
||||
shortcut="+"
|
||||
flat
|
||||
class="filter-icon"
|
||||
@click="tagValues.push({})"
|
||||
color="primary"
|
||||
size="md"
|
||||
dense
|
||||
/>
|
||||
<QPopupProxy>
|
||||
<!-- <CatalogFilterValueDialog
|
||||
style="display: inline-block"
|
||||
:tags="tags"
|
||||
@apply-tags="
|
||||
($event) => applyTags($event, params, searchFn)
|
||||
"
|
||||
/> -->
|
||||
</QPopupProxy>
|
||||
</template>
|
||||
</VnInput>
|
||||
</QItem>
|
||||
<QSeparator />
|
||||
</template>
|
||||
|
|
@ -417,23 +369,6 @@ function addOrder(value, field, params) {
|
|||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.filter-icon {
|
||||
font-size: 24px;
|
||||
color: $primary;
|
||||
padding: 0 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.filter-input {
|
||||
flex-shrink: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.filter-value {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
<i18n>
|
||||
|
|
|
|||
Loading…
Reference in New Issue