修改猪栏卡片批次展示

src/components/PenForm.vue

@@ -0,0 +1,161 @@
+<template>
+  <el-dialog
+    :model-value="visible"
+    :title="title"
+    @close="handleClose"
+    :close-on-click-modal="false"
+    width="500px"
+  >
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="rules"
+      label-width="100px"
+      @submit.prevent
+    >
+      <el-form-item label="猪栏编号" prop="pen_number">
+        <el-input v-model="formData.pen_number" placeholder="例如：A01-01" />
+      </el-form-item>
+      <el-form-item label="容量" prop="capacity">
+        <el-input-number v-model="formData.capacity" :min="1" controls-position="right" style="width: 100%" />
+      </el-form-item>
+      <el-form-item v-if="isEdit" label="状态" prop="status">
+        <el-select v-model="formData.status" placeholder="请选择状态" style="width: 100%">
+          <el-option v-for="item in penStatusOptions" :key="item" :label="item" :value="item" />
+        </el-select>
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="handleClose">取消</el-button>
+        <el-button type="primary" @click="handleSubmit" :loading="loading">确定</el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+import { ref, reactive, watch, computed, nextTick } from 'vue';
+import { ElMessage } from 'element-plus';
+import { createPen, updatePen } from '@/api/pen.js';
+
+export default {
+  name: 'PenForm',
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    penData: {
+      type: Object,
+      default: () => ({}) // 改为非必需，并提供默认值
+    },
+    isEdit: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['update:visible', 'success', 'cancel'],
+  setup(props, { emit }) {
+    const formRef = ref(null);
+    const loading = ref(false);
+    const penStatusOptions = ["空闲", "使用中", "病猪栏", "康复栏", "清洗消毒", "维修中"];
+
+    const initialFormData = () => ({
+      id: null,
+      pen_number: '',
+      capacity: 10,
+      status: '空闲',
+      house_id: null
+    });
+
+    const formData = reactive(initialFormData());
+
+    const rules = {
+      pen_number: [
+        { required: true, message: '请输入猪栏编号', trigger: 'blur' }
+      ],
+      capacity: [
+        { required: true, message: '请输入容量', trigger: 'blur' },
+        { type: 'integer', min: 1, message: '容量必须是大于0的整数', trigger: 'blur' }
+      ],
+      status: [
+        { required: true, message: '请选择状态', trigger: 'change' }
+      ]
+    };
+
+    const title = computed(() => (props.isEdit ? '编辑猪栏' : '添加猪栏'));
+
+    const handleClose = () => {
+      emit('update:visible', false);
+      emit('cancel');
+    };
+
+    const handleSubmit = async () => {
+      if (!formRef.value) return;
+      await formRef.value.validate(async (valid) => {
+        if (valid) {
+          loading.value = true;
+          try {
+            if (props.isEdit) {
+              const { id, ...updateData } = formData;
+              await updatePen(id, updateData);
+            } else {
+              const { id, status, ...createData } = formData;
+              await createPen(createData);
+            }
+            emit('success');
+            handleClose();
+          } catch (error) {
+            ElMessage.error((props.isEdit ? '更新' : '创建') + '猪栏失败: ' + (error.message || '未知错误'));
+          } finally {
+            loading.value = false;
+          }
+        }
+      });
+    };
+
+    watch(() => props.visible, (newVal) => {
+      if (newVal) {
+        // 重置表单以适应新数据
+        Object.assign(formData, initialFormData());
+        if (props.isEdit && props.penData) {
+          // 编辑模式：填充数据
+          Object.assign(formData, props.penData);
+        } else if (props.penData) {
+          // 添加模式：只设置 house_id
+          formData.house_id = props.penData.house_id;
+        }
+        nextTick(() => {
+          formRef.value?.clearValidate();
+        });
+      } else {
+         // 对话框关闭时重置表单
+         nextTick(() => {
+          formRef.value?.resetFields();
+        });
+      }
+    });
+
+    return {
+      formRef,
+      loading,
+      formData,
+      rules,
+      title,
+      penStatusOptions,
+      handleClose,
+      handleSubmit
+    };
+  }
+};
+</script>
+
+<style scoped>
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+}
+</style>

