src/api/food.js

@@ -61,6 +61,15 @@ export function updateFoodNutrient(id, nutrientId, data) {
   })
 }
 
+// 更新食物关联的营养素的排序
+export function updateFoodNutrientSort(id, nutrientId, data) {
+  return request({
+    url: `/api/foods/${id}/nutrients/${nutrientId}/sorts`,
+    method: 'post',
+    data
+  })
+}
+
 // 删除食物关联的营养素
 export function removeFoodNutrient(foodId, nutrientId) {
   return request({
@@ -95,6 +104,15 @@ export function updateFoodModifier(id, modifierId, data) {
   })
 }
 
+// 更新食物规格排序
+export function updateFoodModifierSort(id, modifierId, data) {
+  return request({
+    url: `/api/foods/${id}/modifiers/${modifierId}/sorts`,
+    method: 'post',
+    data
+  })
+}
+
 // 删除食物规格
 export function removeFoodModifier(id, modifierId) {
   return request({

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/api/recipe.js

@@ -61,6 +61,15 @@ export function updateRecipeStep(recipeId, recipeStepId, data) {
   })
 }
 
+// 更新步骤排序
+export function updateRecipeStepSort(recipeId, recipeStepId, data) {
+  return request({
+    url: `/api/recipes/${recipeId}/steps/${recipeStepId}/sort`,
+    method: 'post',
+    data
+  })
+}
+
 // 删除步骤
 export function removeRecipeStep(recipeId, recipeStepId) {
   return request({
@@ -86,6 +95,24 @@ export function addFood(recipeId, data) {
   })
 }
 
+// 更新食物
+export function updateFood(recipeId, recipeFoodId, data) {
+  return request({
+    url: `/api/recipes/${recipeId}/foods/${recipeFoodId}`,
+    method: 'post',
+    data
+  })
+}
+
+// 更新食物排序
+export function updateRecipeFoodSort(recipeId, recipeFoodId, data) {
+  return request({
+    url: `/api/recipes/${recipeId}/foods/${recipeFoodId}/sorts`,
+    method: 'post',
+    data
+  })
+}
+
 // 获取食谱的食物列表
 export function getRecipeFoods(id) {
   return request({

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/food/index.vue

@@ -34,7 +34,12 @@
       highlight-current-row
       style="width: 100%;"
     >
-      <el-table-column type="index" label="序号" align="center" width="60px" />
+      <el-table-column type="index" label="序号" align="center" fixed width="60px" />
+      <el-table-column label="名称" align="center" fixed width="200px">
+        <template slot-scope="{row}">
+          <span>{{ row.name }}</span>
+        </template>
+      </el-table-column>
       <el-table-column label="图片" align="center" width="180">
         <template slot-scope="{row}">
           <el-image
@@ -50,11 +55,6 @@
           <span>{{ row.id2 }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="名称" align="center" width="200px">
-        <template slot-scope="{row}">
-          <span>{{ row.name }}</span>
-        </template>
-      </el-table-column>
       <el-table-column label="描述" align="center" width="200">
         <template slot-scope="{row}">
           <span>{{ row.description }}</span>
@@ -80,7 +80,7 @@
           <span>{{ row.updateTime }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="操作" align="center" class-name="small-padding">
+      <el-table-column label="操作" align="center" class-name="small-padding" fixed="right" width="460">
         <template slot-scope="{row,$index}">
           <el-button type="primary" size="mini" @click="handleUpdate(row)">
             更新

src/views/food/nutrient.vue

@@ -96,7 +96,7 @@
           <span v-else>{{ row.nvSpecUnit }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="160">
+      <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">
             <el-button
@@ -116,6 +116,8 @@
           </template>
           <template v-else>
             <el-button size="mini" type="primary" @click="row.edit=true">编辑</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)">
               删除
             </el-button>
@@ -127,7 +129,8 @@
 </template>
 
 <script>
-import { getNutrientList, addFoodNutrient, updateFoodNutrient, removeFoodNutrient } from '@/api/food'
+import { getNutrientList, addFoodNutrient, updateFoodNutrient, removeFoodNutrient,
+  updateFoodNutrientSort } from '@/api/food'
 import { getList } from '@/api/nutrient'
 import { getList as getUnits } from '@/api/unit'
 
@@ -212,6 +215,14 @@ export default {
         res.data.list.forEach(item => units.push({ value: item.name }))
         cb(units)
       })
+    },
+    updateSort(row, type) {
+      updateFoodNutrientSort(this.foodId, row.nutrientId, { type }).then(res => {
+        this.$notify.success('提交成功')
+        this.fetchData()
+      }).catch(res => {
+        this.$message.error(res.data.message)
+      })
     }
   }
 }

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>

src/views/foodModifier/index.vue

@@ -21,8 +21,8 @@
       highlight-current-row
       style="width: 100%;"
     >
-      <el-table-column type="index" label="序号" align="center" width="60px" />
-      <el-table-column label="规格名称" align="center">
+      <el-table-column type="index" label="序号" align="center" fixed width="60px" />
+      <el-table-column label="规格名称" fixed align="center">
         <template slot-scope="{row}">
           <span>{{ row.name }}</span>
         </template>
@@ -62,11 +62,17 @@
           <span>{{ row.updateTime }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="操作" align="center" class-name="small-padding">
+      <el-table-column label="操作" align="center" class-name="small-padding" fixed="right" width="320">
         <template slot-scope="{row}">
           <el-button type="primary" size="mini" @click="handleUpdate(row)">
             更新
           </el-button>
+          <el-button type="primary" size="mini" @click="updateSort(row, 0)">
+            上移
+          </el-button>
+          <el-button type="primary" size="mini" @click="updateSort(row, 1)">
+            下移
+          </el-button>
           <el-button size="mini" type="danger" @click="handleDelete(row)">
             删除
           </el-button>
@@ -77,7 +83,7 @@
 </template>
 
 <script>
-import { getFoodModifiers, removeFoodModifier } from '@/api/food'
+import { getFoodModifiers, removeFoodModifier, updateFoodModifierSort } from '@/api/food'
 
 export default {
   name: 'FoodModifierIndex',
@@ -117,6 +123,14 @@ export default {
         this.$message.error('获取数据失败')
         this.listLoading = false
       })
+    },
+    updateSort(row, type) {
+      updateFoodModifierSort(this.foodId, row.id, { type }).then(res => {
+        this.$notify.success('提交成功')
+        this.fetchData()
+      }).catch(res => {
+        this.$message.error(res.data.message)
+      })
     }
   }
 }

src/views/nutrient/index.vue

@@ -31,7 +31,12 @@
       fit
       highlight-current-row
     >
-      <el-table-column type="index" label="序号" align="center" width="60" />
+      <el-table-column type="index" label="序号" align="center" fixed width="60" />
+      <el-table-column label="名称" align="center" fixed width="250">
+        <template slot-scope="{row}">
+          <span>{{ row.name }}</span>
+        </template>
+      </el-table-column>
       <el-table-column label="图片" align="center" width="180">
         <template slot-scope="{row}">
           <el-image v-if="row.coverPic" style="width: 150px; height: 180px" :src="row.coverPic" fit="contain" />
@@ -42,11 +47,6 @@
           <span>{{ row.id2 }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="名称" align="center" width="150">
-        <template slot-scope="{row}">
-          <span>{{ row.name }}</span>
-        </template>
-      </el-table-column>
       <el-table-column label="英文名称" align="center" width="150">
         <template slot-scope="{row}">
           <span>{{ row.enName }}</span>
@@ -92,7 +92,7 @@
           <span>{{ row.updateTime }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="操作" align="center" width="480">
+      <el-table-column label="操作" align="center" fixed="right" width="480">
         <template slot-scope="{row}">
           <el-button type="primary" size="mini" @click="handleCreateOrUpdate('update', row)">
             更新

src/views/nutrientTemplate/detail.vue

@@ -96,7 +96,7 @@
             <span v-else>{{ row.nvSpecUnit }}</span>
           </template>
         </el-table-column>
-        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="320px">
+        <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">
               <el-button

src/views/nutrientTemplate/index.vue

@@ -31,8 +31,8 @@
       fit
       highlight-current-row
     >
-      <el-table-column type="index" label="序号" align="center" width="60" />
-      <el-table-column label="名称" align="center" width="150">
+      <el-table-column type="index" label="序号" align="center" fixed width="60" />
+      <el-table-column label="名称" align="center" fixed width="150">
         <template slot-scope="{row}">
           <span>{{ row.name }}</span>
         </template>
@@ -57,7 +57,7 @@
           <span>{{ row.updateTime }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="操作" align="center">
+      <el-table-column label="操作" align="center" fixed="right" width="560">
         <template slot-scope="{row}">
           <el-button type="primary" size="mini" :disabled="!canUpdate(row.userId)" @click="handleCreateOrUpdate('update', row)">
             更新

src/views/recipe/food.vue

@@ -29,6 +29,7 @@
       />
       <el-select
         v-model="params.unit"
+        filterable
         style="width: 200px;margin-left: 10px;"
       >
         <el-option
@@ -67,19 +68,63 @@
       </el-table-column>
       <el-table-column label="用量" align="center">
         <template slot-scope="{row}">
-          <span>{{ row.quantity + row.unit }}</span>
+          <template v-if="row.edit">
+            <el-input v-model="row.quantity" style="width: 80px;" class="filter-item"/>
+          </template>
+          <span v-else>{{ row.quantity }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="单位" align="center">
+        <template slot-scope="{row}">
+          <template v-if="row.edit">
+            <el-select filterable v-model="row.unit">
+              <el-option v-for="item in units" :key="item" :label="item" :value="item"/>
+            </el-select>
+          </template>
+          <span v-else>{{ row.unit }}</span>
         </template>
       </el-table-column>
       <el-table-column label="主材/辅材" align="center">
         <template slot-scope="{row}">
-          <span>{{ row.foodType | foodTypeFilter }}</span>
+          <template v-if="row.edit">
+            <el-radio v-model="row.foodType" :label="0">主材</el-radio>
+            <el-radio v-model="row.foodType" :label="1">辅材</el-radio>
+          </template>
+          <span v-else>{{ row.foodType | foodTypeFilter }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="100">
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="320">
         <template slot-scope="{row}">
-          <el-button size="mini" type="danger" @click="removeFood(row)">
-            删除
-          </el-button>
+          <template v-if="row.edit">
+            <el-button
+              type="success"
+              size="mini"
+              @click="confirmEdit(row)"
+            >
+              提交
+            </el-button>
+            <el-button
+              type="danger"
+              size="mini"
+              @click="fetchData"
+            >
+              取消
+            </el-button>
+          </template>
+          <template v-else>
+            <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="removeFood(row)">
+              删除
+            </el-button>
+          </template>
         </template>
       </el-table-column>
     </el-table>
@@ -88,7 +133,7 @@
 
 <script>
 import { getList, getFoodAllUnits } from '@/api/food'
-import { getRecipeFoods, addFood, removeRecipeFood } from '@/api/recipe'
+import { getRecipeFoods, addFood, removeRecipeFood, updateRecipeFoodSort, updateFood } from '@/api/recipe'
 
 const foodTypeMapping = { 0: '主材', 1: '辅材' }
 export default {
@@ -164,6 +209,28 @@ export default {
         this.$message.error(res.data.message)
         this.fetchData()
       })
+    },
+    updateSort(row, type) {
+      updateRecipeFoodSort(this.recipeId, row.id, { type }).then(res => {
+        this.fetchData()
+        this.$notify.success('提交成功')
+      }).catch(res => {
+        this.fetchData()
+        this.$message.error(res.data.message)
+      })
+    },
+    handleEdit(row) {
+      this.$set(row, 'edit', true)
+      this.changeUnits(row.foodId)
+    },
+    confirmEdit(row) {
+      updateFood(this.recipeId, row.id, row).then(res => {
+        this.fetchData()
+        this.$notify.success('提交成功')
+      }).catch(res => {
+        this.fetchData()
+        this.$message.error(res.data.message)
+      })
     }
   }
 }

src/views/recipe/index.vue

@@ -31,20 +31,20 @@
       highlight-current-row
       style="width: 100%;"
     >
-      <el-table-column type="index" label="序号" align="center" width="60px" />
-      <el-table-column label="自定义ID" align="center" width="80px">
+      <el-table-column type="index" label="序号" align="center" fixed width="60px" />
+      <el-table-column label="名称" fixed align="center">
         <template slot-scope="{row}">
-          <span>{{ row.id2 }}</span>
+          <span>{{ row.name }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="食谱封面图" align="center" width="200px">
+      <el-table-column label="自定义ID" align="center" fixed width="80px">
         <template slot-scope="{row}">
-          <el-image style="width: 180px; height: 100px" :src="row.coverPic" fit="contain" />
+          <span>{{ row.id2 }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="名称" align="center">
+      <el-table-column label="食谱封面图" align="center" width="200px">
         <template slot-scope="{row}">
-          <span>{{ row.name }}</span>
+          <el-image style="width: 180px; height: 100px" :src="row.coverPic" fit="contain" />
         </template>
       </el-table-column>
       <el-table-column label="描述" align="center">
@@ -62,7 +62,7 @@
           <span>{{ row.updateTime }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="操作" align="center" class-name="small-padding">
+      <el-table-column label="操作" align="center" class-name="small-padding" fixed="right" width="360">
         <template slot-scope="{row,$index}">
           <el-button type="primary" size="mini" @click="handleCreateOrUpdate('edit', row)">
             更新

src/views/recipe/step.vue

@@ -33,6 +33,12 @@
           <el-button size="mini" type="primary" @click="handleCreateOrUpdate('edit', 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="handleDelete(row)">
             删除
           </el-button>
@@ -63,7 +69,7 @@
 
 <script>
 import SingleImage from '@/components/Upload/SingleImage'
-import { addRecipeStep, updateRecipeStep, removeRecipeStep, getRecipeSteps } from '@/api/recipe'
+import { addRecipeStep, updateRecipeStep, removeRecipeStep, getRecipeSteps, updateRecipeStepSort } from '@/api/recipe'
 
 export default {
   name: 'RecipeStep',
@@ -132,6 +138,15 @@ export default {
         this.fetchData()
         this.$message.error(res.data.message)
       })
+    },
+    updateSort(row, type) {
+      updateRecipeStepSort(this.recipeId, row.id, { type }).then(res => {
+        this.fetchData()
+        this.$notify.success('提交成功')
+      }).catch(res => {
+        this.fetchData()
+        this.$message.error(res.data.message)
+      })
     }
   }
 }

src/views/unit/index.vue

@@ -27,12 +27,12 @@
       highlight-current-row
       style="width: 100%;"
     >
-      <el-table-column label="自定义ID" align="center" width="100">
+      <el-table-column label="自定义ID" align="center" fixed width="100">
         <template slot-scope="{row}">
           <span>{{ row.id2 }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="名称" align="center" width="200">
+      <el-table-column label="名称" align="center" fixed width="200">
         <template slot-scope="{row}">
           <span>{{ row.name }}</span>
         </template>
@@ -77,7 +77,7 @@
           <span>{{ row.stepScale }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="400">
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="400">
         <template slot-scope="{row}">
           <el-button type="primary" size="mini" @click="handleCreateOrUpdate('UPDATE', row)">
             更新

src/views/user/index.vue

@@ -30,13 +30,13 @@
       highlight-current-row
       style="width: 100%;"
     >
-      <el-table-column type="index" label="序号" align="center" width="60" />
-      <el-table-column label="工号" align="center">
+      <el-table-column type="index" label="序号" align="center" fixed width="60" />
+      <el-table-column label="工号" fixed align="center">
         <template slot-scope="{row}">
           <span>{{ row.name }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="昵称" align="center">
+      <el-table-column label="昵称" fixed align="center">
         <template slot-scope="{row}">
           <span>{{ row.nickName }}</span>
         </template>
@@ -61,7 +61,7 @@
           <span>{{ row.createTime }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="280">
         <template slot-scope="{row,$index}">
           <el-button type="primary" size="mini" @click="handleUpdate(row)">
             更新