完成特殊营养素单位转换

src/api/nutrient.js

@@ -52,3 +52,12 @@ export function getNutrientUnits(id, params) {
     params
   })
 }
+
+// 获取特殊营养素来源列表
+export function getNutrientSources(id, params) {
+  return request({
+    url: `/api/nutrients/${id}/sources`,
+    method: 'get',
+    params
+  })
+}

src/views/food/nutrient.vue

@@ -58,9 +58,18 @@
           class="inline-input"
           v-model="params.unit"
           :fetch-suggestions="queryNutrientUnits"
+          @input="handleUnitChanged"
           placeholder="单位关键词"
         />
-        <div v-show="!isPercentByVolumeUnit(params)" style="display: inline-block">
+        <div v-show="showNutrientSource" style="display: inline-block">
+          <el-select
+            v-model="params.nutrientSource"
+            placeholder="请选择营养素来源"
+          >
+            <el-option v-for="item in nutrientSources" :key="item" :label="item" :value="item" />
+          </el-select>
+        </div>
+        <div v-show="showNRV" style="display: inline-block">
           NRV%:
           <el-input
             v-model="params.nrvPercent"
@@ -156,9 +165,17 @@
       <el-table-column label="计量单位" align="center" width="150">
         <template slot-scope="{row}">
           <template v-if="row.edit">
-            <el-autocomplete v-model="row.unit" :fetch-suggestions="queryUnits" placeholder="单位关键词" />
+            <el-autocomplete v-model="row.unit" @input="handleRowUnitChanged(row)" :fetch-suggestions="queryUnits" placeholder="单位关键词" />
+            <el-select
+              clearable
+              v-show="showRowNutrientSource"
+              v-model="row.nutrientSource"
+              placeholder="请选择营养素来源"
+            >
+              <el-option v-for="item in nutrientSources" :key="item" :label="item" :value="item" />
+            </el-select>
           </template>
-          <span v-else>{{ row.unit }}</span>
+          <span v-else>{{ row.nutrientSource ? `${row.unit}(${row.nutrientSource})` : row.unit }}</span>
         </template>
       </el-table-column>
       <el-table-column label="NRV%" align="center" width="80">
@@ -272,10 +289,13 @@ import { getNutrientList, addFoodNutrient, updateFoodNutrient, removeFoodNutrien
   updateFoodNutrientSort, confirmDeleteFoodNutrient, importNutrientsFromTemplate,
   getList as getFoodList, importNutrientFromSimilarFood } from '@/api/food'
 import FloatingWindow from '@/components/FloatingWindow'
-import { getList, getNutrientUnits } from '@/api/nutrient'
+import { getList, getNutrientUnits, getNutrientSources } from '@/api/nutrient'
 import { getList as getUnits } from '@/api/unit'
 import { getNutrientTemplates } from '@/api/nutrientTemplate'
 
