营养管理界面实现

src/components/feed/NutrientTable.vue

@@ -18,8 +18,20 @@
     </div>
 
     <!-- 营养列表 -->
-    <el-table :data="tableData" style="width: 100%" v-loading="loading" row-key="id">
-      <el-table-column prop="id" label="ID" width="80"></el-table-column>
+    <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.raw_materials" border>
+              <el-table-column prop="name" label="原料名称"></el-table-column>
+              <el-table-column prop="value" label="含量"></el-table-column>
+            </el-table>
+          </div>
+        </template>
+      </el-table-column>
+      <!-- 移除 ID 列 -->
       <el-table-column prop="name" label="营养名称"></el-table-column>
       <el-table-column prop="description" label="描述"></el-table-column>
       <el-table-column label="操作" width="180">
@@ -56,6 +68,7 @@ export default {
     const loading = ref(false);
     const searchKeyword = ref('');
     const searchType = ref('name'); // 默认按营养名称搜索
+    const expandRowKeys = ref([]); // 用于控制展开行
 
     const pagination = ref({
       page: 1,
@@ -104,6 +117,26 @@ export default {
       fetchNutrients();
     };
 
+    // 处理行展开/折叠事件
+    const handleExpandChange = async (row, expandedRows) => {
+      const isExpanded = expandedRows.some(r => r.id === row.id);
+      // 优化：仅在展开时且数据未加载时才请求
+      if (isExpanded && (!row.raw_materials || row.raw_materials.length === 0)) {
+        try {
+          const response = await FeedApi.getNutrientById(row.id);
+          if (response.data) {
+            const index = tableData.value.findIndex(item => item.id === row.id);
+            if (index !== -1) {
+              tableData.value[index].raw_materials = response.data.raw_materials;
+            }
+          }
+        } catch (error) {
+          console.error('获取营养详情失败:', error);
+          ElMessage.error('获取营养所含原料失败');
+        }
+      }
+    };
+
     const handleEdit = (row) => {
       emit('edit', row); // 触发 edit 事件，并传递当前行数据
     };
@@ -139,10 +172,12 @@ export default {
       loading,
       searchKeyword,
       searchType,
+      expandRowKeys,
       pagination,
       handleSearch,
       handleSizeChange,
       handleCurrentChange,
+      handleExpandChange,
       handleEdit,
       handleDelete,
       fetchNutrients, // 将方法暴露出去