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

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