计算菜谱营养素含量

src/api/recipe.js

@@ -128,3 +128,11 @@ export function removeRecipeFood(recipeId, recipeFoodId) {
     method: 'delete'
   })
 }
+
+// 计算菜谱营养素含量
+export function getRecipeReport(recipeId) {
+  return request({
+    url: `/api/recipes/${recipeId}/report`,
+    method: 'get'
+  })
+}

src/views/foodModifier/index.vue

@@ -149,7 +149,7 @@ export default {
         this.$message.error(res.data.message)
       })
     },
-    async showDialog(row, column, event) {
+    showDialog(row, column, event) {
       calculateNutrientsContent(row.foodId, { unit: row.inInitUnit, quantity: row.inInit }).then(res => {
         this.dialogFormVisible = true
         this.dialogHtml = res.data

src/views/recipe/index.vue

@@ -30,6 +30,7 @@
       fit
       highlight-current-row
       style="width: 100%;"
+      @row-click="showDialog"
     >
       <el-table-column type="index" label="序号" align="center" fixed width="60px" />
       <el-table-column label="名称" fixed align="center">
@@ -106,11 +107,15 @@
         </el-button>
       </div>
     </el-dialog>
+
+    <el-dialog title="营养素计算" :visible.sync="contentDialogVisible">
+      <span v-html="recipeContentHtml" />
+    </el-dialog>
   </div>
 </template>
 
 <script>
-import { getRecipes, createRecipe, updateRecipe, removeRecipe } from '@/api/recipe'
+import { getRecipes, createRecipe, updateRecipe, removeRecipe, getRecipeReport } from '@/api/recipe'
 import Pagination from '@/components/Pagination'
 import SingleImage from '@/components/Upload/SingleImage'
 
@@ -131,7 +136,9 @@ export default {
       textMap: { 'create': '新建', 'edit': '更新' },
       dialogStatus: '',
       rules: {},
-      params: {}
+      params: {},
+      recipeContentHtml: '',
+      contentDialogVisible: false
     }
   },
   created() {
@@ -191,6 +198,14 @@ export default {
     },
     updateFile(value) {
       this.$set(this.params, 'coverPic', value)
+    },
+    showDialog(row) {
+      getRecipeReport(row.id).then(res => {
+        this.contentDialogVisible = true
+        this.recipeContentHtml = res.data
+      }).catch(res => {
+        this.$message.error(res.data.message)
+      })
     }
   }
 }