NEZ-354 feat ：表格添加根据字段排序的功能

nezha-fronted/src/components/page/alert/config.vue

@@ -40,7 +40,9 @@
           v-scrollBar:el-table="'large'"
           v-loading="loading"
           :cell-class-name="messageStyle"
-          style="width: 100%;">
+          style="width: 100%;"
+          @sort-change="tableDataSort"
+        >
           <el-table-column
             :resizable="false"
             v-for="(item, index) in tablelable"
@@ -50,7 +52,8 @@
             :label="item.label"
             show-overflow-tooltip
             min-width="110px"
-
+            :sortable="sortableShow(item.prop)"
+            :prop="propTitle(item.prop)"
           >
             <template slot-scope="scope" :column="item">
               <div v-if="item.prop == 'option'" class="content-right-options">
@@ -434,6 +437,10 @@
         this.getTableData();
       },
       search: function (searchObj) {
+        let orderBy='';
+        if(this.searchLabel.orderBy){
+          orderBy=this.searchLabel.orderBy
+        }
         this.searchLabel = {};
         this.pageObj.pageNo = 1;
         for (let item in searchObj) {
@@ -441,6 +448,9 @@
             this.$set(this.searchLabel, item, searchObj[item]);
           }
         }
+        if(orderBy){
+          this.$set(this.searchLabel, 'orderBy', orderBy);
+        }
         this.getTableData();
       },
       // 全屏
@@ -533,6 +543,39 @@
         detail.push({label: this.$t("alert.message"), value: obj.alertNum});*/
         return detail;
       },
+      //是否需要排序
+      sortableShow(prop){
+        switch(prop){
+          case 'id':
+          case 'alertName':
+          case 'threshold':
+          case 'severity':
+            return'custom';
+          default : return false;
+        }
+      },
+      // prop字段
+      propTitle(prop){
+        switch(prop){
+          case 'id': return'ar.id';
+          case 'alertName': return'ar.alert_name';
+          case 'threshold': return'ar.threshold';
+          case 'severity': return'ar.severity';
+          default : return prop;
+        }
+      },
+      // 数据排序
+      tableDataSort(item){
+        let orderBy='';
+        if(item.order==='ascending'){
+          orderBy=item.prop;
+        }
+        if(item.order==='descending'){
+          orderBy='-'+item.prop;
+        }
+        this.$set(this.searchLabel, "orderBy", orderBy);
+        this.getTableData();
+      },
     },
     watch: {
       showSubList(n) {

nezha-fronted/src/components/page/alert/list.vue

@@ -49,7 +49,8 @@
           v-loading="loading"
           :cell-class-name="labelsClassName"
           @selection-change="selectChange"
-          style="width: 100%;">
+          style="width: 100%;"
+          @sort-change="tableDataSort">
           <el-table-column
             :resizable="false"
             type="selection"
@@ -66,6 +67,8 @@
             :label="item.label"
             :show-overflow-tooltip="item.prop != 'labels'"
             min-width="110px"
+            :sortable="sortableShow(item.prop)"
+            :prop="propTitle(item.prop)"
           >
             <template slot-scope="scope" :column="item">
               <template v-if="item.prop == 'alertRule'">
@@ -836,6 +839,10 @@
         this.getAlertList();
       },
       search: function (searchObj) {
+        let orderBy='';
+        if(this.searchLabel.orderBy){
+          orderBy=this.searchLabel.orderBy
+        }
         this.searchLabel = {};
         this.pageObj.pageNo = 1;
         for (let item in searchObj) {
@@ -847,6 +854,9 @@
             }
           }
         }
