Merge branch 'main' of http://e19510c831.iok.la/admin/zhyc-sheep-ui

src/api/fileManagement/sheep_grouping.js

@@ -61,3 +61,12 @@ export function addByEarTags(data) {
     data
   })
 }
+
+
+
+// 树形分组
+export const listGroupTree = () =>
+  request({
+    url: '/sheep_grouping/sheep_grouping/group/tree',
+    method: 'get'
+  })

src/api/fileManagement/sheepfold_management.js

@@ -55,3 +55,11 @@ export function checkSheepfoldNoExist(ranchId, sheepfoldTypeId, sheepfoldNo) {
     }
   })
 }
+
+// 获取树形座位图（牧场 → 类型 → 羊舍 → 排栏）
+export function getSeatMap() {
+  return request({
+    url: '/sheepfold_management/sheepfold_management/seatMap',
+    method: 'get'
+  })
+}

src/views/fileManagement/group_management/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
+    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px" @submit.prevent>
       <el-form-item label="分组名称" prop="groupName">
         <el-input
           v-model="queryParams.groupName"
@@ -20,7 +20,7 @@
         </el-radio-group>
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+        <el-button type="primary" icon="Search" @click="handleQuery" native-type="button"> 搜索</el-button>
         <el-button icon="Refresh" @click="resetQuery">重置</el-button>
       </el-form-item>
     </el-form>
@@ -256,38 +256,71 @@ async function handleUpdate(row) {
   })
 }
 
+/** 提交按钮 */
+// function submitForm() {
+//   proxy.$refs["group_managementRef"].validate(valid => {
+//     if (valid) {
+//       // 新增：计算祖先路径
+//       if (form.value.parentId === 0) {
+//         form.value.ancestors = "0"
+//       } else {
+//         const parentNode = findNode(group_managementOptions.value, form.value.parentId)
+//         if (parentNode) {
+//           form.value.ancestors = `${parentNode.ancestors},${parentNode.groupId}`
+//         } else {
+//           // 找不到父节点时使用默认值
+//           form.value.ancestors = "0"
+//         }
+//       }
+
+//       if (form.value.groupId != null) {
+//         updateGroup_management(form.value).then(response => {
+//           proxy.$modal.msgSuccess("修改成功")
+//           open.value = false
+//           getList()
+//         })
+//       } else {
+//         addGroup_management(form.value).then(response => {
+//           proxy.$modal.msgSuccess("新增成功")
+//           open.value = false
+//           getList()
+//         })
+//       }
+//     }
+//   })
+// }
+
 /** 提交按钮 */
 function submitForm() {
   proxy.$refs["group_managementRef"].validate(valid => {
-    if (valid) {
-      // 新增：计算祖先路径
-      if (form.value.parentId === 0) {
-        form.value.ancestors = "0"
-      } else {
-        const parentNode = findNode(group_managementOptions.value, form.value.parentId)
-        if (parentNode) {
-          form.value.ancestors = `${parentNode.ancestors},${parentNode.groupId}`
-        } else {
-          // 找不到父节点时使用默认值
-          form.value.ancestors = "0"
-        }
-      }
+    if (!valid) return;
 
-      if (form.value.groupId != null) {
-        updateGroup_management(form.value).then(response => {
-          proxy.$modal.msgSuccess("修改成功")
-          open.value = false
-          getList()
-        })
-      } else {
-        addGroup_management(form.value).then(response => {
-          proxy.$modal.msgSuccess("新增成功")
-          open.value = false
-          getList()
-        })
-      }
+    // 计算祖先路径
+    if (form.value.parentId === 0) {
+      form.value.ancestors = "0";
+    } else {
+      const parentNode = findNode(group_managementOptions.value, form.value.parentId);
+      form.value.ancestors = parentNode
+        ? `${parentNode.ancestors},${parentNode.groupId}`
+        : "0";
     }
-  })
+
+    const request = form.value.groupId != null
+      ? updateGroup_management(form.value)
+      : addGroup_management(form.value);
+
+    request
+      .then(() => {
+        proxy.$modal.msgSuccess(form.value.groupId ? "修改成功" : "新增成功");
+        open.value = false;
+        getList();
+      })
+      .catch(error => {
+        // ✅ 后端返回的错误信息
+        const msg = error?.response?.data?.msg || "操作失败";
+        proxy.$modal.msgError(msg);
+      });
+  });
 }
 
 /** 删除按钮操作 */

src/views/fileManagement/sheep_file/index.vue

@@ -1,18 +1,18 @@
 <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="id">
+      <!-- <el-form-item label="羊只id" prop="id">
         <el-input
           v-model="queryParams.id"
           placeholder="请输入羊只id"
           clearable
           @keyup.enter="handleQuery"
         />
-      </el-form-item>
-      <el-form-item label="管理耳号" prop="bsManageTags">
+      </el-form-item> -->
+      <el-form-item label="耳号" prop="bsManageTags">
         <el-input
           v-model="queryParams.bsManageTags"
-          placeholder="请输入管理耳号"
+          placeholder="请输入耳号"
           clearable
           @keyup.enter="handleQuery"
         />
@@ -66,7 +66,7 @@
       border
     >
       <el-table-column type="selection" width="55" align="center" />
-      <el-table-column
+      <!-- <el-table-column
         v-if="columns['id'].visible"
         label="羊只id"
         align="center"
@@ -78,10 +78,10 @@
         <template #header>
           <span style="font-weight: bold; color: #333;">羊只id</span>
         </template>
-      </el-table-column>
+      </el-table-column> -->
       <el-table-column
         v-if="columns['bsManageTags'].visible"
-        label="管理耳号"
+        label="耳号"
         align="center"
         prop="bsManageTags"
         width="120"
@@ -89,10 +89,10 @@
         sortable
       >
         <template #header>
-          <span style="font-weight: bold; color: #333;">管理耳号</span>
+          <span style="font-weight: bold; color: #333;">耳号</span>
         </template>
       </el-table-column>
-      <el-table-column
+      <!-- <el-table-column
         v-if="columns['ranchId'].visible"
         label="牧场id"
         align="center"
@@ -103,7 +103,7 @@
         <template #header>
           <span style="font-weight: bold; color: #333;">牧场id</span>
         </template>
-      </el-table-column>
+      </el-table-column> -->
       <el-table-column
         v-if="columns['drRanch'].visible"
         label="牧场名称"
@@ -116,7 +116,7 @@
           <span style="font-weight: bold; color: #333;">牧场名称</span>
         </template>
       </el-table-column>
-      <el-table-column
+      <!-- <el-table-column
         v-if="columns['sheepfoldId'].visible"
         label="羊舍id"
         align="center"
@@ -127,7 +127,7 @@
         <template #header>
           <span style="font-weight: bold; color: #333;">羊舍id</span>
         </template>
-      </el-table-column>
+      </el-table-column> -->
       <el-table-column
         v-if="columns['sheepfoldName'].visible"
         label="羊舍名称"
@@ -166,7 +166,7 @@
           </el-tooltip>
         </template>
       </el-table-column>
-      <el-table-column
+      <!-- <el-table-column
         v-if="columns['varietyId'].visible"
         label="品种id"
         align="center"
@@ -177,7 +177,7 @@
         <template #header>
           <span style="font-weight: bold; color: #333;">品种id</span>
         </template>
-      </el-table-column>
+      </el-table-column> -->
       <el-table-column
         v-if="columns['variety'].visible"
         label="品种"
@@ -346,7 +346,7 @@
           <span style="font-weight: bold; color: #333;">当前体重</span>
         </template>
       </el-table-column>
-      <el-table-column
+      <!-- <el-table-column
         v-if="columns['breedStatusId'].visible"
         label="繁育状态id"
         align="center"
@@ -357,7 +357,7 @@
         <template #header>
           <span style="font-weight: bold; color: #333;">繁育状态id</span>
         </template>
-      </el-table-column>
+      </el-table-column> -->
       <el-table-column
         v-if="columns['breed'].visible"
         label="繁殖状态"
@@ -370,7 +370,7 @@
           <span style="font-weight: bold; color: #333;">繁殖状态</span>
         </template>
       </el-table-column>
-      <el-table-column
+      <!-- <el-table-column
         v-if="columns['bsFatherId'].visible"
         label="父号id"
         align="center"
@@ -381,20 +381,20 @@
         <template #header>
           <span style="font-weight: bold; color: #333;">父号id</span>
         </template>
-      </el-table-column>
+      </el-table-column> -->
       <el-table-column
         v-if="columns['fatherManageTags'].visible"
