whrdc-export-float

v1.2.2

Published

a year ago

> 导出中心浮动组件 ## 下载 > <a href="http://192.168.0.51:9010/wuhanrdc/whrdc-csc-front/-/tree/feature/export_20221101" target="_blank">悬浮组件下载地址</a> 在public文件夹下下载compTs文件，放入需要使用的项目中。vue项目建议放入public文件夹下

Downloads

0High
0Medium
0Low

shuaijiabin

description

上传下载中心浮动组件

引入方法一（推荐）

下载

npm i whrdc-export-float

引入方法二

下载

悬浮组件下载地址在 dist 文件夹下下载 TaskFloat.js 文件，放入需要使用的项目中。vue 项目建议放入 public 文件夹下

// mian.js
import CreateTaskFloat from "../public/js/TaskFloat.js";

使用

举例 vue2

// mian.js
import CreateTaskFloat from "whrdc-export-float";
Vue.prototype.$CreateTaskFloat = CreateTaskFloat;

// App.vue或需要用到浮动组件对象的页面
const CreateTaskFloat = this.$CreateTaskFloat;

举例 vue3

// mian.js
import CreateTaskFloat from "whrdc-export-float";
const app = createApp(App);
app.provide("CreateTaskFloat", CreateTaskFloat);
app.mount("#app");

// App.vue或需要用到浮动组件对象的页面
import { onMounted, inject } from "vue";
const CreateTaskFloat: any = inject("CreateTaskFloat");

初始化

在全局组件中添加容器（例：mw 项目放于 src\layouts\AdminLayout.vue 中）

<!-- 渲染容器 -->
<div id="float-container"></div>

// App.vue
// 在App.vue文件或任何一个全局组件中进行全局调用，初始化组件
const createTaskFloat = new CreateTaskFloat();
createTaskFloat.init({
  container: "float-container", // (必填) 渲染容器Id
  env: "T3", // T3  T4 pre pro 此参数选填，选此参数可以使用默认地址配置（TASK_API_URL、TASK_CENTER_URL、TASK_SOCKET_URL），在下面三个参数配置地址后会覆盖env配置
  TASK_API_URL: "http://192.168.2.65:8088", // (必填)(接口地址) fat: http://192.168.0.65:8088 uat: http://192.168.0.66:8088 pre: 预发环境：https://cp-pre.xfs.com 生产环境：https://cp.xfs.com
  TASK_CENTER_URL: "http://192.168.2.66:18083", // (必填)(资源地址) fat: http://192.168.0.65:18083 uat: http://192.168.0.66:18083 pre: 预发环境：https://cp-pre.xfs.com 生产环境：https://cp.xfs.com
  TASK_SOCKET_URL: "192.168.2.65:8088", // (必填)(websocket地址)IP+端口或域名（不需加ws://、https://等前缀）预发环境：cp-pre.xfs.com 生产环境：cp.xfs.com
  sessionId:
    "FkPbi5b8P0dDRQcEMaI+jUzRwjTFps50W9ohGgKoEaHu71mFAmoHDkyUXoXY+owsNR+Z/2hfyAKYz3jiTRi8NQ==", // (必填)sessionId
  roleInfo: {
    avatar: "", // （可选）当前平台用户头像地址
    name: "小明", // （可选）当前平台用户名称
  },
  title: "鑫方盛协同管理工作台", // (可选) 平台名称
  favicon: "https://mw.xfs.com/favicon.ico", // (可选) 平台favicon图标地址
  pos: [60, 60], // （可选）组件初始悬浮位置,pos[0]:相对窗口顶部，pos[1]:相对窗口右边
  duration: 2000, // (可选) 导出完成回调时间，默认且最小为1000ms
  customButtonId: "customButtonId",
  viewMoreClick: async function (url: string) {
    // 点击查看更多回调函数，返回跳转路径
    let href = url;
    // 重新获取sessionId，创建不同websocket连接用户，可避开启上传下载中心后websocket连接覆盖当前平台websocket连接
    const { ok, data } = await cscService.createSessionId();
    if (ok) {
      href = href.replace(/sessionId=.*?&/g, "&sessionId=" + data + "&");
    }
    window.open(href);
  },
  onRejected: function (err) {
    console.log(err);
    createTaskFloat.reflush({
      sessionId: "9f756bea-9b6e-4ff5-8264-7d6682e79eb2",
    });
  },
});

导出调用方式

// 在有触发导出事件按钮的页面调用，
<button @click="handleExport"></button>

