调整完页面，符合新设计的数据结构

src/views/food/nutrient.vue

@@ -1,8 +1,9 @@
 <template>
   <div class="app-container">
     <div class="filter-container">
-      营养素：
+      营养素:
       <el-select
+        ref="nutrientSelect"
         v-model="params.nutrientId"
         filterable
         remote
@@ -11,16 +12,10 @@
         placeholder="请输入营养素关键词"
         :remote-method="queryNutrients"
         :loading="loading"
-        ref="nutrientSelect"
       >
-        <el-option
-          v-for="item in nutrients"
-          :key="item.id"
-          :label="item.name"
-          :value="item.id">
-        </el-option>
+        <el-option v-for="item in nutrients" :key="item.id" :label="item.name" :value="item.id" />
       </el-select>
-      营养素计量：
+      营养素计量:
       <el-input
         v-model="params.quantity"
         style="width: 80px;"
@@ -28,16 +23,35 @@
       />
       <el-select
         v-model="params.unit"
-        style="width: 300px;margin-left: 10px;"
+        style="width: 120px;margin-left: 10px;"
+        class="filter-item"
+        filterable
+        remote
+        reserve-keyword
+        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
+        v-model="params.nvSpecUnit"
+        style="width: 120px;margin-left: 10px;"
         class="filter-item"
         filterable
         remote
         reserve-keyword
-        placeholder="请输入单位关键词"
+        placeholder="单位关键词"
         :loading="unitLoading"
         :remote-method="queryUnits"
       >
-        <el-option v-for="item in units" :key="`nutrient${item.id}`" :label="item.name" :value="item.id" />
+        <el-option v-for="item in units" :key="`nutrient${item.id}`" :label="item.name" :value="item.name" />
       </el-select>
       <el-button
         class="filter-item"
