2025-08-11_03-12Z-发送营养产品信息给rightcard.md 75 KB

发送营养产品信息给RightCard (2025-08-11 03:12Z)

User

@/views @/patients @/enteralNutrition 将营养产品的列表信息和从后端拿到的全部营养产品信息一并发给RightCard,然后微量元素的所有计算信息来自于所选中的营养产品中所拥有对应的微量元素信息的总和


Assistant

我需要了解当前的肠内营养管理系统架构,然后修改代码将营养产品列表信息和完整的后端营养产品数据传递给RightCard组件,并基于选中的营养产品计算微量元素总和。


Todo List

  • [-] 分析当前肠内营养系统的组件结构和数据流
  • 检查父组件如何传递营养产品数据
  • 查看后端API如何获取完整营养产品信息
  • 修改RightCard组件的props接口以接收完整数据
  • 更新微量元素计算逻辑基于选中产品的数据
  • 修改父组件传递完整数据给RightCard

Read file: src/views/patients/enteralNutrition/index.vue


Read file: src/views/patients/enteralNutrition/components/LeftCard.vue



Read file: src/api/warehouse/productNutrition/types.ts


Todo List

  • 分析当前肠内营养系统的组件结构和数据流
  • 检查父组件如何传递营养产品数据
  • 查看后端API如何获取完整营养产品信息
  • 修改RightCard组件的props接口以接收完整数据
  • 更新微量元素计算逻辑基于选中产品的数据
  • 修改父组件传递完整数据给RightCard

现在我已经了解了当前的系统架构。我发现:

  1. 数据流向:LeftCard获取完整的营养产品列表 -> 通过emitNutritionProductsChange传递给父组件 -> 父组件再传递给RightCard
  2. 完整数据:LeftCard已经有nutritionProductsList包含所有后端产品信息,并且已经在createProductInfo函数中整合了完整数据
  3. 当前问题:RightCard只收到了选中的营养产品信息,但需要同时接收完整的营养产品基础列表进行更准确的计算

让我修改代码以传递完整的数据给RightCard:


Todo List

  • 分析当前肠内营养系统的组件结构和数据流
  • 检查父组件如何传递营养产品数据
  • 查看后端API如何获取完整营养产品信息
  • [-] 修改RightCard组件的props接口以接收完整数据
  • 更新微量元素计算逻辑基于选中产品的数据
  • 修改父组件传递完整数据给RightCard

Edit file: src/views/patients/enteralNutrition/index.vue 修改父组件以传递完整营养产品列表给RightCard组件 **Chunk 1** Lines added: 1, lines removed: 1 ```diff @@ -6,5 +6,5 @@ @nutritionProductsChange="handleNutritionProductsChange" /> - +
```
Edit file: src/views/patients/enteralNutrition/index.vue 添加allNutritionProducts响应式变量用于存储完整的营养产品列表 **Chunk 1** Lines added: 80, lines removed: undefined ```diff @@ -102,4 +102,84 @@ moisture?: number // 水分 }>>([]); + + // 完整的营养产品基础数据列表(从后端获取的所有营养产品信息) + const allNutritionProducts = ref>([]); const goHistoryPrescription = () => { ```

现在我需要修改LeftCard组件,让它不仅传递选中的营养产品,还要传递完整的营养产品列表:


Edit file: src/views/patients/enteralNutrition/components/LeftCard.vue 修改emit事件,同时传递选中的营养产品和完整的营养产品列表 **Chunk 1** Lines added: 1, lines removed: 1 ```diff @@ -97,5 +97,5 @@ const { proxy } = getCurrentInstance() as ComponentInternalInstance; - const emit = defineEmits(['gotoTop', 'nutritionProductsChange']); + const emit = defineEmits(['gotoTop', 'nutritionProductsChange', 'allNutritionProductsChange']); const buttonLoading = ref(false); const { patientInfo } = defineProps<{ patientInfo: any }>(); ```

我看到有linter错误,但这些错误与我们要解决的任务无关,它们是TypeScript配置问题。继续修改LeftCard的emitNutritionProductsChange函数:


Edit file: src/views/patients/enteralNutrition/components/LeftCard.vue 在emitNutritionProductsChange函数最后添加发送完整营养产品列表的逻辑 **Chunk 1** Lines added: 4, lines removed: undefined ```diff @@ -434,7 +434,11 @@ console.log('LeftCard收集到的营养产品:', products); emit('nutritionProductsChange', products); + + // 同时发送完整的营养产品基础列表给父组件 + emit('allNutritionProductsChange', nutritionProductsList.value); } catch (error) { console.error('收集营养产品数据失败:', error); emit('nutritionProductsChange', []); + emit('allNutritionProductsChange', []); } }; ```

现在修改父组件处理这个新的事件:


Edit file: src/views/patients/enteralNutrition/index.vue 添加处理完整营养产品列表的事件监听器和处理函数 **Chunk 1** Lines added: 2, lines removed: 1 ```diff @@ -4,5 +4,6 @@ + @nutritionProductsChange="handleNutritionProductsChange" + @allNutritionProductsChange="handleAllNutritionProductsChange" /> ``` **Chunk 2** Lines added: 83, lines removed: undefined ```diff @@ -272,4 +273,87 @@ console.log('父组件接收到营养产品变化:', products); }; + + // 处理完整营养产品列表变化 + const handleAllNutritionProductsChange = (products: Array<{ + id?: string | number, + productName?: string, + productCode?: string, + protein?: number, + fat?: number, + carbohydrate?: number, + calorie?: number, + // 微量元素信息 + ca?: number, // 钙 + p?: number, // 磷 + k?: number, // 钾 + na?: number, // 钠 + mg?: number, // 镁 + cl?: number, // 氯 + fe?: number, // 铁 + zn?: number, // 锌 + se?: number, // 硒 + cu?: number, // 铜 + mn?: number, // 锰 + i?: number, // 碘 + f?: number, // 氟 + cr?: number, // 铬 + mo?: number, // 钼 + // 氨基酸信息 + isoleucine?: number, // 异亮氨酸 + tryptophan?: number, // 色氨酸 + sulfurAminoAcid?: string | number, // 含硫氨基酸 + histidine?: string | number, // 组氨酸 + aromaticAminoAcid?: string | number, // 芳香族氨基酸 + glutamicAcid?: string | number, // 谷氨酸 + threonine?: number, // 苏氨酸 + serine?: number, // 丝氨酸 + arginine?: number, // 精氨酸 + lysine?: number, // 赖氨酸 + asparticAcid?: string | number, // 天冬氨酸 + cysteine?: number, // 胱氨酸 + proline?: number, // 脯氨酸 + tyrosine?: number, // 酪氨酸 + leucine?: number, // 亮氨酸 + valine?: number, // 缬氨酸 + methionine?: number, // 蛋氨酸 + alanine?: number, // 丙氨酸 + phenylalanine?: number, // 苯丙氨酸 + glycine?: number, // 甘氨酸 + // 脂肪酸信息 + fattyAcid?: string | number, // 脂肪酸 + saturatedFattyAcid?: string | number, // 饱和脂肪酸 + monounsaturatedFattyAcid?: string | number, // 单不饱和脂肪酸 + polyunsaturatedFattyAcid?: string | number, // 多不饱和脂肪酸 + // 维生素信息 + vitaminA?: number, // 维生素A + vitaminACarotene?: number, // 维生素A(胡萝卜素) + vitaminAAlcohol?: number, // 维生素A醇 + vitaminD?: number, // 维生素D + vitaminE?: number, // 维生素E + vitaminETocopherol?: number, // 维生素E(生育酚) + vitaminK?: number, // 维生素K + vitaminBOne?: number, // 维生素B1 + vitaminBTwo?: number, // 维生素B2 + vitaminBSix?: number, // 维生素B6 + vitaminBTwelve?: number, // 维生素B12 + niacin?: number, // 烟酸(尼克酸) + vitaminC?: number, // 维生素C + folicAcid?: string | number, // 叶酸 + choline?: number, // 胆碱 + biotin?: number, // 生物素 + pantothenicAcid?: string | number, // 泛酸 + // 其他营养信息 + cholesterol?: number, // 胆固醇 + bloodGlucoseIndex?: number, // 血糖生成指数 + insolubleDietaryFiber?: number, // 不可溶性膳食纤维 + dietaryFiber?: number, // 膳食纤维 + ash?: number, // 灰分 + solubleDietaryFiber?: number, // 可溶性膳食纤维 + osmoticPressure?: number, // 渗透压 + moisture?: number // 水分 + }>) => { + allNutritionProducts.value = products; + console.log('父组件接收到完整营养产品列表变化:', products); + };
```

