优化默认角色数据，增加表格多字段排序例子

web/src/views/addons/hgexample/table/index.vue

@@ -29,6 +29,7 @@
         :scroll-x="1090"
         :resizeHeightOffset="-10000"
         size="small"
+        @update:sorter="handleUpdateSorter"
       >
         <template #tableTitle>
           <n-button type="primary" @click="addTable" class="min-left-space">
@@ -83,6 +84,7 @@
   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();
@@ -93,6 +95,7 @@
   const showModal = ref(false);
   const formParams = ref<State>();
   const actionRef = ref();
+  const sortStatesRef = ref<Sorter[]>([]);
 
   const actionColumn = reactive({
     width: 300,
@@ -164,7 +167,11 @@
   });
 
   const loadDataTable = async (res) => {
-    return await List({ ...searchFormRef.value?.formModel, ...res });
+    return await List({
+      ...searchFormRef.value?.formModel,
+      ...{ sorters: sortStatesRef.value },
+      ...res,
+    });
   };
 
   function addTable() {
@@ -243,6 +250,19 @@
       });
     });
   }
+
+  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,6 +260,7 @@ export const columns = [
   {
     title: 'ID',
     key: 'id',
+    sorter: true,
   },
   {
     title: '标题',
@@ -267,6 +268,7 @@ export const columns = [
     render(row) {
       return row.title;
     },
+    sorter: true,
   },
   {
     title: '标签',
@@ -394,6 +396,7 @@ export const columns = [
   {
     title: '价格',
     key: 'price',
+    sorter: true,
     render(row) {
       return h(
         NTag,

web/src/views/home/message/list.vue

@@ -1,9 +1,6 @@
 <template>
   <n-spin :show="loading">
-    <n-empty
-      v-show="!dataSource.list || dataSource.list.length === 0"
-      description="无数据"
-    />
+    <n-empty v-show="!dataSource.list || dataSource.list.length === 0" description="无数据" />
 
     <n-list hoverable clickable class="list-item">
       <n-list-item v-for="item in dataSource.list" :key="item.id" @click="UnRead(item)">
@@ -52,7 +49,9 @@
       show-size-picker
       :on-update:page="onUpdatePage"
       :on-update:page-size="onUpdatePageSize"
-    />
+    >
+      <template #prefix>共 {{ dataSource.totalCount }} 条</template>
+    </n-pagination>
   </n-space>
 </template>
 
@@ -75,6 +74,7 @@
     page: number;
     pageSize: number;
     pageCount: number;
+    totalCount: number;
     list: null | MessageRow[];
   }
 

web/src/views/permission/role/role.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <n-card :bordered="false"  title="角色管理">
+    <n-card :bordered="false" title="角色管理">
       <n-space vertical :size="12">
         <n-space>
           <n-button type="primary" @click="addTable">
@@ -174,7 +174,6 @@
 
   const formRef: any = ref(null);
   const message = useMessage();
-  const actionRef = ref();
   const dialog = useDialog();
   const showModal2 = ref(false);
   const showModal = ref(false);
@@ -272,20 +271,13 @@
   const loadDataTable = async (res: any) => {
     loading.value = true;
     const tmp = await getRoleList({ ...res, ...{ pageSize: 100, page: 1 } });
-    data.value = tmp?.list;
-    if (data.value === undefined || data.value === null) {
-      data.value = [];
-    }
+    data.value = tmp.list ?? [];
     loading.value = false;
   };
 
-  onMounted(async () => {
-    await loadDataTable({});
-  });
-
   function reloadTable() {
-    actionRef.value.reload();
     loadDataList();
+    loadDataTable({});
   }
 
   function confirmForm(e: any) {
@@ -421,6 +413,7 @@
     await loadMenuList();
     await loadDeptList();
     await loadDataScopeSelect();
+    await loadDataTable({});
   });
 
   async function loadDataList() {

web/types/table.d.ts

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