分页查询部分页面的排序

src/views/biosafety/usageInfo/index.vue

@@ -1,68 +1,30 @@
 <template>
   <div class="app-container">
     <!-- 搜索表单 -->
-    <el-form
-      ref="queryRef"
-      :model="queryParams"
-      :inline="true"
-      v-show="showSearch"
-      label-width="68px"
-    >
+    <el-form ref="queryRef" :model="queryParams" :inline="true" v-show="showSearch" label-width="68px">
       <!-- 使用日期（新增） -->
       <el-form-item label="使用日期" style="width: 308px">
-        <el-date-picker
-          v-model="daterangeUseTime"
-          type="daterange"
-          range-separator="-"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
-          value-format="YYYY-MM-DD"
-        />
+        <el-date-picker v-model="daterangeUseTime" type="daterange" range-separator="-" start-placeholder="开始日期"
+          end-placeholder="结束日期" value-format="YYYY-MM-DD" />
       </el-form-item>
 
       <!-- 创建日期（原有） -->
       <el-form-item label="创建时间" style="width: 308px">
-        <el-date-picker
-          v-model="daterangeCreateTime"
-          type="daterange"
-          range-separator="-"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
-          value-format="YYYY-MM-DD"
-        />
+        <el-date-picker v-model="daterangeCreateTime" type="daterange" range-separator="-" start-placeholder="开始日期"
+          end-placeholder="结束日期" value-format="YYYY-MM-DD" />
       </el-form-item>
 
       <el-form-item label="羊只耳号" prop="sheepNo">
-        <el-input
-          v-model="queryParams.sheepNo"
-          placeholder="羊只耳号"
-          clearable
-          @keyup.enter="handleQuery"
-        />
+        <el-input v-model="queryParams.sheepNo" placeholder="羊只耳号" clearable @keyup.enter="handleQuery" />
       </el-form-item>
 
       <el-form-item label="使用名称" prop="name">
-        <el-input
-          v-model="queryParams.name"
-          placeholder="请输入使用名称"
-          clearable
-          @keyup.enter="handleQuery"
-        />
+        <el-input v-model="queryParams.name" placeholder="请输入使用名称" clearable @keyup.enter="handleQuery" />
       </el-form-item>
 
       <el-form-item label="使用类型" prop="useType">
-        <el-select
-          v-model="queryParams.useType"
-          placeholder="请选择使用类型"
-          clearable
-          style="width: 180px"
-        >
-          <el-option
-            v-for="dict in pres_type"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
-          />
+        <el-select v-model="queryParams.useType" placeholder="请选择使用类型" clearable style="width: 180px">
+          <el-option v-for="dict in pres_type" :key="dict.value" :label="dict.label" :value="dict.value" />
         </el-select>
       </el-form-item>
 
@@ -75,13 +37,7 @@
     <!-- 工具栏 -->
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
-        <el-button
-          type="warning"
-          plain
-          icon="Download"
-          @click="handleExport"
-          v-hasPermi="['biosafety:usage:export']"
-        >
+        <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['biosafety:usage:export']">
           导出
         </el-button>
       </el-col>
@@ -89,17 +45,8 @@
     </el-row>
 
     <!-- 数据表格 -->
-    <el-table
-      v-loading="loading"
-      :data="usageList"
-      @selection-change="handleSelectionChange"
-    >
-      <el-table-column
-        label="使用时间"
-        align="center"
-        prop="datetime"
-        width="180"
-      >
+    <el-table v-loading="loading" :data="usageList" @selection-change="handleSelectionChange">
+      <el-table-column label="使用时间" align="center" prop="datetime" width="180">
         <template #default="scope">
           <span>{{ parseTime(scope.row.datetime, '{y}-{m}-{d}') }}</span>
         </template>
@@ -112,30 +59,16 @@
           <dict-tag :options="pres_type" :value="scope.row.useType" />
         </template>
       </el-table-column>
-      <el-table-column
-        label="创建时间"
-        align="center"
-        prop="createTime"
-        width="180"
-      >
+      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
         <template #default="scope">
           <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{m}') }}</span>
         </template>
       </el-table-column>
 
-      <el-table-column
-        label="操作"
-        align="center"
-        class-name="small-padding fixed-width"
-      >
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template #default="scope">
-          <el-button
-            link
-            type="primary"
-            icon="View"
-            @click="handleDetail(scope.row)"
-            v-hasPermi="['biosafety:usage:query']"
-          >
+          <el-button link type="primary" icon="View" @click="handleDetail(scope.row)"
+            v-hasPermi="['biosafety:usage:query']">
             详情
           </el-button>
         </template>
@@ -143,38 +76,25 @@
     </el-table>
 
     <!-- 分页 -->
-    <pagination
-      v-show="total > 0"
-      :total="total"
-      v-model:page="queryParams.pageNum"
-      v-model:limit="queryParams.pageSize"
-      @pagination="getList"
-    />
-
+    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
+      v-model:limit="queryParams.pageSize" :page-sizes="[20, 50, 100, 200, 500, 1000, 2000]" @pagination="getList" />
+      
     <!-- 详情弹窗（保持不变） -->
-    <el-dialog
-      :title="title"
-      v-model="open"
-      width="680px"
-      top="8vh"
-      append-to-body
-      :close-on-click-modal="false"
-      class="usage-detail-dialog"
-    >
+    <el-dialog :title="title" v-model="open" width="680px" top="8vh" append-to-body :close-on-click-modal="false"
+      class="usage-detail-dialog">
       <!-- 基础信息 -->
       <el-card shadow="never" class="detail-card">
         <template #header>
           <div class="card-header">
-            <el-icon><Document /></el-icon> 基本信息
+            <el-icon>
+              <Document />
+            </el-icon> 基本信息
           </div>
         </template>
         <el-descriptions :column="2" border>
           <el-descriptions-item label="使用名称">{{ form.name }}</el-descriptions-item>
           <el-descriptions-item label="使用类型">
-            <el-tag
-              size="small"
-              :type="form.useType === 1 ? 'primary' : 'success'"
-            >
+            <el-tag size="small" :type="form.useType === 1 ? 'primary' : 'success'">
               {{ pres_type.find(it => it.value === form.useType)?.label || '' }}
             </el-tag>
           </el-descriptions-item>
@@ -188,16 +108,13 @@
       <el-card shadow="never" class="detail-card" style="margin-top: 16px">
         <template #header>
           <div class="card-header">
-            <el-icon><List /></el-icon> 药品使用明细
+            <el-icon>
+              <List />
+            </el-icon> 药品使用明细
           </div>
         </template>
-        <el-table
-          :data="swMedicineUsageDetailsList"
-          stripe
-          size="small"
-          :row-class-name="rowSwMedicineUsageDetailsIndex"
-          style="width: 100%"
-        >
+        <el-table :data="swMedicineUsageDetailsList" stripe size="small"
+          :row-class-name="rowSwMedicineUsageDetailsIndex" style="width: 100%">
           <el-table-column label="药品" prop="mediName" show-overflow-tooltip />
           <el-table-column label="用量" prop="dosage" width="80" />
           <el-table-column label="单位" prop="unit" align="center" :formatter="formatUnit" />
@@ -242,7 +159,7 @@ const data = reactive({
   form: {},
   queryParams: {
     pageNum: 1,
-    pageSize: 10,
+    pageSize: 20,
     name: null,
     useType: null,
     createTime: null