+// 特殊营养素 若单位不为baseUnit，则需要填写来源
+const SPECIAL_NUTRIENT_NAMES = ['维生素A', '维生素D', '维生素E', '烟酸', '叶酸']
+
 export default {
   name: 'AddNutrient',
   components: { FloatingWindow },
@@ -324,8 +344,11 @@ export default {
       importLoading: false,
       importItems: [],
       isFixed: false,
-      offsetTop: 0
-      // isPercentByVolumeUnit: false
+      offsetTop: 0,
+      showNutrientSource: false,
+      showRowNutrientSource: false,
+      nutrientSources: [],
+      showNRV: false
     }
   },
   methods: {
@@ -436,6 +459,7 @@ export default {
       } else {
         this.$set(row, 'radio', 0)
       }
+      this.handleRowUnitChanged(row)
     },
     radioChange(row) {
       this.$set(row, 'stdError', '')
@@ -447,6 +471,11 @@ export default {
       for (let nutrient of this.nutrients) {
         if (nutrient.id === value) {
           this.$set(this.params, 'unit', nutrient.baseUnit)
+          if (nutrient.nrvUnit) {
+            this.showNRV = true
+          } else {
+            this.showNRV = false
+          }
           break
         }
       }
@@ -534,6 +563,54 @@ export default {
     },
     isPercentByVolumeUnit(row) {
       return row && row.unit === '%Vol'
+    },
+    isSpecialNutrient(nutrientId) {
+      let nutrient = null
+      for (let i = 0; i < this.nutrients.length; i++) {
+        if (this.nutrients[i].id === nutrientId) {
+          nutrient = this.nutrients[i]
+          break
+        }
+      }
+
+      // 如果特殊营养素单位不等于baseUnit，则显示来源
+      return nutrient && SPECIAL_NUTRIENT_NAMES.indexOf(nutrient.name) > -1
+    },
+    handleUnitChanged() {
+      if (this.isSpecialNutrient(this.params.nutrientId)) {
+        getNutrientSources(this.params.nutrientId, { unit: this.params.unit }).then(res => {
+          this.nutrientSources = res.data
+          if (this.nutrientSources.length > 0){
+            this.params.nutrientSource = this.nutrientSources[0]
+            this.showNutrientSource = true
+          } else {
+            this.showNutrientSource = false
+            this.params.nutrientSource = null
+          }
+        })
+      } else {
+        this.showNutrientSource = false
+        this.params.nutrientSource = null
+      }
+    },
+    handleRowUnitChanged(row) {
+      if (SPECIAL_NUTRIENT_NAMES.indexOf(row.nutrientName) > -1) {
+        getNutrientSources(row.nutrientId, { unit: row.unit }).then(res => {
+          this.nutrientSources = res.data
+          if (this.nutrientSources.length > 0){
+            if (!row.nutrientSource) {
+              row.nutrientSource = this.nutrientSources[0]
+            }
+            this.showRowNutrientSource = true
+          } else {
+            this.showRowNutrientSource = false
+            row.nutrientSource = null
+          }
+        })
+      } else {
+        this.showRowNutrientSource = false
+        row.nutrientSource = null
+      }
     }
   }
 }

src/views/nutrientTemplate/detail.vue

@@ -21,23 +21,35 @@
           class="inline-input"
           v-model="params.unit"
           :fetch-suggestions="queryNutrientUnits"
+          @input="handleUnitChanged"
           placeholder="单位关键词"
         />
+        <div v-show="showNutrientSource" style="display: inline-block">
+          营养素来源：
+          <el-select
+            v-model="params.nutrientSource"
+            placeholder="请选择营养素来源"
+          >
+            <el-option v-for="item in nutrientSources" :key="item" :label="item" :value="item" />
+          </el-select>
+        </div>
       </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="单位关键词"
-        />
+        <div v-show="!isPercentByVolumeUnit(params)" style="display: inline-block">
+          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="单位关键词"
+          />
+        </div>
         信息来源：
         <el-autocomplete
           v-model="params.source"
@@ -77,15 +89,24 @@
               <el-autocomplete
                 class="inline-input"
                 v-model="row.unit"
+                @input="handleRowUnitChanged(row)"
                 :fetch-suggestions="queryUnits"
                 placeholder="单位关键词"
               />
+              <el-select
+                clearable
+                v-show="showRowNutrientSource"
+                v-model="row.nutrientSource"
+                placeholder="请选择营养素来源"
+              >
+                <el-option v-for="item in nutrientSources" :key="item" :label="item" :value="item" />
+              </el-select>
             </template>
-            <span v-else>{{ row.unit }}</span>
+            <span v-else>{{ row.nutrientSource ? `${row.unit}(${row.nutrientSource})` : row.unit }}</span>
           </template>
         </el-table-column>
         <el-table-column label="Nv_Spec" align="center" width="100px">
-          <template slot-scope="{row}">
+          <template slot-scope="{row}" v-if="!isPercentByVolumeUnit(row)">
             <template v-if="row.edit">
               <el-input
                 v-model="row.nvSpec"
@@ -96,7 +117,7 @@
           </template>
         </el-table-column>
         <el-table-column label="Nv_Spec单位" align="center" width="150px">
-          <template slot-scope="{row}">
+          <template slot-scope="{row}" v-if="!isPercentByVolumeUnit(row)">
             <template v-if="row.edit">
               <el-autocomplete
                 class="inline-input"
