完成食物规格从近似食物导入

src/api/food.js

@@ -206,3 +206,12 @@ export function importNutrientsFromTemplate(id, data) {
     data
   })
 }
+
+// 食物从近似食物导入规格
+export function importModifiersFromSimilarFood(id, data) {
+  return request({
+    url: `/api/foods/${id}/modifiers/import-from-food`,
+    method: 'post',
+    data
+  })
+}

src/views/foodModifier/components/ModifierImport.vue

@@ -0,0 +1,75 @@
+<template>
+  <div style="overflow: auto">
+    <el-form ref="dialogForm" label-position="left" label-width="60px" style="width: 80%; margin-left:50px;">
+      <el-form-item label="食物：" prop="importFoodId" >
+        <el-select
+          v-model="importFoodId"
+          class="filter-item"
+          filterable
+          remote
+          reserve-keyword
+          placeholder="请输入食物关键词"
+          :loading="foodLoading"
+          :remote-method="queryFoods"
+          style="width: 100%"
+        >
+          <el-option v-for="item in foods" :key="`food${item.id}`" :label="item.name" :value="item.id" />
+        </el-select>
+      </el-form-item>
+    </el-form>
+    <div slot="footer" class="dialog-footer" style="float: right">
+      <el-button @click="closeDialog">
+        取消
+      </el-button>
+      <el-button type="primary" @click="submit">
+        提交
+      </el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getList, importModifiersFromSimilarFood } from '@/api/food'
+
+export default {
+  name: 'ModifierImport',
+  props: {
+    foodId: { type: String }
+  },
+  data() {
+    return {
+      importFoodId: '',
+      foodLoading: false,
+      foods: []
+    }
+  },
+  methods: {
+    queryFoods(query='') {
+      this.foodLoading = true
+      getList({ query: query, orderBy: 0, pageNum: 1, pageSize: 20 }).then(res => {
+        this.foods = res.data.list
+        this.foodLoading = false
+      }).catch(() => {
+        this.foodLoading = false
+      })
+    },
+    closeDialog() {
+      this.foods = []
+      this.importFoodId = ''
+      this.$emit("closeDialog")
+    },
+    submit() {
+      importModifiersFromSimilarFood(this.foodId, { foodId: this.importFoodId }).then(res => {
+        this.$notify.success('提交成功')
+        this.closeDialog()
+      }).catch(res => {
+        this.$message.error(res.data.message)
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/foodModifier/index.vue

@@ -11,6 +11,15 @@
       >
         新建
       </el-button>
+      <el-button
+        class="filter-item"
+        style="margin: 0 10px 20px 0; float: left;"
+        type="success"
+        icon="el-icon-circle-plus-outline"
+        @click="importDialogVisible = true"
+      >
+        从近似食物导入
+      </el-button>
     </div>
 
     <floating-window :able-hide="false" :class="{'is_fixed': isFixed}" >
@@ -62,6 +71,11 @@
           <span>{{ row.inInit + row.inInitUnit }}</span>
         </template>
       </el-table-column>
+      <el-table-column label="CNVR" align="center">
+        <template slot-scope="{row}">
+          <span>{{ row.unitTip }}</span>
+        </template>
+      </el-table-column>
       <el-table-column label="最小刻度" align="center" width="80px">
         <template slot-scope="{row}">
           <span>{{ row.minScale }}</span>
@@ -89,16 +103,16 @@
       </el-table-column>
       <el-table-column label="操作" align="center" class-name="small-padding" fixed="right" width="320">
         <template slot-scope="{row}">
-          <el-button type="primary" size="mini" @click="handleUpdate(row)">
+          <el-button type="primary" size="mini" @click.stop="handleUpdate(row)">
             更新
           </el-button>
-          <el-button type="primary" size="mini" @click="updateSort(row, 0)">
+          <el-button type="primary" size="mini" @click.stop="updateSort(row, 0)">
             上移
           </el-button>
-          <el-button type="primary" size="mini" @click="updateSort(row, 1)">
+          <el-button type="primary" size="mini" @click.stop="updateSort(row, 1)">
             下移
           </el-button>
-          <el-button size="mini" type="danger" @click="handleDelete(row)">
+          <el-button size="mini" type="danger" @click.stop="handleDelete(row)">
             删除
           </el-button>
         </template>
@@ -108,6 +122,10 @@
     <el-dialog title="营养素计算" :visible.sync="dialogFormVisible">
       <span v-html="dialogHtml" />
     </el-dialog>
+
+    <el-dialog title="从近似食物导入" :visible.sync="importDialogVisible">
+      <modifier-import :food-id="foodId" @closeDialog="handleImportDialogClose" />
+    </el-dialog>
   </div>
 </template>
 
@@ -115,10 +133,11 @@
 import { getFoodModifiers, removeFoodModifier, updateFoodModifierSort, convertFoodUnit, getNutrientList,
   getDetail, calculateNutrientsContent } from '@/api/food'
 import FloatingWindow from '@/components/FloatingWindow'
+import ModifierImport from './components/ModifierImport'
 
 export default {
   name: 'FoodModifierIndex',
-  components: { FloatingWindow },
+  components: { FloatingWindow, ModifierImport },
   data() {
     return {
       listLoading: false,
@@ -128,7 +147,8 @@ export default {
       dialogHtml: '',
       dialogFormVisible: false,
       isFixed: false,
-      offsetTop: 0
+      offsetTop: 0,
+      importDialogVisible: false
     }
   },
   mounted() {
@@ -212,6 +232,10 @@ export default {
       if (path) {
         this.$router.push({ path: path })
       }
+    },
+    handleImportDialogClose() {
+      this.fetchData()
+      this.importDialogVisible = false
     }
   }
 }