lis8.0-vue3/src/views/liswork/components/clinical/index.vue

<template>
  <div class="clinical_box">
    <!-- 临床意义 -->
    <div class="info-text" v-html="info"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch, toRaw, onUnmounted, onMounted } from 'vue'
import { clinicInfo } from '@/api/liswork/work/LisWork';
import emitter from '@/utils/mitt';
const info = ref('')
const getClinicalInfo = (data: any) => {
  clinicInfo(data).then((res: any) => {
    if (res.code == 0) {
      console.log('临床意义==>', res.data);
      info.value = res.data
    }
  })
}
onMounted(() => {
  // 1. 组件挂载后，先检查缓存中是否有数据
  const cachedData = emitter.getCache?.('refreshClinical');
  if (cachedData) {
    getClinicalInfo(cachedData); // 补触发缓存的数据
  }

  emitter.on('refreshClinical', (data) => {
    console.log('data==>', data);
    getClinicalInfo(data)
  })
})

onUnmounted(() => {
  emitter.off('refreshClinical'); // 移除监听 
});

</script>

<style scoped lang="scss">
.clinical_box {
  height: 82vh;
  overflow-y: auto;
}

.info-text {
  width: 100%;
  height: 100%;
  padding: 10px;
  text-indent: 2rem;
  color: #2b2a2a;
  font-family: SourceHanSansCN, SourceHanSansCN;
}
</style>