现在修改RightCard组件的props接口以接收完整的营养产品列表:


Todo List

  • 分析当前肠内营养系统的组件结构和数据流
  • 检查父组件如何传递营养产品数据
  • 查看后端API如何获取完整营养产品信息
  • 修改RightCard组件的props接口以接收完整数据
  • [-] 更新微量元素计算逻辑基于选中产品的数据
  • 修改父组件传递完整数据给RightCard

Edit file: src/views/patients/enteralNutrition/components/RightCard.vue 修改props定义添加allNutritionProducts属性以接收完整的营养产品基础列表 **Chunk 1** Lines added: 78, lines removed: undefined ```diff @@ -161,4 +161,82 @@ moisture?: number // 水分 }> + allNutritionProducts?: Array<{ + id?: string | number, + productName?: string, + productCode?: string, + protein?: number, + fat?: number, + carbohydrate?: number, + calorie?: number, + // 微量元素信息 + ca?: number, // 钙 + p?: number, // 磷 + k?: number, // 钾 + na?: number, // 钠 + mg?: number, // 镁 + cl?: number, // 氯 + fe?: number, // 铁 + zn?: number, // 锌 + se?: number, // 硒 + cu?: number, // 铜 + mn?: number, // 锰 + i?: number, // 碘 + f?: number, // 氟 + cr?: number, // 铬 + mo?: number, // 钼 + // 氨基酸信息 + isoleucine?: number, // 异亮氨酸 + tryptophan?: number, // 色氨酸 + sulfurAminoAcid?: string | number, // 含硫氨基酸 + histidine?: string | number, // 组氨酸 + aromaticAminoAcid?: string | number, // 芳香族氨基酸 + glutamicAcid?: string | number, // 谷氨酸 + threonine?: number, // 苏氨酸 + serine?: number, // 丝氨酸 + arginine?: number, // 精氨酸 + lysine?: number, // 赖氨酸 + asparticAcid?: string | number, // 天冬氨酸 + cysteine?: number, // 胱氨酸 + proline?: number, // 脯氨酸 + tyrosine?: number, // 酪氨酸 + leucine?: number, // 亮氨酸 + valine?: number, // 缬氨酸 + methionine?: number, // 蛋氨酸 + alanine?: number, // 丙氨酸 + phenylalanine?: number, // 苯丙氨酸 + glycine?: number, // 甘氨酸 + // 脂肪酸信息 + fattyAcid?: string | number, // 脂肪酸 + saturatedFattyAcid?: string | number, // 饱和脂肪酸 + monounsaturatedFattyAcid?: string | number, // 单不饱和脂肪酸 + polyunsaturatedFattyAcid?: string | number, // 多不饱和脂肪酸 + // 维生素信息 + vitaminA?: number, // 维生素A + vitaminACarotene?: number, // 维生素A(胡萝卜素) + vitaminAAlcohol?: number, // 维生素A醇 + vitaminD?: number, // 维生素D + vitaminE?: number, // 维生素E + vitaminETocopherol?: number, // 维生素E(生育酚) + vitaminK?: number, // 维生素K + vitaminBOne?: number, // 维生素B1 + vitaminBTwo?: number, // 维生素B2 + vitaminBSix?: number, // 维生素B6 + vitaminBTwelve?: number, // 维生素B12 + niacin?: number, // 烟酸(尼克酸) + vitaminC?: number, // 维生素C + folicAcid?: string | number, // 叶酸 + choline?: number, // 胆碱 + biotin?: number, // 生物素 + pantothenicAcid?: string | number, // 泛酸 + // 其他营养信息 + cholesterol?: number, // 胆固醇 + bloodGlucoseIndex?: number, // 血糖生成指数 + insolubleDietaryFiber?: number, // 不可溶性膳食纤维 + dietaryFiber?: number, // 膳食纤维 + ash?: number, // 灰分 + solubleDietaryFiber?: number, // 可溶性膳食纤维 + osmoticPressure?: number, // 渗透压 + moisture?: number // 水分 + }> }>(); ```

现在我需要创建一个辅助函数,用于根据产品ID从完整列表中获取详细营养信息,并优化微量元素计算逻辑:


Edit file: src/views/patients/enteralNutrition/components/RightCard.vue 添加根据产品ID从完整营养产品列表中获取详细信息的辅助函数 **Chunk 1** Lines added: 36, lines removed: undefined ```diff @@ -649,4 +649,40 @@ console.log("RightCard接收到营养产品更新:", newProducts); }, { immediate: true }); + + // 监听完整营养产品列表变化 + watch(() => props.allNutritionProducts, (newAllProducts) => { + console.log("RightCard接收到完整营养产品列表更新:", newAllProducts); + }, { immediate: true }); + + // 根据产品ID从完整营养产品列表中获取详细营养信息 + const getNutritionDetailsFromAll = (productId: string | number): any => { + console.log('=== getNutritionDetailsFromAll 开始 ==='); + console.log('查找产品ID:', productId); + console.log('完整营养产品列表长度:', props.allNutritionProducts?.length || 0); + + if (!productId || !props.allNutritionProducts || props.allNutritionProducts.length === 0) { + console.log('产品ID为空或完整营养产品列表为空'); + return null; + } + + // 在完整营养产品列表中查找对应的产品 + const foundProduct = props.allNutritionProducts.find(product => { + // 可能的匹配方式:直接ID匹配、字符串ID匹配、产品编码匹配 + const match = product.id === productId || + product.id === productId.toString() || + product.productCode === productId; + + if (match) { + console.log('找到匹配的产品:', product); + } + + return match; + }); + + console.log('查找结果:', foundProduct ? '找到产品' : '未找到产品'); + console.log('=== getNutritionDetailsFromAll 结束 ==='); + + return foundProduct || null; + }; // 计算营养成分总量和百分比 ```

现在更新productData计算逻辑,使用新的辅助函数从完整营养产品列表中获取准确的微量元素信息:


