增加导入导出模块

2025-11-24 16:55:18 +08:00
parent 88703864a2
commit 428989c993
13 changed files with 1894 additions and 1251 deletions
--- a/src/views/customerService/product/component/importDialog.vue
+++ b/src/views/customerService/product/component/importDialog.vue
@@ -0,0 +1,431 @@
+<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>