feat: 🚀 导出账单使用Excel导入账单

src/api/v1/files.ts

@@ -16,6 +16,11 @@ export const downloadFilesByFilepath = (data: any) => {
 	return http.request<any>('get', `files/downloadFilesByFilepath`, { params: data, responseType: 'blob' });
 };
 
+/** 系统文件管理---获取添加账单模板文件 */
+export const fetchGetAddBillTemplate = () => {
+	return http.request<any>('get', `files/noManage/getAddBillTemplate`, { responseType: 'blob' });
+};
+
 /** 系统文件管理---获取所有文件类型 */
 export const fetchGetAllMediaTypes = () => {
 	return http.request<BaseResult<any>>('get', `files/noManage/getAllMediaTypes`);

src/api/v1/financial/user/billUser.ts

@@ -23,6 +23,14 @@ export const fetchGetExpendOrIncome = (data: any) => {
 	});
 };
 
+/** 账单信息---导出用户账单信息 */
+export const fetchImportBill = (data: any) => {
+	return http.request<BaseResult<object>>('post', 'bill/noManage/importBill', {
+		data,
+		headers: { 'Content-Type': 'multipart/form-data' },
+	});
+};
+
 /** 账单信息---导出用户账单信息 */
 export const fetchExportBill = (data: any) => {
 	return http.request<BaseResult<object>>('post', 'bill/noManage/exportBill', { data, responseType: 'blob' });

src/store/financialUser/billUser.ts

@@ -1,5 +1,12 @@
 import { defineStore } from 'pinia';
-import { fetchAddUserBill, fetchDeleteUserBill, fetchExportBill, fetchGetUserBillList, fetchUpdateUserBill } from '@/api/v1/financial/user/billUser';
+import {
+	fetchAddUserBill,
+	fetchDeleteUserBill,
+	fetchExportBill,
+	fetchGetUserBillList,
+	fetchImportBill,
+	fetchUpdateUserBill,
+} from '@/api/v1/financial/user/billUser';
 import { pageSizes } from '@/enums/baseConstant';
 import { storeMessage } from '@/utils/message';
 import { storePagination } from '@/store/useStorePagination';
@@ -66,6 +73,12 @@ export const useBillUserStore = defineStore('billUserStore', {
 			return pagination(result);
 		},
 
+		/** 导入账单*/
+		async importBill(data: any) {
+			const result = await fetchImportBill(data);
+			return storeMessage(result);
+		},
+
 		/** 导出账单*/
 		async exportBill(data: any) {
 			data = { startDate: dayjs(data[0]).format('YYYY-MM-DD'), endDate: dayjs(data[1]).format('YYYY-MM-DD') };

src/store/monitor/files.ts

@@ -1,8 +1,17 @@
 import { defineStore } from 'pinia';
-import { fetchAddFiles, fetchDeleteFiles, fetchGetAllFilesStoragePath, fetchGetAllMediaTypes, fetchGetFilesList, fetchUpdateFiles } from '@/api/v1/files';
+import {
+	fetchAddFiles,
+	fetchDeleteFiles,
+	fetchGetAddBillTemplate,
+	fetchGetAllFilesStoragePath,
+	fetchGetAllMediaTypes,
+	fetchGetFilesList,
+	fetchUpdateFiles,
+} from '@/api/v1/files';
 import { pageSizes } from '@/enums/baseConstant';
 import { storeMessage } from '@/utils/message';
 import { storePagination } from '@/store/useStorePagination';
+import { download } from '@/utils/sso';
 
 /**
  * 系统文件表 Store
@@ -64,6 +73,12 @@ export const useFilesStore = defineStore('filesStore', {
 			}
 		},
 
+		/** 获取添加账单模板文件 */
+		async getAddBillTemplate() {
+			const result = await fetchGetAddBillTemplate();
+			download(result, `bill-add-excel.xlsx`);
+		},
+
 		/** 获取所有文件类型 */
 		async getAllFilesStoragePath() {
 			const result = await fetchGetAllFilesStoragePath();

src/views/financial-user/account-bill/bill/add-bull-by-excel.vue

@@ -0,0 +1,63 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { FormInstance, genFileId, UploadProps, UploadRawFile } from 'element-plus';
+import { $t } from '@/plugins/i18n';
+import { useFilesStore } from '@/store/monitor/files';
+import { UploadFilled } from '@element-plus/icons-vue';
+
+interface FormProps {
+	formInline: { file: any };
+}
+
+const props = withDefaults(defineProps<FormProps>(), {
+	formInline: () => ({
+		file: undefined,
+	}),
+});
+
+const formRef = ref<FormInstance>();
+const upload = ref();
+const form = ref(props.formInline);
+const filesStore = useFilesStore();
+
+/**
+ * * 修改时替换之前文件
+ * @param files
+ */
+const handleExceed: UploadProps['onExceed'] = files => {
+	upload.value!.clearFiles();
+	const file = files[0] as UploadRawFile;
+	file.uid = genFileId();
+	upload.value!.handleStart(file);
+};
+
+defineExpose({ formRef });
+</script>
+
+<template>
+	<el-form ref="formRef" :model="form" :rules="{ file: [{ required: true, message: $t('select') + $t('files'), trigger: 'change' }] }" label-width="auto">
+		<!-- 文件列表---上传不显示 -->
+		<el-form-item :label="$t('files')" prop="file">
+			<el-upload ref="upload" v-model:file-list="form.file" :auto-upload="false" :limit="1" :on-exceed="handleExceed" class="w-full" drag>
+				<el-icon class="el-icon--upload">
+					<UploadFilled />
+				</el-icon>
+				<div class="el-upload__text">
+					{{ $t('drop_file_here') }}/<em>{{ $t('click_to_upload') }}</em>
+				</div>
+			</el-upload>
+		</el-form-item>
+
+		<!-- 文件列表---上传不显示 -->
+		<el-form-item>
+			<div class="text-red-500">
+				<h5 class="p-0 m-0">使用方式</h5>
+				<p class="flex">
+					1. 下载模板文件
+					<el-link :underline="false" type="primary" @click="filesStore.getAddBillTemplate">点击下载</el-link>
+				</p>
+				<p>2. 将模板文件拖拽或者上传</p>
+			</div>
+		</el-form-item>
+	</el-form>
+</template>

src/views/financial-user/account-bill/bill/bill-dialog.vue

@@ -73,8 +73,8 @@ defineExpose({ formRef });
 		<el-form-item :label="$t('category')" prop="categoryId">
 			<el-select v-model="form.categoryId" :placeholder="$t('select') + $t('category')" clearable filterable @click="categoryUserStore.getCategoryUserAllList()">
 				<el-option v-for="item in categoryUserStore.allCategoryList" :key="item.id" :label="item.categoryName" :navigationBar="false" :value="item.id">
-					<el-text v-if="item.isBuiltin" effect="plain" size="large" type="info">{{ item.categoryName }}</el-text>
-					<el-text v-else effect="plain" size="large" type="success">{{ item.categoryName }}</el-text>
+					<el-text v-if="item.isBuiltin" effect="plain" type="info">{{ item.categoryName }}</el-text>
+					<el-text v-else effect="plain" type="success">{{ item.categoryName }}</el-text>
 				</el-option>
 			</el-select>
 		</el-form-item>

src/views/financial-user/account-bill/bill/utils/hooks.ts

@@ -9,6 +9,8 @@ import DeleteBatchDialog from '@/components/Table/DeleteBatchDialog.vue';
 import dayjs from 'dayjs';
 import ExportBill from '@/views/financial-user/account-bill/bill/export-bill.vue';
 import { currentMouth } from '@/enums/dateEnums';
+import AddBullByExcel from '@/views/financial-user/account-bill/bill/add-bull-by-excel.vue';
+import type { UploadRawFile } from 'element-plus';
 
 export const formRef = ref();
 // 删除ids
@@ -70,6 +72,13 @@ export function onAdd() {
 					});
 				},
 			},
+			{
+				label: $t('fileImport'),
+				type: 'success',
+				text: true,
+				bg: true,
+				btnClick: () => addBillByExcel(),
+			},
 			{
 				label: $t('continue_adding'),
 				type: 'success',
@@ -196,3 +205,30 @@ export const onExportBill = () => {
 		},
 	});
 };
