hi-ucs/front/src/views/detailsAll/components/Application/ApplicationNavigation.vue

<!--
 * @Author: hisense.liangjunhua
 * @Date: 2022-06-08 14:54:01
 * @LastEditors: hisense.liangjunhua
 * @LastEditTime: 2022-06-15 18:24:39
 * @Description: 应用详情页导航
-->
<template>
  <div class="application-navigation" v-if="navList.length > 0">
    <template v-for="nav in navList" :key="nav.key">
      <div class="nav" :class="{ select: nav.key == select }" v-if="nav.show" @click="selectNav(nav.key)">
        {{ nav.name }}
        <span class="line"></span>
      </div>
    </template>
  </div>
</template>
<script setup>
import { ref, defineProps, watch } from 'vue'
import mybus from '@/myplugins/mybus'
import { useRouter } from 'vue-router'
import { queryPartAppByKeyId } from '@/api/home'
// 获取当前路由地址
const router = useRouter()
const keyId = router.currentRoute.value.query.id
const navList = ref([
  {
    name: '应用展示',
    key: 'application-presentation',
  },
  {
    name: '功能介绍',
    key: 'function-introduction',
  },
  {
    name: '使用能力',
    key: 'ability-to-use',
  },
  {
    name: '部署与安全',
    key: 'deployment-and-security',
  },
  {
    name: '归属部门与服务商',
    key: 'department-and-service-provider',
  },
  {
    name: '常见问题',
    key: 'common-problem',
  },
])
const props = defineProps({
  selectNow: { type: String, default: '' },
  dataList: { type: Object, default: null },
  associatedComponents: { type: Array, default: null },
})
const select = ref('application-associated-ability')
const list = ref([])
// 根据能力id查询是否存在关联应用
if (keyId) {
  let params = {
    keyId: keyId,
    type: '组件服务',
  }
  queryPartAppByKeyId(params).then((res) => {
    console.log('ressssssss', res)
    if (res.data.data.length != 0) {
      // 存在关联应用时在导航栏加入关联应用
      navList.value.unshift({
        name: '关联组件',
        key: 'application-associated-ability',
        show: true,
      })
      list.value.unshift('关联组件')
    }
  })
}
const selectNav = (key) => {
  select.value = key
  mybus.emit('flyToView', select.value)
}
if (props.dataList.infoList) {
  list.value = []
  props.dataList.infoList.map((item) => {
    if (
      item.attrType === '功能介绍' ||
      item.attrType === '常见问题' ||
      item.attrType === '使用能力' ||
      item.attrType === '关联组件'
    ) {
      list.value.push(item.attrType)
    } else if (item.attrType === '应用展示视频') {
      list.value.push('应用展示')
    }
  })
  list.value.unshift('关联组件')
  list.value.push('部署与安全')
  list.value.push('归属部门与服务商')
  navList.value.forEach((item) => {
    console.log(item)
    if (list.value.indexOf(item.name) > -1) {
      item.show = true
    }
  })
  if (list.value.length > 0) {
    if (navList.value.filter((item) => item.name === list.value[0])[0]) {
      select.value = navList.value.filter(
        (item) => (item.name === '关联组件') | (item.name === list.value[0])
      )[0].key
    }
  }
  console.log('11111111111111111111111111', list.value, navList.value)
}
watch(
  () => props.selectNow,
  (newValue) => {
    select.value = newValue
  }
)
watch(
  () => props.dataList,
  (val) => {
    if (val) {
      list.value = []
      val.infoList.map((item) => {
        if (
          item.attrType === '功能介绍' ||
          item.attrType === '常见问题' ||
          item.attrType === '使用能力' ||
          item.attrType === '关联组件'
        ) {
          list.value.push(item.attrType)
        } else if (item.attrType === '应用展示视频') {
          list.value.push('应用展示')
        }
      })
      list.value.unshift('关联组件')
      list.value.push('部署与安全')
      list.value.push('归属部门与服务商')
      navList.value.forEach((item) => {
        console.log(item)
        if (list.value.indexOf(item.name) > -1) {
          item.show = true
        }
      })
      if (list.value.length > 0) {
        if (navList.value.filter((item) => item.name === list.value[0])[0]) {
          select.value = navList.value.filter(
            (item) =>
              (item.name === '关联组件') | (item.name === list.value[0])
          )[0].key
        }
      }
      console.log('11111111111111111111111111', list.value, navList.value)
    }
  }
)
</script>
<style lang="less" scoped>
.application-navigation {
  width: 19.12rem;
  height: 0.84rem;
  line-height: 0.8rem;
  display: flex;
  justify-content: space-around;
  font-size: 0.24rem;
  color: #666;
  background: #fff;
  padding: 0 3rem;
  box-shadow: 0rem 0.05rem 0.1rem #f2f3fb;
  position: relative;

  .nav {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

    .line {
      width: 0.4rem;
      height: 0.04rem;
    }
  }

  .select {
    color: #526aff;

    .line {
      background: #526aff;
    }
  }
}
</style>