feat:增加美食表单功能

src/views/login/index.vue

@@ -5,19 +5,23 @@
 </template>
 
 <script setup lang="ts">
+import { useAuthStore } from '@/store/auth'
 import { useRouter } from 'vue-router'
+import { useUserStore } from '@/store/user'
 import { isMobile } from 'vue3-common/utils/layoutUtil'
 import { ElMessage } from 'element-plus'
 
+const authStore = useAuthStore()
 const router = useRouter()
+const userStore = useUserStore()
 
-const loginClick = () => {
+const loginClick = async () => {
   if (!isMobile()) {
     ElMessage.error('暂不支持PC端')
-    return
   }
-
-  router.push('/record')
+  await authStore.handleLogin('common')
+  userStore.handleSession(authStore.homeSession)
+  await router.push('/record')
 }
 </script>
 

src/views/record/index.vue

@@ -28,6 +28,8 @@
     <div v-if="foodInfo.recordSegment === 'timeline'" class="food-calendar">
       <food-timeline />
     </div>
+
+    <draggable-button v-show="foodInfo.recordSegment !== 'timeline'" @click="addClick"/>
   </div>
 </template>
 
@@ -35,12 +37,17 @@
 import FoodRecipe from '@/components/Food/FoodRecipe.vue'
 import FoodDaily from '@/components/Food/FoodDaily.vue'
 import FoodTimeline from '@/components/Food/FoodTimeline.vue'
+import DraggableButton from '@/components/DraggableButton.vue'
 import { Search } from '@element-plus/icons-vue'
 import { onMounted, reactive } from 'vue'
 import { useFoodStore } from '@/store/food'
 import type { IFoodSegment } from '@/types/food'
+import { useRouter } from 'vue-router'
+import { useAppStore } from '@/store/app'
 
 const foodStore = useFoodStore()
+const router = useRouter()
+const appStore = useAppStore()
 
 const foodInfo = reactive({
   recordSegment: 'recipe' as IFoodSegment,
@@ -67,6 +74,25 @@ onMounted(() => {
 const changeRecordSegmentEvent = () => {
   foodStore.refreshInfo()
 }
+
+const addClick = () => {
+  appStore.isShowMobileBack = true
+
+  switch (foodInfo.recordSegment) {
+    case 'recipe':
+      foodStore.foodRecipeApiType = 'ADD'
+      foodStore.currentFoodRecipe = foodStore.getEmptyFoodRecipe()
+      router.push('/record/recipeForm')
+      break
+    case 'daily':
+      foodStore.foodRecordApiType = 'ADD'
+      foodStore.currentFoodRecord = foodStore.getEmptyFoodRecord()
+      router.push('/record/recordForm')
+      break
+    default:
+      break
+  }
+}
 </script>
 
 <style scoped lang="scss">

src/views/record/recipeForm.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="food-recipe-form common-mobile-view">
+    <el-form ref="formRef" :model="foodStore.currentFoodRecipe"
+             :rules="rules" label-width="80px">
+      <el-form-item label="美食名称" prop="name">
+        <el-input v-model="foodStore.currentFoodRecipe.name" autocomplete="off"
+                  placeholder="请输入名称" clearable
+                  show-word-limit maxlength="20">
+        </el-input>
+      </el-form-item>
+
+      <el-form-item label="美食菜系" prop="category">
+        <el-select v-model="foodStore.currentFoodRecipe.category"
+                   placeholder="请选择或输入菜系">
+          <el-option v-for="(item, index) in foodCategoryList"
+                     :key="index" :label="item" :value="item"/>
+        </el-select>
+      </el-form-item>
+
+      <el-form-item label="推荐指数" prop="recommendRate">
+        <el-rate v-model="foodStore.currentFoodRecipe.recommendRate"
+                 :colors="foodStore.rateColorList"/>
+      </el-form-item>
+
+      <el-form-item label="食材">
+        <food-material-form />
+      </el-form-item>
+
+      <el-form-item label="步骤">
+        <food-step-form />
+      </el-form-item>
+
+      <el-form-item label="备注">
+        <el-input v-model="foodStore.currentFoodRecipe.remark" autocomplete="off"
+                  placeholder="请输入备注" clearable
+                  show-word-limit maxlength="20">
+        </el-input>
+      </el-form-item>
+    </el-form>
+
+    <div class="button-container">
+      <el-button type="primary" @click="confirmClick">确认</el-button>
+      <el-button type="danger" @click="deleteClick">删除</el-button>
+      <el-button type="info" @click="cancelClick">取消</el-button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import FoodMaterialForm from '@/components/Food/FoodMaterialForm.vue'
+import FoodStepForm from '@/components/Food/FoodStepForm.vue'
+import { useFoodStore } from '@/store/food'
+import { FormInstance, FormRules } from 'element-plus'
+import { computed, ref, reactive } from 'vue'
+import { foodRules } from '@/utils/element/elRules'
+import { commonElMessageBox } from 'vue3-common/utils/elUtil'
+
+const rules = reactive<FormRules>(foodRules)
+const formRef = ref<FormInstance>()
+const foodStore = useFoodStore()
+
+const foodCategoryList = ['家常菜', '淮扬菜', '鲁菜', '川菜', '粤菜', '闽菜', '浙菜', '湘菜', '徽菜', '其他']
+
+const dialogData = computed(() => foodStore.foodRecipeDialog)
+
+/**
+ * 点击确认按钮
+ */
+const confirmClick = () => {
+  formRef.value.validate().then(() => {
+    foodStore.handleFoodRecipeApi(foodStore.currentFoodRecipe)
+    history.back()
+  })
+}
+
+const cancelClick = () => {
+  history.back()
+}
+
+const deleteClick = () => {
+  commonElMessageBox('是否确认删除该菜谱?').then(() => {
+    foodStore.foodRecipeApiType = 'DELETE'
+    foodStore.handleFoodRecipeApi(foodStore.currentFoodRecipe)
+    history.back()
+  })
+}
+</script>
+
+<style lang="scss">
+.food-recipe-form {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+
+  .button-container {
+    align-self: center;
+  }
+}
+</style>

src/views/record/recordForm.vue

@@ -0,0 +1,101 @@
+<template>
+  <div class="food-record-form common-mobile-view">
+    <el-form ref="formRef" :model="foodStore.currentFoodRecord"
+             :rules="rules" label-width="80">
+      <el-form-item label="菜谱名称" prop="name">
+        <el-select
+            v-model="foodStore.currentFoodRecord.name"
+            @focus="foodStore.queryFoodNameList()"
+            allow-create filterable
+            :disabled="foodStore.foodRecordApiType === 'UPDATE'"
+            placeholder="请输入或选择菜谱名称">
+          <el-option
+              v-for="(item, index) in foodStore.foodNameList"
+              :key="index" :label="item" :value="item"
+          />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item label="完成时间" prop="date">
+        <el-date-picker
+            v-model="foodStore.currentFoodRecord.date"
+            type="date" :editable="false" placeholder="请选择完成时间"
+            value-format="YYYY-MM-DD"/>
+      </el-form-item>
+
+      <el-form-item label="完成人" prop="person">
+        <el-select
+            v-model="foodStore.currentFoodRecord.person"
+            placeholder="请选择完成人">
+          <el-option
+              v-for="(item, index) in ['哥哥', '宝宝']"
+              :key="index" :label="item" :value="item"
+          />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item label="图片">
+        <upload-image v-model="foodStore.currentFoodRecord.imageUrl"
+                      :service-url="fileServiceUrl"
+                      :image-limit="1"
+                      :service-file-root-path="serviceFileRootPath"
+                      :image-path="foodStore.foodImagePath"/>
+      </el-form-item>
+    </el-form>
+
+    <div class="button-container">
+      <el-button type="primary" @click="confirmClick">确认</el-button>
+      <el-button type="danger" @click="deleteClick">删除</el-button>
+      <el-button type="info" @click="cancelClick">取消</el-button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { UploadImage } from 'vue3-common'
+import { useFoodStore } from '@/store/food.ts'
+import { ref, reactive } from 'vue'
+import { FormRules } from 'element-plus'
+import { foodRecordRules } from '@/utils/element/elRules'
+import { fileServiceUrl, serviceFileRootPath } from '@/utils'
+import { commonElMessageBox } from 'vue3-common/utils/elUtil'
+
+const rules = reactive<FormRules>(foodRecordRules)
+
+const formRef = ref()
+const foodStore = useFoodStore()
+
+/**
+ * 点击确认按钮
+ */
+const confirmClick = () => {
+  formRef.value.validate().then(() => {
+    foodStore.handleFoodRecordApi(foodStore.currentFoodRecord)
+    history.back()
+  })
+}
+
+const cancelClick = () => {
+  history.back()
+}
+
+const deleteClick = () => {
+  commonElMessageBox('是否确认删除该记录?').then(() => {
+    foodStore.foodRecordApiType = 'DELETE'
+    foodStore.handleFoodRecordApi(foodStore.currentFoodRecord)
+    history.back()
+  })
+}
+</script>
+
+<style lang="scss">
+.food-record-form {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+
+  .button-container {
+    align-self: center;
+  }
+}
+</style>