繁育多个页面的多耳号查询

2026-01-27 15:22:34 +08:00
parent 0280c3d013
commit 48694a63d9
16 changed files with 1865 additions and 91 deletions
--- a/src/views/breed/lambing_records/index.vue
+++ b/src/views/breed/lambing_records/index.vue
@@ -1,14 +1,105 @@
 <template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="80px">
-      <el-form-item label="母羊耳号" prop="femaleEarNumber">
-        <el-input
-            v-model="queryParams.femaleEarNumber"
-            placeholder="请输入母羊耳号"
-            clearable
-            @keyup.enter="handleQuery"
-        />
+      <!-- 修改母羊耳号查询组件 -->
+      <el-form-item label="耳号" prop="allEarNumbers">
+        <div style="display: flex; align-items: center; gap: 10px; flex-wrap: wrap;">
+          <!-- 主选择器：不显示已选标签 -->
+          <el-select
+              v-model="queryParams.allEarNumbers"
+              multiple
+              filterable
+              remote
+              reserve-keyword
+              placeholder="输入耳号搜索"
+              :remote-method="searchEarNumber"
+              :loading="earNumberLoading"
+              allow-create
+              default-first-option
+              collapse-tags
+              :max-collapse-tags="0"
+              style="width: 300px"
+              @change="handleEarNumberChange"
+          >
+            <el-option
+                v-for="item in earNumberOptions"
+                :key="item"
+                :label="item"
+                :value="item"
+            />
+          </el-select>
+
+          <!-- 辅助粘贴输入框 -->
+          <el-input
+              v-model="pasteInput"
+              placeholder="或粘贴多个耳号(空格/换行/逗号分隔)"
+              style="width: 300px"
+              @paste="handlePaste"
+              @keyup.enter="handlePasteSubmit"
+              clearable
+          >
+            <template #append>
+              <el-button @click="handlePasteSubmit" :icon="Plus">添加</el-button>
+            </template>
+          </el-input>
+
+          <!-- 耳号计数显示 -->
+          <el-tag
+              v-if="queryParams.allEarNumbers && queryParams.allEarNumbers.length > 0"
+              type="info"
+              effect="plain"
+              size="large"
+          >
+            已选: {{ queryParams.allEarNumbers.length }} 个
+          </el-tag>
+
+          <!-- 清空按钮 -->
+          <el-button
+              type="danger"
+              plain
+              @click="clearAllEarNumbers"
+              v-if="queryParams.allEarNumbers && queryParams.allEarNumbers.length > 0"
+              :icon="Delete"
+          >
+            清空全部
+          </el-button>
+        </div>
+
+        <!-- 已选耳号展示区域（默认显示2个，可展开） -->
+        <div
+            v-if="queryParams.allEarNumbers && queryParams.allEarNumbers.length > 0"
+            class="selected-ear-numbers-display"
+            style="margin-top: 10px;"
+        >
+          <!-- 显示前2个或全部耳号 -->
+          <el-tag
+              v-for="(tag, index) in displayedEarNumbers"
+              :key="tag"
+              closable
+              @close="handleRemoveEarNumber(tag)"
+              style="margin: 4px;"
+              type="success"
+          >
+            {{ tag }}
+          </el-tag>
+
+          <!-- 展开/收起按钮 -->
+          <el-button
+              v-if="queryParams.allEarNumbers.length > defaultShowCount"
+              type="primary"
+              link
+              @click="toggleExpand"
+              style="margin-left: 8px;"
+          >
+            {{ isExpanded ? '收起' : `展开剩余 ${queryParams.allEarNumbers.length - defaultShowCount} 个` }}
+            <el-icon class="el-icon--right">
+              <component :is="isExpanded ? ArrowUp : ArrowDown" />
+            </el-icon>
+          </el-button>
+        </div>
      </el-form-item>
+
+      <!-- 其他查询条件保持不变 -->
      <el-form-item label="母羊品种" prop="femaleBreed">
        <el-input
            v-model="queryParams.femaleBreed"
@@ -151,6 +242,7 @@
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
+        :page-sizes="[20,50,100,200, 500, 1000, 2000]"
        @pagination="getList"
    />

@@ -240,6 +332,19 @@
            </el-form-item>
          </el-col>
        </el-row>
+        <!-- 显示已选择的耳号标签 -->
+        <div v-if="queryParams.femaleEarNumbers && queryParams.femaleEarNumbers.length > 0" class="selected-ear-numbers">
+          <span style="margin-right: 10px; color: #606266;">已选择耳号：</span>
+          <el-tag
+              v-for="earNumber in queryParams.femaleEarNumbers"
+              :key="earNumber"
+              closable
+              @close="removeEarNumber(earNumber)"
+              style="margin-right: 8px;"
+          >
+            {{ earNumber }}
+          </el-tag>
+        </div>

        <!-- 羔羊信息录入 -->
        <div v-if="form.lambsBorn > 0 && showLambForms">