Edit file: src/views/patients/enteralNutrition/components/RightCard.vue 更新productData计算逻辑,优先使用完整营养产品列表中的微量元素数据进行计算 **Chunk 1** Lines added: 207, lines removed: 69 ```diff @@ -477,96 +477,234 @@ console.log('产品详细信息:', product); console.log('dosePerTime:', dosePerTime, 'quantity:', quantity, 'multiplier:', multiplier); + + // 优先从完整营养产品列表中获取详细营养信息 + const detailedNutrition = getNutritionDetailsFromAll(product.id); + console.log('从完整列表获取的详细营养信息:', detailedNutrition); if (multiplier > 0) { console.log('开始计算微量元素...'); + + // 获取营养素数据:优先使用完整列表中的数据,其次使用产品自带的数据 + const getNutrientValue = (nutrientName: string) => { + const detailedValue = detailedNutrition?.[nutrientName]; + const productValue = product[nutrientName]; + const finalValue = detailedValue !== undefined && detailedValue !== null ? detailedValue : productValue; + + if (detailedValue !== undefined && detailedValue !== null && productValue !== undefined && productValue !== null) { + console.log(`${nutrientName}: 使用完整列表数据 ${detailedValue} (产品数据: ${productValue})`); + } else if (detailedValue !== undefined && detailedValue !== null) { + console.log(`${nutrientName}: 使用完整列表数据 ${detailedValue}`); + } else if (productValue !== undefined && productValue !== null) { + console.log(`${nutrientName}: 使用产品数据 ${productValue}`); + } + + return finalValue || 0; + }; // 维生素类 - if (product.vitaminA) { + const vitaminA = getNutrientValue('vitaminA'); + if (vitaminA) { const oldValue = totals.vitaminA; - totals.vitaminA += (product.vitaminA / 100) * multiplier; - console.log(`维生素A: ${oldValue} + (${product.vitaminA}/100) * ${multiplier} = ${totals.vitaminA}`); + totals.vitaminA += (vitaminA / 100) * multiplier; + console.log(`维生素A: ${oldValue} + (${vitaminA}/100) * ${multiplier} = ${totals.vitaminA}`); } - if (product.vitaminACarotene) totals.vitaminACarotene += (product.vitaminACarotene / 100) * multiplier; - if (product.vitaminAAlcohol) totals.vitaminAAlcohol += (product.vitaminAAlcohol / 100) * multiplier; - if (product.vitaminD) totals.vitaminD += (product.vitaminD / 100) * multiplier; - if (product.vitaminE) totals.vitaminE += (product.vitaminE / 100) * multiplier; - if (product.vitaminETocopherol) totals.vitaminETocopherol += (product.vitaminETocopherol / 100) * multiplier; - if (product.vitaminK) totals.vitaminK += (product.vitaminK / 100) * multiplier; - if (product.vitaminBOne) totals.vitaminBOne += (product.vitaminBOne / 100) * multiplier; - if (product.vitaminBTwo) totals.vitaminBTwo += (product.vitaminBTwo / 100) * multiplier; - if (product.vitaminBSix) totals.vitaminBSix += (product.vitaminBSix / 100) * multiplier; - if (product.vitaminBTwelve) totals.vitaminBTwelve += (product.vitaminBTwelve / 100) * multiplier; - if (product.niacin) totals.niacin += (product.niacin / 100) * multiplier; - if (product.vitaminC) { + + // 其他维生素 + const vitaminACarotene = getNutrientValue('vitaminACarotene'); + if (vitaminACarotene) totals.vitaminACarotene += (vitaminACarotene / 100) * multiplier; + + const vitaminAAlcohol = getNutrientValue('vitaminAAlcohol'); + if (vitaminAAlcohol) totals.vitaminAAlcohol += (vitaminAAlcohol / 100) * multiplier; + + const vitaminD = getNutrientValue('vitaminD'); + if (vitaminD) totals.vitaminD += (vitaminD / 100) * multiplier; + + const vitaminE = getNutrientValue('vitaminE'); + if (vitaminE) totals.vitaminE += (vitaminE / 100) * multiplier; + + const vitaminETocopherol = getNutrientValue('vitaminETocopherol'); + if (vitaminETocopherol) totals.vitaminETocopherol += (vitaminETocopherol / 100) * multiplier; + + const vitaminK = getNutrientValue('vitaminK'); + if (vitaminK) totals.vitaminK += (vitaminK / 100) * multiplier; + + const vitaminBOne = getNutrientValue('vitaminBOne'); + if (vitaminBOne) totals.vitaminBOne += (vitaminBOne / 100) * multiplier; + + const vitaminBTwo = getNutrientValue('vitaminBTwo'); + if (vitaminBTwo) totals.vitaminBTwo += (vitaminBTwo / 100) * multiplier; + + const vitaminBSix = getNutrientValue('vitaminBSix'); + if (vitaminBSix) totals.vitaminBSix += (vitaminBSix / 100) * multiplier; + + const vitaminBTwelve = getNutrientValue('vitaminBTwelve'); + if (vitaminBTwelve) totals.vitaminBTwelve += (vitaminBTwelve / 100) * multiplier; + + const niacin = getNutrientValue('niacin'); + if (niacin) totals.niacin += (niacin / 100) * multiplier; + + const vitaminC = getNutrientValue('vitaminC'); + if (vitaminC) { const oldValue = totals.vitaminC; - totals.vitaminC += (product.vitaminC / 100) * multiplier; - console.log(`维生素C: ${oldValue} + (${product.vitaminC}/100) * ${multiplier} = ${totals.vitaminC}`); + totals.vitaminC += (vitaminC / 100) * multiplier; + console.log(`维生素C: ${oldValue} + (${vitaminC}/100) * ${multiplier} = ${totals.vitaminC}`); } - if (product.folicAcid) totals.folicAcid += (Number(product.folicAcid) / 100) * multiplier; - if (product.choline) totals.choline += (product.choline / 100) * multiplier; - if (product.biotin) totals.biotin += (product.biotin / 100) * multiplier; - if (product.pantothenicAcid) totals.pantothenicAcid += (Number(product.pantothenicAcid) / 100) * multiplier; + + const folicAcid = getNutrientValue('folicAcid'); + if (folicAcid) totals.folicAcid += (Number(folicAcid) / 100) * multiplier; + + const choline = getNutrientValue('choline'); + if (choline) totals.choline += (choline / 100) * multiplier; + + const biotin = getNutrientValue('biotin'); + if (biotin) totals.biotin += (biotin / 100) * multiplier; + + const pantothenicAcid = getNutrientValue('pantothenicAcid'); + if (pantothenicAcid) totals.pantothenicAcid += (Number(pantothenicAcid) / 100) * multiplier; // 矿物质类 - if (product.fe) { + const fe = getNutrientValue('fe'); + if (fe) { const oldValue = totals.fe; - totals.fe += (product.fe / 100) * multiplier; - console.log(`铁: ${oldValue} + (${product.fe}/100) * ${multiplier} = ${totals.fe}`); + totals.fe += (fe / 100) * multiplier; + console.log(`铁: ${oldValue} + (${fe}/100) * ${multiplier} = ${totals.fe}`); } - if (product.zn) totals.zn += (product.zn / 100) * multiplier; - if (product.se) totals.se += (product.se / 100) * multiplier; - if (product.cu) totals.cu += (product.cu / 100) * multiplier; - if (product.mn) totals.mn += (product.mn / 100) * multiplier; - if (product.i) totals.i += (product.i / 100) * multiplier; - if (product.f) totals.f += (product.f / 100) * multiplier; - if (product.cr) totals.cr += (product.cr / 100) * multiplier; - if (product.mo) totals.mo += (product.mo / 100) * multiplier; - if (product.ca) { + + const zn = getNutrientValue('zn'); + if (zn) totals.zn += (zn / 100) * multiplier; + + const se = getNutrientValue('se'); + if (se) totals.se += (se / 100) * multiplier; + + const cu = getNutrientValue('cu'); + if (cu) totals.cu += (cu / 100) * multiplier; + + const mn = getNutrientValue('mn'); + if (mn) totals.mn += (mn / 100) * multiplier; + + const i = getNutrientValue('i'); + if (i) totals.i += (i / 100) * multiplier; + + const f = getNutrientValue('f'); + if (f) totals.f += (f / 100) * multiplier; + + const cr = getNutrientValue('cr'); + if (cr) totals.cr += (cr / 100) * multiplier; + + const mo = getNutrientValue('mo'); + if (mo) totals.mo += (mo / 100) * multiplier; + + const ca = getNutrientValue('ca'); + if (ca) { const oldValue = totals.ca; - totals.ca += (product.ca / 100) * multiplier; - console.log(`钙: ${oldValue} + (${product.ca}/100) * ${multiplier} = ${totals.ca}`); + totals.ca += (ca / 100) * multiplier; + console.log(`钙: ${oldValue} + (${ca}/100) * ${multiplier} = ${totals.ca}`); } - if (product.p) totals.p += (product.p / 100) * multiplier; - if (product.k) totals.k += (product.k / 100) * multiplier; - if (product.na) totals.na += (product.na / 100) * multiplier; - if (product.mg) totals.mg += (product.mg / 100) * multiplier; - if (product.cl) totals.cl += (product.cl / 100) * multiplier; + + const p = getNutrientValue('p'); + if (p) totals.p += (p / 100) * multiplier; + + const k = getNutrientValue('k'); + if (k) totals.k += (k / 100) * multiplier; + + const na = getNutrientValue('na'); + if (na) totals.na += (na / 100) * multiplier; + + const mg = getNutrientValue('mg'); + if (mg) totals.mg += (mg / 100) * multiplier; + + const cl = getNutrientValue('cl'); + if (cl) totals.cl += (cl / 100) * multiplier; // 其他类 - if (product.cholesterol) totals.cholesterol += (product.cholesterol / 100) * multiplier; + const cholesterol = getNutrientValue('cholesterol'); + if (cholesterol) totals.cholesterol += (cholesterol / 100) * multiplier; // 氨基酸类 - if (product.isoleucine) totals.isoleucine += (product.isoleucine / 100) * multiplier; - if (product.tryptophan) totals.tryptophan += (product.tryptophan / 100) * multiplier; - if (product.sulfurAminoAcid) totals.sulfurAminoAcid += (Number(product.sulfurAminoAcid) / 100) * multiplier; - if (product.histidine) totals.histidine += (Number(product.histidine) / 100) * multiplier; - if (product.aromaticAminoAcid) totals.aromaticAminoAcid += (Number(product.aromaticAminoAcid) / 100) * multiplier; - if (product.glutamicAcid) totals.glutamicAcid += (Number(product.glutamicAcid) / 100) * multiplier; - if (product.threonine) totals.threonine += (product.threonine / 100) * multiplier; - if (product.serine) totals.serine += (product.serine / 100) * multiplier; - if (product.arginine) totals.arginine += (product.arginine / 100) * multiplier; - if (product.lysine) totals.lysine += (product.lysine / 100) * multiplier; - if (product.asparticAcid) totals.asparticAcid += (Number(product.asparticAcid) / 100) * multiplier; - if (product.cysteine) totals.cysteine += (product.cysteine / 100) * multiplier; - if (product.proline) totals.proline += (product.proline / 100) * multiplier; - if (product.tyrosine) totals.tyrosine += (product.tyrosine / 100) * multiplier; - if (product.leucine) totals.leucine += (product.leucine / 100) * multiplier; - if (product.valine) totals.valine += (product.valine / 100) * multiplier; - if (product.methionine) totals.methionine += (product.methionine / 100) * multiplier; - if (product.alanine) totals.alanine += (product.alanine / 100) * multiplier; - if (product.phenylalanine) totals.phenylalanine += (product.phenylalanine / 100) * multiplier; - if (product.glycine) totals.glycine += (product.glycine / 100) * multiplier; + const isoleucine = getNutrientValue('isoleucine'); + if (isoleucine) totals.isoleucine += (isoleucine / 100) * multiplier; + + const tryptophan = getNutrientValue('tryptophan'); + if (tryptophan) totals.tryptophan += (tryptophan / 100) * multiplier; + + const sulfurAminoAcid = getNutrientValue('sulfurAminoAcid'); + if (sulfurAminoAcid) totals.sulfurAminoAcid += (Number(sulfurAminoAcid) / 100) * multiplier; + + const histidine = getNutrientValue('histidine'); + if (histidine) totals.histidine += (Number(histidine) / 100) * multiplier; + + const aromaticAminoAcid = getNutrientValue('aromaticAminoAcid'); + if (aromaticAminoAcid) totals.aromaticAminoAcid += (Number(aromaticAminoAcid) / 100) * multiplier; + + const glutamicAcid = getNutrientValue('glutamicAcid'); + if (glutamicAcid) totals.glutamicAcid += (Number(glutamicAcid) / 100) * multiplier; + + const threonine = getNutrientValue('threonine'); + if (threonine) totals.threonine += (threonine / 100) * multiplier; + + const serine = getNutrientValue('serine'); + if (serine) totals.serine += (serine / 100) * multiplier; + + const arginine = getNutrientValue('arginine'); + if (arginine) totals.arginine += (arginine / 100) * multiplier; + + const lysine = getNutrientValue('lysine'); + if (lysine) totals.lysine += (lysine / 100) * multiplier; + + const asparticAcid = getNutrientValue('asparticAcid'); + if (asparticAcid) totals.asparticAcid += (Number(asparticAcid) / 100) * multiplier; + + const cysteine = getNutrientValue('cysteine'); + if (cysteine) totals.cysteine += (cysteine / 100) * multiplier; + + const proline = getNutrientValue('proline'); + if (proline) totals.proline += (proline / 100) * multiplier; + + const tyrosine = getNutrientValue('tyrosine'); + if (tyrosine) totals.tyrosine += (tyrosine / 100) * multiplier; + + const leucine = getNutrientValue('leucine'); + if (leucine) totals.leucine += (leucine / 100) * multiplier; + + const valine = getNutrientValue('valine'); + if (valine) totals.valine += (valine / 100) * multiplier; + + const methionine = getNutrientValue('methionine'); + if (methionine) totals.methionine += (methionine / 100) * multiplier; + + const alanine = getNutrientValue('alanine'); + if (alanine) totals.alanine += (alanine / 100) * multiplier; + + const phenylalanine = getNutrientValue('phenylalanine'); + if (phenylalanine) totals.phenylalanine += (phenylalanine / 100) * multiplier; + + const glycine = getNutrientValue('glycine'); + if (glycine) totals.glycine += (glycine / 100) * multiplier; // 脂肪酸类 - if (product.fattyAcid) totals.fattyAcid += (Number(product.fattyAcid) / 100) * multiplier; - if (product.saturatedFattyAcid) totals.saturatedFattyAcid += (Number(product.saturatedFattyAcid) / 100) * multiplier; - if (product.monounsaturatedFattyAcid) totals.monounsaturatedFattyAcid += (Number(product.monounsaturatedFattyAcid) / 100) * multiplier; - if (product.polyunsaturatedFattyAcid) totals.polyunsaturatedFattyAcid += (Number(product.polyunsaturatedFattyAcid) / 100) * multiplier; + const fattyAcid = getNutrientValue('fattyAcid'); + if (fattyAcid) totals.fattyAcid += (Number(fattyAcid) / 100) * multiplier; + + const saturatedFattyAcid = getNutrientValue('saturatedFattyAcid'); + if (saturatedFattyAcid) totals.saturatedFattyAcid += (Number(saturatedFattyAcid) / 100) * multiplier; + + const monounsaturatedFattyAcid = getNutrientValue('monounsaturatedFattyAcid'); + if (monounsaturatedFattyAcid) totals.monounsaturatedFattyAcid += (Number(monounsaturatedFattyAcid) / 100) * multiplier; + + const polyunsaturatedFattyAcid = getNutrientValue('polyunsaturatedFattyAcid'); + if (polyunsaturatedFattyAcid) totals.polyunsaturatedFattyAcid += (Number(polyunsaturatedFattyAcid) / 100) * multiplier; // 其他营养信息 - if (product.bloodGlucoseIndex) totals.bloodGlucoseIndex += (product.bloodGlucoseIndex / 100) * multiplier; - if (product.insolubleDietaryFiber) totals.insolubleDietaryFiber += (product.insolubleDietaryFiber / 100) * multiplier; - if (product.dietaryFiber) totals.dietaryFiber += (product.dietaryFiber / 100) * multiplier; - if (product.solubleDietaryFiber) totals.solubleDietaryFiber += (product.solubleDietaryFiber / 100) * multiplier; + const bloodGlucoseIndex = getNutrientValue('bloodGlucoseIndex'); + if (bloodGlucoseIndex) totals.bloodGlucoseIndex += (bloodGlucoseIndex / 100) * multiplier; + + const insolubleDietaryFiber = getNutrientValue('insolubleDietaryFiber'); + if (insolubleDietaryFiber) totals.insolubleDietaryFiber += (insolubleDietaryFiber / 100) * multiplier; + + const dietaryFiber = getNutrientValue('dietaryFiber'); + if (dietaryFiber) totals.dietaryFiber += (dietaryFiber / 100) * multiplier; + + const solubleDietaryFiber = getNutrientValue('solubleDietaryFiber'); + if (solubleDietaryFiber) totals.solubleDietaryFiber += (solubleDietaryFiber / 100) * multiplier; } else { console.log('multiplier <= 0,跳过计算'); ```

