数据资源目录前台搜索页接口联调

src/api/homepage/homepage.js

@@ -2,10 +2,6 @@
 import axios from "@/util/ajax";
 
 export default {
-    // 获取最新资讯
-    // getLatestInfo() {
-    //     return axios.post('/xyjc/index-content/latest-info');
-    // },
     // 获取资源数据
     resourceData(params) {
         return axios.get('/resourceDirectory/homeStatisticalTotal', { params });

src/api/homepage/search.js

@@ -0,0 +1,13 @@
+// 前台首页
+import axios from "@/util/ajax";
+
+export default {
+    // 获取目录数据
+    menuInfo(params) {
+        return axios.get('/resourceDirectory/getMenuInfo', { params });
+    },
+    // 获取查询数据列表
+    searchData(params) {
+        return axios.get('/resourceDirectory/searchEsData', { params });
+    }
+}

src/pages/homepage/components/searchPage.vue

@@ -13,15 +13,16 @@
         <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 :type="serviceType === 'API' ? 'primary' : ''" @click="serviceBtnClick('API')" size="small">API服务</el-button>
+              <el-button :type="serviceType === 'MQ' ? 'primary' : ''" @click="serviceBtnClick('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 v-if="pageType === 'collect'" ><el-button :type="'primary'" @click="batchCancelCollect" size="small">批量取消收藏</el-button></div>
-            <div :class="getCardClass()" v-for="(item, idx) in list" :key="idx" @click="jumpToDetailPage(item.id)">
+            <div v-if="list.length === 0" class="empty-block">暂无数据</div>
+            <div v-else :class="getCardClass()" v-for="(item, idx) in list" :key="idx" @click="jumpToDetailPage(item.id)">
               <!-- 主题库和专题库块 -->
               <div v-if="activeName === 'first' || activeName === 'second'" class="title title-block clearfix">
                 <p class="left">
@@ -36,14 +37,14 @@
                 </div>
               </div>
               <el-row v-if="activeName === 'first' || activeName === 'second'" style="color: rgb(91,91,91);line-height: 40px;">
-                <el-col :span="12">
+                <el-col :span="12" class="text-overflow" :title="item.tbName">
                   英文名称：{{item.tbName}}
                 </el-col>
                 <el-col :span="12">
                   更新时间：{{item.updateTime}}
                 </el-col>
                 <el-col :span="12">
-                  所属主题：{{item.topic}}
+                  所属主题：{{item.l1}}
                 </el-col>
               </el-row>
               <!-- 指标编码块 -->
@@ -52,11 +53,11 @@
                   <el-checkbox v-if="pageType === 'collect'" 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}}
+                指标名称：{{item.name}}
               </p>
               <el-row v-if="activeName === 'third'" style="color: rgb(91,91,91);line-height: 40px;">
                 <el-col :span="12">
-                  所属目录：{{item.tbName}}
+                  所属目录：{{item.l1}}
                 </el-col>
                 <el-col :span="12">
                   更新时间：{{item.updateTime}}
@@ -64,12 +65,12 @@
               </el-row>
               <el-row v-if="activeName === 'third'" style="color: rgb(91,91,91);line-height: 40px;">
                 <el-col :span="12">
-                  所属部门：{{item.depart}}
+                  所属部门：{{item.ownerDepartment}}
                 </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}}
+                  指标编码：{{item.code}}
                 </el-col>
               </el-row>
               <!-- 服务块 -->
@@ -78,39 +79,48 @@
                   <el-checkbox v-if="pageType === 'collect'"  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}}
+                <span v-if="serviceType === 'API'">序号：{{item.id}}</span>
+                <span v-if="serviceType === 'MQ'">Topic名称：{{item.name}}</span>
               </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 v-if="serviceType === 'API'" :span="12">
+                  API名称：{{item.NAME}}
                 </el-col>
