feat: 高级搜索-默认搜索条件和搜索条件下拉数据分情况显示
This commit is contained in:
parent
bb2a6ab074
commit
8da2ebc414
|
@ -13,7 +13,7 @@
|
||||||
<div class="one-line-text"> {{ formModel.name }}</div>
|
<div class="one-line-text"> {{ formModel.name }}</div>
|
||||||
</a-tooltip>
|
</a-tooltip>
|
||||||
<MsIcon
|
<MsIcon
|
||||||
v-if="formModel?.internalViewKey !== 'ALL_DATA'"
|
v-if="!isInternalViews(formModel?.id)"
|
||||||
type="icon-icon_edit_outlined"
|
type="icon-icon_edit_outlined"
|
||||||
class="min-w-[16px] cursor-pointer hover:text-[rgb(var(--primary-5))]"
|
class="min-w-[16px] cursor-pointer hover:text-[rgb(var(--primary-5))]"
|
||||||
@click="showNameInput"
|
@click="showNameInput"
|
||||||
|
@ -51,7 +51,7 @@
|
||||||
{{ t(option.title as string) }}
|
{{ t(option.title as string) }}
|
||||||
</a-option>
|
</a-option>
|
||||||
<a-divider
|
<a-divider
|
||||||
v-if="(props?.customList || [])?.length && (props.configList || []).length - 1 === currentOptionsIndex"
|
v-if="(props?.customList || [])?.length && (currentConfigList || []).length - 1 === currentOptionsIndex"
|
||||||
class="!my-1"
|
class="!my-1"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
@ -100,10 +100,11 @@
|
||||||
allow-search
|
allow-search
|
||||||
:placeholder="t('common.pleaseSelect')"
|
:placeholder="t('common.pleaseSelect')"
|
||||||
:disabled="isValueDisabled(item)"
|
:disabled="isValueDisabled(item)"
|
||||||
:options="props.memberOptions"
|
|
||||||
multiple
|
|
||||||
:search-keys="['label']"
|
:search-keys="['label']"
|
||||||
:max-tag-count="1"
|
v-bind="{
|
||||||
|
options: props.memberOptions,
|
||||||
|
multiple: true,
|
||||||
|
}"
|
||||||
/>
|
/>
|
||||||
<MsSelect
|
<MsSelect
|
||||||
v-else-if="item.type === FilterType.SELECT"
|
v-else-if="item.type === FilterType.SELECT"
|
||||||
|
@ -197,7 +198,7 @@
|
||||||
<a-button type="primary" @click="handleFilter">{{ t('common.filter') }}</a-button>
|
<a-button type="primary" @click="handleFilter">{{ t('common.filter') }}</a-button>
|
||||||
<a-button class="mr-[16px]" @click="handleReset">{{ t('common.reset') }}</a-button>
|
<a-button class="mr-[16px]" @click="handleReset">{{ t('common.reset') }}</a-button>
|
||||||
<MsButton
|
<MsButton
|
||||||
v-if="formModel?.internalViewKey !== 'ALL_DATA'"
|
v-if="!isInternalViews(formModel?.id)"
|
||||||
type="text"
|
type="text"
|
||||||
:loading="saveLoading"
|
:loading="saveLoading"
|
||||||
class="!text-[var(--color-text-1)]"
|
class="!text-[var(--color-text-1)]"
|
||||||
|
@ -205,7 +206,12 @@
|
||||||
>
|
>
|
||||||
{{ t('common.save') }}
|
{{ t('common.save') }}
|
||||||
</MsButton>
|
</MsButton>
|
||||||
<MsButton v-if="formModel?.id" type="text" class="!text-[var(--color-text-1)]" @click="handleToSaveAs">
|
<MsButton
|
||||||
|
v-if="formModel?.id && !isInternalViews(formModel?.id)"
|
||||||
|
type="text"
|
||||||
|
class="!text-[var(--color-text-1)]"
|
||||||
|
@click="handleToSaveAs"
|
||||||
|
>
|
||||||
{{ t('advanceFilter.saveAsView') }}
|
{{ t('advanceFilter.saveAsView') }}
|
||||||
</MsButton>
|
</MsButton>
|
||||||
</div>
|
</div>
|
||||||
|
@ -240,8 +246,8 @@
|
||||||
import { SelectValue } from '@/models/projectManagement/menuManagement';
|
import { SelectValue } from '@/models/projectManagement/menuManagement';
|
||||||
import { FilterType, OperatorEnum, ViewTypeEnum } from '@/enums/advancedFilterEnum';
|
import { FilterType, OperatorEnum, ViewTypeEnum } from '@/enums/advancedFilterEnum';
|
||||||
|
|
||||||
import { operatorOptionsMap } from './index';
|
import { getAllDataDefaultConditions, internalViewsHiddenConditionsMap, operatorOptionsMap } from './index';
|
||||||
import { ConditionsItem, FilterForm, FilterFormItem, FilterResult } from './type';
|
import { ConditionsItem, FilterForm, FilterFormItem, FilterResult, ViewItem } from './type';
|
||||||
|
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
configList: FilterFormItem[]; // 系统字段
|
configList: FilterFormItem[]; // 系统字段
|
||||||
|
@ -250,6 +256,7 @@
|
||||||
currentView: string; // 当前视图
|
currentView: string; // 当前视图
|
||||||
allViewNames: string[];
|
allViewNames: string[];
|
||||||
canNotAddView: boolean;
|
canNotAddView: boolean;
|
||||||
|
internalViews: ViewItem[]; // 系统视图
|
||||||
memberOptions: { label: string; value: string }[];
|
memberOptions: { label: string; value: string }[];
|
||||||
}>();
|
}>();
|
||||||
const emit = defineEmits<{
|
const emit = defineEmits<{
|
||||||
|
@ -268,12 +275,26 @@
|
||||||
};
|
};
|
||||||
const formModel = ref<FilterForm>(cloneDeep(defaultFormModel));
|
const formModel = ref<FilterForm>(cloneDeep(defaultFormModel));
|
||||||
const savedFormModel = ref(cloneDeep(formModel.value));
|
const savedFormModel = ref(cloneDeep(formModel.value));
|
||||||
|
|
||||||
|
const currentConfigList = computed<FilterFormItem[]>(() =>
|
||||||
|
props.configList.filter(
|
||||||
|
(item) => !(internalViewsHiddenConditionsMap[props.currentView] ?? []).includes(item.dataIndex as string)
|
||||||
|
)
|
||||||
|
);
|
||||||
|
function isInternalViews(id?: string): boolean {
|
||||||
|
return props.internalViews.some((item) => item.id === id);
|
||||||
|
}
|
||||||
|
|
||||||
function getListItemByDataIndex(dataIndex: string) {
|
function getListItemByDataIndex(dataIndex: string) {
|
||||||
return [...props.configList, ...(props.customList || [])].find((item) => item.dataIndex === dataIndex);
|
return [...currentConfigList.value, ...(props.customList || [])].find((item) => item.dataIndex === dataIndex);
|
||||||
}
|
}
|
||||||
async function getUserViewDetail(id: string) {
|
async function getUserViewDetail(id: string) {
|
||||||
try {
|
try {
|
||||||
const res = await getViewDetail(props.viewType, id);
|
const res = await getViewDetail(props.viewType, id);
|
||||||
|
// 全部数据默认显示搜索条件
|
||||||
|
if (res?.id === 'all_data') {
|
||||||
|
res.conditions = [...getAllDataDefaultConditions(props.viewType)];
|
||||||
|
}
|
||||||
const list: FilterFormItem[] = (res.conditions ?? [])?.map((item: ConditionsItem) => {
|
const list: FilterFormItem[] = (res.conditions ?? [])?.map((item: ConditionsItem) => {
|
||||||
const listItem = getListItemByDataIndex(item.name ?? '') as FilterFormItem;
|
const listItem = getListItemByDataIndex(item.name ?? '') as FilterFormItem;
|
||||||
return {
|
return {
|
||||||
|
@ -289,6 +310,15 @@
|
||||||
console.log(error);
|
console.log(error);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
watch(
|
||||||
|
() => visible.value,
|
||||||
|
async (val) => {
|
||||||
|
// 新建视图关闭后重新获取数据
|
||||||
|
if (!val && formModel.value?.id !== props.currentView) {
|
||||||
|
await getUserViewDetail(props.currentView);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
const isShowNameInput = ref(false);
|
const isShowNameInput = ref(false);
|
||||||
const viewNameInputRef = ref<InstanceType<typeof ViewNameInput>>();
|
const viewNameInputRef = ref<InstanceType<typeof ViewNameInput>>();
|
||||||
|
@ -319,7 +349,7 @@
|
||||||
const otherDataIndices = formModel.value.list
|
const otherDataIndices = formModel.value.list
|
||||||
.filter((listItem) => listItem.dataIndex !== currentDataIndex)
|
.filter((listItem) => listItem.dataIndex !== currentDataIndex)
|
||||||
.map((item: FilterFormItem) => item.dataIndex);
|
.map((item: FilterFormItem) => item.dataIndex);
|
||||||
return [...props.configList, ...(props.customList || [])]
|
return [...currentConfigList.value, ...(props.customList || [])]
|
||||||
.filter(({ dataIndex }) => !otherDataIndices.includes(dataIndex))
|
.filter(({ dataIndex }) => !otherDataIndices.includes(dataIndex))
|
||||||
.map((item) => ({ ...item, label: t(item.title as string) }));
|
.map((item) => ({ ...item, label: t(item.title as string) }));
|
||||||
};
|
};
|
||||||
|
@ -392,20 +422,12 @@
|
||||||
}
|
}
|
||||||
watch(
|
watch(
|
||||||
() => props.currentView,
|
() => props.currentView,
|
||||||
async (val) => {
|
async (val, oldValue) => {
|
||||||
await getUserViewDetail(val);
|
await getUserViewDetail(val);
|
||||||
|
if (!oldValue.length) return;
|
||||||
handleFilter();
|
handleFilter();
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
watch(
|
|
||||||
() => visible.value,
|
|
||||||
async (val) => {
|
|
||||||
// 新建视图关闭后重新获取数据
|
|
||||||
if (!val && formModel.value?.id !== props.currentView) {
|
|
||||||
await getUserViewDetail(props.currentView);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
// 数据改为新建视图的空数据
|
// 数据改为新建视图的空数据
|
||||||
function resetToNewViewForm() {
|
function resetToNewViewForm() {
|
||||||
|
@ -424,6 +446,7 @@
|
||||||
};
|
};
|
||||||
savedFormModel.value = cloneDeep(formModel.value);
|
savedFormModel.value = cloneDeep(formModel.value);
|
||||||
}
|
}
|
||||||
|
|
||||||
// 保存视图
|
// 保存视图
|
||||||
const saveLoading = ref(false);
|
const saveLoading = ref(false);
|
||||||
function realSaveView() {
|
function realSaveView() {
|
||||||
|
@ -460,6 +483,7 @@
|
||||||
realSaveView();
|
realSaveView();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 开启另存为视图模式
|
// 开启另存为视图模式
|
||||||
const isSaveAsView = ref(false);
|
const isSaveAsView = ref(false);
|
||||||
const saveAsViewForm = ref({ name: '' });
|
const saveAsViewForm = ref({ name: '' });
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import { FilterType, OperatorEnum } from '@/enums/advancedFilterEnum';
|
import { FilterType, OperatorEnum, ViewTypeEnum } from '@/enums/advancedFilterEnum';
|
||||||
|
|
||||||
export { default as MsAdvanceFilter } from './index.vue';
|
export { default as MsAdvanceFilter } from './index.vue';
|
||||||
|
|
||||||
|
@ -167,26 +167,18 @@ export const CustomTypeMaps: Record<string, any> = {
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
export const defaultFormModelList = [
|
// 全部数据默认显示搜索条件:ID、名称、模块;
|
||||||
{
|
// TODO lmy 计划详情功能用例增加:测试点;接口定义、计划详情接口用例增加:协议;
|
||||||
dataIndex: 'id',
|
export function getAllDataDefaultConditions(viewType: ViewTypeEnum) {
|
||||||
title: 'caseManagement.featureCase.tableColumnID',
|
const conditions = [
|
||||||
type: FilterType.INPUT,
|
{ name: 'id', operator: OperatorEnum.CONTAINS },
|
||||||
operator: OperatorEnum.CONTAINS,
|
{ name: 'name', operator: OperatorEnum.CONTAINS },
|
||||||
value: '',
|
{ name: 'moduleId', operator: OperatorEnum.BELONG_TO },
|
||||||
},
|
];
|
||||||
{
|
return conditions;
|
||||||
dataIndex: 'name',
|
}
|
||||||
label: 'common.name',
|
|
||||||
type: FilterType.INPUT,
|
// 系统视图对应不显示的第一列下拉条件
|
||||||
operator: OperatorEnum.CONTAINS,
|
export const internalViewsHiddenConditionsMap: Record<string, string[]> = {
|
||||||
value: '',
|
my_create: ['createUser'],
|
||||||
},
|
};
|
||||||
{
|
|
||||||
dataIndex: 'moduleId',
|
|
||||||
label: 'common.belongModule',
|
|
||||||
type: FilterType.TREE_SELECT,
|
|
||||||
operator: OperatorEnum.BELONG_TO,
|
|
||||||
value: '',
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
|
@ -113,11 +113,13 @@
|
||||||
</MsTag>
|
</MsTag>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- TODO lmy 高级搜索全部覆盖后将此代码删除:?? ViewTypeEnum.FUNCTIONAL_CASE -->
|
||||||
<FilterDrawer
|
<FilterDrawer
|
||||||
ref="filterDrawerRef"
|
ref="filterDrawerRef"
|
||||||
v-model:visible="visible"
|
v-model:visible="visible"
|
||||||
:current-view="currentView"
|
:current-view="currentView"
|
||||||
:view-type="props.viewType as ViewTypeEnum"
|
:view-type="props.viewType ?? ViewTypeEnum.FUNCTIONAL_CASE"
|
||||||
|
:internal-views="internalViews"
|
||||||
:all-view-names="allViewNames"
|
:all-view-names="allViewNames"
|
||||||
:config-list="props.filterConfigList"
|
:config-list="props.filterConfigList"
|
||||||
:custom-list="props.customFieldsConfigList"
|
:custom-list="props.customFieldsConfigList"
|
||||||
|
@ -159,7 +161,7 @@
|
||||||
|
|
||||||
const emit = defineEmits<{
|
const emit = defineEmits<{
|
||||||
(e: 'keywordSearch', value: string | undefined): void; // keyword 搜索 TODO:可以去除,父组件通过 v-model:keyword 获取关键字
|
(e: 'keywordSearch', value: string | undefined): void; // keyword 搜索 TODO:可以去除,父组件通过 v-model:keyword 获取关键字
|
||||||
(e: 'advSearch', value: FilterResult): void; // 高级搜索
|
(e: 'advSearch', value: FilterResult, viewId: string): void; // 高级搜索
|
||||||
(e: 'refresh', value: FilterResult): void;
|
(e: 'refresh', value: FilterResult): void;
|
||||||
}>();
|
}>();
|
||||||
|
|
||||||
|
@ -273,7 +275,7 @@
|
||||||
// 开启高级筛选:非默认视图或有筛选条件
|
// 开启高级筛选:非默认视图或有筛选条件
|
||||||
isAdvancedSearchMode.value = currentView.value !== internalViews.value[0].id || haveConditions;
|
isAdvancedSearchMode.value = currentView.value !== internalViews.value[0].id || haveConditions;
|
||||||
filterResult.value = filter;
|
filterResult.value = filter;
|
||||||
emit('advSearch', filter);
|
emit('advSearch', filter, currentView.value);
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleRefresh = () => {
|
const handleRefresh = () => {
|
||||||
|
|
|
@ -84,7 +84,6 @@ export interface ViewDetail extends ViewParams {
|
||||||
userId?: string;
|
userId?: string;
|
||||||
viewType?: string;
|
viewType?: string;
|
||||||
internal?: boolean; // 是否为内置视图
|
internal?: boolean; // 是否为内置视图
|
||||||
internalViewKey?: string;
|
|
||||||
createTime?: number;
|
createTime?: number;
|
||||||
updateTime?: number;
|
updateTime?: number;
|
||||||
}
|
}
|
||||||
|
|
|
@ -89,6 +89,8 @@ export default function useTableProps<T>(
|
||||||
const keyword = ref('');
|
const keyword = ref('');
|
||||||
// 高级筛选
|
// 高级筛选
|
||||||
const advanceFilter = reactive<FilterResult>({ searchMode: 'AND', conditions: [] });
|
const advanceFilter = reactive<FilterResult>({ searchMode: 'AND', conditions: [] });
|
||||||
|
// 视图Id
|
||||||
|
const viewId = ref('');
|
||||||
// 表格请求参数集合
|
// 表格请求参数集合
|
||||||
const tableQueryParams = ref<TableQueryParams>({});
|
const tableQueryParams = ref<TableQueryParams>({});
|
||||||
|
|
||||||
|
@ -165,9 +167,10 @@ export default function useTableProps<T>(
|
||||||
};
|
};
|
||||||
|
|
||||||
// 设置 advanceFilter
|
// 设置 advanceFilter
|
||||||
const setAdvanceFilter = (v: FilterResult) => {
|
const setAdvanceFilter = (v: FilterResult, id: string) => {
|
||||||
advanceFilter.searchMode = v.searchMode;
|
advanceFilter.searchMode = v.searchMode;
|
||||||
advanceFilter.conditions = v.conditions;
|
advanceFilter.conditions = v.conditions;
|
||||||
|
viewId.value = id;
|
||||||
// 基础筛选都清空
|
// 基础筛选都清空
|
||||||
loadListParams.value.filter = {};
|
loadListParams.value.filter = {};
|
||||||
keyword.value = '';
|
keyword.value = '';
|
||||||
|
@ -234,6 +237,7 @@ export default function useTableProps<T>(
|
||||||
pageSize: currentPageSize,
|
pageSize: currentPageSize,
|
||||||
sort: sortItem.value,
|
sort: sortItem.value,
|
||||||
keyword: keyword.value,
|
keyword: keyword.value,
|
||||||
|
viewId: viewId.value,
|
||||||
combineSearch: advanceFilter,
|
combineSearch: advanceFilter,
|
||||||
...loadListParams.value,
|
...loadListParams.value,
|
||||||
filter: {
|
filter: {
|
||||||
|
@ -608,6 +612,7 @@ export default function useTableProps<T>(
|
||||||
propsRes,
|
propsRes,
|
||||||
propsEvent,
|
propsEvent,
|
||||||
advanceFilter,
|
advanceFilter,
|
||||||
|
viewId,
|
||||||
setProps,
|
setProps,
|
||||||
setLoading,
|
setLoading,
|
||||||
loadList,
|
loadList,
|
||||||
|
|
|
@ -936,6 +936,7 @@
|
||||||
const {
|
const {
|
||||||
propsRes,
|
propsRes,
|
||||||
propsEvent,
|
propsEvent,
|
||||||
|
viewId,
|
||||||
advanceFilter,
|
advanceFilter,
|
||||||
loadList,
|
loadList,
|
||||||
setLoadListParams,
|
setLoadListParams,
|
||||||
|
@ -985,6 +986,7 @@
|
||||||
return {
|
return {
|
||||||
keyword: keyword.value,
|
keyword: keyword.value,
|
||||||
filter: propsRes.value.filter,
|
filter: propsRes.value.filter,
|
||||||
|
viewId: viewId.value,
|
||||||
combineSearch: advanceFilter,
|
combineSearch: advanceFilter,
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
@ -1625,12 +1627,12 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// 高级检索
|
// 高级检索
|
||||||
const handleAdvSearch = async (filter: FilterResult) => {
|
const handleAdvSearch = async (filter: FilterResult, id: string) => {
|
||||||
resetSelector();
|
resetSelector();
|
||||||
emit('setActiveFolder');
|
emit('setActiveFolder');
|
||||||
keyword.value = '';
|
keyword.value = '';
|
||||||
await getLoadListParams(); // 基础筛选都清空
|
await getLoadListParams(); // 基础筛选都清空
|
||||||
setAdvanceFilter(filter);
|
setAdvanceFilter(filter, id);
|
||||||
loadList();
|
loadList();
|
||||||
};
|
};
|
||||||
// 更新用例等级
|
// 更新用例等级
|
||||||
|
|
|
@ -223,7 +223,7 @@
|
||||||
const currentProjectId = computed(() => appStore.currentProjectId);
|
const currentProjectId = computed(() => appStore.currentProjectId);
|
||||||
const scrollWidth = ref<number>(3400);
|
const scrollWidth = ref<number>(3400);
|
||||||
|
|
||||||
const { propsRes, propsEvent, loadList, setLoadListParams, resetSelector, setAdvanceFilter, setKeyword } = useTable(
|
const { propsRes, propsEvent, loadList, setLoadListParams, resetSelector, setKeyword } = useTable(
|
||||||
getRecycleListRequest,
|
getRecycleListRequest,
|
||||||
{
|
{
|
||||||
tableKey: TableKeyEnum.CASE_MANAGEMENT_RECYCLE_TABLE,
|
tableKey: TableKeyEnum.CASE_MANAGEMENT_RECYCLE_TABLE,
|
||||||
|
|
Loading…
Reference in New Issue