+        if(orderBy){
+          this.$set(this.searchLabel, 'orderBy', orderBy);
+        }
         this.getAlertList();
       },
       viewRule: function (id) {
@@ -895,6 +905,40 @@
         this.$refs.projectBox.show(false, false);
         this.$refs.moduleBox.show(false, false);
         this.viewAssetState = false;
+      },
+      //是否需要排序
+      sortableShow(prop){
+        switch(prop){
+          case 'alertRule':
+          case 'severity':
+          case 'startAt':
+          case 'endAt':
+            return'custom';
+          default : return false;
+        }
+      },
+      // prop字段
+      propTitle(prop){
+        switch(prop){
+          case 'alertRule': return'ar.alert_name';
+          case 'severity': return'am.severity';
+          case 'startAt': return'am.start_at';
+          case 'endAt': return'am.end_at';
+          default : return prop;
+        }
+      },
+      // 数据排序
+      tableDataSort(item){
+        let orderBy='';
+        if(item.order==='ascending'){
+          orderBy=item.prop;
+        }
+        if(item.order==='descending'){
+          orderBy='-'+item.prop;
+        }
+        this.pageObj.orderBy=orderBy;
+        this.$set(this.searchLabel, "orderBy", orderBy);
+        this.getAlertList();
       }
     },
     watch: {

nezha-fronted/src/components/page/asset/asset.vue

@@ -92,6 +92,7 @@
                 tooltip-effect="light"
                 ref="assetTable"
                 :cell-class-name="messageStyle"
+                @sort-change="tableDataSort"
               >
                 <el-table-column
                   :resizable="false"
@@ -104,6 +105,8 @@
                   :show-overflow-tooltip="item.prop != 'Alert' || item.prop != 'Module'"
                   min-width="110px"
                   :class-name="item.prop == 'option' ? 'content-right-options' : ''"
+                  :sortable="sortableShow(item.prop)"
+                  :prop="propTitle(item.prop)"
                 >
                   <template slot-scope="scope" :column="item">
                     <div v-if="item.prop=='ID'">
@@ -863,6 +866,10 @@
         })
       },
       search(searchObj) {
+        let orderBy='';
+        if(this.searchLabel.orderBy){
+          orderBy=this.searchLabel.orderBy
+        }
         this.searchLabel = {};
         this.pageObj.pageNo = 1;
         for (let item in searchObj) {
@@ -870,6 +877,9 @@
             this.$set(this.searchLabel, item, searchObj[item]);
           }
         }
+        if(orderBy){
+          this.$set(this.searchLabel, 'orderBy', orderBy);
+        }
         this.getAssetData();
       },
       convertToDetail(obj) {
@@ -948,6 +958,39 @@
         let seconds=time.getSeconds() > 9 ? time.getSeconds():('0'+time.getSeconds());
         return this.$t('asset.assetStatPre')+year+ds+month+ds+day+' '+hours+ts+minutes+ts+seconds;
 
+      },
+      //是否需要排序
+      sortableShow(prop){
+        switch(prop){
+          case 'ID':
+          case 'HOST':
+          case 'SN':
+          case 'purchaseDate':
+            return'custom';
+          default : return false;
+        }
+      },
+      // prop字段
+      propTitle(prop){
+        switch(prop){
+          case 'ID': return'ass.id';
+          case 'HOST': return'ass.host';
+          case 'SN': return'ass.sn';
+          case 'purchaseDate': return'ass.purchase_date';
+          default : return prop;
+        }
+      },
+      // 数据排序
+      tableDataSort(item){
+        let orderBy='';
+        if(item.order==='ascending'){
+          orderBy=item.prop;
+        }
+        if(item.order==='descending'){
+          orderBy='-'+item.prop;
+        }
+        this.$set(this.searchLabel, "orderBy", orderBy);
+        this.getAssetData();
       }
     },
     created() {

nezha-fronted/src/components/page/config/account.vue

@@ -59,7 +59,8 @@
           :height="mainTableHeight"
           v-loading="loading"
           v-scrollBar:el-table="'large'"
-          style="width: 100%;">
+          style="width: 100%;"
+          @sort-change="tableDataSort">
           <el-table-column
             :resizable="false"
             v-for="(item, index) in tablelable"
@@ -67,6 +68,8 @@
             :width="item.width"
             :key="`col-${index}`"
             :label="item.label"
+            :sortable="item.prop!='option'&&item.prop!='status'?'custom':false"
+            :prop="item.prop"
           >
             <template slot-scope="scope" :column="item">
               <div v-if="item.prop == 'option'" class="content-right-options">
@@ -452,6 +455,18 @@
         }
         this.getTableData();
       },
