feat: 筛选组件微调

This commit is contained in:
RubyLiu 2023-11-23 14:55:24 +08:00 committed by 刘瑞斌
parent 094a594986
commit af3ef24316
4 changed files with 25 additions and 31 deletions

View File

@ -54,7 +54,7 @@
:tooltip="item.tooltip" :tooltip="item.tooltip"
> >
<template #title> <template #title>
<div class="flex flex-row flex-nowrap items-center"> <div class="flex w-full flex-row flex-nowrap items-center">
<slot :name="item.titleSlotName"> <slot :name="item.titleSlotName">
<div class="text-[var(--color-text-3)]">{{ t(item.title as string) }}</div> <div class="text-[var(--color-text-3)]">{{ t(item.title as string) }}</div>
</slot> </slot>
@ -68,9 +68,10 @@
/> />
<slot v-else-if="item.filterConfig" :name="item.filterConfig.filterSlotName"> <slot v-else-if="item.filterConfig" :name="item.filterConfig.filterSlotName">
<DefaultFilter <DefaultFilter
class="ml-[4px]"
:options="item.filterConfig.options" :options="item.filterConfig.options"
:multiple="(item.filterConfig.multiple as boolean)" :multiple="(item.filterConfig.multiple as boolean)"
@handle-confirm="(v: (string | number)[]) => handleFilterConfirm(v, item.dataIndex as string)" @handle-confirm="(v) => handleFilterConfirm(v, item.dataIndex as string)"
/> />
</slot> </slot>
</div> </div>
@ -498,6 +499,9 @@
} }
} }
} }
:deep(.arco-table-th-title) {
width: 100%;
}
.setting-icon { .setting-icon {
margin-left: 16px; margin-left: 16px;
color: var(--color-text-4); color: var(--color-text-4);

View File

@ -2,7 +2,7 @@
<a-trigger v-model:popup-visible="visible" trigger="click"> <a-trigger v-model:popup-visible="visible" trigger="click">
<a-button type="text" @click="visible = true"> <a-button type="text" @click="visible = true">
<template #icon> <template #icon>
<icon-filter /> <icon-filter class="text-[var(--color-text-4)]" />
</template> </template>
</a-button> </a-button>
<template #content> <template #content>
@ -23,7 +23,7 @@
<a-button size="mini" type="secondary" @click="handleFilterReset"> <a-button size="mini" type="secondary" @click="handleFilterReset">
{{ t('common.reset') }} {{ t('common.reset') }}
</a-button> </a-button>
<a-button size="mini" type="primary" @click="handleFilterSubmit(false)"> <a-button size="mini" type="primary" @click="handleFilterSubmit()">
{{ t('common.confirm') }} {{ t('common.confirm') }}
</a-button> </a-button>
</div> </div>
@ -49,25 +49,22 @@
const checkedList = ref<(string | number)[]>([]); const checkedList = ref<(string | number)[]>([]);
const checkedValue = ref<string | number>(''); const checkedValue = ref<string | number>('');
const handleFilterSubmit = (isReset = false) => {
if (props.multiple) {
emit('handleConfirm', checkedList.value);
} else {
emit('handleConfirm', [checkedValue.value]);
}
if (!isReset) {
checkedList.value = [];
checkedValue.value = '';
}
visible.value = false;
};
const handleFilterReset = () => { const handleFilterReset = () => {
if (props.multiple) { if (props.multiple) {
checkedList.value = []; checkedList.value = [];
} else { } else {
checkedValue.value = ''; checkedValue.value = '';
} }
handleFilterSubmit(true); emit('handleConfirm', []);
visible.value = false;
};
const handleFilterSubmit = () => {
if (props.multiple) {
emit('handleConfirm', checkedList.value);
} else {
emit('handleConfirm', checkedValue.value ? [checkedValue.value] : []);
}
visible.value = false;
}; };
</script> </script>

View File

@ -302,8 +302,11 @@ export default function useTableProps<T>(
// 筛选触发 // 筛选触发
filterChange: (dataIndex: string, filteredValues: (string | number)[]) => { filterChange: (dataIndex: string, filteredValues: (string | number)[]) => {
console.log('filterChange', dataIndex, filteredValues); if (filteredValues.length > 0) {
filterItem.value = { [dataIndex]: filteredValues }; filterItem.value = { [dataIndex]: filteredValues };
} else {
filterItem.value = {};
}
loadList(); loadList();
}, },
// 分页触发 // 分页触发

View File

@ -32,7 +32,7 @@
import { Message } from '@arco-design/web-vue'; import { Message } from '@arco-design/web-vue';
import { MsAdvanceFilter } from '@/components/pure/ms-advance-filter'; import { MsAdvanceFilter } from '@/components/pure/ms-advance-filter';
import { FilterFormItem, FilterResult, FilterType } from '@/components/pure/ms-advance-filter/type'; import { FilterFormItem, FilterType } from '@/components/pure/ms-advance-filter/type';
import MsButton from '@/components/pure/ms-button/index.vue'; import MsButton from '@/components/pure/ms-button/index.vue';
import MsCard from '@/components/pure/ms-card/index.vue'; import MsCard from '@/components/pure/ms-card/index.vue';
import MsBaseTable from '@/components/pure/ms-table/base-table.vue'; import MsBaseTable from '@/components/pure/ms-table/base-table.vue';
@ -222,16 +222,6 @@
console.log('create', record); console.log('create', record);
}; };
const handleFilter = (filter: FilterResult) => {
// eslint-disable-next-line no-console
console.log('filter', filter);
};
const dataIndexChange = (dataIndex: string) => {
// eslint-disable-next-line no-console
console.log('dataIndexChange', dataIndex);
};
const jumpToTestPlan = (record: BugListItem) => { const jumpToTestPlan = (record: BugListItem) => {
router.push({ router.push({
name: 'testPlan', name: 'testPlan',