现在我需要在LeftCard组件的onMounted中初始化时发送完整营养产品列表:


Todo List

  • 分析当前肠内营养系统的组件结构和数据流
  • 检查父组件如何传递营养产品数据
  • 查看后端API如何获取完整营养产品信息
  • 修改RightCard组件的props接口以接收完整数据
  • 更新微量元素计算逻辑基于选中产品的数据
  • [-] 修改父组件传递完整数据给RightCard

Edit file: src/views/patients/enteralNutrition/components/LeftCard.vue 在onMounted的最后添加发送完整营养产品列表到父组件的逻辑 **Chunk 1** Lines added: 3, lines removed: undefined ```diff @@ -850,4 +850,7 @@ // 初始化时发送空的营养产品列表 emitNutritionProductsChange(); + + // 初始化时发送完整的营养产品列表给父组件 + emit('allNutritionProductsChange', nutritionProductsList.value); });
```

Todo List

  • 分析当前肠内营养系统的组件结构和数据流
  • 检查父组件如何传递营养产品数据
  • 查看后端API如何获取完整营养产品信息
  • 修改RightCard组件的props接口以接收完整数据
  • 更新微量元素计算逻辑基于选中产品的数据
  • 修改父组件传递完整数据给RightCard

现在让我运行项目以查看修改效果:


