style： project modue endpoint 样式微调

nezha-fronted/src/components/common/language/cn.js

@@ -47,6 +47,7 @@ const cn = {
     createChart: '新增图表',
     createProject: '新增系统',
     createEndpoint: '新增Endpoint',
+    batchEndpoint: '批量修改Endpoint',
     createAsset: '新增资产',
     createAlertRule: '新增告警规则',
     createUser: '新增用户',

nezha-fronted/src/components/common/language/en.js

@@ -54,6 +54,7 @@ const en = {
     createChart: 'Create chart',
     createProject: 'Create project',
     createEndpoint: 'Create endpoint',
+    batchEndpoint: 'Batch modify endpoint',
     createAsset: 'Create asset',
     createAlertRule: 'Create alert rule',
     createUser: 'Create user',

nezha-fronted/src/components/common/project/topologyL5.vue

@@ -3,7 +3,7 @@
   @import "./L5/css/props.css";
 </style>
 <template>
-  <div class="project-box" v-loading="topologyLoading">
+  <div class="project-box list-page" v-loading="topologyLoading">
     <!--project主要信息-->
     <div class="project-title" v-if="showTopTools&&!fromOverView" :style="{'background':editTopologyFlag?'#F6F6F6':'#ffffff','border-bottom':editTopologyFlag? '1px solid #F6F6F6':'' }">
       <div v-show="editTopologyFlag" class="edit-topologyLine" style="padding-left: 20px">
@@ -110,22 +110,22 @@
            </button>
          </span>
       </div>
-      <div style="width: 100%;display: flex;justify-content: space-between;padding-left: 10px" v-if="!editTopologyFlag&&!fromOverView" class="top-tool-main-right">
+      <div style="width: 100%;display: flex;justify-content: space-between;padding-left: 10px" v-if="!editTopologyFlag&&!fromOverView" class="top-tool-main-right top-tools">
         <div>{{topologyInfo.name}}</div>
         <span class="edit-topologyLine" style="padding-top: 5px" v-show="!editTopologyFlag&&!fromPrev&&!fromOverView">
 <button @click="changeScreen" class="top-tool-btn float-right"
-        style="border-right: 1px solid rgba(162,162,162,0.50);margin-right: 12px;margin-top: -2px" type="button"
+        style="border-right: 1px solid rgba(162,162,162,0.50);margin-right: 12px;" type="button"
 >
                   <i class="nz-icon" :class="topoScreen?'nz-icon-exit-full-screen':'nz-icon-full-screen'"></i>
         </button>
         <button @click="editTopology" class="top-tool-btn float-right"
-                style="border-right: 1px solid rgba(162,162,162,0.50);margin-right: 12px;margin-top: -2px" type="button"
+                style="border-right: 1px solid rgba(162,162,162,0.50);margin-right: 12px;" type="button"
         >
                   <i class="nz-icon nz-icon-edit" :title="$t('project.topology.edit')"></i>
         </button>
           <pick-time
             v-show="!editTopologyFlag"
-            class="float-right pickTime"
+            class="float-right pickTime top-tool-btn-group"
             :refresh-data-func="dateChange"
             v-model="searchTime"
             :use-chart-unit="false"
@@ -2471,11 +2471,10 @@ export default {
     overflow: hidden;
     background: #fff;
     .pickTime{
-      margin-top: -13px;
+      margin-right: 10px;
     }
     .project-title {
-      height: 34px;
+      height: 55px;
-      padding-top: 20px;
       padding-bottom: 0px;
     }
 

nezha-fronted/src/components/common/rightBox/addEndpointBox.vue

@@ -253,7 +253,7 @@ export default {
       },
       pageObj: {
         pageNo: 1,
-        pageSize: 2
+        pageSize: 10
       },
       pages: {
         total: 0,
@@ -606,7 +606,6 @@ export default {
           assetId: item.assetId,
           name: item.name,
           configs: JSON.stringify(item.configs),
-          port: 9100
         }
         endpointList.push(endpoint)
       })

nezha-fronted/src/components/common/rightBox/editEndpointBoxNew.vue

@@ -592,7 +592,7 @@ export default {
       document.execCommand('Copy') // 执行浏览器复制命令
       const creatDom = document.getElementById('creatDom')
       creatDom.parentNode.removeChild(creatDom)
-      this.$message(this.$t('overall.copySuccess'))
+      this.$message.success(this.$t('overall.copySuccess'))
     },
     syntaxHighlight (json) {
       if (typeof json != 'string') {

nezha-fronted/src/components/common/rightBox/moduleBox.vue

@@ -584,7 +584,7 @@ export default {
       document.execCommand('Copy') // 执行浏览器复制命令
       const creatDom = document.getElementById('creatDom')
       creatDom.parentNode.removeChild(creatDom)
-      this.$message(this.$t('overall.copySuccess'))
+      this.$message.success(this.$t('overall.copySuccess'))
     },
     syntaxHighlight (json) {
       if (typeof json != 'string') {

nezha-fronted/src/components/common/table/settings/endpointTable.vue

@@ -7,7 +7,7 @@
     border
     @header-dragend="dragend"
     @sort-change="tableDataSort"
-    @selection-change="(selection) => { batchDeleteObjs = selection }"
+    @selection-change="selectionChange"
   >
     <el-table-column
       :resizable="false"
@@ -46,14 +46,24 @@
           {{scope.row[item.prop].name}}
         </template>
         <template v-else-if="item.prop === 'alerts'">
-          <span class="endpoint-num" :class="scope.row.alertNum>0?'bagEF7458':'bag23BF9A'">
+          <span class="alert-num" @click="showBottomBox('endpointAlertMessage', scope.row)">
-            {{scope.row.alertNum}} active
+            <i class="nz-icon nz-icon-overview-alert" :class="scope.row[item.prop]>0?'colorEF7458':'color23BF9A'"/>
+            {{scope.row.alertNum}}
+          </span>
+        </template>
+        <template v-else-if="item.prop === 'asset'">
+          <span >
+            <i class="nz-icon nz-icon-asset" :class="scope.row[item.prop]>0?'colorEF7458':'colorEF7458'"/>
+            {{scope.row.asset.name}}
           </span>
         </template>
         <template v-else-if="item.prop === 'configs'">
-          <el-tooltip placement="right" effect="light">
+          <el-tooltip placement="right" effect="light" :popper-class="'endpointConfigsTips'">
-            <span class="configs-endpoint">{}</span>
+            <span class="configs-endpoint">{ ... }</span>
-            <div slot="content">{{scope.row[item.prop]}}</div>
+            <div class="endpointConfigsTips" slot="content">
+              <span class="copy-value-content"> <i class="nz-icon nz-icon-override" @click="copyValue(scope.row[item.prop])"></i></span>
+              <pre >{{JSON.stringify(JSON.parse(scope.row[item.prop]),null,2)}}</pre>
+            </div>
           </el-tooltip>
         </template>
         <template v-else-if="item.prop === 'state'">
@@ -109,18 +119,24 @@ export default {
           prop: 'project',
           show: true
         },
+        {
+          label: this.$t('project.endpoint.asset'),
+          prop: 'asset',
+          show: true
+        },
         {
           label: this.$t('project.module.module'),
           prop: 'module',
           show: true
-        }, {
-          label: this.$t('project.endpoint.alerts'),
-          prop: 'alerts',
-          show: true
         },
         {
           label: this.$t('project.endpoint.configs'),
           prop: 'configs',
+          show: false
+        },
+        {
+          label: this.$t('project.endpoint.alerts'),
+          prop: 'alerts',
           show: true
         },
         {
@@ -132,6 +148,17 @@ export default {
     }
   },
   methods: {
+    copyValue (str) {
+      const domUrl = document.createElement('input')
+      domUrl.value = str
+      domUrl.id = 'creatDom'
+      document.body.appendChild(domUrl)
+      domUrl.select() // 选择对象
+      document.execCommand('Copy') // 执行浏览器复制命令
+      const creatDom = document.getElementById('creatDom')
+      creatDom.parentNode.removeChild(creatDom)
+      this.$message.success(this.$t('overall.copySuccess'))
+    }
   },
   computed: {}
 }
@@ -151,9 +178,28 @@ export default {
     color: #fff;
   }
   .configs-endpoint{
-    background: #FA901C;
     border-radius: 4px;
     padding: 2px 7px;
-    color: #fff;
+    color: #3C92F1;
+  }
+  .colorEF7458{
+    color: #EF7458;
+  }
+  .color23BF9A{
+    color: #23BF9A;
+  }
+  .endpoint-num, .alert-num{
+    cursor: pointer;
+  }
+</style>
+<style>
+  .endpointConfigsTips{
+    height: 200px;
+    overflow-y: auto;
+  }
+  .copy-value-content{
+    position: absolute;
+    right: 1px;
+    top: 4px;
   }
 </style>

nezha-fronted/src/components/common/table/settings/moduleTable.vue

@@ -7,7 +7,7 @@
     border
     @header-dragend="dragend"
     @sort-change="tableDataSort"
-    @selection-change="(selection) => { batchDeleteObjs = selection }"
+    @selection-change="selectionChange"
   >
     <el-table-column
       :resizable="false"
@@ -43,10 +43,16 @@
           {{scope.row[item.prop].name}}
         </template>
         <template v-else-if="item.prop === 'endpointNum'">
+          <span class="endpoint-num"  @click="showBottomBox('endpoint', scope.row)">
+             <i class="nz-icon nz-icon-endpoint" :class="scope.row[item.prop]>0?'colorEF7458':'colorEF7458'"/>
           {{scope.row[item.prop]}}
+          </span>
         </template>
         <template v-else-if="item.prop === 'alertNum'">
-          {{scope.row[item.prop]}}
+          <span class="alert-num" @click="showBottomBox('moduleAlertMessage', scope.row)">
+            <i class="nz-icon nz-icon-overview-alert" :class="scope.row[item.prop]>0?'colorEF7458':'color23BF9A'"/>
+            {{scope.row[item.prop]}}
+          </span>
         </template>
         <span v-else>{{scope.row[item.prop] ? scope.row[item.prop] : ''}}</span>
       </template>
@@ -89,10 +95,11 @@ export default {
           label: this.$t('project.module.moduleName'),
           prop: 'name',
           show: true,
+          minWidth: 200
         }, {
           label: this.$t('project.module.type'),
           prop: 'type',
-          show: true,
+          show: false,
           width: 150
         }, {
           label: this.$t('project.project.project'),
@@ -114,7 +121,7 @@ export default {
         {
           label: this.$t('overall.remark'),
           prop: 'remark',
-          show: true,
+          show: false,
           minWidth: 150
         }
       ]
@@ -132,3 +139,14 @@ export default {
   }
 }
 </script>
+<style scoped>
+  .colorEF7458{
+    color: #EF7458;
+  }
+  .color23BF9A{
+    color: #23BF9A;
+  }
+  .endpoint-num, .alert-num{
+    cursor: pointer;
+  }
+</style>

nezha-fronted/src/components/common/table/settings/projectTable.vue

@@ -7,7 +7,7 @@
     border
     @header-dragend="dragend"
     @sort-change="tableDataSort"
-    @selection-change="(selection) => { batchDeleteObjs = selection }"
+    @selection-change="selectionChange"
   >
     <el-table-column
       :resizable="false"
@@ -34,23 +34,26 @@
       </template>
       <template slot-scope="scope" :column="item">
         <template v-if="item.prop === 'name'">
-          <span class="module-num">
+          <span class="">
             {{scope.row[item.prop]}}
           </span>
         </template>
         <template v-else-if="item.prop === 'moduleNum'" >
           <span class="module-num" @click="jumpModule(scope.row)">
+            <i class="nz-icon nz-icon-overview-module"/>
             {{scope.row[item.prop]}}
           </span>
         </template>
         <template v-else-if="item.prop === 'endpointNum'">
-          <span class="endpoint-num" :class="scope.row[item.prop]>0?'bagEF7458':'bag23BF9A'"  @click="jumpEndpoint(scope.row)">
+          <span class="endpoint-num" @click="jumpEndpoint(scope.row)" >
+              <i class="nz-icon nz-icon-endpoint" :class="scope.row[item.prop]>0?'colorEF7458':'colorEF7458'"/>
             {{scope.row[item.prop]}}
           </span>
         </template>
         <template v-else-if="item.prop === 'alertNum'">
-         <span class="endpoint-num" :class="scope.row[item.prop]>0?'bagEF7458':'bag23BF9A'">
+         <span class="alert-num">
-            {{scope.row[item.prop]}} active
+            <i class="nz-icon nz-icon-overview-alert" :class="scope.row[item.prop]>0?'colorEF7458':'color23BF9A'"/>
+            {{scope.row[item.prop]}}
           </span>
         </template>
         <span v-else>{{scope.row[item.prop] ? scope.row[item.prop] : ''}}</span>
@@ -94,7 +97,7 @@ export default {
           label: this.$t('project.project.project'),
           prop: 'name',
           show: true,
-          width: 150
+          minWidth: 150
         }, {
           label: this.$t('project.module.module'),
           prop: 'moduleNum',
@@ -106,7 +109,7 @@ export default {
           show: true,
           width: 150
         }, {
-          label: this.$t('project.endpoint.endpoint'),
+          label: this.$t('project.endpoint.alerts'),
           prop: 'alertNum',
           show: true,
           width: 150
@@ -114,7 +117,7 @@ export default {
         {
           label: this.$t('overall.remark'),
           prop: 'remark',
-          show: true,
+          show: false,
           minWidth: 150
         }
       ]
@@ -142,26 +145,26 @@ export default {
   }
 }
 </script>
-<style scoped>
+<style scoped lang="scss">
   .module-num{
     font-size: 14px;
-    color: #3C92F1;
     font-weight: 400;
     cursor: pointer;
     padding: 0 3px;
     cursor: pointer;
+    .nz-icon-overview-module{
+    color: rgb(122, 208, 188)
+    }
   }
-  .endpoint-num{
+  .alert-num{
     padding: 0 3px;
     cursor: pointer;
     border-radius: 2px;
   }
-  .bagEF7458{
+  .colorEF7458{
-    background: #EF7458;
+    color: #EF7458;
-    color: #fff;
   }
-  .bag23BF9A{
+  .color23BF9A{
-    background: #23BF9A;
+    color: #23BF9A;
-    color: #fff;
   }
 </style>

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

@@ -3,6 +3,7 @@
     <nz-data-list
       ref="dataList"
       :api="url"
+      :tableId="tableId"
       class="dataList"
       :custom-table-title.sync="tools.customTableTitle"
       :from="fromRoute.endpoint"
@@ -22,13 +23,17 @@
           class="top-tool-export margin-r-10"
         >
           <template slot="optionZone">
-            <button id="account-add" v-has="'monitor_endpoint_add'" :title="$t('overall.createUser')" class="top-tool-btn margin-l-20"
+            <button id="account-add" v-has="'monitor_endpoint_add'" class="top-tool-btn margin-l-20"
                     type="button" @click="add">
               <i class="nz-icon-create-square nz-icon"></i>
             </button>
           </template>
         </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>
+        <button id="account-batch-modify" v-has="'monitor_endpoint_add'" :class="{'nz-btn-disabled' : batchDeleteObjs.length<1}" class="top-tool-btn margin-l-20 margin-r-20"
+                type="button" @click="batchModify">
+          <i class="nz-icon-batch-edit nz-icon"></i>
+        </button>
       </template>
       <template v-slot:search>
         <clickSearch :titleSearchList="titleSearchList" :selectValue.sync="selectValue" @reload="reloadTable"/>
@@ -41,10 +46,12 @@
           :custom-table-title="tools.customTableTitle"
           :height="mainTableHeight"
           :table-data="tableData"
+          :tableId="tableId"
           @del="del"
           @edit="edit"
           @orderBy="tableDataSort"
           @reload="getTableData"
+          @selectionChange="selectionChange"
           @showBottomBox="(targetTab, item) => { $refs.dataList.showBottomBox(targetTab, item) }"></endpoint-table>
       </template>
       <template v-slot:pagination>
@@ -59,6 +66,9 @@
     <transition name="right-box">
       <edit-endpoint-box-new v-if="rightBox.editShow" :module="object" @close="closeRightEditBox" :disabled="true" :type="'edit'"></edit-endpoint-box-new>
     </transition>
+    <transition name="right-box">
+      <batchModifyEndpoint v-if="rightBox.batchModify" :module="object" @close="closeRightBatchModify" :selectEndpointList="batchDeleteObjs" :disabled="true" :type="'edit'"></batchModifyEndpoint>
+    </transition>
   </div>
 </template>
 <script>
@@ -69,6 +79,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 batchModifyEndpoint from '@/components/common/rightBox/batchModifyEndpoint'
 import clickSearch from '@/components/common/clickSearch'
 
 export default {
@@ -84,7 +95,8 @@ export default {
     deleteButton,
     endpointTable,
     'export-excel': exportXLSX,
-    clickSearch
+    clickSearch,
+    batchModifyEndpoint
   },
   mixins: [dataListMixin],
   data () {
@@ -119,7 +131,8 @@ export default {
       roles: [],
       rightBox: {
         editShow: false,
-        show: false
+        show: false,
+        batchModify: false
       },
       titleSearch: {},
       titleSearchList: {
@@ -199,6 +212,13 @@ export default {
         this.getTableData()
       }
     },
+    closeRightBatchModify (refresh) {
+      this.rightBox.batchModify = false
+      if (refresh) {
+        this.delFlag = true
+        this.getTableData()
+      }
+    },
     getTableData () {
       this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo)
       this.$set(this.searchLabel, 'pageSize', this.pageObj.pageSize)
@@ -257,7 +277,13 @@ export default {
           })
         }
       })
-      this.titleSearchList.state.children = [{ key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' },{ key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' },{ key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' },{ key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' },{ key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' },{ key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' },{ key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' },{ key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' },{ key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' },{ key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' },{ key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' },{ key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' },{ key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' },{ key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' },{ key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' },{ key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' },{ key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' },{ key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' },{ key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' },{ key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' }]
+      this.titleSearchList.state.children = [{ key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' }, { key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' }, { key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' }, { key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' }, { key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' }, { key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' }, { key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' }, { key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' }, { key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' }, { key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' }, { key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' }, { key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' }, { key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' }, { key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' }, { key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' }, { key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' }, { key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' }, { key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' }, { key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' }, { key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' }]
+    },
+    batchModify () {
+      if (!this.batchDeleteObjs.length) {
+        return
+      }
+      this.rightBox.batchModify = true
     }
   },
   computed: {
@@ -294,4 +320,7 @@ export default {
     flex: 1;
     width: 100%;
   }
+  /deep/ .nz-btn-disabled {
+    opacity: 0.5;
+  }
 </style>

nezha-fronted/src/components/page/monitor/module/moduleList.vue

@@ -3,6 +3,7 @@
     <nz-data-list
       ref="dataList"
       :api="url"
+      :tableId="tableId"
       :custom-table-title.sync="tools.customTableTitle"
       :from="fromRoute.module"
       :layout="['searchInput', 'elementSet']"
@@ -33,6 +34,7 @@
           ref="dataTable"
           v-loading="slotProps.loading"
           :api="url"
+          :tableId="tableId"
           :custom-table-title="tools.customTableTitle"
           :height="mainTableHeight"
           :table-data="tableData"
@@ -40,6 +42,7 @@
           @edit="edit"
           @orderBy="tableDataSort"
           @reload="getTableData"
+          @selectionChange="selectionChange"
           @showBottomBox="(targetTab, object) => { $refs.dataList.showBottomBox(targetTab, object) }"></module-table>
       </template>
       <template v-slot:pagination>
@@ -196,19 +199,21 @@ export default {
 
       this.searchLabel.projectIds = localStorage.getItem('moduleProjectId')
     }
+    if (localStorage.getItem('moduleProjectId')) {
+      setTimeout(()=>{
+        this.$refs.dataList.$refs.searchInput.select_list.push({
+          id: 11,
+          name: 'project id',
+          type: 'input',
+          label: 'projectIds',
+          disabled: false,
+          val: localStorage.getItem('moduleProjectId')
+        })
+        this.$refs.dataList.$refs.searchInput.sreach_num = 1
+      })
+    }
   },
   mounted () {
-    if (localStorage.getItem('moduleProjectId')) {
-      this.$refs.dataList.$refs.searchInput.select_list.push({
-        id: 11,
-        name: 'project id',
-        type: 'input',
-        label: 'projectIds',
-        disabled: false,
-        val: localStorage.getItem('moduleProjectId')
-      })
-      this.$refs.dataList.$refs.searchInput.sreach_num = 1
-    }
   }
 }
 </script>

nezha-fronted/src/components/page/monitor/project/projectList.vue

@@ -3,6 +3,7 @@
     <nz-data-list
       ref="dataList"
       :api="url"
+      :tableId="tableId"
       :custom-table-title.sync="tools.customTableTitle"
       :from="fromRoute.project"
       :layout="['searchInput', 'elementSet']"
@@ -22,10 +23,12 @@
           :custom-table-title="tools.customTableTitle"
           :height="mainTableHeight"
           :table-data="tableData"
+          :tableId="tableId"
           @del="del"
           @edit="edit"
           @orderBy="tableDataSort"
           @reload="getTableData"
+          @selectionChange="selectionChange"
           @showBottomBox="(targetTab, object) => { $refs.dataList.showBottomBox(targetTab, object) }"></project-table>
       </template>
       <template v-slot:pagination>