使用 @hsdata/warrenq-note-release

• 支持功能

  1. 拖拽添加文本，图片
  2. 粘贴word,excel,图片
  3. 手动添加文本，标记，图片，html
  4. 文本自动保存

• 引入组件

import {
  setRules,   //function(ruleName) 配置图表功能
  setConfig,  //function(config) 组件配置函数
  setViewOrigin,  //funtion(fn) 配置查看原文方法
  appendElementToNote,   //function(params) 添加图片，文本，html，到笔记
  multiTab,  //vue组件 ，笔记完整功能
  bus  //通信组件
  } from '@hsdata/ck-note-release/lib'

• 完整功能

//login.js 在登录处设置token
import { setToken , cleanToken} from '@hsdata/warrenq-note-release'

//设置用户token
setToken(token)

//清除token设置
cleanToken()

//main.js
import { multiTab } from '@hsdata/warrenq-note-release'
import '@hsdata/warrenq-note-release/lib/style.css'


Vue.use(multiTab,{ baseURL: '/cloudtest'}) //baseURL请求基础路径，默认为/cloudtest

//app.vue
<template>
  <div style="height: 100vh; width: 100vw">
    <multi-tab />
  </div>
</template>

• io请求

接口请求链路为 ${baseURL}/workbench/v2/${path}

接口鉴权Request.Authentication

设置用户鉴权token

import { setToken , cleanToken} from '@hsdata/warrenq-note-release'

//设置用户token, token需要和后端进行对接获取
setToken(token)

//清除token设置
cleanToken()

• 组件配置

  //配置单
const PROJECT_CONFIG = {
  showAddIndexText: false, //显示添加指标，待集成
  showAddChart: false, //显示添加图表，待集成
  showShare: false, //显示分享， 未集成
  showFullscreen: false, //显示全屏, 待集成
  showMenu: true, //显示菜单列表
  showAddNewNote: true, //新建笔记
  showDownloadWord: true, //显示导出word
  saveAs: {
    //另存为模块
    show: false,
    component: 'div'
  }
};

//更改配置
 import {
  setConfig,
} from "@hsdata/ck-note-release/lib";
//禁用菜单和下载excel
setConfig({
  showMenu: false,
  showDownloadWord: false
})

查看原文功能

• 插入查看原文文本

  import {
  appendElementToNote,   //function(params) 添加图片，文本，html，到笔记
  } from '@hsdata/ck-note-release/lib'

  //新增一个查看原文标记
  appendElementToNote({
    key: 'appendNote',
    content: {
      color: 'red'  //左侧颜色色条,必传
      colorLetter: 'a'  //a,b,c,d  标记，必传
      content: '原文文本……' //需要插入的文本，必传
      ...params   //自定义参数，后续查看原文时使用
    }
  })

• 配置查看原文方法，该方法为全局方法，多次配置会覆盖

  import {
  setViewOrigin,  //funtion(fn) 配置查看原文方法
  } from '@hsdata/ck-note-release/lib'

  setViewOrigin((params)=>{
    //当点击查看原文时，会调用该函数，传入参数为添加标记时的自定义参数

    //示例

    window.open(params.pdfPath)

  })

在当前页签下插入图片、文本、html

import {
  appendElementToNote,   //function(params) 添加图片，文本，html，到笔记
  } from '@hsdata/ck-note-release/lib'

  //在焦点处添加文本
  appendElementToNote({
    key: 'copyNote',
    content: '123123'
  })

  //在焦点处添加html
  appendElementToNote({
    key: 'addInnerHtml',
    content: '123123'
  })

  //在文本结尾添加html
  appendElementToNote({
    key: 'appendInnerHtml',
    content: '123123'
  })

   //添加图片
  appendElementToNote({
    key: 'addImage',
    content: 'src……'  //图片地址
  })

配置图表功能

   import {setAddChart, setRules} from from '@hsdata/warrenq-mind-map'
   //自定义数据浏览器弹窗
   import panel from '@/views/new-data/panel'

   //这个type自定义
   const type = 'defaultType'

   //新增图表配置
   setAddChart(resolve=>{
     panel.show({
       //获取数据后的回调
       callback: (data) => {
         const obj = {
           type,
           data
         }
         //obj建议不要存储过多字段
         resolve(obj)
       }
     })
   })

   //设置展示逻辑，可设置多个,链式处理
   setRules(type)
     //处理参数
     .setData(async function(params){
         //params 为 resolve(obj) 返回数据，
         const {codes} = params
         //获取数据
         const {data} = await getChartData({codes})
         //将数据处理为echart5配置
         const config = resolveEchart(data)

         return {
           data:[], //固定配置
           userSetOptions:{  //固定配置
             onlyUserComponent: true,
             onlyUserMethods: true,
           }
           config
         }
     })
     //如果数据可编辑，设置编辑功能
     .setMindEdit( async function(change, params){
         panel.show({
           params,
           //修改数据后回调
           callback: (data) => {
             const obj = {
               type,
               data
             }
             //obj建议不要存储过多字段
             change(obj)
           }
         })
     })

拖拽功能

组件接收一个自定义拖拽数据 text/mind-json-data

• 示例

  <template>
    <div >
      <echart-dom  @dragstart='dragstart' v-drag-mode='dragData' />
    </div>
  </template>
    import { dragMode } from from '@hsdata/warrenq-mind-map'
    export default {
      directives: { dragMode }
      data(){
        return {
          dragData:{
            type: 3,
            data: echartParams  //echart的配置
          }
        }
      },
      methods:{
        //除了使用给定的指令，也可以自定义定义
        dragstart(event){
          event.dataTransfer.setData(
            'text/mind-json-data',
            JSON.stringify({
              type: 3,
              data: echartParams  //echart的配置
            })
          )
        }
      }
    }

除图表外，还支持图片，标题和文本

| type | data | 类型 | | -- | -- | -- | |0 | {title: 'string'} | 标题| |1 | { htmlContent: 'YmFzZmZkZmRmZGY=' //将html转换为base64, text: '' } | 文本 | | 2 | { picUrl: 'http://10.32.12.199:8188/files/2021/10/15/e01d04c820344f01b9c1d6e4d2668818.png' } | 图片 | | 3 | echartParams | 图表 |

图片和文本均支持原生拖拽，如非特殊情况不需要进行以上处理

• 开源插件清单

 {
   "ant-design-vue": "^1.7.8",
   "axios": "^1.2.2",
   "dui-vue": "^1.1.0",
   "echarts": "^5.2.1",
   "file-saver": "^2.0.5",
   "html-docx-js": "^0.3.1",
   "jquery": "^3.6.4",
   "lodash": "^4.17.21",
   "lodash-es": "^4.17.21",
   "moment": "^2.29.1",
   "vue": "^2.7.0",
 }

 主要插件ckeditor5已打到组件中