+
+/** 使用Excel文件导入 */
+export const addBillByExcel = () => {
+	const formImportBillRef = ref();
+	addDialog({
+		title: $t('addBillByExcel'),
+		width: '30%',
+		props: { formInline: { file: undefined } },
+		draggable: true,
+		fullscreenIcon: true,
+		closeOnClickModal: false,
+		contentRenderer: () => h(AddBullByExcel, { ref: formImportBillRef }),
+		beforeSure: (done, { options }) => {
+			formImportBillRef.value.formRef.validate(async (valid: any) => {
+				if (!valid) return;
+				// 上传的文件
+				const file = options.props.formInline.file[0] as UploadRawFile;
+
+				// 添加到数据库
+				const result = billStore.importBill({ file: file.raw });
+				if (!result) return;
+
+				done();
+			});
+		},
+	});
+};

src/views/welcome/utils/hooks.tsx

@@ -37,7 +37,7 @@ export const onSearch = async () => {
 		.filter(item => item.type === 1)
 		.map(item => {
 			const transactionDate = item.transactionDate;
-			return `${dayjs(transactionDate).format('DD')} ${days[dayjs(transactionDate).day()]}`;
+			return `${dayjs(transactionDate).format('MM-DD')} ${days[dayjs(transactionDate).day()]}`;
 		});
 	incomeData.value = result.data.homeOverview.filter(item => item.type === 1).map(item => item.amount);
 	expendData.value = result.data.homeOverview.filter(item => item.type === -1).map(item => item.amount);