-                <el-col :span="12">
-                  {{ serviceType === 'API' ? '更新时间：' : '提供部门：'}}{{item.updateTime}}
+                <el-col v-if="serviceType === 'MQ'" :span="12">
+                  集成应用：{{item.appName}}
                 </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 v-if="serviceType === 'API'" :span="12">
+                  更新时间：{{item.updateTime}}
                 </el-col>
-                <el-col :span="12">
-                  {{ serviceType === 'API' ? '提供部门：' : '使用部门：'}}{{item.depart}}
+                <el-col v-if="serviceType === 'MQ'" :span="12">
+                  topic分区数：{{item.partitions}}
                 </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 v-if="serviceType === 'API'" :span="12">
+                  API描述：{{item.remark}}
                 </el-col>
-                <el-col :span="12">
-                  {{ serviceType === 'API' ? '使用部门：' : '老化时间（小时）：'}}{{item.useDepart}}
+                <el-col v-if="serviceType === 'MQ'" :span="12">
+                  老化时间（小时）：{{item.retentionTime}}
+                </el-col>
+                <el-col v-if="serviceType === 'API'" :span="12">
+                  使用系统：{{item.apiBindedAppNames}}
+                </el-col>
+                <el-col v-if="serviceType === 'MQ'" :span="12">
+                  副本数：{{item.replication}}
                 </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-row v-if="activeName === 'fourth'" style="color: rgb(91,91,91);line-height: 40px;">
+                <el-col v-if="serviceType === 'API'" :span="12">
+                  服务归属系统名称：{{item.romaAppName}}
+                </el-col>
+                <el-col v-if="serviceType === 'MQ'" :span="12">
+                  描述：{{item.description}}
                 </el-col>
               </el-row>
             </div>
             <el-pagination
+              v-if="total > 0"
               style="float: right;margin-bottom: 10px;"
               @size-change="handleSizeChange"
               @current-change="handleCurrentChange"
@@ -128,140 +138,51 @@
 </template>
 
 <script>
