hi-ucs/front/src/views/demandCenter/index.vue

<template>
  <home-header></home-header>
  <div class="main-cont">
    <div class="main">
      <div class="left">
        <a-layout-sider>
          <a-menu
            v-model:selectedKeys="selectedKeys"
            mode="inline"
            @click="handleClick"
          >
            <a-menu-item v-for="item in menuList" :key="item.key">
              <img :src="item.img" alt="" style="margin-right: 10px" />
              <span>{{ item.title }}</span>
            </a-menu-item>
          </a-menu>
        </a-layout-sider>
      </div>
      <div class="right">
        <!-- <div class="title">数据需求</div> -->
        <a-list
          class="demo-loadmore-list"
          :loading="initLoading"
          item-layout="horizontal"
          :data-source="list"
          :key="showKey"
        >
          <template #renderItem="{ item }">
            <a-list-item>
              <div class="toptitle">
                <a-tooltip placement="topLeft" v-if="item.demandSubject.length>20">
                  <template #title>{{ item.demandSubject}}</template>
                  <span
                    @click="showDetail(item)"
                    style="cursor: pointer"
                    class="name"
                  >
                    {{ item.demandSubject }}
                  </span>
                </a-tooltip>
                <span v-else  @click="showDetail(item)">
                  {{ item.demandSubject }}
                </span>
                <span class="time">{{ item.createDate }}</span>
              </div>
             
                <div class="bottomdesc" v-if="item.demandDetails.length<100">
                  描述： {{ item.demandDetails || '--' }}
                </div>
                <div class="bottomdesc" v-else>
                  描述： {{ item.demandDetails.slice(0,100) }}...<span style="cursor:pointer;color:#1492ff" @click="showDetail(item)">查看更多>></span>
                </div>
             
            </a-list-item>
          </template>
        </a-list>
        <a-pagination
          v-model:current="pageNum"
          v-model:page-size="pageSize"
          :total="total"
          @change="pageChange"
          :key="showKey"
        >
          <template #buildOptionText="props">
            <span>{{ props.value }}条/页</span>
          </template>
        </a-pagination>
      </div>
      <!-- 需求申请 -->
      <div class="fixedmount">
        <div @click="toView()">
          <p></p>
          <p>新需求</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import HomeHeader from '@/views/home/components/header'
import { demandApplyListPage } from '@/api/personalCenter'
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
// import { useStore } from 'vuex'

const router = useRouter()
// const store = useStore()
const list = ref([])
const pageNum = ref(1)
const pageSize = ref(8)
const total = ref()
const showKey = ref(0)
const whoShow1 = ref(whoShow)

const selectedKeys = ref(['0'])

const menuList = [
  {
    key: '0',
    title: '全部需求',
    num: '0',
    img: require('@/assets/home/menuall.png'),
  },
  {
    key: '1',
    title: '基础设施',
    num: '0',
    img: require('@/assets/home/menujcss.png'),
  },
  {
    key: '2',
    title: '数据资源',
    num: '0',
    img: require('@/assets/home/menusjzy.png'),
  },
  {
    key: '3',
    title: '组件服务',
    num: '0',
    img: require('@/assets/home/menuzjfw.png'),
  },
  {
    key: '4',
    title: '应用资源',
    num: '0',
    img: require('@/assets/home/menuyyzy.png'),
  },
  {
    key: '5',
    title: '知识库',
    num: '0',
    img: require('@/assets/home/menuzsk.png'),
  },
]
const detailsType = ref('')
const handleClick = (item) => {
  if (item.key === '1') {
    detailsType.value = '基础设施'
  } else if (item.key === '2') {
    detailsType.value = '数据资源'
  } else if (item.key === '3') {
    detailsType.value = '组件服务'
  } else if (item.key === '4') {
    detailsType.value = '应用资源'
  } else if (item.key === '5') {
    detailsType.value = '知识库'
  } else {
    detailsType.value = ''
  }
  pageNum.value = 1
  getApplyList()
}
const pageChange = (val) => {
  console.log(val)
  pageNum.value = val
  getApplyList()
}
const getApplyList = () => {
  const params = {
    page: pageNum.value,
    limit: pageSize.value,
    flag: 3,
  }
  if (detailsType.value) {
    params.detailsType = detailsType.value
  }
  demandApplyListPage(params).then((res) => {
    list.value = res.data.data.list
    total.value = res.data.data.total
  })
}

const showDetail = (item) => {
  router.push({
    path: '/demandDetails',
    query: {
      id: item.id,
      showKey:selectedKeys.value,
    },
  })
}
const newpage = router.resolve({
  path: '/addApplication', // 跳转的页面路由
})
const toView = () => {
  window.open(newpage.href, '_blank')
}

onMounted(() => {
  const toShowKey = router.currentRoute.value.query.toShowKey
  if(toShowKey){
    selectedKeys.value=toShowKey
  }
  const params = {
    page: pageNum.value,
    limit: pageSize.value,
    flag: 3,
  }
  demandApplyListPage(params).then((res) => {
    list.value = res.data.data.list
    total.value = res.data.data.total
  })
})
</script>
<style lang="less" scoped>

