import-notify-ysy01

Vue2 全局导入进度通知组件，支持多任务并行显示、实时进度更新、手动/自动关闭。

⚠️ 重要警告

• 版本 1.0.0 已废弃，无法正常使用，请勿安装！
• 所有用户请使用 1.0.1 版本（唯一可用版本）。
• npm 不支持删除已发布旧版本，因此安装时需明确指定 1.0.1 版本。

1. 安装

# 1. 卸载旧版本（若已安装 1.0.0）
npm uninstall import-notify-ysy01

# 2. 安装 1.0.1 版本（唯一可用版）
npm install [email protected] --save

2. 前置依赖

组件依赖以下库（需在你的 Vue2 项目中提前配置）：

• vue: ^2.5.2（Vue2 项目，不支持 Vue3）
• element-ui: ^2.13.0（组件内使用 el-icon、el-progress，需全局注册 Element UI）

Element UI 全局注册示例（main.js 中）：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

3. 导入组件

无需复杂配置，在需要使用的组件中一行导入即可（自动挂载 this.$importNotify）：

// 在你的组件中（如 HeadNav.vue）
import 'import-notify-ysy01'; // 仅需这一行，自动初始化

4. 使用示例

4.1 初始化通知（WebSocket 连接时）

在 handleImportStart 中调用 $importNotify.show，创建任务通知：

总之就是在你准备启动socketIO时，调用this.$importNotify.show()传入参数即可。

更新时,在更新事件里调用this.$importNotify.update(progressData)即可。

progressData格式json:

[
  // 第一条推送数据：首次进度（更新2000条）
  {
    "successCreate": 0,          // 新增成功的条数（本次0条）
    "successUpdate": 2000,       // 更新成功的条数（本次2000条）
    "errorCount": 0,             // 数据处理错误的条数（本次0条）
    "errorMessages": [],         // 错误详情列表（无错误，为空数组）该版本中无需提供
    "totalCount": 0,             // 总处理条数（暂未返回，为0）
    "noChangeCount": 0,          // 无变更的条数（本次0条，如数据未修改）
    "successCount": 2000,        // 总成功处理条数（新增+更新，本次2000条）
    "errorCountExcel": 0,        // Excel 本身解析错误的条数（如格式错误，本次0条）
    "taskId": "inoffd052ee796c459bbbf19345e5fe3b81"  // 任务唯一标识ID
  },

  // 第二条推送数据：二次进度（更新1102条）
  {
    "successCreate": 0,          // 新增成功的条数（本次0条）
    "successUpdate": 1102,       // 更新成功的条数（本次1102条）
    "errorCount": 0,             // 数据处理错误的条数（本次0条）
    "errorMessages": [],         // 错误详情列表（无错误，为空数组）
    "totalCount": 0,             // 总处理条数（暂未返回，为0）
    "noChangeCount": 0,          // 无变更的条数（本次0条）
    "successCount": 1102,        // 总成功处理条数（新增+更新，本次1102条）
    "errorCountExcel": 0,        // Excel 本身解析错误的条数（本次0条）
    "taskId": "inoffd052ee796c459bbbf19345e5fe3b81"  // 任务唯一标识ID（与第一条一致，属于同一任务）
  },

  // 第三条推送数据：任务结束（返回总统计）
  {
    "taskId": "inoffd052ee796c459bbbf19345e5fe3b81",  // 任务唯一标识ID（同一任务）
    "totalCount": 3102,          // 实际就是解析出来的excel文件的行数
    "is_end": true,              // 任务是否处理结束（true=结束，false=处理中）
    "takeTime": 7.918108940124512  // 任务总耗时（单位：秒，约7.9秒）
  }
]

handleImportStart(data) {
    if (this.socket) {
        this.socket.emit('join-room', data.taskId)
        this.$importNotify.show({
            taskId: data.taskId,
            fileName: data.fileName || 'Excel文件',
            autoClose: data.autoClose || false // 明确指定是否自动关闭
        });
        return;
    }
    this.socket = io(`${socketIOAddress}`, { transports: ['websocket'] })
    this.socket.on('connect', () => {
        this.socket.emit('join-room', data.taskId)
        this.$importNotify.show({
            taskId: data.taskId,
            fileName: data.fileName || 'Excel文件',
            autoClose: data.autoClose || false
        })
    })
    this.socket.on('import-progress', (data) => {
        this.handlePushData(data)
    })
},
handlePushData(data) {
    try {
        // 解析数据（支持字符串/对象）
        const progressData = typeof data === 'string' ? JSON.parse(data) : data;
        // 一行代码更新通知
        this.$importNotify.update(progressData);
    } catch (e) {
        console.error('推送处理失败:', e);
    }
}

4.2 手动关闭通知（可选）

需要主动关闭某个任务通知时，调用 $importNotify.close：

// 关闭指定 taskId 的通知
this.$importNotify.close('你的任务ID');

5. 推送数据格式要求

WebSocket 推送的 progressData 需包含以下字段（按需传递）： | 字段名 | 类型 | 说明 | 必传？ | |----------------|---------|---------------------------------------|--------| | taskId | String | 任务唯一 ID（与初始化时的 taskId 一致）| ✅ 是 | | successCreate | Number | 新增数据条数 | ❌ 否 | | successUpdate | Number | 更新数据条数 | ❌ 否 | | skipEmpty | Number | 跳过的空数据条数 | ❌ 否 | | errorCount | Number | 错误数据条数 | ❌ 否 | | totalCount | Number | 总处理条数（处理完成时传递） | ❌ 否 | | is_end | Boolean | 是否处理完成（true = 完成） | ❌ 否 | | takeTime | Number | 总耗时（秒，处理完成时传递） | ❌ 否 |

6. 组件功能

• ✅ 多任务并行：同时显示多个导入任务的进度，互不干扰
• ✅ 实时进度：自动累加新增/更新/错误条数，显示处理百分比
• ✅ 状态区分：处理中显示加载图标，完成时显示成功图标+耗时
• ✅ 手动/自动关闭：支持手动关闭，或配置处理完成后 5 秒自动关闭

7. 注意事项

1. 确保 taskId 全局唯一：不同任务的 taskId 不能重复，否则会覆盖通知
2. Element UI 必须全局注册：组件依赖 el-icon、el-progress，未注册会导致样式错乱
3. 仅支持 Vue2：不兼容 Vue3 项目，若需 Vue3 版本需重新适配