handleExport(event) {
  createTaskFloat.ready((res) => {
    const { status } = res // status: 0 组件初始化未完成或未初始化，1 组件已完成初始化
    if (status === 1) {
      createTaskFloat.exportTask({
        event, // 点击事件默认参数，用于获取点击位置
        exportEnd: () => {
          // 导出完成回调
        }
      })
      // websocket消息回调
      createTaskFloat.watch({
        socketMsg: function (data) {
          console.log(data)
        },
      });
    }
  })
}

导入调用方式

// 打开弹窗(通用模板导入方案)
createTaskFloat.ready((res) => {
  const { status } = res; // status: 0 组件初始化未完成或未初始化，1 组件已完成初始化
  if (status === 1) {
    createTaskFloat.openModal({
      accountName: "whrdc", // 账号名称,默认为：whrdc
      useModule: "mw", // 使用模块,默认为：mw
      businessName: "用户目标导入", // 业务名称,在上传下载中心创建模板时对应的业务名称
      ok: ({ importUrl, ossKey, originalFileName, orgCode, systemCode }) => {
        // importUrl: 导入地址, ossKey: ossKey, originalFileName: 原始文件名, orgCode: 对应accountName, systemCode: 对应useModule
        // data 保存osskey接口响应内容，可通过响应内容状态添加提示
        // 调用内部保存方法或自定义调用保存接口

        // 确认按钮回调
        createTaskFloat.hideModal(); // 关闭弹窗
      },
      cancel: () => {},
    });
    // websocket消息回调
    createTaskFloat.watch({
      socketMsg: function (data) {
        console.log(data);
      },
    });
  }
});

// 动态模板导入接口
createTaskFloat.CSCUploadFile({
  file: file,
  accountName: "whrdc",
  useModule: "mw",
  // 上传成功回调函数
  onload: function (
    status,
    file,
    {
      ossKey,
      originalFileName, // 原始文件名
      orgCode, // 例：'whrdc'
      systemCode, // 例： 'mw'
    }
  ) {},
  // 上传失败
  onerror: function (e) {},
  // 上传进度
  onprogress: function (e) {
    // e 数据格式
    // {
    //   type: "progress",
    //   loaded: 'loaded',
    //   total: 12123,
    //   percent: 100,
    // }
  },
});

API

| 属性 | 说明 | 类型/返回类型 | 默认值 | 版本 | | :-----------: | :-----------------------------------------------------------------: | :---------------------------------------: | :----: | :----: | | init | 初始化方法,传入生成浮窗所需参数,Object 参数内容详见下表 | Object | | | | ready | 初始化完成 status: 0 组件初始化未完成或未初始化，1 组件已完成初始化 | Function(Object):{status: 0, data: null}, | | | | reflush | 刷新初始化数据（暂只提供刷新 sessionId） | Object | | 1.1.2x | | exportTask | 导出方法 | Object | | 1.1.2x | | openModal | 开启导入弹窗 | Object | | 1.1.2x | | hideModal | 关闭导入弹窗 | | | 1.1.2x | | CSCUploadFile | 动态上传模板文件，用于动态模板导入 | Object | | 1.1.2x | | watch | 监听事件 | Object | | 1.1.2x | | showFloatList | 显示/隐藏浮窗列表 | | | 1.2.X |

init

| 属性 | 说明 | 是否必填 | 类型/返回类型 | 默认值 | 版本 | | :-------------: | :-----------------------------------------------------------------------------------------------------------------------------------------: | :------: | :--------------------: | :-------------------: | :----: | | container | 浮窗渲染容器 Id | 是 | String | | | | env | 此参数选填，传此参数后也可以使用默认地址配置（TASK_API_URL、TASK_CENTER_URL、TASK_SOCKET_URL），在下面三个参数配置地址后会覆盖 env 配置 | 是 | String | T3/T4/pre/pro | 1.1.2x | | TASK_API_URL | 接口地址已填 env 参数后，此参数可覆盖 env 对应的配置值 | 否 | String | | | | TASK_CENTER_URL | 资源地址已填 env 参数后，此参数可覆盖 env 对应的配置值 | 否 | String | | | | TASK_SOCKET_URL | websocket 地址已填 env 参数后，此参数可覆盖 env 对应的配置值 | 否 | String | | | | sessionId | sessionId | 是 | String | | | | roleInfo | 用户信息 | 否 | Object | {avatar: "",name: ""} | | | title | 平台页面标题 | 否 | String | | | | favicon | 平台页面 favicon 图标 | 否 | String | | | | pos | 浮窗初始定位 pos[0]:相对窗口顶部，pos[1]:相对窗口右边 | 否 | Array | [60,60] | | | duration | 导入动画时长，默认且最小 1000ms | 否 | Number | 1000 | | | customButtonId | 自定义按钮 DOM id | 否 | String | | | | viewMoreClick | '查看更多'和消息提示框'查看'事件回调, 返回完整的跳转路径，跳转前可获取新的 sessionId，创建多个 websocket 连接，即可不同页面同时接收相同消息 | 否 | Function(url: String) | | | | onRejected | 接口响应错误回调，可在回调后结合 reflush 方法主动刷新初始化数据 | 否 | Function(error:Object) | | 1.1.2x |

