新增羊只中羊只类型改为非必填；转场转群部分搜索框去除创建时间和事件类型；三个改**页面的新增，查询，导出完善；每页条数设置；填写数字的字段数可排序

src/views/produce/bodyManage/body_measure/index.vue

@@ -1,13 +1,10 @@
 <template>
   <div class="app-container">
     <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
-      <!-- <el-form-item label="羊只id" prop="sheepId">
-        <el-input v-model="queryParams.sheepId" placeholder="请输入羊只id" clearable @keyup.enter="handleQuery" />
-      </el-form-item> -->
-      <el-form-item label="创建时间" style="width: 308px">
+      <!-- <el-form-item label="创建时间" style="width: 308px">
         <el-date-picker v-model="daterangeCreateTime" value-format="YYYY-MM-DD" type="daterange" range-separator="-"
           start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
-      </el-form-item>
+      </el-form-item> -->
       <el-form-item label="测量日期" style="width: 308px">
         <el-date-picker v-model="daterangeMeasureDate" value-format="YYYY-MM-DD" type="daterange" range-separator="-"
           start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
@@ -59,17 +56,7 @@
 
     <el-table v-loading="loading" :data="body_measureList" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="创建时间" align="center" prop="createTime" width="180" fixed>
-        <template #default="scope">
-          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}') }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="测量日期" align="center" prop="measureDate" width="120">
-        <template #default="scope">
-          <span>{{ parseTime(scope.row.measureDate, '{y}-{m}-{d}') }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="管理耳号" align="center" prop="manageTags" min-width="100px" />
+      <el-table-column label="管理耳号" align="center" prop="manageTags" min-width="100px" fixed />
       <el-table-column label="羊舍" align="center" prop="sheepfoldName" min-width="100px" />
       <el-table-column label="品种" align="center" prop="varietyName" />
       <el-table-column label="事件类型" align="center" prop="eventType" width="120" />
@@ -79,43 +66,270 @@
           <span>{{ genderMap[scope.row.gender] || '未知' }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="胎次" align="center" prop="parity" />
-      <el-table-column label="出生体重(kg)" align="center" prop="birthWeight" min-width="100px" />
-      <el-table-column label="断奶体重(kg)" align="center" prop="weaningWeight" min-width="100px" />
-      <el-table-column label="当前体重(kg)" align="center" prop="currentWeight" min-width="100px" />
-      <el-table-column label="体高" align="center" prop="height" />
-      <el-table-column label="胸围" align="center" prop="bust" />
-      <el-table-column label="体斜长" align="center" prop="bodyLength" />
-      <el-table-column label="管围" align="center" prop="pipeLength" />
-      <el-table-column label="胸深" align="center" prop="chestDepth" />
-      <el-table-column label="臀高" align="center" prop="hipHeight" />
-      <el-table-column label="尻宽" align="center" prop="rumpWidth" />
-      <el-table-column label="尻高" align="center" prop="rumpHeignt" />
-      <el-table-column label="腰角宽" align="center" prop="hipWidth" />
-      <el-table-column label="十字部高" align="center" prop="hipCrossHeight" />
+      <el-table-column label="胎次" align="center" prop="parity">
+        <template #header>
+          <div style="display: flex; align-items: center; gap: 4px; cursor: pointer;" @click="handleSort('parity')">
+            <span>胎次</span>
+            <el-icon size="16" style="color: skyblue;">
+              <ArrowUp v-if="!sortStates.parity.isSorting || sortStates.parity.isAsc" />
+              <ArrowDown v-else />
+            </el-icon>
+          </div>
+        </template>
+        <template #default="scope">
+          <span>{{ scope.row.parity }}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column label="出生体重(kg)" align="center" prop="birthWeight" min-width="100px">
+        <template #header>
+          <div style="display: flex; align-items: center; gap: 4px; cursor: pointer;"
+            @click="handleSort('birthWeight')">
+            <span>出生体重(kg)</span>
+            <el-icon size="16" style="color: skyblue;">
+              <ArrowUp v-if="!sortStates.birthWeight.isSorting || sortStates.birthWeight.isAsc" />
+              <ArrowDown v-else />
+            </el-icon>
+          </div>
+        </template>
+        <template #default="scope">
+          <span>{{ scope.row.birthWeight }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="断奶体重(kg)" align="center" prop="weaningWeight" min-width="100px">
+        <template #header>
+          <div style="display: flex; align-items: center; gap: 4px; cursor: pointer;"
+            @click="handleSort('weaningWeight')">
+            <span>断奶体重(kg)</span>
+            <el-icon size="16" style="color: skyblue;">
+              <ArrowUp v-if="!sortStates.weaningWeight.isSorting || sortStates.weaningWeight.isAsc" />
+              <ArrowDown v-else />
+            </el-icon>
+          </div>
+        </template>
+        <template #default="scope">
+          <span>{{ scope.row.weaningWeight }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="当前体重(kg)" align="center" prop="currentWeight" min-width="100px">
+        <template #header>
+          <div style="display: flex; align-items: center; gap: 4px; cursor: pointer;"
+            @click="handleSort('currentWeight')">
+            <span>当前体重(kg)</span>
+            <el-icon size="16" style="color: skyblue;">
+              <ArrowUp v-if="!sortStates.currentWeight.isSorting || sortStates.currentWeight.isAsc" />
+              <ArrowDown v-else />
+            </el-icon>
+          </div>
+        </template>
+        <template #default="scope">
+          <span>{{ scope.row.currentWeight }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="体高" align="center" prop="height">
+        <template #header>
+          <div style="display: flex; align-items: center; gap: 4px; cursor: pointer;" @click="handleSort('height')">
+            <span>体高</span>
+            <el-icon size="16" style="color: skyblue;">
+              <ArrowUp v-if="!sortStates.height.isSorting || sortStates.height.isAsc" />
+              <ArrowDown v-else />
+            </el-icon>
+          </div>
+        </template>
+        <template #default="scope">
+          <span>{{ scope.row.height }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="胸围" align="center" prop="bust">
+        <template #header>
+          <div style="display: flex; align-items: center; gap: 4px; cursor: pointer;" @click="handleSort('bust')">
+            <span>胸围</span>
+            <el-icon size="16" style="color: skyblue;">
+              <ArrowUp v-if="!sortStates.bust.isSorting || sortStates.bust.isAsc" />
+              <ArrowDown v-else />
+            </el-icon>
+          </div>
+        </template>
+        <template #default="scope">
+          <span>{{ scope.row.bust }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="体斜长" align="center" prop="bodyLength">
+        <template #header>
+          <div style="display: flex; align-items: center; gap: 4px; cursor: pointer;" @click="handleSort('bodyLength')">
+            <span>体斜长</span>
+            <el-icon size="16" style="color: skyblue;">
+              <ArrowUp v-if="!sortStates.bodyLength.isSorting || sortStates.bodyLength.isAsc" />
+              <ArrowDown v-else />
+            </el-icon>
+          </div>
+        </template>
+        <template #default="scope">
+          <span>{{ scope.row.bodyLength }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="管围" align="center" prop="pipeLength">
+        <template #header>
+          <div style="display: flex; align-items: center; gap: 4px; cursor: pointer;" @click="handleSort('pipeLength')">
+            <span>管围</span>
+            <el-icon size="16" style="color: skyblue;">
+              <ArrowUp v-if="!sortStates.pipeLength.isSorting || sortStates.pipeLength.isAsc" />
+              <ArrowDown v-else />
+            </el-icon>
+          </div>
+        </template>
+        <template #default="scope">
+          <span>{{ scope.row.pipeLength }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="胸深" align="center" prop="chestDepth">
+        <template #header>
+          <div style="display: flex; align-items: center; gap: 4px; cursor: pointer;" @click="handleSort('chestDepth')">
+            <span>胸深</span>
+            <el-icon size="16" style="color: skyblue;">
+              <ArrowUp v-if="!sortStates.chestDepth.isSorting || sortStates.chestDepth.isAsc" />
+              <ArrowDown v-else />
+            </el-icon>
+          </div>
+        </template>
+        <template #default="scope">
+          <span>{{ scope.row.chestDepth }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="臀高" align="center" prop="hipHeight">
+        <template #header>
+          <div style="display: flex; align-items: center; gap: 4px; cursor: pointer;" @click="handleSort('hipHeight')">
+            <span>臀高</span>
+            <el-icon size="16" style="color: skyblue;">
+              <ArrowUp v-if="!sortStates.hipHeight.isSorting || sortStates.hipHeight.isAsc" />
+              <ArrowDown v-else />
+            </el-icon>
+          </div>
+        </template>
+        <template #default="scope">
+          <span>{{ scope.row.hipHeight }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="尻宽" align="center" prop="rumpWidth">
+        <template #header>
+          <div style="display: flex; align-items: center; gap: 4px; cursor: pointer;" @click="handleSort('rumpWidth')">
+            <span>尻宽</span>
+            <el-icon size="16" style="color: skyblue;">
+              <ArrowUp v-if="!sortStates.rumpWidth.isSorting || sortStates.rumpWidth.isAsc" />
+              <ArrowDown v-else />
+            </el-icon>
+          </div>
+        </template>
+        <template #default="scope">
+          <span>{{ scope.row.rumpWidth }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="尻高" align="center" prop="rumpHeignt">
+        <template #header>
+          <div style="display: flex; align-items: center; gap: 4px; cursor: pointer;" @click="handleSort('rumpHeignt')">
+            <span>尻高</span>
+            <el-icon size="16" style="color: skyblue;">
+              <ArrowUp v-if="!sortStates.rumpHeignt.isSorting || sortStates.rumpHeignt.isAsc" />
+              <ArrowDown v-else />
+            </el-icon>
+          </div>
+        </template>
+        <template #default="scope">
+          <span>{{ scope.row.rumpHeignt }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="腰角宽" align="center" prop="hipWidth">
+        <template #header>
+          <div style="display: flex; align-items: center; gap: 4px; cursor: pointer;" @click="handleSort('hipWidth')">
+            <span>腰角宽</span>
+            <el-icon size="16" style="color: skyblue;">
+              <ArrowUp v-if="!sortStates.hipWidth.isSorting || sortStates.hipWidth.isAsc" />
+              <ArrowDown v-else />
+            </el-icon>
+          </div>
+        </template>
+        <template #default="scope">
+          <span>{{ scope.row.hipWidth }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="十字部高" align="center" prop="hipCrossHeight">
+        <template #header>
+          <div style="display: flex; align-items: center; gap: 4px; cursor: pointer;"
+            @click="handleSort('hipCrossHeight')">
+            <span>十字部高</span>
+            <el-icon size="16" style="color: skyblue;">
+              <ArrowUp v-if="!sortStates.hipCrossHeight.isSorting || sortStates.hipCrossHeight.isAsc" />
+              <ArrowDown v-else />
+            </el-icon>
+          </div>
+        </template>
+        <template #default="scope">
+          <span>{{ scope.row.hipCrossHeight }}</span>
+        </template>
+      </el-table-column>
       <el-table-column label="繁育状态" align="center" prop="breedStatusName" width="100">
         <template #default="scope">
           <span>{{ scope.row.breedStatusName || '未设置' }}</span>
         </template>
       </el-table-column>
       <el-table-column label="泌乳天数" align="center" prop="lactationDay" width="100">
+        <template #header>
+          <div style="display: flex; align-items: center; gap: 4px; cursor: pointer;"
+            @click="handleSort('lactationDay')">
+            <span>泌乳天数</span>
+            <el-icon size="16" style="color: skyblue;">
+              <ArrowUp v-if="!sortStates.lactationDay.isSorting || sortStates.lactationDay.isAsc" />
+              <ArrowDown v-else />
+            </el-icon>
+          </div>
+        </template>
         <template #default="scope">
           <span>{{ scope.row.lactationDay || '-' }}</span>
         </template>
       </el-table-column>
       <el-table-column label="怀孕天数" align="center" prop="gestationDay" width="100">
+        <template #header>
+          <div style="display: flex; align-items: center; gap: 4px; cursor: pointer;"
+            @click="handleSort('gestationDay')">
+            <span>怀孕天数</span>
+            <el-icon size="16" style="color: skyblue;">
+              <ArrowUp v-if="!sortStates.gestationDay.isSorting || sortStates.gestationDay.isAsc" />
+              <ArrowDown v-else />
+            </el-icon>
+          </div>
+        </template>
         <template #default="scope">
           <span>{{ scope.row.gestationDay || '-' }}</span>
         </template>
       </el-table-column>
       <el-table-column label="配后天数" align="center" prop="postMatingDay" width="100">
+        <template #header>
+          <div style="display: flex; align-items: center; gap: 4px; cursor: pointer;"
+            @click="handleSort('postMatingDay')">
+            <span>配后天数</span>
+            <el-icon size="16" style="color: skyblue;">
+              <ArrowUp v-if="!sortStates.postMatingDay.isSorting || sortStates.postMatingDay.isAsc" />
+              <ArrowDown v-else />
+            </el-icon>
+          </div>
+        </template>
         <template #default="scope">
           <span>{{ scope.row.postMatingDay || '-' }}</span>
         </template>
       </el-table-column>
       <el-table-column label="备注" align="center" prop="comment" min-width="100px" />
       <el-table-column label="技术员" align="center" prop="technician" />
+        <el-table-column label="测量日期" align="center" prop="measureDate" width="120">
+        <template #default="scope">
+          <span>{{ parseTime(scope.row.measureDate, '{y}-{m}-{d}') }}</span>
+        </template>
+      </el-table-column>
       <el-table-column label="创建人" align="center" prop="createBy" />
+      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+        <template #default="scope">
+          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}') }}</span>
+        </template>
+      </el-table-column>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" min-width="130px">
         <template #default="scope">
           <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"
@@ -127,7 +341,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" @pagination="getList" :page-sizes="[20, 50, 100, 200, 500, 1000, 2000]" />
 
     <!-- 添加或修改体尺测量对话框 -->
     <el-dialog :title="title" v-model="open" width="700px" append-to-body>
@@ -212,6 +426,8 @@ import { getSheepByManageTags } from "@/api/produce/manage_sheep/changeVariety"
 import { listSheepfold_management as listSheepfold } from '@/api/fileManagement/sheepfold_management'
 import { getVarietyOptions } from '@/api/produce/other/fixHoof'
 import { getCurrentInstance } from 'vue'
+import { ArrowUp, ArrowDown } from '@element-plus/icons-vue'
+
 const { proxy } = getCurrentInstance()
 
 const body_measureList = ref([])
@@ -237,7 +453,7 @@ const data = reactive({
   form: { manageTags: null, technician: null },
   queryParams: {
     pageNum: 1,
-    pageSize: 10,
+    pageSize: 20,
     sheepId: null,
     sheepfoldId: null,
     varietyId: null,
@@ -262,7 +478,20 @@ const data = reactive({
 
 const { queryParams, form, rules } = toRefs(data)
 
-/** 查询体尺测量列表 */
+const [smFields, bsFields] = [
+  // sc_body_measure 表字段
+  ['height', 'bust', 'bodyLength', 'pipeLength', 'chestDepth', 'hipHeight', 'rumpWidth', 'rumpHeignt', 'hipWidth', 'hipCrossHeight'],
+  // bas_sheep 表字段
+  ['parity', 'birthWeight', 'weaningWeight', 'currentWeight', 'lactationDay', 'gestationDay', 'postMatingDay']
+];
+
+// 排序状态
+const sortStates = reactive({
+  ...smFields.reduce((obj, field) => ({ ...obj, [field]: { isSorting: false, isAsc: true } }), {}),
+  ...bsFields.reduce((obj, field) => ({ ...obj, [field]: { isSorting: false, isAsc: true } }), {})
+});
+
+//查询体尺测量列表 
 function getList() {
   loading.value = true
   queryParams.value.params = {}
@@ -281,6 +510,23 @@ function getList() {
   })
 }
 
+/**
+ * 通用排序方法（所有需要排序的列共用）
+ * @param {String} prop - 排序字段
+ */
+function handleSort(prop) {
+  Object.keys(sortStates).forEach(key => {
+    sortStates[key].isSorting = false;
+  });
+  const current = sortStates[prop];
+  current.isSorting = true;
+  current.isAsc = !current.isAsc;
+  queryParams.value.orderBy = prop;
+  queryParams.value.sortDirection = current.isAsc ? 'ASC' : 'DESC';
+  queryParams.value.pageNum = 1;
+  getList();
+}
+
 // 耳号脱焦验证
 function onManageTagsBlur() {
   const tag = form.value.manageTags?.trim();
@@ -351,6 +597,12 @@ function resetQuery() {
   data.varietyName = '';
   daterangeMeasureDate.value = [];
   proxy.resetForm("queryRef");
+  Object.keys(sortStates).forEach(key => {
+    sortStates[key].isSorting = false
+    sortStates[key].isAsc = true
+  })
+  queryParams.value.orderBy = null;
+  queryParams.value.sortDirection = null;
   handleQuery();
 }