基础建设--选项卡修改

front/src/views/home/infrastructurePage.vue

@@ -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: [
+      content: [],
-        '云主机',
-        '算力主机',
-        '对象存储',
-        '堡垒机',
-        '防火墙',
-        '网闸',
-        '负载均衡',
-        '公网IP',
-      ],
     },
-  ]) //初始化数据
+  ])
+  // 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 = []
-        tableHeight.value = 600
+        clickList.value[1].content = []
-      } else if (fatherName == '感知资源') {
-        tableHeight.value = 330
-      }
         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
+        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)
+      }
     }
     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 {