+      // 数据排序
+      tableDataSort(item){
+        let orderBy='';
+        if(item.order==='ascending'){
+          orderBy=item.prop;
+        }
+        if(item.order==='descending'){
+          orderBy='-'+item.prop;
+        }
+        this.$set(this.searchLabel, "orderBy", orderBy);
+        this.getTableData();
+      },
     },
     computed: {
       isCurrentUser() {

nezha-fronted/src/components/page/config/dc.vue

@@ -61,7 +61,8 @@
             ref="dcTable"
             v-loading="loading"
             :cell-class-name="assetStatClassName"
-            style="width: 100%;">
+            style="width: 100%;"
+            @sort-change="tableDataSort">
             <el-table-column
               :resizable="false"
               show-overflow-tooltip
@@ -70,6 +71,8 @@
               :width="item.width"
               :key="`col-${index}`"
               :label="item.label"
+              :sortable="sortableShow(item.prop)"
+              :prop="propTitle(item.prop)"
             >
               <template slot-scope="scope" :column="item">
                 <div v-if="item.prop == 'option'" class="content-right-options">
@@ -414,6 +417,10 @@
         this.getTableData();
       },
       search: function (searchObj) {
+        let orderBy='';
+        if(this.searchLabel.orderBy){
+          orderBy=this.searchLabel.orderBy
+        }
         this.searchLabel = {};
         this.pageObj.pageNo = 1;
         for (let item in searchObj) {
@@ -421,6 +428,9 @@
             this.$set(this.searchLabel, item, searchObj[item]);
           }
         }
+        if(orderBy){
+          this.$set(this.searchLabel, 'orderBy', orderBy);
+        }
         this.getTableData();
       },
       showCabinet:function(dc){
@@ -434,6 +444,37 @@
         /*let temp=this;
         setTimeout(function(){temp.$refs.cabSearchInput.clear_input();},100)*/
       },
+      //是否需要排序
+      sortableShow(prop){
+        switch(prop){
+          case 'id':
+          case 'name':
+          case 'area':
+            return'custom';
+          default : return false;
+        }
+      },
+      // prop字段
+      propTitle(prop){
+        switch(prop){
+          case 'id': return'i.id';
+          case 'name': return'i.name';
+          case 'area': return'sa.name';
+          default : return prop;
+        }
+      },
+      // 数据排序
+      tableDataSort(item){
+        let orderBy='';
+        if(item.order==='ascending'){
+          orderBy=item.prop;
+        }
+        if(item.order==='descending'){
+          orderBy='-'+item.prop;
+        }
+        this.$set(this.searchLabel, "orderBy", orderBy);
+        this.getTableData();
+      },
     },
     watch: {
       cabinetDc: {

nezha-fronted/src/components/page/config/mib.vue

@@ -54,9 +54,10 @@
             </button>
           </div>
         </div>
-        <el-table :data="tableData" border :height="$tableHeight.normal" style="width: 100%;" ref="mibTable" class="nz-table mib-table" v-scrollBar:el-table="'large'" v-loading="loading">
+        <el-table :data="tableData" border :height="$tableHeight.normal" style="width: 100%;" ref="mibTable" class="nz-table mib-table" v-scrollBar:el-table="'large'" v-loading="loading" @sort-change="tableDataSort">
           <el-table-column :resizable="false" v-for="(item, index) in tablelable" v-if="item.show" :width="item.width" :class-name="item.prop == 'modelsDetail'?'detail-column':''"
-                           :key="`col-${index}`" :label="item.label">
+                           :key="`col-${index}`" :label="item.label" :sortable="sortableShow(item.prop)"
+                           :prop="propTitle(item.prop)">
             <template slot-scope="scope" :column="item">
               <template v-if="item.prop == 'updateUser'" >{{scope.row[item.prop].name}}</template>
               <template v-else-if="item.prop == 'fileName' && scope.row[item.prop]" >
@@ -317,6 +318,10 @@
         this.getTableData();
       },
       search: function (searchObj) {
+        let orderBy='';
+        if(this.searchLabel.orderBy){
+          orderBy=this.searchLabel.orderBy
+        }
         this.pageObj.pageNo = 1;
         this.searchLabel = {};
         for (let item in searchObj) {
@@ -324,6 +329,9 @@
             this.$set(this.searchLabel, item, searchObj[item]);
           }
         }
+        if(orderBy){
+          this.$set(this.searchLabel, 'orderBy', orderBy);
+        }
         this.getTableData();
       },
       downloadMib:function(mibId){
@@ -360,8 +368,41 @@
           file:null,
         };
         this.$refs.mibBox.clearData();
+      },
+      //是否需要排序
+      sortableShow(prop){
+        switch(prop){
+          case 'id':
+          case 'name':
+          case 'filename':
+          case 'updateAt':
+            return'custom';
+          default : return false;
         }
       },
+      // prop字段
+      propTitle(prop){
+        switch(prop){
+          case 'id': return'sm.id';
+          case 'name': return'sm.name';
+          case 'filename': return'sm.file_name';
+          case 'updateAt': return'sm.update_at';
+          default : return prop;
+        }
+      },
+      // 数据排序
+      tableDataSort(item){
+        let orderBy='';
+        if(item.order==='ascending'){
+          orderBy=item.prop;
+        }
+        if(item.order==='descending'){
+          orderBy='-'+item.prop;
+        }
+        this.$set(this.searchLabel, "orderBy", orderBy);
+        this.getTableData();
+      },
+    },
     mounted: function () {
       //是否存在分页缓存
       let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId);

