fix：指导手册

front/src/views/instructionManual/components/abilityDocTree.vue

@@ -1,19 +1,22 @@
 <template>
     <div class="list-box">
         <div class="list-item" v-for="(item, i) in newDataList" :key="i" @click.stop="showChildren(item)">
-            <div :class="[selectName === item.title ? 'select' : '', level === 1 ? 'parent' : '']" class="list-text">
-                {{ item.title }}{{ item.show }}
+            <div :class="[clickData.title === item.title ? 'select' : '', level === 1 ? 'parent' : '']"
+                class="list-text">
+                {{ item.title }}
                 <DownOutlined v-show="!item.show && item.children && item.children.length > 0" />
                 <UpOutlined v-show="item.show && item.children && item.children.length > 0" />
             </div>
             <div style="margin-left:10px" v-if="item.children && item.children.length > 0 && item.show">
-                <showList :dataList="item.children" @tree-click="handleTreeItem" :level="newLevel + 1"></showList>
+                <abilityDocTree :dataList="item.children" @tree-click="handleTreeItem" :clickData="clickData"
+                    :level="newLevel + 1">
+                </abilityDocTree>
             </div>
         </div>
     </div>
 </template>
 <script setup>
-import { defineComponent, onMounted, ref, watch, defineProps, nextTick, emit } from 'vue';
+import { defineComponent, onMounted, ref, watch, defineProps, nextTick } from 'vue';
 import { getDevelopDocTree } from '@/api/home'
 import { message } from 'ant-design-vue'
 import { UpOutlined, DownOutlined } from '@ant-design/icons-vue'
@@ -31,14 +34,16 @@ const props = defineProps({
         type: Number,
         default: 1
     },
-    // level
+    clickData: {
+        type: Object,
+        default: () => { title: '' }
+    },
 })
-// props.dataList.map(v => v.show = false)
 
+// 数组
 const newDataList = ref(props.dataList)
 // 级别
 const newLevel = ref(props.level)
