From 9fa670e5c3625b8260e259eeafe34d01625d38e3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=AD=9F=E5=B8=85?= <133814250@qq.com> Date: Tue, 15 Aug 2023 16:47:38 +0800 Subject: [PATCH] =?UTF-8?q?=E6=8E=92=E5=BA=8F=E5=99=A8=E5=A2=9E=E5=8A=A0?= =?UTF-8?q?=E4=BC=98=E5=85=88=E7=BA=A7=E5=92=8C=E5=8D=95=E5=88=97=E6=8E=92?= =?UTF-8?q?=E5=BA=8F=E6=94=AF=E6=8C=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- web/src/hooks/common/index.ts | 3 +- web/src/hooks/common/useSorter.ts | 40 +++++++++++++++++++ .../views/addons/hgexample/table/index.vue | 17 +------- web/src/views/addons/hgexample/table/model.ts | 14 +++++-- web/types/table.d.ts | 5 --- 5 files changed, 54 insertions(+), 25 deletions(-) create mode 100644 web/src/hooks/common/useSorter.ts delete mode 100644 web/types/table.d.ts diff --git a/web/src/hooks/common/index.ts b/web/src/hooks/common/index.ts index 89478db..438ede1 100644 --- a/web/src/hooks/common/index.ts +++ b/web/src/hooks/common/index.ts @@ -3,5 +3,6 @@ import useBoolean from './useBoolean'; import useLoading from './useLoading'; import useLoadingEmpty from './useLoadingEmpty'; import useSendCode from './useSendCode'; +import useSorter from './useSorter'; -export { useContext, useBoolean, useLoading, useLoadingEmpty, useSendCode }; +export { useContext, useBoolean, useLoading, useLoadingEmpty, useSendCode, useSorter }; diff --git a/web/src/hooks/common/useSorter.ts b/web/src/hooks/common/useSorter.ts new file mode 100644 index 0000000..6cdd733 --- /dev/null +++ b/web/src/hooks/common/useSorter.ts @@ -0,0 +1,40 @@ +import { ref } from 'vue'; +import { DataTableSortState } from 'naive-ui'; +import { SorterMultiple } from 'naive-ui/es/data-table/src/interface'; + +export default function useSorter(callback: Function = function () {}) { + const sortStatesRef = ref([]); + + function updateSorter(sorter: DataTableSortState | DataTableSortState[] | null) { + if (sorter === null) { + // 默认排序 + sortStatesRef.value = []; + } else if (Array.isArray(sorter)) { + // 多字段排序 + sortStatesRef.value = filterMultipleSorters(sorter); + } else { + // 单字段排序 + sortStatesRef.value = []; + sortStatesRef.value.push(sorter); + } + callback(); + } + + // 多字段排序，将不参与排序的字段过滤掉，再根据设置的优先级对排序器重新排列 + function filterMultipleSorters(sorters: DataTableSortState[]): DataTableSortState[] { + const filter = sorters.filter((item) => item.order !== false); + return filter.sort((a, b) => { + if (typeof a.sorter === 'object' && typeof b.sorter === 'object') { + const aSorter = a.sorter as SorterMultiple; + const bSorter = b.sorter as SorterMultiple; + return bSorter.multiple - aSorter.multiple; + } + return 0; + }); + } + + return { + updateSorter, + sortStatesRef, + }; +} diff --git a/web/src/views/addons/hgexample/table/index.vue b/web/src/views/addons/hgexample/table/index.vue index 5edf659..a073fb7 100644 --- a/web/src/views/addons/hgexample/table/index.vue +++ b/web/src/views/addons/hgexample/table/index.vue @@ -78,13 +78,13 @@ import { useDialog, useMessage } from 'naive-ui'; import { BasicTable, TableAction } from '@/components/Table'; import { BasicForm, useForm } from '@/components/Form/index'; + import { useSorter } from '@/hooks/common'; import { Delete, List, Status, Export } from '@/api/addons/hgexample/table'; import { State, columns, schemas, options, newState } from './model'; import { DeleteOutlined, PlusOutlined, ExportOutlined } from '@vicons/antd'; import { useRouter } from 'vue-router'; import { getOptionLabel } from '@/utils/hotgo'; import Edit from './edit.vue'; - import { Sorter } from '/#/table'; const router = useRouter(); const dialog = useDialog(); @@ -95,7 +95,7 @@ const showModal = ref(false); const formParams = ref(); const actionRef = ref(); - const sortStatesRef = ref([]); + const { updateSorter: handleUpdateSorter, sortStatesRef: sortStatesRef } = useSorter(reloadTable); const actionColumn = reactive({ width: 300, @@ -250,19 +250,6 @@ }); }); } - - function handleUpdateSorter(sorter: Sorter) { - const index = sortStatesRef.value.findIndex((item) => item.columnKey === sorter.columnKey); - - if (index !== -1) { - sortStatesRef.value[index].sorter = sorter.sorter; - sortStatesRef.value[index].order = sorter.order; - } else { - sortStatesRef.value.push(sorter); - } - - reloadTable(); - } diff --git a/web/src/views/addons/hgexample/table/model.ts b/web/src/views/addons/hgexample/table/model.ts index eee7c4c..a247eea 100644 --- a/web/src/views/addons/hgexample/table/model.ts +++ b/web/src/views/addons/hgexample/table/model.ts @@ -260,7 +260,7 @@ export const columns = [ { title: 'ID', key: 'id', - sorter: true, + sorter: true, // 单列排序 }, { title: '标题', @@ -268,7 +268,9 @@ export const columns = [ render(row) { return row.title; }, - sorter: true, + sorter: { + multiple: 1, // 为多列排序的优先级，越高优先级越高 + }, }, { title: '标签', @@ -396,7 +398,9 @@ export const columns = [ { title: '价格', key: 'price', - sorter: true, + sorter: { + multiple: 2, // 为多列排序的优先级，越高优先级越高 + }, render(row) { return h( NTag, @@ -487,7 +491,9 @@ export const columns = [ render(row) { return formatToDate(row.activityAt); }, - sorter: true, + sorter: { + multiple: 3, // 为多列排序的优先级，越高优先级越高 + }, }, ]; diff --git a/web/types/table.d.ts b/web/types/table.d.ts deleted file mode 100644 index 85b4041..0000000 --- a/web/types/table.d.ts +++ /dev/null @@ -1,5 +0,0 @@ -export interface Sorter { - columnKey: string; - sorter: string | boolean; - order: string | boolean; -}