优化食物营养素计量录入，允许录入范围和误差

src/views/food/nutrient.vue

@@ -16,8 +16,24 @@
       >
         <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"
@@ -70,12 +86,32 @@
           <span>{{ row.nutrientName }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="营养素计量" align="center" width="80">
+      <el-table-column label="营养素计量" align="center" :width="150">
         <template slot-scope="{row}">
           <template v-if="row.edit">
-            <el-input v-model="row.quantity" class="filter-item" />
+            <el-radio v-model="row.radio" :label="0" @change="radioChange(row)">值</el-radio>
+            <el-radio v-model="row.radio" :label="1" @change="radioChange(row)">范围</el-radio>
+            <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.quantityMax" />
+            </div>
+            <div v-else-if="row.radio === 2" style="display: inline-block">
+              基准：
+              <el-input v-model="row.quantity" />
+              ±：
+              <el-input v-model="row.stdError" />
+            </div>
+            <el-input
+              v-else
+              v-model="row.quantity"
+              style="width: 80px;"
+              class="filter-item"
+            />
           </template>
-          <span v-else>{{ row.quantity }}</span>
+          <span v-else>{{ row | nutrientQuantityFilter }}</span>
         </template>
       </el-table-column>
       <el-table-column label="计量单位" align="center" width="150">
@@ -141,7 +177,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="primary" @click="updateSort(row, 0)">上移</el-button>
             <el-button size="mini" type="primary" @click="updateSort(row, 1)">下移</el-button>
             <el-button size="mini" type="danger" @click="removeNutrient(row)">
@@ -167,6 +203,21 @@ export default {
     this.fetchData()
     this.queryNutrients()
   },
+  filters: {
+    nutrientQuantityFilter(row) {
+      if (row.stdError) {
+        return `${row.quantity} ± ${row.stdError}`
+      }else if (row.quantityMin && row.quantityMax) {
+        return `${row.quantityMin} ~ ${row.quantityMax}`
+      } else if (row.quantityMin) {
+        return `≥${row.quantityMin}`
+      } else if (row.quantityMax) {
+        return `≤${row.quantityMax}`
+      } else {
+        return row.quantity
+      }
+    }
+  },
   mounted() {
     this.$nextTick(() => {
       this.$refs.nutrientSelect.focus()
@@ -180,7 +231,7 @@ export default {
       foodId: '',
       list: [],
       nutrients: [],
-      params: { source: '营养标签' },
+      params: { source: '营养标签', radio: 0 },
       loading: false,
       unitLoading: false,
       sources: [{ value: "营养标签" }, { value: "食品官方资料" }, { value: "计算值" }]
@@ -204,7 +255,7 @@ export default {
     addNutrient() {
       this.params.foodId = this.foodId
       addFoodNutrient(this.foodId, this.params).then(res => {
-        this.params = { source: '营养标签' }
+        this.params = { source: '营养标签', radio: 0 }
         this.fetchData()
         this.$notify.success('添加营养素成功')
         this.$refs.nutrientSelect.focus()
@@ -260,6 +311,20 @@ export default {
       return (restaurant) => {
         return (restaurant.value.toLowerCase().indexOf(query.toLowerCase()) === 0);
       };
+    },
+    handleEdit(row) {
+      this.$set(row, 'edit', true)
+      if (row.quantityMax || row.quantityMin) {
+        this.$set(row, 'radio', 0)
+      } else if (row.stdError) {
+        this.$set(row, 'radio', 1)
+      }
+    },
+    radioChange(row) {
+      this.$set(row, 'stdError', '')
+      this.$set(row, 'quantityMin', '')
+      this.$set(row, 'quantityMax', '')
+      this.$set(row, 'quantity', '')
     }
   }
 }