feat: 筛选组件微调
This commit is contained in:
parent
094a594986
commit
af3ef24316
|
@ -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);
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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();
|
||||
},
|
||||
// 分页触发
|
||||
|
|
|
@ -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',
|
||||
|
|
Loading…
Reference in New Issue