展示营养需求

src/components/feed/PigAgeStageTable.vue

@@ -28,6 +28,12 @@
               <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-column label="营养需求" width="120">
+                <template #default="scope">
+                  <el-button type="text" @click="handleViewNutrientRequirements(scope.row)">查看详情</el-button>
+                </template>
+              </el-table-column>
             </el-table>
           </div>
         </template>
@@ -52,6 +58,21 @@
         @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
     ></el-pagination>
+
+    <!-- 营养需求详情弹窗 -->
+    <el-dialog
+        v-model="showNutrientDialog"
+        :title="`品种 ${currentBreedName} - 年龄阶段 ${currentAgeStageName} 营养需求`"
+        width="600px"
+        :close-on-click-modal="false"
+    >
+      <PigNutrientRequirementsDisplay
+          v-if="showNutrientDialog"
+          :nutrientRequirements="currentNutrientRequirements"
+          :breedName="currentBreedName"
+          :ageStageName="currentAgeStageName"
+      ></PigNutrientRequirementsDisplay>
+    </el-dialog>
   </div>
 </template>
 
@@ -59,16 +80,26 @@
 import {ref, onMounted} from 'vue';
 import {FeedApi} from '../../api/feed';
 import {ElMessageBox, ElMessage} from 'element-plus';
+import PigNutrientRequirementsDisplay from './PigNutrientRequirementsDisplay.vue'; // 导入新的组件
 
 export default {
   name: 'PigAgeStageTable',
   emits: ['edit'], // 声明触发的事件
+  components: {
+    PigNutrientRequirementsDisplay, // 注册组件
+  },
   setup(props, { emit }) {
     const tableData = ref([]);
     const loading = ref(false);
     const searchKeyword = ref('');
     const expandRowKeys = ref([]); // 用于控制展开行
 
+    // 营养需求弹窗相关
+    const showNutrientDialog = ref(false);
+    const currentNutrientRequirements = ref([]);
+    const currentBreedName = ref('');
+    const currentAgeStageName = ref('');
+
     const pagination = ref({
       page: 1,
       page_size: 10,
@@ -147,6 +178,14 @@ export default {
       return cellValue;
     };
 
+    // 处理查看营养需求详情
+    const handleViewNutrientRequirements = (pigType) => {
+      currentNutrientRequirements.value = pigType.pig_nutrient_requirements || [];
+      currentBreedName.value = pigType.breed_name;
+      currentAgeStageName.value = pigType.age_stage_name;
+      showNutrientDialog.value = true;
+    };
+
     const handleEdit = (row) => {
       emit('edit', row); // 触发 edit 事件，并传递当前行数据
     };
@@ -183,11 +222,16 @@ export default {
       searchKeyword,
       expandRowKeys,
       pagination,
+      showNutrientDialog,
+      currentNutrientRequirements,
+      currentBreedName,
+      currentAgeStageName,
       handleSearch,
       handleSizeChange,
       handleCurrentChange,
       handleExpandChange,
       weightFormatter, // 暴露给模板
+      handleViewNutrientRequirements, // 暴露给模板
       handleEdit,
       handleDelete,
       fetchPigAgeStages, // 将方法暴露出去

src/components/feed/PigNutrientRequirementsDisplay.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="pig-nutrient-requirements-display">
+    <el-table :data="nutrientRequirements" border style="width: 100%">
+      <el-table-column prop="nutrient_name" label="营养素名称"></el-table-column>
+      <el-table-column prop="min_requirement" label="最小需求量"></el-table-column>
+      <el-table-column prop="max_requirement" label="最大需求量"></el-table-column>
+    </el-table>
+    <div v-if="nutrientRequirements.length === 0" class="no-data-message">
+      暂无该品种该年龄阶段的营养需求数据。
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'PigNutrientRequirementsDisplay',
+  props: {
+    nutrientRequirements: {
+      type: Array,
+      default: () => [],
+    },
+    breedName: {
+      type: String,
+      default: '',
+    },
+    ageStageName: {
+      type: String,
+      default: '',
+    },
+  },
+});
+</script>
+
+<style scoped>
+.pig-nutrient-requirements-display {
+  padding: 10px;
+}
+
+.no-data-message {
+  text-align: center;
+  color: #909399;
+  margin-top: 20px;
+}
+</style>