教程

src/utils/user-info-config.ts

@@ -21,7 +21,6 @@ export function initUserInfoConfig(cb: (data: UserInfoConfig) => void) {
         params: {code: userInfoStore.value.code},
         showLoading: false
     }).then(res => {
-        userInfoConfig.value = res
         Object.assign(userInfoConfig.value, res)
         cb && cb(userInfoConfig.value)
     }).catch(() => {

src/views/hospitalization/zhu-yuan-yi-sheng/electronic-medical-record/emr-editor/emr-init-v2.ts

@@ -1,64 +1,53 @@
+import {EditType} from "./edit";
+
 interface Options {
     appContext?: any,
     event?: {
         [key: string]: (...val: any[]) => void,
     },
-    onMounted?: () => void,
 }
 
-export class emrInit {
-    iframe: HTMLIFrameElement = document.createElement('iframe')
-    editor: any = null
-    runtime: any = null
-    isLoad = true
-    options: Options = null
-    onMounted = null
+interface UseEmrInitReturn {
+    editor: EditType,
+    runtime: any,
+    iframe: HTMLIFrameElement,
+}
 
-    constructor(div: HTMLDivElement, options?: Options) {
-        if (options && options.onMounted) {
-            this.onMounted = options.onMounted
-        }
+export function useEmrInit(div: HTMLDivElement, options?: Options): Promise<UseEmrInitReturn> {
+    return new Promise((resolve, reject) => {
         if (div['emr']) {
             throw new Error('该div已挂载请选择其他div')
         }
-        this.options = options
-        this.iframe.style.width = '100%'
-        this.iframe.style.height = '100%'
-        this.iframe.src = '/emr/runtime/#/editor'
-        this.iframe.style.border = '0'
-        div.appendChild(this.iframe)
-        this.init(div)
-    }
+        const iframe: HTMLIFrameElement = document.createElement('iframe')
+        let editor: any, runtime: any
 
-    init(div: HTMLDivElement) {
-        div['emr'] = {
-            tempThis: this,
-            setEditor(e: any, r: any) {
-
-                this.tempThis.editor = e
-                this.tempThis.runtime = r
-                this.tempThis.isLoad = false
+        iframe.style.width = '100%'
+        iframe.style.height = '100%'
+        iframe.src = '/emr/runtime/#/editor'
+        iframe.style.border = '0'
 
-                this.tempThis.onMounted && this.tempThis.onMounted()
+        div['emr'] = {
+            setEditor: (e: EditType, r: any): void => {
+                editor = e
+                runtime = r
 
-                if (this.tempThis.options && this.tempThis.options.event) {
-                    for (let key in this.tempThis.options.event) {
-                        e.on(key, this.tempThis.options.event[key])
+                if (options && options.event) {
+                    for (let key in options.event) {
+                        editor.on(key, options.event[key])
                     }
                 }
 
+                resolve({editor, runtime, iframe})
             },
-            getAppContext() {
-                if (this.tempThis.options && this.tempThis.options.appContext) {
-                    return this.tempThis.options.appContext
+            getAppContext: (): any => {
+                if (options && options.appContext) {
+                    return options.appContext
                 }
                 return {}
             }
         }
-    }
 
-    public setUrl(url: string) {
-        this.iframe.src = url
-    }
 
+        div.appendChild(iframe)
+    })
 }

src/views/settings/Test.vue

@@ -1,23 +1,43 @@
 <template>
-  <div style="height: 100% ; width: 100%" ref="divRef">
+  <div style="display: flex;height: 100% ; width: 100%">
+    <div style="height: 100% ; width: 50%" ref="divRef1">
+    </div>
+    <div style="height: 100% ; width: 50%" ref="divRef2">
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import {onMounted, ref} from "vue";
-import {emrInit} from "@/views/hospitalization/zhu-yuan-yi-sheng/electronic-medical-record/emr-editor/emr-init-v2";
+import {
+  useEmrInit
+} from "@/views/hospitalization/zhu-yuan-yi-sheng/electronic-medical-record/emr-editor/emr-init-v2";
 
-const divRef = ref<HTMLDivElement>(null)
+const divRef1 = ref<HTMLDivElement>(null)
+const divRef2 = ref<HTMLDivElement>(null)
 
+const event = {
+  'ready': (val) => {
+    console.log(val)
+  }
+}
 
-onMounted(async () => {
-  const a = new emrInit(divRef.value, {
-    event: {
-      'ready': (val) => {
-        console.log(val)
-      }
-    }
+const appContext = ref({
+  a: 12312,
+  b: 2323
+})
+
+onMounted(() => {
+  useEmrInit(divRef1.value, {appContext: appContext.value}).then(res => {
+    res.editor.on('loaded', () => {
+      console.log(1232)
+    })
+
+    console.log(res.editor.getDocument());
   })
+
+  useEmrInit(divRef2.value)
+
 })
 
 </script>