食物增加食物种类

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]
     }
   }
 }