nezha-fronted/src/components/page/config/model.vue

@@ -47,10 +47,26 @@
           </div>
           <div class="pagination-top pagination-top-hide display-none"></div>
         </div>
-        <el-table :data="tableData" border style="width: 100%;" ref="modelTable" class="nz-table" v-scrollBar:el-table="'large'"
+        <el-table :data="tableData"
-                  v-loading="loading" :cell-class-name="assetStatClassName" v-show="mainResizeShow" :height="mainTableHeight">
+                  border style="width: 100%;"
-          <el-table-column :resizable="false" v-for="(item, index) in tablelable" v-if="item.show" :width="item.width"
+                  ref="modelTable"
-                           :key="`col-${index}`" :label="item.label">
+                  class="nz-table"
+                  v-scrollBar
+                  :el-table="'large'"
+                  v-loading="loading"
+                  :cell-class-name="assetStatClassName"
+                  v-show="mainResizeShow"
+                  :height="mainTableHeight"
+                  @sort-change="tableDataSort"
+        >
+          <el-table-column :resizable="false"
+                           v-for="(item, index) in tablelable"
+                           v-if="item.show"
+                           :width="item.width"
+                           :key="`col-${index}`"
+                           :label="item.label"
+                           :sortable="sortableShow(item.prop)"
+                           :prop="propTitle(item.prop)">
             <template slot-scope="scope" :column="item">
               <template v-if="item.prop == 'vendor'" >{{scope.row[item.prop].value}}</template>
               <template v-else-if="item.prop == 'type'" >{{scope.row[item.prop].value}}</template>
@@ -319,6 +335,10 @@
         this.getTableData();
       },
       search: function (searchObj) {
+        let orderBy='';
+        if(this.searchLabel.orderBy){
+          orderBy=this.searchLabel.orderBy
+        }
         this.pageObj.pageNo = 1;
         this.searchLabel = {};
         for (let item in searchObj) {
@@ -326,6 +346,9 @@
             this.$set(this.searchLabel, item, searchObj[item]);
           }
         }
+        if(orderBy){
+          this.$set(this.searchLabel, 'orderBy', orderBy);
+        }
         this.getTableData();
       },
       cleanModel() {
@@ -340,8 +363,41 @@
           typeCode: '',
           uSize:1,
         };
+      },
+      //是否需要排序
+      sortableShow(prop){
+        switch(prop){
+          case 'id':
+          case 'name':
+          case 'type':
+          case 'vendor':
+            return'custom';
+          default : return false;
         }
       },
+      // prop字段
+      propTitle(prop){
+        switch(prop){
+          case 'id': return'mo.id';
+          case 'name': return'mo.name';
+          case 'type': return'dict1.value';
+          case 'vendor': return'dict.value';
+          default : return prop;
+        }
+      },
+      // 数据排序
+      tableDataSort(item){
+        let orderBy='';
+        if(item.order==='ascending'){
+          orderBy=item.prop;
+        }
+        if(item.order==='descending'){
+          orderBy='-'+item.prop;
+        }
+        this.$set(this.searchLabel, "orderBy", orderBy);
+        this.getTableData();
+      },
+    },
     mounted: function () {
       //是否存在分页缓存
       let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId);

nezha-fronted/src/components/page/config/operationlog.vue

@@ -53,7 +53,9 @@
         v-loading="loading"
         v-scrollBar:el-table="'large'"
         :cell-class-name="messageStyle"
-        style="width: 100%;">
+        style="width: 100%;"
+        @sort-change="tableDataSort"
+      >
         <el-table-column
           :resizable="false"
           v-for="(item, index) in tablelable"
@@ -61,6 +63,8 @@
           :width="item.width"
           :key="`col-${index}`"
           :label="item.label"
+          :sortable="sortableShow(item.prop)"
+          :prop="propTitle(item.prop)"
         >
           <template slot-scope="scope" :column="item">
             <span v-if="item.prop == 'time'">
@@ -313,6 +317,10 @@
         this.getTableData();
       },
       search: function (searchObj) {
+        let orderBy='';
+        if(this.searchLabel.orderBy){
+          orderBy=this.searchLabel.orderBy
+        }
         this.searchLabel = {};
         this.pageObj.pageNo = 1;
         for (let item in searchObj) {
@@ -320,8 +328,50 @@
             this.$set(this.searchLabel, item, searchObj[item]);
           }
         }
