hi-ucs/front/src/views/home/infrastructurePage.vue

<!-- 基础设施 -->
<template>
  <div class="infrastructrueBox">
    <!-- 选项卡 -->
    <div class="infrastructrue-tab">
      <div v-for="(item, index) in tabList" :key="index" class="tabBox">
        <b class="leftType">{{ item.title }}</b>
        <span
          v-for="itemContent in item.content"
          :key="itemContent"
          @click="tabClick(index, itemContent, itemContent)"
          :class="
            clickList[index].content.indexOf(itemContent) != -1 ? 'down' : ''
          "
        >
          {{ itemContent }}
        </span>
      </div>
    </div>
    <!-- 功能行 -->
    <div class="infrastructrue-content">
      <!-- 表格数据统计 -->
      <div class="contentNum">
        <p>
          备选
          <span>{{ dataSource.length }}</span>
          个
        </p>
        <i class="boundary"></i>
        <p>
          已选
          <span>{{ allClick.length }}</span>
          个
        </p>
      </div>
      <!-- 右侧 -->
      <div class="contentRight">
        <!-- 搜索@search="onSearch" -->
        <div class="searchInput">
          <a-input-search
            v-model:value="name"
            placeholder="请输入关键词"
            enter-button="搜索"
            size="large"
            @change="onSearch"
          />
          <a-button
            type="primary"
            style="width: 0.8rem; height: 0.36rem; margin-left: 0.7rem"
            @click="clean"
          >
            重置
          </a-button>
        </div>
        <i class="boundary"></i>
        <!-- 添加至购物车 -->
        <a-button type="primary" @click="addShopCar" class="buttonAdd">
          添加至购物车
        </a-button>
        <!-- 一键申请 -->
        <a-button type="primary" @click="apply" class="buttonAdd">
          一键申请
        </a-button>
      </div>
    </div>
    <!-- 表格 -->
    <div class="infrastructrue-table">
      <a-table
        class="ant-table-striped"
        :dataSource="dataSource"
        :columns="columns"
        :scroll="{ y: tableHeight }"
        :rowClassName="
          (record, index) => (index % 2 === 1 ? 'table-striped' : null)
        "
        :pagination="pagination"
        @change="handleTableChange"
        :row-selection="{
          selectedRowKeys: selectedRowKeys,
          onChange: onSelectChange,
        }"
      ></a-table>
    </div>
  </div>
</template>
<script setup>
  import { ref, onCreated } from 'vue'
  const tabList = ref([
    {
      title: '设施类型',
      content: ['视频资源', '云资源', '感知资源'],
    },
    {
      title: '视频细分',
      content: [
        '云主机',
        '算力主机',
        '对象存储',
        '堡垒机',
        '防火墙',
        '网闸',
        '负载均衡',
        '公网IP',
      ],
    },
  ]) //初始化数据
  const init = () => {
    tabList.value.map((item) => {
      let params = {
        title: item.title,
        content: [],
      }
      clickList.value.push(params)
    })
  }
  let clickList = ref([]) //存储点击的tab
  init()
  //表格的高度
  let tableHeight = ref('600')
  //tab切换点击事件
  const tabClick = (indexFather, name, fatherName) => {
    if (clickList.value[indexFather].content.indexOf(name) != -1) {
      if (fatherName == '视频资源') {
        tableHeight.value = 330
      } else if (fatherName == '云资源') {
        tableHeight.value = 600
      } else if (fatherName == '感知资源') {
        tableHeight.value = 330
      }
      clickList.value[indexFather].content.splice(
        clickList.value[indexFather].content.indexOf(name),
        1
      )
    } else {
      if (fatherName == '视频资源') {
        tableHeight.value = 330
      } else if (fatherName == '云资源') {
        tableHeight.value = 600
      } else if (fatherName == '感知资源') {
        tableHeight.value = 330
      }
      clickList.value[indexFather].content[0] = name
    }
    console.log('clickList.value', clickList.value)
  }
  const name = ref('')
  // 搜索框
  const onSearch = (name) => {
    name.value = name
    console.log(name.value)
  }
  // 重置
  const clean = () => {
    name.value = ''
  }
  // onCreated(() => {

  // })
  // onMounted(() => {

  // })
  // 一键申请
  const apply = () => {
    console.log('一键申请')
  }
  // 添加至购物车
  const addShopCar = () => {
    console.log('添加至购物车')
  }
  // 表格
  const dataSource = ref([
    {
      key: '1',
      name: '沈腾',
      age: 32,
      address: '西湖区湖底公园1号',
    },
    {
      key: '2',
      name: '沈腾',
      age: 42,
      address: '西湖区湖底公园1号',
    },
    {
      key: '3',
      name: '沈腾',
      age: 42,
      address: '西湖区湖底公园1号',
    },
    {
      key: '4',
      name: '沈腾',
      age: 42,
      address: '西湖区湖底公园1号',
    },
    {
      key: '5',
      name: '沈腾',
      age: 42,
      address: '西湖区湖底公园1号',
    },
    {
      key: '6',
      name: '沈腾',
      age: 42,
      address: '西湖区湖底公园1号',
    },
    {
      key: '7',
      name: '沈腾',
      age: 42,
      address: '西湖区湖底公园1号',
    },
    {
      key: '8',
      name: '沈腾',
      age: 42,
      address: '西湖区湖底公园1号',
    },
    {
      key: '9',
      name: '沈腾',
      age: 42,
      address: '西湖区湖底公园1号',
    },
    {
      key: '10',
      name: '沈腾',
      age: 42,
      address: '西湖区湖底公园1号',
    },
    {
      key: '11',
      name: '沈腾',
      age: 42,
      address: '西湖区湖底公园1号',
    },
    {
      key: '12',
      name: '沈腾',
      age: 42,
      address: '西湖区湖底公园1号',
    },
    {
      key: '13',
      name: '沈腾',
      age: 42,
      address: '西湖区湖底公园1号',
    },
    {
      key: '14',
      name: '沈腾',
      age: 42,
      address: '西湖区湖底公园1号',
    },
    {
      key: '15',
      name: '沈腾',
      age: 42,
      address: '西湖区湖底公园1号',
    },
    {
      key: '16',
      name: '沈腾',
      age: 42,
      address: '西湖区湖底公园1号',
    },
  ])
  const columns = ref([
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '年龄',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: '住址',
      dataIndex: 'address',
      key: 'address',
    },
  ])
  const allClick = ref([])
  const onSelectChange = (selectedRowKeys) => {
    console.log('hahhahah', selectedRowKeys)
    allClick.value = selectedRowKeys
  }
  const pagination = ref({
    total: 0,
    pageSize: 10, //每页中显示10条数据
    showSizeChanger: true,
    pageSizeOptions: ['5', '10', '15', '20'], //每页中显示的数据
  })
  const queryParam = ref({
    page: 1, //第几页
    size: 10, //每页中显示数据的条数
    hosName: '',
    hosCode: '',
    province: '',
    city: '',
  })
  const handleTableChange = (val) => {
    pagination.value.current = val.current
    pagination.value.pageSize = val.pageSize
    this.queryParam.page = val.current
    this.queryParam.size = val.pageSize
    // this.getTableList()
  }
