Bse-editor NPM

使用方式

传统方式

import BSE from '@/bse/main.js'
mounted() {
  this._instance = BSE.Editor({ ...options }) --实列对象
}

js 外部编译命令

npm run build:lib

js 外部编译方式引入

<meta charset="utf-8" />
<title>BSE demo</title>
<link rel="stylesheet" href="./BSE.css" />

<body>
  <div></div>
  <!-- 必须指定挂载Node -->
</body>

<script src="./BSE.umd.js"></script>
<script>
  const _instance = new BSE.Editor({ el: document.querySelector('div') })
</script>

cdn 引入方式

npm cdn 映入入外部样式文件

<meta charset="utf-8" />
<title>BSE demo</title>
<link rel="stylesheet" href="./BSE.css" />

<body>
  <div></div>
  <!-- 必须指定挂载Node -->

  <script src="https://cdn.jsdelivr.net/npm/bse-editor@latest/dist-lib/BSE.umd.min.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bse-editor@latest/dist-lib/BSE.css" />

  <script src="./BSE.umd.js"></script>
  <script>
    const _instance = new BSE.Editor({ el: document.querySelector('div') })
  </script>
</body>

npm 安装方式

npm 安装命令

npm install bse-editor

import BSE from 'bse-editor'
mounted() {
  this._instance = BSE.Editor({ ...options }) --实列对象
}

options 配置说明

options 示列

mounted() {
  this._instance = BSE.Editor({
    requestDiagnosHistroyTable(callback, formInline) {
      console.log('实列回退参数', formInline)
      setTimeout(() => {
        callback([
          {
            code: '1',
            name: '门诊诊断',
            memo: '临床初步诊断'
          }
        ])
      }, 2000)
    }
  })
}

选项配置说明

参数名	参数	描述	枚举值
el	bse 挂载 dom 元素(Node)	querySelector 满足的值，比如#id.
className、Element。可以是 Element，也可以是#id 等	-
paper	纸张类型`string`	设置纸张尺寸	A4 A5 A6
baseUrl	静态资源基础路径`string`	设置静态资源基础路径	-
mode	编辑器模式 `string`	切换编辑器模式, 设计模式（designMode）、编辑模式（editMode）、预览模式（previewMode）	designMode
footer	编辑器页脚 `string`	编辑器底部显示内容	曼荼罗软件股份有限公司技术提供
iframeCssSrc	编辑器扩展 css `[array｜string]`	编辑器外部扩展 css	[]
iframeJsSrc	编辑器扩展 js `array｜string`	编辑器外部扩展 js	[]
beforeunload	刷新页面是否询问 `boolean`	刷新之前是否询问	true
revise	修订模式 `boolean`	开不开启修订模式	false
loading	loading 状态 `boolean`	编辑器是否处理 loading 状态	false
autoPaging	分页 `boolean`	是否开启自动分页	true
height	高度 `string`	设置编辑器高度	''
getDynamicTable	回调函数`function`, formInline 参数`object`	获取表格数据	`{ tablefieldlist: [ { bseFieldName: '男' }, { bseFieldName: '女' } ]`, // 动态表格数据 tablefieldMapping: { 字段名: 'bseFieldName' } // 动态表格映射 }
requestTable	回调函数`function`, param 参数`object`	点击表格	`{ tablefieldlist: [ { bseFieldName: '男' }, { bseFieldName: '女' } ]`, // 动态表格数据 tablefieldMapping: { 字段名: 'bseFieldName' } // 动态表格映射 }
requestTableField	回调函数`function`, param 参数`object`	点击字段	`[ { label: '男', value: 0 }, { label: '女', value: 1 } ]`

诊断接口说明

