From 0026f2400213a810c65bd7d20a1f0a2c62a75423 Mon Sep 17 00:00:00 2001
From: huang <1724659546@qq.com>
Date: Thu, 23 Oct 2025 13:21:27 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AEbug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/PigHouseList.vue         | 16 ++---
 src/views/pms/PigFarmManagementView.vue | 90 ++++++++++++++-----------
 2 files changed, 58 insertions(+), 48 deletions(-)

diff --git a/src/components/PigHouseList.vue b/src/components/PigHouseList.vue
index ca23ac7d..72bc6b3b 100644
--- a/src/components/PigHouseList.vue
+++ b/src/components/PigHouseList.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="pig-house-list">
     <div v-for="house in enrichedPigHouses" :key="house.id" class="pig-house-item">
-      <div class="house-header" @click="toggleExpand(house)">
+      <div class="house-header" @click="emitToggleExpand(house.id)">
         <div class="house-info">
           <span>猪舍: {{ house.name }}</span>
           <span v-if="house.description">描述: {{ house.description }}</span>
@@ -44,14 +44,14 @@ export default {
       required: true
     }
   },
-  emits: ['edit-house', 'delete-house', 'add-pen', 'edit-pen', 'delete-pen'],
+  emits: ['edit-house', 'delete-house', 'add-pen', 'edit-pen', 'delete-pen', 'toggle-house-expand'],
   computed: {
     enrichedPigHouses() {
       return this.pigHouses.map(house => {
         const pensWithHouseInfo = house.pens ? house.pens.map(pen => ({
           ...pen,
-          house_name: house.name, // Add house name to pen object
-          house_id: house.id // Add house id to pen object
+          house_name: house.name,
+          house_id: house.id
         })) : [];
         return {
           ...house,
@@ -61,8 +61,8 @@ export default {
     }
   },
   methods: {
-    toggleExpand(house) {
-      this.$set(house, 'isExpanded', !house.isExpanded);
+    emitToggleExpand(houseId) {
+      this.$emit('toggle-house-expand', houseId);
     },
     // 猪舍操作
     emitAddPen(house) {
@@ -82,7 +82,7 @@ export default {
       this.$emit('delete-pen', pen);
     }
   }
-};
+}
 </script>
 
 <style scoped>
@@ -94,7 +94,7 @@ export default {
   border: 1px solid #eee;
   border-radius: 4px;
   margin-bottom: 16px;
-  overflow: hidden; /* 防止子元素溢出圆角 */
+  overflow: hidden;
 }
 
 .house-header {
diff --git a/src/views/pms/PigFarmManagementView.vue b/src/views/pms/PigFarmManagementView.vue
index 6bf5d9be..e7db945b 100644
--- a/src/views/pms/PigFarmManagementView.vue
+++ b/src/views/pms/PigFarmManagementView.vue
@@ -6,7 +6,9 @@
           <div class="title-container">
             <h2 class="page-title">栏舍管理</h2>
             <el-button type="text" @click="loadData" class="refresh-btn" title="刷新列表">
-              <el-icon :size="20"><Refresh /></el-icon>
+              <el-icon :size="20">
+                <Refresh/>
+              </el-icon>
             </el-button>
           </div>
           <el-button type="primary" @click="handleAddHouse">添加猪舍</el-button>
@@ -15,66 +17,67 @@
 
       <!-- 加载状态 -->
       <div v-if="loading" class="loading">
-        <el-skeleton animated />
+        <el-skeleton animated/>
       </div>
 
       <!-- 错误状态 -->
       <div v-else-if="error" class="error">
         <el-alert
-          title="获取栏舍数据失败"
-          :description="error"
-          type="error"
-          show-icon
-          closable
-          @close="error = null"
+            title="获取栏舍数据失败"
+            :description="error"
+            type="error"
+            show-icon
+            closable
+            @close="error = null"
         />
         <el-button type="primary" @click="loadData" class="retry-btn">重新加载</el-button>
       </div>
 
       <!-- 数据展示或空状态 -->
       <div v-else>
-        <PigHouseList 
-          v-if="pigHousesData.length > 0" 
-          :pigHouses="pigHousesData" 
-          @edit-house="handleEditHouse" 
-          @delete-house="handleDeleteHouse" 
-          @add-pen="handleAddPen"
-          @edit-pen="handleEditPen"
-          @delete-pen="handleDeletePen"
+        <PigHouseList
+            v-if="pigHousesData.length > 0"
+            :pigHouses="pigHousesData"
+            @edit-house="handleEditHouse"
+            @delete-house="handleDeleteHouse"
+            @add-pen="handleAddPen"
+            @edit-pen="handleEditPen"
+            @delete-pen="handleDeletePen"
+            @toggle-house-expand="handleToggleHouseExpand"
         />
-        <el-empty v-else description="暂无数据" />
+        <el-empty v-else description="暂无数据"/>
       </div>
 
     </el-card>
 
     <!-- 猪舍表单对话框 -->
     <PigHouseForm
-      v-model:visible="houseDialogVisible"
-      :house-data="currentHouse"
-      :is-edit="isEditHouse"
-      @success="handleHouseSuccess"
-      @cancel="houseDialogVisible = false"
+        v-model:visible="houseDialogVisible"
+        :house-data="currentHouse"
+        :is-edit="isEditHouse"
+        @success="handleHouseSuccess"
+        @cancel="houseDialogVisible = false"
     />
 
     <!-- 猪栏表单对话框 -->
-    <PenForm 
-      v-model:visible="penDialogVisible"
-      :pen-data="currentPen"
-      :is-edit="isEditPen"
-      @success="handlePenSuccess"
-      @cancel="penDialogVisible = false"
+    <PenForm
+        v-model:visible="penDialogVisible"
+        :pen-data="currentPen"
+        :is-edit="isEditPen"
+        @success="handlePenSuccess"
+        @cancel="penDialogVisible = false"
     />
   </div>
 </template>
 
 <script>
-import { getPigHouses, deletePigHouse } from '@/api/pigHouse.js';
-import { getPens, deletePen } from '@/api/pen.js';
-import { getPigBatches } from '@/api/pigBatch.js';
+import {getPigHouses, deletePigHouse} from '@/api/pigHouse.js';
+import {getPens, deletePen} from '@/api/pen.js';
+import {getPigBatches} from '@/api/pigBatch.js';
 import PigHouseList from '@/components/PigHouseList.vue';
 import PigHouseForm from '@/components/PigHouseForm.vue';
 import PenForm from '@/components/PenForm.vue';
-import { Refresh } from '@element-plus/icons-vue';
+import {Refresh} from '@element-plus/icons-vue';
 
 export default {
   name: 'PigFarmManagementView',
@@ -114,7 +117,7 @@ export default {
           getPens(),
           getPigBatches()
         ]);
-        
+
         const houses = Array.isArray(pigHousesResponse.data) ? pigHousesResponse.data : [];
         const pens = Array.isArray(pensResponse.data) ? pensResponse.data : [];
         const batches = Array.isArray(batchesResponse.data) ? batchesResponse.data : [];
@@ -136,9 +139,9 @@ export default {
       houses.forEach(house => {
         // 确保保留 isExpanded 状态
         const existingHouse = this.pigHousesData.find(h => h.id === house.id);
-        houseMap.set(house.id, { ...house, pens: [], isExpanded: existingHouse ? existingHouse.isExpanded : false });
+        houseMap.set(house.id, {...house, pens: [], isExpanded: existingHouse ? existingHouse.isExpanded : false});
       });
-      
+
       for (const pen of pens) {
         if (houseMap.has(pen.house_id)) {
           const penWithBatch = {
@@ -157,7 +160,7 @@ export default {
       this.houseDialogVisible = true;
     },
     handleEditHouse(house) {
-      this.currentHouse = { ...house };
+      this.currentHouse = {...house};
       this.isEditHouse = true;
       this.houseDialogVisible = true;
     },
@@ -187,23 +190,23 @@ export default {
         if (index !== -1) {
           // 保留 pens 和 isExpanded 状态
           const existingHouse = this.pigHousesData[index];
-          this.pigHousesData[index] = { ...newHouseData, pens: existingHouse.pens, isExpanded: existingHouse.isExpanded };
+          this.pigHousesData[index] = {...newHouseData, pens: existingHouse.pens, isExpanded: existingHouse.isExpanded};
         }
         this.$message.success('猪舍更新成功');
       } else {
         // 添加新猪舍
-        this.pigHousesData.push({ ...newHouseData, pens: [], isExpanded: false });
+        this.pigHousesData.push({...newHouseData, pens: [], isExpanded: false});
         this.$message.success('猪舍添加成功');
       }
     },
     // --- 猪栏操作 ---
     handleAddPen(house) {
-      this.currentPen = { house_id: house.id };
+      this.currentPen = {house_id: house.id};
       this.isEditPen = false;
       this.penDialogVisible = true;
     },
     handleEditPen(pen) {
-      this.currentPen = { ...pen };
+      this.currentPen = {...pen};
       this.isEditPen = true;
       this.penDialogVisible = true;
     },
@@ -251,6 +254,12 @@ export default {
           this.$message.success('猪栏添加成功');
         }
       }
+    },
+    handleToggleHouseExpand(houseId) {
+      const house = this.pigHousesData.find(h => h.id === houseId);
+      if (house) {
+        house.isExpanded = !house.isExpanded;
+      }
     }
   }
 }
@@ -312,6 +321,7 @@ export default {
   .pig-farm-management {
     padding: 10px;
   }
+
   .card-header {
     flex-direction: column;
     gap: 15px;