bse-editor
v0.1.0-alpha-6.24
Published
## 传统方式
Downloads
71
Readme
使用方式
传统方式
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)
}
)
}
}