@@ -147,7 +168,7 @@
               </el-button>
             </template>
             <template v-else>
-              <el-button size="mini" type="primary" @click="row.edit=true">编辑</el-button>
+              <el-button size="mini" type="primary" @click="handleEdit(row)">编辑</el-button>
               <el-button size="mini" type="danger" @click="removeNutrient(row)">
                 删除
               </el-button>
@@ -160,12 +181,15 @@
 </template>
 
 <script>
-import { getList, getNutrientUnits } from '@/api/nutrient'
+import { getList, getNutrientUnits, getNutrientSources } from '@/api/nutrient'
 import { getList as getUnits } from '@/api/unit'
 import { getNutrients, addTemplateNutrient, updateTemplateNutrient, removeNutrient,
   updateTemplateNutrientSort, updateBatchDetailSorts } from '@/api/nutrientTemplate'
 import Sortable from 'sortablejs'
 
+// 特殊营养素 若单位不为baseUnit，则需要填写来源
+const SPECIAL_NUTRIENT_NAMES = ['维生素A', '维生素D', '维生素E', '烟酸', '叶酸']
+
 export default {
   name: 'Detail',
   components: {},
@@ -177,11 +201,14 @@ export default {
       list: [],
       units: [],
       nutrients: [],
-      params: { source: '营养标签' },
+      params: { source: '营养标签', nutrientSource: null },
       loading: false,
       unitLoading: false,
       sources: [{ value: "营养标签" }, { value: "食品官方资料" }, { value: "计算值" }],
-      sortable: null
+      sortable: null,
+      showNutrientSource: false,
+      showRowNutrientSource: false,
+      nutrientSources: []
     }
   },
   created() {
@@ -202,7 +229,7 @@ export default {
         addTemplateNutrient(this.templateId, this.params).then(res => {
           this.fetchNutrients()
           this.$notify.success('添加成功')
-          this.params = { source: '营养标签' }
+          this.params = { source: '营养标签', nutrientSource: null }
           this.$nextTick(() => {
             this.$refs['nutrientSelect'].focus()
           })
@@ -318,6 +345,61 @@ export default {
           })
         }
       })
+    },
+    isSpecialNutrient(nutrientId) {
+      let nutrient = null
+      for (let i = 0; i < this.nutrients.length; i++) {
+        if (this.nutrients[i].id === nutrientId) {
+          nutrient = this.nutrients[i]
+          break
+        }
+      }
+
+      // 如果特殊营养素单位不等于baseUnit，则显示来源
+      return nutrient && SPECIAL_NUTRIENT_NAMES.indexOf(nutrient.name) > -1
+    },
+    handleUnitChanged() {
+      if (this.isSpecialNutrient(this.params.nutrientId)) {
+        getNutrientSources(this.params.nutrientId, { unit: this.params.unit }).then(res => {
+          this.nutrientSources = res.data
+          if (this.nutrientSources.length > 0){
+            this.params.nutrientSource = this.nutrientSources[0]
+            this.showNutrientSource = true
+          } else {
+            this.showNutrientSource = false
+            this.params.nutrientSource = null
+          }
+        })
+      } else {
+        this.showNutrientSource = false
+        // this.params.nutrientSource = null
+      }
+    },
+    handleRowUnitChanged(row) {
+      if (SPECIAL_NUTRIENT_NAMES.indexOf(row.nutrientName) > -1) {
+        getNutrientSources(row.nutrientId, { unit: row.unit }).then(res => {
+          this.nutrientSources = res.data
+          if (this.nutrientSources.length > 0){
+            if (!row.nutrientSource) {
+              row.nutrientSource = this.nutrientSources[0]
+            }
+            this.showRowNutrientSource = true
+          } else {
+            this.showRowNutrientSource = false
+            row.nutrientSource = null
+          }
+        })
+      } else {
+        this.showRowNutrientSource = false
+        row.nutrientSource = null
+      }
+    },
+    handleEdit(row) {
+      row.edit = true
+      this.handleRowUnitChanged(row)
+    },
+    isPercentByVolumeUnit(row) {
+      return row && row.unit === '%Vol'
     }
   }
 }