package.json

@@ -16,6 +16,7 @@
   "dependencies": {
     "axios": "0.18.1",
     "core-js": "3.6.5",
+    "dropzone": "5.5.1",
     "element-ui": "2.13.2",
     "js-cookie": "2.2.0",
     "normalize.css": "7.0.0",
@@ -23,8 +24,7 @@
     "path-to-regexp": "2.4.0",
     "vue": "2.6.10",
     "vue-router": "3.0.6",
-    "vuex": "3.1.0",
-    "dropzone": "5.5.1"
+    "vuex": "3.1.0"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "4.4.4",

src/views/food/components/FoodDetail.vue

@@ -16,7 +16,16 @@
           <el-radio :label="1" v-model="postForm.foodType">辅材</el-radio>
         </el-form-item>
         <el-form-item label="ep：" prop="ep" style="margin-bottom: 40px;width: 60%">
-          <el-input v-model="postForm.ep" placeholder="请输入ep" style="width: 40%" />
+          <el-input v-model="postForm.ep" placeholder="请输入ep" style="width: 60%" />
+        </el-form-item>
+        <el-form-item label="食物种类：" prop="categoryId" style="margin-bottom: 40px;width: 60%">
+          <el-cascader
+            v-model="postForm.categoryId"
+            :options="foodCategories"
+            :props="categoriesProp"
+            @change="handleChange"
+            style="width: 60%"
+          />
         </el-form-item>
         <el-form-item label="图片列表：" prop="images" style="margin-bottom: 30px;width: 60%">
           <dropzone
@@ -67,8 +76,8 @@
 <script>
 import { create, getDetail, update } from '@/api/food'
 import Dropzone from '@/components/Dropzone'
-import { getList as getUnits } from '@/api/unit'
 import { getNutrientTemplates } from '@/api/nutrientTemplate'
+import { getFoodCategories } from '@/api/foodCategory'
 
 export default {
   name: "FoodDetail",
@@ -90,10 +99,16 @@ export default {
       dialogFormVisible: false,
       templateLoading:false,
       templates: [],
-      templateId: ''
+      templateId: '',
+      foodCategories: [],
+      categoriesProp: {
+        value: 'id',
+        expandTrigger: 'hover'
+      }
     }
   },
   created() {
+    this.fetchCategories()
     if (this.isEdit) {
       this.foodId = this.$route.params && this.$route.params.id
       this.fetchData(this.foodId)
@@ -105,6 +120,11 @@ export default {
         this.postForm = res.data
       })
     },
+    fetchCategories() {
+      getFoodCategories().then(res => {
+        this.foodCategories = res.data
+      })
+    },
     submitForm() {
       this.loading = true
       this.$refs['postForm'].validate((valid) => {
@@ -157,6 +177,9 @@ export default {
     submitFromTemplate() {
       this.postForm.templateId = this.templateId
       this.submitForm()
+    },
+    handleChange(data) {
+      this.postForm.categoryId = data[data.length - 1]
     }
   }
 }

src/views/food/index.vue

@@ -44,7 +44,7 @@
         <template slot-scope="{row}">
           <el-image
             v-if="row.images && row.images.length > 0"
-            style="width: 150px; height: 180px"
+            style="width: 150px; height: 100px"
             :src="row.images[0]"
             fit="contain"
           />

src/views/food/nutrient.vue

@@ -40,6 +40,12 @@
         :fetch-suggestions="queryUnits"
         placeholder="单位关键词"
       />
+      信息来源：
+      <el-autocomplete
+        v-model="params.source"
+        :fetch-suggestions="querySources"
+        placeholder="请输入信息来源"
+      />
       <el-button
         class="filter-item"
         style="margin-left: 10px;"
@@ -56,7 +62,7 @@
       border
       fit
       highlight-current-row
-      style="width: 60%;margin-top: 10px"
+      style="width: 100%;margin-top: 10px"
     >
       <el-table-column type="index" label="序号" align="center" width="60px" />
       <el-table-column label="营养素名称" align="center">
@@ -96,6 +102,26 @@
           <span v-else>{{ row.nvSpecUnit }}</span>
         </template>
       </el-table-column>
+      <el-table-column label="信息来源" align="center" width="200">
+        <template slot-scope="{row}">
+          <template v-if="row.edit">
+            <el-autocomplete
+              v-model="row.source"
+              :fetch-suggestions="querySources"
+              placeholder="请输入信息来源"
+            />
+          </template>
+          <span v-else>{{ row.source }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="信息来源备注" align="center" width="200">
+        <template slot-scope="{row}">
+          <template v-if="row.edit">
+            <el-input type="text" :rows="2" v-model="row.sourceNote" />
+          </template>
+          <span v-else>{{ row.sourceNote }}</span>
+        </template>
+      </el-table-column>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="320" fixed="right">
         <template slot-scope="{row}">
           <template v-if="row.edit">
@@ -156,7 +182,8 @@ export default {
       nutrients: [],
       params: {},
       loading: false,
-      unitLoading: false
+      unitLoading: false,
+      sources: [{ value: "营养标签" }, { value: "食品官方资料" }, { value: "计算值" }]
     }
   },
   methods: {
@@ -223,6 +250,16 @@ export default {
       }).catch(res => {
         this.$message.error(res.data.message)
       })
+    },
+    querySources(query, cb) {
+      let sources = this.sources
+      let results = query ? sources.filter(this.sourcesFilter(query)) : sources;
+      cb(results)
+    },
+    sourcesFilter(query) {
+      return (restaurant) => {
+        return (restaurant.value.toLowerCase().indexOf(query.toLowerCase()) === 0);
+      };
     }
   }
 }

src/views/nutrientTemplate/detail.vue

@@ -35,6 +35,12 @@
         :fetch-suggestions="queryUnits"
         placeholder="单位关键词"
       />
+      信息来源：
+      <el-autocomplete
+        v-model="params.source"
+        :fetch-suggestions="querySources"
+        placeholder="请输入信息来源"
+      />
       <el-button
         class="filter-item"
         style="margin-left: 10px;"
@@ -51,7 +57,7 @@
         border
         fit
         highlight-current-row
-        style="width: 60%;margin-top: 10px"
+        style="width: 100%;margin-top: 10px"
       >
         <el-table-column type="index" label="序号" align="center" width="60px" />
         <el-table-column label="营养素名称" align="center">
@@ -96,6 +102,8 @@
             <span v-else>{{ row.nvSpecUnit }}</span>
           </template>
         </el-table-column>
+
+
         <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="320px">
           <template slot-scope="{row}">
             <template v-if="row.edit">
@@ -152,7 +160,8 @@ export default {
       nutrients: [],
       params: {},
       loading: false,
-      unitLoading: false
+      unitLoading: false,
+      sources: [{ value: "营养标签" }, { value: "食品官方资料" }, { value: "计算值" }]
     }
   },
   created() {
@@ -241,6 +250,16 @@ export default {
         this.fetchNutrients()
         this.$message.error(res.data.message)
       })
+    },
+    querySources(query, cb) {
+      let sources = this.sources
+      let results = query ? sources.filter(this.sourcesFilter(query)) : sources;
+      cb(results)
+    },
+    sourcesFilter(query) {
+      return (restaurant) => {
+        return (restaurant.value.toLowerCase().indexOf(query.toLowerCase()) === 0);
+      };
     }
   }
 }