admin-ui/src/views/customerService/product/component/importDialog.vue

<template>
	<el-dialog title="导入产品" v-model="isShowDialog" width="500px" destroy-on-close>
		<div class="import-container">
			<!-- 导入说明 -->
			<div class="import-instructions mt20" style="margin-bottom: 40px">
				<el-card shadow="never" class="box-card">
					<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>
						</ul>
					</el-text>
				</el-card>
			</div>

			<!-- 上传区域 -->
			<el-upload
				ref="uploadRef"
				class="upload-demo"
				drag
				:action="uploadAction"
				:headers="uploadHeaders"
				:data="uploadData"
				:accept="acceptFileTypes"
				:limit="1"
				:on-success="handleSuccess"
				:on-error="handleError"
				:before-upload="beforeUpload"
				:on-exceed="handleExceed"
				:on-remove="handleRemove"
			>
				<div class="el-upload-area">
					<el-icon class="el-icon--upload"><ele-UploadFilled /></el-icon>
					<div class="el-upload__text">将ZIP文件拖到此处，或<em>点击上传</em></div>
				</div>
				<template #tip>
					<div class="el-upload__tip">
						<el-text type="info" size="small"> 请上传 {{ acceptFileTypes }} 格式文件，且不超过 {{ fileSizeLimit }}MB </el-text>
					</div>
				</template>
			</el-upload>

			<!-- 下载模板按钮 -->
			<div class="download-section" style="margin-top: 20px; text-align: center">
				<el-button type="primary" size="default" :loading="downloadLoading" @click="downloadTemplate" style="width: 200px">
					<template #icon>
						<el-icon><ele-Download /></el-icon>
					</template>
					{{ downloadLoading ? '正在生成模板...' : '下载导入模板' }}
				</el-button>
			</div>
		</div>

		<template #footer>
			<span class="dialog-footer">
				<el-button @click="isShowDialog = false">取消</el-button>
				<el-button type="primary" :loading="loading" @click="submitUpload">
					{{ loading ? '导入中...' : '开始导入' }}
				</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script lang="ts">
import { defineComponent, ref, reactive } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { UploadFilled, Download } from '@element-plus/icons-vue';
import JSZip from 'jszip';
import { saveAs } from 'file-saver';

