hi-ucs/front/src/views/instructionManual/index.vue

<template>
  <div class="menu-box">
    <home-header></home-header>
    <div id="container" class="content-menu">
      <div class="rela">
        <div class="left">
          <div
            class="first-title-text"
            v-for="(data, i) in titleList"
            :key="i"
            @click="changeName(data)"
            :style="{ color: data.name === titleData.name ? '#0058e1' : '' }"
          >
            <div class="img" :class="data.className"></div>
            {{ data.name }}
          </div>
          <abilityDocTree
            :dataList="treeArray"
            @treeClick="treeClick"
            :clickData="clickData"
          ></abilityDocTree>
        </div>
        <div class="right">
          <div
            class="new-menu-box"
            style="height: 100%"
            v-if="titleData.name === '新手指引'"
          >
            <!-- 新手指引 -->
            <a-empty description="新手指引" />
          </div>
          <div v-else style="height: 100%">
            <iframe
              name="iframeName"
              width="1000"
              height="100%"
              id="iframeId"
              :frameborder="0"
              :src="clickData.doc"
            ></iframe>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
  import HomeHeader from '@/views/home/components/header'
  import abilityDocTree from './components/abilityDocTree'
  import { ref, reactive, onMounted, nextTick, watch } from 'vue'
  import { Empty, message } from 'ant-design-vue'
  import { getDevelopDocTree } from '@/api/home'
  import flatten from '@turf/flatten'

  const titleList = ref([
    {
      name: '新手指引',
      className: 'newGuide',
    },
    {
      name: '技术文档',
      className: 'doc',
    },
  ])
  const titleData = ref(titleList.value[0])
  const clickData = ref({})
  const treeArray = ref([])
  const treeArrayCopy = ref([])
  let typeList = ['组件服务', '应用资源', '基础设施', '数据资源', '知识库']

  const treeClick = (item) => {
    clickData.value = item
    console.log('clickData------------>', item)
    titleData.value = titleList.value[1]
  }

  const getTreeData = () => {
    getDevelopDocTree({})
      .then((res) => {
        console.log('res------文档树------>', res)
        if (res.data.code !== 0) {
          return message.error(res.data.msg)
        }
        treeArray.value = res.data.data || []
        treeArrayCopy.value = JSON.parse(JSON.stringify(treeArray.value))
      })
      .catch((err) => {
        message.error(err)
      })
  }

  const changeName = (item) => {
    titleData.value = item
    if (item.name == '新手指引') {
      clickData.value = {}
    }
    if (item.name == '技术文档') {
      if (!clickData.value.title) {
        clickData.value = {}
        treeArray.value = []
        treeArrayCopy.value.map((val, i) => {
          let obj = Object.assign({}, val, {
            title: val.title,
            show:
              (i === 0 && val.children && val.children.length > 0) ||
              typeList.includes(val.title)
                ? true
                : false,
            children: [],
          })
          formData(val.children, obj)
          treeArray.value.push(obj)
        })
        getFirstData(treeArrayCopy.value[0] || {})
      }
    }
  }

  const formData = (children = [], dataItem) => {
    children.map((item, index) => {
      let _obj = Object.assign({}, item, {
        title: item.title,
        show:
          (index === 0 && item.children && item.children.length > 0) ||
          typeList.includes(item.title)
            ? true
            : false,
        children: [],
      })
      if (item.children && item.children.length > 0) {
        formData(item.children, _obj)
      }
      dataItem.children.push(_obj)
    })
  }

  const getFirstData = (firstObj = {}) => {
    if (firstObj && firstObj.children && firstObj.children.length > 0) {
      getFirstData(firstObj.children[0])
    } else {
      clickData.value = firstObj
    }
  }

  onMounted(() => {
    getTreeData()
  })
</script>

<style scoped lang="less">
  .menu-box {
    // overflow: hidden;
    height: 100%;
  }

  .first-title-text {
    cursor: pointer;
    font-size: 18px;
    color: #333;
    padding-bottom: 10px;
    display: flex;
    align-items: center;

    &:hover {
      color: #0058e1;
    }
  }

  .content-menu {
    width: 1240px;
    display: flex;
    justify-content: flex-start;
    margin: 0 auto;
    margin-top: 74px;
    box-sizing: border-box;
    position: fixed;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    top: 0.6rem;
    top: 0;
  }

  .left {
    width: 240px;
    padding: 20px;
    height: 600px;
    margin-right: 20px;
    background: rgba(244, 245, 248, 0.8);
    overflow-y: scroll;
    position: absolute;
    top: 10px;
    left: 0;
  }

  .right {
    width: 870px;
    height: calc(100% - 20px);

    position: absolute;
    top: 10px;
    left: 260px;
  }

  .sidebar {
    right: 0 !important;
  }

  .content {
    right: 16rem !important;
    left: 0 !important;
  }

  .img {
    height: 20px;
    width: 20px;
    margin-right: 8px;
  }

  .doc {
    background: url('~@/assets/capabilityCloud/doc.png') no-repeat;
    background-size: 100%;
  }

  .newGuide {
    background: url('~@/assets/capabilityCloud/newGuide.png') no-repeat;
    background-size: 100%;
  }

  .new-menu-box {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .rela {
    width: 100%;
    height: 100%;
    position: relative;
  }
</style>