src/api/food.js

@@ -52,6 +52,15 @@ export function addFoodNutrient(id, data) {
   })
 }
 
+// 更新食物关联的营养素
+export function updateFoodNutrient(id, nutrientId, data) {
+  return request({
+    url: `/api/foods/${id}/nutrients/${nutrientId}`,
+    method: 'post',
+    data
+  })
+}
+
 // 删除食物关联的营养素
 export function removeFoodNutrient(foodId, nutrientId) {
   return request({
@@ -136,11 +145,11 @@ export function removeFoodUnit(id, data) {
   })
 }
 
-// 查询食物信息，用于菜谱食物选择
-export function getFoodBriefInfos(params) {
+// 获取食物允许填入的单位列表
+export function getFoodAllUnits(id) {
   return request({
-    url: `/api/foods/brief-infos`,
-    method: 'get',
-    params
+    url: `/api/foods/${id}/unit-names`,
+    method: 'get'
   })
 }
+

src/api/nutrientTemplate.js

@@ -52,6 +52,24 @@ export function addTemplateNutrient(id, data) {
   })
 }
 
+// 更新模板关联的营养素
+export function updateTemplateNutrient(id, nutrientId, data) {
+  return request({
+    url: `/api/nutrient-templates/${id}/nutrients/${nutrientId}`,
+    method: 'post',
+    data
+  })
+}
+
+// 更新模板管理的营养素的排序
+export function updateTemplateNutrientSort(id, nutrientId, data) {
+  return request({
+    url: `/api/nutrient-templates/${id}/nutrients/${nutrientId}/sorts`,
+    method: 'post',
+    data
+  })
+}
+
 // 上移下移
 export function updateSort(id, data) {
   return request({

src/icons/svg/recipe.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1027 1024" version="1.1"><path d="M989.781546 1024H41.368579c-15.321696 0-28.089776-12.76808-28.089776-28.089776V40.857855c0-15.321696 12.76808-28.089776 28.089776-28.089775h948.412967c15.321696 0 28.089776 12.76808 28.089776 28.089775v955.052369c0 15.321696-12.76808 28.089776-28.089776 28.089776z m-920.323192-56.179551h892.233417v-898.872818H69.458354v898.872818z" p-id="2503"></path><path d="M803.878304 260.979551h-474.972568c-15.321696 0-28.089776-12.76808-28.089776-28.089775s12.76808-28.089776 28.089776-28.089776h474.972568c15.321696 0 28.089776 12.76808 28.089776 28.089776s-12.76808 28.089776-28.089776 28.089775zM803.878304 433.60399h-474.972568c-15.321696 0-28.089776-12.76808-28.089776-28.089776s12.76808-28.089776 28.089776-28.089775h474.972568c15.321696 0 28.089776 12.76808 28.089776 28.089775s-12.76808 28.089776-28.089776 28.089776zM803.878304 899.383541h-474.972568c-15.321696 0-28.089776-12.76808-28.089776-28.089775s12.76808-28.089776 28.089776-28.089776h474.972568c15.321696 0 28.089776 12.76808 28.089776 28.089776s-12.76808 28.089776-28.089776 28.089775zM981.099252 772.72419H49.54015c-15.321696 0-28.089776-12.76808-28.089776-28.089776s12.76808-28.089776 28.089776-28.089776h931.559102c15.321696 0 28.089776 12.76808 28.089775 28.089776s-12.76808 28.089776-28.089775 28.089776z" p-id="2504"></path><path d="M219.610973 229.825436m-30.643392 0a30.643392 30.643392 0 1 0 61.286783 0 30.643392 30.643392 0 1 0-61.286783 0Z" p-id="2505"></path><path d="M219.610973 405.514214m-30.643392 0a30.643392 30.643392 0 1 0 61.286783 0 30.643392 30.643392 0 1 0-61.286783 0Z" p-id="2506"></path><path d="M219.610973 871.293766m-30.643392 0a30.643392 30.643392 0 1 0 61.286783 0 30.643392 30.643392 0 1 0-61.286783 0Z" p-id="2507"></path></svg>

src/router/config.js

@@ -23,7 +23,7 @@ export const asyncRouterMap = [
         path: '',
         name: '菜谱列表',
         component: () => import('@/views/recipe/index'),
-        meta: { title: '菜谱列表', icon: 'dashboard' }
+        meta: { title: '菜谱列表', icon: 'recipe' }
       },
       {
         path: ':id/food',
@@ -49,27 +49,27 @@ export const asyncRouterMap = [
         path: '',
         name: '食物列表',
         component: () => import('@/views/food/index'),
-        meta: { title: '食物列表', icon: 'dashboard' }
+        meta: { title: '食物列表', icon: 'food' }
       },
       {
         path: 'create',
         name: '食物创建',
         component: () => import('@/views/food/create'),
-        meta: { title: '食物创建', icon: 'dashboard' },
+        meta: { title: '食物创建', icon: 'food' },
         hidden: true
       },
       {
         path: 'edit/:id',
         name: '食物编辑',
         component: () => import('@/views/food/edit'),
-        meta: { title: '食物编辑', icon: 'dashboard' },
+        meta: { title: '食物编辑', icon: 'food' },
         hidden: true
       },
       {
         path: ':id/nutrient',
         name: '营养素关联',
         component: () => import('@/views/food/nutrient'),
-        meta: { title: '营养素关联', icon: 'dashboard' },
+        meta: { title: '营养素关联', icon: 'food' },
         hidden: true
       },
       {
@@ -111,7 +111,7 @@ export const asyncRouterMap = [
         path: '',
         name: '营养素列表',
         component: () => import('@/views/nutrient/index'),
-        meta: { title: '营养素列表', icon: 'dashboard' }
+        meta: { title: '营养素列表', icon: 'nutrient' }
       }
     ]
   },
@@ -124,7 +124,7 @@ export const asyncRouterMap = [
         path: '',
         name: '单位列表',
         component: () => import('@/views/unit/index'),
-        meta: { title: '单位列表', icon: 'dashboard' }
+        meta: { title: '单位列表', icon: 'unit' }
       }
     ]
   },
@@ -138,7 +138,7 @@ export const asyncRouterMap = [
         path: '',
         name: '用户列表',
         component: () => import('@/views/user/index'),
-        meta: { title: '用户列表', icon: 'dashboard' }
+        meta: { title: '用户列表', icon: 'user' }
       }
     ]
   },