@@ -63,18 +77,18 @@
           <span>{{ row.nutrientName }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="营养素计量" align="center" width="100">
+      <el-table-column label="营养素计量" align="center" width="200">
         <template slot-scope="{row}">
-          <span>{{ row.quantity }}</span>
+          <span>{{ row.quantity + row.unit }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="单位" align="center" width="100">
+      <el-table-column label="Nv_Spec" align="center" width="200">
         <template slot-scope="{row}">
-          <span>{{ row.unitName }}</span>
+          <span>{{ row.nvSpec + row.nvSpecUnit }}</span>
         </template>
       </el-table-column>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="100">
-        <template slot-scope="{row,$index}">
+        <template slot-scope="{row}">
           <el-button size="mini" type="danger" @click="removeNutrient(row)">
             删除
           </el-button>
@@ -119,6 +133,10 @@ export default {
       getNutrientList(this.foodId).then(res => {
         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
+        }
       })
     },
     addNutrient() {

src/views/foodModifier/components/ModifierDetail.vue

@@ -8,11 +8,14 @@
         <el-form-item label="数值：" style="margin-bottom: 40px;width: 60%" prop="quantity">
           <el-input v-model="postForm.quantity" placeholder="请输入数值" />
         </el-form-item>
-        <el-form-item label="单位名称：" style="margin-bottom: 40px;width: 60%" prop="unitName">
-          <el-input v-model="postForm.unitName" placeholder="请输入单位名称" />
+        <el-form-item label="单位名称：" style="margin-bottom: 40px;width: 60%" prop="unit">
+          <el-input v-model="postForm.unit" placeholder="请输入单位名称" />
         </el-form-item>
         <el-form-item label="推荐摄入量：" style="margin-bottom: 40px;width: 60%" prop="inInit">
-          <el-input v-model="postForm.inInit" placeholder="请输入单位名称" />
+          <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-form-item>
         <el-form-item label="最小刻度：" prop="minScale" style="margin-bottom: 40px;width: 60%">
           <el-input v-model="postForm.minScale" placeholder="请输入最小刻度" />
@@ -40,96 +43,84 @@
 </template>
 
 <script>
-  import Dropzone from '@/components/Dropzone'
-  import { addFoodModifier, updateFoodModifier, getFoodModifier } from '@/api/food'
+import Dropzone from '@/components/Dropzone'
+import { addFoodModifier, updateFoodModifier, getFoodModifier } from '@/api/food'
 
-  export default {
-    name: "ModifierDetail",
-    props: {
-      isEdit: {
-        type: Boolean,
-        default: false
-      }
+export default {
+  name: "ModifierDetail",
+  props: {
+    isEdit: {
+      type: Boolean,
+      default: false
+    }
+  },
+  components: { Dropzone },
+  data() {
+    return {
+      postForm: {},
+      rules: {},
+      loading: false,
+      foodId: '',
+      modifierId: ''
+    }
+  },
+  created() {
+    this.foodId = this.$route.params && this.$route.params.id
+    if (this.isEdit) {
+      this.modifierId = this.$route.params && this.$route.params.modifierId
+      this.fetchData()
+    }
+  },
+  methods: {
+    fetchData() {
+      getFoodModifier(this.foodId, this.modifierId).then(res => {
+        this.postForm = res.data
+      })
     },
-    components: { Dropzone },
-    created() {
-      this.foodId = this.$route.params && this.$route.params.id
-      if (this.isEdit) {
-        this.modifierId = this.$route.params && this.$route.params.modifierId
-        this.fetchData()
+    removeFile(file) {
+      let imgs = this.postForm.images
+      let imgIndex = -1
+      for (let i = 0; i < imgs.length; i++) {
+        if (imgs[i] === file.fileUrl) {
+          imgIndex = i
+          break
+        }
       }
+      imgs.splice(imgIndex, 1)
     },
-    data() {
-      return {
-        postForm: {},
-        rules: {},
-        loading: false,
-        foodId: '',
-        modifierId: ''
+    addFile(file) {
+      if (this.postForm.images) {
+        this.postForm.images.push(file.fileUrl)
+      } else {
+        this.postForm.images = [file.fileUrl]
       }
     },
-    methods: {
-      fetchData() {
-        getFoodModifier(this.foodId, this.modifierId).then(res => {
-          this.postForm = res.data
-        })
-      },
-      removeFile(file) {
-        let imgs = this.postForm.images
-        let imgIndex = -1
-        for (let i = 0; i < imgs.length; i++) {
-          if (imgs[i] === file.fileUrl) {
-            imgIndex = i
-            break
-          }
-        }
-        imgs.splice(imgIndex, 1)
-      },
-      addFile(file) {
-        if (this.postForm.images) {
-          this.postForm.images.push(file.fileUrl)
+    submitForm() {
+      this.loading = true
+      this.postForm.foodId = this.foodId
+      this.$refs['postForm'].validate((valid) => {
+        if (valid) {
+          this.createOrUpdateData()
         } else {
-          this.postForm.images = [file.fileUrl]
-        }
-      },
-      submitForm() {
-        this.loading = true
-        this.postForm.foodId = this.foodId
-        this.$refs['postForm'].validate((valid) => {
-          if (valid) {
-            if (this.isEdit) {
-              this.updateData()
-            } else {
-              this.createData()
-            }
-          } else {
-            this.$notify({ title: '失败', message: '必填字段为空', type: 'error', duration: 2000 })
-            this.loading = false
-          }
-        })
-      },
-      createData() {
-        addFoodModifier(this.foodId, this.postForm).then(res => {
-          this.$message.success('创建成功')
-          this.loading = false
-          this.$router.push({ path: `/food/${this.foodId}/modifier` })
-        }).catch(res => {
-          this.$message.error(res.data.message)
-          this.loading = false
-        })
-      },
-      updateData() {
-        updateFoodModifier(this.foodId, this.postForm.id, this.postForm).then(res => {
-          this.$message.success('更新成功')
+          this.$message.error('必填字段为空')
           this.loading = false
-          this.$router.push({ path: `/food/${this.foodId}/modifier` })
-        }).catch(res => {
-          this.$message.error(res.data.message)
-          this.loading = false
-        })
-      },
+        }
+      })
+    },
+    createOrUpdateData() {
+      const resultPromise = this.isEdit ? updateFoodModifier(this.foodId, this.postForm.id, this.postForm) :
+        addFoodModifier(this.foodId, this.postForm)
+      resultPromise.then(res => {
+        this.$message.success('创建成功')
+        this.loading = false
+        this.$router.push({ path: `/food/${this.foodId}/modifier` })
+      }).catch(res => {
+        this.$message.error(res.data.message)
+        this.loading = false
+      })
     }
   }
+}
 </script>
 
 <style scoped lang="scss">

src/views/foodModifier/index.vue

@@ -29,12 +29,12 @@
       </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">
         <template slot-scope="{row}">
-          <span>{{ row.inInit }}</span>
+          <span>{{ row.inInit + row.inInitUnit }}</span>
         </template>
       </el-table-column>
       <el-table-column label="最小刻度" align="center" width="80px">
@@ -63,11 +63,11 @@
         </template>
       </el-table-column>
       <el-table-column label="操作" align="center" class-name="small-padding">
-        <template slot-scope="{row,$index}">
+        <template slot-scope="{row}">
           <el-button type="primary" size="mini" @click="handleUpdate(row)">
             更新
           </el-button>
-          <el-button size="mini" type="danger" @click="handleDelete(row, $index)">
+          <el-button size="mini" type="danger" @click="handleDelete(row)">
             删除
           </el-button>
         </template>
@@ -80,7 +80,7 @@
 import { getFoodModifiers, removeFoodModifier } from '@/api/food'
 
 export default {
-  name: 'Index',
+  name: 'FoodModifierIndex',
   data() {
     return {
       listLoading: false,