参数名	参数	描述	枚举值
requestDiagnoseField	回调函数`function`, param 参数`object`, formInline 参数`object`	获取诊断表单字段	{ code: '1', name: '门诊诊断', memo: '临床初步诊断' }
requestDiagnosTreeTable	回调函数`function`, formInline 参数`object`	获取诊断拖拽表格	[ // 必须纯在唯一 id 和 children 和 parentId { { id: 1, parentId: 0, bse_type: '中医诊断', bse_categery: '入院诊断', bse_disease_name: '肾虚', bse_disease_name_desc: '病描述', bse_symptom_name: '症名', bse_symptom_name_desc: '症描述', children: }]
requestDiagnosHistroyTable	回调函数`function`, formInline 参数`object`	获取历史诊断	{ code: '1', name: '门诊诊断', memo: '临床初步诊断' }
requestDiagnosCommonlyTable	回调函数`function`, formInline 参数`object`	获取常用诊断	{ code: '1', name: '门诊诊断', memo: '临床初步诊断' }
requestDiagnosTableChildren	回调函数`function`, formInline 参数`object`	获取常用子诊断分类	{ code: '类型', name: '分类', memo: '备注' }

手术接口说明

参数名	参数	描述	枚举值
requestSurgeryTreeTable	回调函数`function`, formInline 参数`object`	获取常用手术列表	{ type: '类型', code: '手术编码', name: '手术名称', surgeryLevel: '手术等级', anesthesia: '麻醉方法' }
requestSurgeryField	回调函数`function`, param 参数`object`, formInline 参数`object`	获取手术选项列表	{ code: '1', name: '门诊诊断', memo: '临床初步诊断' }

触发事件配置说明

addListener 示列

mounted() {
  this._instance = BSE.Editor({ ...options })
  this._instance.addListener('saveDiagnoseList', (payload, callback) => {
    console.log('触发事件参数', payload)
    setTimeout(() => {
      callback({
        status: 200,
        data: [],
        msg: '保存诊断列表成功'
      })
    }, 2000)
  })
}

触发事件名	回调参数	描述值
serachDiagnose	参数`object`, 回调函数`function`	查询诊断触发
setCommonlyDiagnose	参数`object`, 回调函数`function`	设为常用诊断触发
setCommonlySurgery	参数`object`, 回调函数`function`	设为常用手术触发
saveDiagnoseList	参数`object`, 回调函数`function`	保存诊断列表触发

主动唤起组合弹窗说明

组合弹窗示列

methods() {
  // 组合元素弹窗
  composeElement(module = 'moduleEle') {
    this._instance.execCommand('composeelementdialog', { }, (payload) => {
      const html = this._instance.getContent() // 获取编辑器内容
      let divContainer = void(0)
      divContainer = document.createElement('section')
      divContainer.setAttribute('class', 'bse-element')
      divContainer.innerHTML = html
    })
  }
}

常用方法功能说明

常用功能触发示列

methods() {
  // 获取表单验证消息
  validaterulesDocumentElement() {
    this._instance.execCommand('validaterules', (payload) => {
      console.log(payload)
    })
  }
}

触发事件名	表单参数	回调函数参数	描述
validaterules	-	表单数据(array)	所有验证消息数组
insertxmlorhtmlmodulestring	表单数据`object` { contentXmlOrHtmlString: strings // 插入字符串 }	-	插入 xml 或 html 至编辑器中
getexportxmlorhtmlstring	表单数据`object` { version: '', // 数据版本号默认 '4.0' htmlstring: true // 返回 html 或者 xml 格式 }	html 或 xml 字符串	获取 xml 或 html 字符串

通过传入数据更新 html 段落

methods() {
  // 获取表单验证消息
  insertSectionElement() {
    this._instance.execCommand('inserthtmlorxmlstringbyparams',
      { // 更新数据
        '签名控件id': {
          date: '2022-09-10',
          sign: 'bse64'
        },
        '手术控件id': [{
          id: '0',
          type: '类型',
          code: '手术编码01',
          name: '第一台手术',
          date: '2016-05-04',
          surgeryLevel: '手术等级',
          doctor: '术者',
          firstAssistant: '一助',
          secondAssistant: '二助',
          incisionLevel: '切口等级',
          healingLevel: '愈合等级',
          anesthesia: '麻醉方法',
          anesthesiologist: '麻醉医师'
        }],
        '诊断控件id': [
          {
            id: 1,
            parentId: 0,
            bse_type: '中医诊断',
            bse_categery: '入院诊断',
            bse_disease_name: '肾虚',
            bse_disease_name_desc: '病描述',
            bse_symptom_name: '症名',
            bse_symptom_name_desc: '症描述',
            open: true,
            checked: true
          }
        ],
        '血压控件id': {
          extensional: 10,  // 伸缩压
          diastolic: 21 // 舒张压
        },
        '其他控件id'：'值' // 这种形式
      },
      { contentXmlOrHtmlString: strings || this._instance.getContent(), paper: 'A6' }, // 传入段位html或xml字符串 或者 编辑器内容
      (payload) => {
        console.log(payload)
      }
    )
  }
}

editor lazy dom easy

@everything-registry/sub-chunk-1269

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago