增加猪群管理界面

src/components/PigBatchList.vue

@@ -0,0 +1,137 @@
+<template>
+  <div class="pig-batch-list">
+    <div v-for="batch in pigBatches" :key="batch.id" class="pig-batch-item">
+      <div class="batch-header" @click="toggleExpand(batch)">
+        <div class="batch-info">
+          <span>批次编号: {{ batch.batch_number }}</span>
+          <span>状态: {{ batch.status }}</span>
+          <span>初始数量: {{ batch.initial_count }}</span>
+        </div>
+        <div class="batch-actions">
+          <el-button size="small" type="primary" @click.stop="emitAddPen(batch)">增加猪栏</el-button>
+          <el-button size="small" @click.stop="emitEditBatch(batch)">编辑</el-button>
+          <el-button size="small" type="danger" @click.stop="emitDeleteBatch(batch)">删除</el-button>
+        </div>
+      </div>
+      <div v-if="batch.isExpanded" class="batch-content">
+        <div v-if="batch.pens && batch.pens.length > 0" class="pig-pen-list">
+          <PigPenInfoCard
+            v-for="pen in batch.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: 'PigBatchList',
+  components: {
+    PigPenInfoCard
+  },
+  props: {
+    pigBatches: {
+      type: Array,
+      required: true
+    }
+  },
+  emits: ['edit-batch', 'delete-batch', 'add-pen', 'edit-pen', 'delete-pen'],
+  methods: {
+    toggleExpand(batch) {
+      batch.isExpanded = !batch.isExpanded;
+    },
+    // 猪群操作
+    emitAddPen(batch) {
+      this.$emit('add-pen', batch);
+    },
+    emitEditBatch(batch) {
+      this.$emit('edit-batch', batch);
+    },
+    emitDeleteBatch(batch) {
+      this.$emit('delete-batch', batch);
+    },
+    // 猪栏操作
+    emitEditPen(pen) {
+      this.$emit('edit-pen', pen);
+    },
+    emitDeletePen(pen) {
+      this.$emit('delete-pen', pen);
+    }
+  }
+}
+</script>
+
+<style scoped>
+.pig-batch-list {
+  width: 100%;
+}
+
+.pig-batch-item {
+  border: 1px solid #eee;
+  border-radius: 4px;
+  margin-bottom: 16px;
+  overflow: hidden;
+}
+
+.batch-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px;
+  cursor: pointer;
+  background-color: #f9f9f9;
+  transition: background-color 0.3s;
+}
+
+.batch-header:hover {
+  background-color: #f0f0f0;
+}
+
+.batch-info {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.batch-info span:first-child {
+  font-weight: bold;
+}
+
+.batch-info span {
+  margin-right: 20px;
+  font-size: 14px;
+  color: #606266;
+}
+
+.batch-actions {
+  display: flex;
+  gap: 10px;
+}
+
+.batch-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>