增加搜索框

src/components/feed/RawMaterialTable.vue

@@ -1,5 +1,21 @@
 <template>
   <div>
+    <!-- 搜索区域 -->
+    <div style="margin-bottom: 20px; display: flex; align-items: center; gap: 10px;">
+      <el-select v-model="searchType" placeholder="请选择搜索类型" style="width: 150px;">
+        <el-option label="按原料名称" value="name"></el-option>
+        <el-option label="按营养名称" value="nutrient_name"></el-option>
+      </el-select>
+      <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">
@@ -48,7 +64,7 @@ export default {
     const tableData = ref([]);
     const loading = ref(false);
     const searchKeyword = ref('');
-    const searchType = ref('rawMaterial');
+    const searchType = ref('name'); // 默认按原料名称搜索
     const expandRowKeys = ref([]);
 
     const pagination = ref({
@@ -60,48 +76,24 @@ export default {
     const fetchRawMaterials = async () => {
       loading.value = true;
       try {
-        let response;
-        if (searchType.value === 'rawMaterial') {
-          response = await FeedApi.getRawMaterials({
-            name: searchKeyword.value,
-            page: pagination.value.page,
-            page_size: pagination.value.page_size,
-          });
-        } else {
-          const nutrientResponse = await FeedApi.getNutrients({
-            name: searchKeyword.value,
-            page: pagination.value.page,
-            page_size: pagination.value.page_size,
-          });
-          // 从营养数据中提取原料
-          const rawMaterials = [];
-          if (nutrientResponse.data && nutrientResponse.data.list) {
-            nutrientResponse.data.list.forEach(nutrient => {
-              if (nutrient.raw_materials) {
-                nutrient.raw_materials.forEach(rm => {
-                  // 避免重复添加
-                  if (!rawMaterials.some(item => item.id === rm.id)) {
-                    rawMaterials.push({
-                      id: rm.id,
-                      name: rm.name,
-                      // 模拟其他字段
-                      description: '通过营养搜索',
-                      raw_material_nutrients: []
-                    });
-                  }
-                });
-              }
-            });
-          }
-           response = { data: { list: rawMaterials, pagination: { total: rawMaterials.length } } };
+        const params = {
+          page: pagination.value.page,
+          page_size: pagination.value.page_size,
+        };
+
+        if (searchKeyword.value) {
+          params[searchType.value] = searchKeyword.value;
         }
 
+        const response = await FeedApi.getRawMaterials(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;
       }
@@ -124,7 +116,8 @@ export default {
 
     const handleExpandChange = async (row, expandedRows) => {
       const isExpanded = expandedRows.some(r => r.id === row.id);
-      if (isExpanded && row.raw_material_nutrients.length === 0) {
+      // 优化：仅在展开时且数据未加载时才请求
+      if (isExpanded && (!row.raw_material_nutrients || row.raw_material_nutrients.length === 0)) {
         try {
           const response = await FeedApi.getRawMaterialById(row.id);
           if (response.data) {
@@ -135,6 +128,7 @@ export default {
           }
         } catch (error) {
           console.error('获取原料详情失败:', error);
+          ElMessage.error('获取原料营养成分失败');
         }
       }
     };