@@ -375,10 +480,32 @@
 </template>

 <script setup name="Lambing_records">
-import { listLambing_records, getLambing_records, delLambing_records, addLambing_records, updateLambing_records, getLambDetail, getVarietyList, getBreedingInfo } from "@/api/breed/lambing_records"
+import { listLambing_records, getLambing_records, delLambing_records, addLambing_records, updateLambing_records, getLambDetail, getVarietyList, getBreedingInfo,searchEarNumbers } from "@/api/breed/lambing_records"
+import { ref, computed, nextTick } from 'vue'
+import { ArrowUp, ArrowDown, Plus, Delete } from '@element-plus/icons-vue'

+// 响应式数据
+const pasteInput = ref('')           // 批量粘贴输入框
+const earNumberOptions = ref([])     // 耳号下拉选项
+const earNumberLoading = ref(false)  // 耳号加载状态
+const isExpanded = ref(false)        // 控制耳号展开/折叠状态
+const defaultShowCount = 2           // 默认显示的耳号数量
+
+// 计算属性：控制显示的耳号列表
+const displayedEarNumbers = computed(() => {
+  if (!queryParams.value.allEarNumbers || queryParams.value.allEarNumbers.length === 0) {
+    return []
+  }
+
+  // 如果展开或总数<=2，显示全部；否则只显示前2个
+  if (isExpanded.value || queryParams.value.allEarNumbers.length <= defaultShowCount) {
+    return queryParams.value.allEarNumbers
+  } else {
+    return queryParams.value.allEarNumbers.slice(0, defaultShowCount)
+  }
+})
 const { proxy } = getCurrentInstance()
-
+// 新增：耳号搜索相关状
 const lambing_recordsList = ref([])
 const open = ref(false)
 const detailOpen = ref(false)
@@ -400,7 +527,7 @@ const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
-    femaleEarNumber: null,
+    femaleEarNumber: [],
    femaleBreed: null,
    sheepId: null,
    parity: null,
@@ -425,7 +552,125 @@ const data = reactive({
 })

 const { queryParams, form, rules } = toRefs(data)
+/** 处理粘贴事件 */
+function handlePaste(event) {
+  nextTick(() => {
+    handlePasteSubmit()
+  })
+}

