vue2-client 1.12.23 → 1.12.24

package/docs//345/207/275/346/225/260/344/275/277/347/224/250/347/233/270/345/205/263.md

@@ -1,174 +1,174 @@
-# function总体说明
-
-- function的参数，与具体事件有关系。可以在函数里，通过console.log('>>>参数', arguments)显示参数内容。
-- 如果function的参数里没有需要的数据，用this.函数/属性，可以取需要的内容，具体内容，与组件类型有关。
-- 用this.函数函数调用方式调用相应功能。
-
-# 通过this可以调用的函数
-
-- openDialog(configName, selectedId, mixinData)：打开一个对话框，例如：this.openDialog('xxx', 5, {})
-- openDialog(configName, selectedId, mixinData, outEnv, attr)：打开一个对话框：
-- openDrawer(configName, selectedId, mixinData)：打开一个对话框，例如：this.openDialog('xxx', 5, {})
-- openDrawer(configName, selectedId, mixinData, outEnv, attr)：打开一个对话框：
-  - selectId：id号，formtable选择时，用selectId过滤数据 可以传递 json {a_id: 1} 或者 传递 1  ，传递数值会默认拼接查询条件 {selected_id:1}
-  - mixinData: form表单需要的数据
-  - outEnv: 传递给打开的界面的数据，在打开界面的js中通过this.outEnv可以访问
-  - attr: 用于传递参数绑定到 modal 弹框上
-- getOutEnv 获取获取 outEnv
-- this.getRealKeyData(obj) 获取真实的数据 传递 {a_a:"1"} 返回 {a:"1"}
-
-```js
-this.openDialog('xxx', 5, {}, {}, {})
-```
-
-- runLogic(logicName, parameter): 运行业务逻辑, 例如: this.runLogic('xxx', {})
-
-# 如何调用珊格中组件的数据及函数
-
-- 先给组件起名字，命名规范：main，left，right，top，bottom
-- 用 this.getComponentByName('main') 拿到组件。
-- emitEvent(eventName, ...args) 发送事件到外部珊格
-
-# x-form-table 可以使用的函数/数据
-
-- table_selectedRowKeys 获取选中的id  /不用加 () 这是一个data 中的变量
-- table_selectedRows 获取选中的行  /不用加 () 这是一个data 中的变量
-- getSelectedId 获取获取selectedid
-- refreshTable 重新查询
-- clearRowKeys 清除选中的行
-- getTableData() 获取全部数据
-- setTableData(data) 设置表格内数据
-- Object.assign(this.fixedQueryForm, data) 给查询条件传值
-- Object.assign(this.fixedAddForm, data) 给新增时赋固定内容
-- getPrimaryData (rows) 返回主表不带别名的数据
-- pushPrimaryData (rows) 把不带主表别名的数据放到数据区
-- setFixedQueryForm (data) 设置固定条件，主表别名不用加
-- update() 让新修改的数据生效
-- validateTableAndSyncData (currRow, defaultAppendRowData) 本地编辑模式下校验表格并同步本地数据
-- 事件相关
-  - 行编辑时，下拉选中处理，function (form,setForm,attr,util,self)
-    - form 当前编辑行
-    - setForm(form, {})给编辑行设置值
-    - attr.selectRows[] 选中的数据
-    - util 可以使用的工具方法
-    - self x-form-table组件自身
-  - afterSubmit( type(新增/修改/擦和讯), id: (所操作的主键id), form: (请求的表单内容))  提交后触发
-  - afterQuery( res (查询后数据), querparams (查询参数)) 查询后触发
-  - curdAddBefore(func) 点击新增按钮时触发 传参为 打开新增表单函数
-    afterDelete( res (删除接口返回数据)) 删除后触发
-    action(record (当前记录), id （当前记录主键）, actionType （操作类型）) 操作按钮触发
-
-# x-report 插槽 使用说明
-
-- init(configName,configData) 配置名称 / 报表数据
-- setData(configData) 主动设置数据
-- 当使用 openDialog 打开报表时，会自动调用 init 方法，传递参数为打开弹框时传递的 **mixinData**
-
-  ```js
-      this.$refs.main.openDialog('ceshishange',
-      -1,
-      {
-        configData: { arr: [{ 'defect@@@drug_name': '111' }, { 'defect@@@drug_name': '121', 'defect@@@num': '1' }] }
-      }
-    )
-  ```
-
-- 当没有 openDialog 打开报表时，需要手动调用 init 方法 或者 setData，传递参数为需要的数据
-
-# form 简易表单
-
-- asyncSubmit().then(res=>{}) 手动提交表单
-- setForm({}) 手动设置表单内容 传参：{a:'aa'}  如果表单配置 {a:''} 会合并到表单项目a中
-- setFormWithKey({}) 手动设置表单内容 传参：{a_a:'aa'}  如果表单配置 {b_a:''} 或者 {c_a:'''} 会合并到表单项目b_a,c_a中
-- 事件相关
-  - onSubmit(form) 表单提交事件
-
-# 每种事件处理，传递给function的参数
-
-- 添加处理：空
-- action：（操作行数据)
-- 自定义按钮：（选中的所有行)
-
-# 例子
-
-function() {
-  // 获取主formtable组件
-  main = this.getComponentByName('main')
-  // 把组件当前选中的项及select_id传给后台业务逻辑
-  return runLogic('logic', {select_id: main.getSelectedId(), rows: main.refreshTable()})
-}
-
-### 获取表单数据之后 提交 执行logic写法
-
-```js
-function() {
-  // 获取主formtable组件
-  const res = await this.getComponentByName('from').asyncSubmit()
-  // 把组件当前选中的项及select_id传给后台业务逻辑
-  return runLogic('logic', {res})
-}
-```
-
-### OpenDialog 弹框确认事件
-
-```js
-function() {
-  // 获取主formtable组件  在OpenDialog 事件中使用 getComponentByName 获取 既可以获取到打开的栅格中的组件对象，也可以获取到上级调用这个栅格的栅格的对象
-  const res = this.getComponentByName('main')
-}
-```
-
-## 执行自定义函数之后 刷新和提示说明
-
-### 前端函数写法
-
-```js
-function () {
-  if (id) {
-    return this.runLogic('omtwCheckIn', { id })
-  } else {
-    return new Promise((resolve) => {
-      resolve({ message: '未提供 ID，无法登记' ,messageType:'warn'})
-    })
-  }
-}
-// return this.runLogic('omtwCheckIn', { id })
-// this.runLogic 所调用 logic 的 返回结果 为 Promise 对象 Promise对象内容 就是logic返回内容
-// logic 返回内容写法参考下面的 logic 写法
-// 如果不调用 this.runLogic 直接返回一个 Promise 对象，Promise对象内容就是提示内容
-// 返回结果参数说明
-// {
-//  name :"插槽实例名字", 如果传递了 name 或自动调用 该插槽的 refresh 方法 进行刷新
-//  message : "提示内容", 默认值为 ”操作成功“ 可自定义传
-//  messageType : "提示级别", 默认值为 "success" 可自定义传  success | warn | info | error
-// }
-```
-
-### Logic 写法
-
-```go
-  validate {
-      id: {
-          required: true
-      }
-  },
-  entity.partialSave("dms_non_drug_item_record", data),
-  {
-      message:"登记成功",
-      messageType: "success",
-      name:"omtwCheckInCRUD"
-  }
-
-```
-
-或者
-
-```go
-  data.a == 3 : (
-    return  {
-      message:"登记成功",
-      messageType: "success",
-      name:"omtwCheckInCRUD"
-    }
-  ),null
-```
+# function总体说明
+
+- function的参数，与具体事件有关系。可以在函数里，通过console.log('>>>参数', arguments)显示参数内容。
+- 如果function的参数里没有需要的数据，用this.函数/属性，可以取需要的内容，具体内容，与组件类型有关。
+- 用this.函数函数调用方式调用相应功能。
+
+# 通过this可以调用的函数
+
+- openDialog(configName, selectedId, mixinData)：打开一个对话框，例如：this.openDialog('xxx', 5, {})
+- openDialog(configName, selectedId, mixinData, outEnv, attr)：打开一个对话框：
+- openDrawer(configName, selectedId, mixinData)：打开一个对话框，例如：this.openDialog('xxx', 5, {})
+- openDrawer(configName, selectedId, mixinData, outEnv, attr)：打开一个对话框：
+  - selectId：id号，formtable选择时，用selectId过滤数据 可以传递 json {a_id: 1} 或者 传递 1  ，传递数值会默认拼接查询条件 {selected_id:1}
+  - mixinData: form表单需要的数据
+  - outEnv: 传递给打开的界面的数据，在打开界面的js中通过this.outEnv可以访问
+  - attr: 用于传递参数绑定到 modal 弹框上
+- getOutEnv 获取获取 outEnv
+- this.getRealKeyData(obj) 获取真实的数据 传递 {a_a:"1"} 返回 {a:"1"}
+
+```js
+this.openDialog('xxx', 5, {}, {}, {})
+```
+
+- runLogic(logicName, parameter): 运行业务逻辑, 例如: this.runLogic('xxx', {})
+
+# 如何调用珊格中组件的数据及函数
+
+- 先给组件起名字，命名规范：main，left，right，top，bottom
+- 用 this.getComponentByName('main') 拿到组件。
+- emitEvent(eventName, ...args) 发送事件到外部珊格
+
+# x-form-table 可以使用的函数/数据
+
+- table_selectedRowKeys 获取选中的id  /不用加 () 这是一个data 中的变量
+- table_selectedRows 获取选中的行  /不用加 () 这是一个data 中的变量
+- getSelectedId 获取获取selectedid
+- refreshTable 重新查询
+- clearRowKeys 清除选中的行
+- getTableData() 获取全部数据
+- setTableData(data) 设置表格内数据
+- Object.assign(this.fixedQueryForm, data) 给查询条件传值
+- Object.assign(this.fixedAddForm, data) 给新增时赋固定内容
+- getPrimaryData (rows) 返回主表不带别名的数据
+- pushPrimaryData (rows) 把不带主表别名的数据放到数据区
+- setFixedQueryForm (data) 设置固定条件，主表别名不用加
+- update() 让新修改的数据生效
+- validateTableAndSyncData (currRow, defaultAppendRowData) 本地编辑模式下校验表格并同步本地数据
+- 事件相关
+  - 行编辑时，下拉选中处理，function (form,setForm,attr,util,self)
+    - form 当前编辑行
+    - setForm(form, {})给编辑行设置值
+    - attr.selectRows[] 选中的数据
+    - util 可以使用的工具方法
+    - self x-form-table组件自身
+  - afterSubmit( type(新增/修改/擦和讯), id: (所操作的主键id), form: (请求的表单内容))  提交后触发
+  - afterQuery( res (查询后数据), querparams (查询参数)) 查询后触发
+  - curdAddBefore(func) 点击新增按钮时触发 传参为 打开新增表单函数
+    afterDelete( res (删除接口返回数据)) 删除后触发
+    action(record (当前记录), id （当前记录主键）, actionType （操作类型）) 操作按钮触发
+
+# x-report 插槽 使用说明
+
+- init(configName,configData) 配置名称 / 报表数据
+- setData(configData) 主动设置数据
+- 当使用 openDialog 打开报表时，会自动调用 init 方法，传递参数为打开弹框时传递的 **mixinData**
+
+  ```js
+      this.$refs.main.openDialog('ceshishange',
+      -1,
+      {
+        configData: { arr: [{ 'defect@@@drug_name': '111' }, { 'defect@@@drug_name': '121', 'defect@@@num': '1' }] }
+      }
+    )
+  ```
+
+- 当没有 openDialog 打开报表时，需要手动调用 init 方法 或者 setData，传递参数为需要的数据
+
+# form 简易表单
+
+- asyncSubmit().then(res=>{}) 手动提交表单
+- setForm({}) 手动设置表单内容 传参：{a:'aa'}  如果表单配置 {a:''} 会合并到表单项目a中
+- setFormWithKey({}) 手动设置表单内容 传参：{a_a:'aa'}  如果表单配置 {b_a:''} 或者 {c_a:'''} 会合并到表单项目b_a,c_a中
+- 事件相关
+  - onSubmit(form) 表单提交事件
+
+# 每种事件处理，传递给function的参数
+
+- 添加处理：空
+- action：（操作行数据)
+- 自定义按钮：（选中的所有行)
+
+# 例子
+
+function() {
+  // 获取主formtable组件
+  main = this.getComponentByName('main')
+  // 把组件当前选中的项及select_id传给后台业务逻辑
+  return runLogic('logic', {select_id: main.getSelectedId(), rows: main.refreshTable()})
+}
+
+### 获取表单数据之后 提交 执行logic写法
+
+```js
+function() {
+  // 获取主formtable组件
+  const res = await this.getComponentByName('from').asyncSubmit()
+  // 把组件当前选中的项及select_id传给后台业务逻辑
+  return runLogic('logic', {res})
+}
+```
+
+### OpenDialog 弹框确认事件
+
+```js
+function() {
+  // 获取主formtable组件  在OpenDialog 事件中使用 getComponentByName 获取 既可以获取到打开的栅格中的组件对象，也可以获取到上级调用这个栅格的栅格的对象
+  const res = this.getComponentByName('main')
+}
+```
+
+## 执行自定义函数之后 刷新和提示说明
+
+### 前端函数写法
+
+```js
+function () {
+  if (id) {
+    return this.runLogic('omtwCheckIn', { id })
+  } else {
+    return new Promise((resolve) => {
+      resolve({ message: '未提供 ID，无法登记' ,messageType:'warn'})
+    })
+  }
+}
+// return this.runLogic('omtwCheckIn', { id })
+// this.runLogic 所调用 logic 的 返回结果 为 Promise 对象 Promise对象内容 就是logic返回内容
+// logic 返回内容写法参考下面的 logic 写法
+// 如果不调用 this.runLogic 直接返回一个 Promise 对象，Promise对象内容就是提示内容
+// 返回结果参数说明
+// {
+//  name :"插槽实例名字", 如果传递了 name 或自动调用 该插槽的 refresh 方法 进行刷新
+//  message : "提示内容", 默认值为 ”操作成功“ 可自定义传
+//  messageType : "提示级别", 默认值为 "success" 可自定义传  success | warn | info | error
+// }
+```
+
+### Logic 写法
+
+```go
+  validate {
+      id: {
+          required: true
+      }
+  },
+  entity.partialSave("dms_non_drug_item_record", data),
+  {
+      message:"登记成功",
+      messageType: "success",
+      name:"omtwCheckInCRUD"
+  }
+
+```
+
+或者
+
+```go
+  data.a == 3 : (
+    return  {
+      message:"登记成功",
+      messageType: "success",
+      name:"omtwCheckInCRUD"
+    }
+  ),null
+```