env 参数对应配置

{
  "T3": {
    "API_URL": "http://192.168.2.65:8088",
    "CENTER_URL": "http://192.168.2.65:18083",
    "WESOCKET_URL": "ws://192.168.2.65:8088"
  },
  "T4": {
    "API_URL": "http://192.168.2.66:8088",
    "CENTER_URL": "http://192.168.2.66:18083",
    "WESOCKET_URL": "ws://192.168.2.66:8088"
  },
  "pre": {
    "API_URL": "https://cp-pre.xfs.com",
    "CENTER_URL": "https://cp-pre.xfs.com",
    "WESOCKET_URL": "wss://cp-pre.xfs.com"
  },
  "pro": {
    "API_URL": "https://cp.xfs.com",
    "CENTER_URL": "https://cp.xfs.com",
    "WESOCKET_URL": "wss://cp.xfs.com"
  }
}

reflush

| 属性 | 说明 | 是否必填 | 类型/返回类型 | 默认值 | 版本 | | :-------: | :-------: | :------: | :-----------: | :----: | :--: | | sessionId | sessionId | 否 | String | | |

exportTask

| 属性 | 说明 | 是否必填 | 类型/返回类型 | 默认值 | 版本 | | :-------: | :------------------------------------------: | :-----------------------: | :-----------: | :----: | :--: | | event | 形参,点击事件的事件对象,用于获取点击具体坐标 | 是（1.1.25 版本后非必填） | Object | | | | exportEnd | 导出结束事件回调 | 否 | Function(e) | | |

openModal

| 属性 | 说明 | 是否必填 | 类型/返回类型 | 默认值 | 版本 | | :----------: | :-------------------------------------------------------------------------------------------------------: | :------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :----: | :--: | | accountName | 账号名称 | 是 | String | | | | useModule | 使用模块 | 是 | String | | | | businessName | 业务名称 | 是 | String | | | | ok | 弹窗确认回调 | 否 | Function({ importUrl, ossKey, originalFileName, orgCode, systemCode }) importUrl: 导入地址, ossKey: ossKey, originalFileName: 原始文件名, orgCode: 对应 accountName, systemCode: 对应 useModule | | | | cancel | 弹窗取消回调 | 否 | Function(e) | | |

CSCUploadFile

| 属性 | 说明 | 是否必填 | 类型/返回类型 | 默认值 | 版本 | | :---------: | :-------------------------------------------------------------------------------------------------------: | :------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :---------: | :--: | | file | 文件对象 | 是 | File | | | | accountName | 账号名称 | 是 | String | 例：'whrdc' | | | useModule | 使用模块 | 是 | String | 例： 'mw' | | | onload | 上传完成回调 | 否 | Function(status,file,{ossKey,originalFileName,orgCode,systemCode}), importUrl: 导入地址, ossKey: ossKey, originalFileName: 原始文件名, orgCode: 对应 accountName, systemCode: 对应 useModule | | | | onerror | 上传错误回调 | 否 | Function(e) | | | | onprogress | 上传进度回调 | 否 | Function({type: "progress",loaded: 'loaded',total: 12123,percent: 100}) | | |

watch

| 属性 | 说明 | 是否必填 | 类型/返回类型 | 默认值 | 版本 | | :-------: | :----------------: | :------: | :----------------------------------------------------: | :----: | :--: | | socketMsg | websocket 消息回调 | 否 | data: {status:2 | 4,...} (2:导入成功，4:导入失败) | | | dotNums | 数量变化监听 | 否 | data: | |

本地开发代理方案

vue.config.js

  proxy: {
    // 浮窗接口代理
    ['/csc']: {
      target: 'http://192.168.2.65:8088',
      changeOrigin: true,
      pathRewrite: {
        ['/csc']: ''
      }
    },
    // 浮窗websocket代理
    ['/socket']: {
      target: 'ws://192.168.2.65:8088',
      changeOrigin: true,
      pathRewrite: {
        ['/socket']: ''
      },
      ws: true
    }
  }

  createTaskFloat.init({
    container: 'float-container', // (必填) 渲染容器Id
    env: 'T3',
    TASK_API_URL: '', // 默认前缀 /csc
    TASK_SOCKET_URL: 'ws://' + location.host + '/socket', // 使用代理websocket就添加此地址
    ...
  })