From 310a5f837dd94e9beace9d745810ffd21eeae536 Mon Sep 17 00:00:00 2001 From: guoyue Date: Thu, 14 Jul 2022 14:16:49 +0800 Subject: [PATCH] =?UTF-8?q?=E6=8C=87=E5=AF=BC=E6=89=8B=E5=86=8C=EF=BC=9A?= =?UTF-8?q?=E5=B7=A6=E4=BE=A7=E6=A0=91=E6=9B=B4=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/abilityDocTree.vue | 20 +-- front/src/views/instructionManual/index.vue | 169 ++++++++---------- 2 files changed, 84 insertions(+), 105 deletions(-) diff --git a/front/src/views/instructionManual/components/abilityDocTree.vue b/front/src/views/instructionManual/components/abilityDocTree.vue index 45b5b671..9bd66da0 100644 --- a/front/src/views/instructionManual/components/abilityDocTree.vue +++ b/front/src/views/instructionManual/components/abilityDocTree.vue @@ -2,7 +2,7 @@
-
{{ item.title }} @@ -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; } diff --git a/front/src/views/instructionManual/index.vue b/front/src/views/instructionManual/index.vue index a26dd1f7..51c099b2 100644 --- a/front/src/views/instructionManual/index.vue +++ b/front/src/views/instructionManual/index.vue @@ -2,21 +2,27 @@
-
-
-
- {{ data.name }} +
+
+
+
+ {{ data.name }} +
+
- -
-
-
新手指引
-
- +
+
+ + +
+
+ +
+
@@ -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, - } -) -