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

<template>
	<el-dialog title="导入产品" v-model="isShowDialog" width="500px" destroy-on-close @close="handleDialogClose">
		<div class="import-container">
			<!-- 文件上传区域 -->
			<el-upload
				ref="uploadRef"
				class="upload-demo"
				drag
				:action="uploadAction"
				:headers="uploadHeaders"
				:data="uploadData"
				:accept="acceptFileTypes"
				:limit="1"
				:on-success="handleUploadSuccess"
				:on-error="handleUploadError"
				:before-upload="beforeUpload"
				:on-exceed="handleExceed"
				:on-remove="handleRemove"
			>
				<div class="el-upload-area">
					<el-icon class="el-icon--upload">
						<UploadFilled />
					</el-icon>
					<div class="el-upload__text">将ZIP文件拖到此处，或<em>点击上传</em></div>
				</div>
			</el-upload>

			<!-- 导入说明 -->
			<div class="import-instructions mt20">
				<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>
							<li>5. 文件大小不能超过 {{ fileSizeLimit }}MB</li>
						</ul>
					</el-text>
				</el-card>
			</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>
			</span>
		</template>
	</el-dialog>
</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';

// 定义组件事件
const emit = defineEmits<{
	/**
	 * 获取产品列表事件 - 导入成功后刷新列表
	 */
	(e: 'getRoleList'): void;
}>();

// 响应式状态
const isShowDialog = ref(false);
const loading = ref(false);
const downloadLoading = ref(false);
const uploadRef = ref<UploadInstance>();

// 上传配置
const uploadAction = '/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 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();
	});
};

/**
 * 处理对话框关闭
 */
const handleDialogClose = () => {
	// 清空上传文件
	uploadRef.value?.clearFiles();
};

/**
 * 取消操作
 */
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');
	const isLtLimit = file.size / 1024 / 1024 < fileSizeLimit;

	if (!isZip) {
		ElMessage.error('请上传ZIP格式的压缩包文件!');
		return false;
	}

	if (!isLtLimit) {
		ElMessage.error(`文件大小不能超过${fileSizeLimit}MB!`);
		return false;
	}

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

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

/**
 * 处理文件移除
 */
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);
};

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

	try {
		await ElMessageBox.confirm('确认导入选中的文件吗？', '导入确认', {
			confirmButtonText: '确认导入',
			cancelButtonText: '取消',
			type: 'warning',
		});

		loading.value = true;
		uploadRef.value.submit();
	} catch {
		// 用户取消操作
	}
};

// 暴露方法给父组件
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;
		}
	}
}

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

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