+import api from "@/api/homepage/search.js";
 export default {
   data() {
     return {
       activeName: 'first',
-      searchWords: this.$route.query.searchword || '',
-      data: [{
-        label: '一级 1',
-        children: [{
-          label: '二级 1-1',
-          children: [{
-            label: '三级 1-1-1'
-          }]
-        }]
-      }, {
-        label: '一级 2',
-        children: [{
-          label: '二级 2-1',
-          children: [{
-            label: '三级 2-1-1'
-          }]
-        }, {
-          label: '二级 2-2',
-          children: [{
-            label: '三级 2-2-1'
-          }]
-        }]
-      }, {
-        label: '一级 3',
-        children: [{
-          label: '二级 3-1',
-          children: [{
-            label: '三级 3-1-1'
-          }]
-        }, {
-          label: '二级 3-2',
-          children: [{
-            label: '三级 3-2-1'
-          }]
-        }]
-      }],
+      searchWords: this.$route.query.searchword || undefined,
+      data: [],
       defaultProps: {
-        children: 'children',
-        label: 'label'
+        children: 'childrens',
+        label: 'name'
       },
-      list: [
-        {
-          id: '111',
-          logicTbName: '周期性维护计划注销信息',
-          tbName: 'periodic_maintenance_plan_cancel',
-          updateTime: '2022-07-06 09:23:44',
-          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: '人力资源管理',
-          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: '人力资源管理',
-          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: '人力资源管理',
-          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: '人力资源管理',
-          indexCode: 'ZB001080',
-          depart: 'sunpu',
-          apiDesc: 'degegwgwgwg',
-          useDepart: '部门XXX',
-          sysName: 'app-tfs',
-          desc: '暂无'
-        },
-      ],
+      list: [],
       currentPage: 1,
       pageSize: 5,
-      total: 1000,
+      total: 0,
       serviceType: 'API', // API-API服务,MQ-消息队列
       pageType: this.$route.query.pageType || 'all', // all-全量搜索,theme-只有主题库搜索,topic-只有专题库搜索,index-只有指标搜索,service-只有服务搜索,collect-我的收藏全量搜索
+      menuId: undefined
     };
   },
   created() {},
   mounted() {
     document.documentElement.scrollTop = 0;
+    this.getMenu()
+    this.getSearchData()
   },
   methods: {
     handleClick(tab, event) {
       this.activeName = tab.name;
+      this.menuId = undefined
+      this.currentPage = 1
+      this.getMenu()
+      this.getSearchData()
     },
     handleNodeClick(data) {
       console.log(data);
+      this.menuId = data.id
+      this.getSearchData()
     },
     handleSizeChange(val) {
       console.log(`每页 ${val} 条`);
     },
     handleCurrentChange(val) {
       console.log(`当前页: ${val}`);
+      this.getSearchData()
     },
     jumpToDetailPage(id) {
       let type = 'theme'
@@ -284,7 +205,7 @@ export default {
       });
     },
     handleSearch() {
-      
+      this.getSearchData()
     },
     getCardClass() {
       let ret = 'entity-card'
@@ -311,23 +232,10 @@ export default {
     },
     initTabList() {
       let tabList = [
-        {
-          name: '主题库',
-          id: 'first',
-          num: 0
-        },
-        {
-          name: '专题库',
-          id: 'second',
-          num: 0},
-        {
-          name: '指标',
-          id: 'third',
-          num: 0},
-        {
-          name: '服务',
-          id: 'fourth',
-          num: 0}
+        {name: '主题库',id: 'first',num: 0},
+        {name: '专题库',id: 'second',num: 0},
+        {name: '指标',id: 'third',num: 0},
+        {name: '服务',id: 'fourth',num: 0}
       ]
       if (this.$route.query.pageType === 'theme') {
         tabList = [{ name: '主题库', id: 'first', num: 0 }]
@@ -346,6 +254,52 @@ export default {
         this.activeName = 'fourth'
       }
       return tabList
+    },
+    getMenu() {
+      const params = {resourceType: 'theme'}
+      if (this.$route.query.pageType === 'topic' || this.activeName === 'second') {
+        params.resourceType = 'specialSubject'
+      }
+      if (this.$route.query.pageType === 'index' || this.activeName === 'third') {
+        params.resourceType = 'index'
+      }
+      if (this.$route.query.pageType === 'service' || this.activeName === 'fourth') {
+        params.resourceType = 'service'
+      }
+      api.menuInfo(params).then(res => {
+        if (res.success) {
+          this.data = res.data
+        }
+      })
+    },
+    serviceBtnClick(key) {
+      this.serviceType = key
+      this.menuId = undefined
+      this.currentPage = 1
+      this.getMenu()
+      this.getSearchData()
+    },
+    getSearchData() {
+      const params = {
+        resourceType: 'theme', pageNum: this.currentPage, 
+        pageSize: this.pageSize, menuId: this.menuId,
+        keyword: this.searchWords
+      }
+      if (this.$route.query.pageType === 'topic' || this.activeName === 'second') {
+        params.resourceType = 'specialSubject'
+      }
+      if (this.$route.query.pageType === 'index' || this.activeName === 'third') {
+        params.resourceType = 'index'
+      }
+      if (this.$route.query.pageType === 'service' || this.activeName === 'fourth') {
+        params.resourceType = this.serviceType === 'API' ? 'api' : 'mqs'
+      }
+      api.searchData(params).then(res => {
+        if(res.success) {
+          this.total = res.data.total
+          this.list = res.data.records
+        }
+      })
     }
   }
 };
@@ -385,6 +339,11 @@ export default {
     }
     .list-wrap {
       width: 75%;
+      .empty-block{
+        height: 300px;
+        text-align: center;
+        line-height: 200px;
+      }
       .entity-card {
         cursor: pointer;
         width: 100%;
@@ -418,6 +377,12 @@ export default {
       .checkbox{
         z-index: 10;
       }
+      .text-overflow{
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        padding-right: 10px;
+      }
     }
   }
   .clearfix{