导入导出

src/views/stuwork/dormhygienemonthly/index.vue

@@ -48,7 +48,6 @@
 						</span>
 						<div class="header-actions">
 							<el-button icon="Upload" type="primary" @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" />
 						</div>
 					</div>
@@ -162,43 +161,61 @@
 		</el-dialog>
 
 		<!-- 导入对话框 -->
-		<upload-excel
-			ref="uploadExcelRef"
-			:title="'导入宿舍月卫生'"
-			:url="'/stuwork/file/importDormHygieneMonthly'"
-			:temp-url="templateUrl"
-			@refreshDataList="getDataList"
-		/>
+		<el-dialog v-model="importDialogVisible" title="导入宿舍月卫生" width="500px" :close-on-click-modal="false">
+			<el-form :model="importForm" ref="importFormRef" label-width="80px" style="margin-bottom: 15px">
+				<el-form-item label="楼号" prop="buildingNo">
+					<el-select v-model="importForm.buildingNo" placeholder="请选择楼号" filterable style="width: 100%">
+						<el-option v-for="item in buildingList" :key="item.buildingNo" :label="item.buildingNo" :value="item.buildingNo" />
+					</el-select>
+				</el-form-item>
+				<el-form-item label="月份" prop="month">
+					<el-date-picker v-model="importForm.month" type="month" placeholder="选择月份" format="YYYY-MM" value-format="YYYY-MM" style="width: 100%" />
+				</el-form-item>
+				<el-form-item>
+					<el-button icon="Download" type="success" @click="handleDownloadTemplate"> 下载模板 </el-button>
+				</el-form-item>
+			</el-form>
+			<el-upload ref="importUploadRef" :auto-upload="false" :on-change="handleImportFileChange" :limit="1" accept=".xlsx,.xls" drag>
+				<i class="el-icon-upload"></i>
+				<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+				<template #tip>
+					<div class="el-upload__tip text-center">只能上传 xlsx/xls 文件，请先选择楼号和月份后下载模板</div>
+				</template>
+			</el-upload>
+			<template #footer>
+				<el-button @click="importDialogVisible = false">取消</el-button>
+				<el-button type="primary" @click="handleImportSubmit" :disabled="!importFile || importLoading">确认导入</el-button>
+			</template>
+		</el-dialog>
 	</div>
 </template>
 
 <script setup lang="ts" name="DormHygieneMonthly">
-import { reactive, ref, onMounted, defineAsyncComponent } from 'vue';
+import { reactive, ref, onMounted } from 'vue';
 import { fetchList, addObj, editObj, delObj, triggerEvaluation } from '/@/api/stuwork/dormhygienemonthly';
-import { exportDormHygieneMonthlyTemplate, downloadBlobFile } from '/@/api/stuwork/file';
+import { exportDormHygieneMonthlyTemplate, importDormHygieneMonthly, downloadBlobFile } from '/@/api/stuwork/file';
 import { getBuildingList } from '/@/api/stuwork/dormbuilding';
 import { useMessage } from '/@/hooks/message';
 import { Search, Document, Plus, Edit, Delete, Promotion } from '@element-plus/icons-vue';
 
-// 引入组件
-const UploadExcel = defineAsyncComponent(() => import('/@/components/Upload/Excel.vue'));
-
 // 定义变量内容
 const searchFormRef = ref();
 const formRef = ref();
 const evalFormRef = ref();
-const uploadExcelRef = ref();
+const importFormRef = ref();
+const importUploadRef = ref();
 const showSearch = ref(true);
 const loading = ref(false);
 const submitLoading = ref(false);
 const evalLoading = ref(false);
+const importLoading = ref(false);
 const dataList = ref<any[]>([]);
 const buildingList = ref<any[]>([]);
 const dialogVisible = ref(false);
-const evalDialogVisible = ref(false);
 const dialogTitle = ref('新增宿舍月卫生');
-// 模板文件URL
-const templateUrl = ref('/stuwork/file/exportDormHygieneMonthlyTemplate');
+const evalDialogVisible = ref(false);
+const importDialogVisible = ref(false);
+const importFile = ref<File | null>(null);
 
 // 分页
 const page = reactive({
@@ -229,6 +246,12 @@ const evalForm = reactive({
 	month: '',
 });
 
+// 导入表单
+const importForm = reactive({
+	buildingNo: '',
+	month: '',
+});
+
 // 表单校验规则
 const rules = {
 	month: [{ required: true, message: '请选择月份', trigger: 'change' }],
@@ -344,14 +367,55 @@ const handleEvaluation = () => {
 
 // 导入
 const handleImport = () => {
-	if (uploadExcelRef.value) {
-		uploadExcelRef.value.show();
+	importForm.buildingNo = '';
+	importForm.month = '';
+	importFile.value = null;
+	importDialogVisible.value = true;
+};
+
+// 下载模板
+const handleDownloadTemplate = async () => {
+	if (!importForm.buildingNo) {
+		useMessage().warning('请先选择楼号');
+		return;
+	}
+	if (!importForm.month) {
+		useMessage().warning('请先选择月份');
+		return;
+	}
+	try {
+		await downloadBlobFile(exportDormHygieneMonthlyTemplate(importForm), `宿舍月卫生导入模板_${importForm.month}.xlsx`);
+	} catch (err: any) {
+		useMessage().error(err?.msg || '下载模板失败');
 	}
 };
 
-// 导出
-const handleExport = async () => {
-	await downloadBlobFile(exportDormHygieneMonthlyTemplate(searchForm), '宿舍月卫生.xlsx');
+// 导入文件变化
+const handleImportFileChange = (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 importDormHygieneMonthly(formData);
+		useMessage().success('导入成功');
+		importDialogVisible.value = false;
+		importFile.value = null;
+		getDataList();
+	} catch (err: any) {
+		useMessage().error(err.msg || '导入失败');
+	} finally {
+		importLoading.value = false;
+	}
 };
 
 // 提交评比