点击排序时增加表格锁定

src/views/perfManage/goldTarget/index.vue

@@ -74,7 +74,7 @@ let queryParams: any = reactive({
 
 /**表格分页、排序、筛选变化时触发操作, 排序方式，取值为 ascend descend */
 function fnTableChange(pagination: any, filters: any, sorter: any, extra: any) {
-  console.log(sorter)
+  tableState.loading = true;
   const { columnKey, order } = sorter;
   if (order) {
     queryParams.sortField = columnKey;
@@ -198,78 +198,84 @@ function fnDesign() {
   let goldXDate: any = [];
   let goldYData: any = [];
   let hideAll: any = {};
-  goldData(queryParams).then(res => {
+  goldData(queryParams)
-    if (res.code === RESULT_CODE_SUCCESS) {
+    .then(res => {
-      if (res.data.length > 0) {
+      if (res.code === RESULT_CODE_SUCCESS) {
-        console.log(res.data)
+        if (res.data.length > 0) {
-        tableState.data = res.data;
+          console.log(res.data);
-        goldXDate = res.data.map((item: any) => item.timeGroup);
+          tableState.data = res.data;
-        goldYData = Object.keys(res.data[0])
+          goldXDate = res.data.map((item: any) => item.timeGroup);
-          .filter(key => !['timeGroup', 'neName', 'startIndex'].includes(key))
+          goldYData = Object.keys(res.data[0])
-          .map(key => {
+            .filter(key => !['timeGroup', 'neName', 'startIndex'].includes(key))
-            const title: any = findTitleByKey(key);
+            .map(key => {
-            hideAll[title] = false;
+              const title: any = findTitleByKey(key);
-            return {
+              hideAll[title] = false;
-              name: title,
+              return {
-              data: res.data.map((item: any) => parseInt(item[key])),
+                name: title,
-            };
+                data: res.data.map((item: any) => parseInt(item[key])),
+              };
+            });
+        } else {
+          tableState.data = [];
+          state.designTreeData.forEach((item: any) => {
+            goldYData.push({ name: item.title, data: [] });
           });
+          message.warning({
+            content: t('views.perfManage.goldTarget.nullTip'),
+            duration: 2,
+          });
+        }
+
+        // 图标参数
+        const option = {
+          xDatas: goldXDate,
+          yDatas: goldYData,
+          tooltip: {
+            trigger: 'axis',
+            formatter: function (datas: any) {
+              let res = datas[0].name + '<br/>';
+              for (const item of datas) {
+                res += `${item.marker} ${item.seriesName}:${item.data}<br/>`;
+              }
+              return res;
+            },
+          },
+          legend: {
+            //  orient: 'vertical',
+            //  left: 'left',
+            type: 'scroll',
+            orient: 'vertical', // vertical
+            right: 20,
+            //itemWidth: 20,
+            itemGap: 25,
+            textStyle: {
+              color: '#646A73',
+            },
+            icon: 'circle',
+            selected: hideAll,
+          },
+          grid: {
+            left: '10%',
+            right: '30%',
+            bottom: '20%',
+          },
+          yAxis: [
+            { type: 'value', splitNumber: 4, axisLabel: { fontSize: 10 } },
+          ],
+        };
+        chartsOption.perfChart = option;
+
+        //处理表格数据
       } else {
-        tableState.data = [];
-        state.designTreeData.forEach((item: any) => {
-          goldYData.push({ name: item.title, data: [] });
-        });
         message.warning({
-          content: t('views.perfManage.goldTarget.nullTip'),
+          content: t('common.getInfoFail'),
           duration: 2,
         });
       }
-
+    })
-      // 图标参数
+    .finally(() => {
-      const option = {
+      tableState.loading = false;
-        xDatas: goldXDate,
+    });
-        yDatas: goldYData,
-        tooltip: {
-          trigger: 'axis',
-          formatter: function (datas: any) {
-            let res = datas[0].name + '<br/>';
-            for (const item of datas) {
-              res += `${item.marker} ${item.seriesName}:${item.data}<br/>`;
-            }
-            return res;
-          },
-        },
-        legend: {
-          //  orient: 'vertical',
-          //  left: 'left',
-          type: 'scroll',
-          orient: 'vertical', // vertical
-          right: 20,
-          //itemWidth: 20,
-          itemGap: 25,
-          textStyle: {
-            color: '#646A73',
-          },
-          icon: 'circle',
-          selected: hideAll,
-        },
-        grid: {
-          left: '10%',
-          right: '30%',
-          bottom: '20%',
-        },
-        yAxis: [{ type: 'value', splitNumber: 4, axisLabel: { fontSize: 10 } }],
-      };
-      chartsOption.perfChart = option;
-
-      //处理表格数据
-    } else {
-      message.warning({
-        content: t('common.getInfoFail'),
-        duration: 2,
-      });
-    }
-  });
 }
 
 /**