fix：指导手册
This commit is contained in:
parent
8acde6c897
commit
dfbdbb5a46
|
|
@ -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;
|
||||
} else {
|
||||
newSelectName.value = ''
|
||||
if (props.clickData.title !== '') {
|
||||
handleTreeItem(item)
|
||||
}else {
|
||||
handleTreeItem({title: ''})
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
if (item.children && item.children.length > 0) {
|
||||
item.show = !item.show;
|
||||
}
|
||||
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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue