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

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

@@ -1,14 +1,11 @@
 <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 label="事件日期" style="width: 308px">
+      </el-form-item> -->
+      <el-form-item label="事件日期" style="width: 308px">
         <el-date-picker v-model="daterangeEventDate" value-format="YYYY-MM-DD" type="daterange" range-separator="-"
           start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
       </el-form-item>
@@ -53,29 +50,68 @@
 
     <el-table v-loading="loading" :data="breast_ratingList" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="创建时间" align="center" prop="createTime" min-width="150" 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="manageTags" min-width="100px" fixed />
+      <el-table-column label="品种" align="center" prop="varietyName" />
+      <el-table-column label="事件类型" align="center" prop="eventType" />
       <el-table-column label="事件日期" align="center" prop="eventDate" min-width="120px">
         <template #default="scope">
           <span>{{ parseTime(scope.row.eventDate, '{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="varietyName" />
-      <el-table-column label="事件类型" align="center" prop="eventType" />
       <el-table-column label="羊舍" align="center" prop="sheepfoldName" min-width="120px" />
-      <el-table-column label="乳房深度" align="center" prop="depth" />
-      <el-table-column label="乳房长度" align="center" prop="length" />
+      <el-table-column label="乳房深度" align="center" prop="depth">
+        <template #header>
+          <div style="display: flex; align-items: center; gap: 4px; cursor: pointer;" @click="handleDepthSort">
+            <span>乳房深度</span>
+            <el-icon size="16" style="color: #409EFF;">
+              <ArrowUp v-if="!sortByDepth || sortDepthAsc" />
+              <ArrowDown v-else />
+            </el-icon>
+          </div>
+        </template>
+        <template #default="scope">
+          <span>{{ scope.row.depth }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="乳房长度" align="center" prop="length">
+        <template #header>
+          <div style="display: flex; align-items: center; gap: 4px; cursor: pointer;" @click="handleLengthSort">
+            <span>乳房长度</span>
+            <el-icon size="16" style="color: #409EFF;">
+              <ArrowUp v-if="!sortByLength || sortLengthAsc" />
+              <ArrowDown v-else />
+            </el-icon>
+          </div>
+        </template>
+        <template #default="scope">
+          <span>{{ scope.row.length }}</span>
+        </template>
+      </el-table-column>
       <el-table-column label="乳房位置" align="center" prop="position" />
       <el-table-column label="乳房附着" align="center" prop="adbere" />
       <el-table-column label="乳房间隔度" align="center" prop="spacing" min-width="120px" />
-      <el-table-column label="乳房评分" align="center" prop="score" />
+      <el-table-column label="乳房评分" align="center" prop="score">
+        <template #header>
+          <div style="display: flex; align-items: center; gap: 4px; cursor: pointer;" @click="handleScoreSort">
+            <span>乳房评分</span>
+            <el-icon size="16" style="color: #409EFF;">
+              <ArrowUp v-if="!sortByScore || sortScoreAsc" />
+              <ArrowDown v-else />
+            </el-icon>
+          </div>
+        </template>
+        <template #default="scope">
+          <span>{{ scope.row.score }}</span>
+        </template>
+      </el-table-column>
       <el-table-column label="备注" align="center" prop="comment" />
       <el-table-column label="技术员" align="center" prop="technician" />
       <el-table-column label="创建人" align="center" prop="createBy" />
+      <el-table-column label="创建时间" align="center" prop="createTime" min-width="150">
+        <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" min-width="120px" fixed="right">
         <template #default="scope">
           <!-- <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"
@@ -87,14 +123,11 @@
     </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="550px" append-to-body>
       <el-form ref="breast_ratingRef" :model="form" :rules="rules" label-width="115px">
-        <!-- <el-form-item label="羊只id" prop="sheepId">
-          <el-input v-model="form.sheepId" placeholder="请输入羊只id" />
-        </el-form-item> -->
         <el-form-item label="管理耳号" prop="manageTags">
           <el-input v-model="form.manageTags" placeholder="请输入管理耳号" @blur="onManageTagsBlur" clearable
             :disabled="!isAdd" />
@@ -144,6 +177,7 @@ import { listBreast_rating, getBreast_rating, delBreast_rating, addBreast_rating
 import { checkSheepByManageTags, getVarietyOptions } from "@/api/produce/other/fixHoof"
 import { listSheepfold_management as listSheepfold } from '@/api/fileManagement/sheepfold_management'
 import { getCurrentInstance, reactive, ref } from "vue"
+import { ArrowUp, ArrowDown } from '@element-plus/icons-vue'
 
 const { proxy } = getCurrentInstance()
 
@@ -159,6 +193,15 @@ const title = ref("")
 const daterangeCreateTime = ref([])
 const daterangeEventDate = ref([]);
 const isAdd = ref(false)
+// 乳房深度排序
+const sortByDepth = ref(false)
+const sortDepthAsc = ref(true)
+// 乳房长度排序
+const sortByLength = ref(false)
+const sortLengthAsc = ref(true)
+// 乳房评分排序
+const sortByScore = ref(false)
+const sortScoreAsc = ref(true)
 const data = reactive({
   form: {
     id: null,
@@ -175,14 +218,14 @@ const data = reactive({
   },
   queryParams: {
     pageNum: 1,
-    pageSize: 10,
+    pageSize: 20,
     manageTags: null
   },
   rules: {
     manageTags: [
       { required: true, message: '请输入管理耳号', trigger: 'blur' }
     ],
-    eventDate:[
+    eventDate: [
       { required: true, message: '请选择事件日期', trigger: 'blur' }
     ],
     score: [
@@ -208,6 +251,20 @@ function getList() {
     queryParams.value.params["beginCreateTime"] = daterangeCreateTime.value[0]
     queryParams.value.params["endCreateTime"] = daterangeCreateTime.value[1]
   }
+  if (sortByDepth.value) {
+    queryParams.value.orderBy = "depth";
+    queryParams.value.sortDirection = sortDepthAsc.value ? "ASC" : "DESC";
+  } else if (sortByLength.value) {
+    queryParams.value.orderBy = "length";
+    queryParams.value.sortDirection = sortLengthAsc.value ? "ASC" : "DESC";
+  } else if (sortByScore.value) {
+    queryParams.value.orderBy = "score";
+    queryParams.value.sortDirection = sortScoreAsc.value ? "ASC" : "DESC";
+  } else {
+    queryParams.value.orderBy = null;
+    queryParams.value.sortDirection = null;
+  }
+
   listBreast_rating(queryParams.value).then(response => {
     breast_ratingList.value = response.rows
     total.value = response.total
@@ -239,6 +296,49 @@ function onManageTagsBlur() {
     form.value.comment = null;
   });
 }
+//乳房深度排序
+function handleDepthSort() {
+  console.log("sortByDepth before:", sortByDepth.value);
+  sortByLength.value = false;
+  sortByScore.value = false;
+  if (sortByDepth.value) {
+    sortDepthAsc.value = !sortDepthAsc.value;
+  } else {
+    sortByDepth.value = true;
+    sortDepthAsc.value = true;
+  }
+  queryParams.value.pageNum = 1;
+  console.log("sortByDepth after:", sortByDepth.value);
+  getList();
+}
+
+//乳头长度排序
+function handleLengthSort() {
+  sortByDepth.value = false;
+  sortByScore.value = false;
+  if (sortByLength.value) {
+    sortLengthAsc.value = !sortLengthAsc.value;
+  } else {
+    sortByLength.value = true;
+    sortLengthAsc.value = true;
+  }
+  queryParams.value.pageNum = 1;
+  getList();
+}
+
+//乳况评分排序
+function handleScoreSort() {
+  sortByDepth.value = false;
+  sortByLength.value = false;
+  if (sortByScore.value) {
+    sortScoreAsc.value = !sortScoreAsc.value;
+  } else {
+    sortByScore.value = true;
+    sortScoreAsc.value = true;
+  }
+  queryParams.value.pageNum = 1;
+  getList();
+}
 
 // 取消按钮
 function cancel() {
@@ -277,6 +377,12 @@ function resetQuery() {
   daterangeCreateTime.value = []
   daterangeEventDate.value = [];
   proxy.resetForm("queryRef")
+  sortByDepth.value = false
+  sortByLength.value = false
+  sortByScore.value = false
+  sortDepthAsc.value = true
+  sortLengthAsc.value = true
+  sortScoreAsc.value = true
   handleQuery()
 }