Merge pull request #48 from bufanyun/v2.0

排序器增加优先级和单列排序支持

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 };

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<DataTableSortState[]>([]);
+
+  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,
+  };
+}

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<State>();
   const actionRef = ref();
-  const sortStatesRef = ref<Sorter[]>([]);
+  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();
-  }
 </script>
 
 <style lang="less" scoped></style>

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, // 为多列排序的优先级，越高优先级越高
+    },
   },
 ];
 

web/types/table.d.ts

@@ -1,5 +0,0 @@
-export interface Sorter {
-  columnKey: string;
-  sorter: string | boolean;
-  order: string | boolean;
-}