@@ -151,7 +151,7 @@ export const asyncRouterMap = [
         path: '',
         name: '营养素模板列表',
         component: () => import('@/views/nutrientTemplate/index'),
-        meta: { title: '营养素模板列表', icon: 'dashboard' }
+        meta: { title: '营养素模板列表', icon: 'template' }
       },
       {
         path: ':id/detail',

src/settings.js

@@ -1,6 +1,6 @@
 module.exports = {
 
-  title: 'Vue Admin Template',
+  title: 'FEUC',
 
   /**
    * @type {boolean} true | false

src/views/food/nutrient.vue

@@ -8,6 +8,7 @@
         filterable
         remote
         reserve-keyword
+        :default-first-option="true"
         style="width: 200px;margin-left: 10px;"
         placeholder="请输入营养素关键词"
         :remote-method="queryNutrients"
@@ -21,38 +22,24 @@
         style="width: 80px;"
         class="filter-item"
       />
-      <el-select
+      <el-autocomplete
+        class="inline-input"
         v-model="params.unit"
-        style="width: 120px;margin-left: 10px;"
-        class="filter-item"
-        filterable
-        remote
-        reserve-keyword
+        :fetch-suggestions="queryUnits"
         placeholder="单位关键词"
-        :loading="unitLoading"
-        :remote-method="queryUnits"
-      >
-        <el-option v-for="item in units" :key="`nutrient${item.id}`" :label="item.name" :value="item.name" />
-      </el-select>
+      />
       Nv_Spec计量:
       <el-input
         v-model="params.nvSpec"
         style="width: 80px;"
         class="filter-item"
       />
-      <el-select
+      <el-autocomplete
+        class="inline-input"
         v-model="params.nvSpecUnit"
-        style="width: 120px;margin-left: 10px;"
-        class="filter-item"
-        filterable
-        remote
-        reserve-keyword
+        :fetch-suggestions="queryUnits"
         placeholder="单位关键词"
-        :loading="unitLoading"
-        :remote-method="queryUnits"
-      >
-        <el-option v-for="item in units" :key="`nutrient${item.id}`" :label="item.name" :value="item.name" />
-      </el-select>
+      />
       <el-button
         class="filter-item"
         style="margin-left: 10px;"
@@ -77,21 +64,62 @@
           <span>{{ row.nutrientName }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="营养素计量" align="center" width="200">
+      <el-table-column label="营养素计量" align="center" width="80">
         <template slot-scope="{row}">
-          <span>{{ row.quantity + row.unit }}</span>
+          <template v-if="row.edit">
+            <el-input v-model="row.quantity" class="filter-item" />
+          </template>
+          <span v-else>{{ row.quantity }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="Nv_Spec" align="center" width="200">
+      <el-table-column label="计量单位" align="center" width="150">
         <template slot-scope="{row}">
-          <span>{{ row.nvSpec + row.nvSpecUnit }}</span>
+          <template v-if="row.edit">
+            <el-autocomplete v-model="row.unit" :fetch-suggestions="queryUnits" placeholder="单位关键词" />
+          </template>
+          <span v-else>{{ row.unit }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="100">
+      <el-table-column label="Nv_Spec" align="center" width="80">
         <template slot-scope="{row}">
-          <el-button size="mini" type="danger" @click="removeNutrient(row)">
-            删除
-          </el-button>
+          <template v-if="row.edit">
+            <el-input v-model="row.nvSpec" class="filter-item" />
+          </template>
+          <span v-else>{{ row.nvSpec }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="计量单位" align="center" width="150">
+        <template slot-scope="{row}">
+          <template v-if="row.edit">
+            <el-autocomplete v-model="row.nvSpecUnit" :fetch-suggestions="queryUnits" placeholder="单位关键词" />
+          </template>
+          <span v-else>{{ row.nvSpecUnit }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="160">
+        <template slot-scope="{row}">
+          <template v-if="row.edit">
+            <el-button
+              type="success"
+              size="mini"
+              @click="confirmEdit(row)"
+            >
+              提交
+            </el-button>
+            <el-button
+              type="danger"
+              size="mini"
+              @click="fetchData"
+            >
+              取消
+            </el-button>
+          </template>
+          <template v-else>
+            <el-button size="mini" type="primary" @click="row.edit=true">编辑</el-button>
+            <el-button size="mini" type="danger" @click="removeNutrient(row)">
+              删除
+            </el-button>
+          </template>
         </template>
       </el-table-column>
     </el-table>
@@ -99,7 +127,7 @@
 </template>
 
 <script>
-import { getNutrientList, addFoodNutrient, removeFoodNutrient } from '@/api/food'
+import { getNutrientList, addFoodNutrient, updateFoodNutrient, removeFoodNutrient } from '@/api/food'
 import { getList } from '@/api/nutrient'
 import { getList as getUnits } from '@/api/unit'
 
@@ -108,6 +136,7 @@ export default {
   created() {
     this.foodId = this.$route.params && this.$route.params.id
     this.fetchData()
+    this.queryNutrients()
   },
   mounted() {
     this.$nextTick(() => {
@@ -134,18 +163,29 @@ export default {
         this.list = res.data
         this.listLoading = false
         if (this.list.length > 0) {
-          this.params.nvSpec = this.list[0].nvSpec
-          this.params.nvSpecUnit = this.list[0].nvSpecUnit
+          this.$set(this.params, "nvSpec", this.list[0].nvSpec)
+          this.$set(this.params, "nvSpecUnit", this.list[0].nvSpecUnit)
+        } else {
+          this.$set(this.params, 'nvSpec', null)
+          this.$set(this.params, 'nvSpecUnit', null)
         }
       })
     },
     addNutrient() {
       this.params.foodId = this.foodId
       addFoodNutrient(this.foodId, this.params).then(res => {
-        this.fetchData()
         this.params = {}
+        this.fetchData()
         this.$notify.success('添加营养素成功')
-        this.$refs.firstInput.focus()
+        this.$refs.nutrientSelect.focus()
+      }).catch(res => {
+        this.$message.error(res.data.message)
+      })
+    },
+    confirmEdit(row) {
+      updateFoodNutrient(this.foodId, row.nutrientId, row).then(res => {
+        this.fetchData()
+        this.$notify.success('提交成功')
       }).catch(res => {
         this.$message.error(res.data.message)
       })
@@ -166,13 +206,13 @@ export default {
         this.nutrients = []
       })
     },
-    queryUnits(query) {
+    queryUnits(query, cb) {
+      let units = []
       getUnits({ query }).then(res => {
-        this.units = res.data.list
-      }).catch(() => {
-        this.units = []
+        res.data.list.forEach(item => units.push({ value: item.name }))
+        cb(units)
       })
-    },
+    }
   }
 }
 </script>

src/views/food/unit.vue

@@ -2,37 +2,20 @@
   <div class="app-container">
     <div class="filter-container">
       From单位：
-      <el-select
+      <el-autocomplete
         ref="fromUnitSelect"
+        class="inline-input"
         v-model="params.fromUnit"
-        filterable
-        reserve-keyword
-        style="width: 200px;margin-left: 10px;"
-        placeholder="请输入单位关键词"
-      >
-        <el-option
-          v-for="item in units"
-          :key="item.id"
-          :label="item.name"
-          :value="item.name"
-        />
-      </el-select>
+        :fetch-suggestions="queryUnits"
+        placeholder="单位关键词"
+      />
       To单位：
-      <el-select
-        ref="toUnitSelect"
+      <el-autocomplete
+        class="inline-input"
         v-model="params.toUnit"
-        filterable
-        reserve-keyword
-        style="width: 200px;margin-left: 10px;"
-        placeholder="请输入单位关键词"
-      >
-        <el-option
-          v-for="item in units"
-          :key="item.id"
-          :label="item.name"
-          :value="item.name"
-        />
-      </el-select>
+        :fetch-suggestions="queryUnits"
+        placeholder="单位关键词"
+      />
       转换率:
       <el-input v-model="params.ratio" placeholder="1 FromUnit = * ToUnit" style="width: 200px" />
       <el-button
@@ -66,17 +49,32 @@
       </el-table-column>
       <el-table-column label="转换率" align="center">
         <template slot-scope="{row}">
-          <span>{{ row.ratio }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="备注" align="center">
-        <template slot-scope="{row}">
-          <span>{{ row.note }}</span>
+          <template v-if="row.edit">
+            <el-input v-model="row.ratio" placeholder="1 FromUnit = * ToUnit" />
+          </template>
+          <span v-else>{{ row.ratio }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="100">
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="160">
         <template slot-scope="{row}">
-          <el-button size="mini" type="danger" @click="removeFoodUnit(row)">
+          <el-button
+            v-if="row.edit"
+            type="success"
+            size="mini"
+            @click="confirmEdit(row)"
+          >
+            提交
+          </el-button>
+          <el-button v-else size="mini" type="primary" @click="row.edit=true">编辑</el-button>
+          <el-button
+            v-if="row.edit"
+            type="danger"
+            size="mini"
+            @click="fetchData"
+          >
+            取消
+          </el-button>
+          <el-button v-else size="mini" type="danger" @click="removeFoodUnit(row)">
             删除
           </el-button>
         </template>
@@ -86,7 +84,7 @@
 </template>
 
 <script>
-import { getBaseUnits } from '@/api/unit'
+import { getBaseUnits, getList } from '@/api/unit'
 import { getFoodUnits, createOrUpdateFoodUnit, removeFoodUnit } from '@/api/food'
 
 export default {
@@ -119,6 +117,7 @@ export default {
       this.params.foodId = this.foodId
       createOrUpdateFoodUnit(this.foodId, this.params).then(res => {
         this.$notify.success('提交成功')
+        this.params = {}
         this.$refs.fromUnitSelect.focus()
         this.fetchData()
       }).catch(res => {
@@ -126,6 +125,14 @@ export default {
         this.fetchData()
       })
     },
+    confirmEdit(row) {
+      createOrUpdateFoodUnit(row.foodId, row).then(res => {
+        this.fetchData()
+        this.$notify.success('提交成功')
+      }).catch(res => {
+        this.$message.error(res.data.message)
+      })
+    },
     removeFoodUnit(row) {
       removeFoodUnit(this.foodId, row).then(res => {
         this.$notify.success('提交成功')
@@ -135,6 +142,13 @@ export default {
         this.$message.error(res.data.message)
         this.fetchData()
       })
+    },
+    queryUnits(query, cb) {
+      let units = []
+      getList({ query }).then(res => {
+        res.data.list.forEach(item => units.push({ value: item.name }))
+        cb(units)
+      })
     }
   }
 }

src/views/foodModifier/components/ModifierDetail.vue

@@ -9,13 +9,23 @@
           <el-input v-model="postForm.quantity" placeholder="请输入数值" />
         </el-form-item>
         <el-form-item label="单位名称：" style="margin-bottom: 40px;width: 60%" prop="unit">
-          <el-input v-model="postForm.unit" placeholder="请输入单位名称" />
+          <el-autocomplete
+            style="width: 100%"
+            v-model="postForm.unit"
+            :fetch-suggestions="queryUnits"
+            placeholder="单位关键词"
+          />
         </el-form-item>
         <el-form-item label="推荐摄入量：" style="margin-bottom: 40px;width: 60%" prop="inInit">
           <el-input v-model="postForm.inInit" placeholder="请输入推荐量" />
         </el-form-item>
         <el-form-item label="推荐量单位名称：" style="margin-bottom: 40px;width: 60%" prop="inInitUnit">
-          <el-input v-model="postForm.inInitUnit" placeholder="单位关键字" />
+          <el-autocomplete
+            style="width: 100%"
+            v-model="postForm.inInitUnit"
+            :fetch-suggestions="queryUnits"
+            placeholder="单位关键词"
+          />
         </el-form-item>
         <el-form-item label="最小刻度：" prop="minScale" style="margin-bottom: 40px;width: 60%">
           <el-input v-model="postForm.minScale" placeholder="请输入最小刻度" />
@@ -45,6 +55,7 @@
 <script>
 import Dropzone from '@/components/Dropzone'
 import { addFoodModifier, updateFoodModifier, getFoodModifier } from '@/api/food'
+import { getList as getUnits } from '@/api/unit'
 
 export default {
   name: "ModifierDetail",
@@ -118,6 +129,13 @@ export default {
         this.$message.error(res.data.message)
         this.loading = false
       })
+    },
+    queryUnits(query, cb) {
+      let units = []
+      getUnits({ query }).then(res => {
+        res.data.list.forEach(item => units.push({ value: item.name }))
+        cb(units)
+      })
     }
   }
 }

src/views/nutrientTemplate/detail.vue

@@ -16,19 +16,12 @@
         <el-option v-for="item in nutrients" :key="item.id" :label="item.name" :value="item.id" />
       </el-select>
       营养素计量单位：
-      <el-select
+      <el-autocomplete
+        class="inline-input"
         v-model="params.unit"
-        style="width: 120px;margin-left: 10px;"
-        class="filter-item"
-        filterable
-        remote
-        reserve-keyword
+        :fetch-suggestions="queryUnits"
         placeholder="单位关键词"
-        :loading="unitLoading"
-        :remote-method="queryUnits"
-      >
-        <el-option v-for="item in units" :key="`nutrient${item.id}`" :label="item.name" :value="item.name" />
-      </el-select>
+      />
       Nv_Spec计量:
       <el-input
         v-model="params.nvSpec"
@@ -36,19 +29,12 @@
         class="filter-item"
       />
       Nv_Spec计量单位：
-      <el-select
+      <el-autocomplete
+        class="inline-input"
         v-model="params.nvSpecUnit"
-        style="width: 120px;margin-left: 10px;"
-        class="filter-item"
-        filterable
-        remote
-        reserve-keyword
+        :fetch-suggestions="queryUnits"
         placeholder="单位关键词"
-        :loading="unitLoading"
-        :remote-method="queryUnits"
-      >
-        <el-option v-for="item in units" :key="`nutrient${item.id}`" :label="item.name" :value="item.name" />
-      </el-select>
+      />
       <el-button
         class="filter-item"
         style="margin-left: 10px;"
@@ -73,21 +59,73 @@
             <span>{{ row.nutrientName }}</span>
           </template>
         </el-table-column>
-        <el-table-column label="营养素计量单位" align="center" width="80px">
+        <el-table-column label="营养素计量单位" align="center" width="150px">
           <template slot-scope="{row}">
-            <span>{{ row.unit }}</span>
+            <template v-if="row.edit">
+              <el-autocomplete
+                class="inline-input"
+                v-model="row.unit"
+                :fetch-suggestions="queryUnits"
+                placeholder="单位关键词"
+              />
+            </template>
+            <span v-else>{{ row.unit }}</span>
           </template>
         </el-table-column>
-        <el-table-column label="Nv_Spec" align="center" width="300px">
+        <el-table-column label="Nv_Spec" align="center" width="100px">
           <template slot-scope="{row}">
-            <span>{{ row.nvSpec + row.nvSpecUnit }}</span>
+            <template v-if="row.edit">
+              <el-input
+                v-model="row.nvSpec"
+                class="filter-item"
+              />
+            </template>
+            <span v-else>{{ row.nvSpec }}</span>
           </template>
         </el-table-column>
-        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="100px">
+        <el-table-column label="Nv_Spec单位" align="center" width="150px">
           <template slot-scope="{row}">
-            <el-button size="mini" type="danger" @click="removeNutrient(row)">
-              删除
-            </el-button>
+            <template v-if="row.edit">
+              <el-autocomplete
+                class="inline-input"
+                v-model="row.nvSpecUnit"
+                :fetch-suggestions="queryUnits"
+                placeholder="单位关键词"
+              />
+            </template>
+            <span v-else>{{ row.nvSpecUnit }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="320px">
+          <template slot-scope="{row}">
+            <template v-if="row.edit">
+              <el-button
+                type="success"
+                size="mini"
+                @click="confirmEdit(row)"
+              >
+                提交
+              </el-button>
+              <el-button
+                type="danger"
+                size="mini"
+                @click="fetchNutrients"
+              >
+                取消
+              </el-button>
+            </template>
+            <template v-else>
+              <el-button size="mini" type="primary" @click="row.edit=true">编辑</el-button>
+              <el-button type="primary" size="mini" @click="updateSort(row, 0)">
+                上移
+              </el-button>
+              <el-button type="primary" size="mini" @click="updateSort(row, 1)">
+                下移
+              </el-button>
+              <el-button size="mini" type="danger" @click="removeNutrient(row)">
+                删除
+              </el-button>
+            </template>
           </template>
         </el-table-column>
       </el-table>
@@ -98,7 +136,8 @@
 <script>
 import { getList } from '@/api/nutrient'
 import { getList as getUnits } from '@/api/unit'
-import { getNutrients, addTemplateNutrient, removeNutrient } from '@/api/nutrientTemplate'
+import { getNutrients, addTemplateNutrient, updateTemplateNutrient, removeNutrient,
+  updateTemplateNutrientSort } from '@/api/nutrientTemplate'
 
 export default {
   name: 'Detail',
@@ -123,6 +162,7 @@ export default {
       this.$router.push({ path: '/nutrient-template' })
     }
     this.fetchNutrients()
+    this.queryNutrients()
     this.$nextTick(() => {
       this.$refs['nutrientSelect'].focus()
     })
@@ -144,6 +184,23 @@ export default {
         this.$message.error('未选择营养素')
       }
     },
+    confirmEdit(row) {
+      updateTemplateNutrient(this.templateId, row.nutrientId, row).then(res => {
+        this.fetchNutrients()
+        this.$notify.success('提交成功')
+      }).catch(res => {
+        this.$message.error(res.data.message)
+      })
+    },
+    updateSort(row, type) {
+      updateTemplateNutrientSort(this.templateId, row.nutrientId, { type }).then(res => {
+        this.fetchNutrients()
+        this.$notify.success('提交成功')
+      }).catch(res => {
+        this.fetchNutrients()
+        this.$message.error(res.data.message)
+      })
+    },
     queryNutrients(query) {
       getList({ query }).then(res => {
         this.nutrients = res.data.list
@@ -151,11 +208,11 @@ export default {
         this.nutrients = []
       })
     },
-    queryUnits(query) {
+    queryUnits(query, cb) {
+      let units = []
       getUnits({ query }).then(res => {
-        this.units = res.data.list
-      }).catch(() => {
-        this.units = []
+        res.data.list.forEach(item => units.push({ value: item.name }))
+        cb(units)
       })
     },
     fetchNutrients() {

src/views/recipe/food.vue

@@ -28,7 +28,7 @@
         class="filter-item"
       />
       <el-select
-        v-model="params.unitName"
+        v-model="params.unit"
         style="width: 200px;margin-left: 10px;"
       >
         <el-option
@@ -67,7 +67,7 @@
       </el-table-column>
       <el-table-column label="用量" align="center">
         <template slot-scope="{row}">
-          <span>{{ row.quantity + row.unitName }}</span>
+          <span>{{ row.quantity + row.unit }}</span>
         </template>
       </el-table-column>
       <el-table-column label="主材/辅材" align="center">
@@ -87,7 +87,7 @@
 </template>
 
 <script>
-import { getFoodBriefInfos } from '@/api/food'
+import { getList, getFoodAllUnits } from '@/api/food'
 import { getRecipeFoods, addFood, removeRecipeFood } from '@/api/recipe'
 
 const foodTypeMapping = { 0: '主材', 1: '辅材' }
@@ -129,7 +129,7 @@ export default {
       })
     },
     queryFoods(query) {
-      getFoodBriefInfos({ query }).then(res => {
+      getList({ query }).then(res => {
         this.foods = res.data.list
       }).catch(() => {
         this.foods = []
@@ -137,15 +137,12 @@ export default {
     },
     changeUnits(value) {
       this.units = []
-      for (let i=0; i < this.foods.length; i++) {
-        if (this.foods[i].id === value){
-          this.units = this.foods[i].unitNames
-          break
-        }
-      }
+      getFoodAllUnits(value).then(res => {
+        this.units = res.data.list
+      })
     },
     addFood() {
-      if (!this.params.foodId || !this.params.unitName || !this.params.quantity) {
+      if (!this.params.foodId || !this.params.unit || !this.params.quantity) {
         this.$message.error('请完善录入信息')
         return
       }

vue.config.js

@@ -6,7 +6,7 @@ function resolve(dir) {
   return path.join(__dirname, dir)
 }
 
-const name = defaultSettings.title || 'vue Admin Template' // page title
+const name = defaultSettings.title || 'FEUC' // page title
 
 // If your port is set to 80,
 // use administrator privileges to execute the command line.