优化

src/utils/public.ts

@@ -99,3 +99,11 @@ export const isChinese = (str) => {
 export const isEnglish = (str) => {
     return /^[a-zA-Z]+$/.test(str);
 }
+
+export function isContain(element: HTMLElement) {
+    let elementIsVisible: boolean
+    const rect = element.getBoundingClientRect();
+    const document = window.document;
+    elementIsVisible = rect.top <= (window.innerHeight || document.documentElement.clientHeight) && rect.left <= (window.innerWidth || document.documentElement.clientWidth) && rect.bottom >= 0 && rect.right >= 0;
+    return elementIsVisible
+}

src/views/hospitalization/zhu-yuan-yi-sheng/electronic-medical-record/emr-editor/EmrMain.vue

@@ -255,6 +255,7 @@
             :max-height="maxHeight - fragmentOrOutlineHeight - 20"/>
         <EmrOutline v-show="fragmentOrOutline === 2"
                     :data="outlineData"
+                    ref="outlineRef"
                     :max-height="maxHeight - fragmentOrOutlineHeight - 20"/>
       </div>
     </div>
@@ -530,7 +531,7 @@ const emrEvent = {
   'contextUpdate': (evt, contextMap, component, context) => {
     styleBarRef.value.setEmrStyleV2(context)
     try {
-      console.log('当前数据元', component.getAttribute('element').name);
+      outlineRef.value.changeElementById(component.id)
     } catch {
     }
   },
@@ -1927,6 +1928,7 @@ function changeRatio() {
 async function getOutline() {
   try {
     outlineData.value = editor.getOutline()
+    console.log(outlineData.value)
   } catch (e) {
 
   }
@@ -1939,6 +1941,9 @@ const setEditor = () => {
 // 大纲还是片段 1-片段 2-大纲
 const fragmentOrOutline = ref(2)
 const outlineData = ref<Outline[]>([])
+const outlineRef = ref<{
+  changeElementById: (id: string) => void
+}>(null)
 const fragmentOrOutlineRef = ref<HTMLDivElement>(null)
 const {height: fragmentOrOutlineHeight} = useElementSize(fragmentOrOutlineRef)
 

src/views/hospitalization/zhu-yuan-yi-sheng/electronic-medical-record/emr-editor/components/EmrOutline.vue

@@ -4,6 +4,7 @@ import {Outline} from "@/views/hospitalization/zhu-yuan-yi-sheng/electronic-medi
 import {emrMitt} from "@/views/hospitalization/zhu-yuan-yi-sheng/electronic-medical-record/emr-editor/emr-init";
 import {useCompRef} from "@/utils/useCompRef";
 import {ElTree} from "element-plus";
+import {isContain} from "@/utils/public";
 
 const props = defineProps<{
   maxHeight: number,
@@ -38,6 +39,24 @@ const handelFilter = (value, data: Outline) => {
   return data.text.includes(value)
 }
 
+const currentId = ref('')
+
+function changeElementById(id: string) {
+  currentId.value = id
+  const element = document.getElementById(id)
+  if (!isContain(element)) {
+    element.scrollIntoView({
+      block: 'center',
+      inline: 'nearest',
+      behavior: 'smooth'
+    })
+  }
+}
+
+defineExpose({
+  changeElementById
+})
+
 </script>
 
 <template>
@@ -45,18 +64,25 @@ const handelFilter = (value, data: Outline) => {
     <el-input v-model="inputVal" placeholder="节点过滤" @input="handelInput" clearable/>
     <div :style="{maxHeight : maxHeight - 50 + 'px'}" class="outline_main">
       <el-tree
+          class="outline_tree"
+          node-key="id"
+          :style="{'--el-tree-text-color': '#000', '--el-color-primary-light-9' : '#409EFF' }"
+          :current-node-key="currentId"
           ref="elTreeRef"
           default-expand-all
+          highlight-current
           :filter-node-method="handelFilter"
           :data="props.data"
           @nodeClick="nodeClick"
           :expand-on-click-node="false">
         <template #default="{ node, data }">
-          <el-icon>
-            <ScaleToOriginal v-if="data.parent"/>
-            <Folder v-else/>
-          </el-icon>
-          {{ data.business || data.text }}
+          <div :id="data.id">
+            <el-icon>
+              <ScaleToOriginal v-if="data.parent"/>
+              <Folder v-else/>
+            </el-icon>
+            {{ data.business || data.text }}
+          </div>
         </template>
       </el-tree>
     </div>
@@ -64,7 +90,7 @@ const handelFilter = (value, data: Outline) => {
   </div>
 </template>
 
-<style scoped lang="scss">
+<style lang="scss">
 .outline_main {
   overflow: auto;
 }