feat:增加菜谱记录功能

src/components/Food/FoodCard.vue

@@ -69,6 +69,7 @@ import { formatDate } from 'vue3-common/utils/dateUtil'
 import { deepCopyObject } from 'vue3-common/utils/dataUtil'
 import { commonElMessageBox } from 'vue3-common/utils/elUtil'
 import { serviceFileRootPath } from '@/utils'
+import { ElMessage } from 'element-plus'
 
 const router = useRouter()
 const foodStore = useFoodStore()
@@ -94,14 +95,9 @@ const getRecord = (recordList: IRecord[]) => {
 }
 
 const editClick = async () => {
-  const id = props.foodItem?.id
   foodStore.recipeApiType = 'UPDATE'
-  // await foodStore.queryRecipe(id as number)
-  // foodStore.foodRecipeDialog = {
-  //   title: '编辑菜谱',
-  //   visible: true,
-  //   data: deepCopyObject(foodStore.currentFoodRecipe)
-  // }
+  await foodStore.queryRecipe(props.foodItem.id as number)
+  await router.push('/record/recipeForm')
 }
 
 const viewClick = async () => {
@@ -111,7 +107,7 @@ const viewClick = async () => {
 const deleteClick = () => {
   foodStore.recipeApiType = 'DELETE'
   commonElMessageBox(`请确认是否删除该菜谱: ${props.foodItem?.name}?`).then(() => {
-    // foodStore.handleRecipeApi(props.foodItem as IRecipe)
+    foodStore.handleRecipeApi(props.foodItem as IRecipe)
   })
 }
 

src/components/Food/FoodMaterialDialog.vue

@@ -0,0 +1,100 @@
+<template>
+  <el-dialog v-model="foodStore.materialDialog.visible"
+             :title="foodStore.materialDialog.title"
+             align-center center @open="openDialogEvent"
+             class="food-material-dialog">
+    <el-form ref="formRef" :model="foodStore.materialDialog.data"
+             :rules="rules" label-width="60px">
+      <el-form-item label="类型" prop="type">
+        <el-select
+            v-model="foodStore.materialDialog.data.type"
+            placeholder="请选择类型">
+          <el-option
+              v-for="(item, index) in foodMaterialTypeList"
+              :key="index" :label="item" :value="item"
+          />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item label="名称" prop="name">
+        <el-input v-model="foodStore.materialDialog.data.name" autocomplete="off"
+                  placeholder="请输入名称" clearable
+                  show-word-limit maxlength="20">
+        </el-input>
+      </el-form-item>
+
+      <el-form-item label="分量" prop="amount">
+        <el-input v-model="foodStore.materialDialog.data.amount" autocomplete="off"
+                  placeholder="请输入分量（1斤/2勺/适量）" clearable
+                  show-word-limit maxlength="20">
+        </el-input>
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="cancelClick">取消</el-button>
+        <el-button type="danger" @click="deleteClick">删除</el-button>
+        <el-button type="primary" @click="confirmClick">保存</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script lang="ts" setup>
+import { useFoodStore } from '@/store/food'
+import { nextTick, reactive, ref } from 'vue'
+import { FormRules } from 'element-plus'
+import { foodMaterialRules } from '@/utils/element/elRules'
+const rules = reactive<FormRules>(foodMaterialRules)
+
+const formRef = ref()
+const foodStore = useFoodStore()
+
+const foodMaterialTypeList = ['主料', '辅料', '调料']
+
+/**
+ * 打开对话框事件
+ */
+const openDialogEvent = () => {
+  nextTick(() => {
+    formRef.value?.clearValidate()
+  })
+}
+
+/**
+ * 点击确认按钮
+ */
+const confirmClick = () => {
+  formRef.value.validate().then(async () => {
+    if (foodStore.materialApiType === 'UPDATE') {
+      const { editMaterialIndex: index } = foodStore
+      foodStore.currentRecipe.materialList[index] = foodStore.materialDialog.data
+    } else {
+      foodStore.currentRecipe.materialList.push(foodStore.materialDialog.data)
+    }
+    foodStore.materialDialog.visible = false
+  })
+}
+
+const deleteClick = () => {
+  const { editMaterialIndex: index } = foodStore
+  foodStore.materialApiType = 'DELETE'
+  foodStore.currentRecipe.materialList.splice(index, 1)
+  foodStore.materialDialog.visible = false
+}
+
+const cancelClick = () => {
+  foodStore.materialDialog.visible = false
+}
+</script>
+
+<style lang="scss">
+.food-material-dialog {
+  width: 85%;
+
+  .el-dialog__body {
+    // height: 50vh;
+  }
+}
+</style>

src/components/Food/FoodMaterialForm.vue

@@ -4,7 +4,7 @@
       <el-button type="primary" @click="addClick">新增</el-button>
     </div>
     <el-table :data="foodStore.currentRecipe.materialList"
-              border stripe class="material-table">
+              border stripe @row-click="handleRowClick" 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%"/>
@@ -17,7 +17,6 @@
 import { useFoodStore } from '@/store/food'
 import type { IMaterial } from '@/types/food'
 import { deepCopyObject } from 'vue3-common/utils/dataUtil'
-import { commonElMessageBox } from 'vue3-common/utils/elUtil'
 
 const foodStore = useFoodStore()
 
@@ -30,22 +29,15 @@ const addClick = () => {
   }
 }
 
-const editClick = (index: number, material: IMaterial) => {
-  foodStore.editMaterialIndex = index
+const handleRowClick = (row: IMaterial) => {
+  foodStore.editMaterialIndex = foodStore.currentRecipe.materialList.indexOf(row)
   foodStore.materialApiType = 'UPDATE'
   foodStore.materialDialog = {
     title: '编辑食材',
     visible: true,
-    data: deepCopyObject(material)
+    data: deepCopyObject(row)
   }
 }
-
-const deleteClick = (index: number, material: IMaterial) => {
-  foodStore.materialApiType = 'DELETE'
-  commonElMessageBox(`确认删除该食材: ${material.name}?`).then(() => {
-    foodStore.currentRecipe.materialList.splice(index, 1)
-  })
-}
 </script>
 
 <style lang="scss">

src/components/Food/FoodStepDialog.vue

@@ -0,0 +1,98 @@
+<template>
+  <el-dialog v-model="foodStore.stepDialog.visible"
+             :title="foodStore.stepDialog.title"
+             center @open="openDialogEvent"
+             class="food-step-dialog">
+    <el-form ref="formRef" :model="foodStore.stepDialog.data"
+             :rules="rules" label-width="60px">
+      <el-form-item label="内容" prop="content">
+        <el-input v-model="foodStore.stepDialog.data.content" autocomplete="off"
+                  placeholder="请输入内容" clearable
+                  type="textarea" :rows="3"
+                  show-word-limit maxlength="50">
+        </el-input>
+      </el-form-item>
+
+      <el-form-item label="图片">
+        <upload-image v-model="foodStore.stepDialog.data.imageUrl"
+                      :service-url="fileServiceUrl"
+                      :image-limit="1"
+                      :service-file-root-path="serviceFileRootPath"
+                      :image-path="foodStore.imagePath"/>
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="cancelClick">取消</el-button>
+        <el-button type="danger" @click="deleteClick">删除</el-button>
+        <el-button type="primary" @click="confirmClick">保存</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script lang="ts" setup>
+import { UploadImage } from 'vue3-common'
+import { useFoodStore } from '@/store/food'
+import { ref, reactive, nextTick } from 'vue'
+import { FormRules } from 'element-plus'
+import { foodStepRules } from '@/utils/element/elRules'
+import { fileServiceUrl, serviceFileRootPath } from '@/utils'
+
+const rules = reactive<FormRules>(foodStepRules)
+
+const formRef = ref()
+const foodStore = useFoodStore()
+
+/**
+ * 打开对话框事件
+ */
+const openDialogEvent = () => {
+  nextTick(() => {
+    formRef.value?.clearValidate()
+  })
+}
+
+/**
+ * 点击确认按钮
+ */
+const confirmClick = () => {
+  formRef.value.validate()
+    .then(async () => {
+      if (foodStore.stepApiType === 'UPDATE') {
+        const { editStepIndex: index } = foodStore
+        foodStore.currentRecipe.stepList[index] = foodStore.stepDialog.data
+      } else {
+        foodStore.currentRecipe.stepList.push(foodStore.stepDialog.data)
+      }
+      foodStore.stepDialog.visible = false
+    })
+}
+
+const deleteClick = () => {
+  const { editStepIndex: index } = foodStore
+  foodStore.stepApiType = 'DELETE'
+  foodStore.currentRecipe.stepList.splice(index, 1)
+  foodStore.currentRecipe.stepList.forEach((item) => {
+    if (item.sort > index) {
+      item.sort -= 1
+    }
+  })
+  foodStore.stepDialog.visible = false
+}
+
+const cancelClick = () => {
+  foodStore.stepDialog.visible = false
+}
+</script>
+
+<style lang="scss">
+.food-step-dialog {
+  width: 85%;
+
+  .el-dialog__body {
+    // height: 50vh;
+  }
+}
+</style>

src/components/Food/FoodStepForm.vue

@@ -5,7 +5,7 @@
     </div>
 
     <el-table :data="foodStore.currentRecipe.stepList"
-              border class="food-step-table">
+              border stripe @row-click="handleRowClick" 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%">
@@ -22,7 +22,6 @@
 import { useFoodStore } from '@/store/food'
 import type { IStep } from '@/types/food'
 import { deepCopyObject } from 'vue3-common/utils/dataUtil'
-import { commonElMessageBox } from 'vue3-common/utils/elUtil'
 import { serviceFileRootPath } from '@/utils'
 
 const foodStore = useFoodStore()
@@ -37,27 +36,15 @@ const addClick = () => {
   }
 }
 
-const editClick = (index: number, step: IStep) => {
-  foodStore.editStepIndex = index
+const handleRowClick = (row: IStep) => {
+  foodStore.editStepIndex = foodStore.currentRecipe.stepList.indexOf(row)
   foodStore.stepApiType = 'UPDATE'
   foodStore.stepDialog = {
     title: '编辑步骤',
     visible: true,
-    data: deepCopyObject(step)
+    data: deepCopyObject(row)
   }
 }
-
-const deleteClick = (index: number) => {
-  commonElMessageBox('确认删除该步骤?').then(() => {
-    foodStore.stepApiType = 'DELETE'
-    foodStore.currentRecipe.stepList.splice(index, 1)
-    foodStore.currentRecipe.stepList.forEach((item) => {
-      if (item.sort > index) {
-        item.sort -= 1
-      }
-    })
-  })
-}
 </script>
 
 <style lang="scss">