src/components/PigHouseForm.vue

@@ -0,0 +1,144 @@
+<template>
+  <el-dialog
+    :model-value="visible"
+    :title="title"
+    @close="handleClose"
+    :close-on-click-modal="false"
+    width="500px"
+  >
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="rules"
+      label-width="100px"
+      @submit.prevent
+    >
+      <el-form-item label="猪舍名称" prop="name">
+        <el-input v-model="formData.name" placeholder="请输入猪舍名称" />
+      </el-form-item>
+      <el-form-item label="描述" prop="description">
+        <el-input v-model="formData.description" type="textarea" placeholder="请输入描述信息" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="handleClose">取消</el-button>
+        <el-button type="primary" @click="handleSubmit" :loading="loading">确定</el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+import { ref, reactive, watch, computed, nextTick } from 'vue';
+import { ElMessage } from 'element-plus';
+import { createPigHouse, updatePigHouse } from '@/api/pigHouse.js';
+
+export default {
+  name: 'PigHouseForm',
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    houseData: {
+      type: Object,
+      default: () => ({})
+    },
+    isEdit: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['update:visible', 'success', 'cancel'],
+  setup(props, { emit }) {
+    const formRef = ref(null);
+    const loading = ref(false);
+
+    const initialFormData = () => ({
+      id: null,
+      name: '',
+      description: ''
+    });
+
+    const formData = reactive(initialFormData());
+
+    const rules = {
+      name: [
+        { required: true, message: '请输入猪舍名称', trigger: 'blur' }
+      ]
+    };
+
+    const title = computed(() => (props.isEdit ? '编辑猪舍' : '添加猪舍'));
+
+    const handleClose = () => {
+      emit('update:visible', false);
+      emit('cancel');
+      Object.assign(formData, initialFormData());
+      nextTick(() => {
+        formRef.value?.resetFields();
+      });
+    };
+
+    const handleSubmit = async () => {
+      if (!formRef.value) return;
+      await formRef.value.validate(async (valid) => {
+        if (valid) {
+          loading.value = true;
+          try {
+            const submitData = { name: formData.name, description: formData.description };
+            if (props.isEdit) {
+              await updatePigHouse(formData.id, submitData);
+            } else {
+              await createPigHouse(submitData);
+            }
+            emit('success');
+            handleClose();
+          } catch (error) {
+            ElMessage.error((props.isEdit ? '更新' : '创建') + '猪舍失败: ' + (error.message || '未知错误'));
+          } finally {
+            loading.value = false;
+          }
+        }
+      });
+    };
+
+    watch(() => props.houseData, (newVal) => {
+      Object.assign(formData, initialFormData());
+      if (props.isEdit && newVal && newVal.id) {
+        formData.id = newVal.id;
+        formData.name = newVal.name;
+        formData.description = newVal.description;
+      }
+    }, { immediate: true, deep: true });
+
+    watch(() => props.visible, (newVal) => {
+        if (newVal && !props.isEdit) {
+            Object.assign(formData, initialFormData());
+            nextTick(() => {
+                formRef.value?.clearValidate();
+            });
+        }
+    });
+
+    return {
+      formRef,
+      loading,
+      formData,
+      rules,
+      title,
+      handleClose,
+      handleSubmit
+    };
+  }
+};
+</script>
+
+<style scoped>
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+}
+</style>

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>

src/components/PigPenInfoCard.vue

