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

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)
+}
+
 /**
  * 点击确认按钮
  */