分页查询部分页面的排序

src/views/biosafety/treatment/index.vue

@@ -45,7 +45,8 @@
     </el-row>
 
     <!-- 列表 -->
-    <el-table v-loading="loading" :data="treatmentList" @selection-change="handleSelectionChange">
+    <el-table v-loading="loading" :data="treatmentList" @selection-change="handleSelectionChange"
+      @sort-change="handleSortChange">
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="治疗日期" align="center" prop="datetime" width="180">
         <template #default="scope">
@@ -55,14 +56,14 @@
       <el-table-column label="羊只耳号" align="center" prop="sheepNo" />
       <el-table-column label="品种" align="center" prop="variety" />
       <el-table-column label="羊只类别" align="center" prop="sheepType" />
-      <el-table-column label="月龄" align="center" prop="monthAge" />
+      <el-table-column label="月龄" align="center" prop="monthAge" sortable="custom" />
       <el-table-column label="羊只性别" align="center" prop="gender">
         <template #default="scope"><dict-tag :options="sheep_gender" :value="scope.row.gender" /></template>
       </el-table-column>
-      <el-table-column label="胎次" align="center" prop="parity" />
+      <el-table-column label="胎次" align="center" prop="parity" sortable="custom" />
       <el-table-column label="繁殖状态" align="center" prop="breed" />
-      <el-table-column label="泌乳天数" align="center" prop="lactDay" />
-      <el-table-column label="怀孕天数" align="center" prop="gestDay" />
+      <el-table-column label="泌乳天数" align="center" prop="lactDay" sortable="custom" width="120px"/>
+      <el-table-column label="怀孕天数" align="center" prop="gestDay" sortable="custom" width="120px"/>
       <el-table-column label="疾病类型" align="center" prop="diseaseName" />
       <el-table-column label="治疗状态" align="center" prop="treatmentPlan">
         <template #default="scope"><dict-tag :options="treat_status" :value="scope.row.status" /></template>
@@ -80,7 +81,7 @@
     </el-table>
 
     <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
-      v-model:limit="queryParams.pageSize" @pagination="getList" />
+      v-model:limit="queryParams.pageSize" :page-sizes="[20, 50, 100, 200, 500, 1000, 2000]" @pagination="getList" />
 
     <!-- 新增弹窗 -->
     <el-dialog title="添加治疗记录" v-model="addDialog" width="70%" top="5vh" append-to-body destroy-on-close>
@@ -155,7 +156,7 @@
           </el-table-column>
           <el-table-column label="用量" width="160px">
             <template #default="scope">
-              <el-input-number v-model="scope.row.dosage" :min="0" :precision="1" style="width: 120px;"/>
+              <el-input-number v-model="scope.row.dosage" :min="0" :precision="1" style="width: 120px;" />
             </template>
           </el-table-column>
           <el-table-column label="单位">
@@ -462,9 +463,11 @@ const sheepfolds = ref([])
 
 const queryParams = reactive({
   pageNum: 1,
-  pageSize: 10,
+  pageSize: 20,
   sheepNo: null,
-  veterinary: null
+  veterinary: null,
+  orderByColumn: null,   // 新增
+  isAsc: null
 })
 
 /* ---------- 弹窗控制 ---------- */
@@ -759,6 +762,17 @@ function handleSelectionChange(selection) {
   multiple.value = !selection.length
 }
 
+function handleSortChange({ prop, order }) {
+  if (!order) {   // 取消排序
+    queryParams.orderByColumn = null
+    queryParams.isAsc = null
+  } else {
+    queryParams.orderByColumn = prop  
+    queryParams.isAsc = order === 'ascending' ? 'asc' : 'desc'
+  }
+  getList()
+}
+
 /* 跳转诊疗 */
 function gotDiag(row) {
   router.push({ path: '/biosafety/diagnosis/add', query: { tId: row.id, sId: row.sheepId } })