ssts-hospital-web-master项目实战记录七：核心架构

记录时间：2024-10-24

types

src/types/index.ts

// types统一出口
export * from './device-driver'
export * from './device'
export * from './flow-config'
export * from './flow-page'
export * from './map'
export * from './page-config'
export * from './receipt'
export * from './system'
export * from './terminal'

 

store

 

src/store/index.ts

// store统一出口

export { useManageComponentsStore } from './useManageComponentsStore'

export { useSystemStore } from './useSystemStore'

export { useTimerStore } from './useTimerStore'

 

router

src/router/index.ts

import router from '@/views/biz-basic/router'
import { NavigationGuardNext } from 'vue-router'
import { useSystemStore } from '@/store'

// 允许重定向到登录页面的页面列表
const allowLoginPages = ['/Main', '/SystemStopWork']

// 检查是否允许重定向前台管理登录页面
const checkFrontManageLoginRedirect = (to: any, from: any, next: NavigationGuardNext) => {
  console.log('checkFrontManageLoginRedirect', to, from)

  if (!allowLoginPages.includes(router.currentRoute.value.path)) {
    // 如果不允许从当前页面重定向到登录页面，则不执行任何操作
    return
  }
  next()
}

// 检查是否允许重定向前台管理主页面
const checkFrontManageMainRedirect = (to: any, from: any, next: NavigationGuardNext) => {
  console.log('checkFrontManageMainRedirect', to, from)

  const systemStore = useSystemStore()
  if (!systemStore.flagFrontManageFlag) {
    // 如果不允许从当前页面重定向到登录页面，则不执行任何操作
    return
  }
  next()
}

// 检查是否需要初始化设备
const checkDeviceInit = (to: any, from: any, next: NavigationGuardNext) => {
  console.log('checkDeviceInit', to, from)

  const systemStore = useSystemStore()
  if (to.path !== '/Init' && !systemStore.flagDeviceInitFlag) {
    // 如果设备未初始化，重定向到初始化页面
    next('/Init')
  } else {
    if (to.path !== '/manage/main') {
      systemStore.setFlagFrontManageFlag(false)
    }

    if (to.path === '/manage/login') {
      checkFrontManageLoginRedirect(to, from, next)
    } else if (to.path === '/manage/main') {
      checkFrontManageMainRedirect(to, from, next)
    } else {
      next()
    }
  }
}

// 全局前置守卫
router.beforeEach((to, from, next) => {
  if (to.path.indexOf('testpage') > -1) {
    next()
  } else {
    // 检查设备初始化
    checkDeviceInit(to, from, next)
  }
})

export default router

 

src/views/biz-basic/router.ts

import { createRouter, createWebHistory } from 'vue-router'
const routes = [
  // 测试页面
  {
    path: '/testpage',
    name: 'testpage',
    component: () => import('@/views/test-page/index.vue')
  },
  // 前台管理页面

  //基础页面(推荐按名称排序)|start
  {
    path: '/Init',
    name: 'Init',
    component: () => import('@/views/biz-basic/base-page/Init.vue')
  },
  {
    path: '/Main',
    name: 'Main',
    component: () => import('@/views/biz-basic/base-page/Main.vue')
  },
  //基础页面(推荐按名称排序)|end

  //基础页面(推荐按名称排序)|start
  //基础页面(推荐按名称排序)|end

  // 默认页面
  {
    path: '/',
    redirect: '/Init'
  },
  // 404页面
  {
    path: '/:catchAll(.*)',
    name: '404',
    component: () => import('@/views/biz-basic/base-page/404.vue')
  }
]

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes
})

export default router

 

vue

 

src/App.vue

<script setup lang="ts">
import MainPage from '@/views/main-page/main-page.vue'
</script>

<template>
  <MainPage />
</template>

<style scoped></style>

src/views/main-page/main-page.vue

<script setup lang="ts">
import Master from '@/views/master/master-basic.vue'
</script>

<template>
  <Master />
</template>

<style scoped></style>

src/views/master/master-basic.vue

<script setup lang="ts">
import Business from '@/views/biz-basic/business.vue'
</script>

<template>
  <Business />
</template>

<style scoped></style>

src/views/biz-basic/business.vue

<script setup lang="ts"></script>

<template>
  <router-view v-slot="{ Component }">
    <!-- 使用 keep-alive 包裹并设置 key 为当前路由的 fullPath -->
    <keep-alive :key="$route.fullPath">
      <component :is="Component" />
    </keep-alive>
  </router-view>
</template>

<style scoped></style>

 

翻译

搜索

复制