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"
>
<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">
<div class="text-[var(--color-text-3)]">{{ t(item.title as string) }}</div>
</slot>
@ -68,9 +68,10 @@
/>
<slot v-else-if="item.filterConfig" :name="item.filterConfig.filterSlotName">
<DefaultFilter
class="ml-[4px]"
:options="item.filterConfig.options"
: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>
</div>
@ -498,6 +499,9 @@
}
}
}
:deep(.arco-table-th-title) {
width: 100%;
}
.setting-icon {
margin-left: 16px;
color: var(--color-text-4);

View File

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

View File

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

View File

@ -32,7 +32,7 @@
import { Message } from '@arco-design/web-vue';
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 MsCard from '@/components/pure/ms-card/index.vue';
import MsBaseTable from '@/components/pure/ms-table/base-table.vue';
@ -222,16 +222,6 @@
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) => {
router.push({
name: 'testPlan',