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
frontend/src/components/pure/ms-advance-filter

View File

@ -115,6 +115,7 @@
v-model:model-value="item.value" v-model:model-value="item.value"
allow-clear allow-clear
allow-search allow-search
:search-keys="['label', 'text']"
:placeholder="t('common.pleaseSelect')" :placeholder="t('common.pleaseSelect')"
:disabled="isValueDisabled(item)" :disabled="isValueDisabled(item)"
:options="item.selectProps?.options || []" :options="item.selectProps?.options || []"
@ -148,32 +149,6 @@
:separator="t('common.to')" :separator="t('common.to')"
:disabled="isValueDisabled(item)" :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 <a-input
v-else v-else
v-model:model-value="item.value" 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.INPUT]: COMMON_TEXT_OPERATORS,
[FilterType.TEXTAREA]: COMMON_TEXT_OPERATORS, [FilterType.TEXTAREA]: COMMON_TEXT_OPERATORS,
[FilterType.NUMBER]: [GT, LT, EQUAL, EMPTY, NOT_EMPTY], [FilterType.NUMBER]: [GT, LT, EQUAL, EMPTY, NOT_EMPTY],
[FilterType.RADIO]: COMMON_SELECTION_OPERATORS,
[FilterType.CHECKBOX]: COMMON_SELECTION_OPERATORS,
[FilterType.SELECT]: COMMON_SELECTION_OPERATORS, [FilterType.SELECT]: COMMON_SELECTION_OPERATORS,
[FilterType.MEMBER]: COMMON_SELECTION_OPERATORS, [FilterType.MEMBER]: COMMON_SELECTION_OPERATORS,
[FilterType.TAGS_INPUT]: [EMPTY, CONTAINS, NO_CONTAINS, COUNT_LT, COUNT_GT], [FilterType.TAGS_INPUT]: [EMPTY, CONTAINS, NO_CONTAINS, COUNT_LT, COUNT_GT],
@ -68,6 +66,14 @@ export const statusCodeOptions = [
LENGTH_EQUAL, LENGTH_EQUAL,
]; ];
const baseSelectProps = {
mode: 'static',
multiple: true,
valueKey: 'value',
labelKey: 'text',
options: [],
};
export const CustomTypeMaps: Record<string, any> = { export const CustomTypeMaps: Record<string, any> = {
INPUT: { INPUT: {
type: 'INPUT', type: 'INPUT',
@ -75,42 +81,22 @@ export const CustomTypeMaps: Record<string, any> = {
SELECT: { SELECT: {
type: 'SELECT', type: 'SELECT',
propsKey: 'selectProps', propsKey: 'selectProps',
props: { props: { ...baseSelectProps },
mode: 'static',
multiple: true,
valueKey: 'value',
labelKey: 'text',
options: [],
},
}, },
MULTIPLE_SELECT: { MULTIPLE_SELECT: {
type: 'SELECT', type: 'SELECT',
propsKey: 'selectProps', propsKey: 'selectProps',
props: { props: { ...baseSelectProps },
mode: 'static',
multiple: true,
valueKey: 'value',
labelKey: 'text',
options: [],
},
}, },
RADIO: { RADIO: {
type: 'RADIO', type: 'SELECT',
propsKey: 'radioProps', propsKey: 'selectProps',
props: { props: { ...baseSelectProps },
options: [],
valueKey: 'value',
labelKey: 'text',
},
}, },
CHECKBOX: { CHECKBOX: {
type: 'CHECKBOX', type: 'SELECT',
propsKey: 'checkProps', propsKey: 'selectProps',
props: { props: { ...baseSelectProps },
options: [],
valueKey: 'value',
labelKey: 'text',
},
}, },
MEMBER: { MEMBER: {
type: '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'; import { FilterType, OperatorEnum } from '@/enums/advancedFilterEnum';
@ -47,8 +47,6 @@ export interface FilterFormItem {
cascaderProps?: Partial<MsCascaderProps>; // cascader的props, 参考 MsCascader cascaderProps?: Partial<MsCascaderProps>; // cascader的props, 参考 MsCascader
treeSelectData?: TreeNodeData[]; treeSelectData?: TreeNodeData[];
treeSelectProps?: Partial<TreeSelectProps>; treeSelectProps?: Partial<TreeSelectProps>;
radioProps?: Partial<RadioProps>;
checkProps?: Partial<RadioProps>;
} }
export type AccordBelowType = 'AND' | 'OR'; export type AccordBelowType = 'AND' | 'OR';