diff --git a/src/apis/file.ts b/src/apis/file.ts index ac3b742..0c50300 100644 --- a/src/apis/file.ts +++ b/src/apis/file.ts @@ -1,5 +1,6 @@ import { cloudService } from './index' import { IFileInfo } from '@/types/file' +import type { AxiosProgressEvent } from 'axios' export const uploadFileApi = (form: FormData, path: string, md5: string): Promise => cloudService({ @@ -12,12 +13,14 @@ export const uploadFileApi = (form: FormData, path: string, md5: string): Promis data: form }) -export const uploadAListFileApi = (form: FormData): Promise => +export const uploadAListFileApi = (form: FormData, + progress: (event: AxiosProgressEvent) => void): Promise => cloudService({ url: '/home-api/file/alist', headers: { 'Content-Type': 'multipart/form-data' }, + onUploadProgress: progress, timeout: 0, method: 'post', data: form diff --git a/src/components/Anniversary/AnniversaryQuery.vue b/src/components/Anniversary/AnniversaryQuery.vue index a1c32d0..4878b07 100644 --- a/src/components/Anniversary/AnniversaryQuery.vue +++ b/src/components/Anniversary/AnniversaryQuery.vue @@ -1,5 +1,5 @@ diff --git a/src/components/Food/FoodDailyItem.vue b/src/components/Food/FoodDailyItem.vue index 205d75a..29f8e85 100644 --- a/src/components/Food/FoodDailyItem.vue +++ b/src/components/Food/FoodDailyItem.vue @@ -30,8 +30,6 @@ import { useRouter } from 'vue-router' import { useAppStore } from '@/store/app.ts' import { formatChineseDate } from 'vue3-common/utils/dateUtil' import { IFoodRecord } from '@/types/food.ts' -import { deepCopyObject } from 'vue3-common/utils/dataUtil' -import { isMobile } from 'vue3-common/utils/layoutUtil' const foodStore = useFoodStore() const appStore = useAppStore() @@ -85,18 +83,10 @@ const getFoodDailyByDate = (date: string) => { */ const selectFoodRecordClick = async (foodRecord: IFoodRecord) => { foodStore.foodRecordApiType = 'UPDATE' + foodStore.currentFoodRecord = foodRecord - if (isMobile()) { - appStore.isShowMobileBack = true - foodStore.currentFoodRecord = foodRecord - await router.push({ name: 'FoodRecordForm' }) - } else { - foodStore.foodRecordDialog = { - title: '编辑记录', - visible: true, - data: deepCopyObject(foodRecord) - } - } + appStore.isShowMobileBack = true + await router.push({ name: 'FoodRecordForm' }) } diff --git a/src/components/Ledger/LedgerCard.vue b/src/components/Ledger/LedgerCard.vue index e7a4b89..d0326a9 100644 --- a/src/components/Ledger/LedgerCard.vue +++ b/src/components/Ledger/LedgerCard.vue @@ -38,8 +38,6 @@ diff --git a/src/store/bill.ts b/src/store/bill.ts index 5dfb54d..b33d1fc 100644 --- a/src/store/bill.ts +++ b/src/store/bill.ts @@ -14,7 +14,6 @@ import { getCurrentMonth, getCurrentYear, getStartEndDate } from 'vue3-common/ut import { IDateType, ImagePathEnum } from '@/types' import { IDialog, IStatsChart, IHandleApi } from 'vue3-common/types' import { ElMessage } from 'element-plus' -import { isMobile } from 'vue3-common/utils/layoutUtil' export const useBillStore = defineStore('bill', { state: () => ({ @@ -125,10 +124,6 @@ export const useBillStore = defineStore('bill', { break } this.billDialog.visible = false - - if (!isMobile()) { - await this.refreshInfo() - } }, getBillDateList() { const { billYear, billMonth } = this.billQueryForm diff --git a/src/store/food.ts b/src/store/food.ts index ab13c82..2d5026f 100644 --- a/src/store/food.ts +++ b/src/store/food.ts @@ -13,7 +13,6 @@ import type { IDialog } from 'vue3-common/types' import { IHandleApi } from 'vue3-common/types' import { ElMessage } from 'element-plus' import { getCurrentMonth, getCurrentYear, getStartEndDate } from 'vue3-common/utils/dateUtil' -import { isMobile } from 'vue3-common/utils/layoutUtil' export const useFoodStore = defineStore('food', { state: () => ({ @@ -157,10 +156,6 @@ export const useFoodStore = defineStore('food', { break } this.foodRecordDialog.visible = false - - if (!isMobile()) { - await this.refreshInfo() - } }, async refreshInfo() { await this.queryFoodRecipeList() diff --git a/src/store/travel.ts b/src/store/travel.ts index 0cb261c..8228f15 100644 --- a/src/store/travel.ts +++ b/src/store/travel.ts @@ -12,7 +12,6 @@ import { queryTravelSpotNameListApi, queryTravelStatsApi, updateTravelRecordApi, updateTravelSpotApi } from '@/apis/travel' -import { isMobile } from 'vue3-common/utils/layoutUtil' export const useTravelStore = defineStore('travel', { state: () => ({ @@ -151,10 +150,6 @@ export const useTravelStore = defineStore('travel', { break } this.travelRecordDialog.visible = false - - if (!isMobile()) { - await this.refreshInfo() - } }, async refreshInfo() { await this.queryTravelSpotList() diff --git a/src/utils/element/elUpload.ts b/src/utils/element/elUpload.ts index bc80fa9..3a760d5 100644 --- a/src/utils/element/elUpload.ts +++ b/src/utils/element/elUpload.ts @@ -25,7 +25,7 @@ export const beforeUploadImage = (rawFile: UploadRawFile): boolean => { } export const beforeUploadVideo = (rawFile: UploadRawFile): boolean => { - const maxFileMax = 1024 * 1024 * 200 + const maxFileMax = 1024 * 1024 * 500 const fileType = rawFile.type const fileName = rawFile.name const fileExtension = fileName.substring(fileName.lastIndexOf('.') + 1).toLowerCase() @@ -65,7 +65,13 @@ export const httpRequestFile = async (basePath: string, } data.append('filePath', filePath) - await uploadAListFileApi(data) + await uploadAListFileApi(data, (event) => { + if (event.progress === 1) { + loading.setText('文件上传完成 正在压缩 请等待') + } else { + loading.setText(`文件上传中 当前进度：${(event.progress * 100).toFixed(2)}% 请等待`) + } + }) ElMessage.success('上传成功') return imageUrl } catch (error) { diff --git a/src/utils/home/planUtil.ts b/src/utils/home/planUtil.ts index 6cf033e..9ce3762 100644 --- a/src/utils/home/planUtil.ts +++ b/src/utils/home/planUtil.ts @@ -52,56 +52,6 @@ export const calendarConfig = { eventResourceEditable: false } -/** - * 初始化普通视图日程 - * @param element 挂载元素 - * @param select 日期选择事件 - * @param eventClick 事件点击 - * @param updateDateEvent 更新日期事件 - */ -export const initCommonCalendar = (element: HTMLElement, - select: Function, - eventClick: Function, - updateDateEvent: Function) => { - const { height, slotMinTime, slotMaxTime, allDaySlot, firstDay, initialDate, buttonText, - locale, dayMaxEventRows, editable, selectable, eventStartEditable } = calendarConfig - - const plugins = [dayGridPlugin, interactionPlugin, timeGridPlugin] - const initialView = 'dayGridMonth' - const headerToolbar = { - left: 'timeGridDay,timeGridWeek,dayGridMonth', - center: 'title', - right: 'prev,today,next' - } - - return new Calendar(element, { - height, - plugins, - initialView, - slotMinTime, - slotMaxTime, - allDaySlot, - firstDay, - initialDate, - headerToolbar, - buttonText, - locale, - slotLabelFormat: { - hour: '2-digit', - minute: '2-digit', - meridiem: false, - hour12: false - }, - dayMaxEventRows, - editable, - selectable, - eventStartEditable, - select, - eventClick, - datesSet: updateDateEvent - }) -} - export const initMobileCalendar = (element: HTMLElement, select: Function, eventClick: Function, diff --git a/src/utils/index.ts b/src/utils/index.ts index f794ba2..aa1bad2 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -24,7 +24,7 @@ export const AListPath = import.meta.env.VITE_API_ALIST_PATH export const ThumbImageQuery = '?q=70' -export const RawImageQuery = '?w=2560&h=1440&q=100' +export const RawImageQuery = '?w=2560&h=1440&q=90' /** * 获取assets静态资源 diff --git a/src/views/ledger/stats.vue b/src/views/ledger/stats.vue index f1b88e8..b3dcab5 100644 --- a/src/views/ledger/stats.vue +++ b/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}%' + } + }] + }) } diff --git a/src/views/travel/recordForm.vue b/src/views/travel/recordForm.vue index 6441d0f..1a1c3db 100644 --- a/src/views/travel/recordForm.vue +++ b/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" > + + + + 点击上传 + + +
@@ -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(travelRecordRules) @@ -77,44 +98,77 @@ const travelStore = useTravelStore() const appStore = useAppStore() const imageFileList = ref([]) +const videoFileList = ref([]) 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 => { +const httpImageRequest: UploadProps['httpRequest'] = async (options: UploadRequestOptions): Promise => { 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 => { + 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) }