From 018f736d2e935e357ee3ffb3958a91c0b7624f20 Mon Sep 17 00:00:00 2001
From: huang <1724659546@qq.com>
Date: Mon, 24 Nov 2025 15:14:54 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/feed/RecipeDetailDialog.vue | 59 +++++++++++++---------
 1 file changed, 36 insertions(+), 23 deletions(-)

diff --git a/src/components/feed/RecipeDetailDialog.vue b/src/components/feed/RecipeDetailDialog.vue
index 9de7c550..fae313d9 100644
--- a/src/components/feed/RecipeDetailDialog.vue
+++ b/src/components/feed/RecipeDetailDialog.vue
@@ -76,7 +76,7 @@
 
 <script>
 import { ref, watch, nextTick, computed } from 'vue';
-import { getRawMaterialById, getRawMaterials, updateRecipe } from '../../api/feed';
+import { getRawMaterialById, getRawMaterials, updateRecipe, getRecipeById } from '../../api/feed';
 import { ElMessage } from 'element-plus';
 import { Delete } from '@element-plus/icons-vue';
 
@@ -129,30 +129,41 @@ export default {
       return allRawMaterials.value.filter(material => !existingIngredientIds.has(material.id));
     });
 
+    /**
+     * 获取并设置配方详情数据
+     * @param {number} recipeId - 配方ID
+     */
+    const fetchAndSetRecipeDetails = async (recipeId) => {
+      loading.value = true;
+      error.value = null;
+      try {
+        const recipeResponse = await getRecipeById(recipeId);
+        const latestRecipe = recipeResponse.data;
+
+        const rawMaterialPromises = latestRecipe.recipe_ingredients.map(ing => getRawMaterialById(ing.raw_material_id));
+        const rawMaterialResponses = await Promise.all(rawMaterialPromises);
+
+        const details = rawMaterialResponses.map((res, index) => ({
+          ...res.data,
+          percentage: latestRecipe.recipe_ingredients[index].percentage,
+        }));
+
+        ingredientDetails.value = details; // 用于显示模式
+        localIngredientDetails.value = JSON.parse(JSON.stringify(details)); // 用于编辑模式，深拷贝
+
+        nutrientSummary.value = calculateNutrientSummary(details);
+
+      } catch (err) {
+        console.error("加载配方详情失败:", err);
+        error.value = err.message || '未知错误';
+      } finally {
+        loading.value = false;
+      }
+    };
+
     watch(() => props.visible, async (newVal) => {
       if (newVal && props.recipe) {
-        loading.value = true;
-        error.value = null;
-        try {
-          const rawMaterialPromises = props.recipe.recipe_ingredients.map(ing => getRawMaterialById(ing.raw_material_id));
-          const rawMaterialResponses = await Promise.all(rawMaterialPromises);
-
-          const details = rawMaterialResponses.map((res, index) => ({
-            ...res.data,
-            percentage: props.recipe.recipe_ingredients[index].percentage,
-          }));
-
-          ingredientDetails.value = details; // 用于显示模式
-          localIngredientDetails.value = JSON.parse(JSON.stringify(details)); // 用于编辑模式，深拷贝
-
-          nutrientSummary.value = calculateNutrientSummary(details);
-
-        } catch (err) {
-          console.error("加载配方详情失败:", err);
-          error.value = err.message || '未知错误';
-        } finally {
-          loading.value = false;
-        }
+        await fetchAndSetRecipeDetails(props.recipe.id);
       } else {
         // 重置数据
         ingredientDetails.value = [];
@@ -226,6 +237,8 @@ export default {
         ElMessage.success('配方更新成功');
         isEditing.value = false;
         emit('recipe-updated'); // 通知父组件配方已更新
+        // 重新加载配方详情以刷新显示
+        await fetchAndSetRecipeDetails(props.recipe.id);
       } catch (err) {
         ElMessage.error('保存配方失败: ' + (err.message || '未知错误'));
       }