完成食物规格营养素计算

src/api/food.js

@@ -147,10 +147,20 @@ export function createOrUpdateFoodUnit(id, data) {
 }
 
 // 获取食物基础单位转换关系
-export function getFoodUnits(id) {
+export function getFoodUnits(id, params) {
   return request({
     url: `/api/foods/${id}/units`,
-    method: 'get'
+    method: 'get',
+    params
+  })
+}
+
+// 食物单位转换
+export function convertFoodUnit(id, data) {
+  return request({
+    url: `/api/foods/${id}/units/convert`,
+    method: 'post',
+    data
   })
 }
 

src/views/foodModifier/index.vue

@@ -20,6 +20,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">
@@ -80,11 +81,16 @@
         </template>
       </el-table-column>
     </el-table>
+
+    <el-dialog title="营养素计算" :visible.sync="dialogFormVisible">
+      <span v-html="dialogHtml" />
+    </el-dialog>
   </div>
 </template>
 
 <script>
-import { getFoodModifiers, removeFoodModifier, updateFoodModifierSort } from '@/api/food'
+import { getFoodModifiers, removeFoodModifier, updateFoodModifierSort, convertFoodUnit, getNutrientList,
+  getDetail} from '@/api/food'
 
 export default {
   name: 'FoodModifierIndex',
@@ -92,12 +98,16 @@ export default {
     return {
       listLoading: false,
       list: [],
-      foodId: ''
+      food: {},
+      foodId: '',
+      dialogHtml: '',
+      dialogFormVisible: false
     }
   },
   created() {
     this.foodId = this.$route.params && this.$route.params.id
     this.fetchData()
+    this.fetchFood()
   },
   methods: {
     handleCreate() {
@@ -115,6 +125,11 @@ export default {
         this.fetchData()
       })
     },
+    fetchFood() {
+      getDetail(this.foodId).then(res => {
+        this.food = res.data
+      })
+    },
     fetchData() {
       this.listLoading = true
       getFoodModifiers(this.foodId).then(res => {
@@ -132,6 +147,29 @@ export default {
       }).catch(res => {
         this.$message.error(res.data.message)
       })
+    },
+    showDialog(row, column, event) {
+      getNutrientList(row.foodId).then(res => {
+        const nutrients = res.data
+        convertFoodUnit(row.foodId, { fromUnit: row.inInitUnit }).then(res => {
+          if (!res.data.ratio) {
+            return;
+          }
+          this.dialogHtml = `转换关系：1${row.inInitUnit}${this.food.name}=${res.data.ratio}${this.food.normalizedUnit}${this.food.name}<br>`
+          this.dialogHtml += `${row.inInit}${row.inInitUnit}${this.food.name}含有如下营养素：<br>`
+          this.dialogHtml += `******************************<br>`
+          for (let i=0; i < nutrients.length; i++) {
+            const nutrient = nutrients[i]
+            const quantity = nutrient.normalizedQuantity * res.data.ratio * row.inInit / nutrient.nvSpec
+            this.dialogHtml += `${nutrient.nutrientName}：${quantity}${nutrient.unit}。<br>`
+            this.dialogHtml += `营养素计量为：${nutrient.quantity}${nutrient.unit}。Nv_Spec为：${nutrient.nvSpec}${nutrient.nvSpecUnit}。<br>`
+            this.dialogHtml += `******************************<br>`
+          }
+          this.dialogFormVisible = true
+        })
+      }).catch(res => {
+        this.$message.error('获取数据失败')
+      })
     }
   }
 }