feat：二级表格页面添加排序功能

2020-07-21 10:03:31 +08:00
parent f26e72bbd7
commit b5311a5eb6
4 changed files with 163 additions and 9 deletions
--- a/nezha-fronted/src/components/charts/chart-alert-list.vue
+++ b/nezha-fronted/src/components/charts/chart-alert-list.vue
@@ -57,7 +57,10 @@
            v-scrollBar:el-table="'normal'"
            :cell-class-name="labelsClassName"
            @selection-change="selectChange"
-            style="width: 100%;">
+            style="width: 100%;"
+            @sort-change="tableDataSort"
+            v-loading="loading"
+          >
            <el-table-column
              :resizable="false"
              type="selection"
@@ -73,6 +76,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'">
@@ -158,7 +163,9 @@
            v-scrollBar:el-table="'large'"
            :cell-class-name="labelsClassName"
            @selection-change="selectChange"
-            style="width: 100%;">
+            style="width: 100%;"
+
+          >
            <el-table-column
              :resizable="false"
              type="selection"
@@ -327,6 +334,7 @@ export default {
          pageSize: 50,
          total: 0
        },
+        loading:false,// 表格数据加载loading
        screenPageObj:{
          pageNo: 1,
          pageSize: 50,
@@ -361,6 +369,7 @@ export default {
        divFirstShow:false,
        searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()],//全屏显示的时间
        oldSearchTime: [],
+        searchLabel:{},
        tableTitle: [
          {
            label: 'ID',
@@ -694,6 +703,7 @@ export default {
      },
      getAlertList: function (filterType,isPreview=false,chartInfo) {
        this.resize();
+        this.loading=true;
        this.isPreview = isPreview;
        let queryParam={
          pageSize:this.pageObj.pageSize,
@@ -729,6 +739,9 @@ export default {
            queryParam.state=param.state;
          }
        }
+        if(this.searchLabel.orderBy){
+          queryParam.orderBy=this.searchLabel.orderBy;
+        }
        this.startLoading(filterType);
        this.$get('/alert/message', queryParam).then(response => {
          if (response.code == 200) {
@@ -759,6 +772,7 @@ export default {
            this.divFirstShow = true;

            this.firstShow = true; // 展示操作按键
+            this.loading=false;
            this.endLoading(filterType);
          }else{
            this.isError = true;
@@ -809,7 +823,6 @@ export default {
      },
      elementsetHide() {
        //悬浮点击空白隐藏
-        console.log(11112)
        this.$refs.elementset.elementsetHide();
      },
      tablelabelEmit(data) {
@@ -947,6 +960,43 @@ export default {
        setData(chartItem, seriesItem, panelId, filter,area,errorMsg) {
          console.info(chartItem,title)
        },
+      //是否需要排序
+      sortableShow(prop){
+        switch(prop){
+          case 'id':
+          case 'state':
+          case 'alertRule':
+          case 'severity':
+          case 'startAt':
+          case 'endAt':
+            return'custom';
+          default : return false;
+        }
+      },
+      // prop字段
+      propTitle(prop){
+        switch(prop){
+          case 'id': return'am.id';
+          case 'state': return'am.state';
+          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.$set(this.searchLabel, "orderBy", orderBy);
+        this.getAlertList();
+      },

    },
    mounted() {
--- a/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTab.vue
@@ -36,7 +36,9 @@
      :height="$tableHeight.openSubList.subList"
      :cell-class-name="labelsClassName"
      @selection-change="selectChange"
-      style="width: 100%;">
+      style="width: 100%;"
+      @sort-change="tableDataSort"
+    >
      <el-table-column
        :resizable="false"
        type="selection"
@@ -53,6 +55,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'">
@@ -698,6 +702,10 @@
      },
      search: function (searchObj) {
        this.searchLabel = {};
+        let orderBy='';
+        if(this.searchLabel.orderBy){
+          orderBy=this.searchLabel.orderBy
+        }
        if (this.from == "alertRule") {
          this.searchLabel.ruleId = this.obj.id;
        } else if (this.from == "asset") {
@@ -709,6 +717,9 @@
            this.$set(this.searchLabel, item, searchObj[item]);
          }
        }
+        if(orderBy){
+          this.$set(this.searchLabel, 'orderBy', orderBy);
+        }
        this.getAlertList();
      },
      closeSubList() {
@@ -721,7 +732,44 @@
          this.viewAssetState = false
          this.$refs['assetEditUnit'].tabView = false
        }
-      }
+      },
+      //是否需要排序
+      sortableShow(prop){
+        switch(prop){
+          case 'id':
+          case 'state':
+          case 'alertRule':
+          case 'severity':
+          case 'startAt':
+          case 'endAt':
+            return'custom';
+          default : return false;
+        }
+      },
+      // prop字段
+      propTitle(prop){
+        switch(prop){
+          case 'id': return'am.id';
+          case 'state': return'am.state';
+          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.$set(this.searchLabel, "orderBy", orderBy);
+        this.getAlertList();
+      },
    },
    watch: {
      obj: {
--- a/nezha-fronted/src/components/common/bottomBox/tabs/endpointTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/endpointTab.vue
@@ -34,7 +34,9 @@
      :height="$tableHeight.noPagination"
      v-scrollBar:el-table="'large'"
      ref="endpointTable"
-      style="width: 100%;">
+      style="width: 100%;"
+      @sort-change="tableDataSort"
+    >
      <el-table-column
        :resizable="false"
        v-for="(item, index) in tablelable"
@@ -43,6 +45,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="">{{scope.row[item.prop].host}}</span>
@@ -113,7 +117,9 @@
        showTopBtn: false, //top按钮是否显示
        toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
        tableHover: false, //控制滚动条和top按钮同时出现
+        endpointSearchLabel:{

+        },
        loading: false,
        tableTitle: [
          {
@@ -201,7 +207,9 @@
      },
      getTableData() {
        this.loading = true;
-        this.$get('/endpoint?assetId=' + this.asset.id + 'pageSize=-1').then(response => {
+        this.$set(this.endpointSearchLabel, "assetId", this.asset.id);
+        this.$set(this.endpointSearchLabel, "pageSize", '-1');
+        this.$get('/endpoint',this.endpointSearchLabel).then(response => {
          this.loading = false;
          if (response.code === 200) {
            this.tableData = response.data.list;
@@ -240,6 +248,20 @@
            this.$set(this.searchLabel, item, searchObj[item]);
          }
        }*/
+        let orderBy='';
+        if(this.searchLabel.orderBy){
+          orderBy=this.searchLabel.orderBy
+        }
+        this.searchLabel={};
+        this.pageObj.pageNo = 1;
+        for (let item in searchObj) {
+          if (searchObj[item]) {
+            this.$set(this.searchLabel, item, searchObj[item]);
+          }
+        }
+        if(orderBy){
+          this.$set(this.searchLabel, 'orderBy', orderBy);
+        }
        this.getTableData();
      },
      closeSubList() {
@@ -321,6 +343,39 @@
          }
        }
      },
+      //是否需要排序
+      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.getTableData();
+      },
    },
    watch: {
      obj: {
@@ -329,7 +384,9 @@
        handler(n) {
          if (n) {
            this.asset = JSON.parse(JSON.stringify(n));
-            this.getTableData();
+            this.$nextTick(()=>{
+              this.getTableData();
+            })
          }
        }
      }
--- a/nezha-fronted/src/components/page/asset/asset.vue
+++ b/nezha-fronted/src/components/page/asset/asset.vue
@@ -997,7 +997,6 @@
      getLeftMenuList(){
        this.$get('asset/filter').then(response => {
          if (response.code === 200) {
-            console.log(response.data);
            //dc
            this.checkListData = this.IDCOptionData = response.data.dc;
            this.markOptionData(this.IDCOptionData);