wuhongjian
/
hi-ucs
1
0
Fork 0
Code Issues Pull Requests Projects Releases 10 Wiki Activity

基础建设--选项卡修改

This commit is contained in:
gaoyuanwei 2022-06-27 18:13:13 +08:00
parent aea65eb40c
commit c160e5e08e
1 changed files with 61 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
front/src/views/home/infrastructurePage.vue
View File

@ -5,6 +5,7 @@
<div class="infrastructrue-tab">
<div v-for="(item, index) in tabList" :key="index" class="tabBox">
<b class="leftType">{{ item.title }}</b>
<button @click="nullClick" v-if="item.title == '视频细分'">清空</button>
<span
v-for="itemContent in item.content"
:key="itemContent"
@ -84,7 +85,12 @@
</div>
</template>
<script setup>
import { ref } from 'vue'
import { getCategoryTreePage } from '@/api/personalCenter'
import { dataType } from 'element-plus/es/components/table-v2/src/common'
import { ref, onMounted } from 'vue'
onMounted(() => {
tabClick(0, '视频资源')
})
const tabList = ref([
{
title: '设施类型',
@ -92,18 +98,19 @@
},
{
title: '视频细分',
content: [
'云主机',
'算力主机',
'对象存储',
'堡垒机',
'防火墙',
'网闸',
'负载均衡',
'公网IP',
],
content: [],
},
]) //初始化数据
])
// const dataTypeList = () => {
// if (tabList.value[0].content.indexOf('视频资源') != -1) {
// tabList.value[1].content = ['123344', '213124']
// }else if(tabList.value[0].content.indexOf('云资源') != -1){
// tabList.value[1].content = ['5555', '666']
// }
// }
// dataTypeList()
//初始化数据
const init = () => {
tabList.value.map((item) => {
let params = {
@ -118,13 +125,13 @@
//表格的高度
let tableHeight = ref('600')
//tab切换点击事件
const tabClick = (indexFather, name, fatherName) => {
const tabClick = (indexFather, name) => {
if (clickList.value[indexFather].content.indexOf(name) != -1) {
if (fatherName == '视频资源') {
if (name == '视频资源') {
tableHeight.value = 330
} else if (fatherName == '云资源') {
} else if (name == '云资源') {
tableHeight.value = 600
} else if (fatherName == '感知资源') {
} else if (name == '感知资源') {
tableHeight.value = 330
}
clickList.value[indexFather].content.splice(
@ -132,17 +139,51 @@
1
)
} else {
if (fatherName == '视频资源') {
if (name == '视频资源') {
tableHeight.value = 330
} else if (fatherName == '云资源') {
tabList.value[1].content = []
clickList.value[1].content = []
clickList.value[indexFather].content[0] = name
const params = {
page: 1,
limit: 50,
dictTypeId: '1541336217898848257',
}
getCategoryTreePage(params).then((res) => {
res.data.data.list.forEach((val) => {
tabList.value[1].content.push(val.dictLabel)
})
})
} else if (name == '云资源') {
tableHeight.value = 600
} else if (fatherName == '感知资源') {
clickList.value[1].content = []
clickList.value[indexFather].content[0] = name
tabList.value[1].content = [
'云主机',
'算力主机',
'对象存储',
'堡垒机',
'防火墙',
'网闸',
'负载均衡',
'公网IP',
]
} else if (name == '感知资源') {
tableHeight.value = 330
clickList.value[1].content = []
clickList.value[indexFather].content[0] = name
tabList.value[1].content = ['333333', '213124']
} else {
clickList.value[indexFather].content.push(name)
}
clickList.value[indexFather].content[0] = name
}
console.log('clickList.value', clickList.value)
}
// 清空
const nullClick = () => {
clickList.value[1].content = []
console.log('hhhhhhhh')
}
const name = ref('')
// 搜索框
const onSearch = (name) => {
@ -326,7 +367,6 @@
color: #ffffff;
}
.tabBox {
height: 0.3rem;
margin-bottom: 0.16rem;
}
.tabBox:last-of-type {