栏舍管理界面

src/components/PigHouseList.vue

@@ -0,0 +1,136 @@
+<template>
+  <div class="pig-house-list">
+    <div v-for="house in pigHouses" :key="house.id" class="pig-house-item">
+      <div class="house-header" @click="toggleExpand(house)">
+        <div class="house-info">
+          <span>猪舍: {{ house.name }}</span>
+          <span v-if="house.description">描述: {{ house.description }}</span>
+        </div>
+        <div class="house-actions">
+          <el-button size="small" type="primary" @click.stop="emitAddPen(house)">增加猪栏</el-button>
+          <el-button size="small" @click.stop="emitEditHouse(house)">编辑</el-button>
+          <el-button size="small" type="danger" @click.stop="emitDeleteHouse(house)">删除</el-button>
+        </div>
+      </div>
+      <div v-if="house.isExpanded" class="house-content">
+        <div v-if="house.pens && house.pens.length > 0" class="pig-pen-list">
+          <PigPenInfoCard
+            v-for="pen in house.pens"
+            :key="pen.id"
+            :pen="pen"
+            @edit="emitEditPen"
+            @delete="emitDeletePen"
+          />
+        </div>
+        <div v-else class="no-pens-message">
+          <p>该猪舍下没有猪栏信息。</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import PigPenInfoCard from './PigPenInfoCard.vue';
+
+export default {
+  name: 'PigHouseList',
+  components: {
+    PigPenInfoCard
+  },
+  props: {
+    pigHouses: {
+      type: Array,
+      required: true
+    }
+  },
+  emits: ['edit-house', 'delete-house', 'add-pen', 'edit-pen', 'delete-pen'],
+  methods: {
+    toggleExpand(house) {
+      house.isExpanded = !house.isExpanded;
+    },
+    // 猪舍操作
+    emitAddPen(house) {
+      this.$emit('add-pen', house);
+    },
+    emitEditHouse(house) {
+      this.$emit('edit-house', house);
+    },
+    emitDeleteHouse(house) {
+      this.$emit('delete-house', house);
+    },
+    // 猪栏操作
+    emitEditPen(pen) {
+      this.$emit('edit-pen', pen);
+    },
+    emitDeletePen(pen) {
+      this.$emit('delete-pen', pen);
+    }
+  }
+}
+</script>
+
+<style scoped>
+.pig-house-list {
+  width: 100%;
+}
+
+.pig-house-item {
+  border: 1px solid #eee;
+  border-radius: 4px;
+  margin-bottom: 16px;
+  overflow: hidden; /* 防止子元素溢出圆角 */
+}
+
+.house-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px;
+  cursor: pointer;
+  background-color: #f9f9f9;
+  transition: background-color 0.3s;
+}
+
+.house-header:hover {
+  background-color: #f0f0f0;
+}
+
+.house-info {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.house-info span:first-child {
+  font-weight: bold;
+}
+
+.house-info span {
+  margin-right: 20px;
+  font-size: 14px;
+  color: #606266;
+}
+
+.house-actions {
+  display: flex;
+  gap: 10px;
+}
+
+.house-content {
+  padding: 16px;
+  border-top: 1px solid #eee;
+}
+
+.pig-pen-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+}
+
+.no-pens-message {
+  color: #909399;
+  text-align: center;
+  padding: 20px 0;
+}
+</style>