package/index.js

@@ -1,31 +1,31 @@
-import Vue from 'vue'
-import { initRouter } from '@vue2-client/router/index.js'
-import { initI18n } from '@vue2-client/utils/i18n'
-import bootstrap from '@vue2-client/bootstrap'
-import { modules } from '@vue2-client/store'
-import '@vue2-client/theme/index.less'
-import '@vue2-client/utils/filter'
-import 'animate.css/source/animate.css'
-import 'moment/locale/zh-cn'
-import Antd from 'ant-design-vue'
-import Viser from 'viser-vue'
-// 插件
-import Plugins from '@vue2-client/base-client/plugins'
-
-const routerOptions = initRouter()
-const i18n = initI18n('CN', 'US')
-
-Vue.use(Antd)
-Vue.use(Viser)
-Vue.use(Plugins)
-
-Vue.config.productionTip = false
-const message = Vue.prototype.$message
-
-export {
-  routerOptions,
-  modules,
-  i18n,
-  message,
-  bootstrap
-}
+import Vue from 'vue'
+import { initRouter } from '@vue2-client/router/index.js'
+import { initI18n } from '@vue2-client/utils/i18n'
+import bootstrap from '@vue2-client/bootstrap'
+import { modules } from '@vue2-client/store'
+import '@vue2-client/theme/index.less'
+import '@vue2-client/utils/filter'
+import 'animate.css/source/animate.css'
+import 'moment/locale/zh-cn'
+import Antd from 'ant-design-vue'
+import Viser from 'viser-vue'
+// 插件
+import Plugins from '@vue2-client/base-client/plugins'
+
+const routerOptions = initRouter()
+const i18n = initI18n('CN', 'US')
+
+Vue.use(Antd)
+Vue.use(Viser)
+Vue.use(Plugins)
+
+Vue.config.productionTip = false
+const message = Vue.prototype.$message
+
+export {
+  routerOptions,
+  modules,
+  i18n,
+  message,
+  bootstrap
+}

