搜索页面开发

src/assets/css/global.css

@@ -20,6 +20,14 @@ body,
   display: flex;
 }
 
+html {
+    box-sizing: border-box;
+}
+
+*,*::before,*::after {
+    box-sizing: inherit;
+}
+
 /*
 @media screen and (min-width:700px) {
 

src/pages/homepage/components/cardWrap.vue

@@ -8,7 +8,7 @@
             数据资源库
           </div>
           <div class="data-repo-wrap">
-            <div v-for="(item, index) in menus" :key="index"  class="menu-btn" style="width: 16%" @click="jumpToSearchPage(item)">
+            <div v-for="(item, index) in menus" :key="index"  class="menu-btn" style="width: 20%" @click="jumpToSearchPage(item.pageType)">
               <p>{{ item.title }}</p>
               <div class="flex" style="padding-top: 10px;">
                 <div style="width: 26%;" class="middle-flex">
@@ -23,13 +23,13 @@
           </div>
         </div>
         <div class="my-collect clearfix">
-          <div  class="menu-btn" style="width: 80%" @click="jumpToSearchPage()">
+          <div  class="menu-btn" style="width: 80%" @click="jumpToSearchPage('collect')">
             <p>我的收藏</p>
             <div class="flex" style="padding-top: 10px;">
               <div style="width: 26%;" class="middle-flex">
-                <img style="width: 50px; height: 50px;" src="../../../assets/image/u448.svg"/>
+                <img style="width: 50px; height: 50px;" src="../../../assets/collect.png"/>
               </div>
-              <div style="width: 74%; line-height: 30px;">
+              <div style="width: 74%; line-height: 50px;">
                 <p class="sub-title"><span/>收藏总量<span style="margin-left: 5px;" :class="`font-collect`">1553</span></p>
               </div>
             </div>
@@ -146,18 +146,22 @@ export default {
             title: '主题库资源',
             new: 312,
             history: 42353,
+            pageType: 'theme'
           },{
             title: '专题库资源',
             new: 234,
             history: 6234,
+            pageType: 'topic'
           },{
             title: '指标库资源',
             new: 553,
             history: 553,
+            pageType: 'index'
           },{
             title: '总线服务',
             new: 35,
             history: 1553,
+            pageType: 'service'
           }],
           barData: [{qyjc: '2023-01', hs: 100, hs1: 200}, {qyjc: '2023-02', hs: 10, hs1: 20}, {qyjc: '2023-03', hs: 10, hs1: 20}, {qyjc: '2023-04', hs: 10, hs1: 20}, {qyjc: '2023-05', hs: 10, hs1: 20},],
           specialAssetsData: [{qyjc: '专题1', hs: 100, hs1: 200}, {qyjc: '2023-02', hs: 10, hs1: 20}, {qyjc: '2023-03', hs: 10, hs1: 20}, {qyjc: '2023-04', hs: 10, hs1: 20}, {qyjc: '2023-05', hs: 10, hs1: 20},],
@@ -180,12 +184,13 @@ export default {
 
     },
     methods: {
-      jumpToSearchPage(item) {
+      jumpToSearchPage(pageType) {
         this.$router.push({
           name: "searchPage",
           path: "/searchPage",
           query: {
-            searchword: this.searchWords
+            searchword: this.searchWords,
+            pageType: pageType ? pageType : 'all'
           }
         });
       },
@@ -272,7 +277,7 @@ export default {
       }
     }
     .menu-btn {
-        height: 98px;
+        height: 138px;
         width: 100%;
         padding: 20px;
         box-shadow: 2px 5px 10px #ddd;

src/pages/homepage/components/searchPage.vue

@@ -3,7 +3,7 @@
   <div class="detailPage">
     <div class="search-card">
       <el-input class="input-wrapper" v-model="searchWords" placeholder="请输入关键字">
-        <el-button slot="append" class="searchbtn" @click="jumpToSearchPage">
+        <el-button slot="append" class="searchbtn" @click="handleSearch">
           <img src="../../../../static/homepage/u432.svg" alt="">
         </el-button>
       </el-input>
@@ -12,13 +12,29 @@
       <el-tab-pane :key="item.id" v-for="item in tabList" :label="item.name" :name="item.id">
         <div class="flex">
           <div class="tree-wrap">
+            <el-button-group v-if="activeName === 'fourth'">
+              <el-button :type="serviceType === 'API' ? 'primary' : ''" @click="serviceType = 'API'" size="small">API服务</el-button>
+              <el-button :type="serviceType === 'MQ' ? 'primary' : ''" @click="serviceType = 'MQ'" size="small">消息队列</el-button>
+            </el-button-group>
             <div>{{item.name}}</div>
             <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
           </div>
           <div class="list-wrap">
-            <div class="entity-card" v-for="(item, idx) in list" :key="idx" @click="jumpToDetailPage(item.id)">
-              <p class="title">实体名称{{item.logicTbName}}</p>
-              <el-row style="color: rgb(91,91,91);line-height: 40px;">
+            <div v-if="pageType === 'collect'" ><el-button :type="'primary'" @click="batchCancelCollect" size="small">批量取消收藏</el-button></div>
+            <div v-if="pageType === 'background'">
+              <el-button :type="'primary'" @click="batchListing" size="small">批量上架</el-button>
+              <el-button :type="'primary'" @click="batchOffShelf" size="small">批量下架</el-button>
+            </div>
+            <div :class="getCardClass()" v-for="(item, idx) in list" :key="idx" @click="jumpToDetailPage(item.id)">
+              <!-- 主题库和专题库块 -->
+              <p v-if="activeName === 'first' || activeName === 'second'" class="title">
+                <span  @click.stop="">
+                  <el-checkbox v-if="pageType === 'collect' || pageType === 'background'" class="checkbox" v-model="item.checked" @change="(e) => checkboxChange(e, item.id)"></el-checkbox>
+                </span>
+                <img src="../../../assets/image/u652.svg" alt="">
+                实体名称：{{item.logicTbName}}
+              </p>
+              <el-row v-if="activeName === 'first' || activeName === 'second'" style="color: rgb(91,91,91);line-height: 40px;">
                 <el-col :span="12">
                   英文名称：{{item.tbName}}
                 </el-col>
@@ -29,6 +45,69 @@
                   所属主题：{{item.topic}}
                 </el-col>
               </el-row>
+              <!-- 指标编码块 -->
+              <p v-if="activeName === 'third'" class="title">
+                <span  @click.stop="">
+                  <el-checkbox v-if="pageType === 'collect' || pageType === 'background'" class="checkbox" v-model="item.checked" @click.stop="" @change="(e) => checkboxChange(e, item.id)"></el-checkbox>
+                </span>
+                <img src="../../../assets/image/u652.svg" alt="">
+                指标名称：{{item.logicTbName}}
+              </p>
+              <el-row v-if="activeName === 'third'" style="color: rgb(91,91,91);line-height: 40px;">
+                <el-col :span="12">
+                  所属目录：{{item.tbName}}
+                </el-col>
+                <el-col :span="12">
+                  更新时间：{{item.updateTime}}
+                </el-col>
+              </el-row>
+              <el-row v-if="activeName === 'third'" style="color: rgb(91,91,91);line-height: 40px;">
+                <el-col :span="12">
+                  所属部门：{{item.depart}}
+                </el-col>
+              </el-row>
+              <el-row v-if="activeName === 'third'" style="color: rgb(91,91,91);line-height: 40px;">
+                <el-col :span="12">
+                  指标编码：{{item.indexCode}}
+                </el-col>
+              </el-row>
+              <!-- 服务块 -->
+              <p v-if="activeName === 'fourth'" class="title">
+                <span  @click.stop="">
+                  <el-checkbox v-if="pageType === 'collect' || pageType === 'background'"  class="checkbox" v-model="item.checked" @click.stop="" @change="(e) => checkboxChange(e, item.id)"></el-checkbox>
+                </span>
+                <img src="../../../assets/image/u652.svg" alt="">
+                {{ serviceType === 'API' ? '序号：' : 'Topic名称：'}}{{item.logicTbName}}
+              </p>
+              <el-row v-if="activeName === 'fourth'" style="color: rgb(91,91,91);line-height: 40px;">
+                <el-col :span="12">
+                  {{ serviceType === 'API' ? 'API名称：' : '集成应用：'}}{{item.tbName}}
+                </el-col>
+                <el-col :span="12">
+                  {{ serviceType === 'API' ? '更新时间：' : '提供部门：'}}{{item.updateTime}}
+                </el-col>
+              </el-row>
+              <el-row v-if="activeName === 'fourth'" style="color: rgb(91,91,91);line-height: 40px;">
+                <el-col :span="12">
+                  {{ serviceType === 'API' ? 'API描述：' : 'topic分区数：'}}{{item.apiDesc}}
+                </el-col>
+                <el-col :span="12">
+                  {{ serviceType === 'API' ? '提供部门：' : '使用部门：'}}{{item.depart}}
+                </el-col>
+              </el-row>
+              <el-row v-if="activeName === 'fourth'" style="color: rgb(91,91,91);line-height: 40px;">
+                <el-col :span="12">
+                  {{ serviceType === 'API' ? '服务归属系统名称：' : '副本数：'}}{{item.sysName}}
+                </el-col>
+                <el-col :span="12">
+                  {{ serviceType === 'API' ? '使用部门：' : '老化时间（小时）：'}}{{item.useDepart}}
+                </el-col>
+              </el-row>
+              <el-row v-if="activeName === 'fourth' && serviceType === 'MQ'" style="color: rgb(91,91,91);line-height: 40px;">
+                <el-col :span="12">
+                  描述：{{item.desc}}
+                </el-col>
+              </el-row>
             </div>
             <el-pagination
               style="float: right;margin-bottom: 10px;"
@@ -52,6 +131,7 @@ export default {
   data() {
     return {
       activeName: 'first',
+      searchWords: this.$route.query.searchword || '',
       tabList: [
         {
           name: '主题库',
@@ -116,40 +196,72 @@ export default {
           logicTbName: '周期性维护计划注销信息',
           tbName: 'periodic_maintenance_plan_cancel',
           updateTime: '2022-07-06 09:23:44',
-          topic: '人力资源管理'
+          topic: '人力资源管理',
+          indexCode: 'ZB001080',
+          depart: 'sunpu',
+          apiDesc: 'degegwgwgwg',
+          useDepart: '部门XXX',
+          sysName: 'app-tfs',
+          desc: '暂无'
         },
         {
           id: '222',
           logicTbName: '周期性维护计划注销信息',
           tbName: 'periodic_maintenance_plan_cancel',
           updateTime: '2022-07-06 09:23:44',
-          topic: '人力资源管理'
+          topic: '人力资源管理',
+          indexCode: 'ZB001080',
+          depart: 'sunpu',
+          apiDesc: 'degegwgwgwg',
+          useDepart: '部门XXX',
+          sysName: 'app-tfs',
+          desc: '暂无'
         },
         {
           id: '333',
           logicTbName: '周期性维护计划注销信息',
           tbName: 'periodic_maintenance_plan_cancel',
           updateTime: '2022-07-06 09:23:44',
-          topic: '人力资源管理'
+          topic: '人力资源管理',
+          indexCode: 'ZB001080',
+          depart: 'sunpu',
+          apiDesc: 'degegwgwgwg',
+          useDepart: '部门XXX',
+          sysName: 'app-tfs',
+          desc: '暂无'
         },
         {
           id: '444',
           logicTbName: '周期性维护计划注销信息',
           tbName: 'periodic_maintenance_plan_cancel',
           updateTime: '2022-07-06 09:23:44',
-          topic: '人力资源管理'
+          topic: '人力资源管理',
+          indexCode: 'ZB001080',
+          depart: 'sunpu',
+          apiDesc: 'degegwgwgwg',
+          useDepart: '部门XXX',
+          sysName: 'app-tfs',
+          desc: '暂无'
         },
         {
           id: '555',
           logicTbName: '周期性维护计划注销信息',
           tbName: 'periodic_maintenance_plan_cancel',
           updateTime: '2022-07-06 09:23:44',
-          topic: '人力资源管理'
+          topic: '人力资源管理',
+          indexCode: 'ZB001080',
+          depart: 'sunpu',
+          apiDesc: 'degegwgwgwg',
+          useDepart: '部门XXX',
+          sysName: 'app-tfs',
+          desc: '暂无'
         },
       ],
       currentPage: 1,
       pageSize: 5,
-      total: 1000
+      total: 1000,
+      serviceType: 'API', // API-API服务,MQ-消息队列
+      pageType: this.$route.query.pageType || 'all', // all-全量搜索,theme-只有主题库搜索,topic-只有专题库搜索,index-只有指标搜索,service-只有服务搜索,collect-我的收藏全量搜索,background-后台管理搜索
     };
   },
   created() {},
@@ -178,6 +290,30 @@ export default {
         }
       });
     },
+    handleSearch() {
+      
+    },
+    getCardClass() {
+      let ret = 'entity-card'
+      if (this.activeName === 'third') {
+        ret = 'entity-card heighten'
+      }
+      if (this.activeName === 'fourth') {
+        ret = this.serviceType === 'API' ? 'entity-card heighten' : 'entity-card mq-heighten'
+      }
+      return ret
+    },
+    // 批量取消收藏
+    batchCancelCollect() {
+
+    },
+    // 批量上架
+    batchListing() {},
+    // 批量下架
+    batchOffShelf() {},
+    checkboxChange(e, id) {
+      console.log('e', e, 'id', id)
+    }
   }
 };
 </script>
@@ -219,7 +355,7 @@ export default {
       .entity-card {
         cursor: pointer;
         width: 100%;
-        height: 100px;
+        height: 140px;
         border: 1px solid #ddd;
         padding: 20px;
         margin-bottom: 10px;
@@ -228,6 +364,15 @@ export default {
           line-height: 30px;
         }
       }
+      .heighten{
+        height: 190px;
+      }
+      .mq-heighten{
+        height: 220px;
+      }
+      .checkbox{
+        z-index: 10;
+      }
     }
   }
 }