完成食物种类相关功能

src/api/foodCategory.js

@@ -0,0 +1,35 @@
+import request from '@/utils/request'
+
+// 获取食物种类列表
+export function getFoodCategories() {
+  return request({
+    url: '/api/food-categories',
+    method: 'get'
+  })
+}
+
+// 新增食物种类
+export function createFoodCategory(data) {
+  return request({
+    url: '/api/food-categories',
+    method: 'post',
+    data
+  })
+}
+
+// 更新食物种类
+export function updateFoodCategory(id, data) {
+  return request({
+    url: `/api/food-categories/${id}`,
+    method: 'post',
+    data
+  })
+}
+
+// 删除食物种类
+export function removeFoodCategory(id) {
+  return request({
+    url: `/api/food-categories/${id}`,
+    method: 'delete'
+  })
+}

src/router/config.js

@@ -163,6 +163,19 @@ export const asyncRouterMap = [
     ]
   },
 
+  {
+    path: '/food-category',
+    component: Layout,
+    children: [
+      {
+        path: '',
+        name: '食物种类管理',
+        component: () => import('@/views/foodCategory/index'),
+        meta: { title: '食物种类管理', icon: 'category' }
+      }
+    ]
+  },
+
   // 404 page must be placed at the end !!!
   { path: '*', redirect: '/404', hidden: true }
 ]

src/views/foodCategory/index.vue

@@ -0,0 +1,117 @@
+<template>
+  <div class="app-container">
+    <div class="filter-container">
+      <el-tree
+        node-key="id"
+        accordion
+        :data="categories"
+        :props="defaultProps"
+        :highlight-current="true"
+        :default-expanded-keys="['root']"
+      >
+        <span class="custom-tree-node" slot-scope="{ node, data }">
+        <span>{{ node.label }}</span>
+        <span>
+          <el-button v-if="data.id !== 'root'" type="text" size="mini" @click="appendOrEdit(data, 'edit')">更新</el-button>
+          <el-button type="text" size="mini" @click="appendOrEdit(data, 'create')">追加</el-button>
+          <el-button v-if="data.id !== 'root'" type="text" size="mini" @click="remove(data)">删除</el-button>
+        </span>
+      </span>
+      </el-tree>
+    </div>
+
+    <el-dialog :title="textMapping[dialogStatus]" :visible.sync="dialogFormVisible">
+      <el-form ref="dataForm" :rules="rules" :model="params" label-position="left" label-width="70px" style="width: 400px; margin-left:50px;">
+        <el-form-item label="编码" prop="code">
+          <el-input v-model="params.code" placeholder="请输入编码" :disabled="dialogStatus==='edit'" />
+        </el-form-item>
+        <el-form-item label="名称" prop="name">
+          <el-input v-model="params.name" placeholder="请输入名称" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogFormVisible = false">
+          取消
+        </el-button>
+        <el-button type="primary" @click="createOrUpdateData">
+          提交
+        </el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { getFoodCategories, createFoodCategory, updateFoodCategory, removeFoodCategory } from '@/api/foodCategory'
+
+export default {
+  name: 'FoodCategoryIndex',
+  data() {
+    return {
+      categories: [],
+      defaultProps: {
+        children: 'children',
+        label: 'label'
+      },
+      params: {},
+      dialogFormVisible: false,
+      dialogStatus: '',
+      textMapping: { 'create': '新建', 'edit': '更新' },
+      rules: {}
+    }
+  },
+  created() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      getFoodCategories().then(res => {
+        this.categories = [{ id: 'root', label: '食物种类', children: res.data }]
+      }).catch(res => {
+        this.$message.error('获取数据失败')
+      })
+    },
+    appendOrEdit(data, type) {
+      this.dialogStatus = type
+      this.params = type === 'create' ? { parentId: data.id } : Object.assign(data, {})
+      this.dialogFormVisible = true
+    },
+    remove(data) {
+      removeFoodCategory(data.id).then(res => {
+        this.fetchData()
+        this.$notify.success('提交成功')
+      }).catch(res => {
+        this.fetchData()
+        this.$message.error(res.data.message)
+      })
+    },
+    createOrUpdateData() {
+      if (this.params.parentId === 'root') {
+        this.params.parentId = ''
+      }
+      const resultPromise = this.dialogStatus === 'create' ? createFoodCategory(this.params) :
+        updateFoodCategory(this.params.id, this.params)
+      resultPromise.then(res => {
+        this.fetchData()
+        this.$notify.success('提交成功')
+        this.dialogFormVisible = false
+      }).catch(res => {
+        this.fetchData()
+        this.$message.error(res.data.message)
+        this.dialogFormVisible = false
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+  .custom-tree-node {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 14px;
+    padding-right: 8px;
+  }
+</style>