web_dist/src/views/hospitalization/zhu-yuan-yi-sheng/Home.vue

<template>
  <el-container>
    <el-container>
      <el-aside style="width:auto !important;">
        <Overview v-show="xianShiLieBiao" :showSelection="false"/>
      </el-aside>
      <el-main>
        <huan-zhe-xin-xi v-show="basicPatientInformation"></huan-zhe-xin-xi>
        <el-row v-show="xianShiLieBiao" class="tabs">
          <template v-for="item in pathList">
            <el-col :span="3" :style="currentPagePosition(item.path)" class="tab-item" @click="handleClick(item.path)">
              <span> {{ item.title }}</span>
            </el-col>
          </template>
        </el-row>
        <router-view v-slot="{ Component }">
          <keep-alive>
            <component :is="Component"/>
          </keep-alive>
        </router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script name="Home" setup>
import store from '@/store'
import {computed, ref, watch} from "vue";
import HuanZheXinXi from "@/components/zhu-yuan-yi-sheng/HuanZheXinXi.vue";
import router from "@/router";
import Overview from '@/components/medical-insurance/patient-overview/Index.vue'

const tableHeight = computed(() => {
  return store.state.app.windowSize.h
})

const xianShiLieBiao = ref(true)
const basicPatientInformation = ref(true)

watch(() => router.currentRoute.value.path, () => {
  xianShiLieBiao.value = !router.currentRoute.value.meta.blankPage;
  basicPatientInformation.value = router.currentRoute.value.path !== '/inpatient/zhuYuanYiSheng/electronicMedicalRecord'
})

const handleClick = (path) => {
  store.commit('app/setYzPath', path)
  router.push(path)
}
let pathList = $ref([
  {path: '/inpatient/zhuYuanYiSheng/yiZhuLuRu', title: '医嘱录入'},
  {path: '/inpatient/zhuYuanYiSheng/huiZhenShenQing', title: '会诊申请'},
  {path: '/inpatient/zhuYuanYiSheng/jianChaShenQing', title: '检查申请'},
  {path: '/inpatient/zhuYuanYiSheng/jianYanShenQing', title: '检验申请'},
  {path: '/inpatient/zhuYuanYiSheng/shouShuShenQing', title: '查看手术'},
  {path: '/inpatient/zhuYuanYiSheng/caoYaoYiZhu', title: '查看草药医嘱'},
])


onActivated(() => {
  router.push(store.state.app.yiZhuLuRu.path)
  basicPatientInformation.value = router.currentRoute.value.path !== '/inpatient/zhuYuanYiSheng/electronicMedicalRecord'
})

const currentPagePosition = (val) => {
  if (router.currentRoute.value.path === val) {
    return {
      backgroundColor: 'white',
      color: '#0a84fd'
    }
  }
}

</script>

<style lang="scss" scoped>
:deep(el-tabs el-tabs--top demo-tabs) {
  background-color: white;
}

.tabs {
  background-color: #e5e7eb;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin: 3px;

}

.tab-item {
  line-height: 30px;
  text-align: center;

  &:hover span {
    color: #0a84fd;
    cursor: pointer;
  }

}
</style>