npm run dev

现在我已经完成了所有主要的代码修改。让我总结一下已经实现的功能:

已完成的任务总结

我已经成功修改了肠内营养系统,实现了以下功能:

1. 数据流向优化

  • LeftCard组件
    • 添加了新的事件 allNutritionProductsChange 用于传递完整营养产品列表
    • emitNutritionProductsChange 函数中同时发送选中产品和完整产品列表
    • 在组件初始化时发送完整营养产品列表给父组件

2. 父组件数据管理

  • index.vue
    • 添加了 allNutritionProducts 响应式变量存储完整营养产品列表
    • 添加了 handleAllNutritionProductsChange 处理函数
    • 修改了 RightCard 组件的props,传递 allNutritionProducts

3. RightCard组件增强

  • Props接口扩展

    • 添加了 allNutritionProducts props接收完整营养产品基础列表
  • 微量元素计算优化

    • 添加了 getNutritionDetailsFromAll 函数,从完整营养产品列表中获取详细营养信息
    • 添加了 getNutrientValue 辅助函数,优先使用完整列表数据,回退到产品自带数据
    • 重构了 productData 计算逻辑,所有微量元素计算都基于最准确的数据源

4. 数据优先级策略

  • 优先级顺序
    1. 完整营养产品列表中的营养数据(最准确)
    2. 选中营养产品自带的营养数据(备用)
    3. 默认值0(避免错误)

5. 调试和监控

  • 添加了详细的控制台日志输出,便于调试和监控数据流
  • 监听所有相关数据变化,实时更新计算结果

工作原理

  1. 数据获取:LeftCard组件启动时获取后端所有营养产品的完整信息
  2. 数据传递:同时传递选中的营养产品列表和完整的营养产品基础列表给RightCard
  3. 精确计算:RightCard根据选中产品的ID,从完整列表中查找对应产品的详细营养信息
  4. 微量元素汇总:使用最准确的营养数据计算所有微量元素的总和

这样的设计确保了:

  • 微量元素计算基于最完整、最准确的后端数据
  • 系统性能优化(避免重复API调用)
  • 数据一致性和准确性
  • 良好的用户体验

现在系统应该能够正确显示基于选中营养产品的完整微量元素计算结果。您可以测试一下功能是否按预期工作!


User

=== getNutritionDetailsFromAll 开始 === RightCard.vue:798 查找产品ID: 1954733747963371521_0_0 RightCard.vue:799 完整营养产品列表长度: 0 RightCard.vue:802 产品ID为空或完整营养产品列表为空 RightCard.vue:482 从完整列表获取的详细营养信息: null


Assistant

我看到问题了!完整营养产品列表长度为0,这意味着数据没有正确传递到RightCard组件。让我检查并修复这个问题。



Read file: src/api/warehouse/productNutrition/index.ts


API接口看起来没问题。让我检查LeftCard组件中的数据获取逻辑,看看是否有时序问题:


Read file: src/views/patients/enteralNutrition/components/LeftCard.vue


问题可能是时序问题。当营养产品数据还没有加载完成时,就已经发送了空的数据列表给父组件。让我修改代码,确保在数据加载完成后再发送:


Edit file: src/views/patients/enteralNutrition/components/LeftCard.vue 修改fetchNutritionProducts函数,在获取数据成功后立即发送给父组件 **Chunk 1** Lines added: 6, lines removed: undefined ```diff @@ -129,8 +129,14 @@ nutritionProductsList.value = response.data; console.log('获取到营养产品列表:', response.data); + + // 立即发送完整的营养产品列表给父组件 + emit('allNutritionProductsChange', nutritionProductsList.value); + console.log('已发送完整营养产品列表给父组件'); } } catch (error) { console.error('获取营养产品列表失败:', error); nutritionProductsList.value = []; + // 发送空列表给父组件 + emit('allNutritionProductsChange', []); } }; ```

现在让我移除onMounted中重复的发送逻辑,因为我们已经在fetchNutritionProducts中处理了:


Edit file: src/views/patients/enteralNutrition/components/LeftCard.vue 移除onMounted中重复的allNutritionProductsChange发送逻辑 **Chunk 1** Lines added: undefined, lines removed: 3 ```diff @@ -856,7 +856,4 @@ // 初始化时发送空的营养产品列表 emitNutritionProductsChange(); - - // 初始化时发送完整的营养产品列表给父组件 - emit('allNutritionProductsChange', nutritionProductsList.value); });
```

我还发现了另一个问题。产品ID是 1954733747963371521_0_0 这种带下划线的格式,这是因为在LeftCard中使用了复合ID。让我检查并修复ID处理逻辑:


Read file: src/views/patients/enteralNutrition/components/LeftCard.vue


我看到问题了!LeftCard中传递的ID是 row.nutritionProductId,这个ID包含了额外的后缀(_0_0)。我需要修改RightCard中的ID处理逻辑,提取实际的产品ID:


Edit file: src/views/patients/enteralNutrition/components/RightCard.vue 修改getNutritionDetailsFromAll函数,提取实际的产品ID(去除下划线后缀) **Chunk 1** Lines added: 11, lines removed: 3 ```diff @@ -803,11 +803,19 @@ return null; } + + // 提取实际的产品ID(去除可能的后缀,如 1954733747963371521_0_0 -> 1954733747963371521) + let actualProductId = productId; + if (typeof productId === 'string' && productId.includes('_')) { + actualProductId = productId.split('_')[0]; + console.log('提取实际产品ID:', actualProductId, '原始ID:', productId); + } // 在完整营养产品列表中查找对应的产品 const foundProduct = props.allNutritionProducts.find(product => { // 可能的匹配方式:直接ID匹配、字符串ID匹配、产品编码匹配 - const match = product.id === productId || - product.id === productId.toString() || - product.productCode === productId; + const match = product.id === actualProductId || + product.id === actualProductId.toString() || + product.productCode === actualProductId || + product.id?.toString() === actualProductId.toString(); if (match) { ```

现在让我添加一些调试信息,帮助确认数据流是否正确:


