305 lines
7.4 KiB
Vue
Executable File
305 lines
7.4 KiB
Vue
Executable File
<script setup lang="ts">
|
|
import { RouterView } from 'vue-router'
|
|
import { useUserStore } from '@/stores/modules/user'
|
|
import { treeDbList, download } from '@/api/daikin/base'
|
|
import { databaseld } from '@/stores/modules/database'
|
|
import { NPopover } from 'naive-ui'
|
|
|
|
const { push } = useRouter()
|
|
const route = useRoute()
|
|
const store = useUserStore()
|
|
const database = databaseld()
|
|
const { toggle } = inject<any>('fullscreen')
|
|
const activeMenuKey = ref()
|
|
let idx = ref(0)
|
|
const onClic = ref(false)
|
|
const titles = ref()
|
|
function menuHandler(menu: any, index: number) {
|
|
console.log(menu, index)
|
|
activeMenuKey.value = menu.id
|
|
titles.value = menu.name
|
|
idx.value = index
|
|
activeItem.value = menu.id
|
|
if (menu.childList && menu.childList.length > 0) {
|
|
activeItem.value = menu.childList[0].id
|
|
}
|
|
database.database.id = activeItem.value
|
|
goListPage()
|
|
}
|
|
function goChild(menu: any) {
|
|
activeItem.value = menu.id
|
|
console.log(menu.id)
|
|
database.database.id = menu.id
|
|
goListPage()
|
|
}
|
|
function goListPage() {
|
|
const { path } = route
|
|
if (path === '/DataBase/review') push('/DataBase')
|
|
}
|
|
var activeItem = ref<any>()
|
|
const tableData = ref()
|
|
async function getTree() {
|
|
const { data = [] } = await treeDbList({})
|
|
tableData.value = data
|
|
|
|
if (data && data[0]) {
|
|
// console.log(data[0])
|
|
titles.value = data[0].name
|
|
activeMenuKey.value = data[0].id
|
|
database.database.id = data[0].id
|
|
// if(data[0].childList&&data[0].childList.length>0){
|
|
// activeItem.value = data[0].childList[0].id
|
|
// activeMenuKey.value = data[0].childList[0].id
|
|
// }
|
|
}
|
|
if (activeItem.value) {
|
|
const { topLevelItem, targetItem } = findItemById(data, activeItem.value)
|
|
if (topLevelItem && targetItem) {
|
|
const index = data.findIndex((i: any) => i.id === topLevelItem.id)
|
|
nextTick(() => {
|
|
onClic.value = true
|
|
menuHandler(topLevelItem, index === -1 ? 0 : index)
|
|
goChild(targetItem)
|
|
})
|
|
}
|
|
}
|
|
}
|
|
getTree()
|
|
|
|
function findItemById(
|
|
items: any,
|
|
targetId: any,
|
|
topLevelItem: any = null
|
|
): any {
|
|
for (let i = 0; i < items.length; i++) {
|
|
const item = items[i]
|
|
if (item.id === targetId) {
|
|
return { topLevelItem: topLevelItem || item, targetItem: item }
|
|
} else if (item.childList?.length > 0) {
|
|
const result = findItemById(
|
|
item.childList,
|
|
targetId,
|
|
topLevelItem || item
|
|
)
|
|
if (result) {
|
|
return result
|
|
}
|
|
}
|
|
}
|
|
return { topLevelItem: null, targetItem: null }
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="page w-1920px h-1080px flex">
|
|
<div class="w350px -mr-1px flex flex-col shrink-0 overflow-auto">
|
|
<div class="p30px bg-#000">
|
|
<!-- @dblclick="toggle" -->
|
|
<img src="@/assets/images/logo@2x.png" class="w197px h44px mt14px" />
|
|
</div>
|
|
|
|
<div class="pt30px pb24px flex-1 pl20px bg-#fff">
|
|
<div
|
|
class="nav px36px py24px m10px mr0 rd-32px rd-r-0 flex flex-col text-#000 cursor-pointer"
|
|
v-for="(m, index) in tableData"
|
|
:key="m.id"
|
|
:class="
|
|
activeMenuKey === m.id ? (m.childList ? 'actives' : 'active') : ''
|
|
"
|
|
@click="() => menuHandler(m, index)"
|
|
>
|
|
<div
|
|
:class="activeMenuKey === m.id && 'onActive'"
|
|
class="flex"
|
|
@click="onClic = !onClic"
|
|
>
|
|
<!-- <img v-if="activeMenuKey === m.id" :src="m.icon1" class="w22px h22px mr16px mt--5px" />
|
|
<img v-else :src="m.icon" class="w22px h22px mr16px mt--5px" /> -->
|
|
<!-- lujinli -->
|
|
<!-- <span class="text-17px font-900 relative min-w195px block"> -->
|
|
<span class="text-18px font-900 relative min-w195px block">
|
|
<span class="truncate"> {{ m.name }} </span>
|
|
<span class="text-#000000 absolute right--30px top--5px"
|
|
><el-icon size="26">
|
|
<CaretTop
|
|
v-if="activeMenuKey === m.id && onClic"
|
|
class="text-#4977FC"
|
|
/>
|
|
<CaretBottom v-else /> </el-icon
|
|
></span>
|
|
</span>
|
|
</div>
|
|
|
|
<div
|
|
v-if="m.childList && idx == index"
|
|
class="pl40px"
|
|
v-show="idx === index && onClic ? true : false"
|
|
>
|
|
<div
|
|
class="my30px pl10px text-#000 activeChildren"
|
|
v-for="(item, ind) in m.childList"
|
|
:key="item.id"
|
|
@click.stop="goChild(item)"
|
|
@click="activeItem = item.id"
|
|
>
|
|
<!-- <el-tooltip :content="item.name" placement="top-start" effect="light"> -->
|
|
<n-popover trigger="hover" placement="top-start">
|
|
<template #trigger>
|
|
<span
|
|
class="text-18px flex child font-900 truncate"
|
|
:class="activeItem === item.id ? 'text-#002fa7' : ''"
|
|
>{{ item.name }}</span
|
|
>
|
|
</template>
|
|
<div class="text-18px leading-40px">
|
|
{{ item.name }}
|
|
</div>
|
|
</n-popover>
|
|
<!-- </el-tooltip> -->
|
|
|
|
<div v-if="item.childList && idx == index" class="pl10px">
|
|
<div
|
|
class="my30px pl10px text-#000"
|
|
v-for="(ite, ind) in item.childList"
|
|
:key="item.id"
|
|
@click.stop="goChild(ite)"
|
|
@click="activeItem = ite.id"
|
|
>
|
|
<n-popover trigger="hover" placement="top-start">
|
|
<template #trigger>
|
|
<span
|
|
class="text-18px flex childs font-900 truncate"
|
|
:class="activeItem === ite.id ? 'text-#002fa7' : ''"
|
|
>{{ ite.name }}</span
|
|
>
|
|
</template>
|
|
<div class="text-18px leading-40px">
|
|
{{ ite.name }}
|
|
</div>
|
|
</n-popover>
|
|
|
|
<div v-if="ite.childList && idx == index" class="pl10px">
|
|
<div
|
|
class="my30px pl10px text-#000"
|
|
v-for="(it, ind) in ite.childList"
|
|
:key="item.id"
|
|
@click.stop="goChild(it)"
|
|
@click="activeItem = it.id"
|
|
>
|
|
<n-popover trigger="hover" placement="top-start">
|
|
<template #trigger>
|
|
<span
|
|
class="text-18px flex childs font-900 truncate"
|
|
:class="activeItem === it.id ? 'text-#002fa7' : ''"
|
|
>{{ it.name }}</span
|
|
>
|
|
</template>
|
|
<div class="text-18px leading-40px">
|
|
{{ it.name }}
|
|
</div>
|
|
</n-popover>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="main flex-1 pb15px pt0px relative">
|
|
<!-- <Home /> -->
|
|
<RouterView :cateId="activeItem" :title="titles" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="less">
|
|
.truncate {
|
|
display: block;
|
|
max-width: 226px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.page {
|
|
font-family: 'PingFang SC';
|
|
user-select: none;
|
|
background-image: none;
|
|
background-color: #cacaca;
|
|
background-position: 0 0;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
// color: #3b3b3b;
|
|
color: #000;
|
|
|
|
line-height: 1;
|
|
}
|
|
|
|
.nav {
|
|
&::before {
|
|
top: -48px;
|
|
}
|
|
.child:hover {
|
|
text-decoration: underline;
|
|
}
|
|
.childs:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
&::after {
|
|
bottom: -49px;
|
|
transform: rotate(-90deg);
|
|
}
|
|
|
|
&.active {
|
|
color: #002fa7;
|
|
background-color: #e6ecff;
|
|
|
|
a {
|
|
color: #002fa7;
|
|
}
|
|
|
|
&::before,
|
|
&::after {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
&.actives {
|
|
padding: 0px !important;
|
|
color: #4977fc;
|
|
background-color: #f5f8ff;
|
|
|
|
a {
|
|
color: #002fa7;
|
|
}
|
|
|
|
&::before,
|
|
&::after {
|
|
opacity: 1;
|
|
}
|
|
|
|
.onActive {
|
|
background-color: #e6ecff;
|
|
border-radius: 32px 0 0 32px;
|
|
|
|
padding: 24px 36px 24px 36px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.main {
|
|
width: 100%;
|
|
height: 95%;
|
|
background-color: #4877fb;
|
|
margin-left: 30px;
|
|
}
|
|
|
|
&::-webkit-scrollbar {
|
|
display: none;
|
|
scrollbar-width: none;
|
|
}
|
|
</style>
|