.main-cont {
  margin-top: 64px;
  width: 100%;
  height: calc(100%-90px);
  background: url('~@/assets/demandCenter/bj.png') no-repeat;
  background-position-x: center;
  display: flex;
  justify-content: center;

  .main {
    width: 1200px;
    height: 100%;
    padding-top: 30px;
    display: flex;

    .left {
      width: 15%;

      .ant-card {
        background: transparent;
        border: none;

        .ant-card-grid {
          height: 50px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 10px;
          border: 1px solid #fff;
          background-color: #fff;
          cursor: pointer;
        }
      }

      .ant-layout-sider {
        background-color: transparent;

        :deep(.ant-menu-item) {
          height: 100px;
          font-size: 18px;
          color: #333333;
          border: 1px solid #dee8f5;
          margin: 0;

          &::after {
            margin-top: 30px;
            height: 40px;
            width: 4px;
            background-color: #0087ff;
          }
        }

        :deep(.ant-menu-item-selected) {
          background-color: #e9f4ff;
        }
      }
    }

    .right {
      flex: 1;
      margin-left: 30px;
      height: 850px;
      background-color: #ffffff;
      box-shadow: 10px 8px 10px 3px #9dc6ea;
      padding: 20px;
      .toptitle {
        cursor: pointer;
        margin-bottom: 10px;
        & > span:first-child {
          display: -webkit-box;
          /*设置为弹性盒子*/
          -webkit-line-clamp: 1;
          /*最多显示2行*/
          overflow: hidden;
          /*超出隐藏*/
          text-overflow: ellipsis;
          /*超出显示为省略号*/
          -webkit-box-orient: vertical;
          word-break: break-all;
          width: 600px;
          font-size: 14px;
          color: #1492ff;
          font-size: 18px;
        }
        & > span:first-child:hover {
          color: #0b5392;
        }
        & > span:last-child {
          float: right;
        }
      }
      .bottomdesc {
        display: -webkit-box;
        /*设置为弹性盒子*/
        -webkit-line-clamp: 2;
        /*最多显示2行*/
        overflow: hidden;
        /*超出隐藏*/
        text-overflow: ellipsis;
        /*超出显示为省略号*/
        -webkit-box-orient: vertical;
        word-break: break-all;
        width: 800px;
        font-size: 14px;
      }

      .title {
        font-size: 22px;
        font-weight: 500;
        color: #1492ff;
      }

      .ant-list {
        height: 730px;
        overflow-y: scroll;
        .ant-list-item {
          display: list-item;
        }
        // :deep(.ant-list-item-meta-title) {
        // // display: flex;
        //   justify-content: space-between;

        //   .name {
        //     width: 800px;
        //     font-size: 18px;
        //     color: #1492ff;
        //     display: -webkit-box;
        //     /*设置为弹性盒子*/
        //     -webkit-line-clamp: 1;
        //     /*最多显示2行*/
        //     overflow: hidden;
        //     /*超出隐藏*/
        //     text-overflow: ellipsis;
        //     /*超出显示为省略号*/
        //     -webkit-box-orient: vertical;
        //     word-break: break-all;
        //   }
        // }

        // :deep(.ant-list-item-meta-description) {
        //   display: -webkit-box;
        //   /*设置为弹性盒子*/
        //   -webkit-line-clamp: 2;
        //   /*最多显示2行*/
        //   overflow: hidden;
        //   /*超出隐藏*/
        //   text-overflow: ellipsis;
        //   /*超出显示为省略号*/
        //   -webkit-box-orient: vertical;
        //   word-break: break-all;
        // }
      }

      // 隐藏滚动条
      .ant-list::-webkit-scrollbar {
        display: none;
      }

      .ant-pagination {
        margin-top: 10px;
      }
    }

    .fixedmount {
      height: 1.5rem;
      display: flex;
      position: fixed;
      right: 2.6rem;
      z-index: 10;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
    }

    .fixedmount div {
      width: 0.7rem;
      height: 0.7rem;
      border-radius: 0.04rem;
      border: 0.01rem #94aac9 solid;
      display: flex;
      flex-direction: column;
      // justify-content: center;
      align-items: center;
      padding-top: 0.13rem;
      position: relative;
      cursor: pointer;
      background: #e3edfc;

      p {
        margin: 0;
      }
    }

    .fixedmount div p:nth-child(1) {
      height: 0.24rem;
      width: 0.24rem;
      background: url('~@/assets/home/shenqing.png') no-repeat;
      background-size: contain;
      background-position: center;
    }
  }
}
</style>
<style>
body,
html {
  height: unset;
}

.demandCenter-tooltip-card {
  max-width: 900px !important;
  min-width: 600px !important;
  max-height: 600px !important;
  overflow-y: auto;
}
</style>