Merge branch 'hi-ucs-dev' of http://124.222.94.39:3000/wuhongjian/hi-ucs into hi-ucs-dev

front/src/views/demandCenter/index.vue

@@ -4,11 +4,7 @@
     <div class="main">
       <div class="left">
         <a-layout-sider>
-          <a-menu
-            v-model:selectedKeys="selectedKeys"
-            mode="inline"
-            @click="handleClick"
-          >
+          <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>
@@ -18,36 +14,19 @@
       </div>
       <div class="right">
         <!-- <div class="title">数据需求</div> -->
-        <a-list
-          class="demo-loadmore-list"
-          :loading="initLoading"
-          item-layout="horizontal"
-          :data-source="list"
-          :key="showKey"
-        >
+        <a-list class="demo-loadmore-list" :loading="initLoading" item-layout="horizontal" :data-source="list"
+          :key="showKey">
           <template #renderItem="{ item }">
             <a-list-item>
-              <a-skeleton
-                avatar
-                :title="false"
-                :loading="!!item.loading"
-                active
-              >
-                <a-tooltip
-                  placement="topLeft"
-                  :title="item.demandDetails || '--'"
-                  arrow-point-at-center
-                  mouseEnterDelay="1"
-                >
-                  <a-list-item-meta
-                    :description="'描述：' + (item.demandDetails || '--')"
-                  >
+              <a-skeleton avatar :title="false" :loading="!!item.loading" active>
+                <a-tooltip placement="topLeft" arrow-point-at-center mouseEnterDelay="1"
+                  overlayClassName="tooltip-card">
                   <template #title>
-                      <span
-                        @click="showDetail(item)"
-                        style="cursor: pointer"
-                        class="name"
-                      >
+                    <div class="tooltip-desc">{{ item.demandDetails || '--' }}</div>
+                  </template>
+                  <a-list-item-meta :description="'描述：' + (item.demandDetails || '--')">
+                    <template #title>
+                      <span @click="showDetail(item)" style="cursor: pointer" class="name">
                         {{ item.demandSubject }}
                       </span>
                       <span class="time">{{ item.createDate }}</span>
@@ -58,13 +37,8 @@
             </a-list-item>
           </template>
         </a-list>
-        <a-pagination
-          v-model:current="pageNum"
-          v-model:page-size="pageSize"
-          :total="total"
-          @change="pageChange"
-          :key="showKey"
-        >
+        <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>
@@ -81,21 +55,21 @@
   </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'
+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 menuList = [
+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 menuList = [
   {
     key: '1',
     title: '基础设施',
@@ -126,9 +100,9 @@
     num: '0',
     img: require('@/assets/home/menuyyzy.png'),
   },
-  ]
-  const detailsType = ref('')
-  const handleClick = (item) => {
+]
+const detailsType = ref('')
+const handleClick = (item) => {
   if (item.key === '1') {
     detailsType.value = '基础设施'
   } else if (item.key === '2') {
@@ -142,13 +116,13 @@
   }
   pageNum.value = 1
   getApplyList()
-  }
-  const pageChange = (val) => {
+}
+const pageChange = (val) => {
   console.log(val)
   pageNum.value = val
   getApplyList()
-  }
-  const getApplyList = () => {
+}
+const getApplyList = () => {
   const params = {
     page: pageNum.value,
     limit: pageSize.value,
@@ -161,9 +135,9 @@
     list.value = res.data.data.list
     total.value = res.data.data.total
   })
-  }
+}
 
-  const showDetail = (item) => {
+const showDetail = (item) => {
   // console.log('demandDetails', item)
   // store.commit('home/demandDetailsData', item)
   router.push({
@@ -172,15 +146,15 @@
       id: item.id,
     },
   })
-  }
-  const newpage = router.resolve({
+}
+const newpage = router.resolve({
   path: '/addApplication', // 跳转的页面路由
-  })
-  const toView = () => {
+})
+const toView = () => {
   window.open(newpage.href, '_blank')
-  }
+}
 
-  onMounted(() => {
+onMounted(() => {
   const params = {
     page: pageNum.value,
     limit: pageSize.value,
@@ -190,10 +164,10 @@
     list.value = res.data.data.list
     total.value = res.data.data.total
   })
-  })
+})
 </script>
 <style lang="less" scoped>
-  .main-cont {
+.main-cont {
   margin-top: 64px;
   width: 100%;
   height: calc(100%-90px);
@@ -201,16 +175,20 @@
   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;
@@ -222,14 +200,17 @@
           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;
@@ -237,11 +218,13 @@
             background-color: #0087ff;
           }
         }
+
         :deep(.ant-menu-item-selected) {
           background-color: #e9f4ff;
         }
       }
     }
+
     .right {
       flex: 1;
       margin-left: 30px;
@@ -249,17 +232,21 @@
       background-color: #ffffff;
       box-shadow: 10px 8px 10px 3px #9dc6ea;
       padding: 20px;
+
       .title {
         font-size: 22px;
         font-weight: 500;
         color: #1492ff;
       }
+
       .ant-list {
         height: 730px;
         overflow-y: scroll;
+
         :deep(.ant-list-item-meta-title) {
           display: flex;
           justify-content: space-between;
+
           .name {
             width: 800px;
             font-size: 18px;
@@ -276,6 +263,7 @@
             word-break: break-all;
           }
         }
+
         :deep(.ant-list-item-meta-description) {
           display: -webkit-box;
           /*设置为弹性盒子*/
@@ -289,14 +277,17 @@
           word-break: break-all;
         }
       }
+
       // 隐藏滚动条
       .ant-list::-webkit-scrollbar {
         display: none;
       }
+
       .ant-pagination {
         margin-top: 10px;
       }
     }
+
     .fixedmount {
       height: 1.5rem;
       display: flex;
@@ -321,10 +312,12 @@
       position: relative;
       cursor: pointer;
       background: #e3edfc;
+
       p {
         margin: 0;
       }
     }
+
     .fixedmount div p:nth-child(1) {
       height: 0.24rem;
       width: 0.24rem;
@@ -333,11 +326,18 @@
       background-position: center;
     }
   }
-  }
+}
 </style>
 <style>
-  body,
-  html {
+body,
+html {
   height: unset;
-  }
+}
+
+.tooltip-card {
+  max-width: 900px !important;
+  min-width: 600px !important;
+  max-height: 600px !important;
+  overflow-y: auto;
+}
 </style>