-        this.getTableData();
+        if(orderBy){
+          this.$set(this.searchLabel, 'orderBy', orderBy);
         }
+        this.getTableData();
+      },
+      //是否需要排序
+      sortableShow(prop){
+        switch(prop){
+          case 'id':
+          case 'username':
+          case 'ip':
+          case 'operation':
+          case 'type':
+          case 'createDate':
+          case 'time':
+            return'custom';
+          default : return false;
+        }
+      },
+      // prop字段
+      propTitle(prop){
+        switch(prop){
+          case 'id': return 'sl.id';
+          case 'username': return 'sl.username';
+          case 'ip': return 'sl.ip';
+          case 'operation': return 'sl.operation';
+          case 'type': return 'sl.type';
+          case 'createDate': return 'sl.create_date';
+          case 'time': return 'sl.time';
+          default : return prop;
+        }
+      },
+      // 数据排序
+      tableDataSort(item){
+        let orderBy='';
+        if(item.order==='ascending'){
+          orderBy=item.prop;
+        }
+        if(item.order==='descending'){
+          orderBy='-'+item.prop;
+        }
+        this.$set(this.searchLabel, "orderBy", orderBy);
+        this.getTableData();
+      },
     },
     computed: {
       isCurrentUser() {

nezha-fronted/src/components/page/config/promServer.vue

@@ -48,9 +48,15 @@
           <div class="pagination-top pagination-top-hide display-none"></div>
         </div>
         <el-table :data="tableData" border v-show="mainResizeShow" :height="mainTableHeight" style="width: 100%;"
-                  v-loading="loading" ref="promTable" class="nz-table" v-scrollBar:el-table="'large'">
+                  v-loading="loading" ref="promTable" class="nz-table" v-scrollBar:el-table="'large'"
-          <el-table-column :resizable="false" v-for="(item, index) in tablelable" v-if="item.show" :width="item.width"
+                  @sort-change="tableDataSort">
-                           :key="`col-${index}`" :label="item.label">
+          <el-table-column :resizable="false" v-for="(item, index) in tablelable"
+                           v-if="item.show"
+                           :width="item.width"
+                           :key="`col-${index}`"
+                           :label="item.label"
+                           :sortable="sortableShow(item.prop)"
+                           :prop="propTitle(item.prop)">
             <template slot-scope="scope" :column="item">
               <span v-if="item.prop == 'idc'" >{{scope.row[item.prop]?scope.row[item.prop].name:'-'}}</span>
 
@@ -616,6 +622,10 @@
         this.getTableData();
       },
       search: function (searchObj) {
+        let orderBy='';
+        if(this.searchLabel.orderBy){
+          orderBy=this.searchLabel.orderBy
+        }
         this.pageObj.pageNo = 1;
         this.searchLabel = {};
         for (let item in searchObj) {
@@ -623,6 +633,9 @@
             this.$set(this.searchLabel, item, searchObj[item]);
           }
         }
+        if(orderBy){
+          this.$set(this.searchLabel, 'orderBy', orderBy);
+        }
         this.getTableData();
       },
       addNewData(type) {
@@ -695,6 +708,41 @@
           item.show(false)
         })
       },
+      //是否需要排序
+      sortableShow(prop){
+        switch(prop){
+          case 'id':
+          case 'idc':
+          case 'host':
+          case 'port':
+          case 'type':
+            return'custom';
+          default : return false;
+        }
+      },
+      // prop字段
+      propTitle(prop){
+        switch(prop){
+          case 'id': return'id';
+          case 'idc': return'idc_id';
+          case 'host': return'host';
+          case 'port': return'port';
+          case 'type': return'type';
+          default : return prop;
+        }
+      },
+      // 数据排序
+      tableDataSort(item){
+        let orderBy='';
+        if(item.order==='ascending'){
+          orderBy=item.prop;
+        }
+        if(item.order==='descending'){
+          orderBy='-'+item.prop;
+        }
+        this.$set(this.searchLabel, "orderBy", orderBy);
+        this.getTableData();
+      },
     },
     mounted: function () {
       //是否存在分页缓存

nezha-fronted/src/components/page/config/terminallog.vue

@@ -53,7 +53,8 @@
         v-scrollBar:el-table="'large'"
         v-loading="loading"
         :cell-class-name="messageStyle"
-        style="width: 100%;">
+        style="width: 100%;"
+        @sort-change="tableDataSort">
         <el-table-column
           :resizable="false"
           v-for="(item, index) in tablelable"
@@ -61,6 +62,8 @@
           :width="item.width"
           :key="`col-${index}`"
           :label="item.label"
+          :sortable="sortableShow(item.prop)"
+          :prop="propTitle(item.prop)"
         >
           <template slot-scope="scope" :column="item">
             <span v-if="item.prop == 'lang'">
@@ -333,6 +336,10 @@
         this.getTableData();
       },
       search: function (searchObj) {
+        let orderBy='';
+        if(this.searchLabel.orderBy){
+          orderBy=this.searchLabel.orderBy
+        }
         this.searchLabel = {};
         this.pageObj.pageNo = 1;
         for (let item in searchObj) {
@@ -340,8 +347,50 @@
             this.$set(this.searchLabel, item, searchObj[item]);
           }
         }
