feat:增加美食表单功能

src/components/Food/FoodDaily.vue

@@ -6,24 +6,19 @@
                 class="food-calendar card-item"/>
 
     <food-daily-item :date="dailyInfo.calendarDate"/>
-
-    <draggable-button @click="addClick"/>
   </div>
 </template>
 
 <script setup lang="ts">
 import FoodDailyItem from '@/components/Food/FoodDailyItem.vue'
-import DraggableButton from '@/components/DraggableButton.vue'
 import { reactive, watch, ref, onMounted } from 'vue'
 import { useFoodStore } from '@/store/food.ts'
 import { formatDate } from 'vue3-common/utils/dateUtil'
 import { useAppStore } from '@/store/app'
-import { useRouter } from 'vue-router'
 
 const calendarRef = ref()
 const foodStore = useFoodStore()
 const appStore = useAppStore()
-const router = useRouter()
 
 onMounted(() => {
   const { month } = foodStore.queryRecord
@@ -39,12 +34,6 @@ const dailyInfo = reactive({
   attrs: [] as any[]
 })
 
-const addClick = () => {
-  foodStore.foodRecordApiType = 'ADD'
-  foodStore.currentFoodRecord = foodStore.getEmptyFoodRecord()
-  router.push({ name: 'MobileHomeFoodRecordForm' })
-}
-
 const updateInfo = () => {
   getCalendarMoveDate()
   getCalendarAttrDates()

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>

src/components/Food/FoodRecipe.vue

@@ -17,22 +17,17 @@
     </div>
 
     <arrive-bottom v-if="foodStore.isScrollEnd"/>
-
-    <draggable-button @click="addClick"/>
   </div>
 </template>
 
 <script lang="ts" setup>
 import FoodCard from '@/components/Food/FoodCard.vue'
 import ArriveBottom from '@/components/ArriveButton.vue'
-import DraggableButton from '@/components/DraggableButton.vue'
 import { useFoodStore } from '@/store/food.ts'
 import { onBeforeUnmount, onMounted, ref } from 'vue'
-import { useRouter } from 'vue-router'
 
 const foodRecipeRef = ref()
 const foodStore = useFoodStore()
-const router = useRouter()
 
 const foodCategoryList = [{
   label: '全部',
@@ -51,12 +46,6 @@ onBeforeUnmount(() => {
   foodRecipeRef.value.removeEventListener('scroll', handleScroll)
 })
 
-const addClick = () => {
-  foodStore.foodRecordApiType = 'ADD'
-  foodStore.currentFoodRecord = foodStore.getEmptyFoodRecord()
-  router.push({ name: 'MobileHomeFoodRecordForm' })
-}
-
 const queryFoodSegmented = async () => {
   foodStore.pageInfo.currentPage = 1
   foodStore.foodRecipeList = []

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>