bse-editor

v0.1.0-alpha-6.24

Published

2 years ago

## 传统方式

Downloads

0High
0Medium
0Low

webhjs

bianpengfei

editor lazy dom easy

使用方式

传统方式

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)
      }
    )
  }
}