Edit file: src/views/patients/enteralNutrition/index.vue 在handleAllNutritionProductsChange函数中添加更详细的调试信息 **Chunk 1** Lines added: 4, lines removed: undefined ```diff @@ -355,4 +355,8 @@ allNutritionProducts.value = products; console.log('父组件接收到完整营养产品列表变化:', products); + console.log('完整营养产品列表长度:', products?.length || 0); + if (products && products.length > 0) { + console.log('前3个产品ID:', products.slice(0, 3).map(p => ({ id: p.id, productName: p.productName, productCode: p.productCode }))); + } };
```

现在让我创建一个简单的测试文档来验证整个数据流:


Edit file: debug-info.md 创建调试信息文档,帮助用户理解数据流 **Chunk 1** Lines added: 51, lines removed: 1 ```diff @@ -1,1 +1,51 @@ - + # 肠内营养系统调试信息 + + ## 问题分析 + + 根据控制台输出: + ``` + === getNutritionDetailsFromAll 开始 === + 查找产品ID: 1954733747963371521_0_0 + 完整营养产品列表长度: 0 + 产品ID为空或完整营养产品列表为空 + 从完整列表获取的详细营养信息: null + ``` + + 问题是完整营养产品列表长度为0,说明数据没有正确传递到RightCard组件。 + + ## 已修复的问题 + + 1. **时序问题**:现在在LeftCard的`fetchNutritionProducts`函数中立即发送完整营养产品列表 + 2. **ID格式问题**:修改了`getNutritionDetailsFromAll`函数,支持处理带下划线的复合ID格式 + 3. **数据传递**:确保数据从LeftCard -> 父组件 -> RightCard 的完整传递链路 + + ## 测试步骤 + + 1. 打开肠内营养页面 + 2. 查看控制台输出,应该看到: + - `开始获取营养产品列表...` + - `获取到营养产品列表: [...]` + - `已发送完整营养产品列表给父组件` + - `父组件接收到完整营养产品列表变化: [...]` + - `完整营养产品列表长度: X` (X > 0) + - `RightCard接收到完整营养产品列表更新: [...]` + + 3. 添加营养产品后,查看控制台输出: + - `提取实际产品ID: XXXX 原始ID: XXXX_0_0` + - `找到匹配的产品: {...}` + + ## 数据流向 + + ``` + LeftCard.fetchNutritionProducts() + -> emit('allNutritionProductsChange', data) + -> 父组件.handleAllNutritionProductsChange() + -> allNutritionProducts.value = data + -> RightCard props.allNutritionProducts + -> getNutritionDetailsFromAll() 使用数据 + ``` + + 如果仍然看到"完整营养产品列表长度: 0",请检查: + 1. 后端API `/warehouse/nutrition/listAll` 是否正常返回数据 + 2. 网络请求是否成功 + 3. 数据格式是否正确 ```

总结

我已经修复了主要问题:

