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

# 前端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+

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