编辑器

使用

• 独立部署直接使用

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版本

表格设计器

1import { TableDesigner } from 'web-reseditor/index.js'

1<TableDesigner ref="tableDesigner"
2  :tableTplList="tpls" 
3  :extent="extent"
4  @saveContent="saveTable"
5  @saveEdit="saveEditTable"
6  @deleteTableTpl="deleteTableTpl"></TableDesigner>

• extent 保存模版的扩展字段

[
  key: {
    name: ''// label
    options: [] // length>0时呈现为下拉框，否则呈现为输入框
    option: '' // 绑定值
  }
]

• tableTplList 历史表格模版 Array []

1{
2  id - 模版id
3  name - 模版名称
4  // rels - 关联属性 Object
5  tpl - 表格模版字符串
6  extend - 业务扩展字段 []
7}

• tableDesigner 触发模版内保存模版事件 通过refs触发 配合saveContent

1this.$refs.tableDesigner.getContent()

• saveContent 事件 新建表格模版保存数据 Object {}

{
  id - 模版id
  name - 模版名称
  rels - 关联属性 Object
  tpl - 表格模版字符串
  index - 坐标
}

• deleteTableTpl 事件 删除表格模版 Number 返回坐标

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

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

报告设计器

1import { Designer } from 'web-reseditor/index.js'

1<Designer ref="designer"
2  @saveDesignerData="saveDesignerData"
3  @saveCustomNotDisplayComps="saveCustomNotDisplayComps"
4  :customCompEditable="false"
5  :studyData="studyData"
6  compId="designer"
7  :customComps="customComp"></Designer>

1function saveDesignerData(e) {
2  // e
3  /**
4    elements: [],
5    fixedHeader: {
6      openFixed: false,
7      height: 50,
8      pageNum: false,
9      page: '1'
10    },
11    fixedFooter: {
12      openFixed: false,
13      height: 50,
14      pageNum: false,
15      page: '1'
16    },
17    name: '',
18    pageType: 'a4',
19    spCharacters: [],
20    script: '',
21    customHeight: 297,
22    customWidth: 210,
23    totalPages: 1,
24    backgroundSize: 20,
25    width: $config.canvasH5Width > 700 ? $config.canvasH5Width : 700,
26    height: $config.canvasH5Height,
27    backgroundImage:
28  */
29}

• customComp 客户自定义组件 Array

1{
2  title - 标题
3  elName - 对应组件的elname
4  type - 分类
5  threshold - 阈值
6}

• saveDesignerData 事件 保存设计器整体obj
• this.$refs.designer.saveDesignerData() 触发设计器保存动作，触发后配合saveDesignerData获取模版内容
• this.$refs.designer.resetPage(pageData) 设计器导入模版 pageData是原设计器导出的结构，不对非规范obj兼容,无参数时为新建模版，按标准化配置基础参数
• saveCustomNotDisplayComps 保存用户自定义隐藏的组件
• studyData 设计脚本提示部分可用于编写脚本的提示文本，str
• compId 自定义必填 str

编辑器

1import { Editor } from 'web-reseditor/index.js'

1<Editor ref="editor"
2  @updateSpChars="updateSpChars"
3  :tpls="tpls"
4  @saveEditor="saveEditedPage"></Editor>

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

和富文本交互

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

和图片选择器交互

1// 重置图片列表
2window['modelId'].imagePicker['阈值'].resetPics(pics = []) // 传入图片列表
3// 删除某几个图片
4window['modelId'].imagePicker['阈值'].deletePics(index = []) // 传入要删除的图片下标
5// 插入图片到指定位置
6window['modelId'].imagePicker['阈值'].insertPics(pics = [], index)
7
8// 在编辑器上拖拽图片或者删除上传
9@updateImages="updateImages"  // 监听事件 {返回
10
11updateImages(e) {
12  e.threshold // 阈值
13  e.fileList // 图片列表
14}

外部更改组件的值

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

快速编辑模式

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

1<QuickEditor  @reditorChangeed="timingStorage"
2              @updateSpChars="updateSpChars"
3              :modalId="modalId"></QuickEditor>

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

预览

1import { Preview } from 'web-reseditor/index.js'

1<Preview :tplStr="pageTpl"
2  ref="preview"></Preview>

• pageTpl编辑器导出的模版字符串

版本说明&changelog

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