导入导出

src/views/stuwork/rewardclass/index.vue

@@ -57,7 +57,6 @@
 						<div class="header-actions">
 							<el-button icon="Plus" type="primary" @click="formDialogRef.openDialog()"> 新增 </el-button>
 							<el-button icon="Upload" type="success" class="ml10" @click="handleImport"> 导入 </el-button>
-							<el-button icon="Download" type="warning" class="ml10" @click="handleExport"> 导出 </el-button>
 							<right-toolbar v-model:showSearch="showSearch" class="ml10" @queryTable="getDataList">
 								<TableColumnControl
 									ref="columnControlRef"
@@ -150,33 +149,21 @@
 		<!-- 新增/编辑表单弹窗 -->
 		<form-dialog ref="formDialogRef" @refresh="getDataList" />
 
-		<!-- 导入弹窗 -->
-		<el-dialog title="导入文明班级" v-model="importDialogVisible" :width="500" :close-on-click-modal="false" draggable>
-			<div style="margin-bottom: 15px">
-				<el-button icon="Download" type="success" @click="handleDownloadTemplate"> 下载模板 </el-button>
-			</div>
-			<el-upload ref="uploadRef" :auto-upload="false" :on-change="handleFileChange" :limit="1" accept=".xlsx,.xls" drag>
-				<el-icon class="el-icon--upload"><upload-filled /></el-icon>
-				<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
-				<template #tip>
-					<div class="el-upload__tip">只能上传 xlsx/xls 文件</div>
-				</template>
-			</el-upload>
-			<template #footer>
-				<span class="dialog-footer">
-					<el-button @click="importDialogVisible = false">取 消</el-button>
-					<el-button type="primary" @click="handleImportSubmit" :disabled="!importFile || importLoading">确 认</el-button>
-				</span>
-			</template>
-		</el-dialog>
+		<!-- 导入对话框 -->
+		<upload-excel
+			ref="uploadExcelRef"
+			:title="'导入文明班级'"
+			:url="'/stuwork/file/importRewardClass'"
+			:temp-url="'/stuwork/file/exportRewardClassTemplate'"
+			@refreshDataList="getDataList"
+		/>
 	</div>
 </template>
 
 <script setup lang="ts" name="RewardClass">
-import { reactive, ref, onMounted } from 'vue';
+import { reactive, ref, onMounted, defineAsyncComponent } from 'vue';
 import { BasicTableProps, useTable } from '/@/hooks/table';
 import { fetchList, delObj } from '/@/api/stuwork/rewardclass';
-import { exportRewardClassTemplate, importRewardClass, downloadBlobFile } from '/@/api/stuwork/file';
 import { getDeptList } from '/@/api/basic/basicclass';
 import { getClassListByRole } from '/@/api/basic/basicclass';
 import { queryAllSchoolYear } from '/@/api/basic/basicyear';
@@ -184,7 +171,6 @@ import { getDicts } from '/@/api/admin/dict';
 import { useMessage, useMessageBox } from '/@/hooks/message';
 import TableColumnControl from '/@/components/TableColumnControl/index.vue';
 import {
-	UploadFilled,
 	List,
 	Calendar,
 	Clock,
@@ -201,9 +187,12 @@ import {
 import { useTableColumnControl } from '/@/hooks/tableColumn';
 import FormDialog from './form.vue';
 
+// 引入组件
+const UploadExcel = defineAsyncComponent(() => import('/@/components/Upload/Excel.vue'));
+
 // 定义变量内容
 const formDialogRef = ref();
-const uploadRef = ref();
+const uploadExcelRef = ref();
 const searchFormRef = ref();
 const columnControlRef = ref();
 const showSearch = ref(true);
@@ -211,9 +200,6 @@ const schoolYearList = ref<any[]>([]);
 const schoolTermList = ref<any[]>([]);
 const deptList = ref<any[]>([]);
 const classList = ref<any[]>([]);
-const importDialogVisible = ref(false);
-const importFile = ref<File | null>(null);
-const importLoading = ref(false);
 
 // 表格列配置
 const tableColumns = [
@@ -280,47 +266,8 @@ const handleReset = () => {
 
 // 导入
 const handleImport = () => {
-	importDialogVisible.value = true;
-	importFile.value = null;
-	uploadRef.value?.clearFiles();
-};
-
-// 导出
-const handleExport = async () => {
-	await downloadBlobFile(exportRewardClassTemplate(), '文明班级导入模板.xlsx');
-};
-
-// 下载模板
-const handleDownloadTemplate = async () => {
-	await downloadBlobFile(exportRewardClassTemplate(), '文明班级导入模板.xlsx');
-};
-
-// 文件变化
-const handleFileChange = (file: any) => {
-	importFile.value = file.raw;
-};
-
-// 提交导入
-const handleImportSubmit = async () => {
-	if (!importFile.value) {
-		useMessage().warning('请选择要导入的文件');
-		return;
-	}
-
-	importLoading.value = true;
-	try {
-		const formData = new FormData();
-		formData.append('file', importFile.value);
-		await importRewardClass(formData);
-		useMessage().success('导入成功');
-		importDialogVisible.value = false;
-		importFile.value = null;
-		uploadRef.value?.clearFiles();
-		getDataList();
-	} catch (err: any) {
-		useMessage().error(err.msg || '导入失败');
-	} finally {
-		importLoading.value = false;
+	if (uploadExcelRef.value) {
+		uploadExcelRef.value.show();
 	}
 };
 
@@ -414,4 +361,4 @@ onMounted(() => {
 
 <style scoped lang="scss">
 @import '/@/assets/styles/modern-page.scss';
-</style>
+</style>