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

@@ -1,81 +1,94 @@
 <template>
   <div class="app-container">
     <div class="filter-container">
-      营养素:
-      <el-select
-        ref="nutrientSelect"
-        v-model="params.nutrientId"
-        filterable
-        remote
-        reserve-keyword
-        :default-first-option="true"
-        style="width: 200px;margin-left: 10px;"
-        placeholder="请输入营养素关键词"
-        :remote-method="queryNutrients"
-        :loading="loading"
-        @change="nutrientChanged"
-      >
-        <el-option v-for="item in nutrients" :key="item.id" :label="item.name" :value="item.id" />
-      </el-select>
-      计量:
-      <el-radio v-model="params.radio" :label="0" @change="radioChange(params)">值</el-radio>
-      <el-radio v-model="params.radio" :label="1" @change="radioChange(params)">范围</el-radio>
-      <el-radio v-model="params.radio" :label="2" @change="radioChange(params)">误差</el-radio>
-      <div v-if="params.radio === 1" style="display: inline-block">
-        大于等于:
-        <el-input v-model="params.quantityMin" style="width: 80px;" class="filter-item" />
-        小于等于:
-        <el-input v-model="params.quantityMax" style="width: 80px;" class="filter-item" />
-      </div>
-      <div v-else-if="params.radio === 2" style="display: inline-block">
-        基准：
-        <el-input v-model="params.quantity" style="width: 80px;" class="filter-item" />
-        ±：
-        <el-input v-model="params.stdError" style="width: 80px;" class="filter-item" />
-      </div>
-      <el-input
-        v-else
-        v-model="params.quantity"
-        style="width: 80px;"
-        class="filter-item"
-      />
-      <el-autocomplete
-        class="inline-input"
-        v-model="params.unit"
-        :fetch-suggestions="queryNutrientUnits"
-        placeholder="单位关键词"
-      />
-      NRV%:
-      <el-input
-        v-model="params.nrvPercent"
-        style="width: 80px;"
-        class="filter-item"
-      />
-      Nv_Spec计量:
-      <el-input
-        v-model="params.nvSpec"
-        style="width: 80px;"
-        class="filter-item"
-      />
-      <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
+          :default-first-option="true"
+          style="width: 200px;margin-left: 10px;"
+          placeholder="请输入营养素关键词"
+          :remote-method="queryNutrients"
+          :loading="loading"
+          @change="nutrientChanged"
+        >
+          <el-option v-for="item in nutrients" :key="item.id" :label="item.name" :value="item.id" />
+        </el-select>
+        计量:
+        <el-radio v-model="params.radio" :label="0" @change="radioChange(params)">值</el-radio>
+        <el-radio v-model="params.radio" :label="1" @change="radioChange(params)">范围</el-radio>
+        <el-radio v-model="params.radio" :label="2" @change="radioChange(params)">误差</el-radio>
+        <div v-if="params.radio === 1" style="display: inline-block">
+          大于等于:
+          <el-input v-model="params.quantityMin" style="width: 80px;" class="filter-item" @focus="getInputFocus" />
+          小于等于:
+          <el-input v-model="params.quantityMax" style="width: 80px;" class="filter-item" @focus="getInputFocus" />
+        </div>
+        <div v-else-if="params.radio === 2" style="display: inline-block">
+          基准：
+          <el-input v-model="params.quantity" style="width: 80px;" class="filter-item" @focus="getInputFocus" />
+          ±：
+          <el-input v-model="params.stdError" style="width: 80px;" class="filter-item" @focus="getInputFocus" />
+        </div>
+        <el-input
+          v-else
+          v-model="params.quantity"
+          style="width: 80px;"
+          class="filter-item"
+          @focus="getInputFocus"
+        />
+        <el-autocomplete
+          class="inline-input"
+          v-model="params.unit"
+          :fetch-suggestions="queryNutrientUnits"
+          placeholder="单位关键词"
+        />
+        NRV%:
+        <el-input
+          v-model="params.nrvPercent"
+          style="width: 80px;"
+          class="filter-item"
+        />
+      </el-row>
+      <el-row style="margin-top: 10px">
+        Nv_Spec计量:
+        <el-input
+          v-model="params.nvSpec"
+          style="width: 80px;"
+          class="filter-item"
+          @focus="getInputFocus"
+        />
+        <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-button
+          class="filter-item"
+          style="margin-left: 10px;"
+          type="success"
+          @click="handleImport">
+          从模板导入营养素
+        </el-button>
+      </el-row>
     </div>
 
     <el-table
