栏舍管理界面

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">批次ID: {{ pen.pig_batch_id || '未分配' }}</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>