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)
+  await foodStore.queryRecipe(props.foodItem.id as number)
-  // foodStore.foodRecipeDialog = {
+  await router.push('/record/recipeForm')
-  //   title: '编辑菜谱',
-  //   visible: true,
-  //   data: deepCopyObject(foodStore.currentFoodRecipe)
-  // }
 }
 
 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) => {
+const handleRowClick = (row: IMaterial) => {
-  foodStore.editMaterialIndex = index
+  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) => {
+const handleRowClick = (row: IStep) => {
-  foodStore.editStepIndex = index
+  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">

src/layout/index.vue

@@ -7,6 +7,20 @@
     <tab-bar />
 
     <draggable-button v-show="checkIsShow()" @click="addClick"/>
+
+    <el-dialog v-model="dialogFormVisible" title="选择新增类型"
+               width="80%" align-center center class="choose-dialog">
+      <el-radio-group v-model="addType">
+        <el-radio value="recipe">菜谱</el-radio>
+        <el-radio value="record">记录</el-radio>
+      </el-radio-group>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="dialogFormVisible = false">取消</el-button>
+          <el-button type="primary" @click="confirmClick">确认</el-button>
+        </div>
+      </template>
+    </el-dialog>
   </section>
 </template>
 
@@ -17,12 +31,16 @@ import DraggableButton from '@/components/DraggableButton.vue'
 import { useRouter, useRoute } from 'vue-router'
 import { useAppStore } from '@/store/app'
 import { useFoodStore } from '@/store/food'
+import { ref } from 'vue'
 
 const router = useRouter()
 const route = useRoute()
 const appStore = useAppStore()
 const foodStore = useFoodStore()
 
+const dialogFormVisible = ref(false)
+const addType = ref('recipe')
+
 const checkIsShow = (): boolean => {
   if (route.path.includes('Form') || route.path.includes('detail')) {
     return false
@@ -32,7 +50,7 @@ const checkIsShow = (): boolean => {
     return true
   }
 
-  if (route.path.includes('record') && foodStore.recordSegment !== 'timeline') {
+  if (route.path.includes('record')) {
     return true
   }
 
@@ -40,23 +58,8 @@ const checkIsShow = (): boolean => {
 }
 
 const addClick = () => {
-  appStore.isShowMobileBack = true
-
   if (route.path.includes('record')) {
-    switch (foodStore.recordSegment) {
+    dialogFormVisible.value = true
-      case 'recipe':
-        foodStore.recipeApiType = 'ADD'
-        foodStore.currentRecipe = foodStore.getEmptyRecipe()
-        router.push('/record/recipeForm')
-        break
-      case 'daily':
-        foodStore.recordApiType = 'ADD'
-        foodStore.currentRecord = foodStore.getEmptyRecord()
-        router.push('/record/recordForm')
-        break
-      default:
-        break
-    }
   }
 
   if (route.path.includes('moment')) {
@@ -65,8 +68,28 @@ const addClick = () => {
     router.push('/moment/momentForm')
   }
 }
+
+const confirmClick = () => {
+  dialogFormVisible.value = false
+  if (addType.value === 'recipe') {
+    foodStore.recipeApiType = 'ADD'
+    foodStore.currentRecipe = foodStore.getEmptyRecipe()
+    router.push('/record/recipeForm')
+  } else {
+    foodStore.recordApiType = 'ADD'
+    foodStore.currentRecord = foodStore.getEmptyRecord()
+    router.push('/record/recordForm')
+  }
+}
 </script>
 
 <style lang="scss">
 @use "@/styles/mobile.home.layout.module.scss";
+
+.choose-dialog {
+  .el-dialog__body {
+    display: flex;
+    justify-content: center;
+  }
+}
 </style>

src/views/login/index.vue

@@ -42,19 +42,20 @@ onUnmounted(() => {
 </script>
 
 <style lang="scss">
-$form-item-width: 300px;
+$form-item-width: 90vw;
 $login-height: 500px;
 
 .login-view {
   height: 100%;
-  display: grid;
+  // display: grid;
-  place-items: center;
+  // place-items: center;
 
   .login-container {
-    // height: $login-height;
+    margin-top: 20vh;
-    padding: 30px;
+    height: $login-height;
-    border-radius: 15px;
+    // padding: 30px;
-    box-shadow: 2px 2px 5px #D3D3D3, 4px 4px 10px #A9A9A9;
+    // border-radius: 15px;
+    // box-shadow: 2px 2px 5px #D3D3D3, 4px 4px 10px #A9A9A9;
 
     display: flex;
     flex-direction: column;
@@ -102,7 +103,7 @@ $login-height: 500px;
         .el-divider {
           .el-divider__text {
             color: #A9A9A9;
-            font-size: 0.8rem;
+            font-size: 1rem;
           }
         }
 
@@ -126,7 +127,7 @@ $login-height: 500px;
         display: flex;
         justify-content: center;
         span {
-          font-size: 0.9rem;
+          font-size: 1.2rem;
         }
       }
     }

src/views/record/recipeForm.vue

@@ -1,15 +1,15 @@
 <template>
   <div class="food-recipe-form common-mobile-view">
     <el-form ref="formRef" :model="foodStore.currentRecipe"
-             :rules="rules" label-width="80px">
+             :rules="rules" label-width="60px">
-      <el-form-item label="美食名称" prop="name">
+      <el-form-item label="名称" prop="name">
         <el-input v-model="foodStore.currentRecipe.name" autocomplete="off"
                   placeholder="请输入名称" clearable
                   show-word-limit maxlength="20">
         </el-input>
       </el-form-item>
 
-      <el-form-item label="美食菜系" prop="category">
+      <el-form-item label="菜系" prop="category">
         <el-select v-model="foodStore.currentRecipe.category"
                    placeholder="请选择或输入菜系">
           <el-option v-for="(item, index) in foodCategoryList"
@@ -17,7 +17,7 @@
         </el-select>
       </el-form-item>
 
-      <el-form-item label="推荐指数" prop="recommendRate">
+      <el-form-item label="推荐" prop="recommendRate">
         <el-rate v-model="foodStore.currentRecipe.recommendRate"
                  :colors="foodStore.rateColorList"/>
       </el-form-item>
@@ -33,7 +33,8 @@
       <el-form-item label="备注">
         <el-input v-model="foodStore.currentRecipe.remark" autocomplete="off"
                   placeholder="请输入备注" clearable
-                  show-word-limit maxlength="20">
+                  type="textarea" :rows="3"
+                  show-word-limit maxlength="50">
         </el-input>
       </el-form-item>
     </el-form>
@@ -43,12 +44,17 @@
       <el-button type="danger" @click="deleteClick">删除</el-button>
       <el-button type="info" @click="cancelClick">取消</el-button>
     </div>
+
+    <food-material-dialog />
+    <food-step-dialog />
   </div>
 </template>
 
 <script lang="ts" setup>
 import FoodMaterialForm from '@/components/Food/FoodMaterialForm.vue'
 import FoodStepForm from '@/components/Food/FoodStepForm.vue'
+import FoodMaterialDialog from '@/components/Food/FoodMaterialDialog.vue'
+import FoodStepDialog from '@/components/Food/FoodStepDialog.vue'
 import { useFoodStore } from '@/store/food'
 import type { FormInstance, FormRules } from 'element-plus'
 import { ref, reactive } from 'vue'