feat:增加美食表单功能

src/components/Food/FoodStepForm.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="food-step-form">
+    <div class="button-container">
+      <el-button type="primary" @click="addClick">新增</el-button>
+    </div>
+
+    <el-table :data="foodStore.currentFoodRecipe.stepList"
+              border class="food-step-table">
+      <el-table-column type="index" align="center" width="40" />
+      <el-table-column prop="content" label="内容" align="center" min-width="20%" />
+      <el-table-column prop="imageUrl" label="图片" align="center" min-width="20%">
+        <template #default="scope">
+          <el-image v-if="scope.row.imageUrl" :src="serviceFileRootPath + scope.row.imageUrl" />
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+
+</template>
+
+<script setup lang="ts">
+import { useFoodStore } from '@/store/food'
+import { IFoodStep } from '@/types/food'
+import { deepCopyObject } from 'vue3-common/utils/dataUtil'
+import { commonElMessageBox } from 'vue3-common/utils/elUtil'
+import { serviceFileRootPath } from '@/utils'
+
+const foodStore = useFoodStore()
+
+const addClick = () => {
+  foodStore.foodStepApiType = 'ADD'
+  // foodStore.foodStepImageList = []
+  foodStore.foodStepDialog = {
+    title: '新增步骤',
+    visible: true,
+    data: foodStore.getEmptyFoodStep()
+  }
+}
+
+const handleEditClick = (index: number, step: IFoodStep) => {
+  foodStore.editFoodStepIndex = index
+  foodStore.foodStepApiType = 'UPDATE'
+  foodStore.foodStepDialog = {
+    title: '编辑步骤',
+    visible: true,
+    data: deepCopyObject(step)
+  }
+}
+
+const handleDeleteClick = (index: number) => {
+  commonElMessageBox('确认删除该步骤?').then(() => {
+    foodStore.foodStepApiType = 'DELETE'
+    foodStore.currentFoodRecipe.stepList.splice(index, 1)
+    foodStore.currentFoodRecipe.stepList.forEach((item) => {
+      if (item.sort > index) {
+        item.sort -= 1
+      }
+    })
+  })
+}
+</script>
+
+<style lang="scss">
+.food-step-form {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+
+  .food-step-table {
+    .el-image {
+      width: 100%;
+      height: 100%;
+
+      max-height: 200px;
+      max-width: 200px;
+    }
+  }
+}
+</style>