feat：添加搜索框组件

nezha-fronted/src/assets/css/common/tableCommon.scss

@@ -324,3 +324,6 @@
 .operation-dropdown-text {
   font-size: 13px;
 }
+.search-box{
+  padding-bottom: 20px;
+}

nezha-fronted/src/components/common/clickSearch.vue

@@ -0,0 +1,113 @@
+<template>
+  <div class="search-box" :style="{'height':height+ 'px'}">
+    <div v-for="(searchKey,index) in titleSearchList" :key="index" v-if="searchKey.show" class="search-content">
+      <label class="search-title">{{searchKey.label}}:</label>
+      <el-checkbox-group v-model="selectValueOut[searchKey.key]" v-if="searchKey.type === 'checkBox'">
+        <el-checkbox v-for="(item, j) in searchKey.children" :label="item.value" :key="j">{{item.key || item.name || item.label}}</el-checkbox>
+      </el-checkbox-group>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'clickSearch',
+  props: {
+    titleSearchList: {
+      /*
+      * project: {
+          label: 'Project', // 显示的label
+          key: 'projectIds', // 搜索使用的key
+          type: 'checkBox', // 类型
+          children: []      // 需要展示的子集
+        },
+      * */
+      type: Object,
+      default () {
+        return {
+          project: {
+            label: 'Project', // 显示的label
+            key: 'projectIds', // 搜索使用的key
+            type: 'checkBox', // 类型
+            children: [], // 需要展示的子集
+            show: false
+          }
+        }
+      }
+    },
+    selectValue: {
+      type: Object
+    },
+    height:{
+      type: Number,
+      default: 116
+    }
+  },
+  computed: { },
+  watch: {
+    titleSearchList: {
+      immediate: true,
+      deep: true,
+      handler (n) {
+        console.log(n)
+      }
+    },
+    selectValue: {
+      immediate: true,
+      deep: true,
+      handler (n) {
+        console.log(n)
+        this.selectValueOut = { ...n }
+        // this.$emit('reload', this.selectValue)
+      }
+    },
+    selectValueOut: {
+      immediate: true,
+      deep: true,
+      handler (n) {
+        console.log(n)
+        this.$emit('reload', this.selectValue)
+      }
+    }
+  },
+  data () {
+    return {
+      selectValueOut: {}
+    }
+  },
+  mounted () {
+
+  },
+  methods: {
+
+  }
+}
+</script>
+
+<style scoped>
+.search-box{
+  background: #FFFFFF;
+  border: 1px solid #E7EAED;
+  margin: 0 20px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+  .search-title{
+    ont-family: Roboto-Medium;
+    font-size: 14px;
+    color: #666666;
+    letter-spacing: 0;
+    line-height: 14px;
+    font-weight: 500;
+    width: 130px;
+    overflow: hidden;
+  }
+  .search-content{
+    display: flex;
+    width: 100%;
+    flex: 1;
+    padding-top: 19px;
+    padding-left: 20px;
+  }
+</style>

nezha-fronted/src/components/common/table/nzDataList.vue

@@ -22,6 +22,9 @@
           <!-- 顶部分页组件，当打开底部上滑框时出现 -->
           <!-- <div v-if="layout.indexOf('pagination') > -1" class="pagination-top pagination-top-hide display-none"></div>-->
         </div>
+        <div v-if="hasSearch" class="search-box">
+          <slot name="search"></slot>
+        </div>
         <div v-show="bottomBox.mainResizeShow" class="nz-table2">
           <slot v-bind:mainResizeShow="bottomBox.mainResizeShow"></slot>
         </div>
@@ -88,6 +91,10 @@ export default {
     tableId: {
       type: String,
       default: ''
+    },
+    hasSearch: {
+      type: Boolean,
+      default: false
     }
   },
   data () {

nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue

@@ -3,9 +3,11 @@
     <nz-data-list
       ref="dataList"
       :api="url"
+      class="dataList"
       :custom-table-title.sync="tools.customTableTitle"
       :from="fromRoute.endpoint"
       :layout="['searchInput', 'elementSet']"
+      :hasSearch="true"
       :search-msg="searchMsg">
       <template v-slot:top-tool-right>
         <export-excel
@@ -28,6 +30,9 @@
         </export-excel>
         <delete-button id="account-list-batch-delete" v-has="'monitor_endpoint_delete'" :api="url" :delete-objs="batchDeleteObjs" @after="getTableData" @before="delFlag=true"></delete-button>
       </template>
+      <template v-slot:search>
+        <clickSearch :titleSearchList="titleSearchList" :selectValue.sync="selectValue" @reload="reloadTable"/>
+      </template>
       <template v-slot="slotProps">
         <endpoint-table
           ref="dataTable"
@@ -64,6 +69,7 @@ import nzDataList from '@/components/common/table/nzDataList'
 import dataListMixin from '@/components/common/mixin/dataList'
 import endpointTable from '@/components/common/table/settings/endpointTable'
 import EditEndpointBoxNew from '@/components/common/rightBox/editEndpointBoxNew'
+import clickSearch from '@/components/common/clickSearch'
 
 export default {
   beforeRouteLeave (to, from, next) { // 路由离开之前触发
@@ -77,7 +83,8 @@ export default {
     addEndpointBox,
     deleteButton,
     endpointTable,
-    'export-excel': exportXLSX
+    'export-excel': exportXLSX,
+    clickSearch
   },
   mixins: [dataListMixin],
   data () {
@@ -113,6 +120,35 @@ export default {
       rightBox: {
         editShow: false,
         show: false
+      },
+      titleSearch: {},
+      titleSearchList: {
+        project: {
+          label: 'Project',
+          key: 'projectIds',
+          type: 'checkBox',
+          children: [],
+          show: true
+        },
+        module: {
+          label: 'Module',
+          key: 'moduleIds',
+          type: 'checkBox',
+          children: [],
+          show: true
+        },
+        state: {
+          label: 'state',
+          key: 'state',
+          type: 'checkBox',
+          children: [],
+          show: true
+        }
+      },
+      selectValue: {
+        projectIds: [],
+        moduleIds: [],
+        state: []
       }
     }
   },
@@ -162,8 +198,12 @@ export default {
       } else {
         localStorage.removeItem('endpointProjectId')
       }
+      const params = {
+        ...this.searchLabel,
+        ...this.titleSearch
+      }
       this.tools.loading = true
-      this.$get(this.url, this.searchLabel).then(response => {
+      this.$get(this.url, params).then(response => {
         this.tools.loading = false
         if (response.code === 200) {
           for (let i = 0; i < response.data.list.length; i++) {
@@ -179,6 +219,32 @@ export default {
           }
         }
       })
+    },
+    reloadTable () {
+      this.getTableData()
+    },
+    getTitleSearch () {
+      this.$get('monitor/project', { pageSize: -1 }).then(res => {
+        console.log(res)
+        if (res.code === 200) {
+          res.data.list.forEach((item) => {
+            this.titleSearchList.project.children.push(
+              { key: item.name, value: item.id, name: item.name }
+            )
+          })
+        }
+      })
+      this.$get('monitor/module', { pageSize: -1 }).then(res => {
+        console.log(res)
+        if (res.code === 200) {
+          res.data.list.forEach((item) => {
+            this.titleSearchList.module.children.push(
+              { key: item.name, value: item.id, name: item.name }
+            )
+          })
+        }
+      })
+      this.titleSearchList.state.children = [{ key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' }]
     }
   },
   computed: {
@@ -187,6 +253,7 @@ export default {
     if (localStorage.getItem('endpointProjectId')) {
       this.searchLabel.projectIds = localStorage.getItem('endpointProjectId')
     }
+    this.getTitleSearch()
   },
   mounted () {
     if (localStorage.getItem('endpointProjectId')) {
@@ -203,3 +270,15 @@ export default {
   }
 }
 </script>
+<style scoped>
+  .endpoint-list{
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+  .dataList{
+    flex: 1;
+    width: 100%;
+  }
+</style>