前台收藏搜索页接口联调、后台搜索页接口联调

src/api/homepage/search.js

@@ -1,4 +1,4 @@
-// 前台首页
+// 前台搜索页
 import axios from "@/util/ajax";
 
 export default {
@@ -9,5 +9,21 @@ export default {
     // 获取查询数据列表
     searchData(params) {
         return axios.get('/resourceDirectory/searchEsData', { params });
-    }
+    },
+    // 搜索服务各目录下数据量
+    menuStatNum(params) {
+        return axios.get('/resourceDirectory/searchEsMenuStatisticsNum', { params });
+    },
+    // 取消收藏
+    deleteCollect(params) {
+        return axios.post('/resourceDirectory/deleteCollect', params);
+    },
+    // 收藏列表查询
+    collectList(params) {
+        return axios.get('/resourceDirectory/collectList', { params });
+    },
+    //收藏服务各目录下数据量
+    collectMenuStatNum(params) {
+        return axios.get('/resourceDirectory/collectMenuStatisticsNum', { params });
+    },
 }

src/api/index/search.js

@@ -0,0 +1,13 @@
+// 后台搜索页
+import axios from "@/util/ajax";
+
+export default {
+    // 批量上架
+    batchUpShelves(params) {
+        return axios.post('/resourceDirectory/batchUpShelves', params);
+    },
+    // 批量下架
+    batchDownShelves(params) {
+        return axios.post('/resourceDirectory/batchDownShelves', params);
+    }
+}

src/pages/homepage/components/searchPage.vue

@@ -9,7 +9,7 @@
       </el-input>
     </div>
     <el-tabs class="bottom-card" v-model="activeName" @tab-click="handleClick">
-      <el-tab-pane :key="item.id" v-for="item in initTabList()" :label="item.name" :name="item.id">
+      <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'">
@@ -33,7 +33,7 @@
                   实体名称：{{item.logicTbName}}
                 </p>
                 <div class="right">
-                  <img v-if="item.isCollect" src="../../../assets/image/u9765.svg" alt="">
+                  <img v-if="pageType === 'collect'" src="../../../assets/image/u9765.svg" alt="">
                 </div>
               </div>
               <el-row v-if="activeName === 'first' || activeName === 'second'" style="color: rgb(91,91,91);line-height: 40px;">
@@ -48,13 +48,18 @@
                 </el-col>
               </el-row>
               <!-- 指标编码块 -->
-              <p v-if="activeName === 'third'" class="title">
-                <span  @click.stop="">
-                  <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.name}}
-              </p>
+              <div v-if="activeName === 'third'" class="title title-block clearfix">
+                <p class="left">
+                  <span  @click.stop="">
+                    <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.name}}
+                </p>
+                <div class="right">
+                  <img v-if="pageType === 'collect'" src="../../../assets/image/u9765.svg" alt="">
+                </div>
+              </div>
               <el-row v-if="activeName === 'third'" style="color: rgb(91,91,91);line-height: 40px;">
                 <el-col :span="12">
                   所属目录：{{item.l1}}
@@ -74,17 +79,22 @@
                 </el-col>
               </el-row>
               <!-- 服务块 -->
-              <p v-if="activeName === 'fourth'" class="title">
-                <span  @click.stop="">
-                  <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="">
-                <span v-if="serviceType === 'API'">序号：{{item.id}}</span>
-                <span v-if="serviceType === 'MQ'">Topic名称：{{item.name}}</span>
-              </p>
+              <div v-if="activeName === 'fourth'" class="title title-block clearfix">
+                <p class="left">
+                  <span  @click.stop="">
+                    <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="">
+                  <span v-if="serviceType === 'API'">序号：{{item.id}}</span>
+                  <span v-if="serviceType === 'MQ'">Topic名称：{{item.name}}</span>
+                </p>
+                <div class="right">
+                  <img v-if="pageType === 'collect'" src="../../../assets/image/u9765.svg" alt="">
+                </div>
+              </div>
               <el-row v-if="activeName === 'fourth'" style="color: rgb(91,91,91);line-height: 40px;">
                 <el-col v-if="serviceType === 'API'" :span="12">
-                  API名称：{{item.NAME}}
+                  API名称：{{item.name}}
                 </el-col>
                 <el-col v-if="serviceType === 'MQ'" :span="12">
                   集成应用：{{item.appName}}
