完善导出功能

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

@@ -1,55 +1,99 @@
 <template>
-	<el-dialog title="是否导出产品" v-model="isShowDialog" width="500px">
+	<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">导出</el-button>
+				<el-button type="primary" @click="handleExport" :loading="loading">导出</el-button>
 			</span>
 		</template>
 	</el-dialog>
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive } from 'vue';
+import { ref } from 'vue';
 import { ElMessage } from 'element-plus';
 import { exportProduct } from '/@/api/customerService/product';
 
 const isShowDialog = ref(false);
-const tableData = ref([]);
-const exportname = ref();
+const loading = ref(false);
+const exportName = ref(''); // 用于存储产品名称筛选参数
 
-const form = reactive({
-	exportType: 'current',
-	fileType: 'xlsx',
-});
-
-// 打开对话框
-const openDialog = (name: string) => {
+// 打开对话框，支持传入筛选参数
+const openDialog = (name?: string) => {
 	isShowDialog.value = true;
-	exportname.value = name;
+	exportName.value = name || '';
 };
 
 // 处理导出
 const handleExport = async () => {
-	// 这里处理导出逻辑
-	if (exportname.value) {
-		await exportProduct({ name: exportname.value });
+	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 {
-		await exportProduct({});
+		filename = `products_${new Date().getTime()}.zip`;
 	}
 
-	console.log(tableData.value, '111');
-	console.log(exportname.value, '222');
+	link.download = filename;
+	document.body.appendChild(link);
+	link.click();
+	document.body.removeChild(link);
+	window.URL.revokeObjectURL(url);
 
-	ElMessage.success('导出成功');
-	isShowDialog.value = false;
+	ElMessage.success('导出成功！文件已开始下载');
 };
 
 // 暴露方法给父组件使用
 defineExpose({
-	/**
-	 * 打开对话框方法
-	 */
 	openDialog,
 });
 </script>

src/views/customerService/product/component/importDialog.vue

@@ -16,43 +16,70 @@
 				:before-upload="beforeUpload"
 				:on-exceed="handleExceed"
 				:on-remove="handleRemove"
+				:show-file-list="true"
+				:auto-upload="false" <!-- 手动触发上传 -->
 			>
 				<div class="el-upload-area">
 					<el-icon class="el-icon--upload">
 						<UploadFilled />
 					</el-icon>
 					<div class="el-upload__text">将ZIP文件拖到此处，或<em>点击上传</em></div>
+					<div class="el-upload__tip">上传ZIP文件批量导入产品（TXT格式）</div>
 				</div>
 			</el-upload>
 
 			<!-- 导入说明 -->
 			<div class="import-instructions mt20">
 				<el-card shadow="never" class="box-card">
+					<template #header>
+						<div class="card-header">
+							<span>导入说明</span>
+						</div>
+					</template>
 					<el-text type="info" size="small">
 						<ul class="instruction-list">
-							<li>1. 请先下载模板ZIP包，查看Word文档格式要求</li>
-							<li>2. 按照模板中的Word文档格式准备您的产品文档</li>
-							<li>3. 将您的Word文档打包成ZIP格式上传</li>
-							<li>4. 支持 .docx 格式的Word文档</li>
-							<li>5. 文件大小不能超过 {{ fileSizeLimit }}MB</li>
+							<li>1. 请上传包含TXT格式产品数据的ZIP压缩包</li>
+							<li>2. 文件编码请使用UTF-8</li>
+							<li>3. 文件大小不能超过 {{ fileSizeLimit }}MB</li>
+							<li>4. 导入前请确保数据格式正确</li>
 						</ul>
 					</el-text>
 				</el-card>
 			</div>
+
+			<!-- 导入结果展示 -->
+			<div v-if="importResult" class="import-result mt20">
+				<el-alert
+					:title="importResult.success ? '导入完成' : '导入失败'"
+					:type="importResult.success ? 'success' : 'error'"
+					:closable="false"
+					show-icon
+				>
+					<template v-if="importResult.success">
+						<div>成功导入 {{ importResult.data.failCount === 0 ? '所有' : '部分' }} 产品数据</div>
+						<div v-if="importResult.data.failCount > 0">
+							失败 {{ importResult.data.failCount }} 条记录
+						</div>
+						<div v-if="importResult.data.failReasons && importResult.data.failReasons.length > 0">
+							<el-collapse>
+								<el-collapse-item title="查看失败原因">
+									<div v-for="(reason, index) in importResult.data.failReasons" :key="index">
+										{{ reason }}
+									</div>
+								</el-collapse-item>
+							</el-collapse>
+						</div>
+					</template>
+					<template v-else>
+						<div>{{ importResult.message }}</div>
+					</template>
+				</el-alert>
+			</div>
 		</div>
 
 		<template #footer>
 			<span class="dialog-footer">
-				<!-- 下载模板按钮 -->
-				<el-button type="primary" size="default" :loading="downloadLoading" @click="handleDownloadTemplate" class="download-btn">
-					<template #icon>
-						<el-icon><Download /></el-icon>
-					</template>
-					{{ downloadLoading ? '生成中...' : '下载模板' }}
-				</el-button>
-
 				<el-button @click="handleCancel">取消</el-button>
-
 				<el-button type="primary" :loading="loading" @click="handleSubmitUpload">
 					{{ loading ? '导入中...' : '开始导入' }}
 				</el-button>
@@ -62,186 +89,44 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive, nextTick } from 'vue';
-import { ElMessage, ElMessageBox, type UploadInstance } from 'element-plus';
-import { UploadFilled, Download } from '@element-plus/icons-vue';
-import JSZip from 'jszip';
-import { saveAs } from 'file-saver';
+import { ref, reactive } from 'vue';
+import { ElMessage, ElMessageBox, type UploadInstance, type UploadFile } from 'element-plus';
+import { UploadFilled } from '@element-plus/icons-vue';
+import { importProduct } from '/@/api/customerService/product';
 
-// 定义组件事件
 const emit = defineEmits<{
-	/**
-	 * 获取产品列表事件 - 导入成功后刷新列表
-	 */
-	(e: 'getRoleList'): void;
+	(e: 'getProductList'): void;
 }>();
 
-// 响应式状态
 const isShowDialog = ref(false);
 const loading = ref(false);
-const downloadLoading = ref(false);
 const uploadRef = ref<UploadInstance>();
+const importResult = ref<any>(null);
 
 // 上传配置
-const uploadAction = '/api/product/import-word-zip';
+const uploadAction = '/api/customerService/product/import';
 const uploadHeaders = reactive({
 	Authorization: `Bearer ${localStorage.getItem('token') || ''}`,
 });
-const uploadData = reactive({
-	type: 'word-zip',
-});
+const uploadData = reactive({});
 const acceptFileTypes = '.zip,.ZIP';
 const fileSizeLimit = 50;
 
-// 模板内容定义
-const templateContents = {
-	/** 产品说明书模板内容 */
-	manual: `产品说明书模板
-
-产品名称：_________________________
-产品型号：_________________________
-创建人：___________________________
-创建时间：_________________________
-
-产品描述：
-___________________________________
-___________________________________
-
-技术参数：
-• 规格：___________________________
-• 尺寸：___________________________
-• 重量：___________________________
-• 材质：___________________________
-
-功能特点：
-1. ________________________________
-2. ________________________________
-3. ________________________________
-
-使用说明：
-___________________________________
-___________________________________
-
-注意事项：
-• ________________________________
-• ________________________________
-• ________________________________`,
-
-	/** 技术规格书模板内容 */
-	spec: `技术规格书模板
-
-产品名称：_________________________
-产品型号：_________________________
-
-技术规格：
-1. 基本参数
-   - 工作电压：___________________
-   - 功率：_______________________
-   - 尺寸：_______________________
-   - 重量：_______________________
-
-2. 性能指标
-   - 精度：_______________________
-   - 范围：_______________________
-   - 寿命：_______________________
-
-3. 环境要求
-   - 工作温度：___________________
-   - 存储温度：___________________
-   - 湿度：_______________________
-
-4. 安全标准
-   - 认证：_______________________
-   - 防护等级：___________________`,
-
-	/** 使用说明文档内容 */
-	readme: `产品文档导入模板使用说明
-================================
-
-欢迎使用产品文档导入模板！
-
-📁 ZIP包内容说明：
------------------
-1. 产品说明书模板.docx - 产品详细说明文档模板
-2. 技术规格书模板.docx - 技术参数文档模板
-3. 使用说明.txt       - 本说明文件
-
-📝 使用步骤：
------------
-1. 解压本ZIP包到您的电脑
-2. 打开Word文档模板
-3. 按照模板格式填写您的产品信息
-4. 保存您填写好的Word文档
-5. 将填写好的文档重新打包成ZIP格式
-6. 在系统中上传您制作的ZIP包
-
-⚙️ 文档要求：
------------
-• 必须使用 .docx 格式（Word 2007及以上版本）
-• 文档命名请使用有意义的名称
-• 确保填写所有必填字段
-• 文档大小不超过10MB/个
-
-📞 技术支持：
------------
-如有问题请联系系统管理员。
-
-祝您使用愉快！`,
-};
-
-/**
- * 创建Word文档的二进制内容
- * @param content - 文档内容
- * @returns Blob对象
- */
-const createWordDocumentContent = (content: string): Blob => {
-	// 简化的Word文档XML结构
-	const wordContent = `<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
-<?mso-application progid="Word.Document"?>
-<w:wordDocument xmlns:w="http://schemas.microsoft.com/office/word/2003/wordml">
-	<w:body>
-		<w:p>
-			<w:r>
-				<w:t>${content.replace(/\n/g, '</w:t></w:r></w:p><w:p><w:r><w:t>')}</w:t>
-			</w:r>
-		</w:p>
-	</w:body>
-</w:wordDocument>`;
-
-	return new Blob([wordContent], {
-		type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
-	});
-};
-
-/**
- * 创建文本文件内容
- * @param content - 文本内容
- * @returns Blob对象
- */
-const createTextFile = (content: string): Blob => {
-	return new Blob([content], { type: 'text/plain;charset=utf-8' });
-};
-
 /**
  * 打开对话框
  */
 const openDialog = () => {
 	isShowDialog.value = true;
 	loading.value = false;
-	downloadLoading.value = false;
-
-	// 清空已上传的文件
-	nextTick(() => {
-		uploadRef.value?.clearFiles();
-	});
+	importResult.value = null;
 };
 
 /**
  * 处理对话框关闭
  */
 const handleDialogClose = () => {
-	// 清空上传文件
 	uploadRef.value?.clearFiles();
+	importResult.value = null;
 };
 
 /**
@@ -251,49 +136,8 @@ const handleCancel = () => {
 	isShowDialog.value = false;
 };
 
-/**
- * 下载模板文件
- */
-const handleDownloadTemplate = async () => {
-	downloadLoading.value = true;
-
-	try {
-		const zip = new JSZip();
-
-		// 添加模板文件到ZIP包
-		zip.file('产品说明书模板.docx', createWordDocumentContent(templateContents.manual));
-		zip.file('技术规格书模板.docx', createWordDocumentContent(templateContents.spec));
-		zip.file('使用说明.txt', createTextFile(templateContents.readme));
-
-		// 生成ZIP包
-		const zipBlob = await zip.generateAsync({
-			type: 'blob',
-			compression: 'DEFLATE',
-			compressionOptions: { level: 6 },
-		});
-
-		// 检查文件大小
-		if (zipBlob.size === 0) {
-			throw new Error('生成的ZIP包为空');
-		}
-
-		// 下载文件
-		const dateString = new Date().toISOString().split('T')[0];
-		saveAs(zipBlob, `产品文档导入模板_${dateString}.zip`);
-
-		ElMessage.success(`模板下载成功！文件大小：${(zipBlob.size / 1024).toFixed(2)}KB`);
-	} catch (error) {
-		console.error('模板下载失败:', error);
-		ElMessage.error(`模板生成失败：${error instanceof Error ? error.message : '未知错误'}`);
-	} finally {
-		downloadLoading.value = false;
-	}
-};
-
 /**
  * 上传前校验
- * @param file - 上传的文件
- * @returns 是否允许上传
  */
 const beforeUpload = (file: File): boolean => {
 	const isZip = file.type === 'application/zip' || file.name.toLowerCase().endsWith('.zip');
@@ -309,7 +153,7 @@ const beforeUpload = (file: File): boolean => {
 		return false;
 	}
 
-	ElMessage.info(`开始上传: ${file.name} (${(file.size / 1024 / 1024).toFixed(2)}MB)`);
+	importResult.value = null;
 	return true;
 };
 
@@ -324,126 +168,89 @@ const handleExceed = () => {
  * 处理文件移除
  */
 const handleRemove = () => {
-	// 文件移除后的清理操作
-};
-
-/**
- * 处理上传成功
- * @param response - 服务器响应
- */
-const handleUploadSuccess = (response: any) => {
-	loading.value = false;
-
-	if (response.code === 200) {
-		ElMessage.success('文件导入成功');
-		emit('getRoleList');
-		isShowDialog.value = false;
-	} else {
-		ElMessage.error(response.msg || '文件导入失败');
-	}
-};
-
-/**
- * 处理上传失败
- * @param error - 错误信息
- */
-const handleUploadError = (error: any) => {
-	loading.value = false;
-	ElMessage.error('文件上传失败，请重试');
-	console.error('Upload error:', error);
+	importResult.value = null;
 };
 
 /**
  * 手动提交上传
  */
 const handleSubmitUpload = async () => {
-	if (!uploadRef.value?.uploadFiles?.length) {
-		ElMessage.warning('请先选择要上传的文件');
+	const fileList = uploadRef.value?.uploadFiles;
+	if (!fileList || fileList.length === 0) {
+		ElMessage.warning('请先选择要上传的ZIP文件');
 		return;
 	}
 
 	try {
-		await ElMessageBox.confirm('确认导入选中的文件吗？', '导入确认', {
-			confirmButtonText: '确认导入',
-			cancelButtonText: '取消',
-			type: 'warning',
-		});
+		await ElMessageBox.confirm(
+			'确认导入选中的产品数据吗？',
+			'导入确认',
+			{
+				confirmButtonText: '确认导入',
+				cancelButtonText: '取消',
+				type: 'warning',
+			}
+		);
 
 		loading.value = true;
-		uploadRef.value.submit();
+		importResult.value = null;
+		
+		const file = fileList[0].raw!;
+		await handleCustomUpload(file);
+		
 	} catch {
-		// 用户取消操作
+		loading.value = false;
 	}
 };
 
-// 暴露方法给父组件
-defineExpose({
-	openDialog,
-});
-</script>
-
-<style scoped lang="scss">
-.import-container {
-	padding: 10px 0;
-}
-
-.upload-demo {
-	width: 100%;
-}
-
-.el-upload-area {
-	padding: 20px;
-	text-align: center;
-}
-
-.el-icon--upload {
-	font-size: 48px;
-	color: #c0c4cc;
-	margin-bottom: 16px;
-}
-
-.import-instructions {
-	.mt20 {
-		margin-top: 20px;
-	}
-}
-
-.instruction-list {
-	margin: 0;
-	padding-left: 16px;
-	line-height: 1.8;
-
-	li {
-		margin-bottom: 4px;
-	}
-}
-
-.dialog-footer {
-	display: flex;
-	justify-content: right;
-	align-items: center;
-
-	.download-btn {
-		background-color: coral;
-		border-color: coral;
-		width: 120px;
-
-		&:hover {
-			background-color: #ff7f50;
-			border-color: #ff7f50;
+/**
+ * 自定义上传处理
+ */
+const handleCustomUpload = async (file: File) => {
+	try {
+		// 调用导入接口
+		const response = await importProduct(file);
+		
+		// 根据API文档，响应结构为: { failCount: number, failReasons: string[] }
+		if (response.code === 200) {
+			importResult.value = {
+				success: true,
+				data: response.data,
+				message: '导入成功'
+			};
+			
+			ElMessage.success(`导入完成！失败记录：${response.data.failCount}条`);
+			emit('getProductList');
+			
+			// 3秒后自动关闭
+			setTimeout(() => {
+				if (isShowDialog.value && response.data.failCount === 0) {
+					isShowDialog.value = false;
+				}
+			}, 3000);
+		} else {
+			throw new Error(response.message || '导入失败');
 		}
+		
+	} catch (error: any) {
+		importResult.value = {
+			success: false,
+			message: error.message || '导入失败'
+		};
+		ElMessage.error(`导入失败：${error.message || '未知错误'}`);
+	} finally {
+		loading.value = false;
 	}
-}
+};
 
-:deep(.el-upload-dragger) {
-	width: 100%;
-	height: 180px;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-}
+// 保留原有方法用于自动上传模式
+const handleUploadSuccess = (response: any) => {
+	// 处理自动上传的成功响应
+};
 
-:deep(.el-upload-list) {
-	margin-top: 10px;
-}
-</style>
+const handleUploadError = (error: any) => {
+	// 处理自动上传的错误
+};
+
+defineExpose({ openDialog });
+</script>