cxyy-admin/src/views/information/parts/platform.vue

<template>
  <el-row>
    <el-col :span="2">
      <el-link type="primary" :icon="BackIcon" @click="toBack">{{ title }}</el-link>
    </el-col>
    <el-col :span="22">
      <el-segmented v-model="value" :options="options" @change="viewChange" block>
        <template #default="{ item }"> {{ item.label }} </template>
      </el-segmented>
    </el-col>
  </el-row>
  <el-divider />
  <el-row>
    <el-col :span="24">
      <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 { Back as BackIcon } from '@element-plus/icons-vue'
import { get } from 'lodash-es'
import { defineAsyncComponent } from 'vue'
const props = defineProps({
  title: { type: String }, // 当前视图选中的上级
  parentName: { type: String } // 当前视图上级的组件名
})
const emits = defineEmits(['back'])
const value = ref()
const viewComponent = ref()
const componentList = ref({
  supply: defineAsyncComponent(() => import('./platform/supply.vue')),
  demand: defineAsyncComponent(() => import('./platform/demand.vue')),
  achievement: defineAsyncComponent(() => import('./platform/achievement.vue')),
  match: defineAsyncComponent(() => import('./platform/match.vue')),
  project: defineAsyncComponent(() => import('./platform/project.vue')),
  footplate: defineAsyncComponent(() => import('./platform/footplate.vue')),
  support: defineAsyncComponent(() => import('./platform/support.vue'))
})
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 pagesChildren = get(thisRouteConfig, 'children', [])
// 找子页面中的children
const thisComponent = pagesChildren.find((f) => f.component === props.parentName)
const children = get(thisComponent, '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
}
const toBack = () => {
  emits('back')
}
</script>
<style scoped></style>