web-reseditor

- 独立部署直接使用 ``` git clone http://svn.radonline.cn:3888/PACS/web-RSTEditor.git ```

Usage no npm install needed!

<script type="module">
  import webReseditor from 'https://cdn.skypack.dev/web-reseditor';
</script>

README

编辑器

使用

  • 独立部署直接使用
git clone http://svn.radonline.cn:3888/PACS/web-RSTEditor.git

安装依赖

npm install

启动

npm run dev
  • 依赖使用
npm i web-reseditor

1.0版本稳定版本推荐 1.2.0版本

表格设计器

import { TableDesigner } from 'web-reseditor/index.js'
<TableDesigner ref="tableDesigner"
  :tableTplList="tpls" 
  :extent="extent"
  @saveContent="saveTable"
  @saveEdit="saveEditTable"
  @deleteTableTpl="deleteTableTpl"></TableDesigner>
  • extent 保存模版的扩展字段
[
  key: {
    name: ''// label
    options: [] // length>0时呈现为下拉框,否则呈现为输入框
    option: '' // 绑定值
  }
]
  • tableTplList 历史表格模版 Array []
{
  id - 模版id
  name - 模版名称
  // rels - 关联属性 Object
  tpl - 表格模版字符串
  extend - 业务扩展字段 []
}
  • tableDesigner 触发模版内保存模版事件 通过refs触发 配合saveContent
this.$refs.tableDesigner.getContent()
  • saveContent 事件 新建表格模版保存数据 Object {}
{
  id - 模版id
  name - 模版名称
  rels - 关联属性 Object
  tpl - 表格模版字符串
  index - 坐标
}
  • deleteTableTpl 事件 删除表格模版 Number 返回坐标

  • saveEdit 事件 编辑表格模版保存数据 Object {}

{
  id - 模版id
  name - 模版名称
  <!-- rels - 关联属性 Object -->
  tpl - 表格模版字符串,
  extent - 扩展字段
}

报告设计器

import { Designer } from 'web-reseditor/index.js'
<Designer ref="designer"
  @saveDesignerData="saveDesignerData"
  @saveCustomNotDisplayComps="saveCustomNotDisplayComps"
  :customCompEditable="false"
  :studyData="studyData"
  compId="designer"
  :customComps="customComp"></Designer>
function saveDesignerData(e) {
  // e
  /**
    elements: [],
    fixedHeader: {
      openFixed: false,
      height: 50,
      pageNum: false,
      page: '1'
    },
    fixedFooter: {
      openFixed: false,
      height: 50,
      pageNum: false,
      page: '1'
    },
    name: '',
    pageType: 'a4',
    spCharacters: [],
    script: '',
    customHeight: 297,
    customWidth: 210,
    totalPages: 1,
    backgroundSize: 20,
    width: $config.canvasH5Width > 700 ? $config.canvasH5Width : 700,
    height: $config.canvasH5Height,
    backgroundImage:
  */
}
  • customComp 客户自定义组件 Array
{
  title - 标题
  elName - 对应组件的elname
  type - 分类
  threshold - 阈值
}
  • saveDesignerData 事件 保存设计器整体obj
  • this.$refs.designer.saveDesignerData() 触发设计器保存动作,触发后配合saveDesignerData获取模版内容
  • this.$refs.designer.resetPage(pageData) 设计器导入模版 pageData是原设计器导出的结构,不对非规范obj兼容,无参数时为新建模版,按标准化配置基础参数
  • saveCustomNotDisplayComps 保存用户自定义隐藏的组件
  • studyData 设计脚本提示部分可用于编写脚本的提示文本,str
  • compId 自定义必填 str

编辑器

import { Editor } from 'web-reseditor/index.js'
<Editor ref="editor"
  @updateSpChars="updateSpChars"
  :tpls="tpls"
  @saveEditor="saveEditedPage"></Editor>
  • this.$refs.editor.resetPage(pageData = {}, chars = []) 编辑器导入模版 pageData是原设计器导出的结构,不对非规范obj兼容,chars为特殊字符集[]
  • tpls 表格模版列表,需要符合表格模版设计器保存的规则
  • updateSpChars 编辑器更新特殊字符,返回字符集list
  • saveEditor 保存编辑数据
  • this.$refs.editor.save() 触发编辑器保存,配合saveEditor,saveEditor返回值同设计器的保存方法

和富文本交互

// 追加内容
window['modelId'].reditor['阈值'].edit.appendHtml(str)
// 追加到光标
window['modelId'].reditor['阈值'].edit.insertHtml(str);
// 替换全部内容 可以是字符串或序列化的dom节点
window['modelId'].reditor['阈值'].edit.html(str) 
// 获取内容
window['modelId'].reditor['阈值'].edit.html()
// 获取当前焦点所在的富文本框(有阈值才有)对应阈值
window['modelId'].focusedEditor

和图片选择器交互

// 重置图片列表
window['modelId'].imagePicker['阈值'].resetPics(pics = []) // 传入图片列表
// 删除某几个图片
window['modelId'].imagePicker['阈值'].deletePics(index = []) // 传入要删除的图片下标
// 插入图片到指定位置
window['modelId'].imagePicker['阈值'].insertPics(pics = [], index)

// 在编辑器上拖拽图片或者删除上传
@updateImages="updateImages"  // 监听事件 {返回

updateImages(e) {
  e.threshold // 阈值
  e.fileList // 图片列表
}

外部更改组件的值

this.$refs.editor.updateElement(域值, value, img) // 如果是操作人相关的传入img,签名同步更新

快速编辑模式

适用于和普通编辑模式切换,提出所有富文本部分

<QuickEditor  @reditorChangeed="timingStorage"
              @updateSpChars="updateSpChars"
              :modalId="modalId"></QuickEditor>
  • reditorChangeed 富文本内容变化的回调方法,返回富文本控整个obj
  • updateSpChars 变更特殊字符集合的回调方法,返回字符集arr
  • modalId 当前页面的标识,适配多页场景,可随意定义一个字符串
  • 和普通编辑模式的区别,在控件的域值上会追加'-quick'用于区分,在切换时,需要业务测自行处理

预览

import { Preview } from 'web-reseditor/index.js'
<Preview :tplStr="pageTpl"
  ref="preview"></Preview>
  • pageTpl编辑器导出的模版字符串

版本说明&changelog

  • v1.1.0 第一个稳定版本,适配锐达可配置化结构化报告功能,已上线使用。
  • v1.2.0 第二个稳定版本,增加快速编辑模式