cxyy-admin/src/views/system/index.vue

<template>
  <el-row>
    <el-col :span="24">
      <el-segmented v-model="value" :options="options" @change="viewChange" block>
        <template #default="{ item }"> {{ item.label }} </template>
      </el-segmented>
      <el-divider />
      <template v-if="!value">
        <el-alert title="请在上方选择您要查看的数据" type="warning" effect="dark" :closable="false" />
      </template>
      <template v-else>
        <component :is="viewComponent"></component>
      </template>
    </el-col>
  </el-row>
</template>

<script setup>
import { get } from 'lodash-es'
import { defineAsyncComponent } from 'vue'
const componentList = ref({
  'admin-menus': defineAsyncComponent(() => import('./parts/admin-menus.vue')),
  'user-menus': defineAsyncComponent(() => import('./parts/user-menus.vue')),
  dict: defineAsyncComponent(() => import('./parts/dict.vue')),
  region: defineAsyncComponent(() => import('./parts/region.vue')),
  'system-func': defineAsyncComponent(() => import('./parts/system-func.vue')),
})
const value = ref()
const viewComponent = ref()
/**
 * 子页面设置
 * @param label 子页面名称
 * @param value 子页面id
 * @param component 子页面文件名,需要与代码中的页面对应,上面componentList设置的key
 */
const route = useRoute()
const path = get(route, 'path')
import { UserStore } from '@/store/user'
const userStore = UserStore()
const menus = userStore.menus
const thisRouteConfig = menus.find((f) => f.path === path)
const children = get(thisRouteConfig, 'children', [])
const options = children.map((i) => {
  const obj = {
    label: get(i, 'name'),
    value: get(i, 'id'),
    component: get(i, 'component')
  }
  return obj
})

const viewChange = (val) => {
  const i = options.find((f) => f.value === val)
  if (!i) return
  const componentName = get(i, 'component')
  if (!componentName) return
  const component = componentList.value[componentName]
  if (!component) return
  viewComponent.value = component
}
</script>
<style scoped></style>