-        label="父亲管理耳号"
+        label="父亲耳号"
         align="center"
         prop="fatherManageTags"
         width="120"
         sortable
       >
         <template #header>
-          <span style="font-weight: bold; color: #333;">父亲管理耳号</span>
+          <span style="font-weight: bold; color: #333;">父亲耳号</span>
         </template>
       </el-table-column>
-      <el-table-column
+      <!-- <el-table-column
         v-if="columns['bsMotherId'].visible"
         label="母号id"
         align="center"
@@ -405,20 +405,20 @@
         <template #header>
           <span style="font-weight: bold; color: #333;">母号id</span>
         </template>
-      </el-table-column>
+      </el-table-column> -->
       <el-table-column
         v-if="columns['motherManageTags'].visible"
-        label="母亲管理耳号"
+        label="母亲耳号"
         align="center"
         prop="motherManageTags"
         width="120"
         sortable
       >
         <template #header>
-          <span style="font-weight: bold; color: #333;">母亲管理耳号</span>
+          <span style="font-weight: bold; color: #333;">母亲耳号</span>
         </template>
       </el-table-column>
-      <el-table-column
+      <!-- <el-table-column
         v-if="columns['receptorId'].visible"
         label="受体id"
         align="center"
@@ -429,20 +429,20 @@
         <template #header>
           <span style="font-weight: bold; color: #333;">受体id</span>
         </template>
-      </el-table-column>
+      </el-table-column> -->
       <el-table-column
         v-if="columns['receptorManageTags'].visible"
-        label="受体管理耳号"
+        label="受体耳号"
         align="center"
         prop="receptorManageTags"
         width="120"
         sortable
       >
         <template #header>
-          <span style="font-weight: bold; color: #333;">受体管理耳号</span>
+          <span style="font-weight: bold; color: #333;">受体耳号</span>
         </template>
       </el-table-column>
-      <el-table-column
+      <!-- <el-table-column
         v-if="columns['fatherFatherId'].visible"
         label="祖父号id"
         align="center"
@@ -453,20 +453,20 @@
         <template #header>
           <span style="font-weight: bold; color: #333;">祖父号id</span>
         </template>
-      </el-table-column>
+      </el-table-column> -->
       <el-table-column
         v-if="columns['grandfatherManageTags'].visible"
-        label="祖父管理耳号"
+        label="祖父耳号"
         align="center"
         prop="grandfatherManageTags"
         width="120"
         sortable
       >
         <template #header>
-          <span style="font-weight: bold; color: #333;">祖父管理耳号</span>
+          <span style="font-weight: bold; color: #333;">祖父耳号</span>
         </template>
       </el-table-column>
-      <el-table-column
+      <!-- <el-table-column
         v-if="columns['fatherMotherId'].visible"
         label="祖母号id"
         align="center"
@@ -477,20 +477,20 @@
         <template #header>
           <span style="font-weight: bold; color: #333;">祖母号id</span>
         </template>
-      </el-table-column>
+      </el-table-column> -->
       <el-table-column
         v-if="columns['grandmotherManageTags'].visible"
-        label="祖母管理耳号"
+        label="祖母耳号"
         align="center"
         prop="grandmotherManageTags"
         width="120"
         sortable
       >
         <template #header>
-          <span style="font-weight: bold; color: #333;">祖母管理耳号</span>
+          <span style="font-weight: bold; color: #333;">祖母耳号</span>
         </template>
       </el-table-column>
-      <el-table-column
+      <!-- <el-table-column
         v-if="columns['fatherId'].visible"
         label="外祖父号id"
         align="center"
@@ -501,20 +501,20 @@
         <template #header>
           <span style="font-weight: bold; color: #333;">外祖父号id</span>
         </template>
-      </el-table-column>
+      </el-table-column> -->
       <el-table-column
         v-if="columns['maternalGrandfatherManageTags'].visible"
-        label="外祖父管理耳号"
+        label="外祖父耳号"
         align="center"
         prop="maternalGrandfatherManageTags"
         width="120"
         sortable
       >
         <template #header>
-          <span style="font-weight: bold; color: #333;">外祖父管理耳号</span>
+          <span style="font-weight: bold; color: #333;">外祖父耳号</span>
         </template>
       </el-table-column>
