import-notify-ysy01

Vue2 全局下载通知组件，支持多任务并行、实时状态更新、下载触发及自动关闭。

1. 安装

npm install import-notify-ysy01 --save

2. 依赖要求

• vue: ^2.5.2（仅支持 Vue2）
• element-ui: ^2.13.0（需全局注册，依赖 el-icon 和 el-button）

Element 注册示例（main.js）：

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

3. 快速使用

3.1 导入组件

// 在 main.js 或任意组件中导入
import 'import-notify-ysy01'; 
// 自动挂载全局方法：this.$downloadNotify

4. 完整示例

4.1 初始化通知（创建任务时）

// 点击导出按钮时触发
handleExport() {
  // 1. 获取后端返回的任务ID（示例）
  const taskId = 'task_' + Date.now();
  const fileName = '订单数据.xlsx';

  // 2. 显示通知
  this.$downloadNotify.show({
    taskId: taskId, // 唯一任务ID（必填）
    fileName: fileName, // 显示的文件名
    autoClose: true // 完成后5秒自动关闭（默认false）
  });

  // 3. 建立WebSocket连接（示例用socket.io）
  this.connectWebSocket(taskId);
}

4.2 处理实时推送

// 连接WebSocket
connectWebSocket(taskId) {
  const socket = io('你的WS地址');
  socket.on('connect', () => {
    socket.emit('join', taskId); // 加入任务房间
  });

  // 接收后端推送的状态
  socket.on('progress', (data) => {
    this.$downloadNotify.update(data); // 直接更新通知
  });
}

4.3 后端推送数据格式

| 字段名 | 类型 | 说明 | |------------------|---------|-------------------------------| | taskId | String | 任务唯一ID（与初始化一致） | | currentStatus | String | 实时状态文本（如"处理中..."） | | isDownloadable | Boolean | 是否显示下载按钮（true/false）| | downloadUrl | String | 下载链接（可下载时必传） | | isEnd | Boolean | 是否处理结束 | | takeTime | Number | 总耗时（秒，结束时返回） |

4.4 推送示例

// 处理中
{
  "taskId": "task_123",
  "currentStatus": "正在生成文件..."
}

// 可下载
{
  "taskId": "task_123",
  "currentStatus": "生成完成",
  "isDownloadable": true,
  "downloadUrl": "/download/task_123",
  "isEnd": true,
  "takeTime": 6.8
}

4.5 手动关闭

// 关闭指定任务通知
this.$downloadNotify.close('task_123');

5. 功能说明

• 多任务并行：同时显示多个下载任务，独立更新状态
• 实时反馈：动态展示后端推送的处理进度
• 下载触发：任务完成后显示按钮，点击直接下载
• 自动关闭：支持配置完成后自动关闭（默认5秒）

如果需要调整任何细节，可以直接告诉我具体需求，我会立即修改。