pig/pig-farm-controller-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化展示

Browse Source
This commit is contained in:
huang
2025-12-02 17:11:02 +08:00
parent d97a55a992
commit 1f06688237
1 changed files with 66 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

130
src/components/feed/RecipeDetailDialog.vue
View File

@@ -1,28 +1,28 @@
<template>
<el-dialog
:model-value="visible"
:title="`配方详情: ${recipe ? recipe.name : ''}` + (isEditing ? ' (编辑中)' : '')"
@close="handleClose"
width="70%"
top="5vh"
:model-value="visible"
:title="`配方详情: ${recipe ? recipe.name : ''}` + (isEditing ? ' (编辑中)' : '')"
@close="handleClose"
width="70%"
top="5vh"
>
<div v-if="loading" class="loading-spinner">
<el-skeleton :rows="5" animated />
<el-skeleton :rows="5" animated/>
</div>
<div v-else-if="error" class="error-message">
<el-alert
<el-alert
title="加载配方详情失败"
:description="error"
type="error"
show-icon
@close="error = null"
/>
/>
</div>
<el-tabs v-else v-model="activeTab">
<el-tab-pane label="原料列表" name="ingredients">
<div v-if="!isEditing">
<el-table :data="ingredientDetails" style="width: 100%">
<el-table-column prop="name" label="原料名称" />
<el-table-column prop="name" label="原料名称"/>
<el-table-column prop="percentage" label="占比">
<template #default="scope">
{{ scope.row.percentage.toFixed(2) }}%
@@ -32,10 +32,11 @@
</div>
<div v-else>
<el-table :data="localIngredientDetails" style="width: 100%">
<el-table-column prop="name" label="原料名称" />
<el-table-column prop="name" label="原料名称"/>
<el-table-column label="占比">
<template #default="scope">
<el-input-number v-model="scope.row.percentage" :min="0" :max="100" :step="1" :precision="2" @change="updateNutrientSummary"></el-input-number>
<el-input-number v-model="scope.row.percentage" :min="0" :max="100" :step="1" :precision="2"
@change="updateNutrientSummary"></el-input-number>
</template>
</el-table-column>
<el-table-column label="操作">
@@ -46,7 +47,8 @@
</el-table>
<div class="add-ingredient-section">
<el-select v-model="newIngredientId" placeholder="选择要添加的原料" filterable style="flex-grow: 1;">
<el-option v-for="item in availableRawMaterials" :key="item.id" :label="item.name" :value="item.id"></el-option>
<el-option v-for="item in availableRawMaterials" :key="item.id" :label="item.name"
:value="item.id"></el-option>
</el-select>
<el-button type="primary" @click="addIngredient" style="margin-left: 10px;">添加原料</el-button>
</div>
@@ -54,17 +56,18 @@
</el-tab-pane>
<el-tab-pane label="营养成分汇总" name="nutrients">
<el-table :data="nutrientSummary" style="width: 100%" ref="nutrientTableRef">
<el-table-column prop="name" label="营养素名称" />
<el-table-column prop="name" label="营养素名称"/>
<el-table-column prop="value" label="总含量">
<template #default="scope">
<template #default="scope">
{{ scope.row.value.toFixed(2) }}
</template>
</el-table-column>
</el-table>
</el-tab-pane>
</el-tabs>
<template #footer>
<template #footer>
<span class="dialog-footer">
<el-button v-if="!isEditing" @click="openAIReviewDialog">AI点评</el-button>
<el-button v-if="!isEditing" @click="openCompareDialog">对比</el-button>
<el-button v-if="!isEditing" @click="handleEdit">编辑配方</el-button>
<el-button v-else @click="handleCancelEdit">取消</el-button>
@@ -73,19 +76,25 @@
</span>
</template>
<RecipeCompareDialog
v-model:visible="compareDialogVisible"
:current-recipe="recipe"
@close="compareDialogVisible = false"
v-model:visible="compareDialogVisible"
:current-recipe="recipe"
@close="compareDialogVisible = false"
/>
<AIRecipeReviewDialog
v-model:visible="aiReviewDialogVisible"
:recipe="recipe"
@cancel="aiReviewDialogVisible = false"
/>
</el-dialog>
</template>
<script>
import { ref, watch, nextTick, computed } from 'vue';
import { getRawMaterialById, getRawMaterials, updateRecipe, getRecipeById } from '../../api/feed';
import { ElMessage } from 'element-plus';
import { Delete } from '@element-plus/icons-vue';
import RecipeCompareDialog from './RecipeCompareDialog.vue'; // 引入对比组件
import {ref, watch, nextTick, computed} from 'vue';
import {getRawMaterialById, getRawMaterials, updateRecipe, getRecipeById} from '../../api/feed';
import {ElMessage} from 'element-plus';
import {Delete} from '@element-plus/icons-vue';
import RecipeCompareDialog from './RecipeCompareDialog.vue';
import AIRecipeReviewDialog from './AIRecipeReviewDialog.vue';
export default {
name: 'RecipeDetailDialog',
@@ -96,19 +105,20 @@ export default {
default: () => null,
},
},
emits: ['update:visible', 'recipe-updated'], // 添加 recipe-updated 事件
setup(props, { emit }) {
const isEditing = ref(false); // 控制是否处于编辑模式
emits: ['update:visible', 'recipe-updated'],
setup(props, {emit}) {
const isEditing = ref(false);
const activeTab = ref('ingredients');
const loading = ref(false);
const error = ref(null);
const ingredientDetails = ref([]); // 显示模式下的原料详情
const localIngredientDetails = ref([]); // 编辑模式下的原料详情
const ingredientDetails = ref([]);
const localIngredientDetails = ref([]);
const nutrientSummary = ref([]);
const nutrientTableRef = ref(null);
const allRawMaterials = ref([]); // 所有可用原料列表
const newIngredientId = ref(null); // 待添加的新原料ID
const compareDialogVisible = ref(false); // 控制对比对话框的显示
const allRawMaterials = ref([]);
const newIngredientId = ref(null);
const compareDialogVisible = ref(false);
const aiReviewDialogVisible = ref(false);
const handleClose = () => {
emit('update:visible', false);
@@ -118,12 +128,16 @@ export default {
compareDialogVisible.value = true;
};
const openAIReviewDialog = () => {
aiReviewDialogVisible.value = true;
};
const calculateNutrientSummary = (ingredients) => {
const summary = new Map();
ingredients.forEach(ing => {
if (ing.raw_material_nutrients) {
ing.raw_material_nutrients.forEach(nutrient => {
const contribution = nutrient.value * (ing.percentage / 100); // 修正：计算时需要将百分比转换为小数
const contribution = nutrient.value * (ing.percentage / 100);
if (summary.has(nutrient.nutrient_name)) {
summary.set(nutrient.nutrient_name, summary.get(nutrient.nutrient_name) + contribution);
} else {
@@ -132,19 +146,14 @@ export default {
});
}
});
return Array.from(summary, ([name, value]) => ({ name, value }));
return Array.from(summary, ([name, value]) => ({name, value}));
};
// 计算属性，用于过滤掉已经存在的原料
const availableRawMaterials = computed(() => {
const existingIngredientIds = new Set(localIngredientDetails.value.map(ing => ing.id));
return allRawMaterials.value.filter(material => !existingIngredientIds.has(material.id));
});
/**
* 获取并设置配方详情数据
* @param {number} recipeId - 配方ID
*/
const fetchAndSetRecipeDetails = async (recipeId) => {
loading.value = true;
error.value = null;
@@ -160,8 +169,8 @@ export default {
percentage: latestRecipe.recipe_ingredients[index].percentage,
}));
ingredientDetails.value = details; // 用于显示模式
localIngredientDetails.value = JSON.parse(JSON.stringify(details)); // 用于编辑模式，深拷贝
ingredientDetails.value = details;
localIngredientDetails.value = JSON.parse(JSON.stringify(details));
nutrientSummary.value = calculateNutrientSummary(details);
@@ -177,12 +186,11 @@ export default {
if (newVal && props.recipe) {
await fetchAndSetRecipeDetails(props.recipe.id);
} else {
// 重置数据
ingredientDetails.value = [];
localIngredientDetails.value = [];
nutrientSummary.value = [];
activeTab.value = 'ingredients';
isEditing.value = false; // 关闭对话框时重置编辑状态
isEditing.value = false;
}
});
@@ -196,17 +204,14 @@ export default {
}
});
// 实时更新营养成分汇总
const updateNutrientSummary = () => {
nutrientSummary.value = calculateNutrientSummary(localIngredientDetails.value);
};
// 进入编辑模式
const handleEdit = async () => {
isEditing.value = true;
// 获取所有原料列表
try {
const response = await getRawMaterials({ page_size: 999 });
const response = await getRawMaterials({page_size: 999});
if (response.data && response.data.list) {
allRawMaterials.value = response.data.list;
}
@@ -215,29 +220,24 @@ export default {
}
};
// 取消编辑
const handleCancelEdit = () => {
isEditing.value = false;
// 恢复到原始数据
localIngredientDetails.value = JSON.parse(JSON.stringify(ingredientDetails.value));
updateNutrientSummary(); // 重新计算营养成分
updateNutrientSummary();
};
// 保存配方
const handleSaveRecipe = async () => {
// 验证占比总和是否不超过100
const totalPercentage = localIngredientDetails.value.reduce((sum, ing) => sum + ing.percentage, 0);
if (totalPercentage > 100.001) { // 允许浮点数误差
if (totalPercentage > 100.001) {
ElMessage.error(`原料总占比不能超过100%，当前为${totalPercentage.toFixed(2)}%`);
return;
}
// 构造保存数据
const recipeToSave = {
id: props.recipe.id,
name: props.recipe.name, // 名称不变
description: props.recipe.description, // 描述不变
name: props.recipe.name,
description: props.recipe.description,
recipe_ingredients: localIngredientDetails.value.map(ing => ({
raw_material_id: ing.id,
percentage: ing.percentage,
@@ -248,21 +248,18 @@ export default {
await updateRecipe(recipeToSave.id, recipeToSave);
ElMessage.success('配方更新成功');
isEditing.value = false;
emit('recipe-updated'); // 通知父组件配方已更新
// 重新加载配方详情以刷新显示
emit('recipe-updated');
await fetchAndSetRecipeDetails(props.recipe.id);
} catch (err) {
ElMessage.error('保存配方失败: ' + (err.message || '未知错误'));
}
};
// 移除原料
const removeIngredient = (index) => {
localIngredientDetails.value.splice(index, 1);
updateNutrientSummary();
};
// 添加原料
const addIngredient = () => {
if (!newIngredientId.value) {
ElMessage.warning('请选择要添加的原料');
@@ -270,7 +267,7 @@ export default {
}
const materialToAdd = allRawMaterials.value.find(m => m.id === newIngredientId.value);
if (materialToAdd && !localIngredientDetails.value.some(ing => ing.id === materialToAdd.id)) {
localIngredientDetails.value.push({ ...materialToAdd, percentage: 0 }); // 默认占比0
localIngredientDetails.value.push({...materialToAdd, percentage: 0});
newIngredientId.value = null;
updateNutrientSummary();
} else if (localIngredientDetails.value.some(ing => ing.id === materialToAdd.id)) {
@@ -296,14 +293,17 @@ export default {
availableRawMaterials,
newIngredientId,
updateNutrientSummary,
Delete, // 暴露 Delete 图标组件
compareDialogVisible, // 暴露对比对话框的可见性
openCompareDialog, // 暴露打开对比对话框的方法
Delete,
compareDialogVisible,
openCompareDialog,
aiReviewDialogVisible,
openAIReviewDialog,
};
},
components: {
Delete,
RecipeCompareDialog, // 注册对比组件
RecipeCompareDialog,
AIRecipeReviewDialog,
}
};
</script>
@@ -313,9 +313,11 @@ export default {
padding: 20px;
text-align: center;
}
.dialog-footer {
text-align: right;
}
.add-ingredient-section {
margin-top: 20px;
display: flex;