增加菜谱排序，增加菜谱食物更新

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/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/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)
+      })
     }
   }
 }