@@ -0,0 +1,107 @@
+<template>
+  <div class="pig-pen-info-card">
+    <div class="info-section">
+      <div class="title">猪栏: {{ pen.pen_number }}</div>
+      <div class="info-item">状态: <el-tag size="small" :type="statusType">{{ pen.status || '未知' }}</el-tag></div>
+      <div class="info-item">容量: {{ pen.capacity }}</div>
+      <div class="info-item">批次: {{ pen.batch_number || '未分配' }}</div>
+    </div>
+    <div class="actions-section">
+      <el-button size="small" @click="emitEdit">编辑</el-button>
+      <el-button size="small" type="danger" @click="emitDelete">删除</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { computed } from 'vue';
+
+export default {
+  name: 'PigPenInfoCard',
+  props: {
+    pen: {
+      type: Object,
+      required: true
+    }
+  },
+  emits: ['edit', 'delete'],
+  setup(props, { emit }) {
+    const statusType = computed(() => {
+      switch (props.pen.status) {
+        case '使用中':
+          return 'success';
+        case '病猪栏':
+        case '维修中':
+          return 'danger';
+        case '清洗消毒':
+          return 'warning';
+        case '空闲':
+        default:
+          return 'info';
+      }
+    });
+
+    const emitEdit = () => {
+      emit('edit', props.pen);
+    };
+
+    const emitDelete = () => {
+      emit('delete', props.pen);
+    };
+
+    return {
+      statusType,
+      emitEdit,
+      emitDelete
+    };
+  }
+}
+</script>
+
+<style scoped>
+.pig-pen-info-card {
+  border: 1px solid #eee;
+  border-radius: 8px;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 200px; /* 适当加宽以容纳更多信息 */
+  height: 240px;
+  background-color: #fff;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+  transition: box-shadow 0.3s;
+}
+
+.pig-pen-info-card:hover {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.info-section {
+  display: flex;
+  flex-direction: column;
+  gap: 12px; /* 增加信息项间距 */
+}
+
+.info-section .title {
+  font-weight: bold;
+  font-size: 1.1em;
+  color: #303133;
+}
+
+.info-section .info-item {
+  font-size: 0.9em;
+  color: #606266;
+}
+
+.actions-section {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.actions-section .el-button {
+  width: 100%;
+  margin: 0;
+}
+</style>

src/layouts/MainLayout.vue

@@ -15,7 +15,7 @@
         :collapse="isCollapse"
         :collapse-transition="false"
         router
-        :default-openeds="['/device-management', '/monitor']"
+        :default-openeds="['/device-management', '/monitor', '/pms']"
       >
         <el-menu-item index="/">
           <el-icon><House /></el-icon>
@@ -38,6 +38,18 @@
           </el-menu-item>
         </el-sub-menu>
 
+        <!-- 猪场管理二级菜单 -->
+        <el-sub-menu index="/pms">
+          <template #title>
+            <el-icon><OfficeBuilding /></el-icon>
+            <span>猪场管理</span>
+          </template>
+          <el-menu-item index="/pms/farm-management">
+            <el-icon><Tickets /></el-icon>
+            <template #title>栏舍管理</template>
+          </el-menu-item>
+        </el-sub-menu>
+
         <el-menu-item index="/plans">
           <el-icon><Calendar /></el-icon>
           <template #title>计划管理</template>
@@ -167,14 +179,14 @@ import { ref, computed, onMounted, onUnmounted } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { 
   House, Monitor, Calendar, ArrowDown, Menu, Fold, Expand, Setting, Tickets, DataAnalysis, Document, Food,
-  FirstAidKit, Clock, Files, ShoppingCart, SoldOut, Warning, Switch, List, Shop, Coin, DataLine, Finished, User, ScaleToOriginal
+  FirstAidKit, Clock, Files, ShoppingCart, SoldOut, Warning, Switch, List, Shop, Coin, DataLine, Finished, User, ScaleToOriginal, OfficeBuilding
 } from '@element-plus/icons-vue';
 
 export default {
   name: 'MainLayout',
   components: {
     House, Monitor, Calendar, ArrowDown, Menu, Fold, Expand, Setting, Tickets, DataAnalysis, Document, Food,
-    FirstAidKit, Clock, Files, ShoppingCart, SoldOut, Warning, Switch, List, Shop, Coin, DataLine, Finished, User, ScaleToOriginal
+    FirstAidKit, Clock, Files, ShoppingCart, SoldOut, Warning, Switch, List, Shop, Coin, DataLine, Finished, User, ScaleToOriginal, OfficeBuilding
   },
   setup() {
     const route = useRoute();
@@ -199,11 +211,9 @@ export default {
     };
     
     const activeMenu = computed(() => {
-      if (route.path.startsWith('/monitor')) {
-        return route.path;
-      }
-      if (route.path === '/devices' || route.path === '/device-templates') {
-        return route.path;
+      const path = route.path;
+      if (path.startsWith('/monitor') || path.startsWith('/pms') || path.startsWith('/devices') || path.startsWith('/device-templates')) {
+        return path;
       }
       return route.path;
     });
@@ -213,6 +223,7 @@ export default {
         '/': '系统首页',
         '/devices': '设备管理',
         '/device-templates': '设备模板管理',
+        '/pms/farm-management': '栏舍管理',
         '/plans': '计划管理',
         '/monitor/device-command-logs': '设备命令日志',
         '/monitor/feed-usage-records': '饲料使用记录',

src/main.js

@@ -10,6 +10,7 @@ import DeviceList from './views/device/DeviceList.vue';
 import PlanList from './views/plan/PlanList.vue';
 import LoginForm from './views/home/LoginForm.vue';
 import DeviceTemplateList from './views/device/DeviceTemplateList.vue';
+import PigFarmManagementView from './views/pms/PigFarmManagementView.vue'; // 导入栏舍管理视图
 
 // --- 统一导入所有监控视图 ---
 import DeviceCommandLogView from './views/monitor/DeviceCommandLogView.vue';
@@ -41,6 +42,7 @@ const routes = [
     {path: '/device-templates', component: DeviceTemplateList, meta: {requiresAuth: true}},
     {path: '/plans', component: PlanList, meta: {requiresAuth: true}},
     {path: '/login', component: LoginForm},
+    {path: '/pms/farm-management', name: 'PigFarmManagement', component: PigFarmManagementView, meta: { requiresAuth: true }},
 
     // --- 统一注册所有监控路由 ---
     {path: '/monitor/device-command-logs', component: DeviceCommandLogView, meta: {requiresAuth: true}},

src/views/pms/PigFarmManagementView.vue

@@ -0,0 +1,272 @@
+<template>
+  <div class="pig-farm-management">
+    <el-card>
+      <template #header>
+        <div class="card-header">
+          <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-button>
+          </div>
+          <el-button type="primary" @click="handleAddHouse">添加猪舍</el-button>
+        </div>
+      </template>
+
+      <!-- 加载状态 -->
+      <div v-if="loading" class="loading">
+        <el-skeleton animated />
+      </div>
+
+      <!-- 错误状态 -->
+      <div v-else-if="error" class="error">
+        <el-alert
+          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"
+        />
+        <el-empty v-else description="暂无数据" />
+      </div>
+
+    </el-card>
+
+    <!-- 猪舍表单对话框 -->
+    <PigHouseForm
+      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"
+    />
+  </div>
+</template>
+
+<script>
+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';
+
+export default {
+  name: 'PigFarmManagementView',
+  components: {
+    PigHouseList,
+    PigHouseForm,
+    PenForm,
+    Refresh
+  },
+  data() {
+    return {
+      pigHousesData: [],
+      loading: false,
+      error: null,
+      // 猪舍表单状态
+      houseDialogVisible: false,
+      isEditHouse: false,
+      currentHouse: {},
+      // 猪栏表单状态
+      penDialogVisible: false,
+      isEditPen: false,
+      currentPen: {},
+    };
+  },
+  async mounted() {
+    await this.loadData();
+  },
+  methods: {
+    async loadData() {
+      this.loading = true;
+      this.error = null;
+      try {
+        const [pigHousesResponse, pensResponse, batchesResponse] = await Promise.all([
+          getPigHouses(),
+          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 : [];
+
+        this.pigHousesData = this.assembleData(houses, pens, batches);
+      } catch (err) {
+        this.error = err.message || '无法获取数据';
+        console.error('Failed to fetch pig farm data:', err);
+      } finally {
+        this.loading = false;
+      }
+    },
+    assembleData(houses, pens, batches) {
+      const batchMap = new Map(batches.map(batch => [batch.id, batch.batch_number]));
+      const houseMap = new Map(houses.map(house => [house.id, { ...house, pens: [], isExpanded: false }]));
+      
+      for (const pen of pens) {
+        if (houseMap.has(pen.house_id)) {
+          const penWithBatch = {
+            ...pen,
+            batch_number: batchMap.get(pen.pig_batch_id) || null
+          };
+          houseMap.get(pen.house_id).pens.push(penWithBatch);
+        }
+      }
+      return Array.from(houseMap.values());
+    },
+    // --- 猪舍操作 ---
+    handleAddHouse() {
+      this.currentHouse = {};
+      this.isEditHouse = false;
+      this.houseDialogVisible = true;
+    },
+    handleEditHouse(house) {
+      this.currentHouse = { ...house };
+      this.isEditHouse = true;
+      this.houseDialogVisible = true;
+    },
+    async handleDeleteHouse(house) {
+      try {
+        await this.$confirm(`确认删除猪舍 "${house.name}" 吗？`, '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        });
+        await deletePigHouse(house.id);
+        this.$message.success('删除成功');
+        await this.loadData();
+      } catch (err) {
+        if (err !== 'cancel') {
+          this.$message.error('删除失败: ' + (err.message || '未知错误'));
+          console.error('Failed to delete pig house:', err);
+        }
+      }
+    },
+    async handleHouseSuccess() {
+      this.houseDialogVisible = false;
+      await this.loadData();
+    },
+    // --- 猪栏操作 ---
+    handleAddPen(house) {
+      this.currentPen = { house_id: house.id };
+      this.isEditPen = false;
+      this.penDialogVisible = true;
+    },
+    handleEditPen(pen) {
+      this.currentPen = { ...pen };
+      this.isEditPen = true;
+      this.penDialogVisible = true;
+    },
+    async handleDeletePen(pen) {
+      try {
+        await this.$confirm(`确认删除猪栏 "${pen.pen_number}" 吗？`, '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        });
+        await deletePen(pen.id);
+        this.$message.success('删除成功');
+        await this.loadData();
+      } catch (err) {
+        if (err !== 'cancel') {
+          this.$message.error('删除失败: ' + (err.message || '未知错误'));
+          console.error('Failed to delete pen:', err);
+        }
+      }
+    },
+    async handlePenSuccess() {
+      this.penDialogVisible = false;
+      await this.loadData();
+    }
+  }
+}
+</script>
+
+<style scoped>
+.pig-farm-management {
+  padding: 20px;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 15px 0;
+}
+
+.title-container {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.page-title {
+  margin: 0;
+  font-size: 1.5rem;
+  font-weight: bold;
+  line-height: 1;
+}
+
+.refresh-btn {
+  color: black;
+  background-color: transparent;
+  padding: 0;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+}
+
+.loading {
+  padding: 20px 0;
+}
+
+.error {
+  padding: 20px 0;
+  text-align: center;
+}
+
+.retry-btn {
+  margin-top: 15px;
+}
+
+@media (max-width: 768px) {
+  .pig-farm-management {
+    padding: 10px;
+  }
+  .card-header {
+    flex-direction: column;
+    gap: 15px;
+  }
+}
+</style>