web_dist/src/views/archive/index.vue

<script setup lang="tsx">
import { useArchive, useArchiveKey } from "@/views/archive/index";
import Aside from "./aside.vue";
import router from "@/router";
import XEUtils from "xe-utils";
import { stringNotBlank } from "@/utils/blank-utils";
import { getPatientAll } from "@/api/inpatient/patient";

const store = useArchive();

provide(useArchiveKey, store);

const mainComp = computed(() => {
  if (store.store.mainComponent) {
    return store.store.mainComponent;
  }
  return <div></div>;
});

const leftComp = computed(() => {
  if (store.store.leftComponent) {
    return store.store.leftComponent;
  }
  return <div></div>;
});

watch(
  () => router.currentRoute.value,
  newValue => {
    const patInfo = XEUtils.get(newValue, "params.patInfo") as string;
    if (stringNotBlank(patInfo)) {
      const split = patInfo.split("_");
      store.store.patNo = split[0];
      store.store.times = split[1];
      getPatientAll(store.store.patNo, store.store.times).then(res => {
        store.store.patInfo = res;
      });
    }
  },
  { immediate: true }
);
</script>

<template>
  <div class="layout_container">
    <header>asdasd</header>
    <div class="layout_main layout_container layout-horizontal">
      <Aside />
      <div class="layout_main">
        <Component :is="mainComp" />
      </div>
      <Component :is="leftComp" style="margin-left: 10px" />
    </div>
  </div>
</template>