export default defineComponent({
	name: 'ImportDialog',
	components: { UploadFilled, Download },
	emits: ['getRoleList'],
	setup(props, { emit }) {
		const isShowDialog = ref(false);
		const uploadRef = ref();
		const loading = ref(false);
		const downloadLoading = ref(false);

		// 上传配置
		const uploadAction = ref('/api/product/import-word-zip');
		const uploadHeaders = reactive({
			Authorization: 'Bearer ' + localStorage.getItem('token'),
		});
		const uploadData = reactive({
			type: 'word-zip',
		});
		const acceptFileTypes = '.zip,.ZIP';
		const fileSizeLimit = 50;

		// 打开对话框
		const openDialog = () => {
			isShowDialog.value = true;
			loading.value = false;
			downloadLoading.value = false;
			if (uploadRef.value) {
				uploadRef.value.clearFiles();
			}
		};

		// 创建Word文档的二进制内容（模拟真实的.docx格式）
		const createWordDocumentContent = (content: string) => {
			// Word文档的基本结构（简化版）
			// 实际Word文档是复杂的XML结构，这里创建一个简单的文本文件
			// 在实际项目中应该使用后端生成真正的Word文档

			// 创建一个包含基本Word文档结构的文本
			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' });
		};

		// 创建文本文件内容
		const createTextFile = (content: string) => {
			return new Blob([content], { type: 'text/plain;charset=utf-8' });
		};

		// 下载模板 - 修复版本：生成包含真实文件的ZIP包
		const downloadTemplate = async () => {
			downloadLoading.value = true;

			try {
				const zip = new JSZip();

				// 1. 创建产品说明书模板内容
				const manualContent = `产品说明书模板

产品名称：_________________________
产品型号：_________________________
创建人：___________________________
创建时间：_________________________

产品描述：
___________________________________
___________________________________

技术参数：
• 规格：___________________________
• 尺寸：___________________________
• 重量：___________________________
• 材质：___________________________

功能特点：
1. ________________________________
2. ________________________________
3. ________________________________

使用说明：
___________________________________
___________________________________

注意事项：
• ________________________________
• ________________________________
• ________________________________`;

				// 2. 创建技术规格书模板内容
				const specContent = `技术规格书模板

产品名称：_________________________
产品型号：_________________________

技术规格：
1. 基本参数
   - 工作电压：___________________
   - 功率：_______________________
   - 尺寸：_______________________
   - 重量：_______________________

2. 性能指标
   - 精度：_______________________
   - 范围：_______________________
   - 寿命：_______________________

3. 环境要求
   - 工作温度：___________________
   - 存储温度：___________________
   - 湿度：_______________________

4. 安全标准
   - 认证：_______________________
   - 防护等级：___________________`;

				// 3. 创建使用说明文档
				const readmeContent = `产品文档导入模板使用说明
================================

欢迎使用产品文档导入模板！

📁 ZIP包内容说明：
-----------------
1. 产品说明书模板.docx    - 产品详细说明文档模板
2. 技术规格书模板.docx    - 技术参数文档模板
3. 使用说明.txt           - 本说明文件

📝 使用步骤：
-----------
1. 解压本ZIP包到您的电脑
2. 打开Word文档模板
3. 按照模板格式填写您的产品信息
4. 保存您填写好的Word文档
5. 将填写好的文档重新打包成ZIP格式
6. 在系统中上传您制作的ZIP包

⚙️ 文档要求：
-----------
• 必须使用 .docx 格式（Word 2007及以上版本）
• 文档命名请使用有意义的名称
• 确保填写所有必填字段
• 文档大小不超过10MB/个

📞 技术支持：
-----------
如有问题请联系系统管理员。

祝您使用愉快！`;

				// 创建真实的文件Blob对象
				const manualBlob = createWordDocumentContent(manualContent);
				const specBlob = createWordDocumentContent(specContent);
				const readmeBlob = createTextFile(readmeContent);

				// 将文件添加到ZIP包
				zip.file('产品说明书模板.docx', manualBlob);
				zip.file('技术规格书模板.docx', specBlob);
				zip.file('使用说明.txt', readmeBlob);

				// 生成ZIP包
				const zipBlob = await zip.generateAsync({
					type: 'blob',
					compression: 'DEFLATE',
					compressionOptions: {
						level: 6,
					},
				});

				// 重要：检查文件大小，确保不是空文件
				if (zipBlob.size === 0) {
					throw new Error('生成的ZIP包为空，请检查文件内容');
				}

				// 下载文件
				saveAs(zipBlob, `产品文档导入模板_${new Date().toISOString().split('T')[0]}.zip`);

				ElMessage.success({
					message: `模板下载成功！文件大小：${(zipBlob.size / 1024).toFixed(2)}KB`,
					duration: 3000,
				});

				// 显示使用提示
				setTimeout(() => {
					ElMessage.info('下载完成后请解压ZIP包查看Word文档模板');
				}, 1000);
			} catch (error) {
				console.error('模板下载失败:', error);
				ElMessage.error({
					message: '模板生成失败：' + (error instanceof Error ? error.message : '未知错误'),
					duration: 5000,
				});

				// 提供备用方案
				setTimeout(() => {
					ElMessageBox.alert('如果模板下载仍有问题，请联系管理员获取手动模板文件。', '下载失败', {
						confirmButtonText: '确定',
						type: 'warning',
					});
				}, 1000);
			} finally {
				downloadLoading.value = false;
			}
		};

		// 上传前校验
		const beforeUpload = (file: File) => {
			const isZip = file.type === 'application/zip' || file.name.toLowerCase().endsWith('.zip');
			const isLt50M = file.size / 1024 / 1024 < fileSizeLimit;

			if (!isZip) {
				ElMessage.error('请上传ZIP格式的压缩包文件!');
				return false;
			}
			if (!isLt50M) {
				ElMessage.error(`ZIP文件大小不能超过${fileSizeLimit}MB!`);
				return false;
			}

			ElMessage.info(`开始上传ZIP包: ${file.name} (${(file.size / 1024 / 1024).toFixed(2)}MB)`);
			return true;
		};

		// 文件超出限制
		const handleExceed = () => {
			ElMessage.warning('只能上传一个ZIP包文件，请先删除当前文件');
		};

		// 移除文件
		const handleRemove = () => {
			// 文件被移除时的处理
		};

		// 上传成功
		const handleSuccess = (response: any) => {
			loading.value = false;
			if (response.code === 200) {
				ElMessage.success('Word文档导入成功');
				emit('getRoleList');
				isShowDialog.value = false;
			} else {
				ElMessage.error(response.msg || 'Word文档ZIP包导入失败');
			}
		};

		// 上传失败
		const handleError = (error: any) => {
			loading.value = false;
			ElMessage.error('ZIP包上传失败，请重试');
			console.error('ZIP upload error:', error);
		};

		// 手动提交上传
		const submitUpload = () => {
			if (!uploadRef.value || !uploadRef.value.uploadFiles.length) {
				ElMessage.warning('请先选择要上传的ZIP包文件');
				return;
			}

			ElMessageBox.confirm('确认导入选中的ZIP包吗？', '导入确认', {
				confirmButtonText: '确认导入',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(() => {
					loading.value = true;
					uploadRef.value.submit();
				})
				.catch(() => {
					// 用户取消
				});
		};

		return {
			isShowDialog,
			uploadRef,
			loading,
			downloadLoading,
			uploadAction,
			uploadHeaders,
			uploadData,
			acceptFileTypes,
			fileSizeLimit,
			openDialog,
			downloadTemplate,
			beforeUpload,
			handleExceed,
			handleRemove,
			handleSuccess,
			handleError,
			submitUpload,
		};
	},
});
</script>

<style scoped>
.import-container {
	padding: 10px 0;
}

.download-section {
	text-align: center;
}

.template-tips {
	margin-top: 10px;
}

.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 .card-header {
	font-weight: 600;
}

.instruction-list {
	margin: 0;
	padding-left: 16px;
	line-height: 1.8;
}

.instruction-list li {
	margin-bottom: 4px;
}

:deep(.el-upload-dragger) {
	width: 100%;
	height: 180px;
	display: flex;
	align-items: center;
	justify-content: center;
}

:deep(.el-upload-list) {
	margin-top: 10px;
}
</style>