优化展示

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,17 +129,23 @@ export default {
       return allRawMaterials.value.filter(material => !existingIngredientIds.has(material.id));
     });
 
-    watch(() => props.visible, async (newVal) => {
+    /**
-      if (newVal && props.recipe) {
+     * 获取并设置配方详情数据
+     * @param {number} recipeId - 配方ID
+     */
+    const fetchAndSetRecipeDetails = async (recipeId) => {
       loading.value = true;
       error.value = null;
       try {
-          const rawMaterialPromises = props.recipe.recipe_ingredients.map(ing => getRawMaterialById(ing.raw_material_id));
+        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: props.recipe.recipe_ingredients[index].percentage,
+          percentage: latestRecipe.recipe_ingredients[index].percentage,
         }));
 
         ingredientDetails.value = details; // 用于显示模式
@@ -153,6 +159,11 @@ export default {
       } finally {
         loading.value = false;
       }
+    };
+
+    watch(() => props.visible, async (newVal) => {
+      if (newVal && props.recipe) {
+        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 || '未知错误'));
       }