-      <el-table-column
+      <!-- <el-table-column
         v-if="columns['motherId'].visible"
         label="外祖母号id"
         align="center"
@@ -525,17 +525,17 @@
         <template #header>
           <span style="font-weight: bold; color: #333;">外祖母号id</span>
         </template>
-      </el-table-column>
+      </el-table-column> -->
       <el-table-column
         v-if="columns['maternalGrandmotherManageTags'].visible"
-        label="外祖母管理耳号"
+        label="外祖母耳号"
         align="center"
         prop="maternalGrandmotherManageTags"
         width="120"
         sortable
       >
         <template #header>
-          <span style="font-weight: bold; color: #333;">外祖母管理耳号</span>
+          <span style="font-weight: bold; color: #333;">外祖母耳号</span>
         </template>
       </el-table-column>
       <el-table-column
@@ -809,7 +809,7 @@
           <span>{{ parseTime(scope.row.sourceDate, '{y}-{m}-{d}') }}</span>
         </template>
       </el-table-column>
-      <el-table-column
+      <!-- <el-table-column
         v-if="columns['sourceRanchId'].visible"
         label="来源牧场id"
         align="center"
@@ -820,7 +820,7 @@
         <template #header>
           <span style="font-weight: bold; color: #333;">来源牧场id</span>
         </template>
-      </el-table-column>
+      </el-table-column> -->
       <el-table-column
         v-if="columns['sourceRanch'].visible"
         label="来源牧场"
@@ -915,14 +915,14 @@
     <el-dialog v-model="columnDialogVisible" title="显示列设置" width="800px">
       <div style="max-height: 400px; overflow-y: auto; ">
         <el-checkbox-group v-model="selectedColumns" style="grid; grid-template-columns: repeat(3, 1fr); gap: 10px;" >
-          <el-checkbox label="id">羊只id</el-checkbox>
-          <el-checkbox label="bsManageTags">管理耳号</el-checkbox>
-          <el-checkbox label="ranchId">牧场id</el-checkbox>
+          <!-- <el-checkbox label="id">羊只id</el-checkbox> -->
+          <el-checkbox label="bsManageTags">耳号</el-checkbox>
+          <!-- <el-checkbox label="ranchId">牧场id</el-checkbox> -->
           <el-checkbox label="drRanch">牧场名称</el-checkbox>
-          <el-checkbox label="sheepfoldId">羊舍id</el-checkbox>
+          <!-- <el-checkbox label="sheepfoldId">羊舍id</el-checkbox> -->
           <el-checkbox label="sheepfoldName">羊舍名称</el-checkbox>
           <el-checkbox label="electronicTags">电子耳号</el-checkbox>
-          <el-checkbox label="varietyId">品种id</el-checkbox>
+          <!-- <el-checkbox label="varietyId">品种id</el-checkbox> -->
           <el-checkbox label="variety">品种</el-checkbox>
           <el-checkbox label="family">家系</el-checkbox>
           <el-checkbox label="name">羊只类型</el-checkbox>
@@ -936,22 +936,22 @@
           <el-checkbox label="statusId">羊只状态</el-checkbox>
           <el-checkbox label="weaningWeight">断奶体重</el-checkbox>
           <el-checkbox label="currentWeight">当前体重</el-checkbox>
-          <el-checkbox label="breedStatusId">繁育状态id</el-checkbox>
+          <!-- <el-checkbox label="breedStatusId">繁育状态id</el-checkbox> -->
           <el-checkbox label="breed">繁殖状态</el-checkbox>
