猪品种管理界面

src/components/feed/PigBreedForm.vue

@@ -0,0 +1,131 @@
+<template>
+  <el-form :model="formData" :rules="rules" ref="formRef" label-width="120px">
+    <el-form-item label="品种名称" prop="name">
+      <el-input v-model="formData.name" placeholder="请输入猪品种名称"></el-input>
+    </el-form-item>
+    <el-form-item label="描述" prop="description">
+      <el-input
+        v-model="formData.description"
+        type="textarea"
+        :rows="3"
+        placeholder="请输入品种描述"
+      ></el-input>
+    </el-form-item>
+    <el-form-item label="父母信息" prop="parent_info">
+      <el-input v-model="formData.parent_info" placeholder="请输入父母信息"></el-input>
+    </el-form-item>
+    <el-form-item label="外貌特征" prop="appearance_features">
+      <el-input v-model="formData.appearance_features" placeholder="请输入外貌特征"></el-input>
+    </el-form-item>
+    <el-form-item label="品种优点" prop="breed_advantages">
+      <el-input v-model="formData.breed_advantages" placeholder="请输入品种优点"></el-input>
+    </el-form-item>
+    <el-form-item label="品种缺点" prop="breed_disadvantages">
+      <el-input v-model="formData.breed_disadvantages" placeholder="请输入品种缺点"></el-input>
+    </el-form-item>
+    <el-form-item>
+      <el-button type="primary" @click="submitForm">提交</el-button>
+      <el-button @click="cancelForm">取消</el-button>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script>
+import { ref, reactive, watch } from 'vue';
+import { ElMessage } from 'element-plus';
+
+export default {
+  name: 'PigBreedForm',
+  props: {
+    isEdit: {
+      type: Boolean,
+      default: false,
+    },
+    initialData: {
+      type: Object,
+      default: () => ({
+        name: '',
+        description: '',
+        parent_info: '',
+        appearance_features: '',
+        breed_advantages: '',
+        breed_disadvantages: '',
+      }),
+    },
+  },
+  emits: ['submit', 'cancel'],
+  setup(props, { emit }) {
+    const formRef = ref(null);
+    const formData = reactive({
+      name: '',
+      description: '',
+      parent_info: '',
+      appearance_features: '',
+      breed_advantages: '',
+      breed_disadvantages: '',
+    });
+
+    // 监听 initialData 变化，用于编辑模式下初始化表单
+    watch(
+      () => props.initialData,
+      (newVal) => {
+        if (newVal) {
+          formData.name = newVal.name || '';
+          formData.description = newVal.description || '';
+          formData.parent_info = newVal.parent_info || '';
+          formData.appearance_features = newVal.appearance_features || '';
+          formData.breed_advantages = newVal.breed_advantages || '';
+          formData.breed_disadvantages = newVal.breed_disadvantages || '';
+        }
+      },
+      { immediate: true, deep: true }
+    );
+
+    const rules = {
+      name: [
+        { required: true, message: '请输入猪品种名称', trigger: 'blur' },
+        { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' },
+      ],
+    };
+
+    const submitForm = () => {
+      formRef.value.validate((valid) => {
+        if (valid) {
+          emit('submit', { ...formData });
+        } else {
+          ElMessage.error('请检查表单项');
+          return false;
+        }
+      });
+    };
+
+    const cancelForm = () => {
+      emit('cancel');
+      resetForm();
+    };
+
+    const resetForm = () => {
+      formRef.value.resetFields();
+      // 手动重置 formData，因为 resetFields 不会重置未绑定 prop 的字段
+      formData.name = '';
+      formData.description = '';
+      formData.parent_info = '';
+      formData.appearance_features = '';
+      formData.breed_advantages = '';
+      formData.breed_disadvantages = '';
+    };
+
+    return {
+      formRef,
+      formData,
+      rules,
+      submitForm,
+      cancelForm,
+      resetForm,
+    };
+  },
+};
+</script>
+
+<style scoped>
+</style>

src/components/feed/PigBreedTable.vue

@@ -0,0 +1,200 @@
+<template>
+  <div>
+    <!-- 搜索区域 -->
+    <div style="margin-bottom: 20px; display: flex; align-items: center; gap: 10px;">
+      <el-input
+          v-model="searchKeyword"
+          placeholder="请输入猪品种名称"
+          clearable
+          style="width: 300px;"
+          @keyup.enter="handleSearch"
+      ></el-input>
+      <el-button type="primary" @click="handleSearch">搜索</el-button>
+    </div>
+
+    <!-- 猪品种列表 -->
+    <el-table :data="tableData" style="width: 100%" v-loading="loading" row-key="id"
+              :expand-row-keys="expandRowKeys" @expand-change="handleExpandChange">
+      <el-table-column type="expand">
+        <template #default="props">
+          <div style="padding: 10px 20px;">
+            <h4>该品种下的年龄阶段简介</h4>
+            <el-table :data="props.row.pig_types" border>
+              <el-table-column prop="age_stage_name" label="年龄阶段"></el-table-column>
+              <el-table-column prop="description" label="描述"></el-table-column>
+              <el-table-column prop="min_days" label="最小天数"></el-table-column>
+              <el-table-column prop="max_days" label="最大天数"></el-table-column>
+              <el-table-column prop="min_weight" label="最小体重(kg)" :formatter="weightFormatter"></el-table-column>
+              <el-table-column prop="max_weight" label="最大体重(kg)" :formatter="weightFormatter"></el-table-column>
+              <el-table-column prop="daily_gain_weight" label="日增重(kg)" :formatter="weightFormatter"></el-table-column>
+              <el-table-column prop="daily_feed_intake" label="日采食量(kg)" :formatter="weightFormatter"></el-table-column>
+            </el-table>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="name" label="品种名称"></el-table-column>
+      <el-table-column prop="description" label="描述"></el-table-column>
+      <el-table-column label="操作" width="180">
+        <template #default="scope">
+          <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
+          <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 分页 -->
+    <el-pagination
+        style="margin-top: 20px;"
+        :current-page="pagination.page"
+        :page-size="pagination.page_size"
+        :total="pagination.total"
+        layout="total, sizes, prev, pager, next, jumper"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+    ></el-pagination>
+  </div>
+</template>
+
+<script>
+import {ref, onMounted} from 'vue';
+import {FeedApi} from '../../api/feed';
+import {ElMessageBox, ElMessage} from 'element-plus';
+
+export default {
+  name: 'PigBreedTable',
+  emits: ['edit'], // 声明触发的事件
+  setup(props, { emit }) {
+    const tableData = ref([]);
+    const loading = ref(false);
+    const searchKeyword = ref('');
+    const expandRowKeys = ref([]); // 用于控制展开行
+
+    const pagination = ref({
+      page: 1,
+      page_size: 10,
+      total: 0,
+    });
+
+    const fetchPigBreeds = async () => {
+      loading.value = true;
+      try {
+        const params = {
+          page: pagination.value.page,
+          page_size: pagination.value.page_size,
+          order_by: 'id ASC', // 默认按 ID 升序排序
+        };
+
+        if (searchKeyword.value) {
+          params.name = searchKeyword.value; // 按名称模糊查询
+        }
+
+        const response = await FeedApi.getPigBreeds(params);
+
+        if (response.data) {
+          tableData.value = response.data.list;
+          pagination.value.total = response.data.pagination.total;
+        }
+      } catch (error) {
+        console.error('获取猪品种列表失败:', error);
+        ElMessage.error('获取猪品种列表失败');
+      } finally {
+        loading.value = false;
+      }
+    };
+
+    const handleSearch = () => {
+      pagination.value.page = 1;
+      fetchPigBreeds();
+    };
+
+    const handleSizeChange = (size) => {
+      pagination.value.page_size = size;
+      fetchPigBreeds();
+    };
+
+    const handleCurrentChange = (page) => {
+      pagination.value.page = page;
+      fetchPigBreeds();
+    };
+
+    // 处理行展开/折叠事件
+    const handleExpandChange = async (row, expandedRows) => {
+      const isExpanded = expandedRows.some(r => r.id === row.id);
+      // 优化：仅在展开时且数据未加载时才请求
+      // 注意：PigBreedResponse 默认不包含 pig_types 字段，需要单独请求
+      if (isExpanded && (!row.pig_types || row.pig_types.length === 0)) {
+        try {
+          // 调用 getPigTypes 接口，按 breed_id 筛选
+          const response = await FeedApi.getPigTypes({ breed_id: row.id, page: 1, page_size: 999 }); // 获取所有相关猪类型
+          if (response.data && response.data.list) {
+            const index = tableData.value.findIndex(item => item.id === row.id);
+            if (index !== -1) {
+              tableData.value[index].pig_types = response.data.list;
+            }
+          }
+        } catch (error) {
+          console.error('获取该品种下的猪类型失败:', error);
+          ElMessage.error('获取猪类型失败');
+        }
+      }
+    };
+
+    // 将克转换为公斤并格式化，只返回数值
+    const weightFormatter = (row, column, cellValue) => {
+      if (typeof cellValue === 'number') {
+        return (cellValue / 1000).toFixed(2);
+      }
+      return cellValue;
+    };
+
+    const handleEdit = (row) => {
+      emit('edit', row); // 触发 edit 事件，并传递当前行数据
+    };
+
+    const handleDelete = (row) => {
+      ElMessageBox.confirm(
+          `确定要删除猪品种 "${row.name}" 吗？`,
+          '提示',
+          {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning',
+          }
+      ).then(async () => {
+        try {
+          await FeedApi.deletePigBreed(row.id);
+          ElMessage.success('删除成功');
+          await fetchPigBreeds();
+        } catch (error) {
+          ElMessage.error('删除失败: ' + (error.message || '未知错误'));
+        }
+      }).catch(() => {
+        // 用户取消操作
+      });
+    };
+
+    onMounted(() => {
+      fetchPigBreeds();
+    });
+
+    return {
+      tableData,
+      loading,
+      searchKeyword,
+      expandRowKeys,
+      pagination,
+      handleSearch,
+      handleSizeChange,
+      handleCurrentChange,
+      handleExpandChange,
+      weightFormatter, // 暴露给模板
+      handleEdit,
+      handleDelete,
+      fetchPigBreeds, // 将方法暴露出去
+    };
+  },
+};
+</script>
+
+<style scoped>
+</style>

src/layouts/MainLayout.vue

@@ -96,6 +96,12 @@
             </el-icon>
             <template #title>猪年龄阶段管理</template>
           </el-menu-item>
+          <el-menu-item index="/feed/pig-breeds">
+            <el-icon>
+              <Tickets/>
+            </el-icon>
+            <template #title>猪品种管理</template>
+          </el-menu-item>
 
         </el-sub-menu>
 

src/router/index.js

@@ -26,6 +26,7 @@ import ThresholdAlarmList from '../views/alarm/ThresholdAlarmList.vue';
 import RawMaterialList from '../views/feed/RawMaterialList.vue';
 import NutrientList from '../views/feed/NutrientList.vue'; // 修正拼写错误
 import PigAgeStageList from '../views/feed/PigAgeStageList.vue'; // 导入 PigAgeStageList 组件
+import PigBreedList from '../views/feed/PigBreedList.vue'; // 导入 PigBreedList 组件
 
 const routes = [
     {path: '/', component: Home, meta: {requiresAuth: true, title: '系统首页'}},
@@ -40,6 +41,7 @@ const routes = [
     {path: '/feed/raw-materials', component: RawMaterialList, meta: {requiresAuth: true, title: '原料管理'}},
     {path: '/feed/nutrients', component: NutrientList, meta: {requiresAuth: true, title: '营养管理'}},
     {path: '/feed/pig-age-stages', component: PigAgeStageList, meta: {requiresAuth: true, title: '猪年龄阶段管理'}}, // 添加猪年龄阶段管理路由
+    {path: '/feed/pig-breeds', component: PigBreedList, meta: {requiresAuth: true, title: '猪品种管理'}}, // 添加猪品种管理路由
     {path: '/monitor/device-command-logs', component: DeviceCommandLogView, meta: {requiresAuth: true, title: '设备命令日志'}},
     {path: '/monitor/medication-logs', component: MedicationLogsView, meta: {requiresAuth: true, title: '用药记录'}},
     {path: '/monitor/notifications', component: NotificationLogView, meta: {requiresAuth: true, title: '通知记录'}},

src/views/feed/PigBreedList.vue

@@ -0,0 +1,184 @@
+<template>
+  <div class="pig-breed-list-container">
+    <el-card>
+      <template #header>
+        <div class="card-header">
+          <div class="title-container">
+            <h2 class="page-title">猪品种管理</h2>
+            <el-button type="text" @click="refreshList" class="refresh-btn" title="刷新猪品种列表">
+              <el-icon :size="20"><Refresh /></el-icon>
+            </el-button>
+          </div>
+          <el-button type="primary" @click="handleAddPigBreed">添加猪品种</el-button>
+        </div>
+      </template>
+      <pig-breed-table ref="pigBreedTableRef" @edit="handleEdit"></pig-breed-table>
+    </el-card>
+
+    <!-- 添加/编辑猪品种弹窗 -->
+    <el-dialog
+      v-model="showDialog"
+      :title="formTitle"
+      width="600px"
+      :close-on-click-modal="false"
+      @close="handleCancel"
+    >
+      <!-- 只有在弹窗显示时才渲染表单组件，并传递编辑状态和初始数据 -->
+      <pig-breed-form
+        v-if="showDialog"
+        ref="pigBreedFormRef"
+        :isEdit="isEditMode"
+        :initialData="currentEditData"
+        @submit="handleSubmit"
+        @cancel="handleCancel"
+      ></pig-breed-form>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { ref, nextTick } from 'vue';
+import { Refresh } from '@element-plus/icons-vue';
+import { ElMessage } from 'element-plus';
+import PigBreedTable from '../../components/feed/PigBreedTable.vue';
+import PigBreedForm from '../../components/feed/PigBreedForm.vue';
+import { FeedApi } from '../../api/feed';
+
+export default {
+  name: 'PigBreedList',
+  components: {
+    PigBreedTable,
+    PigBreedForm,
+    Refresh,
+  },
+  setup() {
+    const pigBreedTableRef = ref(null);
+    const pigBreedFormRef = ref(null);
+    const showDialog = ref(false);
+    const isEditMode = ref(false);
+    const currentEditData = ref(null);
+    const formTitle = ref('添加猪品种');
+
+    const refreshList = () => {
+      if (pigBreedTableRef.value) {
+        pigBreedTableRef.value.fetchPigBreeds();
+      }
+    };
+
+    // 处理添加猪品种按钮点击事件
+    const handleAddPigBreed = () => {
+      formTitle.value = '添加猪品种';
+      isEditMode.value = false; // 新增模式
+      currentEditData.value = null; // 清空编辑数据
+      showDialog.value = true;
+      nextTick(() => {
+        pigBreedFormRef.value?.resetForm();
+      });
+    };
+
+    // 处理编辑按钮点击事件
+    const handleEdit = (row) => {
+      formTitle.value = '编辑猪品种';
+      isEditMode.value = true; // 编辑模式
+      currentEditData.value = { ...row }; // 存储当前编辑数据，进行深拷贝
+      showDialog.value = true;
+    };
+
+    // 处理表单提交
+    const handleSubmit = async (formData) => {
+      try {
+        let message = '';
+        if (isEditMode.value) {
+          // 编辑模式
+          await FeedApi.updatePigBreed(currentEditData.value.id, formData);
+          message = '猪品种更新成功';
+        } else {
+          // 新增模式
+          await FeedApi.createPigBreed(formData);
+          message = '猪品种添加成功';
+        }
+        ElMessage.success(message);
+        refreshList(); // 刷新列表
+        showDialog.value = false; // 关闭弹窗
+      } catch (error) {
+        ElMessage.error('操作失败: ' + (error.message || '未知错误'));
+      }
+    };
+
+    // 处理弹窗取消或关闭
+    const handleCancel = () => {
+      showDialog.value = false;
+      // 关闭弹窗时重置表单和编辑状态
+      if (pigBreedFormRef.value) {
+        pigBreedFormRef.value.resetForm();
+      }
+      isEditMode.value = false;
+      currentEditData.value = null;
+    };
+
+    return {
+      pigBreedTableRef,
+      pigBreedFormRef,
+      showDialog,
+      formTitle,
+      isEditMode,
+      currentEditData,
+      refreshList,
+      handleAddPigBreed,
+      handleEdit,
+      handleSubmit,
+      handleCancel,
+    };
+  },
+};
+</script>
+
+<style scoped>
+.pig-breed-list-container {
+  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;
+}
+
+@media (max-width: 768px) {
+  .pig-breed-list-container {
+    padding: 10px;
+  }
+  .card-header {
+    flex-direction: column;
+    gap: 15px;
+  }
+}
+</style>