@@ -155,25 +165,27 @@ export default {
       total: 0,
       serviceType: 'API', // API-API服务,MQ-消息队列
       pageType: this.$route.query.pageType || 'all', // all-全量搜索,theme-只有主题库搜索,topic-只有专题库搜索,index-只有指标搜索,service-只有服务搜索,collect-我的收藏全量搜索
-      menuId: undefined
+      menuId: undefined,
+      tabList: [],
+      selectIds: []
     };
   },
   created() {},
   mounted() {
     document.documentElement.scrollTop = 0;
+    this.initTabList()
     this.getMenu()
     this.getSearchData()
   },
   methods: {
     handleClick(tab, event) {
       this.activeName = tab.name;
-      this.menuId = undefined
-      this.currentPage = 1
+      this.resetValue()
       this.getMenu()
       this.getSearchData()
     },
     handleNodeClick(data) {
-      console.log(data);
+      // console.log(data);
       this.menuId = data.id
       this.getSearchData()
     },
@@ -219,10 +231,34 @@ export default {
     },
     // 批量取消收藏
     batchCancelCollect() {
-
+      const params = {resourceType: 'theme', resourceIds: this.selectIds,}
+      if (this.activeName === 'second') {
+        params.resourceType = 'specialSubject'
+      }
+      if (this.activeName === 'third') {
+        params.resourceType = 'index'
+      }
+      if (this.activeName === 'fourth') {
+        params.resourceType = 'service'
+      }
+      api.deleteCollect(params).then(res => {
+        if (res.success) {
+          this.$message({
+            message: '取消成功!',
+            type: 'success'
+          })
+          this.selectIds = []
+          this.getSearchData()
+        }
+      })
     },
     checkboxChange(e, id) {
-      console.log('e', e, 'id', id)
+      if (e) {
+        this.selectIds.push(id)
+      } else {
+        this.selectIds = this.selectIds.filter(item => item !== id)
+      }
+      console.log('selectIds', this.selectIds)
     },
     handleDown() {
       console.log('down')
@@ -253,7 +289,7 @@ export default {
         tabList = [{ name: '服务',id: 'fourth',num: 0 }]
         this.activeName = 'fourth'
       }
-      return tabList
+      this.tabList = tabList
     },
     getMenu() {
       const params = {resourceType: 'theme'}
@@ -271,11 +307,13 @@ export default {
           this.data = res.data
         }
       })
+      if (this.activeName === 'fourth') {
+        this.getServiceStatNum()
+      }
     },
     serviceBtnClick(key) {
       this.serviceType = key
-      this.menuId = undefined
-      this.currentPage = 1
+      this.resetValue()
       this.getMenu()
       this.getSearchData()
     },
@@ -283,7 +321,8 @@ export default {
       const params = {
         resourceType: 'theme', pageNum: this.currentPage, 
         pageSize: this.pageSize, menuId: this.menuId,
-        keyword: this.searchWords
+        keyword: this.searchWords,
+        shelvesType: '1'
       }
       if (this.$route.query.pageType === 'topic' || this.activeName === 'second') {
         params.resourceType = 'specialSubject'
@@ -294,12 +333,76 @@ export default {
       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
+      if (this.pageType === 'collect') {
+        params.shelvesType = undefined
+        params.keyword = undefined
+        params.resourceName = this.searchWords
+        api.collectList(params).then(res => {
+          if(res.success) {
+            this.total = res.data.total
+            this.list = []
+            res.data.records.map((item, index) => {
+              const newItem = {...item}
+              if (this.selectIds.indexOf(item.id) !== -1) {
+                newItem.checked = true
+              } else {
+                newItem.checked = false
+              }
+              this.list.push(newItem)
+            })
+          }
+        })
+      } else {
+        api.searchData(params).then(res => {
+          if(res.success) {
+            this.total = res.data.total
+            this.list = []
+            res.data.records.map((item, index) => {
+              const newItem = {...item}
+              if (this.selectIds.indexOf(item.id) !== -1) {
+                newItem.checked = true
+              } else {
+                newItem.checked = false
+              }
+              this.list.push(newItem)
+            })
+          }
+        })
+      }
+    },
+    getServiceStatNum() {
+      let params = {resourceType: 'api', shelvesType: '1'}
+      if (this.serviceType === 'MQ') {
+        params.resourceType = 'mqs'
+      }
+      if (this.pageType === 'collect') {
+        params.shelvesType = undefined
+        api.collectMenuStatNum(params).then(res => {
+          this.handleMenuStatNumRes(res)
+        })
+      } else {
+        api.menuStatNum(params).then(res => {
+          this.handleMenuStatNumRes(res)
+        })
+      }
+    },
+    handleMenuStatNumRes(res) {
+      if (res.success) {
+          this.data.map((item, index) => {
+            const findObj = res.data.find(fItem => fItem.menuId === item.id)
+            if (findObj) {
+              item.name = `${item.name}(${findObj.num})`
+            } else {
+              item.name = `${item.name}(0)`
+            }
+          })
+          // console.log('this.data', this.data)
         }
-      })
+    },
+    resetValue() {
+      this.selectIds = []
+      this.menuId = undefined
+      this.currentPage = 1
     }
   }
 };