-          <el-checkbox label="bsFatherId">父号id</el-checkbox>
-          <el-checkbox label="fatherManageTags">父亲管理耳号</el-checkbox>
-          <el-checkbox label="bsMotherId">母号id</el-checkbox>
-          <el-checkbox label="motherManageTags">母亲管理耳号</el-checkbox>
-          <el-checkbox label="receptorId">受体id</el-checkbox>
-          <el-checkbox label="receptorManageTags">受体管理耳号</el-checkbox>
-          <el-checkbox label="fatherFatherId">祖父号id</el-checkbox>
-          <el-checkbox label="grandfatherManageTags">祖父管理耳号</el-checkbox>
-          <el-checkbox label="fatherMotherId">祖母号id</el-checkbox>
-          <el-checkbox label="grandmotherManageTags">祖母管理耳号</el-checkbox>
-          <el-checkbox label="fatherId">外祖父号id</el-checkbox>
-          <el-checkbox label="maternalGrandfatherManageTags">外祖父管理耳号</el-checkbox>
-          <el-checkbox label="motherId">外祖母号id</el-checkbox>
-          <el-checkbox label="maternalGrandmotherManageTags">外祖母管理耳号</el-checkbox>
+          <!-- <el-checkbox label="bsFatherId">父号id</el-checkbox> -->
+          <el-checkbox label="fatherManageTags">父亲耳号</el-checkbox>
+          <!-- <el-checkbox label="bsMotherId">母号id</el-checkbox> -->
+          <el-checkbox label="motherManageTags">母亲耳号</el-checkbox>
+          <!-- <el-checkbox label="receptorId">受体id</el-checkbox> -->
+          <el-checkbox label="receptorManageTags">受体耳号</el-checkbox>
+          <!-- <el-checkbox label="fatherFatherId">祖父号id</el-checkbox> -->
+          <el-checkbox label="grandfatherManageTags">祖父耳号</el-checkbox>
+          <!-- <el-checkbox label="fatherMotherId">祖母号id</el-checkbox> -->
+          <el-checkbox label="grandmotherManageTags">祖母耳号</el-checkbox>
+          <!-- <el-checkbox label="fatherId">外祖父号id</el-checkbox> -->
+          <el-checkbox label="maternalGrandfatherManageTags">外祖父耳号</el-checkbox>
+          <!-- <el-checkbox label="motherId">外祖母号id</el-checkbox> -->
+          <el-checkbox label="maternalGrandmotherManageTags">外祖母耳号</el-checkbox>
           <el-checkbox label="matingDate">配种日期</el-checkbox>
           <el-checkbox label="matingTypeId">配种类型</el-checkbox>
           <el-checkbox label="pregDate">孕检日期</el-checkbox>
@@ -972,7 +972,7 @@
           <el-checkbox label="breast">乳房评分</el-checkbox>
           <el-checkbox label="source">入群来源</el-checkbox>
           <el-checkbox label="sourceDate">入群日期</el-checkbox>
-          <el-checkbox label="sourceRanchId">来源牧场id</el-checkbox>
+          <!-- <el-checkbox label="sourceRanchId">来源牧场id</el-checkbox> -->
           <el-checkbox label="sourceRanch">来源牧场</el-checkbox>
           <el-checkbox label="updateBy">修改人</el-checkbox>
           <el-checkbox label="updateTime">修改日期</el-checkbox>

src/views/fileManagement/sheep_grouping/index.vue

@@ -18,7 +18,7 @@
         />
       </el-form-item>
       <el-form-item label="分组" prop="groupId">
-        <el-select
+        <!-- <el-select
           v-model="queryParams.groupId"
           placeholder="请选择分组"
           clearable
@@ -30,8 +30,15 @@
           :label="g.groupName"
           :value="g.groupId"
         />
-  </el-select>
-</el-form-item>
+      </el-select> -->
+      <el-tree-select v-model="queryParams.groupId" :data="groupTree" style="width: 180px;"
+          :props="{ value: 'groupId', label: 'groupName', children: 'children' }"
+          value-key="groupId" placeholder="请选择"
+          check-strictly
+          clearable
+      />
+
+    </el-form-item>
       <el-form-item>
         <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
         <el-button icon="Refresh" @click="resetQuery">重置</el-button>
@@ -134,14 +141,27 @@
           <el-input type="textarea" :rows="4" v-model="form.earTags" :disabled="form.earTagsDisabled" placeholder="请输入耳号，多个耳号用逗号或换行分隔"/>
         </el-form-item>
         <el-form-item label="分组" prop="groupId">
-          <el-select v-model="form.groupId" placeholder="请选择分组" clearable>
+          <!-- <el-select v-model="form.groupId" placeholder="请选择分组" clearable>
             <el-option
               v-for="g in leafGroupOptions"
               :key="g.groupId"
               :label="g.groupName"
               :value="g.groupId"
             />
-          </el-select>
+          </el-select> -->
+        
+        <el-tree-select
+          v-model="form.groupId"
+          :data="groupTree"
+          style="width: 180px"
+          :props="{ value: 'groupId', label: 'groupName', children: 'children' }"
+          value-key="groupId"
+          placeholder="请选择分组"
+          clearable
+          check-strictly
+          :select-leaf-only="true"
+        />
+
         </el-form-item>
       </el-form>
       <template #footer>
