完善导入导出

src/views/customerService/report/component/exportDialog.vue

@@ -0,0 +1,99 @@
+<template>
+	<el-dialog title="是否导出产品" v-model="isShowDialog" width="400px">
+		<div style="text-align: center; padding: 20px 0">
+			<p style="margin-bottom: 20px; font-size: 14px; color: #606266">确定要导数据吗？</p>
+		</div>
+		<template #footer>
+			<span class="dialog-footer">
+				<el-button @click="isShowDialog = false">取消</el-button>
+				<el-button type="primary" @click="handleExport" :loading="loading">导出</el-button>
+			</span>
+		</template>
+	</el-dialog>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { ElMessage } from 'element-plus';
+import { exportProduct } from '/@/api/customerService/report';
+
+const isShowDialog = ref(false);
+const loading = ref(false);
+const exportName = ref(''); // 用于存储产品名称筛选参数
+
+// 打开对话框，支持传入筛选参数
+const openDialog = (name?: string) => {
+	isShowDialog.value = true;
+	exportName.value = name || '';
+};
+
+// 处理导出
+const handleExport = async () => {
+	try {
+		loading.value = true;
+
+		// 构建请求参数
+		const params: any = {};
+		if (exportName.value) {
+			params.name = exportName.value;
+		}
+
+		// 调用导出接口 - 根据API文档，这里应该返回JSON
+		const response = await exportProduct(params);
+
+		console.log('导出响应:', response);
+
+		// 根据API文档，成功响应是200状态码，返回JSON数据
+		// 但实际后端可能直接返回文件流，所以需要处理两种情况
+
+		if (response instanceof Blob) {
+			// 情况1：后端直接返回文件流（你的实际情况）
+			handleFileDownload(response, 'products_export.zip');
+		} else if (response.data && response.data instanceof Blob) {
+			// 情况2：文件流在data字段中
+			handleFileDownload(response.data, 'products_export.zip');
+		} else if (response.data && response.data.downloadUrl) {
+			// 情况3：返回下载链接（符合API文档规范）
+			window.open(response.data.downloadUrl, '_blank');
+			ElMessage.success('导出任务已提交，请在新窗口下载文件');
+		} else {
+			// 情况4：返回任务ID或其他信息
+			ElMessage.success('导出任务已提交，请稍后查看下载列表');
+		}
+
+		isShowDialog.value = false;
+	} catch (error: any) {
+		console.error('导出失败：', error);
+		ElMessage.error(`导出失败：${error.message || '未知错误'}`);
+	} finally {
+		loading.value = false;
+	}
+};
+
+// 处理文件下载
+const handleFileDownload = (blob: Blob, filename: string) => {
+	const url = window.URL.createObjectURL(blob);
+	const link = document.createElement('a');
+	link.href = url;
+
+	// 如果有筛选条件，在文件名中体现
+	if (exportName.value) {
+		filename = `products_${exportName.value}_${new Date().getTime()}.zip`;
+	} else {
+		filename = `products_${new Date().getTime()}.zip`;
+	}
+
+	link.download = filename;
+	document.body.appendChild(link);
+	link.click();
+	document.body.removeChild(link);
+	window.URL.revokeObjectURL(url);
+
+	ElMessage.success('导出成功！文件已开始下载');
+};
+
+// 暴露方法给父组件使用
+defineExpose({
+	openDialog,
+});
+</script>

src/views/customerService/report/index.vue

@@ -73,6 +73,7 @@
 				@pagination="dataList"
 			/>
 		</el-card>
+		<expotDialog ref="expotDialogRef"></expotDialog>
 	</div>
 </template>
 
@@ -80,6 +81,7 @@
 import { ref, reactive, onMounted, nextTick } from 'vue';
 import { ElMessageBox, ElMessage, FormInstance } from 'element-plus';
 import { getDataList } from '/@/api/customerService/report';
+import expotDialog from '/@/views/customerService/report/component/exportDialog.vue';
 
 // 定义接口
 interface TableDataRow {
@@ -227,10 +229,11 @@ const resetQuery = (formEl: FormInstance | undefined) => {
 		dataList();
 	});
 };
-
+const expotDialogRef = ref();
 // 导出数据
 const handleExport = () => {
-	ElMessage.info('导出功能开发中');
+	// ElMessage.info('导出功能开发中');
+	expotDialogRef.value?.openDialog(tableData.param);
 };
 
 // 初始化表格数据