</script>
<style lang="less" scoped>
.infrastructrueBox {
  width: 10.87rem;
  padding: 0.2rem;
  background: #f3f5f9;
  .infrastructrue-tab {
    background: #ffffff;
    padding: 0.2rem;
    border-bottom: 0.01rem solid rgba(150, 144, 144, 0.3);
    span {
      display: inline-block;
      height: 0.24rem;
      font-size: 0.14rem;
      line-height: 0.24rem;
      border: 0;
      border-radius: 0.12rem;
      margin-left: 0.1rem;
      text-align: center;
      color: #666666;
      cursor: pointer;
      padding: 0 0.08rem;
    }
    .leftType {
      margin: 0.1rem 0;
    }
    .down {
      background: #0087ff;
      color: #ffffff;
    }
    .tabBox {
      height: 0.3rem;
      margin-bottom: 0.16rem;
    }
    .tabBox:last-of-type {
      margin-bottom: 0;
    }
  }
  .infrastructrue-content {
    display: flex;
    justify-content: space-between;
    padding: 0.14rem 0.2rem 0.1rem;
    background: #ffffff;
    .contentNum {
      position: relative;
      display: flex;
      p {
        color: #666666;
        padding: 0;
        margin: 0;
        span {
          color: #0087ff;
          font-size: 0.2rem;
          font-weight: 500;
        }
      }
      p:first-of-type {
        padding-right: 0.16rem;
        margin-right: 0.16rem;
      }
      .boundary {
        position: absolute;
        left: 0.9rem;
        top: 0.07rem;
        display: block;
        width: 0.02rem;
        border-radius: 0.01rem;
        height: 0.2rem;
        background: rgba(150, 144, 144, 0.3);
      }
    }
    .contentRight {
      position: relative;
      display: flex;
      justify-content: space-between;
      .boundary {
        position: absolute;
        left: 3.74rem;
        top: 0.07rem;
        display: block;
        width: 0.02rem;
        border-radius: 0.01rem;
        height: 0.2rem;
        background: rgba(150, 144, 144, 0.3);
      }
      .searchInput {
        display: flex;
        margin-right: 0.2rem;
        .ant-input-search {
          max-width: 4rem;
        }
        :deep(.ant-input) {
          width: 2rem;
          height: 0.36rem;
          font-size: 0.14rem;
          color: #b2b2b2;
          background: #f5f5f5;
        }
        :deep(.ant-input-group-addon) {
          display: inline-block;
          margin-left: 0.1rem;
          .ant-input-search-button {
            width: 0.8rem;
            height: 0.36rem;
            background: #0558e1;
            border-radius: 0.04rem;
            font-size: 0.14rem;
          }
        }
        :deep(.ant-btn) {
          background: #0558e1;
          border-radius: 0.04rem;
        }
      }
      .buttonAdd {
        background: #0558e1;
        border-radius: 0.04rem;
        height: 0.36rem;
        border-color: #0558e1;
        margin-left: 0.1rem;
      }
    }
  }
  .infrastructrue-table {
    .ant-table-striped :deep(.table-striped) td {
      background-color: #fafafa;
    }
  }
}
</style>