优化单位搜索框

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;"
@@ -108,6 +95,7 @@ export default {
   created() {
     this.foodId = this.$route.params && this.$route.params.id
     this.fetchData()
+    this.queryNutrients()
   },
   mounted() {
     this.$nextTick(() => {
@@ -134,18 +122,21 @@ 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)
       })
@@ -166,13 +157,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
@@ -86,7 +69,7 @@
 </template>
 
 <script>
-import { getBaseUnits } from '@/api/unit'
+  import {getBaseUnits, getList as getUnits, getList} from '@/api/unit'
 import { getFoodUnits, createOrUpdateFoodUnit, removeFoodUnit } from '@/api/food'
 
 export default {
@@ -119,6 +102,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 => {
@@ -135,6 +119,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;"
@@ -97,7 +83,7 @@
 
 <script>
 import { getList } from '@/api/nutrient'
-import { getList as getUnits } from '@/api/unit'
+import { getList as getUnits, getBaseUnits } from '@/api/unit'
 import { getNutrients, addTemplateNutrient, removeNutrient } from '@/api/nutrientTemplate'
 
 export default {
@@ -123,6 +109,7 @@ export default {
       this.$router.push({ path: '/nutrient-template' })
     }
     this.fetchNutrients()
+    this.queryNutrients()
     this.$nextTick(() => {
       this.$refs['nutrientSelect'].focus()
     })
@@ -151,11 +138,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() {