@@ -159,6 +179,7 @@ import { listSheep_grouping, getSheep_grouping, delSheep_grouping, addSheep_grou
 import {listLeafGroup} from "@/api/fileManagement/group_management"
 import {listSheep_grouping_join} from "@/api/fileManagement/sheep_grouping"
 import { addByEarTags } from '@/api/fileManagement/sheep_grouping'
+import { listGroupTree } from '@/api/fileManagement/sheep_grouping'
 
 const { proxy } = getCurrentInstance()
 
@@ -173,6 +194,8 @@ const total = ref(0)
 const title = ref("")
 const leafGroupOptions = ref([])
 const { sheep_gender } = proxy.useDict('sheep_gender')
+// data 里声明
+const groupTree = ref([])
 
 const data = reactive({
   form: {
@@ -390,17 +413,33 @@ loadLeafGroups()
 getList()
 
 
+// // 调用示例
+// function loadLeafGroups() {
+//   listLeafGroup().then(res => {
+//     leafGroupOptions.value = res.data
+//   })
+// }
+
 // 调用示例
 function loadLeafGroups() {
-  listLeafGroup().then(res => {
-    leafGroupOptions.value = res.data
+  listGroupTree().then(res => {
+    groupTree.value = res.data
+    console.log(groupTree.value)
   })
 }
 
+
 // 根据 groupId 获取分组名称
+// function getGroupName(id) {
+//   const group = leafGroupOptions.value.find(g => g.groupId === id)
+//   return group ? group.groupName : ''
+// }
+
 function getGroupName(id) {
-  const group = leafGroupOptions.value.find(g => g.groupId === id)
-  return group ? group.groupName : ''
+  const flatten = (arr) =>
+    arr.reduce((acc, cur) => acc.concat(cur, flatten(cur.children || [])), [])
+  const node = flatten(groupTree.value).find(n => n.groupId === id)
+  return node ? node.groupName : ''
 }
 
 </script>

src/views/fileManagement/sheepfold_management/index.vue

@@ -103,6 +103,86 @@
       @pagination="getList"
     />
 
+
+<!-- ===== 图形化展示区域 ===== -->
+    <el-divider>牧场羊舍示意图</el-divider>
+    <el-collapse
+      v-model="activeNames"
+      accordion
+      style="margin-top: 16px; max-width: 100%; overflow-x: auto"
+    >
+      <!-- 一级：牧场 -->
+      <el-collapse-item
+        v-for="ranch in seatMapTree"
+        :key="ranch.ranchId"
+        :title="ranch.ranchName"
+        :name="ranch.ranchId"
+      >
+        <!-- 二级：羊舍类型 -->
+        <el-collapse accordion>
+          <el-collapse-item
+            v-for="type in ranch.types"
+            :key="type.typeId"
+            :title="`${type.typeName} (${type.folds.length}个)`"
+          >
+            <!-- 三级：羊舍卡片 -->
+            <el-row :gutter="16">
+              <el-col
+                v-for="fold in type.folds"
+                :key="fold.foldNo"
+                :xs="24"
+                :sm="12"
+                :md="8"
+                :lg="6"
+                :xl="4"
+                style="margin-bottom: 16px"
+              >
+                <el-card shadow="hover">
+                  <template #header>
+                    <span>{{ fold.foldNo }}号{{type.typeName}}</span>
+                  </template>
+                  <!-- 四级：排 -->
+                  <div
+                    v-for="row in fold.rows"
+                    :key="row.rowNo"
+                    class="seat-block"
+                  >
+                    <div class="row-label">{{ row.rowNo }}排</div>
+                    <div class="seat-row">
+                      <!-- 五级：栏位 -->
+                      <div
+                        v-for="col in row.columns"
+                        :key="col"
+                        class="seat"
+                        :class="{ occupied: isOccupied(fold.foldNo, row.rowNo, col) }"
+                        @click="toggleSeat(fold.foldNo, row.rowNo, col)"
+                      >
+                        {{ col }}
+                      </div>
+                    </div>
+                  </div>
+                </el-card>
+              </el-col>
+            </el-row>
+          </el-collapse-item>
+        </el-collapse>
+      </el-collapse-item>
+    </el-collapse>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
     <!-- 添加或修改羊舍管理对话框 -->
     <el-dialog :title="title" v-model="open" width="500px" append-to-body>
       <el-form ref="sheepfold_managementRef" :model="form" :rules="rules" label-width="80px">
@@ -190,7 +270,7 @@
 </template>
 
 <script setup name="Sheepfold_management">
-import { listSheepfold_management, getSheepfold_management, delSheepfold_management, addSheepfold_management, updateSheepfold_management,checkSheepfoldNoExist } from "@/api/fileManagement/sheepfold_management"
+import { getSeatMap,listSheepfold_management, getSheepfold_management, delSheepfold_management, addSheepfold_management, updateSheepfold_management,checkSheepfoldNoExist } from "@/api/fileManagement/sheepfold_management"
 
 const { proxy } = getCurrentInstance()
 const { bas_sheepfold_type, da_ranch } = proxy.useDict('bas_sheepfold_type', 'da_ranch')
@@ -206,6 +286,7 @@ const total = ref(0)
 const title = ref("")
 const sheepfoldNoExists = ref(false) // 用于显示羊舍编号是否存在
 
+
 const data = reactive({
     form: {
     id: null,
@@ -295,6 +376,7 @@ function reset() {
 function handleQuery() {
   queryParams.value.pageNum = 1
   getList()
+  loadSeatMap()
 }
 
 /** 重置按钮操作 */
@@ -388,6 +470,7 @@ function submitForm() {
           proxy.$modal.msgSuccess("修改成功")
           open.value = false
           getList()
+          loadSeatMap()
         })
       } else {
         // 新增操作 - 多条记录
@@ -423,6 +506,7 @@ function submitForm() {
             proxy.$modal.msgSuccess(`新增成功，共添加${requests.length}条记录`)
             open.value = false
             getList()
+            loadSeatMap()
           })
           .catch(error => {
             proxy.$modal.msgError("部分记录添加失败：" + error.message)
@@ -439,6 +523,7 @@ function handleDelete(row) {
     return delSheepfold_management(_ids)
   }).then(() => {
     getList()
+    loadSeatMap(); 
     proxy.$modal.msgSuccess("删除成功")
   }).catch(() => {})
 }
@@ -450,7 +535,46 @@ function handleExport() {
   }, `sheepfold_management_${new Date().getTime()}.xlsx`)
 }
 
+/* ===== 图形化展示所需变量和方法 ===== */
+const activeNames = ref([]) // 当前展开的牧场
+const seatMapTree = ref([]) // 树形结构数据
+const loadSeatMap = () => {
+  getSeatMap()
+    .then(res => (seatMapTree.value = res.data))
+    .catch(err => proxy.$modal.msgError('加载座位图失败：' + err.message))
+}
+
+    
+  
+
+
+/* 演示：点击栏位切换颜色 */
+const occupied = ref(new Set())
+const isOccupied = (foldNo, rowNo, col) =>
+  occupied.value.has(`${foldNo}-${rowNo}-${col}`)
+const toggleSeat = (foldNo, rowNo, col) => {
+  const key = `${foldNo}-${rowNo}-${col}`
+  occupied.value.has(key)
+    ? occupied.value.delete(key)
+    : occupied.value.add(key)
+}
+
+/* 页面加载时拉取数据 */
+onMounted(() => {
+  getList()
+  loadSeatMap()
+})
+
+
+
 getList()
+loadSeatMap()
+
+
+
+
+
+
 </script>
 
 
@@ -462,4 +586,34 @@ getList()
   border-radius: 4px;
   background-color: #f5f7fa;
 }
+
+/* ===== 图形化展示样式 ===== */
+.seat-block {
+  margin-bottom: 8px;
+}
+.row-label {
+  font-weight: bold;
+  margin-bottom: 4px;
+}
+.seat-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+.seat {
+  width: 32px;
+  height: 32px;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  cursor: pointer;
+  background: #f2f6fc;
+}
+.seat.occupied {
+  background: #67c23a;
+  color: #fff;
+}
 </style>

vite.config.js

@@ -42,7 +42,7 @@ export default defineConfig(({ mode, command }) => {
     },
     // vite 相关配置
     server: {
-      port: 80,
+      port: 82,
       host: true,
       open: true,
       proxy: {