feat: 高级搜索-调整数据结构&开启高级筛选隐藏基础筛选
This commit is contained in:
parent
45eea8dd75
commit
5c4de546d9
|
@ -195,7 +195,7 @@
|
|||
import { useVModel } from '@vueuse/core';
|
||||
|
||||
import { CustomTypeMaps, MsAdvanceFilter } from '@/components/pure/ms-advance-filter';
|
||||
import { FilterFormItem, FilterType } from '@/components/pure/ms-advance-filter/type';
|
||||
import { FilterFormItem } from '@/components/pure/ms-advance-filter/type';
|
||||
import MsDrawer from '@/components/pure/ms-drawer/index.vue';
|
||||
import MsIcon from '@/components/pure/ms-icon-font/index.vue';
|
||||
import MsBaseTable from '@/components/pure/ms-table/base-table.vue';
|
||||
|
@ -215,6 +215,7 @@
|
|||
import type { CaseManagementTable } from '@/models/caseManagement/featureCase';
|
||||
import type { CommonList, ModuleTreeNode, TableQueryParams } from '@/models/common';
|
||||
import type { ProjectListItem } from '@/models/setting/project';
|
||||
import { FilterType } from '@/enums/advancedFilterEnum';
|
||||
import { ProtocolKeyEnum } from '@/enums/apiEnum';
|
||||
import { CaseLinkEnum } from '@/enums/caseEnum';
|
||||
import { CaseManagementRouteEnum } from '@/enums/routeEnum';
|
||||
|
|
|
@ -22,7 +22,7 @@
|
|||
</div>
|
||||
</template>
|
||||
<a-form ref="formRef" :model="formModel" layout="vertical">
|
||||
<a-select v-model="formModel.andOrType" :options="andOrTypeOptions" class="mb-[12px] w-[170px]">
|
||||
<a-select v-model="formModel.searchMode" :options="searchModeOptions" class="mb-[12px] w-[170px]">
|
||||
<template #prefix> {{ t('advanceFilter.meetTheFollowingConditions') }} </template>
|
||||
</a-select>
|
||||
<div
|
||||
|
@ -134,14 +134,14 @@
|
|||
</template>
|
||||
</a-tree-select>
|
||||
<a-date-picker
|
||||
v-else-if="item.type === FilterType.DATE_PICKER && item.operator !== 'between'"
|
||||
v-else-if="item.type === FilterType.DATE_PICKER && item.operator !== OperatorEnum.BETWEEN"
|
||||
v-model:model-value="item.value"
|
||||
show-time
|
||||
format="YYYY-MM-DD hh:mm"
|
||||
:disabled="isValueDisabled(item)"
|
||||
/>
|
||||
<a-range-picker
|
||||
v-else-if="item.type === FilterType.DATE_PICKER && item.operator === 'between'"
|
||||
v-else-if="item.type === FilterType.DATE_PICKER && item.operator === OperatorEnum.BETWEEN"
|
||||
v-model:model-value="item.value"
|
||||
show-time
|
||||
format="YYYY-MM-DD HH:mm"
|
||||
|
@ -192,7 +192,7 @@
|
|||
<template #footer>
|
||||
<div v-show="!isSaveAsView" class="flex items-center gap-[8px]">
|
||||
<a-button type="primary" @click="handleFilter">{{ t('common.filter') }}</a-button>
|
||||
<a-button class="mr-[16px]">{{ t('common.reset') }}</a-button>
|
||||
<a-button class="mr-[16px]" @click="handleReset">{{ t('common.reset') }}</a-button>
|
||||
<MsButton type="text" class="!text-[var(--color-text-1)]"> {{ t('common.save') }}</MsButton>
|
||||
<MsButton type="text" class="!text-[var(--color-text-1)]" @click="isSaveAsView = true">
|
||||
{{ t('advanceFilter.saveAsView') }}
|
||||
|
@ -215,6 +215,7 @@
|
|||
|
||||
<script lang="ts" setup>
|
||||
import { FormInstance, InputInstance } from '@arco-design/web-vue';
|
||||
import { cloneDeep } from 'lodash-es';
|
||||
|
||||
import MsButton from '@/components/pure/ms-button/index.vue';
|
||||
import MsDrawer from '@/components/pure/ms-drawer/index.vue';
|
||||
|
@ -224,10 +225,10 @@
|
|||
import { useI18n } from '@/hooks/useI18n';
|
||||
|
||||
import { SelectValue } from '@/models/projectManagement/menuManagement';
|
||||
import { OperatorEnum } from '@/enums/advancedFilterEnum';
|
||||
import { FilterType, OperatorEnum } from '@/enums/advancedFilterEnum';
|
||||
|
||||
import { defaultFormModelList, operatorOptionsMap } from './index';
|
||||
import { AccordBelowType, BackEndEnum, FilterFormItem, FilterResult, FilterType } from './type';
|
||||
import { AccordBelowType, FilterFormItem, FilterResult } from './type';
|
||||
|
||||
const props = defineProps<{
|
||||
configList: FilterFormItem[]; // 系统字段
|
||||
|
@ -241,11 +242,12 @@
|
|||
const { t } = useI18n();
|
||||
|
||||
// TODO lmy 联调
|
||||
const formModel = ref<{ name: string; andOrType: AccordBelowType; list: FilterFormItem[] }>({
|
||||
const formModel = ref<{ name: string; searchMode: AccordBelowType; list: FilterFormItem[] }>({
|
||||
name: '111',
|
||||
andOrType: 'AND',
|
||||
searchMode: 'AND',
|
||||
list: [...defaultFormModelList],
|
||||
});
|
||||
const savedFormModel = ref(cloneDeep(formModel.value));
|
||||
|
||||
const isShowNameInput = ref(false);
|
||||
const nameInputRef = ref<InputInstance>();
|
||||
|
@ -256,7 +258,7 @@
|
|||
});
|
||||
}
|
||||
|
||||
const andOrTypeOptions = [
|
||||
const searchModeOptions = [
|
||||
{ value: 'AND', label: t('advanceFilter.and') },
|
||||
{ value: 'OR', label: t('advanceFilter.or') },
|
||||
];
|
||||
|
@ -280,7 +282,7 @@
|
|||
return (
|
||||
listItem.selectProps?.multiple ||
|
||||
[FilterType.CHECKBOX, FilterType.TAGS_INPUT].includes(listItem.type) ||
|
||||
(listItem.type === FilterType.DATE_PICKER && listItem.operator === 'between')
|
||||
(listItem.type === FilterType.DATE_PICKER && listItem.operator === OperatorEnum.BETWEEN)
|
||||
);
|
||||
}
|
||||
// 第一列下拉数据
|
||||
|
@ -306,8 +308,8 @@
|
|||
const optionsValueList = operatorOptionsMap[formModel.value.list[index].type].map(
|
||||
(optionItem) => optionItem.value
|
||||
);
|
||||
if (optionsValueList.includes(OperatorEnum.LIKE)) {
|
||||
formModel.value.list[index].operator = OperatorEnum.LIKE;
|
||||
if (optionsValueList.includes(OperatorEnum.CONTAINS)) {
|
||||
formModel.value.list[index].operator = OperatorEnum.CONTAINS;
|
||||
} else if (optionsValueList.includes(OperatorEnum.BELONG_TO)) {
|
||||
formModel.value.list[index].operator = OperatorEnum.BELONG_TO;
|
||||
} else if (optionsValueList.includes(OperatorEnum.EQUAL)) {
|
||||
|
@ -335,16 +337,31 @@
|
|||
dataIndex: '',
|
||||
type: FilterType.INPUT,
|
||||
value: '',
|
||||
backendType: BackEndEnum.STRING,
|
||||
};
|
||||
formModel.value.list.push(item);
|
||||
}
|
||||
|
||||
function getParams() {
|
||||
const conditions = formModel.value.list.map(({ value, operator, customField, dataIndex }) => ({
|
||||
value,
|
||||
operator,
|
||||
customField: customField ?? false,
|
||||
key: dataIndex,
|
||||
}));
|
||||
return { searchMode: formModel.value.searchMode, conditions };
|
||||
}
|
||||
|
||||
// TODO lmy 根据视图重置
|
||||
function handleReset() {
|
||||
formModel.value = cloneDeep(savedFormModel.value);
|
||||
emit('handleFilter', { searchMode: formModel.value.searchMode, conditions: [] });
|
||||
}
|
||||
|
||||
function handleFilter() {
|
||||
formRef.value?.validate((errors) => {
|
||||
if (!errors) {
|
||||
// TODO lmy 联调
|
||||
emit('handleFilter', { accordBelow: 'AND', combine: {} });
|
||||
visible.value = false;
|
||||
emit('handleFilter', getParams());
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
|
@ -1,11 +1,7 @@
|
|||
import { OperatorEnum } from '@/enums/advancedFilterEnum';
|
||||
|
||||
import { BackEndEnum, FilterType } from './type';
|
||||
import { FilterType, OperatorEnum } from '@/enums/advancedFilterEnum';
|
||||
|
||||
export { default as MsAdvanceFilter } from './index.vue';
|
||||
|
||||
export const LIKE = { label: 'advanceFilter.operator.contains', value: OperatorEnum.LIKE }; // 包含
|
||||
export const NOT_LIKE = { label: 'advanceFilter.operator.not_contains', value: OperatorEnum.NOT_LIKE }; // 不包含
|
||||
export const BELONG_TO = { label: 'advanceFilter.operator.belongTo', value: OperatorEnum.BELONG_TO }; // 属于
|
||||
export const NOT_BELONG_TO = { label: 'advanceFilter.operator.notBelongTo', value: OperatorEnum.NOT_BELONG_TO }; // 不属于
|
||||
export const GT = { label: 'advanceFilter.operator.gt', value: OperatorEnum.GT }; // 大于
|
||||
|
@ -15,12 +11,14 @@ export const LE = { label: 'advanceFilter.operator.le', value: 'LT_OR_EQUALS' };
|
|||
export const EQUAL = { label: 'advanceFilter.operator.equal', value: OperatorEnum.EQUAL }; // 等于
|
||||
export const NOT_EQUAL = { label: 'advanceFilter.operator.notEqual', value: OperatorEnum.NOT_EQUAL }; // 不等于
|
||||
export const BETWEEN = { label: 'advanceFilter.operator.between', value: OperatorEnum.BETWEEN }; // 介于
|
||||
export const COUNT_GT = { label: 'advanceFilter.operator.length.gt', value: OperatorEnum.COUNT_GT }; // 数量大下
|
||||
export const COUNT_LT = { label: 'advanceFilter.operator.length.lt', value: OperatorEnum.COUNT_LT }; // 数量小于
|
||||
|
||||
export const EMPTY = { label: 'advanceFilter.operator.empty', value: OperatorEnum.EMPTY }; // 为空
|
||||
export const NOT_EMPTY = { label: 'advanceFilter.operator.not_empty', value: OperatorEnum.NOT_EMPTY }; // 不为空
|
||||
export const NO_CHECK = { label: 'advanceFilter.operator.no_check', value: 'UNCHECK' }; // 不校验
|
||||
export const CONTAINS = { label: 'advanceFilter.operator.contains', value: 'CONTAINS' }; // 包含
|
||||
export const NO_CONTAINS = { label: 'advanceFilter.operator.not_contains', value: 'NOT_CONTAINS' }; // 不包含
|
||||
export const CONTAINS = { label: 'advanceFilter.operator.contains', value: OperatorEnum.CONTAINS }; // 包含
|
||||
export const NO_CONTAINS = { label: 'advanceFilter.operator.not_contains', value: OperatorEnum.NOT_CONTAINS }; // 不包含
|
||||
export const START_WITH = { label: 'advanceFilter.operator.start_with', value: 'START_WITH' }; // 以...开始
|
||||
export const END_WITH = { label: 'advanceFilter.operator.end_with', value: 'END_WITH' }; // 以...结束
|
||||
export const REGEX = { label: 'advanceFilter.operator.regexp', value: 'REGEX' }; // 正则匹配
|
||||
|
@ -30,7 +28,7 @@ export const LENGTH_GE = { label: 'advanceFilter.operator.length.ge', value: 'LE
|
|||
export const LENGTH_LT = { label: 'advanceFilter.operator.length.lt', value: 'LENGTH_LT' }; // 长度小于
|
||||
export const LENGTH_LE = { label: 'advanceFilter.operator.length.le', value: 'LENGTH_LT_OR_EQUALS' }; // 长度小于等于
|
||||
|
||||
const COMMON_TEXT_OPERATORS = [LIKE, NOT_LIKE, EMPTY, NOT_EMPTY, EQUAL, NOT_EQUAL];
|
||||
const COMMON_TEXT_OPERATORS = [CONTAINS, NO_CONTAINS, EMPTY, NOT_EMPTY, EQUAL, NOT_EQUAL];
|
||||
const COMMON_SELECTION_OPERATORS = [BELONG_TO, NOT_BELONG_TO, EMPTY, NOT_EMPTY];
|
||||
|
||||
export const operatorOptionsMap: Record<string, { value: string; label: string }[]> = {
|
||||
|
@ -40,7 +38,7 @@ export const operatorOptionsMap: Record<string, { value: string; label: string }
|
|||
[FilterType.RADIO]: COMMON_SELECTION_OPERATORS,
|
||||
[FilterType.CHECKBOX]: COMMON_SELECTION_OPERATORS,
|
||||
[FilterType.SELECT]: COMMON_SELECTION_OPERATORS,
|
||||
[FilterType.TAGS_INPUT]: [EMPTY, LIKE, NOT_LIKE, LENGTH_LT, LENGTH_GT],
|
||||
[FilterType.TAGS_INPUT]: [EMPTY, CONTAINS, NO_CONTAINS, COUNT_LT, COUNT_GT],
|
||||
[FilterType.TREE_SELECT]: [BELONG_TO, NOT_BELONG_TO],
|
||||
[FilterType.DATE_PICKER]: [BETWEEN, EQUAL, EMPTY, NOT_EMPTY],
|
||||
};
|
||||
|
@ -173,17 +171,15 @@ export const defaultFormModelList = [
|
|||
dataIndex: 'id',
|
||||
title: 'caseManagement.featureCase.tableColumnID',
|
||||
type: FilterType.INPUT,
|
||||
operator: OperatorEnum.LIKE,
|
||||
operator: OperatorEnum.CONTAINS,
|
||||
value: '',
|
||||
backendType: BackEndEnum.STRING,
|
||||
},
|
||||
{
|
||||
dataIndex: 'name',
|
||||
label: 'common.name',
|
||||
type: FilterType.INPUT,
|
||||
operator: OperatorEnum.LIKE,
|
||||
operator: OperatorEnum.CONTAINS,
|
||||
value: '',
|
||||
backendType: BackEndEnum.STRING,
|
||||
},
|
||||
{
|
||||
dataIndex: 'moduleId',
|
||||
|
@ -191,6 +187,5 @@ export const defaultFormModelList = [
|
|||
type: FilterType.TREE_SELECT,
|
||||
operator: OperatorEnum.BELONG_TO,
|
||||
value: '',
|
||||
backendType: BackEndEnum.STRING,
|
||||
},
|
||||
];
|
||||
|
|
|
@ -21,7 +21,7 @@
|
|||
</slot>
|
||||
<div class="flex flex-row gap-[12px]">
|
||||
<a-input-search
|
||||
v-if="!props.notShowInputSearch"
|
||||
v-if="!props.notShowInputSearch && !isAdvancedSearchMode"
|
||||
v-model:modelValue="keyword"
|
||||
size="small"
|
||||
:placeholder="props.searchPlaceholder"
|
||||
|
@ -34,13 +34,13 @@
|
|||
<a-button
|
||||
v-if="props.showFilter"
|
||||
type="outline"
|
||||
:class="`${visible ? '' : 'arco-btn-outline--secondary'} p-[0_8px]`"
|
||||
:class="`${isAdvancedSearchMode ? '' : 'arco-btn-outline--secondary'} p-[0_8px]`"
|
||||
@click="handleOpenFilter"
|
||||
>
|
||||
<template #icon>
|
||||
<MsIcon
|
||||
type="icon-icon_copy_outlined"
|
||||
:class="`${visible ? 'text-[rgb(var(--primary-5))]' : 'text-[var(--color-text-4)]'}`"
|
||||
:class="`${isAdvancedSearchMode ? 'text-[rgb(var(--primary-5))]' : 'text-[var(--color-text-4)]'}`"
|
||||
/>
|
||||
</template>
|
||||
{{ t('common.filter') }}
|
||||
|
@ -90,7 +90,6 @@
|
|||
const emit = defineEmits<{
|
||||
(e: 'keywordSearch', value: string | undefined, combine: FilterResult): void; // keyword 搜索 TODO:可以去除,父组件通过 v-model:keyword 获取关键字
|
||||
(e: 'advSearch', value: FilterResult): void; // 高级搜索
|
||||
(e: 'dataIndexChange', value: string): void; // 高级搜索选项变更
|
||||
(e: 'refresh', value: FilterResult): void;
|
||||
}>();
|
||||
|
||||
|
@ -98,10 +97,12 @@
|
|||
|
||||
const keyword = defineModel<string>('keyword', { default: '' });
|
||||
const visible = ref(false);
|
||||
const defaultFilterResult: FilterResult = { accordBelow: 'AND', combine: {} };
|
||||
const filterResult = ref<FilterResult>({ ...defaultFilterResult });
|
||||
const filterResult = ref<FilterResult>({ searchMode: 'AND', conditions: [] });
|
||||
|
||||
const isAdvancedSearchMode = ref(false);
|
||||
const handleFilter = (filter: FilterResult) => {
|
||||
keyword.value = '';
|
||||
isAdvancedSearchMode.value = !!filter.conditions?.length;
|
||||
filterResult.value = filter;
|
||||
emit('advSearch', filter);
|
||||
};
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import type { MsSearchSelectProps, RadioProps } from '@/components/business/ms-select';
|
||||
|
||||
import { OperatorEnum } from '@/enums/advancedFilterEnum';
|
||||
import { FilterType, OperatorEnum } from '@/enums/advancedFilterEnum';
|
||||
|
||||
import type { CascaderOption, TreeNodeData } from '@arco-design/web-vue';
|
||||
import type { VirtualListProps } from '@arco-design/web-vue/es/_components/virtual-list-v2/interface';
|
||||
|
@ -27,36 +27,14 @@ export interface MsCascaderProps {
|
|||
labelKey?: string; // 传入自定义的 labelKey
|
||||
}
|
||||
|
||||
/* eslint-disable no-shadow */
|
||||
export enum BackEndEnum {
|
||||
STRING = 'string',
|
||||
ARRAY = 'array',
|
||||
TIME = 'time',
|
||||
NUMBER = 'number',
|
||||
}
|
||||
|
||||
export enum FilterType {
|
||||
INPUT = 'Input',
|
||||
NUMBER = 'Number',
|
||||
SELECT = 'Select',
|
||||
DATE_PICKER = 'DatePicker',
|
||||
TAGS_INPUT = 'TagsInput',
|
||||
TREE_SELECT = 'TreeSelect',
|
||||
TEXTAREA = 'textArea',
|
||||
RADIO = 'radio',
|
||||
CHECKBOX = 'checkbox',
|
||||
CASCADER = 'Cascader',
|
||||
JIRAKEY = 'JIRAKEY',
|
||||
}
|
||||
|
||||
export interface FilterFormItem {
|
||||
dataIndex?: string; // 第一列下拉的value
|
||||
title?: string; // 第一列下拉显示的label
|
||||
operator?: OperatorEnum; // 第二列的值
|
||||
type: FilterType; // 类型:判断第二列下拉数据和第三列显示形式
|
||||
value?: any; // 第三列的值
|
||||
customField?: boolean; // 是否是自定义字段
|
||||
cascaderOptions?: CascaderOption[]; // 级联选择的选项
|
||||
backendType?: BackEndEnum; // 后端类型 string array time
|
||||
selectProps?: Partial<MsSearchSelectProps>; // select的props, 参考 MsSelect
|
||||
cascaderProps?: Partial<MsCascaderProps>; // cascader的props, 参考 MsCascader
|
||||
treeSelectData?: TreeNodeData[];
|
||||
|
@ -67,17 +45,15 @@ export interface FilterFormItem {
|
|||
|
||||
export type AccordBelowType = 'AND' | 'OR';
|
||||
|
||||
export interface CombineItem {
|
||||
[key: string]: Pick<FilterFormItem, 'value' | 'operator' | 'backendType'>;
|
||||
export type CombineItem = Pick<FilterFormItem, 'value' | 'operator' | 'customField'>;
|
||||
export interface ConditionsItem extends CombineItem {
|
||||
key?: string;
|
||||
}
|
||||
|
||||
export interface FilterResult {
|
||||
// 匹配模式 所有/任一
|
||||
accordBelow: AccordBelowType;
|
||||
searchMode: AccordBelowType;
|
||||
// 高级搜索
|
||||
combine: CombineItem;
|
||||
}
|
||||
|
||||
export interface FilterFormProps {
|
||||
configList: FilterFormItem[];
|
||||
conditions?: ConditionsItem[];
|
||||
combine?: any; // TODO lmy 此为防报错占位 所有高级筛选都完成后 删除这一行
|
||||
}
|
||||
|
|
|
@ -35,14 +35,20 @@
|
|||
</div>
|
||||
</template>
|
||||
<template #resize-trigger>
|
||||
<div :class="props.direction === 'horizontal' ? 'horizontal-expand-line' : 'vertical-expand-line'">
|
||||
<div v-if="props.notShowFirst"></div>
|
||||
<div v-else :class="props.direction === 'horizontal' ? 'horizontal-expand-line' : 'vertical-expand-line'">
|
||||
<div v-if="isExpanded" class="expand-color-line"></div>
|
||||
</div>
|
||||
</template>
|
||||
<template #second>
|
||||
<div class="ms-split-box-second">
|
||||
<div
|
||||
v-if="props.direction === 'horizontal' && props.expandDirection === 'left' && !props.disabled"
|
||||
v-if="
|
||||
!props.notShowFirst &&
|
||||
props.direction === 'horizontal' &&
|
||||
props.expandDirection === 'left' &&
|
||||
!props.disabled
|
||||
"
|
||||
class="absolute h-full w-[12px]"
|
||||
>
|
||||
<div class="expand-icon" @click="() => changeExpand()">
|
||||
|
@ -82,6 +88,7 @@
|
|||
disabled?: boolean; // 是否禁用
|
||||
firstContainerClass?: string; // first容器类名
|
||||
secondContainerClass?: string; // second容器类名
|
||||
notShowFirst?: boolean;
|
||||
}>(),
|
||||
{
|
||||
size: '300px',
|
||||
|
@ -99,6 +106,13 @@
|
|||
const isExpanded = ref(true);
|
||||
const isExpandAnimating = ref(false); // 控制动画类
|
||||
|
||||
watch(
|
||||
() => props.notShowFirst,
|
||||
(val) => {
|
||||
innerSize.value = val ? 0 : initialSize;
|
||||
}
|
||||
);
|
||||
|
||||
watch(
|
||||
() => props.size,
|
||||
(val) => {
|
||||
|
|
|
@ -110,7 +110,10 @@
|
|||
@page-size-change="pageSizeChange"
|
||||
/>
|
||||
<DefaultFilter
|
||||
v-else-if="(item.filterConfig && item.filterConfig.options?.length) || item?.filterConfig?.remoteMethod"
|
||||
v-else-if="
|
||||
!props.notShowTableFilter &&
|
||||
((item.filterConfig && item.filterConfig.options?.length) || item?.filterConfig?.remoteMethod)
|
||||
"
|
||||
class="ml-[4px]"
|
||||
:options="item.filterConfig.options"
|
||||
:data-index="item.dataIndex"
|
||||
|
@ -361,6 +364,7 @@
|
|||
firstColumnWidth?: number; // 选择、拖拽列的宽度
|
||||
paginationSize?: 'small' | 'mini' | 'medium' | 'large';
|
||||
alwaysShowSelectedCount?: boolean; // 是否总是保持显示已选项
|
||||
notShowTableFilter?: boolean; // 不显示表头筛选
|
||||
}>();
|
||||
const emit = defineEmits<{
|
||||
(e: 'batchAction', value: BatchActionParams, queryParams: BatchActionQueryParams): void;
|
||||
|
|
|
@ -95,7 +95,7 @@ export default function useTableProps<T>(
|
|||
// keyword
|
||||
const keyword = ref('');
|
||||
// 高级筛选
|
||||
const advanceFilter = reactive<FilterResult>({ accordBelow: 'AND', combine: {} });
|
||||
const advanceFilter = reactive<FilterResult>({ searchMode: 'AND', conditions: [] });
|
||||
// 表格请求参数集合
|
||||
const tableQueryParams = ref<TableQueryParams>({});
|
||||
|
||||
|
@ -146,6 +146,12 @@ export default function useTableProps<T>(
|
|||
}
|
||||
};
|
||||
|
||||
// 重置表头筛选
|
||||
const resetFilterParams = () => {
|
||||
filterItem.value = {};
|
||||
propsRes.value.filter = cloneDeep(filterItem.value);
|
||||
};
|
||||
|
||||
// 单独设置默认属性
|
||||
const setProps = (params: Partial<MsTableProps<T>>) => {
|
||||
const tmpProps = propsRes.value;
|
||||
|
@ -167,8 +173,12 @@ export default function useTableProps<T>(
|
|||
|
||||
// 设置 advanceFilter
|
||||
const setAdvanceFilter = (v: CombineParams) => {
|
||||
advanceFilter.accordBelow = v.accordBelow;
|
||||
advanceFilter.combine = v.combine;
|
||||
advanceFilter.searchMode = v.searchMode;
|
||||
advanceFilter.conditions = v.conditions;
|
||||
// 基础筛选都清空
|
||||
loadListParams.value.filter = {};
|
||||
keyword.value = '';
|
||||
resetFilterParams();
|
||||
};
|
||||
// 给表格设置选中项 - add rowKey to selectedKeys
|
||||
const setTableSelected = (key: string) => {
|
||||
|
@ -196,10 +206,8 @@ export default function useTableProps<T>(
|
|||
current,
|
||||
pageSize: currentPageSize,
|
||||
sort: sortItem.value,
|
||||
|
||||
keyword: keyword.value,
|
||||
combine: advanceFilter.combine,
|
||||
searchMode: advanceFilter.accordBelow,
|
||||
combineSearch: advanceFilter,
|
||||
...loadListParams.value,
|
||||
filter: {
|
||||
...filterItem.value,
|
||||
|
@ -354,11 +362,6 @@ export default function useTableProps<T>(
|
|||
const getTableQueryParams = () => {
|
||||
return tableQueryParams.value;
|
||||
};
|
||||
// 重置表头筛选
|
||||
const resetFilterParams = () => {
|
||||
filterItem.value = {};
|
||||
propsRes.value.filter = cloneDeep(filterItem.value);
|
||||
};
|
||||
|
||||
/**
|
||||
* 设置表格是否可拖拽
|
||||
|
|
|
@ -1,17 +1,29 @@
|
|||
export enum OperatorEnum {
|
||||
LIKE = 'like',
|
||||
NOT_LIKE = 'not_like',
|
||||
BELONG_TO = 'BELONG_TO',
|
||||
NOT_BELONG_TO = 'NOT_BELONG_TO',
|
||||
CONTAINS = 'CONTAINS',
|
||||
NOT_CONTAINS = 'NOT_CONTAINS',
|
||||
BELONG_TO = 'IN',
|
||||
NOT_BELONG_TO = 'NOT_IN',
|
||||
GT = 'GT',
|
||||
LT = 'LT',
|
||||
EQUAL = 'EQUALS', // 有其他地方用到
|
||||
NOT_EQUAL = 'NOT_EQUALS', // 有其他地方用到
|
||||
EMPTY = 'EMPTY', // 有其他地方用到
|
||||
NOT_EMPTY = 'NOT_EMPTY', // 有其他地方用到
|
||||
BETWEEN = 'between',
|
||||
LENGTH_LT = 'LENGTH_LT',
|
||||
LENGTH_GT = 'LENGTH_GT',
|
||||
BETWEEN = 'BETWEEN',
|
||||
COUNT_LT = 'COUNT_LT',
|
||||
COUNT_GT = 'COUNT_GT',
|
||||
}
|
||||
|
||||
export default {};
|
||||
export enum FilterType {
|
||||
INPUT = 'Input',
|
||||
NUMBER = 'Number',
|
||||
SELECT = 'Select',
|
||||
DATE_PICKER = 'DatePicker',
|
||||
TAGS_INPUT = 'TagsInput',
|
||||
TREE_SELECT = 'TreeSelect',
|
||||
TEXTAREA = 'textArea',
|
||||
RADIO = 'radio',
|
||||
CHECKBOX = 'checkbox',
|
||||
CASCADER = 'Cascader',
|
||||
JIRAKEY = 'JIRAKEY',
|
||||
}
|
||||
|
|
|
@ -7,8 +7,7 @@
|
|||
:filter-config-list="filterConfigList"
|
||||
:row-count="filterRowCount"
|
||||
@keyword-search="fetchData"
|
||||
@adv-search="handleAdvSearch"
|
||||
@refresh="handleAdvSearch"
|
||||
@refresh="searchData"
|
||||
>
|
||||
<template #left>
|
||||
<div class="flex gap-[12px]">
|
||||
|
@ -167,7 +166,7 @@
|
|||
import { Message, TableData } from '@arco-design/web-vue';
|
||||
|
||||
import { MsAdvanceFilter, timeSelectOptions } from '@/components/pure/ms-advance-filter';
|
||||
import { BackEndEnum, FilterFormItem, FilterResult, FilterType } from '@/components/pure/ms-advance-filter/type';
|
||||
import { FilterFormItem } from '@/components/pure/ms-advance-filter/type';
|
||||
import MsButton from '@/components/pure/ms-button/index.vue';
|
||||
import MsCard from '@/components/pure/ms-card/index.vue';
|
||||
import { MsExportDrawerMap, MsExportDrawerOption } from '@/components/pure/ms-export-drawer/types';
|
||||
|
@ -199,6 +198,7 @@
|
|||
import { hasAnyPermission } from '@/utils/permission';
|
||||
|
||||
import { BugEditCustomField, BugListItem, BugOptionItem } from '@/models/bug-management';
|
||||
import { FilterType } from '@/enums/advancedFilterEnum';
|
||||
import { RouteEnum } from '@/enums/routeEnum';
|
||||
import { TableKeyEnum } from '@/enums/tableEnum';
|
||||
|
||||
|
@ -231,7 +231,6 @@
|
|||
const deleteVisible = ref(false);
|
||||
const batchEditVisible = ref(false);
|
||||
const keyword = ref('');
|
||||
const filterResult = ref<FilterResult>({ accordBelow: 'AND', combine: {} });
|
||||
const { openDeleteModal } = useModal();
|
||||
const route = useRoute();
|
||||
const severityFilterOptions = ref<BugOptionItem[]>([]);
|
||||
|
@ -259,13 +258,11 @@
|
|||
title: 'bugManagement.ID',
|
||||
dataIndex: 'num',
|
||||
type: FilterType.INPUT,
|
||||
backendType: BackEndEnum.NUMBER,
|
||||
},
|
||||
{
|
||||
title: 'bugManagement.bugName',
|
||||
dataIndex: 'title',
|
||||
type: FilterType.INPUT,
|
||||
backendType: BackEndEnum.STRING,
|
||||
},
|
||||
{
|
||||
title: 'bugManagement.createTime',
|
||||
|
@ -496,22 +493,6 @@
|
|||
searchData();
|
||||
};
|
||||
|
||||
const handleAdvSearch = (filter: FilterResult) => {
|
||||
filterResult.value = filter;
|
||||
const { accordBelow, combine } = filter;
|
||||
setAdvanceFilter(filter);
|
||||
currentSelectParams.value = {
|
||||
...currentSelectParams.value,
|
||||
condition: {
|
||||
keyword: keyword.value,
|
||||
searchMode: accordBelow,
|
||||
filter: propsRes.value.filter,
|
||||
combine,
|
||||
},
|
||||
};
|
||||
fetchData();
|
||||
};
|
||||
|
||||
const exportConfirm = async (option: MsExportDrawerOption[]) => {
|
||||
try {
|
||||
exportLoading.value = true;
|
||||
|
@ -727,9 +708,7 @@
|
|||
}
|
||||
const condition = {
|
||||
keyword: keyword.value,
|
||||
searchMode: filterResult.value.accordBelow,
|
||||
filter: propsRes.value.filter,
|
||||
combine: filterResult.value.combine,
|
||||
};
|
||||
currentSelectParams.value = {
|
||||
excludeIds: params.excludeIds,
|
||||
|
|
|
@ -7,8 +7,7 @@
|
|||
:filter-config-list="filterConfigList"
|
||||
:row-count="filterRowCount"
|
||||
@keyword-search="fetchData"
|
||||
@adv-search="handleAdvSearch"
|
||||
@refresh="handleAdvSearch"
|
||||
@refresh="searchData"
|
||||
>
|
||||
<template #left>
|
||||
<div></div>
|
||||
|
@ -59,7 +58,7 @@
|
|||
import dayjs from 'dayjs';
|
||||
|
||||
import { MsAdvanceFilter } from '@/components/pure/ms-advance-filter';
|
||||
import { BackEndEnum, FilterFormItem, FilterResult, FilterType } from '@/components/pure/ms-advance-filter/type';
|
||||
import { FilterFormItem } from '@/components/pure/ms-advance-filter/type';
|
||||
import MsButton from '@/components/pure/ms-button/index.vue';
|
||||
import MsCard from '@/components/pure/ms-card/index.vue';
|
||||
import MsBaseTable from '@/components/pure/ms-table/base-table.vue';
|
||||
|
@ -81,6 +80,7 @@
|
|||
import { characterLimit, customFieldDataToTableData, customFieldToColumns } from '@/utils';
|
||||
|
||||
import { BugEditCustomField, BugListItem, BugOptionItem } from '@/models/bug-management';
|
||||
import { FilterType } from '@/enums/advancedFilterEnum';
|
||||
import { TableKeyEnum } from '@/enums/tableEnum';
|
||||
|
||||
import { makeColumns } from '@/views/case-management/caseManagementFeature/components/utils';
|
||||
|
@ -105,7 +105,6 @@
|
|||
title: 'bugManagement.bugName',
|
||||
dataIndex: 'title',
|
||||
type: FilterType.INPUT,
|
||||
backendType: BackEndEnum.STRING,
|
||||
},
|
||||
{
|
||||
title: 'bugManagement.createTime',
|
||||
|
@ -115,7 +114,6 @@
|
|||
]);
|
||||
|
||||
const severityFilterOptions = ref<BugOptionItem[]>([]);
|
||||
const filterResult = ref<FilterResult>({ accordBelow: 'AND', combine: {} });
|
||||
const currentSelectParams = ref<BatchActionQueryParams>({ selectAll: false, currentSelectCount: 0 });
|
||||
|
||||
const heightUsed = computed(() => 286 + (filterVisible.value ? 160 + (filterRowCount.value - 1) * 60 : 0));
|
||||
|
@ -345,11 +343,6 @@
|
|||
searchData();
|
||||
};
|
||||
|
||||
const handleAdvSearch = (filter: FilterResult) => {
|
||||
filterResult.value = filter;
|
||||
fetchData();
|
||||
};
|
||||
|
||||
// 单个恢复
|
||||
const handleRecover = async (record: BugListItem) => {
|
||||
try {
|
||||
|
@ -432,9 +425,7 @@
|
|||
}
|
||||
const condition = {
|
||||
keyword: keyword.value,
|
||||
searchMode: filterResult.value.accordBelow,
|
||||
filter: params.condition.filter,
|
||||
combine: filterResult.value.combine,
|
||||
};
|
||||
currentSelectParams.value = {
|
||||
excludeIds: params.excludeIds,
|
||||
|
|
|
@ -47,11 +47,11 @@
|
|||
filter-icon-align-left
|
||||
class="mt-[16px]"
|
||||
:action-config="tableBatchActions"
|
||||
:not-show-table-filter="isAdvancedSearchMode"
|
||||
@selected-change="handleTableSelect"
|
||||
v-on="propsEvent"
|
||||
@batch-action="handleTableBatch"
|
||||
@change="changeHandler"
|
||||
@module-change="initData"
|
||||
@cell-click="handleCellClick"
|
||||
@filter-change="filterChange"
|
||||
>
|
||||
|
@ -369,7 +369,7 @@
|
|||
import { cloneDeep } from 'lodash-es';
|
||||
|
||||
import { CustomTypeMaps, MsAdvanceFilter } from '@/components/pure/ms-advance-filter';
|
||||
import { FilterFormItem, FilterResult, FilterType } from '@/components/pure/ms-advance-filter/type';
|
||||
import { FilterFormItem, FilterResult } from '@/components/pure/ms-advance-filter/type';
|
||||
import MsButton from '@/components/pure/ms-button/index.vue';
|
||||
import MsDrawer from '@/components/pure/ms-drawer/index.vue';
|
||||
import { MsExportDrawerMap, MsExportDrawerOption } from '@/components/pure/ms-export-drawer/types';
|
||||
|
@ -438,6 +438,7 @@
|
|||
DragCase,
|
||||
} from '@/models/caseManagement/featureCase';
|
||||
import { ModuleTreeNode } from '@/models/common';
|
||||
import { FilterType } from '@/enums/advancedFilterEnum';
|
||||
import { CaseManagementRouteEnum, RouteEnum } from '@/enums/routeEnum';
|
||||
import { ColumnEditTypeEnum, TableKeyEnum } from '@/enums/tableEnum';
|
||||
import { FilterRemoteMethodsEnum, FilterSlotNameEnum } from '@/enums/tableFilterEnum';
|
||||
|
@ -914,7 +915,6 @@
|
|||
showSetting: true,
|
||||
heightUsed: 236,
|
||||
draggable: { type: 'handle' },
|
||||
showSubdirectory: true,
|
||||
paginationSize: 'mini',
|
||||
draggableCondition: true,
|
||||
});
|
||||
|
@ -966,9 +966,10 @@
|
|||
};
|
||||
});
|
||||
|
||||
const isAdvancedSearchMode = ref(false);
|
||||
async function initTableParams() {
|
||||
let moduleIds: string[] = [];
|
||||
if (props.activeFolder !== 'all') {
|
||||
if (props.activeFolder !== 'all' && !isAdvancedSearchMode.value) {
|
||||
moduleIds = [props.activeFolder];
|
||||
const getAllChildren = await tableStore.getSubShow(TableKeyEnum.CASE_MANAGEMENT_TABLE);
|
||||
if (getAllChildren) {
|
||||
|
@ -982,12 +983,13 @@
|
|||
excludeIds: batchParams.value.excludeIds || [],
|
||||
selectAll: batchParams.value.selectAll,
|
||||
selectIds: batchParams.value.selectedIds || [],
|
||||
keyword: keyword.value,
|
||||
keyword: isAdvancedSearchMode.value ? '' : keyword.value,
|
||||
};
|
||||
}
|
||||
// 获取父组件模块数量
|
||||
async function emitTableParams(refreshModule = false) {
|
||||
const tableParams = await initTableParams();
|
||||
if (isAdvancedSearchMode.value) return;
|
||||
const tableParams: CaseModuleQueryParams = await initTableParams();
|
||||
emit(
|
||||
'init',
|
||||
{
|
||||
|
@ -1612,6 +1614,8 @@
|
|||
}
|
||||
// 高级检索
|
||||
const handleAdvSearch = async (filter: FilterResult) => {
|
||||
isAdvancedSearchMode.value = !!filter.conditions?.length;
|
||||
await getLoadListParams(); // 基础筛选都清空
|
||||
setAdvanceFilter(filter);
|
||||
loadList();
|
||||
};
|
||||
|
@ -1820,6 +1824,7 @@
|
|||
});
|
||||
|
||||
defineExpose({
|
||||
isAdvancedSearchMode,
|
||||
emitTableParams,
|
||||
initData,
|
||||
});
|
||||
|
|
|
@ -68,7 +68,6 @@
|
|||
:name="moduleNamePath"
|
||||
:search-placeholder="t('caseManagement.featureCase.searchPlaceholder')"
|
||||
@keyword-search="fetchData"
|
||||
@adv-search="handleAdvSearch"
|
||||
@refresh="fetchData()"
|
||||
/>
|
||||
<ms-base-table
|
||||
|
@ -172,7 +171,7 @@
|
|||
import dayjs from 'dayjs';
|
||||
|
||||
import { CustomTypeMaps, MsAdvanceFilter } from '@/components/pure/ms-advance-filter';
|
||||
import { FilterFormItem, FilterResult, FilterType } from '@/components/pure/ms-advance-filter/type';
|
||||
import { FilterFormItem } from '@/components/pure/ms-advance-filter/type';
|
||||
import MsButton from '@/components/pure/ms-button/index.vue';
|
||||
import MsIcon from '@/components/pure/ms-icon-font/index.vue';
|
||||
import MsSplitBox from '@/components/pure/ms-split-box/index.vue';
|
||||
|
@ -205,6 +204,7 @@
|
|||
|
||||
import type { CaseManagementTable, CustomAttributes } from '@/models/caseManagement/featureCase';
|
||||
import type { ModuleTreeNode, TableQueryParams } from '@/models/common';
|
||||
import { FilterType } from '@/enums/advancedFilterEnum';
|
||||
import { TableKeyEnum } from '@/enums/tableEnum';
|
||||
import { FilterRemoteMethodsEnum, FilterSlotNameEnum } from '@/enums/tableFilterEnum';
|
||||
|
||||
|
@ -902,26 +902,6 @@
|
|||
});
|
||||
}
|
||||
|
||||
const filterResult = ref<FilterResult>({ accordBelow: 'AND', combine: {} });
|
||||
// 当前选择的条数
|
||||
const currentSelectParams = ref<BatchActionQueryParams>({ selectAll: false, currentSelectCount: 0 });
|
||||
// 高级检索
|
||||
const handleAdvSearch = (filter: FilterResult) => {
|
||||
filterResult.value = filter;
|
||||
const { accordBelow, combine } = filter;
|
||||
setAdvanceFilter(filter);
|
||||
currentSelectParams.value = {
|
||||
...currentSelectParams.value,
|
||||
condition: {
|
||||
keyword: keyword.value,
|
||||
searchMode: accordBelow,
|
||||
filter: { ...propsRes.value.filter },
|
||||
combine,
|
||||
},
|
||||
};
|
||||
initRecycleList();
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
await getRecycleModules();
|
||||
await initFilter();
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<MsCard simple no-content-padding>
|
||||
<MsSplitBox>
|
||||
<MsSplitBox :not-show-first="isAdvancedSearchMode">
|
||||
<template #first>
|
||||
<div class="p-[16px] pb-0">
|
||||
<div class="feature-case h-[100%]">
|
||||
|
@ -187,6 +187,8 @@
|
|||
const caseTreeRef = ref();
|
||||
const caseTableRef = ref();
|
||||
|
||||
const isAdvancedSearchMode = computed(() => caseTableRef.value?.isAdvancedSearchMode);
|
||||
|
||||
// 添加子模块
|
||||
async function confirmHandler(formValue: ConfirmValue) {
|
||||
try {
|
||||
|
|
|
@ -334,7 +334,7 @@
|
|||
import { cloneDeep } from 'lodash-es';
|
||||
|
||||
import { MsAdvanceFilter } from '@/components/pure/ms-advance-filter';
|
||||
import { FilterFormItem, FilterResult, FilterType } from '@/components/pure/ms-advance-filter/type';
|
||||
import { FilterFormItem, FilterResult } from '@/components/pure/ms-advance-filter/type';
|
||||
import MsButton from '@/components/pure/ms-button/index.vue';
|
||||
import MsIcon from '@/components/pure/ms-icon-font/index.vue';
|
||||
import type { MinderJsonNode, MinderJsonNodeData } from '@/components/pure/ms-minder-editor/props';
|
||||
|
@ -374,6 +374,7 @@
|
|||
|
||||
import { ReviewCaseItem, ReviewItem, ReviewPassRule, ReviewResult } from '@/models/caseManagement/caseReview';
|
||||
import { BatchApiParams, TableQueryParams } from '@/models/common';
|
||||
import { FilterType } from '@/enums/advancedFilterEnum';
|
||||
import { StartReviewStatus } from '@/enums/caseEnum';
|
||||
import { CaseManagementRouteEnum } from '@/enums/routeEnum';
|
||||
import { TableKeyEnum } from '@/enums/tableEnum';
|
||||
|
|
|
@ -178,7 +178,7 @@
|
|||
import dayjs from 'dayjs';
|
||||
|
||||
import { MsAdvanceFilter } from '@/components/pure/ms-advance-filter';
|
||||
import { FilterFormItem, FilterResult, FilterType } from '@/components/pure/ms-advance-filter/type';
|
||||
import { FilterFormItem, FilterResult } from '@/components/pure/ms-advance-filter/type';
|
||||
import MsButton from '@/components/pure/ms-button/index.vue';
|
||||
import MsBaseTable from '@/components/pure/ms-table/base-table.vue';
|
||||
import type { BatchActionParams, BatchActionQueryParams, MsTableColumn } from '@/components/pure/ms-table/type';
|
||||
|
@ -209,6 +209,7 @@
|
|||
ReviewStatus,
|
||||
} from '@/models/caseManagement/caseReview';
|
||||
import { ModuleTreeNode } from '@/models/common';
|
||||
import { FilterType } from '@/enums/advancedFilterEnum';
|
||||
import { CaseManagementRouteEnum } from '@/enums/routeEnum';
|
||||
import { TableKeyEnum } from '@/enums/tableEnum';
|
||||
import { FilterRemoteMethodsEnum, FilterSlotNameEnum } from '@/enums/tableFilterEnum';
|
||||
|
@ -559,11 +560,6 @@
|
|||
moduleIds,
|
||||
createByMe: innerShowType.value === 'createByMe' ? userStore.id : undefined,
|
||||
reviewByMe: innerShowType.value === 'reviewByMe' ? userStore.id : undefined,
|
||||
combine: filter
|
||||
? {
|
||||
...filter.combine,
|
||||
}
|
||||
: {},
|
||||
};
|
||||
setLoadListParams(params);
|
||||
loadList();
|
||||
|
|
Loading…
Reference in New Issue