Browse Source

feat: 表格新增排序

zhangjie 1 day ago
parent
commit
2ae732c32d

+ 2 - 0
src/api/types/common.ts

@@ -8,6 +8,8 @@ export interface PageResult<T = unknown> {
 export type PageParams<T = unknown> = T & {
 export type PageParams<T = unknown> = T & {
   pageNumber: number;
   pageNumber: number;
   pageSize: number;
   pageSize: number;
+  sortProp?: string;
+  sortOrder?: 'asc' | 'desc';
 };
 };
 
 
 // page
 // page

+ 26 - 1
src/hooks/table.ts

@@ -16,10 +16,24 @@ export default function useTable<T extends Record<string, any>>(
     layout: ` prev, pager, next, jumper,sizes, ->, total`,
     layout: ` prev, pager, next, jumper,sizes, ->, total`,
   });
   });
 
 
+  interface SortConfig {
+    sortProp?: string;
+    sortOrder?: 'asc' | 'desc';
+  }
+  const sortConfig = reactive<SortConfig>({
+    sortProp: undefined,
+    sortOrder: undefined,
+  });
+  const orderMap = {
+    ascending: 'asc',
+    descending: 'desc',
+  };
+
   async function getList() {
   async function getList() {
     loading.value = true;
     loading.value = true;
     const datas = {
     const datas = {
       ...(isRef(searchModel || {}) ? searchModel.value : searchModel),
       ...(isRef(searchModel || {}) ? searchModel.value : searchModel),
+      ...sortConfig,
       pageNumber: pagination.pageNumber,
       pageNumber: pagination.pageNumber,
       pageSize: pagination.pageSize,
       pageSize: pagination.pageSize,
     };
     };
@@ -53,10 +67,20 @@ export default function useTable<T extends Record<string, any>>(
     }
     }
     toPage(page);
     toPage(page);
   }
   }
-
+  // 选择
   const handleSelectionChange = (selection: T[]) => {
   const handleSelectionChange = (selection: T[]) => {
     selectedRows.value = selection;
     selectedRows.value = selection;
   };
   };
+  // 排序
+  const handleSortChange = (data: {
+    column: any;
+    prop: string;
+    order: SortConfig['sortOrder'];
+  }) => {
+    sortConfig.sortProp = data.prop || undefined;
+    sortConfig.sortOrder = orderMap[data.order] || undefined;
+    getList();
+  };
 
 
   return {
   return {
     loading,
     loading,
@@ -69,5 +93,6 @@ export default function useTable<T extends Record<string, any>>(
     pageSizeChange,
     pageSizeChange,
     deletePageLastItem,
     deletePageLastItem,
     handleSelectionChange,
     handleSelectionChange,
+    handleSortChange,
   };
   };
 }
 }

+ 12 - 2
src/views/mark/MarkProgress.vue

@@ -62,10 +62,11 @@
       :data="dataList"
       :data="dataList"
       :loading="loading"
       :loading="loading"
       @selection-change="handleSelectionChange"
       @selection-change="handleSelectionChange"
+      @sort-change="handleSortChange"
     >
     >
       <el-table-column type="selection" width="55" />
       <el-table-column type="selection" width="55" />
       <el-table-column property="courseName" label="科目" min-width="200" />
       <el-table-column property="courseName" label="科目" min-width="200" />
-      <el-table-column label="选做异常" min-width="100">
+      <el-table-column label="选做异常" sortable min-width="100">
         <template #default="scope">
         <template #default="scope">
           <el-tag :type="scope.row.isOptionalException ? 'danger' : 'success'">
           <el-tag :type="scope.row.isOptionalException ? 'danger' : 'success'">
             {{ scope.row.isOptionalException ? '是' : '否' }}
             {{ scope.row.isOptionalException ? '是' : '否' }}
@@ -76,13 +77,20 @@
         property="uploadCount"
         property="uploadCount"
         label="上传人数"
         label="上传人数"
         min-width="100"
         min-width="100"
+        sortable
       />
       />
       <el-table-column
       <el-table-column
         property="subjectiveTotalScore"
         property="subjectiveTotalScore"
         label="主观总分"
         label="主观总分"
         min-width="100"
         min-width="100"
+        sortable
+      />
+      <el-table-column
+        property="groupCount"
+        label="分组总数"
+        sortable
+        min-width="100"
       />
       />
-      <el-table-column property="groupCount" label="分组总数" min-width="100" />
       <el-table-column label="完成进度" min-width="120">
       <el-table-column label="完成进度" min-width="120">
         <template #default="scope">
         <template #default="scope">
           <el-progress
           <el-progress
@@ -95,6 +103,7 @@
         property="unReviewedCount"
         property="unReviewedCount"
         label="待复核量"
         label="待复核量"
         min-width="100"
         min-width="100"
+        sortable
       />
       />
     </el-table>
     </el-table>
     <el-pagination
     <el-pagination
@@ -144,6 +153,7 @@
     toPage,
     toPage,
     pageSizeChange,
     pageSizeChange,
     handleSelectionChange,
     handleSelectionChange,
+    handleSortChange,
   } = useTable<MarkStatItem>(getMarkStatList, searchModel, false);
   } = useTable<MarkStatItem>(getMarkStatList, searchModel, false);
 
 
   // 统计信息
   // 统计信息

+ 3 - 1
src/views/user/components/SelectSubjectDialog.vue

@@ -202,7 +202,9 @@
         return props.selectIds.includes(item.id);
         return props.selectIds.includes(item.id);
       });
       });
       if (selectedSubjects.value.length > 0) {
       if (selectedSubjects.value.length > 0) {
-        tableRef.value?.toggleRowSelection(selectedSubjects.value, true);
+        selectedSubjects.value.forEach((item) => {
+          tableRef.value?.toggleRowSelection(item, true);
+        });
       } else {
       } else {
         tableRef.value?.toggleAllSelection();
         tableRef.value?.toggleAllSelection();
       }
       }