-        this.getTableData();
+        if(orderBy){
+          this.$set(this.searchLabel, 'orderBy', orderBy);
         }
+        this.getTableData();
+      },
+      //是否需要排序
+      sortableShow(prop){
+        switch(prop){
+          case 'id':
+          case 'host':
+          case 'port':
+          case 'protocol':
+          case 'user':
+          case 'cmd':
+          case 'time':
+            return'custom';
+          default : return false;
+        }
+      },
+      // prop字段
+      propTitle(prop){
+        switch(prop){
+          case 'id': return 'id';
+          case 'host': return 'host';
+          case 'port': return 'port';
+          case 'protocol': return 'protocol';
+          case 'user': return 'user';
+          case 'cmd': return 'cmd';
+          case 'time': return 'time';
+          default : return prop;
+        }
+      },
+      // 数据排序
+      tableDataSort(item){
+        let orderBy='';
+        if(item.order==='ascending'){
+          orderBy=item.prop;
+        }
+        if(item.order==='descending'){
+          orderBy='-'+item.prop;
+        }
+        this.$set(this.searchLabel, "orderBy", orderBy);
+        this.getTableData();
+      },
     },
     computed: {
       isCurrentUser() {

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

@@ -94,7 +94,9 @@
           v-show="mainResizeShow"
           ref="endpointTable"
           v-loading="loading"
-          style="width: 100%;">
+          style="width: 100%;"
+          @sort-change="tableDataSort"
+        >
           <el-table-column
             :resizable="false"
             v-for="(item, index) in tablelable"
@@ -103,6 +105,8 @@
             :key="`col-${index}`"
             :label="item.label"
             min-width="110px"
+            :sortable="sortableShow(item.prop)"
+            :prop="propTitle(item.prop)"
           >
             <template slot-scope="scope" :column="item" >
               <span v-if="item.prop == 'asset' && scope.row[item.prop]" class="link" @click="detail(scope.row)">{{scope.row[item.prop].host}}</span>
@@ -578,6 +582,10 @@
       },*/
       //搜索
       endpointSearch: function(searchObj) {
+        let orderBy='';
+        if(this.endpointSearchLabel.orderBy){
+          orderBy=this.endpointSearchLabel.orderBy
+        }
         this.endpointSearchLabel = {};
         this.endpointPageObj.pageNo = 1;
         for (let item in searchObj) {
@@ -585,6 +593,9 @@
             this.$set(this.endpointSearchLabel, item, searchObj[item]);
           }
         }
+        if(orderBy){
+          this.$set(this.endpointSearchLabel, 'orderBy', orderBy);
+        }
         this.getEndpointTableData();
       },
 
@@ -774,6 +785,39 @@
             this.userData = response.data.list
           }
         })
+      },
+      //是否需要排序
+      sortableShow(prop){
+        switch(prop){
+          case 'id':
+          case 'asset':
+          case 'port':
+          case 'path':
+            return'custom';
+          default : return false;
+        }
+      },
+      // prop字段
+      propTitle(prop){
+        switch(prop){
+          case 'id': return'e.id';
+          case 'asset': return'a.host';
+          case 'port': return'e.port';
+          case 'path': return'e.path';
+          default : return prop;
+        }
+      },
+      // 数据排序
+      tableDataSort(item){
+        let orderBy='';
+        if(item.order==='ascending'){
+          orderBy=item.prop;
+        }
+        if(item.order==='descending'){
+          orderBy='-'+item.prop;
+        }
+        this.$set(this.endpointSearchLabel, "orderBy", orderBy);
+        this.getEndpointTableData();
       }
     },
     created() {