package/jest-transform-stub.js

@@ -1,8 +1,8 @@
-module.exports = {
-    process () {
-      return 'module.exports = {};'
-    },
-    getCacheKey () {
-      return 'lessTransform'
-    },
-  }
+module.exports = {
+    process () {
+      return 'module.exports = {};'
+    },
+    getCacheKey () {
+      return 'lessTransform'
+    },
+  }

package/jest.setup.js

@@ -1,7 +1,7 @@
-global.matchMedia = global.matchMedia || function () {
-  return {
-    matches: false,
-    addListener: function () {},
-    removeListener: function () {}
-  }
-}
+global.matchMedia = global.matchMedia || function () {
+  return {
+    matches: false,
+    addListener: function () {},
+    removeListener: function () {}
+  }
+}

package/jsconfig.json

@@ -1,19 +1,19 @@
-{
-  "compilerOptions": {
-    "target": "es6",
-    "module": "esnext",
-    "moduleResolution": "node",
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["src/*"],
-      "@vue2-client/*": ["src/*"]
-    },
-    "jsx": "preserve",
-    "experimentalDecorators": true,
-    "allowSyntheticDefaultImports": true,
-    "sourceMap": true,
-    "strict": true,
-    "noImplicitAny": false
-  },
-  "exclude": ["node_modules", "dist"]
-}
+{
+  "compilerOptions": {
+    "target": "es6",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"],
+      "@vue2-client/*": ["src/*"]
+    },
+    "jsx": "preserve",
+    "experimentalDecorators": true,
+    "allowSyntheticDefaultImports": true,
+    "sourceMap": true,
+    "strict": true,
+    "noImplicitAny": false
+  },
+  "exclude": ["node_modules", "dist"]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue2-client",
-  "version": "1.12.23",
+  "version": "1.12.24",
   "private": false,
   "scripts": {
     "serve": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --no-eslint",

package/public/his/editor/editor.html

@@ -1,51 +1,51 @@
-<!DOCTYPE html>
-<html>
-    <head>
-        <meta charset="utf-8"/>
-        <link rel="shortcut icon" href="./favicon.svg" type="image/svg+xml"/>
-        <link rel="stylesheet" href="./vender/jquery/zTreeStyle/zTreeStyle.css" type="text/css">
-        <script src = "./vender/jquery/jquery.js"></script>
-        <script src = "./vender/date97/WdatePicker.js"></script>
-        <script src = "./vender/jquery/jquery.ztree.core.min.js"></script>
-        <script src = "./vender/jquery/jquery.ztree.exedit.min.js"></script>
-        <script src = "./vender/jquery/jquery.ztree.exhide.min.js"></script>
-        <script src = "./vender/codemirror.js"></script>
-        <script src = "./vender/fabric.js"></script>
-        <script src="./vender/editor.js"></script>
-        <script>
-          $(function() {
-            //配置项可以不设置，会使用默认设置
-            let option = {
-                license:'QO1pepfLYwDNqGvW21ensj0psE9CxBxf5MSRD1q2sCvclYGGtk6clTZEIth12i4SvvvDC04ZNcHe3uQuNtBUFcAk7sHUwAdYvffM2aZis/jpZqrm1rDGk1NHYsheD6DroF+m3jZ5Izh/LxRjzZJfaHHejfrn5InFoSqErfPm4gY=',
-                mode:'form',  //默认模式 form:表单模式，design:设计模式
-                pdfUrl:'https://www.x-emr.cn/pdf/post',  //pdf生成服务
-                dictionary: [  //知识库
-                    {name: '体征', isParent:true, treeUrl:'https://www.x-emr.cn/dict?category=20', itemUrl:'https://www.x-emr.cn/dictitem'},
-                    {name: '症状', isParent:true, treeUrl:'https://www.x-emr.cn/dict?category=20', itemUrl:'https://www.x-emr.cn/dictitem'},
-                    {name: '卫生信息数据元', isParent:true, treeUrl:'https://www.x-emr.cn/dict?category=40', itemUrl:'https://www.x-emr.cn/dictitem'},
-                    {name: '电子病历数据集', isParent:true, treeUrl:'https://www.x-emr.cn/dict?category=50', itemUrl:'https://www.x-emr.cn/dictitem'},
-                    {name: '国家医保标准', isParent:true, treeUrl:'https://www.x-emr.cn/dict?category=80', itemUrl:'https://www.x-emr.cn/dictitem'},
-                    {name: '省数据平台标准', isParent:true, treeUrl:'https://www.x-emr.cn/dict?category=90', itemUrl:'https://www.x-emr.cn/dictitem'},
-                ]
-            }
-
-            //从模块的Editor组件中获取mode，doc，lang属性 (该段代码可删除)
-            let mode = window.frameElement.getAttribute('mode')
-            let doc = window.frameElement.getAttribute('doc')
-            let lang = window.frameElement.getAttribute('lang')
-            mode? option.mode = mode: null
-            lang? option.lang = lang: null
-
-            //初始化编辑器（初始化代码可以放入组件的load事件中）
-            editor.init(option).then(()=>{
-                doc? editor.loadUrl(doc) : null
-            })
-
-          })
-      </script>
-    </head>
-    <body>
-        <!-- 默认id 为editor -->
-        <div id="editor" style="width:100%; height:100%;"></div>
-    </body>
-</html>
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8"/>
+        <link rel="shortcut icon" href="./favicon.svg" type="image/svg+xml"/>
+        <link rel="stylesheet" href="./vender/jquery/zTreeStyle/zTreeStyle.css" type="text/css">
+        <script src = "./vender/jquery/jquery.js"></script>
+        <script src = "./vender/date97/WdatePicker.js"></script>
+        <script src = "./vender/jquery/jquery.ztree.core.min.js"></script>
+        <script src = "./vender/jquery/jquery.ztree.exedit.min.js"></script>
+        <script src = "./vender/jquery/jquery.ztree.exhide.min.js"></script>
+        <script src = "./vender/codemirror.js"></script>
+        <script src = "./vender/fabric.js"></script>
+        <script src="./vender/editor.js"></script>
+        <script>
+          $(function() {
+            //配置项可以不设置，会使用默认设置
+            let option = {
+                license:'QO1pepfLYwDNqGvW21ensj0psE9CxBxf5MSRD1q2sCvclYGGtk6clTZEIth12i4SvvvDC04ZNcHe3uQuNtBUFcAk7sHUwAdYvffM2aZis/jpZqrm1rDGk1NHYsheD6DroF+m3jZ5Izh/LxRjzZJfaHHejfrn5InFoSqErfPm4gY=',
+                mode:'form',  //默认模式 form:表单模式，design:设计模式
+                pdfUrl:'https://www.x-emr.cn/pdf/post',  //pdf生成服务
+                dictionary: [  //知识库
+                    {name: '体征', isParent:true, treeUrl:'https://www.x-emr.cn/dict?category=20', itemUrl:'https://www.x-emr.cn/dictitem'},
+                    {name: '症状', isParent:true, treeUrl:'https://www.x-emr.cn/dict?category=20', itemUrl:'https://www.x-emr.cn/dictitem'},
+                    {name: '卫生信息数据元', isParent:true, treeUrl:'https://www.x-emr.cn/dict?category=40', itemUrl:'https://www.x-emr.cn/dictitem'},
+                    {name: '电子病历数据集', isParent:true, treeUrl:'https://www.x-emr.cn/dict?category=50', itemUrl:'https://www.x-emr.cn/dictitem'},
+                    {name: '国家医保标准', isParent:true, treeUrl:'https://www.x-emr.cn/dict?category=80', itemUrl:'https://www.x-emr.cn/dictitem'},
+                    {name: '省数据平台标准', isParent:true, treeUrl:'https://www.x-emr.cn/dict?category=90', itemUrl:'https://www.x-emr.cn/dictitem'},
+                ]
+            }
+
+            //从模块的Editor组件中获取mode，doc，lang属性 (该段代码可删除)
+            let mode = window.frameElement.getAttribute('mode')
+            let doc = window.frameElement.getAttribute('doc')
+            let lang = window.frameElement.getAttribute('lang')
+            mode? option.mode = mode: null
+            lang? option.lang = lang: null
+
+            //初始化编辑器（初始化代码可以放入组件的load事件中）
+            editor.init(option).then(()=>{
+                doc? editor.loadUrl(doc) : null
+            })
+
+          })
+      </script>
+    </head>
+    <body>
+        <!-- 默认id 为editor -->
+        <div id="editor" style="width:100%; height:100%;"></div>
+    </body>
+</html>