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

src/apis/file.ts

@@ -12,6 +12,16 @@ export const uploadFileApi = (form: FormData, path: string, md5: string): Promis
     data: form
   })
 
+export const uploadAListFileApi = (form: FormData): Promise<any> =>
+  cloudService({
+    url: '/home-api/file/alist',
+    headers: {
+      'Content-Type': 'multipart/form-data'
+    },
+    method: 'post',
+    data: form
+  })
+
 export const getFolderInfoApi = (folderName: string): Promise<IFileInfo[]> =>
   cloudService({
     url: '/home-api/file/catalog',

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>

src/utils/home/file.ts

@@ -0,0 +1,82 @@
+import { hashSHA256 } from 'vue3-common/utils/cryptoUtil'
+
+export const getFileHashName = (name: string) => {
+  return hashSHA256(name)
+}
+
+export const getFileExtension = (name: string) => {
+  return name.substring(name.lastIndexOf('.') + 1).toLowerCase()
+}
+
+export const validateExcel = (fileType: string, fileExtension: string): boolean => {
+  // 常见的 Excel MIME 类型
+  const excelMimeTypes = [
+    'application/vnd.ms-excel', // .xls
+    'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', // .xlsx
+    'application/vnd.ms-excel.sheet.macroEnabled.12', // .xlsm
+    'text/csv' // CSV
+  ]
+
+  // 常见的 Excel 文件扩展名
+  const excelExtensions = ['xls', 'xlsx', 'xlsm', 'csv']
+
+  return excelMimeTypes.includes(fileType) || excelExtensions.includes(fileExtension.toLowerCase())
+}
+
+export const validateImage = (fileType: string, fileExtension: string): boolean => {
+  // 常见的图片 MIME 类型
+  const imageMimeTypes = [
+    'image/jpeg', // JPEG
+    'image/jpg', // JPG
+    'image/png', // PNG
+    'image/gif', // GIF
+    'image/bmp', // BMP
+    'image/webp', // WebP
+    'image/svg+xml' // SVG
+  ]
+
+  // 常见的图片文件扩展名
+  const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'svg']
+
+  return imageMimeTypes.includes(fileType) || imageExtensions.includes(fileExtension.toLowerCase())
+}
+
+export const validateVideo = (fileType: string, fileExtension: string): boolean => {
+  // 常见的视频 MIME 类型
+  const videoMimeTypes = [
+    'video/mp4', // MP4
+    'video/mpeg', // MPEG
+    'video/quicktime', // MOV
+    'video/x-msvideo', // AVI
+    'video/x-matroska', // MKV
+    'video/webm', // WebM
+    'video/3gpp', // 3GP
+    'video/3gpp2', // 3G2
+    'video/x-flv', // FLV
+    'video/mp2t', // TS (MPEG Transport Stream)
+    'application/x-mpegURL', // M3U8 (HLS)
+    'video/H264', // H264
+    'video/H265' // H265/HEVC
+  ]
+
+  // 常见的视频文件扩展名
+  const videoExtensions = [
+    'mp4',
+    'mpeg',
+    'mpg',
+    'mov',
+    'avi',
+    'mkv',
+    'webm',
+    '3gp',
+    '3g2',
+    'flv',
+    'ts',
+    'm3u8',
+    'h264',
+    'h265',
+    'hevc'
+  ]
+
+  return videoMimeTypes.includes(fileType) || videoExtensions.includes(fileExtension.toLowerCase())
+}

src/views/food/recipe.vue

@@ -11,6 +11,8 @@
       </div>
     </div>
 
+    <draggable-button @click="addClick"/>
+
     <arrive-bottom v-if="foodStore.isScrollEnd"/>
   </div>
 </template>
@@ -21,9 +23,12 @@ import FoodCard from '@/components/Food/FoodCard.vue'
 import ArriveBottom from '@/components/Common/ArriveButton.vue'
 import { useFoodStore } from '@/store/food.ts'
 import { onBeforeUnmount, onMounted, ref } from 'vue'
+import DraggableButton from '@/components/Common/DraggableButton.vue'
+import { useRouter } from 'vue-router'
 
 const foodRecipeRef = ref()
 const foodStore = useFoodStore()
+const router = useRouter()
 
 onMounted(async () => {
   foodStore.pageInfo = {
@@ -51,6 +56,12 @@ const handleScroll = () => {
     }
   }
 }
+
+const addClick = () => {
+  foodStore.foodRecipeApiType = 'ADD'
+  foodStore.currentFoodRecipe = foodStore.getEmptyFoodRecipe()
+  router.push({ name: 'FoodRecipeForm' })
+}
 </script>
 
 <style lang="scss">

src/views/food/recordForm.vue

@@ -6,6 +6,7 @@
         <el-select
             v-model="foodStore.currentFoodRecord.name"
             @focus="foodStore.queryFoodNameList()"
+            allow-create filterable
             :disabled="foodStore.foodRecordApiType === 'UPDATE'"
             placeholder="请选择菜谱名称">
           <el-option
@@ -34,36 +35,140 @@
       </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-upload
+            v-model:file-list="imageFileList"
+            list-type="picture-card"
+            :on-preview="handlePreview"
+            :limit="1"
+            :before-upload="beforeUpload"
+            :http-request="httpRequest"
+            :on-exceed="handleExceed"
+            :before-remove="beforeRemove"
+            :on-remove="handleRemove"
+        >
+          <el-icon><Plus /></el-icon>
+          <template #tip>
+            <div class="el-upload__tip">
+              请上传小于10M的图片
+            </div>
+          </template>
+        </el-upload>
       </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="danger" @click="deleteClick">删除</el-button>
       <el-button type="info" @click="cancelClick">取消</el-button>
     </div>
+
+    <el-dialog v-model="dialogVisible">
+      <el-image :src="dialogImageUrl" alt="Preview Image" />
+    </el-dialog>
   </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 { ref, reactive, onMounted } from 'vue'
+import { Plus } from '@element-plus/icons-vue'
+import {
+  ElLoading,
+  ElMessage, ElMessageBox,
+  FormRules,
+  UploadProps,
+  UploadRawFile,
+  UploadRequestOptions,
+  UploadUserFile
+} from 'element-plus'
 import { foodRecordRules } from '@/utils/element/elRules.ts'
-import { fileServiceUrl, serviceFileRootPath } from '@/utils'
+import { AListPath } from '@/utils'
 import { commonElMessageBox } from 'vue3-common/utils/elUtil'
+import { getFileExtension, getFileHashName, validateImage } from '@/utils/home/file.ts'
+import { uploadAListFileApi } from '@/apis/file.ts'
 
 const rules = reactive<FormRules>(foodRecordRules)
 
 const formRef = ref()
 const foodStore = useFoodStore()
 
+const imageFileList = ref<UploadUserFile[]>([])
+const dialogImageUrl = ref('')
+const dialogVisible = ref(false)
+
+onMounted(async () => {
+  imageFileList.value = []
+
+  const { imageUrl } = foodStore.currentFoodRecord
+  if (imageUrl) {
+    imageFileList.value.push({
+      name: 'image',
+      url: `${AListPath}${imageUrl}`
+    })
+  }
+})
+
+const beforeUpload: UploadProps['beforeUpload'] = (rawFile: UploadRawFile) => {
+  const maxFileMax = 1024 * 1024 * 10
+  const fileType = rawFile.type
+  const fileName = rawFile.name
+  const fileExtension = fileName.substring(fileName.lastIndexOf('.') + 1).toLowerCase()
+
+  if (!validateImage(fileType, fileExtension)) {
+    ElMessage.error('请上传图片')
+    return false
+  }
+
+  if (rawFile.size > maxFileMax) {
+    ElMessage.error('请上传10M以内的文件!')
+    return false
+  }
+
+  return true
+}
+
+const httpRequest: UploadProps['httpRequest'] = async (options: UploadRequestOptions): Promise<any> => {
+  const loading = ElLoading.service({
+    lock: true,
+    text: '文件上传中 请等待',
+    background: 'rgba(0, 0, 0, 0.7)'
+  })
+
+  try {
+    const filePath = `/local/food/${getFileHashName(options.file.name)}.${getFileExtension(options.file.name)}`
+
+    const data = new FormData()
+    data.append('file', options.file)
+    data.append('filePath', filePath)
+
+    await uploadAListFileApi(data)
+    foodStore.currentFoodRecord.imageUrl = `p/${filePath}`
+    ElMessage.success('上传成功')
+  } catch (error) {
+    console.log(error)
+    ElMessage.error('上传失败 请联系管理员')
+  } finally {
+    loading.close()
+  }
+}
+
+const handleExceed: UploadProps['onExceed'] = () => {
+  ElMessage.warning('最多上传1张图片')
+}
+
+const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
+  foodStore.currentFoodRecord.imageUrl = ''
+}
+
+const handlePreview: UploadProps['onPreview'] = (uploadFile) => {
+  dialogImageUrl.value = uploadFile.url!
+  dialogVisible.value = true
+}
+
+const beforeRemove: UploadProps['beforeRemove'] = () => {
+  return ElMessageBox.confirm('确认删除该文件?').then(() => true, () => false)
+}
+
 /**
  * 点击确认按钮
  */