JDAirPort.Ems.Back/docs/前端Excel图片导入导出功能说明.md

前端Excel图片导入导出功能说明

功能概述

前端已完整适配Excel图片导入导出功能，提供了用户友好的界面和完善的错误处理机制。

新增功能

1. Excel导入功能

   • 文件拖拽上传
   • 格式验证 (.xlsx, .xls)
   • 进度提示
   • 错误处理和结果展示

2. 导入模板下载

   • 一键下载包含图片列的Excel模板
   • 预设字段格式和说明

3. 增强的导出功能

   • 图片自动嵌入Excel
   • 优化的文件下载体验

界面变化

1. 新增按钮

在操作工具栏中新增：

<el-button
    type="info"
    plain
    icon="el-icon-upload2"
    size="mini"
    @click="handleImport"
    v-hasPermi="['ems/info:powerEnergyRegistration:import']"
>导入</el-button>

2. 导入对话框

<el-dialog :title="uploadTitle" :visible.sync="uploadOpen" width="400px">
  <el-upload
    ref="upload"
    :limit="1"
    accept=".xlsx, .xls"
    :headers="uploadHeaders"
    :action="uploadUrl"
    :disabled="uploadLoading"
    :on-progress="handleFileUploadProgress"
    :on-success="handleFileSuccess"
    :on-error="handleFileError"
    :auto-upload="false"
    drag
  >
    <i class="el-icon-upload"></i>
    <div class="el-upload__text">将Excel文件拖到此处，或<em>点击上传</em></div>
    <div class="el-upload__tip text-center" slot="tip">
      <div class="el-upload__tip">
        <el-checkbox v-model="updateSupport" /> 是否更新已经存在的数据
      </div>
      <span>仅允许导入xls、xlsx格式文件。</span>
      <el-link type="primary" @click="importTemplate">下载模板</el-link>
    </div>
  </el-upload>
</el-dialog>

API接口更新

新增接口方法

// 导出动力能源部行输科废旧备件登记（含图片）
export function exportPowerEnergyRegistration(query) {
  return request({
    url: '/ems/info/powerEnergyRegistration/export',
    method: 'post',
    data: query,
    responseType: 'blob'
  })
}

// 下载导入模板（含图片列）
export function downloadTemplate() {
  return request({
    url: '/ems/info/powerEnergyRegistration/importTemplate',
    method: 'post',
    responseType: 'blob'
  })
}

// 导入动力能源部行输科废旧备件登记数据（含图片处理）
export function importPowerEnergyRegistration(data, updateSupport) {
  return request({
    url: '/ems/info/powerEnergyRegistration/importData',
    method: 'post',
    data: data,
    params: { updateSupport: updateSupport },
    headers: { 'Content-Type': 'multipart/form-data' }
  })
}

操作流程

1. 导出流程

1. 点击"导出"按钮
2. 确认导出操作
3. 系统自动下载包含图片的Excel文件
4. 图片已嵌入到对应单元格中

2. 导入流程

2.1 下载模板

1. 点击"导入"按钮
2. 在弹出对话框中点击"下载模板"
3. 获得包含图片列的Excel模板

2.2 准备数据

1. 在模板中填入数据
2. 在图片列对应单元格中插入图片
   • 右键单元格 → 插入 → 图片
   • 调整图片大小适应单元格

2.3 上传导入

1. 点击"导入"按钮
2. 选择是否"更新已经存在的数据"
3. 拖拽Excel文件到上传区域，或点击选择文件
4. 点击"确定"开始导入
5. 查看导入结果信息

3. 图片处理说明

支持的图片格式

• JPG/JPEG
• PNG
• GIF (会转换为JPEG)
• BMP (会转换为JPEG)

图片要求

• 建议图片大小 < 1MB
• 嵌入到Excel单元格中
• 系统会自动调整图片尺寸

错误处理

1. 文件格式错误

错误信息：仅允许导入xls、xlsx格式文件
解决方案：请使用正确的Excel文件格式

2. 图片格式不支持

错误信息：图片格式不支持: xxx.tiff
解决方案：使用支持的图片格式 (jpg/png/gif/bmp)

3. 必填字段为空

错误信息：类型不能为空
解决方案：在Excel中填入必填字段的值

4. 数据已存在

错误信息：xxx 已存在
解决方案：勾选"是否更新已经存在的数据"选项

权限配置

需要在系统中配置相应权限：

ems/info:powerEnergyRegistration:import  # 导入权限
ems/info:powerEnergyRegistration:export  # 导出权限

技术特性

1. 文件上传特性

• 拖拽上传：支持文件拖拽到上传区域
• 格式限制：仅接受.xlsx和.xls文件
• 文件数量限制：同时只能上传1个文件
• 自动上传：关闭自动上传，需手动确认

2. 进度提示

• 上传进度：显示文件上传进度
• 加载状态：按钮显示loading状态
• 结果展示：详细的导入结果信息

3. 数据处理

• 更新模式：支持新增和更新两种模式
• 批量处理：支持一次导入多条记录
• 事务处理：导入失败时自动回滚

使用建议

1. 数据准备

• 使用系统提供的模板填写数据
• 确保必填字段都有值
• 图片大小控制在合理范围内

2. 导入操作

• 先进行小批量测试导入
• 大量数据建议分批导入
• 备份原有数据以防万一

3. 图片处理

• 优先使用JPG格式以减少文件大小
• 图片分辨率适中即可，过高会影响性能
• 确保图片正确嵌入到单元格中

故障排除

1. 上传失败

• 检查网络连接
• 确认文件格式正确
• 检查文件是否损坏

2. 图片显示异常

• 检查图片格式是否支持
• 确认图片是否正确嵌入Excel
• 检查图片文件大小

3. 权限错误

• 确认用户有导入导出权限
• 检查后端接口配置
• 联系管理员分配权限

浏览器兼容性

• Chrome 70+
• Firefox 65+
• Safari 12+
• Edge 80+

建议使用最新版本的现代浏览器以获得最佳体验。