+/** 处理粘贴内容提交 */
+function handlePasteSubmit() {
+  if (!pasteInput.value || pasteInput.value.trim() === '') {
+    return
+  }
+
+  // 支持多种分隔符: 空格、换行、逗号、制表符
+  const separators = /[\s,，\n\r\t]+/
+  const earNumbers = pasteInput.value
+      .trim()
+      .split(separators)
+      .filter(item => item.trim() !== '')
+      .map(item => item.trim())
+
+  if (earNumbers.length === 0) {
+    return
+  }
+
+  // 去重并添加到已选列表
+  const existingSet = new Set(queryParams.value.allEarNumbers || [])
+  const newEarNumbers = []
+  const duplicates = []
+
+  earNumbers.forEach(earNumber => {
+    if (!existingSet.has(earNumber)) {
+      newEarNumbers.push(earNumber)
+      existingSet.add(earNumber)
+    } else {
+      duplicates.push(earNumber)
+    }
+  })
+
+  // 添加新耳号
+  if (newEarNumbers.length > 0) {
+    queryParams.value.allEarNumbers = [
+      ...(queryParams.value.allEarNumbers || []),
+      ...newEarNumbers
+    ]
+
+    const message = `成功添加 ${newEarNumbers.length} 个耳号，当前共 ${queryParams.value.allEarNumbers.length} 个` +
+        (duplicates.length > 0 ? `，已忽略 ${duplicates.length} 个重复耳号` : '')
+
+    proxy.$modal.msgSuccess(message)
+  } else if (duplicates.length > 0) {
+    proxy.$modal.msgWarning(`所有耳号均已存在，当前共 ${queryParams.value.allEarNumbers.length} 个`)
+  }
+
+  // 清空输入框
+  pasteInput.value = ''
+}
+
+/** 远程搜索耳号 */
+function searchEarNumber(query) {
+  if (query !== '') {
+    earNumberLoading.value = true
+
+    const queries = query.trim().split(/[\s,，]+/).filter(q => q)
+
+    if (queries.length === 1) {
+      // 单个耳号模糊搜索
+      searchEarNumbers(query).then(response => {
+        earNumberOptions.value = response.data || []
+        earNumberLoading.value = false
+      }).catch(() => {
+        earNumberOptions.value = []
+        earNumberLoading.value = false
+      })
+    } else {
+      // 多个耳号直接作为选项
+      earNumberOptions.value = queries
+      earNumberLoading.value = false
+    }
+  } else {
+    earNumberOptions.value = []
+  }
+}
+
+/** 耳号选择变化处理 */
+function handleEarNumberChange(value) {
+  queryParams.value.allEarNumbers = [...new Set(value)]
+  console.log(`已选择 ${queryParams.value.allEarNumbers.length} 个耳号:`, queryParams.value.allEarNumbers)
+}
+
+/** 切换展开/收起状态 */
+function toggleExpand() {
+  isExpanded.value = !isExpanded.value
+}
+
+/** 移除单个耳号 */
+function handleRemoveEarNumber(tag) {
+  const index = queryParams.value.allEarNumbers.indexOf(tag)
+  if (index > -1) {
+    queryParams.value.allEarNumbers.splice(index, 1)
+    proxy.$modal.msgSuccess('已移除该耳号')
+  }
+
+  // 如果删除后剩余<=2个，自动收起
+  if (queryParams.value.allEarNumbers.length <= defaultShowCount) {
+    isExpanded.value = false
+  }
+}
+
+/** 清空所有耳号 */
+function clearAllEarNumbers() {
+  proxy.$modal.confirm('确定要清空所有已选择的耳号吗？').then(() => {
+    queryParams.value.allEarNumbers = []
+    pasteInput.value = ''
+    earNumberOptions.value = []
+    isExpanded.value = false  // 重置展开状态
+    proxy.$modal.msgSuccess('已清空所有耳号')
+  }).catch(() => {})
+}
 /** 获取品种列表 */
 function getVarietyData() {
  return getVarietyList().then(response => {
@@ -438,6 +683,17 @@ function getVarietyData() {
  })
 }

+/** 新增：清空所有耳号 */
+function clearEarNumbers() {
+  queryParams.value.femaleEarNumbers = []
+}
+/** 新增：移除单个耳号 */
+function removeEarNumber(earNumber) {
+  const index = queryParams.value.femaleEarNumbers.indexOf(earNumber)
+  if (index > -1) {
+    queryParams.value.femaleEarNumbers.splice(index, 1)
+  }
+}
 /** 根据品种ID获取品种名称 */
 function getVarietyName(varietyId) {
  if (!varietyId) return '-'
@@ -535,6 +791,7 @@ function reset() {
    parity: null,
    maleEarNumber: null,
    breedingDate: null,
+    allEarNumbers: [],  // ✅ 添加这一行！
    pregnancyDays: null,
    lambsBorn: null,
    survival: null,
@@ -550,13 +807,17 @@ function reset() {
 }

 /** 搜索按钮操作 */
+/** 搜索按钮操作 - 修改 */
 function handleQuery() {
  queryParams.value.pageNum = 1
  getList()
 }

-/** 重置按钮操作 */
+/** 重置按钮操作 - 修改 */
 function resetQuery() {
+  queryParams.value.allEarNumbers = []  // ✅ 添加这一行
+  earNumberOptions.value = []            // ✅ 添加这一行
+  isExpanded.value = false
  proxy.resetForm("queryRef")
  handleQuery()
 }
@@ -702,29 +963,44 @@ onMounted(() => {
 </script>

 <style scoped>
-.lamb-form-item {
-  margin-bottom: 20px;
-  padding: 15px;
-  border: 1px solid #e4e7ed;
+/* 已选耳号展示区样式 */
+.selected-ear-numbers-display {
+  max-height: 150px;
+  overflow-y: auto;
+  padding: 8px;
+  background-color: #f5f7fa;
  border-radius: 4px;
-  background-color: #fafafa;
+  border: 1px dashed #dcdfe6;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
 }

-.lamb-form-header {
-  margin-bottom: 15px;
+.selected-ear-numbers-display::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
 }

-.lamb-title {
-  font-weight: bold;
-  color: #409eff;
-  font-size: 14px;
+.selected-ear-numbers-display::-webkit-scrollbar-thumb {
+  background-color: #dcdfe6;
+  border-radius: 3px;
 }

-.lamb-form-content {
-  margin-bottom: 10px;
+.selected-ear-numbers-display::-webkit-scrollbar-track {
+  background-color: #f5f7fa;
 }

-.lamb-form-content:last-child {
-  margin-bottom: 0;
+.selected-ear-numbers-display .el-tag {
+  margin: 4px;
+  cursor: pointer;
+}
+
+.selected-ear-numbers-display .el-tag:hover {
+  opacity: 0.8;
+}
+
+/* 隐藏 el-select 的下拉箭头（可选） */
+:deep(.el-select__caret) {
+  display: none;
 }
 </style>