refactor: 高级筛选-类型为单选和复选框的第三列为下拉多选

This commit is contained in:
teukkk 2024-09-11 17:38:13 +08:00 committed by 刘瑞斌
parent dfd4b7ecbc
commit bf1406ba35
3 changed files with 18 additions and 59 deletions

View File

@ -115,6 +115,7 @@
v-model:model-value="item.value"
allow-clear
allow-search
:search-keys="['label', 'text']"
:placeholder="t('common.pleaseSelect')"
:disabled="isValueDisabled(item)"
:options="item.selectProps?.options || []"
@ -148,32 +149,6 @@
:separator="t('common.to')"
:disabled="isValueDisabled(item)"
/>
<a-radio-group
v-else-if="item.type === FilterType.RADIO"
v-model:model-value="item.value"
:disabled="isValueDisabled(item)"
>
<a-radio
v-for="it of item.radioProps?.options || []"
:key="it[item.radioProps?.valueKey || 'value']"
:value="it[item.radioProps?.valueKey || 'value']"
>
{{ it[item.radioProps?.labelKey || 'label'] }}
</a-radio>
</a-radio-group>
<a-checkbox-group
v-else-if="item.type === FilterType.CHECKBOX"
v-model:model-value="item.value"
:disabled="isValueDisabled(item)"
>
<a-checkbox
v-for="it of item.checkProps?.options || []"
:key="it[item.checkProps?.valueKey || 'value']"
:value="it[item.checkProps?.valueKey || 'value']"
>
{{ it[item.checkProps?.labelKey || 'label'] }}
</a-checkbox>
</a-checkbox-group>
<a-input
v-else
v-model:model-value="item.value"

View File

@ -35,8 +35,6 @@ export const operatorOptionsMap: Record<string, { value: string; label: string }
[FilterType.INPUT]: COMMON_TEXT_OPERATORS,
[FilterType.TEXTAREA]: COMMON_TEXT_OPERATORS,
[FilterType.NUMBER]: [GT, LT, EQUAL, EMPTY, NOT_EMPTY],
[FilterType.RADIO]: COMMON_SELECTION_OPERATORS,
[FilterType.CHECKBOX]: COMMON_SELECTION_OPERATORS,
[FilterType.SELECT]: COMMON_SELECTION_OPERATORS,
[FilterType.MEMBER]: COMMON_SELECTION_OPERATORS,
[FilterType.TAGS_INPUT]: [EMPTY, CONTAINS, NO_CONTAINS, COUNT_LT, COUNT_GT],
@ -68,6 +66,14 @@ export const statusCodeOptions = [
LENGTH_EQUAL,
];
const baseSelectProps = {
mode: 'static',
multiple: true,
valueKey: 'value',
labelKey: 'text',
options: [],
};
export const CustomTypeMaps: Record<string, any> = {
INPUT: {
type: 'INPUT',
@ -75,42 +81,22 @@ export const CustomTypeMaps: Record<string, any> = {
SELECT: {
type: 'SELECT',
propsKey: 'selectProps',
props: {
mode: 'static',
multiple: true,
valueKey: 'value',
labelKey: 'text',
options: [],
},
props: { ...baseSelectProps },
},
MULTIPLE_SELECT: {
type: 'SELECT',
propsKey: 'selectProps',
props: {
mode: 'static',
multiple: true,
valueKey: 'value',
labelKey: 'text',
options: [],
},
props: { ...baseSelectProps },
},
RADIO: {
type: 'RADIO',
propsKey: 'radioProps',
props: {
options: [],
valueKey: 'value',
labelKey: 'text',
},
type: 'SELECT',
propsKey: 'selectProps',
props: { ...baseSelectProps },
},
CHECKBOX: {
type: 'CHECKBOX',
propsKey: 'checkProps',
props: {
options: [],
valueKey: 'value',
labelKey: 'text',
},
type: 'SELECT',
propsKey: 'selectProps',
props: { ...baseSelectProps },
},
MEMBER: {
type: 'MEMBER',

View File

@ -1,4 +1,4 @@
import type { MsSearchSelectProps, RadioProps } from '@/components/business/ms-select';
import type { MsSearchSelectProps } from '@/components/business/ms-select';
import { FilterType, OperatorEnum } from '@/enums/advancedFilterEnum';
@ -47,8 +47,6 @@ export interface FilterFormItem {
cascaderProps?: Partial<MsCascaderProps>; // cascader的props, 参考 MsCascader
treeSelectData?: TreeNodeData[];
treeSelectProps?: Partial<TreeSelectProps>;
radioProps?: Partial<RadioProps>;
checkProps?: Partial<RadioProps>;
}
export type AccordBelowType = 'AND' | 'OR';