|
|
# 前端Excel图片导入导出功能说明
|
|
|
|
|
|
## 功能概述
|
|
|
|
|
|
前端已完整适配Excel图片导入导出功能，提供了用户友好的界面和完善的错误处理机制。
|
|
|
|
|
|
### 新增功能
|
|
|
|
|
|
1. **Excel导入功能**
|
|
|
- 文件拖拽上传
|
|
|
- 格式验证 (.xlsx, .xls)
|
|
|
- 进度提示
|
|
|
- 错误处理和结果展示
|
|
|
|
|
|
2. **导入模板下载**
|
|
|
- 一键下载包含图片列的Excel模板
|
|
|
- 预设字段格式和说明
|
|
|
|
|
|
3. **增强的导出功能**
|
|
|
- 图片自动嵌入Excel
|
|
|
- 优化的文件下载体验
|
|
|
|
|
|
## 界面变化
|
|
|
|
|
|
### 1. 新增按钮
|
|
|
|
|
|
在操作工具栏中新增：
|
|
|
```html
|
|
|
<el-button
|
|
|
type="info"
|
|
|
plain
|
|
|
icon="el-icon-upload2"
|
|
|
size="mini"
|
|
|
@click="handleImport"
|
|
|
v-hasPermi="['ems/info:powerEnergyRegistration:import']"
|
|
|
>导入</el-button>
|
|
|
```
|
|
|
|
|
|
### 2. 导入对话框
|
|
|
|
|
|
```html
|
|
|
<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接口更新
|
|
|
|
|
|
### 新增接口方法
|
|
|
|
|
|
```javascript
|
|
|
// 导出动力能源部行输科废旧备件登记（含图片）
|
|
|
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+
|
|
|
|
|
|
建议使用最新版本的现代浏览器以获得最佳体验。 |