指导手册：左侧树更改
This commit is contained in:
parent
de1868eb5c
commit
310a5f837d
|
|
@ -2,7 +2,7 @@
|
|||
<div class="list-box">
|
||||
<div class="list-item" v-for="(item, i) in newDataList" :key="i" @click.stop="showChildren(item)">
|
||||
<a-tooltip placement="top" :title="item.title" arrow-point-at-center>
|
||||
<div :class="[clickData.title === item.title && item.isSelect ? 'select' : '', level === 1 ? 'parent' : '', judgeLeaf(item) ? 'leaf' : '']"
|
||||
<div :class="[newClickData.title === item.title ? 'select' : '', level === 1 ? 'parent' : '', judgeLeaf(item) ? 'leaf' : '']"
|
||||
class="list-text">
|
||||
{{ item.title }}
|
||||
<DownOutlined v-show="!item.show && !judgeLeaf(item)" />
|
||||
|
|
@ -28,10 +28,6 @@ const props = defineProps({
|
|||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
selectName: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
level: {
|
||||
type: Number,
|
||||
default: 1
|
||||
|
|
@ -59,15 +55,13 @@ const judgeLeaf = (item) => {
|
|||
}
|
||||
|
||||
const showChildren = (item) => {
|
||||
if (!item.children) {
|
||||
if (!(item.children && item.children.length > 0)) {
|
||||
if (newClickData.value.title !== '') {
|
||||
handleTreeItem(item)
|
||||
} else {
|
||||
handleTreeItem({ title: '' })
|
||||
}
|
||||
item.isSelect = !item.isSelect;
|
||||
}
|
||||
|
||||
if (item.children && item.children.length > 0) {
|
||||
item.show = !item.show;
|
||||
}
|
||||
|
|
@ -113,33 +107,31 @@ const handleTreeItem = (item) => {
|
|||
|
||||
&:hover {
|
||||
color: #0058e1;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.normal {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.parent {
|
||||
margin-bottom: 10px;
|
||||
background: rgba(0, 135, 225, 0.1);
|
||||
color: #333;
|
||||
|
||||
// margin-bottom: 10px;
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
background: #0058e1;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.leaf {
|
||||
font-size: 14px;
|
||||
color: #555;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.select {
|
||||
color: #0058e1;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
<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' : '' }">
|
||||
|
|
@ -11,13 +12,18 @@
|
|||
<abilityDocTree :dataList="treeArray" @treeClick="treeClick" :clickData="clickData"></abilityDocTree>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div v-if="titleData.name === '新手指引'">新手指引</div>
|
||||
<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>
|
||||
|
|
@ -26,6 +32,7 @@ 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([
|
||||
{
|
||||
|
|
@ -39,12 +46,13 @@ const titleList = ref([
|
|||
])
|
||||
const titleData = ref(titleList.value[0])
|
||||
const clickData = ref({})
|
||||
let typeList = ['组件服务', '应用资源', '基础设施', '数据资源', '知识库'];
|
||||
const treeArray = ref([])
|
||||
const treeArrayCopy = ref([])
|
||||
let typeList = ['组件服务', '应用资源', '基础设施', '数据资源', '知识库'];
|
||||
|
||||
const treeClick = (item) => {
|
||||
console.log('item---treeClick--------->', item);
|
||||
clickData.value = item;
|
||||
console.log('clickData------------>', item);
|
||||
titleData.value = titleList.value[1]
|
||||
}
|
||||
|
||||
|
|
@ -55,13 +63,56 @@ const getTreeData = () => {
|
|||
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
|
||||
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(() => {
|
||||
|
|
@ -69,18 +120,6 @@ onMounted(() => {
|
|||
})
|
||||
|
||||
|
||||
watch(
|
||||
() => clickData.value,
|
||||
(val) => {
|
||||
if (val) {
|
||||
console.log('val-watch---clickData-------->', val);
|
||||
}
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
}
|
||||
)
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
|
|
@ -103,21 +142,12 @@ watch(
|
|||
}
|
||||
|
||||
.content-menu {
|
||||
// width: 1240px;
|
||||
// display: flex;
|
||||
// justify-content: flex-start;
|
||||
// margin: 0 auto;
|
||||
// margin-top: 74px;
|
||||
// box-sizing: border-box;
|
||||
// position: relative;
|
||||
|
||||
width: 1240px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
margin: 0 auto;
|
||||
margin-top: 74px;
|
||||
box-sizing: border-box;
|
||||
/* height: calc(100vh - 306px); */
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
|
|
@ -132,14 +162,14 @@ watch(
|
|||
height: 600px;
|
||||
margin-right: 20px;
|
||||
background: rgba(244, 245, 248, 0.8);
|
||||
overflow-y: auto;
|
||||
overflow-y: scroll;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.right {
|
||||
width: 880px;
|
||||
width: 870px;
|
||||
height: calc(100% - 20px);
|
||||
|
||||
position: absolute;
|
||||
|
|
@ -172,59 +202,16 @@ watch(
|
|||
background-size: 100%;
|
||||
}
|
||||
|
||||
#iframeId {
|
||||
// ::-webkit-scrollbar {
|
||||
// width: 6px;
|
||||
// height: 6px;
|
||||
// background-color: rgb(255, 255, 255);
|
||||
// }
|
||||
|
||||
// ::-webkit-scrollbar-thumb {
|
||||
// border-radius: 10px;
|
||||
// background-color: rgb(200, 204, 209);
|
||||
// }
|
||||
|
||||
/* 设置滚动条的样式 */
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
// width: 2px;
|
||||
// height: 2px;
|
||||
// height: 67px;
|
||||
.new-menu-box {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
::scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
// width: 2px;
|
||||
// height: 2px;
|
||||
// height: 67px;
|
||||
}
|
||||
|
||||
/* 滚动槽 */
|
||||
::-webkit-scrollbar-track {
|
||||
display: none;
|
||||
// -webkit-box-shadow: inset 0 0 3px #b18933;
|
||||
// border-radius: 1px;
|
||||
}
|
||||
|
||||
::scrollbar-track {
|
||||
display: none;
|
||||
// -webkit-box-shadow: inset 0 0 3px #98f165;
|
||||
// border-radius: 1px;
|
||||
}
|
||||
|
||||
/* 滚动条滑块 */
|
||||
::-webkit-scrollbar-thumb {
|
||||
border-radius: 10px;
|
||||
background: #006666;
|
||||
-webkit-box-shadow: inset 0 0 1px #006666;
|
||||
}
|
||||
|
||||
::scrollbar-thumb {
|
||||
border-radius: 10px;
|
||||
background: #006666;
|
||||
-webkit-box-shadow: inset 0 0 1px #006666;
|
||||
}
|
||||
.rela {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue