电子病历

src/api/zhu-yuan-yi-sheng/emr-api.js

@@ -1,5 +1,6 @@
 import axios from "axios";
 import {getTree} from "@/utils/tree-utils";
+import {getPatientData} from "@/api/zhu-yuan-yi-sheng/emr-patient";
 
 let url = '/emr/runtime/api/v1/'
 
@@ -18,14 +19,30 @@ service.interceptors.response.use(
         }
     })
 
-export async function getEmrTree() {
-    let data = await service({
-        url: 'category/tree',
-        method: 'get',
-    })
-    return getTree(data, "_id", "parent")
+export async function getEmrTree(patNo, times) {
+    let data = [], patientData = [], returnValue = {}
+
+    try {
+        data = await service({
+            url: 'category/tree',
+            method: 'get',
+        })
+    } catch (e) {
+    }
+
+    try {
+        patientData = await getPatientData(patNo, times);
+    } catch (e) {
+    }
+
+    returnValue = {
+        emrTree: getTree(data, "_id", "parent"),
+        patientTree: patientData
+    }
+    return returnValue
 }
 
+
 export function getTemplate(code) {
     return service({
         url: `template/${code}`,
@@ -39,3 +56,11 @@ export function getPatientsEmr(patNo) {
         method: 'GET'
     })
 }
+
+export async function getSnippet() {
+    let data = await service({
+        url: `snippet/list/tree`,
+        method: 'GET'
+    })
+    return getTree(data, '_id', 'parent')
+}

src/api/zhu-yuan-yi-sheng/emr-patient.js

@@ -0,0 +1,27 @@
+import request from "@/utils/request";
+
+let url = 'Emr/'
+
+export function insertEmrData(data) {
+    return request({
+        url: url + 'insertEmrData',
+        method: 'post',
+        data
+    })
+}
+
+export function getPatientData(patNo, times) {
+    return request({
+        url: url + 'getPatientData',
+        method: 'get',
+        params: {patNo, times}
+    })
+}
+
+export function deletePatientEmrByDocumentId(documentId) {
+    return request({
+        url: url + 'deletePatientEmrByDocumentId',
+        method: 'get',
+        params: {documentId}
+    })
+}

src/components/zhu-yuan-yi-sheng/emr/EmrSidebar.vue

@@ -2,40 +2,62 @@
   <el-radio-group v-model="templateType" @change="typeChange">
     <el-radio-button :label="0">全院模板</el-radio-button>
     <el-radio-button :label="1">科室模板</el-radio-button>
-    <el-radio-button :label="2">个人模板</el-radio-button>
+    <el-radio-button :label="2">患者数据</el-radio-button>
   </el-radio-group>
-  <el-tree :data="templateData"
+  <el-tree :data="treeData"
            :props="defaultProps"
            @node-click="handleNodeClick"
            node-key="_id"
-           default-expand-all/>
+           default-expand-all>
+  </el-tree>
 </template>
 
 <script setup name='EmrSidebar'>
 import {getEmrTree} from "@/api/zhu-yuan-yi-sheng/emr-api";
+import {huanZheXinXi} from "@/views/hospitalization/zhu-yuan-yi-sheng/public-js/zhu-yuan-yi-sheng";
+import {getPatientData} from "@/api/zhu-yuan-yi-sheng/emr-patient";
 
 const emit = defineEmits(['nodeClick', 'typeChange'])
 
-let templateData = $ref([])
+let treeData = $ref([])
+let returnData = $ref([])
+
 const defaultProps = {
   children: 'children',
   label: 'name',
 }
 
-const templateType = $ref(0)
+let templateType = $ref(0)
 
 const handleNodeClick = (val) => {
-  emit('nodeClick', val)
+  emit('nodeClick', val, templateType)
 }
 
 const typeChange = (val) => {
+  switch (val) {
+    case 0 :
+      return treeData = returnData.emrTree;
+    case 1:
+      return treeData = [];
+    case 2:
+      return treeData = returnData.patientTree;
+  }
   emit("typeChange", val)
 }
 
+const queryHistory = async (times) => {
+  templateType = 2
+  returnData.patientTree = await getPatientData(huanZheXinXi.value.inpatientNo, times)
+  treeData = returnData.patientTree
+}
+
+defineExpose({queryHistory})
+
 onMounted(() => {
   nextTick(() => {
-    getEmrTree().then((res) => {
-      templateData = res
+    getEmrTree(huanZheXinXi.value.inpatientNo, huanZheXinXi.value.admissTimes).then((res) => {
+      treeData = res.emrTree
+      returnData = res
     })
   })
 })
@@ -44,4 +66,4 @@ onMounted(() => {
 
 <style scoped>
 
-</style>
+</style>

src/components/zhu-yuan-yi-sheng/emr/EmrSnippet.vue

@@ -0,0 +1,38 @@
+<template>
+  <el-tree :data="snippetData"
+           :props="defaultProps"
+           @node-click="handleNodeClick"
+           node-key="_id"
+           default-expand-all/>
+</template>
+
+<script setup name='EmrSnippet'>
+
+import {getSnippet} from "@/api/zhu-yuan-yi-sheng/emr-api";
+
+const emit = defineEmits(['nodeClick'])
+
+let snippetData = $ref([])
+const defaultProps = {
+  children: 'children',
+  label: 'name',
+}
+
+const handleNodeClick = (node, object, event) => {
+  if (node.content) {
+    emit('nodeClick', node)
+  }
+}
+
+onMounted(() => {
+  getSnippet().then((res) => {
+    snippetData = res
+    console.log(snippetData)
+  })
+})
+
+</script>
+
+<style scoped>
+
+</style>

src/views/hospitalization/zhu-yuan-yi-sheng/XinZengShuJu.vue

@@ -1,11 +1,13 @@
 <template>
-  <tian-jia-yi-zhu v-if="name === '添加医嘱'"></tian-jia-yi-zhu>
-  <tian-jia-jian-cha-jian-yan v-else-if="name === '检验' || name === '检查'"
-                              :jian-cha="name === '检查'">
-  </tian-jia-jian-cha-jian-yan>
-  <xin-zeng-shou-shu-shen-qing v-if="name === '手术'"></xin-zeng-shou-shu-shen-qing>
-  <xin-zhen-cao-yao v-if="name === '草药'"></xin-zhen-cao-yao>
-  <electronic-medical-record v-if="name==='电子病历'"/>
+  <div v-loading=" name==='' ">
+    <tian-jia-yi-zhu v-if="name === '添加医嘱'"></tian-jia-yi-zhu>
+    <tian-jia-jian-cha-jian-yan v-else-if="name === '检验' || name === '检查'"
+                                :jian-cha="name === '检查'">
+    </tian-jia-jian-cha-jian-yan>
+    <xin-zeng-shou-shu-shen-qing v-if="name === '手术'"></xin-zeng-shou-shu-shen-qing>
+    <xin-zhen-cao-yao v-if="name === '草药'"></xin-zhen-cao-yao>
+    <electronic-medical-record v-if="name==='电子病历'" @refreshPage="refreshPage"/>
+  </div>
 </template>
 <script>
 
@@ -21,6 +23,7 @@ import {cuoWuXinXi, huanZheXinXi} from "@/views/hospitalization/zhu-yuan-yi-shen
 import {stringIsBlank} from "@/utils/blank-utils";
 import store from '@/store'
 import electronicMedicalRecord from '@/views/hospitalization/zhu-yuan-yi-sheng/electronic-medical-record/index.vue'
+import sleep from "@/utils/sleep";
 
 
 export default {
@@ -61,6 +64,12 @@ export default {
       }
     })
 
+    const refreshPage = async (val) => {
+      name.value = null
+      await sleep(500)
+      name.value = val
+    }
+
 
     onDeactivated(() => {
       name.value = '关闭'
@@ -69,7 +78,8 @@ export default {
     })
 
     return {
-      name
+      name,
+      refreshPage
     }
   }
 }

src/views/hospitalization/zhu-yuan-yi-sheng/electronic-medical-record/emr-init.js

@@ -1,13 +1,42 @@
 import store from "@/store";
-import {huanZheXinXi} from "@/views/hospitalization/zhu-yuan-yi-sheng/public-js/zhu-yuan-yi-sheng";
 import {ElMessage} from "element-plus";
+import {BizException, ExceptionEnum} from "@/utils/BizException";
+import {deletePatientEmrByDocumentId, insertEmrData} from "@/api/zhu-yuan-yi-sheng/emr-patient";
+import {clone} from "@/utils/clone";
 
-export function EMRInteractive(data) {
+export function EMRInteractive(data, loaded) {
     this.setEditor = (editor, runtime) => {
         this.editor = editor;
         this.runtime = runtime;
+
+        editor.on('loaded', function (event) {
+            loaded(event)
+        })
+
+        editor.on('contentchange', function (event) {
+            loaded(event)
+        })
+
     };
 
+    this.setEditorMode = (value) => {
+        this.editor.setEditorMode(value)
+    }
+
+    this.insertSnippet = (content, styles, patientData) => {
+        //病历片段相关参数
+        let object = {
+            value: content,
+            styles: styles,
+            data: patientData,
+            isFragment: true,
+        }
+        console.log(object)
+        this.editor.execute("insertContents", {
+            object
+        });
+    }
+
     this.getAppContext = () => {
         return {
             endpoints: {
@@ -24,39 +53,42 @@ export function EMRInteractive(data) {
         };
     };
 
-    this.saveDocument = (categoryCode) => {
+    this.saveDocument = (value) => {
         let data = this.editor.getDocument();
-        data.properties.categoryCode = categoryCode
-        data.properties.patientId = huanZheXinXi.value.inpatientNo;
+        data.properties.categoryCode = value.emrCategoryCode
+        data.properties.patientId = value.patNo;
         data.properties.creator = store.state.user.info.code;
         data.properties.createTime = new Date()
         data.properties.modifier = store.state.user.info.code;
         data.properties.modifyTime = new Date()
-        this.runtime.saveDocument(
-            data,
-            (res) => {
-                // let validator = this.editor.getValidator();
-                console.log(this.editor)
-                // let valid = validator.valid();
-                // console.log(valid)
-                ElMessage.success("保存成功。")
-            },
-            (err) => {
-                ElMessage.success("emr保存失败，" + err)
-            }
-        );
+        data._id = value.emrDocumentId
+        let validator = this.editor.getValidator();
+        let valid = validator.valid();
+
+        if (valid) {
+            BizException(ExceptionEnum.MESSAGE_ERROR, "没有通过校验")
+        }
+
+        this.runtime.saveDocument(data, (res) => {
+
+            insertEmrData(value)
+
+        }, (err) => {
+
+            ElMessage.error("emr保存失败，" + err)
+
+        });
 
     };
 
-    this.deleteDocument = (documentId) => {
-        this.runtime.delDocument(documentId,
-            (res) => {
-                ElMessage.success("删除成功")
-            },
-            (err) => {
-                ElMessage.success("删除失败" + err)
-            }
-        );
+    this.deleteDocument = (documentId, cb) => {
+        this.runtime.delDocument(documentId, (res) => {
+            deletePatientEmrByDocumentId(documentId).then(() => {
+                cb()
+            })
+        }, (err) => {
+            ElMessage.error("删除失败" + err)
+        });
     };
 
     this.printDocument = (showPreview, docs = null) => {

src/views/hospitalization/zhu-yuan-yi-sheng/electronic-medical-record/index.vue

@@ -2,25 +2,44 @@
   <el-container>
 
     <el-header>
-      <el-button type="primary" @click="clickSaveData">testSave</el-button>
-      <el-button type="primary" @click="testPrint">testPrint</el-button>
-      <el-button type="primary" @click="testDelete">testDelete</el-button>
+      <el-button icon="ArrowLeft" style="font-size: 14px" text @click="clickBack">返回</el-button>
+      住院次数:
+      <el-input-number :min="1" :max="huanZheXinXi.admissTimes" v-model="times"/>
+      <el-button @click="queryHistoricalInformation">历史记录</el-button>
+
+      <div v-if="times === huanZheXinXi.admissTimes">
+        <el-button type="success" icon="CircleCheck" @click="clickSaveData">保存数据</el-button>
+        <el-button type="primary" icon="Printer" @click="testPrint">打印电子病历</el-button>
+        <el-button icon="Delete" type="danger" @click="clickDelete">删除电子病历</el-button>
+      </div>
+      <el-button icon="RefreshLeft" @click="refreshPage">刷新页面</el-button>
     </el-header>
 
     <el-container>
 
-      <el-aside>
-        <emr-sidebar></emr-sidebar>
+      <el-aside style="background-color: white">
+        <emr-sidebar @nodeClick="nodeClick" ref="emrSidebarRef"/>
       </el-aside>
 
-      <el-main>
+      <el-main v-loading="loaded">
 
-        <div class="emr-iframe" name="emr">
+        <el-row>
 
-          <iframe id="emrIframe"
-                  :src="caseHistoryUrl"/>
+          <el-col :span="20">
+            <div class="emr-iframe" name="emr">
 
-        </div>
+              <iframe id="emrIframe"
+                      ref="emrRef"
+                      :src="caseHistoryUrl"/>
+
+            </div>
+          </el-col>
+
+          <el-col :span="4" style="background-color: white">
+            <emr-snippet @node-click="clickSnippet"/>
+          </el-col>
+
+        </el-row>
 
       </el-main>
 
@@ -29,147 +48,208 @@
   </el-container>
 </template>
 
-<script>
+<script setup name="emr">
 
 import {huanZheXinXi} from "@/views/hospitalization/zhu-yuan-yi-sheng/public-js/zhu-yuan-yi-sheng";
-import store from "@/store";
-import {uuid} from "@/utils/getUuid";
 import {getEmrInpatientData} from "@/api/dictionary/emr-data-maintenance-api";
 import EmrSidebar from "@/components/zhu-yuan-yi-sheng/emr/EmrSidebar.vue";
-import {ElMessage} from "element-plus";
-import {getPatientsEmr} from "@/api/zhu-yuan-yi-sheng/emr-api";
+import {EMRInteractive} from "@/views/hospitalization/zhu-yuan-yi-sheng/electronic-medical-record/emr-init";
+import {ElMessageBox} from "element-plus";
+import {uuid} from "@/utils/getUuid";
+import {BizException, ExceptionEnum} from "@/utils/BizException";
+import router from '@/router'
+import EmrSnippet from "@/components/zhu-yuan-yi-sheng/emr/EmrSnippet.vue";
+
+const emit = defineEmits(['refreshPage'])
+
+const currentEmr = ref(null)
+const emrRef = ref(null)
+
+let categoryCode = $ref('')
+let documentId = $ref('')
+let patientId = $ref('')
+let categroyId = $ref('')
+let templateName = $ref('')
+let caseHistoryUrl = $ref('')
+// 患者历史记录
+let times = $ref(huanZheXinXi.value.admissTimes)
+// 侧边栏
+let emrSidebarRef = $ref(null)
+// 是否加载完成了
+let loaded = $ref(false)
+// 是否 改变了数据
+let isEditorChange = $ref(false)
+// 患者数据
+let patientData = $ref({})
+
+const updateCaseHistoryUrl = (val) => {
+  let valCode = val.code ? val.code : val.emrCategoryCode;
+  if (documentId === val.emrDocumentId && categoryCode === valCode) {
+    return
+  }
+  loaded = true
+  isEditorChange = false
+  documentId = val.emrDocumentId;
+  categoryCode = valCode
+  templateName = val.emrName ? val.emrName : val.name
+  caseHistoryUrl = `/emr/runtime/?documentId=${documentId}&categoryCode=${categoryCode}&categroyId=${categroyId}&patientId=${patientId}#/`
+}
 
-export default {
-  components: {EmrSidebar},
-  setup() {
 
-    const currentEmr = ref(null)
+const refreshPage = () => {
+  emit('refreshPage', '电子病历')
+}
 
-    const caseHistoryUrl = ref('')
 
-    let categoryCode = $ref('7e25f0c0070511edbc820dada413ba28')
-    let documentId = $ref('')
+const clickSaveData = () => {
 
-    const clickSaveData = () => {
-      currentEmr.value.saveDocument(categoryCode);
-    }
+  let data = {
+    emrDocumentId: documentId ? documentId : uuid(31, 62),
+    emrCategoryCode: categoryCode,
+    patNo: huanZheXinXi.value.inpatientNo,
+    times: huanZheXinXi.value.admissTimes,
+    emrName: templateName
+  }
 
-    const testPrint = () => {
-      currentEmr.value.printDocument(true, null);
-    }
+  objectValuesCannotBeNull(data)
 
-    const testDelete = () => {
-      currentEmr.value.deleteDocument(documentId);
-    }
+  ElMessageBox.prompt('请输入保存的名称,自动带上日期', '提示', {
+    inputErrorMessage: '长度为2 - 20 个,汉字',
+    inputPattern: /^\S{2,20}$/,
+    inputValue: templateName
+  }).then(async ({value}) => {
+    data.name = value
+    await currentEmr.value.saveDocument(data)
+    isEditorChange = false
+  }).catch(() => {
 
-    const getCaseHistoryUrl = (documentId, categoryCode, categroyId, patientId) => {
-      caseHistoryUrl.value = `/emr/runtime/?documentId=${documentId}&categoryCode=${categoryCode}&categroyId=${categroyId}&patientId=${patientId}#/`;
-    }
+  })
+}
 
-    onMounted(() => {
+const objectValuesCannotBeNull = (object) => {
+  if (!object.emrCategoryCode) {
+    BizException(ExceptionEnum.LOGICAL_ERROR, "请先选择模板")
+  }
+  if (!object.patNo) {
+    BizException(ExceptionEnum.LOGICAL_ERROR, "请先选择患者")
+  }
+  if (object.times == null || object.times === 0) {
+    BizException(ExceptionEnum.LOGICAL_ERROR, "住院次数为空")
+  }
+}
 
-      nextTick(async () => {
+const testPrint = () => {
+  currentEmr.value.printDocument(true, null);
+}
 
-        getCaseHistoryUrl(documentId, categoryCode, '', huanZheXinXi.value.inpatientNo)
+const clickDelete = () => {
+  whetherThereIsAMedicalRecordId()
+  ElMessageBox.alert('是否要删除该模板。', '提示', {
+    type: 'warning'
+  }).then(() => {
+    currentEmr.value.deleteDocument(documentId, function () {
+      refreshPage()
+    });
+  }).catch(() => {
 
-        let data = await getEmrInpatientData({
-          patNo: huanZheXinXi.value.inpatientNo,
-          times: huanZheXinXi.value.admissTimes
-        })
+  })
 
-        data['_id'] = uuid(31, 62)
-        currentEmr.value = new EMRInteractive(data);
-        const iframe = document.getElementById('emrIframe')
-        iframe.parentElement.emr = currentEmr.value
+}
 
-        // 获取患者已经存在的
-        getPatientsEmr(huanZheXinXi.value.inpatientNo).then((res) => {
-          console.log(res)
-        })
+const whetherThereIsAMedicalRecordId = () => {
+  if (!documentId) {
+    BizException(ExceptionEnum.MESSAGE_ERROR, "请先选择电子病历的模板。")
+  }
+}
 
-      })
+const queryHistoricalInformation = () => {
+  checkEmrChange(() => {
+    nodeClick({}, 0)
+    emrSidebarRef.queryHistory(times);
+  })
 
+}
+
+
+const checkEmrChange = (cb) => {
+  if (isEditorChange) {
+    ElMessageBox.confirm("您改变了数据是否要保存，不保存可能会丢失数据。", '提示', {
+      type: "warning",
+      cancelButtonText: '放弃修改',
+      confirmButtonText: '保存',
+      distinguishCancelAndClose: true,
+    }).then(() => {
+      clickSaveData()
+    }).catch((action) => {
+      if (action === 'cancel') {
+        isEditorChange = false
+        cb()
+      }
     })
+  } else {
+    isEditorChange = false
+    cb()
+  }
+}
 
-    return {
-      clickSaveData,
-      testPrint,
-      testDelete,
-      caseHistoryUrl,
+const nodeClick = (val, templateType) => {
+  checkEmrChange(() => {
+    updateCaseHistoryUrl(val)
+  })
+}
+
+
+const editorEvents = ({name}) => {
+  if (name === 'loaded') {
+    loaded = false
+    if (times !== huanZheXinXi.value.admissTimes) {
+      currentEmr.value.setEditorMode('readonly');
     }
+  } else if (name === 'contentchange') {
+    isEditorChange = true
   }
 }
 
+const clickBack = () => {
+  checkEmrChange(() => {
+    router.go(-1)
+  })
+}
 
-function EMRInteractive(data) {
-  this.setEditor = (editor, runtime) => {
-    this.editor = editor;
-    this.runtime = runtime;
-  };
-
-  this.getAppContext = () => {
-    return {
-      endpoints: {
-        app: "/bdp/dataservice/api",
-      },
-      input: {
-        user: store.state.user.info.code,
-        name: store.state.user.info.name
-      },
-      login: {
-        token: store.state.user.info.token
-      },
-      data
-    };
-  };
-
-  this.saveDocument = (categoryCode) => {
-    let data = this.editor.getDocument();
-    data.properties.categoryCode = categoryCode
-    data.properties.patientId = huanZheXinXi.value.inpatientNo;
-    data.properties.creator = store.state.user.info.code;
-    data.properties.createTime = new Date()
-    data.properties.modifier = store.state.user.info.code;
-    data.properties.modifyTime = new Date()
-    this.runtime.saveDocument(
-        data,
-        (res) => {
-          // let validator = this.editor.getValidator();
-          console.log(this.editor)
-          // let valid = validator.valid();
-          // console.log(valid)
-          ElMessage.success("保存成功。")
-        },
-        (err) => {
-          ElMessage.success("emr保存失败，" + err)
-        }
-    );
-
-  };
-
-  this.deleteDocument = (documentId) => {
-    this.runtime.delDocument(documentId,
-        (res) => {
-          ElMessage.success("删除成功")
-        },
-        (err) => {
-          ElMessage.success("删除失败" + err)
-        }
-    );
-  };
-
-  this.printDocument = (showPreview, docs = null) => {
-
-    this.editor && this.editor.execute("print", {
-
-      value: {
-        showPreview
-      }
+const monitorPageRefresh = (event) => {
+  if (isEditorChange) {
+    event.returnValue = false;
+  }
+}
 
-    })
-  };
+const clickSnippet = ({content, styles}) => {
+  currentEmr.value.insertSnippet(content, styles, patientData)
 }
 
+onMounted(() => {
+
+  nextTick(async () => {
+
+    patientData = await getEmrInpatientData({
+      patNo: huanZheXinXi.value.inpatientNo,
+      times: huanZheXinXi.value.admissTimes
+    })
+    patientId = huanZheXinXi.value.inpatientNo
+    currentEmr.value = new EMRInteractive(patientData, editorEvents);
+    emrRef.value.parentElement.emr = currentEmr.value
+
+    window.addEventListener('beforeunload', monitorPageRefresh)
+
+  })
+
+})
+
+onDeactivated(() => {
+  console.log(123)
+  window.removeEventListener('beforeunload', monitorPageRefresh)
+})
+
+
 </script>
 
 <style scoped>

src/views/settings/Test.vue

@@ -8,116 +8,160 @@
     <el-main>
       <div class="emr-iframe" name="emr">
         <iframe id="emrIframe"
-                src="/emr/runtime/?documentId=&categoryCode=3f3e2d6006ff11edbc820dada413ba28&patientId=testpatient"></iframe>
+                ref="emrRef"
+                src="/emr/runtime/?documentId=&categoryCode=7e25f0c0070511edbc820dada413ba28&patientId=014807"></iframe>
       </div>
     </el-main>
   </el-container>
 </template>
 
-<script>
 
-import {huanZheXinXi} from "@/views/hospitalization/zhu-yuan-yi-sheng/public-js/zhu-yuan-yi-sheng";
+<script setup name="Test">
 
-export default {
-  setup() {
 
-    const currentEmr = ref(null)
+import {EMRInteractive} from "@/views/hospitalization/zhu-yuan-yi-sheng/electronic-medical-record/emr-init";
+import {getEmrInpatientData} from "@/api/dictionary/emr-data-maintenance-api";
+import {uuid} from "@/utils/getUuid";
 
-    const testSave = () => {
-      console.log('test save clicked.')
-      currentEmr.value.saveDocument(null);
-    }
+const currentEmr = ref(null)
+const emrRef = ref(null)
 
-    const testPrint = () => {
-      console.log('test print clicked.')
-      currentEmr.value.printDocument(null);
-    }
-
-    const testDelete = () => {
-      console.log('test delete clicked.')
-      currentEmr.value.deleteDocument(null);
-    }
-    onMounted(() => {
-      console.log('mounted.')
-      nextTick(() => {
-        console.log('start initializing.')
-        currentEmr.value = new EMRInteractive();
-        const iframe = document.getElementById('emrIframe')
-        iframe.parentElement.emr = currentEmr.value
-        // currentEmr.value.setEditor()
-        console.log('initialized.')
-      })
+const testSave = () => {
+  currentEmr.value.saveDocument()
+}
 
-    })
+const testPrint = () => {
 
-    return {
-      testSave,
-      testPrint,
-      testDelete
-    }
-  }
 }
 
-function EMRInteractive() {
-  this.setEditor = (editor, runtime) => {
-    this.editor = editor;
-    this.runtime = runtime;
-  };
-
-  this.getAppContext = () => {
-    return {
-      endpoints: {
-        app: "http://127.0.0.1:3000",
-      },
-      login: {
-        user: {
-          id: "testuser",
-          name: "测试人员",
-        },
-      },
-      data: {
-        emr: {
-          patient: {
-            name: '张三'
-          }
-        }
-      },
-    };
-  };
-
-  this.saveDocument = (cb) => {
-    console.log('save document.', this)
-
-    let data = this.editor.getDocument();
-    data.properties.categoryCode = '3f3e2d6006ff11edbc820dada413ba28';
-    data.properties.patientId = 'testpatient';
-    this.runtime.saveDocument(
-        data,
-        (res) => {
-          console.log("emr保存成功", res);
-        },
-        (err) => {
-          console.log("emr保存失败", err);
-        }
-    );
-  };
-  this.deleteDocument = (cb) => {
-    console.log('delete document.')
-    let documentId = '3f3e2d6006ff11edbc820dada413ba28';
-    this.runtime.delDocument(documentId, (res) => {
-      console.log("emr删除成功");
-    });
-  };
-  this.printDocument = (showPreview, docs = null) => {
-    console.log('print document.')
-  };
+const testDelete = () => {
+
 }
 
+
+onMounted(() => {
+
+  nextTick(async () => {
+    let data = await getEmrInpatientData({
+      patNo: '014807',
+      times: 3
+    })
+
+    console.log(data)
+
+    data['_id'] = uuid(31, 62)
+
+    currentEmr.value = new EMRInteractive(data)
+    emrRef.value.parentElement.emr = currentEmr.value
+
+  })
+
+})
+
 </script>
 
+<!--<script>-->
+
+<!--export default {-->
+<!--  setup() {-->
+
+<!--    const currentEmr = ref(null)-->
+
+<!--    const testSave = () => {-->
+<!--      console.log('test save clicked.')-->
+<!--      currentEmr.value.saveDocument(null);-->
+<!--    }-->
+
+<!--    const testPrint = () => {-->
+<!--      console.log('test print clicked.')-->
+<!--      currentEmr.value.printDocument(null);-->
+<!--    }-->
+
+<!--    const testDelete = () => {-->
+<!--      console.log('test delete clicked.')-->
+<!--      currentEmr.value.deleteDocument(null);-->
+<!--    }-->
+<!--    onMounted(() => {-->
+<!--      console.log('mounted.')-->
+<!--      nextTick(() => {-->
+<!--        console.log('start initializing.')-->
+<!--        currentEmr.value = new EMRInteractive();-->
+<!--        const iframe = document.getElementById('emrIframe')-->
+<!--        iframe.parentElement.emr = currentEmr.value-->
+<!--        // currentEmr.value.setEditor()-->
+<!--        console.log('initialized.')-->
+<!--      })-->
+
+<!--    })-->
+
+<!--    return {-->
+<!--      testSave,-->
+<!--      testPrint,-->
+<!--      testDelete-->
+<!--    }-->
+<!--  }-->
+<!--}-->
+
+<!--function EMRInteractive() {-->
+<!--  this.setEditor = (editor, runtime) => {-->
+<!--    this.editor = editor;-->
+<!--    this.runtime = runtime;-->
+<!--  };-->
+
+<!--  this.getAppContext = () => {-->
+<!--    return {-->
+<!--      endpoints: {-->
+<!--        app: "http://127.0.0.1:3000",-->
+<!--      },-->
+<!--      login: {-->
+<!--        user: {-->
+<!--          id: "testuser",-->
+<!--          name: "测试人员",-->
+<!--        },-->
+<!--      },-->
+<!--      data: {-->
+<!--        emr: {-->
+<!--          patient: {-->
+<!--            name: '张三'-->
+<!--          }-->
+<!--        }-->
+<!--      },-->
+<!--    };-->
+<!--  };-->
+
+<!--  this.saveDocument = (cb) => {-->
+<!--    console.log('save document.', this)-->
+
+<!--    let data = this.editor.getDocument();-->
+<!--    data.properties.categoryCode = '3f3e2d6006ff11edbc820dada413ba28';-->
+<!--    data.properties.patientId = 'testpatient';-->
+<!--    this.runtime.saveDocument(-->
+<!--        data,-->
+<!--        (res) => {-->
+<!--          console.log("emr保存成功", res);-->
+<!--        },-->
+<!--        (err) => {-->
+<!--          console.log("emr保存失败", err);-->
+<!--        }-->
+<!--    );-->
+<!--  };-->
+<!--  this.deleteDocument = (cb) => {-->
+<!--    console.log('delete document.')-->
+<!--    let documentId = '3f3e2d6006ff11edbc820dada413ba28';-->
+<!--    this.runtime.delDocument(documentId, (res) => {-->
+<!--      console.log("emr删除成功");-->
+<!--    });-->
+<!--  };-->
+<!--  this.printDocument = (showPreview, docs = null) => {-->
+<!--    console.log('print document.')-->
+<!--  };-->
+<!--}-->
+
+<!--</script>-->
+
 <style scoped>
 .emr-iframe, iframe {
   width: 100%;
   height: 700px;
 }
-</style>
+</style>