@@ -86,6 +99,7 @@
       fit
       highlight-current-row
       style="width: 100%;margin-top: 10px"
+      @cell-dblclick="handleEdit"
     >
       <el-table-column type="index" label="序号" align="center" width="60px" />
       <el-table-column label="营养素名称" align="center">
@@ -101,21 +115,22 @@
             <el-radio v-model="row.radio" :label="2" @change="radioChange(row)">误差</el-radio>
             <div v-if="row.radio === 1" style="display: inline-block">
               大于等于:
-              <el-input v-model="row.quantityMin" />
+              <el-input v-model="row.quantityMin" @focus="getInputFocus" />
               小于等于:
-              <el-input v-model="row.quantityMax" />
+              <el-input v-model="row.quantityMax" @focus="getInputFocus" />
             </div>
             <div v-else-if="row.radio === 2" style="display: inline-block">
               基准：
-              <el-input v-model="row.quantity" />
+              <el-input v-model="row.quantity" @focus="getInputFocus" />
               ±：
-              <el-input v-model="row.stdError" />
+              <el-input v-model="row.stdError" @focus="getInputFocus" />
             </div>
             <el-input
               v-else
               v-model="row.quantity"
               style="width: 80px;"
               class="filter-item"
+              @focus="getInputFocus"
             />
           </template>
           <span v-else>{{ row | nutrientQuantityFilter }}</span>
@@ -140,7 +155,7 @@
       <el-table-column label="Nv_Spec" align="center" width="80">
         <template slot-scope="{row}">
           <template v-if="row.edit">
-            <el-input v-model="row.nvSpec" class="filter-item" />
+            <el-input v-model="row.nvSpec" class="filter-item" @focus="getInputFocus" />
           </template>
           <span v-else>{{ row.nvSpec }}</span>
         </template>
@@ -168,7 +183,7 @@
       <el-table-column label="信息来源备注" align="center" width="200">
         <template slot-scope="{row}">
           <template v-if="row.edit">
-            <el-input type="text" :rows="2" v-model="row.sourceNote" />
+            <el-input type="text" :rows="2" v-model="row.sourceNote" @focus="getInputFocus" />
           </template>
           <span v-else>{{ row.sourceNote }}</span>
         </template>
@@ -202,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',
@@ -233,11 +275,6 @@ export default {
       }
     }
   },
-  mounted() {
-    this.$nextTick(() => {
-      this.$refs.nutrientSelect.focus()
-    })
-  },
   data() {
     return {
       tableKey: 0,
@@ -249,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: {
@@ -374,6 +415,35 @@ export default {
           break
         }
       }
+    },
+    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/foodModifier/components/ModifierDetail.vue

@@ -3,7 +3,7 @@
     <el-form ref="postForm" :model="postForm" :rules="rules" label-position="right" label-width="90px" class="form-container">
       <div class="createPost-main-container">
         <el-form-item label="规格名称：" style="margin-bottom: 40px;width: 60%" prop="name">
-          <el-input v-model="postForm.name" placeholder="请输入名称" />
+          <el-input v-model="postForm.name" placeholder="请输入名称" @blur="updateUnit" />
         </el-form-item>
         <el-form-item label="数值：" style="margin-bottom: 40px;width: 60%" prop="quantity">
           <el-input v-model="postForm.quantity" placeholder="请输入数值" />
@@ -136,6 +136,12 @@ export default {
         res.data.list.forEach(item => units.push({ value: item.name }))
         cb(units)
       })
+    },
+    updateUnit(event) {
+      const unitName = event.target.value
+      if (!this.postForm.inInitUnit && unitName) {
+        this.$set(this.postForm, 'inInitUnit', unitName)
+      }
     }
   }
 }

src/views/foodModifier/index.vue

@@ -28,6 +28,16 @@
           <span>{{ row.name }}</span>
         </template>
       </el-table-column>
+      <el-table-column label="图片" align="center" width="180">
+        <template slot-scope="{row}">
+          <el-image
+            v-if="row.images && row.images.length > 0"
+            style="width: 150px; height: 100px"
+            :src="row.images[0]"
+            fit="contain"
+          />
+        </template>
+      </el-table-column>
       <el-table-column label="转换关系" align="center">
         <template slot-scope="{row}">
           <span v-if="row.quantity">{{ row.quantity + row.unit }}</span>

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()
     })
   },