src/pages/index/components/searchPage.vue

@@ -13,8 +13,8 @@
         <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>
@@ -24,7 +24,8 @@
               <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)">
+            <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">
@@ -35,22 +36,22 @@
                   实体名称：{{item.logicTbName}}
                 </p>
                 <div class="right">
-                  <span v-if="item.isListing" class="right-item">
+                  <span v-if="item.shelvesType" class="right-item">
                     <img src="../../../assets/image/u1723.png" alt="">
                     已上架
                   </span>
                   <span @click.stop="">
-                    <span v-if="!item.isListing" class="active right-item"  @click="handleUp(item.id)">
+                    <span v-if="!item.shelvesType" class="active right-item"  @click="handleUp(item.id)">
                       <img src="../../../assets/image/u1723.png" alt="">
                       上架
                     </span>
                   </span>
-                  <span v-if="!item.isListing"  class="right-item">
+                  <span v-if="!item.shelvesType"  class="right-item">
                     <img src="../../../assets/image/u1720.png" alt="">
                     已下架
                   </span>
                   <span @click.stop="">
-                    <span v-if="item.isListing" class="active right-item" @click="handleDown(item.id)">
+                    <span v-if="item.shelvesType" class="active right-item" @click="handleDown(item.id)">
                       <img src="../../../assets/image/u1720.png" alt="">
                       下架
                     </span>
@@ -58,27 +59,51 @@
                 </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>
               <!-- 指标编码块 -->
-              <p v-if="activeName === 'third'" class="title">
-                <span  @click.stop="">
-                  <el-checkbox 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>
+              <div v-if="activeName === 'third'" class="title title-block clearfix">
+                <p class="left">
+                  <span  @click.stop="">
+                    <el-checkbox 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.name}}
+                </p>
+                <div class="right">
+                  <span v-if="item.shelvesType" class="right-item">
+                    <img src="../../../assets/image/u1723.png" alt="">
+                    已上架
+                  </span>
+                  <span @click.stop="">
+                    <span v-if="!item.shelvesType" class="active right-item"  @click="handleUp(item.id)">
+                      <img src="../../../assets/image/u1723.png" alt="">
+                      上架
+                    </span>
+                  </span>
+                  <span v-if="!item.shelvesType"  class="right-item">
+                    <img src="../../../assets/image/u1720.png" alt="">
+                    已下架
+                  </span>
+                  <span @click.stop="">
+                    <span v-if="item.shelvesType" class="active right-item" @click="handleDown(item.id)">
+                      <img src="../../../assets/image/u1720.png" alt="">
+                      下架
+                    </span>
+                  </span>
+                </div>
+              </div>
               <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}}
@@ -86,49 +111,81 @@
               </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>
               <!-- 服务块 -->
-              <p v-if="activeName === 'fourth'" class="title">
-                <span  @click.stop="">
-                  <el-checkbox 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>
+              <div v-if="activeName === 'fourth'" class="title title-block clearfix">
+                <p class="left">
+                  <span  @click.stop="">
+                    <el-checkbox  class="checkbox" v-model="item.checked" @click.stop="" @change="(e) => checkboxChange(e, item.id)"></el-checkbox>
+                  </span>
+                  <img src="../../../assets/image/u652.svg" alt="">
+                  <span v-if="serviceType === 'API'">序号：{{item.id}}</span>
+                  <span v-if="serviceType === 'MQ'">Topic名称：{{item.name}}</span>
+                </p>
+                <div class="right">
+                  <span v-if="item.shelvesType" class="right-item">
+                    <img src="../../../assets/image/u1723.png" alt="">
+                    已上架
+                  </span>
+                  <span @click.stop="">
+                    <span v-if="!item.shelvesType" class="active right-item"  @click="handleUp(item.id)">
+                      <img src="../../../assets/image/u1723.png" alt="">
+                      上架
+                    </span>
+                  </span>
+                  <span v-if="!item.shelvesType"  class="right-item">
+                    <img src="../../../assets/image/u1720.png" alt="">
+                    已下架
+                  </span>
+                  <span @click.stop="">
+                    <span v-if="item.shelvesType" class="active right-item" @click="handleDown(item.id)">
+                      <img src="../../../assets/image/u1720.png" alt="">
+                      下架
+                    </span>
+                  </span>
+                </div>
+              </div>
               <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>
