feat:更新美食模块图片功能

src/components/Food/FoodCard.vue

@@ -1,19 +1,17 @@
 <template>
   <div class="life-record-card card-item">
-    <el-carousel v-if="props.foodItem?.recordList.length > 0"
-                 arrow="always" @change="changeFoodEvent">
-      <el-carousel-item v-for="(item, index) in getFoodRecord(props.foodItem?.recordList)"
-                        :key="index">
-        <el-image :src="AListPath + item.imageUrl"
-                  fit="contain" alt="暂无成果">
-          <template #error>
-            <div class="image-slot">
-              <span>暂无图片</span>
-            </div>
-          </template>
-        </el-image>
-      </el-carousel-item>
-    </el-carousel>
+    <el-image v-if="props.foodItem?.recordList.length > 0"
+              :src="AListPath + props.foodItem?.recordList[0].imageUrl"
+              :preview-src-list="previewImageList"
+              :initial-index="0"
+              show-progress
+              fit="contain" alt="暂无成果">
+      <template #error>
+        <div class="image-slot">
+          <span>暂无图片</span>
+        </div>
+      </template>
+    </el-image>
 
     <el-empty v-else description="暂无成果" />
 
@@ -65,8 +63,8 @@
 <script setup lang="ts">
 import { Edit, MoreFilled, DeleteFilled } from '@element-plus/icons-vue'
 import { useFoodStore } from '@/store/food.ts'
-import { defineProps, onMounted, PropType, reactive } from 'vue'
-import { IFoodRecipe, IFoodRecord } from '@/types/food.ts'
+import { computed, defineProps, onMounted, PropType, reactive } from 'vue'
+import { IFoodRecipe } from '@/types/food.ts'
 import { useRouter } from 'vue-router'
 import { formatDate } from 'vue3-common/utils/dateUtil'
 import { commonElMessageBox } from 'vue3-common/utils/elUtil'
@@ -91,9 +89,9 @@ onMounted(() => {
   foodCardInfo.recommendRate = props.foodItem?.recommendRate as number
 })
 
-const getFoodRecord = (recordList: IFoodRecord[]) => {
-  return recordList.filter((item) => item.imageUrl)
-}
+const previewImageList = computed(() => {
+  return props.foodItem?.recordList.map((item) => `${AListPath}${item.imageUrl}`)
+})
 
 const editFoodRecipeClick = async () => {
   const id = props.foodItem?.id
@@ -112,10 +110,6 @@ const deleteFoodRecipeClick = () => {
     foodStore.handleFoodRecipeApi(props.foodItem)
   })
 }
-
-const changeFoodEvent = (current: number) => {
-  foodCardInfo.currentFoodIndex = current
-}
 </script>
 
 <style lang="scss">

src/components/Food/Form/FoodRecordDialog.vue

@@ -1,107 +0,0 @@
-<template>
-  <el-dialog v-model="dialogData.visible" :title="dialogData.title"
-             center @open="openDialogEvent" class="food-record-dialog">
-    <el-form ref="formRef" :model="dialogData.data"
-             :rules="rules" label-width="80">
-      <el-form-item label="菜谱名称" prop="name">
-        <el-select
-            v-model="dialogData.data.name"
-            @focus="foodStore.queryFoodNameList()"
-            :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="dialogData.data.date"
-            type="date" :editable="false" placeholder="请选择完成时间"
-            value-format="YYYY-MM-DD"/>
-      </el-form-item>
-
-      <el-form-item label="完成人" prop="person">
-        <el-select
-            v-model="dialogData.data.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="dialogData.data.imageUrl"
-                      :service-url="fileServiceUrl"
-                      :image-limit="1"
-                      :service-file-root-path="serviceFileRootPath"
-                      :image-path="foodStore.foodImagePath"/>
-      </el-form-item>
-    </el-form>
-
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button @click="cancelClick">取消</el-button>
-        <el-button type="primary" @click="confirmClick">保存</el-button>
-        <el-button v-if="foodStore.foodRecordApiType === 'UPDATE'"
-                   type="danger" @click="deleteClick">删除</el-button>
-      </div>
-    </template>
-  </el-dialog>
-</template>
-
-<script lang="ts" setup>
-import { UploadImage } from 'vue3-common'
-import { useFoodStore } from '@/store/food.ts'
-import { computed, ref, reactive, nextTick } from 'vue'
-import { FormInstance, FormRules } from 'element-plus'
-import { foodRecordRules } from '@/utils/element/elRules.ts'
-import { fileServiceUrl, serviceFileRootPath } from '@/utils'
-import { commonElMessageBox } from 'vue3-common/utils/elUtil'
-
-const rules = reactive<FormRules>(foodRecordRules)
-
-const formRef = ref<FormInstance>()
-const foodStore = useFoodStore()
-
-const dialogData = computed(() => foodStore.foodRecordDialog)
-
-/**
- * 打开对话框事件
- */
-const openDialogEvent = async () => {
-  await nextTick(() => {
-    formRef.value?.clearValidate()
-  })
-}
-
-/**
- * 点击确认按钮
- */
-const confirmClick = () => {
-  formRef.value?.validate().then(() => {
-    foodStore.handleFoodRecordApi(foodStore.foodRecordDialog.data)
-  })
-}
-
-const cancelClick = () => {
-  dialogData.value.visible = false
-}
-
-const deleteClick = () => {
-  commonElMessageBox('是否确认删除该记录?').then(() => {
-    foodStore.foodRecordApiType = 'DELETE'
-    foodStore.handleFoodRecordApi(dialogData.value.data)
-  })
-}
-</script>
-
-<style lang="scss">
-.food-record-dialog {
-  max-width: 600px;
-}
-</style>