feat:增加美食表单功能

src/components/Food/FoodMaterialForm.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="food-material-form">
+    <div class="button-container">
+      <el-button type="primary" @click="addClick">新增</el-button>
+    </div>
+    <el-table :data="foodStore.currentFoodRecipe.materialList"
+              border stripe class="material-table">
+      <el-table-column type="index" align="center" width="40" />
+      <el-table-column prop="type" label="类型" align="center" min-width="10%"/>
+      <el-table-column prop="name" label="名称" align="center" min-width="20%"/>
+      <el-table-column prop="amount" label="分量" align="center" min-width="20%"/>
+    </el-table>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useFoodStore } from '@/store/food'
+import { IFoodMaterial } from '@/types/food'
+import { deepCopyObject } from 'vue3-common/utils/dataUtil'
+import { commonElMessageBox } from 'vue3-common/utils/elUtil'
+
+const foodStore = useFoodStore()
+
+const addClick = () => {
+  foodStore.foodMaterialApiType = 'ADD'
+  foodStore.foodMaterialDialog = {
+    title: '新增食材',
+    visible: true,
+    data: foodStore.getEmptyFoodMaterial()
+  }
+}
+
+const handleEditClick = (index: number, material: IFoodMaterial) => {
+  foodStore.editFoodMaterialIndex = index
+  foodStore.foodMaterialApiType = 'UPDATE'
+  foodStore.foodMaterialDialog = {
+    title: '编辑食材',
+    visible: true,
+    data: deepCopyObject(material)
+  }
+}
+
+const handleDeleteClick = (index: number, material: IFoodMaterial) => {
+  foodStore.foodMaterialApiType = 'DELETE'
+  commonElMessageBox(`确认删除该食材: ${material.name}?`).then(() => {
+    foodStore.currentFoodRecipe.materialList.splice(index, 1)
+  })
+}
+</script>
+
+<style lang="scss">
+.food-material-form {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+</style>