@@ -150,6 +207,8 @@
 </template>
 
 <script>
+import api from "@/api/homepage/search.js";
+import backApi from "@/api/index/search.js";
 export default {
   data() {
     return {
@@ -174,140 +233,45 @@ export default {
           id: 'fourth',
           num: 0}
       ],
-      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'
-          }]
-        }]
-      }],
+      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: '暂无',
-          isListing: true
-        },
-        {
-          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: '暂无',
-          isListing: false
-        },
-        {
-          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: '暂无',
-          isListing: true
-        },
-        {
-          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: '暂无',
-          isListing: true
-        },
-        {
-          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: '暂无',
-          isListing: true
-        },
-      ],
+      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-只有服务搜索,background-后台管理搜索
+      menuId: undefined,
+      selectIds: []
     };
   },
   created() {},
   mounted() {
     document.documentElement.scrollTop = 0;
+    this.getMenu()
+    this.getSearchData()
   },
   methods: {
     handleClick(tab, event) {
       this.activeName = tab.name;
+      this.resetValue()
+      this.getMenu()
+      this.getSearchData()
     },
     handleNodeClick(data) {
-      console.log(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'
@@ -330,7 +294,7 @@ export default {
       });
     },
     handleSearch() {
-      
+      this.getSearchData()
     },
     getCardClass() {
       let ret = 'entity-card'
@@ -342,18 +306,136 @@ export default {
       }
       return ret
     },
-    // 批量上架
-    batchListing() {},
-    // 批量下架
-    batchOffShelf() {},
     checkboxChange(e, id) {
-      console.log('e', e, 'id', id)
+      if (e) {
+        this.selectIds.push(id)
+      } else {
+        this.selectIds = this.selectIds.filter(item => item !== id)
+      }
+      console.log('selectIds', this.selectIds)
     },
     handleDown() {
       console.log('down')
     },
     handleUp() {
       console.log('up')
+    },
+    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
+        }
+      })
+      if (this.activeName === 'fourth') {
+        this.getServiceStatNum()
+      }
+    },
+    serviceBtnClick(key) {
+      this.serviceType = key
+      this.resetValue()
+      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.map((item, index) => {
+            const newItem = {...item}
+            if (this.selectIds.indexOf(item.id) !== -1) {
+              newItem.checked = true
+            } else {
+              newItem.checked = false
+            }
+            this.list.push(newItem)
+          })
+          console.log('list', this.list)
+        }
+      })
+    },
+    getServiceStatNum() {
+      let params = {resourceType: 'api'}
+      if (this.serviceType === 'MQ') {
+        params.resourceType = 'mqs'
+      }
+      api.menuStatNum(params).then(res => {
+        if (res.success) {
+          this.data.map((item, index) => {
+            const findObj = res.data.find(fItem => fItem.menuId === item.id)
+            if (findObj) {
+              item.name = `${item.name}(${findObj.docCount})`
+            } else {
+              item.name = `${item.name}(0)`
+            }
+          })
+          // console.log('this.data', this.data)
+        }
+      })
+    },
+    getListingParam() {
+      const params = {resourceType: 'theme', resourceIds: this.selectIds,}
+      if (this.activeName === 'second') {
+        params.resourceType = 'specialSubject'
+      }
+      if (this.activeName === 'third') {
+        params.resourceType = 'index'
+      }
+      if (this.activeName === 'fourth') {
+        params.resourceType = 'service'
+      }
+      return params
+    },
+    // 批量上架
+    batchListing() {
+      const params = this.getListingParam()
+      backApi.batchUpShelves(params).then(res => {
+        if (res.success) {
+          this.$message({ type: 'success', message: '上架成功!' })
+          this.selectIds = []
+          this.getSearchData()
+        }
+      })
+    },
+    // 批量下架
+    batchOffShelf() {
+      const params = this.getListingParam()
+      backApi.batchDownShelves(params).then(res => {
+        if (res.success) {
+          this.$message({ type: 'success', message: '下架成功!' })
+          this.selectIds = []
+          this.getSearchData()
+        }
+      })
+    },
+    resetValue() {
+      this.selectIds = []
+      this.menuId = undefined
+      this.currentPage = 1
     }
   }
 };