展示营养需求

src/components/feed/PigBreedTable.vue

@@ -59,6 +59,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>
@@ -83,6 +89,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>
 
@@ -90,16 +111,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: 'PigBreedTable',
   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,
@@ -180,6 +211,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 事件，并传递当前行数据
     };
@@ -216,11 +255,16 @@ export default {
       searchKeyword,
       expandRowKeys,
       pagination,
+      showNutrientDialog,
+      currentNutrientRequirements,
+      currentBreedName,
+      currentAgeStageName,
       handleSearch,
       handleSizeChange,
       handleCurrentChange,
       handleExpandChange,
       weightFormatter, // 暴露给模板
+      handleViewNutrientRequirements, // 暴露给模板
       handleEdit,
       handleDelete,
       fetchPigBreeds, // 将方法暴露出去