羊只档案页面跳转系谱页面

src/router/index.js

@@ -1,4 +1,4 @@
-import { createWebHistory, createRouter } from 'vue-router'
+import { createRouter, createWebHistory } from 'vue-router'
 /* Layout */
 import Layout from '@/layout'
 
@@ -83,6 +83,24 @@ export const constantRoutes = [
         meta: { title: '个人中心', icon: 'user' }
       }
     ]
+  },
+  
+  {
+    path: '/fileManagement',
+    component: Layout,
+    hidden: true,                // 若不需要在侧边栏显示「档案管理」菜单，设为 true
+    redirect: 'noRedirect',
+    children: [
+      {
+        path: 'pedigree',        // 最终路径为 /fileManagement/pedigree
+        component: () => import('@/views/fileManagement/pedigree/index.vue'),
+        name: 'Pedigree',
+        meta: { 
+          title: '羊只系谱',
+          activeMenu: '/fileManagement/pedigree'  // 高亮对应的菜单（可选）
+        }
+      }
+    ]
   }
   
 ]
@@ -159,6 +177,28 @@ export const dynamicRoutes = [
       }
     ]
   },
+  {
+    path: '/fileManagement',
+    component: Layout,
+    hidden: false,                // 是否在侧边栏显示，默认 false 显示
+    redirect: 'noRedirect',
+    name: 'FileManagement',
+    meta: { 
+      title: '档案管理', 
+      icon: 'example'            // 你可以换成合适的图标名（如 'tree'）
+    },
+    children: [
+      {
+        path: 'pedigree',        // 最终路径 /fileManagement/pedigree
+        component: () => import('@/views/fileManagement/pedigree/index.vue'),
+        name: 'Pedigree',
+        meta: { 
+          title: '系谱图', 
+          activeMenu: '/fileManagement/pedigree' 
+        }
+      }
+    ]
+  }
 ]
 
 const router = createRouter({

src/views/fileManagement/pedigree/index.vue

@@ -3,20 +3,24 @@
     <!-- 查询+导出区域 -->
     <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="68px">
       <el-form-item label="管理耳号" prop="bsManageTags">
-        <el-select
+<el-select
-          v-model="queryParams.bsManageTags"
+  v-model="queryParams.bsManageTags"
-          placeholder="请选择管理耳号"
+  placeholder="请输入耳号关键词"
-          clearable
+  clearable
-          @change="handleQuery"
+  filterable
-          style="width: 200px"
+  remote
-        >
+  :remote-method="remoteSearchTag"
-          <el-option 
+  :loading="loadingTag"
-            v-for="item in tagOptions" 
+  @change="handleQuery"
-            :key="item.value" 
+  style="width: 220px"
-            :label="item.label" 
+>
-            :value="item.value"
+  <el-option
-          ></el-option>
+    v-for="item in tagOptions"
-        </el-select>
+    :key="item"
+    :label="item"
+    :value="item"
+  />
+</el-select>
       </el-form-item>
       <el-form-item>
         <el-button type="primary" icon="Search" @click="handleQuery">查询</el-button>
@@ -96,10 +100,16 @@
 </template>
 
 <script setup name="Pedigree">
-import { ref, reactive, toRefs, getCurrentInstance } from 'vue'
 import { listPedigree, getPedigree } from "@/api/fileManagement/pedigree"
+import { ref, reactive, toRefs, getCurrentInstance, onMounted, watch } from 'vue'  // 新增 onMounted, watch
+import { useRoute, useRouter } from 'vue-router'                                  // 新增
+import request from '@/utils/request'
 
 const { proxy } = getCurrentInstance()
+const route = useRoute()   // 新增
+const router = useRouter() // 新增（可选，如需在节点点击时同步路由）
+
+const loadingTag = ref(false)   // 远程搜索加载状态
 
 // 管理耳号下拉选项
 const tagOptions = ref([])
@@ -107,6 +117,28 @@ const tagOptions = ref([])
 const pedigreeData = ref({})
 const loading = ref(false)
 
+
+/** 远程模糊搜索耳号 */
+function remoteSearchTag(query) {
+  if (query) {
+    loadingTag.value = true
+    request({
+      url: '/sheep_file/sheep_file/searchEarNumbers',
+      method: 'get',
+      params: { query: query }
+    }).then(res => {
+      loadingTag.value = false
+      tagOptions.value = res.data || []
+    }).catch(() => {
+      loadingTag.value = false
+      tagOptions.value = []
+    })
+  } else {
+    // 输入框清空时，清空下拉选项
+    tagOptions.value = []
+  }
+}
+
 // 查询参数
 const data = reactive({
   queryParams: {
@@ -116,6 +148,23 @@ const data = reactive({
   }
 })
 const { queryParams } = toRefs(data)
+// ========== 新增：路由参数初始化 ==========
+onMounted(() => {
+  const tag = route.query.bsManageTags
+  if (tag) {
+    queryParams.value.bsManageTags = tag
+    getList()  // 自动加载系谱数据
+  }
+})
+
+// 监听路由参数变化（当从列表页再次跳转时触发）
+watch(() => route.query.bsManageTags, (newTag) => {
+  if (newTag) {
+    queryParams.value.bsManageTags = newTag
+    getList()
+  }
+})
+// =======================================
 
 /** 性别转换：数字转文字 */
 function getGenderText(gender) {
@@ -128,14 +177,14 @@ function getGenderText(gender) {
 }
 
 /** 初始化耳号下拉 */
-function initTagOptions() {
+// function initTagOptions() {
-  listPedigree({ pageSize: 9999 }).then(response => {
+//   listPedigree({ pageSize: 9999 }).then(response => {
-    tagOptions.value = response.rows.map(item => ({
+//     tagOptions.value = response.rows.map(item => ({
-      label: item.bsManageTags,
+//       label: item.bsManageTags,
-      value: item.bsManageTags
+//       value: item.bsManageTags
-    }))
+//     }))
-  })
+//   })
-}
+// }
 
 /** 根据耳号查询单只羊数据 */
 async function getSheepByTag(tag) {
@@ -231,6 +280,7 @@ function resetQuery() {
   proxy.resetForm("queryRef")
   queryParams.value.bsManageTags = null
   pedigreeData.value = {}
+  tagOptions.value = []   // 👈 新增：重置时清空搜索选项
 }
 function handleExport() {
   if (!queryParams.value.bsManageTags) {
@@ -243,7 +293,7 @@ function handleExport() {
 }
 
 // 初始化
-initTagOptions()
+// initTagOptions()
 </script>
 
 <style scoped>

src/views/fileManagement/sheep_file/index.vue

@@ -222,6 +222,15 @@
         <template #header>
           <span style="font-weight: bold; color: #333;">耳号</span>
         </template>
+          <template #default="scope">
+        <el-link 
+          type="primary" 
+          :underline="false" 
+          @click="goToPedigree(scope.row.bsManageTags)"
+        >
+          {{ scope.row.bsManageTags }}
+        </el-link>
+        </template>
       </el-table-column>
       <el-table-column
         v-if="columns['electronicTags'].visible"
@@ -905,6 +914,8 @@ import { listSheep_file, getSheep_file, delSheep_file, getFieldValues } from "@/
 import request from '@/utils/request'
 // 新增：引入自定义筛选组件
 import CustomFilter from '@/components/CustomFilter/index.vue'
+import { useRouter } from 'vue-router'  // 新增
+const router = useRouter()              // 新增
 
 // 新增：响应式数据
 const customFilterRef = ref()
@@ -1497,6 +1508,16 @@ const availableFields = [
   { label: '创建日期', value: 'create_time'},
 ]
 
+// 新增：跳转到系谱页面
+function goToPedigree(tag) {
+  if (tag) {
+    router.push({
+      name: 'Pedigree',               // 必须与系谱页面的 name 一致
+      query: { bsManageTags: tag }
+    })
+  }
+}
+
 
 getList()
 </script>