🔧 已修复的问题

  1. 时序问题

    • LeftCard.fetchNutritionProducts() 函数中,获取数据成功后立即发送完整营养产品列表给父组件
    • 移除了可能导致空数据发送的重复逻辑
  2. ID格式问题

    • 修改了 RightCard.getNutritionDetailsFromAll() 函数,支持处理带下划线的复合ID格式(如 1954733747963371521_0_0
    • 提取实际的产品ID进行匹配
  3. 数据传递链路

    • 完善了从 LeftCard → 父组件 → RightCard 的完整数据传递链路
    • 添加了详细的调试日志便于追踪数据流

🔍 下一步测试建议

请重新运行应用并检查控制台输出,你应该看到:

  1. 页面加载时

    开始获取营养产品列表...
    获取到营养产品列表: [...]
    已发送完整营养产品列表给父组件
    父组件接收到完整营养产品列表变化: [...]
    完整营养产品列表长度: X (X > 0)
    RightCard接收到完整营养产品列表更新: [...]
    
  2. 添加营养产品后

    提取实际产品ID: 1954733747963371521 原始ID: 1954733747963371521_0_0
    找到匹配的产品: {...微量元素数据...}
    

如果仍然看到"完整营养产品列表长度: 0",这可能是后端API问题,请检查:

  • 后端API /warehouse/nutrition/listAll 是否正常工作
  • 网络请求是否成功返回数据
  • 返回的数据格式是否正确

现在系统应该能够基于完整的后端营养产品数据正确计算所有微量元素的总和了!


User

@RightCard.vue 仿照父组件的做法,再页面一开始加载,就向后端获取到所有的产品详情,可参考@/patients @/enteralNutrition @index.vue 。然后每当LeftCard中营养产品列表数据产生变化,RightCard接收到变化的数据,就结合完整的营养产品信息对各个微量元素的总和进行计算


Assistant

我来修改RightCard组件,让它直接从后端获取所有营养产品详情,然后结合LeftCard传来的选中产品数据进行微量元素计算。


Todo List

  • [-] 移除RightCard中的allNutritionProducts props,改为直接从后端获取
  • 在RightCard中添加营养产品API接口导入
  • 在RightCard的onMounted中添加获取所有营养产品的逻辑
  • 简化父组件,移除allNutritionProducts相关代码
  • 更新微量元素计算逻辑,使用直接获取的营养产品数据

Edit file: src/views/patients/enteralNutrition/components/RightCard.vue 添加营养产品API导入和移除allNutritionProducts props **Chunk 1** Lines added: 2, lines removed: undefined ```diff @@ -75,4 +75,6 @@ import { listByType } from '@/api/system/dict/data/index.ts'; import { DictDataVO } from '@/api/system/dict/data/types.ts'; + import { listAllNutrition } from '@/api/warehouse/productNutrition'; + import { NutritionVO } from '@/api/warehouse/productNutrition/types'; import * as echarts from 'echarts'; ``` **Chunk 2** Lines added: undefined, lines removed: 78 ```diff @@ -161,82 +163,4 @@ moisture?: number // 水分 }> - allNutritionProducts?: Array<{ - id?: string | number, - productName?: string, - productCode?: string, - protein?: number, - fat?: number, - carbohydrate?: number, - calorie?: number, - // 微量元素信息 - ca?: number, // 钙 - p?: number, // 磷 - k?: number, // 钾 - na?: number, // 钠 - mg?: number, // 镁 - cl?: number, // 氯 - fe?: number, // 铁 - zn?: number, // 锌 - se?: number, // 硒 - cu?: number, // 铜 - mn?: number, // 锰 - i?: number, // 碘 - f?: number, // 氟 - cr?: number, // 铬 - mo?: number, // 钼 - // 氨基酸信息 - isoleucine?: number, // 异亮氨酸 - tryptophan?: number, // 色氨酸 - sulfurAminoAcid?: string | number, // 含硫氨基酸 - histidine?: string | number, // 组氨酸 - aromaticAminoAcid?: string | number, // 芳香族氨基酸 - glutamicAcid?: string | number, // 谷氨酸 - threonine?: number, // 苏氨酸 - serine?: number, // 丝氨酸 - arginine?: number, // 精氨酸 - lysine?: number, // 赖氨酸 - asparticAcid?: string | number, // 天冬氨酸 - cysteine?: number, // 胱氨酸 - proline?: number, // 脯氨酸 - tyrosine?: number, // 酪氨酸 - leucine?: number, // 亮氨酸 - valine?: number, // 缬氨酸 - methionine?: number, // 蛋氨酸 - alanine?: number, // 丙氨酸 - phenylalanine?: number, // 苯丙氨酸 - glycine?: number, // 甘氨酸 - // 脂肪酸信息 - fattyAcid?: string | number, // 脂肪酸 - saturatedFattyAcid?: string | number, // 饱和脂肪酸 - monounsaturatedFattyAcid?: string | number, // 单不饱和脂肪酸 - polyunsaturatedFattyAcid?: string | number, // 多不饱和脂肪酸 - // 维生素信息 - vitaminA?: number, // 维生素A - vitaminACarotene?: number, // 维生素A(胡萝卜素) - vitaminAAlcohol?: number, // 维生素A醇 - vitaminD?: number, // 维生素D - vitaminE?: number, // 维生素E - vitaminETocopherol?: number, // 维生素E(生育酚) - vitaminK?: number, // 维生素K - vitaminBOne?: number, // 维生素B1 - vitaminBTwo?: number, // 维生素B2 - vitaminBSix?: number, // 维生素B6 - vitaminBTwelve?: number, // 维生素B12 - niacin?: number, // 烟酸(尼克酸) - vitaminC?: number, // 维生素C - folicAcid?: string | number, // 叶酸 - choline?: number, // 胆碱 - biotin?: number, // 生物素 - pantothenicAcid?: string | number, // 泛酸 - // 其他营养信息 - cholesterol?: number, // 胆固醇 - bloodGlucoseIndex?: number, // 血糖生成指数 - insolubleDietaryFiber?: number, // 不可溶性膳食纤维 - dietaryFiber?: number, // 膳食纤维 - ash?: number, // 灰分 - solubleDietaryFiber?: number, // 可溶性膳食纤维 - osmoticPressure?: number, // 渗透压 - moisture?: number // 水分 - }> }>(); ```

现在添加营养产品数据的响应式变量和获取逻辑:


Todo List

  • 移除RightCard中的allNutritionProducts props,改为直接从后端获取
  • 在RightCard中添加营养产品API接口导入
  • [-] 在RightCard的onMounted中添加获取所有营养产品的逻辑
  • 简化父组件,移除allNutritionProducts相关代码
  • 更新微量元素计算逻辑,使用直接获取的营养产品数据

Edit file: src/views/patients/enteralNutrition/components/RightCard.vue 添加营养产品数据变量和获取逻辑,放在图表相关变量之后 **Chunk 1** Lines added: 22, lines removed: undefined ```diff @@ -172,4 +172,26 @@ // 加载状态 const loading = ref(false); + + // 完整的营养产品基础数据列表(从后端获取的所有营养产品信息) + const allNutritionProducts = ref([]); + + // 获取所有营养产品列表 + const fetchAllNutritionProducts = async () => { + try { + console.log('RightCard: 开始获取所有营养产品列表...'); + const response = await listAllNutrition(); + if (response.data) { + allNutritionProducts.value = response.data; + console.log('RightCard: 获取到营养产品列表:', response.data); + console.log('RightCard: 营养产品列表长度:', response.data.length); + if (response.data.length > 0) { + console.log('RightCard: 前3个产品ID:', response.data.slice(0, 3).map(p => ({ id: p.id, productName: p.productName, productCode: p.productCode }))); + } + } + } catch (error) { + console.error('RightCard: 获取营养产品列表失败:', error); + allNutritionProducts.value = []; + } + }; // 营养分析数据 - 基于计算结果动态生成 ```

现在更新getNutritionDetailsFromAll函数使用本地的allNutritionProducts:


Edit file: src/views/patients/enteralNutrition/components/RightCard.vue 更新getNutritionDetailsFromAll函数使用本地的allNutritionProducts变量 **Chunk 1** Lines added: 3, lines removed: 3 ```diff @@ -740,10 +740,10 @@ // 根据产品ID从完整营养产品列表中获取详细营养信息 - const getNutritionDetailsFromAll = (productId: string | number): any => { + const getNutritionDetailsFromAll = (productId: string | number): NutritionVO | null => { console.log('=== getNutritionDetailsFromAll 开始 ==='); console.log('查找产品ID:', productId); - console.log('完整营养产品列表长度:', props.allNutritionProducts?.length || 0); + console.log('完整营养产品列表长度:', allNutritionProducts.value?.length || 0); - if (!productId || !props.allNutritionProducts || props.allNutritionProducts.length === 0) { + if (!productId || !allNutritionProducts.value || allNutritionProducts.value.length === 0) { console.log('产品ID为空或完整营养产品列表为空'); return null; ``` **Chunk 2** Lines added: 1, lines removed: 1 ```diff @@ -758,5 +758,5 @@ // 在完整营养产品列表中查找对应的产品 - const foundProduct = props.allNutritionProducts.find(product => { + const foundProduct = allNutritionProducts.value.find(product => { // 可能的匹配方式:直接ID匹配、字符串ID匹配、产品编码匹配 const match = product.id === actualProductId || ```

现在移除旧的监听逻辑,并在onMounted中添加数据获取:



Edit file: src/views/patients/enteralNutrition/components/RightCard.vue undefined **Chunk 1** Lines added: undefined, lines removed: 5 ```diff @@ -733,9 +733,4 @@ console.log("RightCard接收到营养产品更新:", newProducts); }, { immediate: true }); - - // 监听完整营养产品列表变化 - watch(() => props.allNutritionProducts, (newAllProducts) => { - console.log("RightCard接收到完整营养产品列表更新:", newAllProducts); - }, { immediate: true }); // 根据产品ID从完整营养产品列表中获取详细营养信息 ```

现在更新onMounted函数,添加获取营养产品数据的调用:


Edit file: src/views/patients/enteralNutrition/components/RightCard.vue undefined **Chunk 1** Lines added: 4, lines removed: 1 ```diff @@ -944,5 +944,8 @@ }, { deep: true }); - onMounted(() => { + onMounted(async () => { + // 先获取营养产品数据 + await fetchAllNutritionProducts(); + initChart(); listByType("nutrient_reference").then(response => { ```

现在简化父组件,移除不再需要的allNutritionProducts相关代码:


Todo List

  • 移除RightCard中的allNutritionProducts props,改为直接从后端获取
  • 在RightCard中添加营养产品API接口导入
  • 在RightCard的onMounted中添加获取所有营养产品的逻辑
  • [-] 简化父组件,移除allNutritionProducts相关代码
  • 更新微量元素计算逻辑,使用直接获取的营养产品数据

Edit file: src/views/patients/enteralNutrition/index.vue 移除allNutritionProducts相关的props传递 **Chunk 1** Lines added: 1, lines removed: 1 ```diff @@ -7,5 +7,5 @@ @allNutritionProductsChange="handleAllNutritionProductsChange" /> - +
```
Edit file: src/views/patients/enteralNutrition/index.vue 移除LeftCard中的allNutritionProductsChange事件监听 **Chunk 1** Lines added: 1, lines removed: 2 ```diff @@ -4,6 +4,5 @@ + @nutritionProductsChange="handleNutritionProductsChange" /> ```

现在移除allNutritionProducts变量和相关的处理函数:


Edit file: src/views/patients/enteralNutrition/index.vue undefined **Chunk 1** Lines added: undefined, lines removed: 80 ```diff @@ -102,84 +102,4 @@ moisture?: number // 水分 }>>([]); - - // 完整的营养产品基础数据列表(从后端获取的所有营养产品信息) - const allNutritionProducts = ref>([]); const goHistoryPrescription = () => { ```

移除handleAllNutritionProductsChange函数:


Edit file: src/views/patients/enteralNutrition/index.vue undefined **Chunk 1** Lines added: 1, lines removed: 86 ```diff @@ -193,90 +193,5 @@ }; - // 处理完整营养产品列表变化 - const handleAllNutritionProductsChange = (products: Array<{ - id?: string | number, - productName?: string, - productCode?: string, - protein?: number, - fat?: number, - carbohydrate?: number, - calorie?: number, - // 微量元素信息 - ca?: number, // 钙 - p?: number, // 磷 - k?: number, // 钾 - na?: number, // 钠 - mg?: number, // 镁 - cl?: number, // 氯 - fe?: number, // 铁 - zn?: number, // 锌 - se?: number, // 硒 - cu?: number, // 铜 - mn?: number, // 锰 - i?: number, // 碘 - f?: number, // 氟 - cr?: number, // 铬 - mo?: number, // 钼 - // 氨基酸信息 - isoleucine?: number, // 异亮氨酸 - tryptophan?: number, // 色氨酸 - sulfurAminoAcid?: string | number, // 含硫氨基酸 - histidine?: string | number, // 组氨酸 - aromaticAminoAcid?: string | number, // 芳香族氨基酸 - glutamicAcid?: string | number, // 谷氨酸 - threonine?: number, // 苏氨酸 - serine?: number, // 丝氨酸 - arginine?: number, // 精氨酸 - lysine?: number, // 赖氨酸 - asparticAcid?: string | number, // 天冬氨酸 - cysteine?: number, // 胱氨酸 - proline?: number, // 脯氨酸 - tyrosine?: number, // 酪氨酸 - leucine?: number, // 亮氨酸 - valine?: number, // 缬氨酸 - methionine?: number, // 蛋氨酸 - alanine?: number, // 丙氨酸 - phenylalanine?: number, // 苯丙氨酸 - glycine?: number, // 甘氨酸 - // 脂肪酸信息 - fattyAcid?: string | number, // 脂肪酸 - saturatedFattyAcid?: string | number, // 饱和脂肪酸 - monounsaturatedFattyAcid?: string | number, // 单不饱和脂肪酸 - polyunsaturatedFattyAcid?: string | number, // 多不饱和脂肪酸 - // 维生素信息 - vitaminA?: number, // 维生素A - vitaminACarotene?: number, // 维生素A(胡萝卜素) - vitaminAAlcohol?: number, // 维生素A醇 - vitaminD?: number, // 维生素D - vitaminE?: number, // 维生素E - vitaminETocopherol?: number, // 维生素E(生育酚) - vitaminK?: number, // 维生素K - vitaminBOne?: number, // 维生素B1 - vitaminBTwo?: number, // 维生素B2 - vitaminBSix?: number, // 维生素B6 - vitaminBTwelve?: number, // 维生素B12 - niacin?: number, // 烟酸(尼克酸) - vitaminC?: number, // 维生素C - folicAcid?: string | number, // 叶酸 - choline?: number, // 胆碱 - biotin?: number, // 生物素 - pantothenicAcid?: string | number, // 泛酸 - // 其他营养信息 - cholesterol?: number, // 胆固醇 - bloodGlucoseIndex?: number, // 血糖生成指数 - insolubleDietaryFiber?: number, // 不可溶性膳食纤维 - dietaryFiber?: number, // 膳食纤维 - ash?: number, // 灰分 - solubleDietaryFiber?: number, // 可溶性膳食纤维 - osmoticPressure?: number, // 渗透压 - moisture?: number // 水分 - }>) => { - allNutritionProducts.value = products; - console.log('父组件接收到完整营养产品列表变化:', products); - console.log('完整营养产品列表长度:', products?.length || 0); - if (products && products.length > 0) { - console.log('前3个产品ID:', products.slice(0, 3).map(p => ({ id: p.id, productName: p.productName, productCode: p.productCode }))); - } - }; +
```

现在需要简化LeftCard组件,移除不再需要的allNutritionProductsChange事件:


Todo List

  • 移除RightCard中的allNutritionProducts props,改为直接从后端获取
  • 在RightCard中添加营养产品API接口导入
  • 在RightCard的onMounted中添加获取所有营养产品的逻辑
  • 简化父组件,移除allNutritionProducts相关代码
  • [-] 更新微量元素计算逻辑,使用直接获取的营养产品数据

Edit file: src/views/patients/enteralNutrition/components/LeftCard.vue 移除emit中的allNutritionProductsChange事件,只保留gotoTop和nutritionProductsChange **Chunk 1** Lines added: 1, lines removed: 1 ```diff @@ -97,5 +97,5 @@ const { proxy } = getCurrentInstance() as ComponentInternalInstance; - const emit = defineEmits(['gotoTop', 'nutritionProductsChange', 'allNutritionProductsChange']); + const emit = defineEmits(['gotoTop', 'nutritionProductsChange']); const buttonLoading = ref(false); const { patientInfo } = defineProps<{ patientInfo: any }>(); ```

现在移除LeftCard中的allNutritionProductsChange相关调用:


Edit file: src/views/patients/enteralNutrition/components/LeftCard.vue undefined **Chunk 1** Lines added: undefined, lines removed: 4 ```diff @@ -440,11 +440,7 @@ console.log('LeftCard收集到的营养产品:', products); emit('nutritionProductsChange', products); - - // 同时发送完整的营养产品基础列表给父组件 - emit('allNutritionProductsChange', nutritionProductsList.value); } catch (error) { console.error('收集营养产品数据失败:', error); emit('nutritionProductsChange', []); - emit('allNutritionProductsChange', []); } }; ```

移除fetchNutritionProducts中的allNutritionProductsChange调用:


Edit file: src/views/patients/enteralNutrition/components/LeftCard.vue undefined **Chunk 1** Lines added: undefined, lines removed: 6 ```diff @@ -129,14 +129,8 @@ nutritionProductsList.value = response.data; console.log('获取到营养产品列表:', response.data); - - // 立即发送完整的营养产品列表给父组件 - emit('allNutritionProductsChange', nutritionProductsList.value); - console.log('已发送完整营养产品列表给父组件'); } } catch (error) { console.error('获取营养产品列表失败:', error); nutritionProductsList.value = []; - // 发送空列表给父组件 - emit('allNutritionProductsChange', []); } }; ```

Todo List

  • 移除RightCard中的allNutritionProducts props,改为直接从后端获取
  • 在RightCard中添加营养产品API接口导入
  • 在RightCard的onMounted中添加获取所有营养产品的逻辑
  • 简化父组件,移除allNutritionProducts相关代码
  • 更新微量元素计算逻辑,使用直接获取的营养产品数据

现在删除不再需要的调试文档:


删除不再需要的调试文档


总结

我已经完成了按照您要求的重构,现在RightCard组件采用了与父组件相同的做法:

已完成的修改

  1. RightCard组件自主获取数据

    • 添加了 listAllNutrition API导入
    • 添加了 allNutritionProducts 响应式变量
    • 添加了 fetchAllNutritionProducts 函数在组件初始化时获取完整营养产品列表
    • onMounted 中调用数据获取
  2. 移除了props传递方式

    • 移除了RightCard中的 allNutritionProducts props
    • 移除了父组件中的相关变量和处理函数
    • 移除了LeftCard中的 allNutritionProductsChange 事件
  3. 数据处理逻辑优化

    • getNutritionDetailsFromAll 函数现在使用本地的 allNutritionProducts.value
    • 保持了ID提取逻辑(处理 1954733747963371521_0_0 格式)
    • 微量元素计算逻辑保持不变,但数据源更直接

🔄 新的数据流向

现在的数据流更简洁:

RightCard.onMounted() 
  -> fetchAllNutritionProducts()
  -> allNutritionProducts.value = 后端数据

LeftCard营养产品变化 
  -> emit('nutritionProductsChange')
  -> 父组件.handleNutritionProductsChange()  
  -> RightCard props.nutritionProducts更新
  -> RightCard.getNutritionDetailsFromAll() 使用本地allNutritionProducts.value

📋 测试提示

重新运行应用后,您应该看到:

  1. 页面加载时

    RightCard: 开始获取所有营养产品列表...
    RightCard: 获取到营养产品列表: [...]
    RightCard: 营养产品列表长度: X (X > 0)
    
  2. 添加营养产品后

    提取实际产品ID: 1954733747963371521 原始ID: 1954733747963371521_0_0
    找到匹配的产品: {...完整营养数据...}
    

现在RightCard独立管理营养产品数据,每当接收到LeftCard传来的选中产品变化时,就会结合完整的营养产品信息计算各个微量元素的总和!


<<<<<<< HEAD

User

=== getNutritionDetailsFromAll 开始 === RightCard.vue:739 查找产品ID: 1954733747963371521_0_0 RightCard.vue:740 完整营养产品列表长度: 0 RightCard.vue:743 产品ID为空或完整营养产品列表为空 RightCard.vue:428 从完整列表获取的详细营养信息: null


Assistant


main