-const newSelectName = ref(props.selectName)
 
 const getBgColor = (item, level) => {
     // if(level === 1) {
@@ -50,44 +55,33 @@ const getBgColor = (item, level) => {
     // }
 }
 
-nextTick(() => {
-    console.log('props.dataList------------>', props.dataList);
-    console.log('props.selectName------------>', props.selectName);
-
-})
-
 const showChildren = (item) => {
     console.log('item------------>', item);
     if (!item.children) {
-        if (newSelectName.value !== item.title) {
-            newSelectName.value = item.title;
+        if (props.clickData.title !== '') {
+            handleTreeItem(item)
         }else {
-            newSelectName.value = ''
+             handleTreeItem({title: ''})
         }
+
     }
+
+    if (item.children && item.children.length > 0) {
         item.show = !item.show;
-    nextTick(() => {
-        console.log('newSelectName.value------------>', newSelectName.value);
-    })
+    }
 }
 
-// const handleSelelct = (item) => {
-//     if(item.children) {
-
+// watch(
+//     () => props.dataList,
+//     (val) => {
+//         if (val) {
+//             props.dataList = val;
+//             newDataList.value = val
 //         }
 //     }
+// )
 
-watch(
-    () => props.dataList,
-    (val) => {
-        if (val) {
-            props.dataList = val;
-            newDataList.value = val
-        }
-    }
-)
-
-
+const emit = defineEmits(['treeClick'])
 const handleTreeItem = (item) => {
     emit('tree-click', item);
 }
@@ -98,6 +92,13 @@ const handleTreeItem = (item) => {
     font-size: 16px;
     color: #333;
     padding: 10px 0;
+    cursor: pointer;
+    padding-left: 10px;
+    border-bottom: 1px solid #ccc;
+
+    &:hover {
+        color: #0058e1;
+    }
 }
 
 .select {
@@ -110,6 +111,13 @@ const handleTreeItem = (item) => {
 }
 
 .parent {
-    background: #0058e1;
+    margin-bottom: 10px;
+    // background: #0058e1;
+    // color: #fff;
+    // margin-bottom: 10px;
+
+    // &:hover {
+    //     color: #fff;
+    // }
 }
 </style>

front/src/views/instructionManual/components/abilityTree.vue

@@ -1,149 +0,0 @@
-<template>
-  <div class="doc-tree-box">
-    <!-- <div class="name-text primaryNode" v-for="(item, i) in treeData" :key="i" @click.stop="showBottom(item)"
-      :class="selectId === item.title ? 'select' : ''">
-      {{ item.title }}
-      <DownOutlined v-show="!item.show && item.children && item.children.length > 0" />
-      <UpOutlined v-show="item.show && item.children && item.children.length > 0" />
-
-      <div style="margin-left:20px" v-if="item.show && item.children && item.children.length > 0">
-        <div class="name-text" v-for="(val, j) in item.children" :key="j" @click.stop="showBottom(val)"
-          @click="showDown(item, val), onSelect(item, val)" :class="selectId === val.key ? 'select' : ''">
-          {{
-              val.title
-          }}
-          <DownOutlined v-show="!val.show && val.children && val.children.length > 0" />
-          <UpOutlined v-show="val.show && val.children && val.children.length > 0" />
-
-          <div style="margin-left:20px" v-if="val.show && val.children && val.children.length > 0">
-            <div class="name-text" v-for="(v, k) in val.children" :key="k" @click.stop="onSelect(item, val, v)"
-              :class="selectId == v.key ? 'select2' : ''">
-              {{
-                  v.title
-              }}
-              <DownOutlined v-show="!v.show && v.children && v.children.length > 0" />
-              <UpOutlined v-show="v.show && v.children && v.children.length > 0" />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div> -->
-
-    <showList :dataList="treeArray" @treeClick="treeClick"></showList>
-
-  </div>
-</template>
-<script setup>
-import { defineComponent, onMounted, ref, watch, nextTick, defineEmits } from 'vue';
-import { getDevelopDocTree } from '@/api/home'
-import { message } from 'ant-design-vue'
-import showList from './showList'
-import { UpOutlined, DownOutlined } from '@ant-design/icons-vue'
-
-let typeList = ['组件服务', '应用资源', '基础设施', '数据资源', '知识库'];
-const treeData = ref([]);
-const treeArray = ref([])
-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 || [];
-
-    treeData.value = [];
-    (res.data.data || []).map(val => {
-      let obj = {
-        title: val.title,
-        show: typeList.find(v => v === val.title) ? true : false,
-        select: false,
-        key: val.title,
-        children: []
-      }
-      formData(val.children, obj)
-      treeData.value.push(obj)
-    })
-    nextTick(() => {
-      console.log('treeData.value------------>', treeData.value);
-    })
-  }).catch((err) => {
-    console.log('err------------>', err);
-    message.error(err)
-  });
-}
-
-const formData = (children = [], dataItem) => {
-  children.map(item => {
-    let _obj = {
-      title: item.title,
-      show: false,
-      select: false,
-      key: item.title,
-      children: [],
-    }
-    if (item.children && item.children.length > 0) {
-      formData(item.children, _obj)
-    }
-    dataItem.children.push(_obj)
-  })
-}
-
-const emit = defineEmits(['treeClick'])
-const selectId = ref('')
-const showBottom = (item) => {
-  console.log('item------------>', item);
-  if (!item.children) {
-    if (selectId.value !== item.title) {
-      selectId.value = item.title;
-    } else {
-      selectId.value = ''
-    }
-  }
-  item.show = !item.show;
-  nextTick(() => {
-    console.log('selectId.value------------>', selectId.value);
-    if (selectId.value !== '') {
-      emit('treeClick', item)
-    }
-  })
-}
-
-// const showBottom = (item) => {
-//   item.show = !item.show
-// }
-const showDown = (item, val) => {
-  console.log('showDown', val)
-  if (item.title === '区级') {
-    val.show = !val.show
-  }
-}
-
-
-onMounted(() => {
-  getTreeData()
-})
-
-
-</script>
-<style lang="less" scoped>
-.doc-tree-box {
-  margin-left: 20px;
-
-}
-
-.name-text {
-  font-size: 16px;
-  color: #333;
-  padding: 10px 0;
-  cursor: pointer;
-}
-
-.select {
-  color: #0058e1;
-  font-weight: 600;
-}
-
-.normal {
-  color: #333;
-}
-</style>

front/src/views/instructionManual/index.vue

@@ -3,9 +3,12 @@
     <home-header></home-header>
     <div id="container" class="content">
       <div class="left">
