食物营养素录入界面允许从模板导入

src/api/food.js

@@ -197,3 +197,12 @@ export function calculateNutrientsContent(id, params) {
     params
   })
 }
+
+// 食物从模板添加营养素
+export function importNutrientsFromTemplate(id, data) {
+  return request({
+    url: `/api/foods/${id}/nutrients/import`,
+    method: 'post',
+    data
+  })
+}

src/views/food/nutrient.vue

@@ -54,7 +54,7 @@
           class="filter-item"
         />
       </el-row>
-      <el-row>
+      <el-row style="margin-top: 10px">
         Nv_Spec计量:
         <el-input
           v-model="params.nvSpec"
@@ -81,6 +81,13 @@
           @click="addNutrient">
           添加
         </el-button>
+        <el-button
+          class="filter-item"
+          style="margin-left: 10px;"
+          type="success"
+          @click="handleImport">
+          从模板导入营养素
+        </el-button>
       </el-row>
     </div>
 
@@ -210,14 +217,41 @@
         </template>
       </el-table-column>
     </el-table>
+
+    <el-dialog title="从模板导入营养素" :visible.sync="dialogFormVisible" v-loading="templateLoading">
+      <el-form ref="dialogForm" label-position="left" label-width="80px" style="width: 400px; margin-left:50px;">
+        <el-form-item label="模板：" prop="templateId">
+          <el-select
+            v-model="templateId"
+            class="filter-item"
+            filterable
+            remote
+            reserve-keyword
+            placeholder="请输入模板关键词"
+            :remote-method="queryTemplates"
+          >
+            <el-option v-for="item in templates" :key="`template${item.id}`" :label="item.name" :value="item.id" />
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogFormVisible = false">
+          取消
+        </el-button>
+        <el-button type="primary" @click="submitFromTemplate">
+          提交
+        </el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
 import { getNutrientList, addFoodNutrient, updateFoodNutrient, removeFoodNutrient,
-  updateFoodNutrientSort, confirmDeleteFoodNutrient } from '@/api/food'
+  updateFoodNutrientSort, confirmDeleteFoodNutrient, importNutrientsFromTemplate } from '@/api/food'
 import { getList, getNutrientUnits } from '@/api/nutrient'
 import { getList as getUnits } from '@/api/unit'
+import { getNutrientTemplates } from '@/api/nutrientTemplate'
 
 export default {
   name: 'AddNutrient',
@@ -252,7 +286,11 @@ export default {
       params: { source: '营养标签', radio: 0, nvSpec: 100, nvSpecUnit: '克' },
       loading: false,
       unitLoading: false,
-      sources: [{ value: "营养标签" }, { value: "食品官方资料" }, { value: "计算值" }]
+      sources: [{ value: "营养标签" }, { value: "食品官方资料" }, { value: "计算值" }],
+      dialogFormVisible: false,
+      templateLoading: false,
+      templateId: '',
+      templates: []
     }
   },
   methods: {
@@ -380,6 +418,32 @@ export default {
     },
     getInputFocus(event) {
       event.currentTarget.select();
+    },
+    handleImport() {
+      this.queryTemplates()
+      this.dialogFormVisible = true
+      this.query = ''
+      this.templateId = ''
+    },
+    queryTemplates(query='') {
+      getNutrientTemplates({ query }).then(res => {
+        this.templates = res.data.list
+      }).catch(() => {
+        this.templates = []
+      })
+    },
+    submitFromTemplate() {
+      this.templateLoading = true
+      importNutrientsFromTemplate(this.foodId, { templateId: this.templateId }).then(res => {
+        this.fetchData()
+        this.$notify.success("提交成功")
+        this.dialogFormVisible = false
+        this.templateLoading = false
+      }).catch(res => {
+        this.$message.error(res.data.message)
+        this.templateLoading = false
+        this.dialogFormVisible = false
+      })
     }
   }
 }

src/views/nutrientTemplate/detail.vue

@@ -1,54 +1,59 @@
 <template>
   <div class="app-container">
     <div class="filter-container">
-      营养素：
-      <el-select
-        ref="nutrientSelect"
-        v-model="params.nutrientId"
-        filterable
-        remote
-        reserve-keyword
-        style="width: 200px;margin-left: 10px;"
-        placeholder="请输入营养素关键词"
-        :remote-method="queryNutrients"
-        :loading="loading"
-      >
-        <el-option v-for="item in nutrients" :key="item.id" :label="item.name" :value="item.id" />
-      </el-select>
-      营养素计量单位：
-      <el-autocomplete
-        class="inline-input"
-        v-model="params.unit"
-        :fetch-suggestions="queryNutrientUnits"
-        placeholder="单位关键词"
-      />
-      Nv_Spec计量:
-      <el-input
-        v-model="params.nvSpec"
-        style="width: 80px;"
-        class="filter-item"
-      />
-      Nv_Spec计量单位：
-      <el-autocomplete
-        class="inline-input"
-        v-model="params.nvSpecUnit"
-        :fetch-suggestions="queryUnits"
-        placeholder="单位关键词"
-      />
-      信息来源：
-      <el-autocomplete
-        v-model="params.source"
-        :fetch-suggestions="querySources"
-        placeholder="请输入信息来源"
-      />
-      <el-button
-        class="filter-item"
-        style="margin-left: 10px;"
-        type="primary"
-        @click="addNutrient"
-      >
-        添加
-      </el-button>
+      <el-row>
+        营养素：
+        <el-select
+          ref="nutrientSelect"
+          v-model="params.nutrientId"
+          filterable
+          remote
+          reserve-keyword
+          style="width: 200px;margin-left: 10px;"
+          placeholder="请输入营养素关键词"
+          :remote-method="queryNutrients"
+          :loading="loading"
+        >
+          <el-option v-for="item in nutrients" :key="item.id" :label="item.name" :value="item.id" />
+        </el-select>
+        营养素计量单位：
+        <el-autocomplete
+          class="inline-input"
+          v-model="params.unit"
+          :fetch-suggestions="queryNutrientUnits"
+          placeholder="单位关键词"
+        />
+      </el-row>
+      <el-row style="margin-top: 10px">
+        Nv_Spec计量:
+        <el-input
+          v-model="params.nvSpec"
+          style="width: 80px;"
+          class="filter-item"
+        />
+        Nv_Spec计量单位：
+        <el-autocomplete
+          class="inline-input"
+          v-model="params.nvSpecUnit"
+          :fetch-suggestions="queryUnits"
+          placeholder="单位关键词"
+        />
+        信息来源：
+        <el-autocomplete
+          v-model="params.source"
+          :fetch-suggestions="querySources"
+          placeholder="请输入信息来源"
+        />
+        <el-button
+          class="filter-item"
+          style="margin-left: 10px;"
+          type="primary"
+          @click="addNutrient"
+        >
+          添加
+        </el-button>
+      </el-row>
+
 
       <el-table
         ref="detailTable"
@@ -188,7 +193,6 @@ export default {
     this.fetchNutrients()
     this.queryNutrients()
     this.$nextTick(() => {
-      this.$refs['nutrientSelect'].focus()
       this.setSort()
     })
   },