多耳号查询与模糊查询

src/views/dairyProducts/sheepMilkAnalysis/index.vue

@@ -1,9 +1,38 @@
 <template>
   <div class="app-container">
-    <el-form :inline="true" :model="queryParams" class="filter-form">
-      <el-form-item label="耳号">
-        <el-input v-model="queryParams.manageEarTag" placeholder="请输入耳号" clearable />
+    <el-form :inline="true" :model="queryParams" ref="queryRef" class="filter-form">
+      <el-form-item label="耳号" prop="allEarNumbers">
+        <el-select
+            v-model="queryParams.allEarNumbers"
+            multiple
+            filterable
+            remote
+            reserve-keyword
+            placeholder="输入耳号搜索"
+            :remote-method="searchEarNumber"
+            :loading="earNumberLoading"
+            allow-create
+            default-first-option
+            style="width: 300px"
+            @change="handleEarNumberChange"
+        >
+          <el-option
+              v-for="item in earNumberOptions"
+              :key="item"
+              :label="item"
+              :value="item"
+          />
+        </el-select>
+        <el-button
+            type="text"
+            @click="clearEarNumbers"
+            v-if="queryParams.allEarNumbers && queryParams.allEarNumbers.length > 0"
+            style="margin-left: 10px"
+        >
+          清空
+        </el-button>
       </el-form-item>
+
       <el-form-item label="筛选天数">
         <el-input-number v-model="queryParams.screenDays" :min="1" placeholder="请输入天数" />
       </el-form-item>
@@ -13,6 +42,19 @@
       </el-form-item>
     </el-form>
 
+    <div v-if="queryParams.allEarNumbers && queryParams.allEarNumbers.length > 0" class="selected-ear-numbers">
+      <span style="margin-right: 10px; color: #606266;">已选择耳号：</span>
+      <el-tag
+          v-for="earNumber in queryParams.allEarNumbers"
+          :key="earNumber"
+          closable
+          @close="removeEarNumber(earNumber)"
+          style="margin-right: 8px;"
+      >
+        {{ earNumber }}
+      </el-tag>
+    </div>
+
     <div class="button-group">
       <el-popover placement="bottom" width="400" trigger="click">
         <el-checkbox-group v-model="selectedFields" class="checkbox-columns">
@@ -51,7 +93,8 @@
 </template>
 
 <script>
-import { listSheepMilkAnalysis } from "@/api/dairyProducts/sheepMilkAnalysis/sheepMilkAnalysis.js";
+// 修改处：导入 searchEarNumbers
+import { listSheepMilkAnalysis, searchEarNumbers } from "@/api/dairyProducts/sheepMilkAnalysis/sheepMilkAnalysis.js";
 import { format } from 'date-fns';
 import * as XLSX from 'xlsx'; // 导入xlsx库
 
@@ -62,14 +105,17 @@ export default {
       loading: false,
       total: 0,
       list: [],
+      // 修改处：新增耳号搜索相关状态
+      earNumberOptions: [],
+      earNumberLoading: false,
+
       queryParams: {
         pageNum: 1,
-        pageSize: 20, // 修改默认每页条数
-        manageEarTag: null,
-        screenDays: 100 // 默认筛选天数
+        pageSize: 20, 
+        allEarNumbers: [], // 修改：改为数组
+        screenDays: 100 
       },
       selectedFields: [],
-      // 修改：为数字字段添加 sortable: true
       allColumns: [
         { label: "耳号", prop: "manageEarTag" },
         { label: "品种", prop: "variety" },
@@ -122,6 +168,41 @@ export default {
     }
   },
   methods: {
+    // 修改处：新增耳号搜索与处理方法
+    /** 远程搜索耳号 */
+    searchEarNumber(query) {
+      if (query !== '') {
+        this.earNumberLoading = true
+        searchEarNumbers(query).then(response => {
+          this.earNumberOptions = response.data || []
+          this.earNumberLoading = false
+        }).catch(() => {
+          this.earNumberOptions = []
+          this.earNumberLoading = false
+        })
+      } else {
+        this.earNumberOptions = []
+      }
+    },
+    
+    /** 耳号变更处理 */
+    handleEarNumberChange(value) {
+      // 可选：添加日志或额外逻辑
+    },
+    
+    /** 清空所有耳号 */
+    clearEarNumbers() {
+      this.queryParams.allEarNumbers = []
+    },
+    
+    /** 移除单个耳号 */
+    removeEarNumber(earNumber) {
+      const index = this.queryParams.allEarNumbers.indexOf(earNumber)
+      if (index > -1) {
+        this.queryParams.allEarNumbers.splice(index, 1)
+      }
+    },
+
     getList() {
       this.loading = true;
       listSheepMilkAnalysis(this.queryParams).then(response => {
@@ -139,9 +220,10 @@ export default {
       this.queryParams = {
         pageNum: 1,
         pageSize: 20,
-        manageEarTag: null,
+        allEarNumbers: [], // 修改：重置为空数组
         screenDays: 100
       };
+      this.earNumberOptions = []; // 修改：清空选项
       this.selectedFields = this.allColumns.map(c => c.prop);
       this.getList();
     },
@@ -199,4 +281,11 @@ export default {
   max-height: 300px;
   overflow-y: auto;
 }
+/* 修改处：新增样式 */
+.selected-ear-numbers {
+  margin-bottom: 16px;
+  padding: 10px;
+  background-color: #f5f7fa;
+  border-radius: 4px;
+}
 </style>