ylrz_his_scrm_adminUI/src/views/index.vue

<template>
  <div class="app-container">
    <!-- 有权限时显示统计仪表板 -->
    <statistics-dashboard v-if="hasDashboardPermission && !loading" />

    <!-- 无权限时显示欢迎页面 -->
    <welcome-page v-else-if="!hasDashboardPermission && !loading" />

    <!-- 加载状态 -->
    <div v-else class="loading-container">
      <el-skeleton animated>
        <template #template>
          <el-skeleton-item variant="image" style="width: 100%; height: 400px;" />
        </template>
      </el-skeleton>
    </div>
  </div>
</template>

<script>
// 异步加载组件
const StatisticsDashboard = () => import('./components/index/statisticsDashboard')
const WelcomePage = () => import('./components/index/welcomePage')

export default {
  name: 'Index',
  components: {
    StatisticsDashboard,
    WelcomePage
  },
  data() {
    return {
      hasDashboardPermission: false,
      loading: true
    }
  },
  created() {
    this.checkDashboardPermission()
  },
  methods: {
    checkDashboardPermission() {

      // 方式2: 检查用户权限
      if (this.hasPermi(['his:index'])) {
        this.hasDashboardPermission = true
      }
      // 方式3: 检查用户角色
      else if (this.hasRole(['admin'])) {
        this.hasDashboardPermission = true
      }

      this.loading = false
    },

    // 使用若依的权限检查方法
    hasPermi(permissions) {
      return this.$store.state.user.permissions.some(permission => {
        return permissions.includes(permission)
      })
    },

    // 使用若依的角色检查方法
    hasRole(roles) {
      return this.$store.state.user.roles.some(role => {
        return roles.includes(role)
      })
    }
  }
}
</script>

<style scoped>
.app-container {
  min-height: calc(100vh - 84px);
}

.loading-container {
  padding: 20px;
}
</style>