feat:更新上传文件组件

src/views/ledger/stats.vue

@@ -32,7 +32,6 @@ import LedgerRank from '@/components/Ledger/LedgerRank.vue'
 import { useLedgerStore } from '@/store/ledger.ts'
 import { onMounted, ref } from 'vue'
 import { statsByField } from '@/utils/home/ledgerUtil.ts'
-import { isMobile } from 'vue3-common/utils/layoutUtil'
 import { useAppStore } from '@/store/app.ts'
 import * as echarts from 'echarts'
 import { pieChartOptions } from 'vue3-common/utils/eChartsUtil'
@@ -60,24 +59,22 @@ const updateChart = () => {
   ledgerCategoryChart.setOption(pieChartOptions('rank', '元', categoryData))
   ledgerPayerChart.setOption(pieChartOptions('rank', '元', payerData))
 
-  if (isMobile()) {
-    ledgerCategoryChart.setOption({
-      series: [{
-        radius: ['20%', '50%'],
-        label: {
-          formatter: '{b}: {d}%'
-        }
-      }]
-    })
+  ledgerCategoryChart.setOption({
+    series: [{
+      radius: ['20%', '50%'],
+      label: {
+        formatter: '{b}: {d}%'
+      }
+    }]
+  })
 
-    ledgerPayerChart.setOption({
-      series: [{
-        radius: ['20%', '50%'],
-        label: {
-          formatter: '{b}: {d}%'
-        }
-      }]
-    })
-  }
+  ledgerPayerChart.setOption({
+    series: [{
+      radius: ['20%', '50%'],
+      label: {
+        formatter: '{b}: {d}%'
+      }
+    }]
+  })
 }
 </script>

src/views/travel/recordForm.vue

@@ -34,12 +34,12 @@
             list-type="picture-card"
             :accept="acceptImageTypes"
             :limit="3"
-            :before-upload="beforeUpload"
-            :http-request="httpRequest"
-            :on-success="handleSuccess"
-            :on-exceed="handleExceed"
+            :before-upload="beforeImageUpload"
+            :http-request="httpImageRequest"
+            :on-success="handleImageSuccess"
+            :on-exceed="handleImageExceed"
             :before-remove="beforeRemove"
-            :on-remove="handleRemove"
+            :on-remove="handleImageRemove"
         >
           <el-icon><Plus /></el-icon>
           <template #tip>
@@ -49,6 +49,27 @@
           </template>
         </el-upload>
       </el-form-item>
+
+      <el-form-item label="视频">
+        <el-upload
+            v-model:file-list="videoFileList"
+            :accept="acceptVideoTypes"
+            :limit="3"
+            :before-upload="beforeVideoUpload"
+            :http-request="httpVideoRequest"
+            :on-success="handleVideoSuccess"
+            :on-exceed="handleVideoExceed"
+            :before-remove="beforeRemove"
+            :on-remove="handleVideoRemove"
+        >
+          <el-button type="primary">点击上传</el-button>
+          <template #tip>
+            <div class="el-upload__tip">
+              请上传小于500M的视频
+            </div>
+          </template>
+        </el-upload>
+      </el-form-item>
     </el-form>
 
     <div class="button-container">
@@ -66,9 +87,9 @@ import { ElMessage, ElMessageBox, FormRules, UploadProps, UploadRawFile, UploadR
 import { travelRecordRules } from '@/utils/element/elRules.ts'
 import { commonElMessageBox } from 'vue3-common/utils/elUtil'
 import { useAppStore } from '@/store/app.ts'
-import { acceptImageTypes } from '@/utils/file.ts'
+import { acceptImageTypes, acceptVideoTypes } from '@/utils/file.ts'
 import { Plus } from '@element-plus/icons-vue'
-import { beforeUploadImage, httpRequestFile } from '@/utils/element/elUpload.ts'
+import { beforeUploadImage, beforeUploadVideo, httpRequestFile } from '@/utils/element/elUpload.ts'
 
 const rules = reactive<FormRules>(travelRecordRules)
 
@@ -77,44 +98,77 @@ const travelStore = useTravelStore()
 const appStore = useAppStore()
 
 const imageFileList = ref<UploadUserFile[]>([])
+const videoFileList = ref<UploadUserFile[]>([])
 
 onMounted(async () => {
   appStore.isShowMobileBack = true
 
   initImageFileList()
+  initVideoFileList()
 })
 
 const initImageFileList = () => {
   imageFileList.value = []
-  travelStore.currentTravelRecord.imageList.forEach((image) => {
+  travelStore.currentTravelRecord.imageList.forEach((image, index) => {
     imageFileList.value.push({
-      name: 'image',
+      name: `image${index + 1}`,
       url: image
     })
   })
 }
 
-const beforeUpload: UploadProps['beforeUpload'] = (rawFile: UploadRawFile) => {
+const initVideoFileList = () => {
+  videoFileList.value = []
+  travelStore.currentTravelRecord.videoList.forEach((video, index) => {
+    videoFileList.value.push({
+      name: `video${index + 1}`,
+      url: video
+    })
+  })
+}
+
+const beforeImageUpload: UploadProps['beforeUpload'] = (rawFile: UploadRawFile) => {
   return beforeUploadImage(rawFile)
 }
 
-const httpRequest: UploadProps['httpRequest'] = async (options: UploadRequestOptions): Promise<any> => {
+const httpImageRequest: UploadProps['httpRequest'] = async (options: UploadRequestOptions): Promise<any> => {
   return await httpRequestFile(travelStore.travelImagePath, options)
 }
 
-const handleSuccess = (response: string) => {
+const handleImageSuccess = (response: string) => {
   travelStore.currentTravelRecord.imageList.push(response)
 }
 
-const handleExceed: UploadProps['onExceed'] = () => {
+const handleImageExceed: UploadProps['onExceed'] = () => {
   ElMessage.warning('最多上传3张图片')
 }
 
-const handleRemove: UploadProps['onRemove'] = (uploadFile) => {
+const handleImageRemove: UploadProps['onRemove'] = (uploadFile) => {
   const index = imageFileList.value.findIndex((item) => item.uid === uploadFile.uid)
   travelStore.currentTravelRecord.imageList.splice(index, 1)
 }
 
+const beforeVideoUpload: UploadProps['beforeUpload'] = (rawFile: UploadRawFile) => {
+  return beforeUploadVideo(rawFile)
+}
+
+const httpVideoRequest: UploadProps['httpRequest'] = async (options: UploadRequestOptions): Promise<any> => {
+  return await httpRequestFile(travelStore.travelImagePath, options)
+}
+
+const handleVideoSuccess = (response: string) => {
+  travelStore.currentTravelRecord.videoList.push(response)
+}
+
+const handleVideoExceed: UploadProps['onExceed'] = () => {
+  ElMessage.warning('最多上传3个视频')
+}
+
+const handleVideoRemove: UploadProps['onRemove'] = (uploadFile) => {
+  const index = videoFileList.value.findIndex((item) => item.uid === uploadFile.uid)
+  travelStore.currentTravelRecord.videoList.splice(index, 1)
+}
+
 const beforeRemove: UploadProps['beforeRemove'] = () => {
   return ElMessageBox.confirm('确认删除该文件?').then(() => true, () => false)
 }