You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

5.7 KiB

Raw Blame History Unescape Escape

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

功能概述

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

新增功能

Excel导入功能
- 文件拖拽上传
- 格式验证 (.xlsx, .xls)
- 进度提示
- 错误处理和结果展示
导入模板下载
- 一键下载包含图片列的Excel模板
- 预设字段格式和说明
增强的导出功能
- 图片自动嵌入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. 导出流程

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

2. 导入流程

2.1 下载模板

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

2.2 准备数据

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

2.3 上传导入

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

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+

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

5.7 KiB Raw Blame History Unescape Escape