feat:增加菜谱显示模块

src/components/Food/FoodBasicData.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="info-item card-item">
+    <div class="title-info">
+      <svg-icon name="home-basic"/>
+      <span class="sub-title">基础信息</span>
+    </div>
+
+    <div class="info food-basic-info">
+      <el-tag v-if="foodStore.currentRecipe.category">
+        {{ foodStore.currentRecipe.category }}
+      </el-tag>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { SvgIcon } from 'vue3-common'
+import { useFoodStore } from '@/store/food.ts'
+
+const foodStore = useFoodStore()
+</script>

src/components/Food/FoodCard.vue

@@ -96,7 +96,7 @@ const getRecord = (recordList: IRecord[]) => {
 const editClick = async () => {
   const id = props.foodItem?.id
   foodStore.recipeApiType = 'UPDATE'
-  await foodStore.queryRecipe(id as number)
+  // await foodStore.queryRecipe(id as number)
   // foodStore.foodRecipeDialog = {
   //   title: '编辑菜谱',
   //   visible: true,
@@ -105,13 +105,13 @@ const editClick = async () => {
 }
 
 const viewClick = async () => {
-  await router.push({ name: 'MobileHomeFoodDetailId', params: { id: props.foodItem?.id } })
+  await router.push({ name: 'RecordDetailId', params: { id: props.foodItem?.id } })
 }
 
 const deleteClick = () => {
   foodStore.recipeApiType = 'DELETE'
   commonElMessageBox(`请确认是否删除该菜谱: ${props.foodItem?.name}?`).then(() => {
-    foodStore.handleRecipeApi(props.foodItem)
+    // foodStore.handleRecipeApi(props.foodItem as IRecipe)
   })
 }
 

src/components/Food/FoodMaterialData.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="info-item card-item">
+    <div class="title-info">
+      <svg-icon name="home-material"/>
+      <span class="sub-title">食材信息</span>
+    </div>
+
+    <div class="info material-info">
+      <div class="material-item">
+        <span class="material-title">主料</span>
+        <div v-if="getFoodMaterial('主料').length > 0" class="material-content">
+          <el-tag v-for="(item, index) in getFoodMaterial('主料')"
+                  :key="index">{{ `${item.name} ${item.amount}` }}
+          </el-tag>
+        </div>
+        <div v-else class="material-content">
+          <el-tag>无</el-tag>
+        </div>
+      </div>
+
+      <div class="material-item">
+        <span class="material-title">配料</span>
+        <div v-if="getFoodMaterial('辅料').length > 0" class="material-content">
+          <el-tag v-for="(item, index) in getFoodMaterial('辅料')"
+                  :key="index">{{ `${item.name} ${item.amount}` }}
+          </el-tag>
+        </div>
+        <div v-else class="material-content">
+          <el-tag>无</el-tag>
+        </div>
+      </div>
+
+      <div class="material-item">
+        <span class="material-title">辅料</span>
+        <div v-if="getFoodMaterial('调料').length > 0" class="material-content">
+          <el-tag v-for="(item, index) in getFoodMaterial('调料')"
+                  :key="index">{{ `${item.name} ${item.amount}` }}
+          </el-tag>
+        </div>
+        <div v-else class="material-content">
+          <el-tag>无</el-tag>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useFoodStore } from '@/store/food.ts'
+import { SvgIcon } from 'vue3-common'
+
+const foodStore = useFoodStore()
+
+const getFoodMaterial = (type: string) => {
+  return foodStore.currentRecipe.materialList.filter((item) => {
+    return item.type === type
+  })
+}
+</script>

src/components/Food/FoodMaterialForm.vue

@@ -15,7 +15,7 @@
 
 <script setup lang="ts">
 import { useFoodStore } from '@/store/food'
-import { IMaterial } from '@/types/food'
+import type { IMaterial } from '@/types/food'
 import { deepCopyObject } from 'vue3-common/utils/dataUtil'
 import { commonElMessageBox } from 'vue3-common/utils/elUtil'
 

src/components/Food/FoodOthersData.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="info-item card-item">
+    <div class="title-info">
+      <svg-icon name="home-others"/>
+      <span class="sub-title">其他信息</span>
+    </div>
+
+    <div class="others-info">
+      <span class="others-title">备注：</span>
+      <span v-if="foodStore.currentRecipe.remark">
+        {{ foodStore.currentRecipe.remark }}
+      </span>
+      <span v-else>
+        无
+      </span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useFoodStore } from '@/store/food.ts'
+import { SvgIcon } from 'vue3-common'
+
+const foodStore = useFoodStore()
+</script>

src/components/Food/FoodRecordData.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="info-item">
+    <div class="title-info">
+      <svg-icon name="home-work"/>
+      <span class="sub-title">成果展示</span>
+    </div>
+
+    <div v-if="foodStore.currentRecipe.recordList.length > 0" class="info record-info">
+      <el-timeline>
+        <el-timeline-item v-for="(item, index) in foodStore.currentRecipe.recordList"
+                          :key="index" :timestamp="item.date" placement="top">
+          <el-card class="record-card">
+            <span class="record-content">完成人：{{ item.person }}</span>
+            <el-image v-if="item.imageUrl"
+                      :src="serviceFileRootPath + item.imageUrl"
+                      :preview-src-list="[serviceFileRootPath + item.imageUrl]"
+                      fit="contain" alt="暂无图片" class="record-image"/>
+          </el-card>
+        </el-timeline-item>
+      </el-timeline>
+    </div>
+    <el-empty v-else description="暂无成果"/>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useFoodStore } from '@/store/food.ts'
+import { serviceFileRootPath } from '@/utils'
+import { SvgIcon } from 'vue3-common'
+
+const foodStore = useFoodStore()
+</script>

src/components/Food/FoodStepData.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="info-item card-item">
+    <div class="title-info">
+      <svg-icon name="home-step"/>
+      <span class="sub-title">菜谱信息</span>
+    </div>
+
+    <div class="step-info">
+      <div v-for="(item, index) in foodStore.currentRecipe.stepList"
+           :key="index" class="step-container">
+        <span class="step-number">第{{ index + 1 }}步</span>
+        <div class="step-body">
+          <span class="step-content">{{ item.content }}</span>
+          <img v-if="item.imageUrl"
+               :src="serviceFileRootPath + item.imageUrl" alt="暂无图片" class="step-image"/>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useFoodStore } from '@/store/food.ts'
+import { serviceFileRootPath } from '@/utils'
+import { SvgIcon } from 'vue3-common'
+
+const foodStore = useFoodStore()
+</script>

src/components/Food/FoodStepForm.vue

@@ -20,7 +20,7 @@
 
 <script setup lang="ts">
 import { useFoodStore } from '@/store/food'
-import { IStep } from '@/types/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'

src/components/Food/FoodTimeline.vue

@@ -3,6 +3,7 @@
     <el-date-picker
         v-model="currentYear"
         type="year" placeholder="请选择年份"
+        :editable="false"
         style="width: 100px;"
         @change="changeDateEvent"
     />