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