-        <h2 class="title-text" @click="showManual" :style="{ color: showManualFlag ? '#0058e1' : '' }">新手指引</h2>
-        <h2 class="title-text" @click="showManual" :style="{ color: !showManualFlag ? '#0058e1' : '' }">技术文档</h2>
-        <abilityTree @treeClick="treeClick"></abilityTree>
+        <div class="first-title-text" @click="showManual" :style="{ color: showManualFlag ? '#0058e1' : '' }">新手指引</div>
+        <div class="first-title-text" @click="showManual" :style="{ color: !showManualFlag ? '#0058e1' : '' }">技术文档
+        </div>
+        <abilityDocTree :dataList="treeArray" @treeClick="treeClick" :clickData="clickData"></abilityDocTree>
+        <abilityDocTree :dataList="tempData" @treeClick="treeClick" :clickData="clickData"></abilityDocTree>
+        <!-- tempData -->
       </div>
       <div class="right">
         <div v-if="showManualFlag">新手指引</div>
@@ -19,34 +22,113 @@
 </template>
 <script setup>
 import HomeHeader from '@/views/home/components/header'
-import abilityTree from './components/abilityTree'
 import docsifyView from './components/docsifyView'
+import abilityDocTree from './components/abilityDocTree'
 import { getMyProcessInstancePage, wodepage } from '@/api/personalCenter'
 import { selectOne } from '@/api/home'
-import { ref, reactive, onMounted } from 'vue'
+import { ref, reactive, onMounted, nextTick } from 'vue'
 import { useStore } from 'vuex'
-import { useRouter } from 'vue-router'
-import { pinyin } from 'pinyin-pro'
-import { Empty } from 'ant-design-vue'
+import { Empty, message } from 'ant-design-vue'
+import { getDevelopDocTree } from '@/api/home'
 
 const showManualFlag = ref(true)
 const showManual = () => {
   showManualFlag.value = !showManualFlag.value
 }
+
+const clickData = ref({})
 const treeClick = (item) => {
   console.log('item---treeClick--------->', item);
+  clickData.value = item;
 }
+let typeList = ['组件服务', '应用资源', '基础设施', '数据资源', '知识库'];
+
+const tempData = ref([
+  {
+    title: '应用资源--假数据',
+    children: [
+      {
+        title: '能力11--假数据',
+      },
+      {
+        title: '能力1122',
+      },
+      {
+        title: '能力1133',
+      },
+      {
+        title: '能力1144',
+      },
+    ]
+  }, {
+    title: '组件服务--假数据',
+    children: [
+      {
+        title: '算法优势--假数据',
+        children: [
+          {
+            title: '算法优势11',
+          },
+          {
+            title: '算法优势1122',
+          },
+          {
+            title: '算法优势1133',
+          },
+          {
+            title: '算法优势1144',
+          },
+        ]
+      },
+      {
+        title: '社会治安'
+      },
+    ],
+
+  }
+])
+const treeData = ref([]);
+// const treeArray = ref(data)
+
+const treeArray = ref([])
+const getTreeData = () => {
+  getDevelopDocTree({}).then((res) => {
+    console.log('res------文档树------>', res);
+    if (res.data.code !== 0) {
+      console.log('222------------>', 222);
+
+      treeArray.value = tempData;
+      nextTick(() => {
+        console.log('treeArray.value------------>', treeArray.value);
+
+      })
+      return message.error(res.data.msg)
+    }
+    treeArray.value = res.data.data || [];
+  }).catch((err) => {
+    console.log('err------------>', err);
+    message.error(err)
+  });
+}
+
+onMounted(() => {
+  getTreeData()
+})
+
+
 </script>
+
 <style scoped lang="less">
 .father {
   // overflow: hidden;
   height: 100%;
 }
 
-.title-text {
+.first-title-text {
   cursor: pointer;
-  font-size: 16px;
+  font-size: 18px;
   color: #333;
+  padding-bottom: 10px;
 
   &:hover {
     color: #0058e1;
@@ -63,13 +145,14 @@ const treeClick = (item) => {
 
 .left {
   width: 240px;
-  height: 400px;
+  padding: 20px;
+  height: 600px;
   margin-right: 20px;
   background: rgba(244, 245, 248, 0.8);
+  overflow-y: auto;
 }
 
 .right {
   width: 880px;
-  // height: calc(100vh - 84px);
 }
 </style>