报告

src/views/report/Overvoewnew.vue

@@ -166,23 +166,23 @@
           :scroll="{ x: 700 }"
           :pagination="false"
           @resizeColumn="handleResizeColumn"
+          @change="handleTableChange"
           :row-selection="{
           selectedRowKeys: selectedRowKeys,
           onChange: onSelectChange,
         }"
       >
-        <template v-slot:header>
+        <template #headerCell="{ column }">
           <draggable
-              v-model="columns"
-              item-key="key"
+              tag="span"
+              :item-key="column.dataIndex"
               :list="columns"
-              :group="{ name: 'columns', pull: 'clone', put: false }"
+              handle=".handle"
           >
-            <template #item="{ element }">
-              <a-table-column :title="element.title" :dataIndex="element.dataIndex" :key="element.key"></a-table-column>
-            </template>
+            <span class="handle">{{ column.title }}</span>
           </draggable>
         </template>
+
       </a-table>
       <div class="tableBox">
         <div class="pa">
@@ -212,7 +212,7 @@ import dayjs from "dayjs";
 import {message} from "ant-design-vue";
 import Cookies from "vue-cookies";
 import {useStore} from "vuex";
-// import orgjson from './org.json';
+import orgjson from './org.json';
 // import fl from './fl.json';
 import PostSelectNew from "@/components/growthpath/PostSelect.vue";
 import OfficeSelect from "@/components/growthpath/OfficeSelect.vue";
@@ -252,6 +252,7 @@ export default {
       statusList: [],
       content_type: null,
       categoryTypeId: null,
+      tableSorts: [],
     });
 
     const onDragEnd = (event) => {
@@ -292,7 +293,7 @@ export default {
       return result;
     }
 
-    function afterApiPage(res){
+    function afterApiPage(res) {
       if (res && res.data) {
         let resData = res.data;
         if (resData.code == 200) {
@@ -344,7 +345,7 @@ export default {
           token: Cookies.get("token"),
         },
       }).then((res) => {
-        if (!res || !res.data)  {
+        if (!res || !res.data) {
           message.error("服务器异常");
           return;
         }
@@ -407,8 +408,8 @@ export default {
         }
       }
 
-      const res = await api.userGetUserOrg({});
-      // const res = orgjson;
+      // const res = await api.userGetUserOrg({});
+      const res = orgjson;
       if (res != null && res.data != null && res.data.result != null && res.data.result.orgTreeList != null) {
         orgArray = flattenOrgTree(res.data.result.orgTreeList);
       }
@@ -445,6 +446,7 @@ export default {
         getTabData();
       }
     };
+
     function fetchExportReport(data) {
       //根据逗号分隔开的id
       axios({
@@ -459,6 +461,7 @@ export default {
         downLoad(res.data, tabIndexMap[state.currentTab] + ".xlsx");
       });
     }
+
     // 导出按钮
     const exportClick = async () => {
       if (!state.selectedRowKeys?.length) {
@@ -491,9 +494,9 @@ export default {
           page: state.pageNo,
           size: state.pageSize,
           orgPath: state.orgPath,
+          tableSorts: state.tableSorts,
         });
-      }
-      else if (state.currentTab === 5) {
+      } else if (state.currentTab === 5) {
         //案例列表
         res = await api.casePageList({
           createName: state.creator,
@@ -504,9 +507,9 @@ export default {
           page: state.pageNo,
           size: state.pageSize,
           orgPath: state.orgPath,
+          tableSorts: state.tableSorts
         });
-      }
-      else if (state.currentTab === 6) {
+      } else if (state.currentTab === 6) {
         //专业力
         res = await api.professionalPageList({
           startCreateTime: state.publishTime && state.publishTime[0] ? state.publishTime[0] + " 00:00:00" : null,
@@ -517,9 +520,9 @@ export default {
           orgPath: state.orgPath,
           stdPosition: state.stdPosition,
           qualsLevelCode: state.qualsLevelCode,
+          tableSorts: state.tableSorts
         });
-      }
-      else if (state.currentTab === 3) {
+      } else if (state.currentTab === 3) {
         res = await api.coursePageList({
           page: state.pageNo,
           size: state.pageSize,
@@ -531,7 +534,8 @@ export default {
           startCreateTime: state.publishTime && state.publishTime[0] ? state.publishTime[0] + " 00:00:00" : null,
           endCreateTime: state.publishTime && state.publishTime[1] ? state.publishTime[1] + " 23:59:59" : null,
           orgPath: state.orgPath,
-          category: findPathByValue(sysTypeOptions, state.categoryTypeId)
+          category: findPathByValue(sysTypeOptions, state.categoryTypeId),
+          tableSorts: state.tableSorts
         });
       } else if (state.currentTab === 2) {
         res = await api.facePageList({
@@ -544,6 +548,7 @@ export default {
           startTime: state.publishTime && state.publishTime[0] ? state.publishTime[0] + " 00:00:00" : null,
           endTime: state.publishTime && state.publishTime[1] ? state.publishTime[1] + " 23:59:59" : null,
           orgPath: state.orgPath,
+          tableSorts: state.tableSorts
         });
       } else if (state.currentTab === 1) {
         res = await api.routerPageList({
@@ -555,7 +560,8 @@ export default {
           startCreateTime: state.publishTime && state.publishTime[0] ? state.publishTime[0] + " 00:00:00" : null,
           endCreateTime: state.publishTime && state.publishTime[1] ? state.publishTime[1] + " 23:59:59" : null,
           orgPath: state.orgPath,
-          status: state.status
+          status: state.status,
+          tableSorts: state.tableSorts
         });
       } else if (state.currentTab === 0) {
         res = await api.projectPageList({
@@ -568,8 +574,8 @@ export default {
           startCreateTime: state.publishTime && state.publishTime[0] ? state.publishTime[0] + " 00:00:00" : null,
           endCreateTime: state.publishTime && state.publishTime[1] ? state.publishTime[1] + " 23:59:59" : null,
           orgPath: state.orgPath,
-          status: state.status && (state.status == 1 ? "进行中": "已结束"),
-
+          status: state.status && (state.status == 1 ? "进行中" : "已结束"),
+          tableSorts: state.tableSorts
         });
       }
       afterApiPage(res);
@@ -610,6 +616,7 @@ export default {
       1: "测试",
       2: "练习"
     };
+
     const tabClick = (index) => {
       state.selectedRowKeys = [];
       state.currentTab = index;
@@ -627,6 +634,7 @@ export default {
             ellipsis: true,
             align: "left",
             fixed: "left",
+            sorter: true,
           },
           {
             title: "归属组织",
@@ -660,6 +668,7 @@ export default {
             key: "createDate",
             width: 120,
             align: "center",
+            sorter: true,
           },
           {
             title: "发布时间",
@@ -668,6 +677,7 @@ export default {
             key: "publishTime",
             width: 120,
             align: "center",
+            sorter: true,
           },
           {
             title: "状态",
@@ -820,6 +830,7 @@ export default {
             ellipsis: true,
             align: "left",
             fixed: "left",
+            sorter: true,
           },
           {
             title: "归属组织",
@@ -919,6 +930,7 @@ export default {
             key: "passRate",
             width: 120,
             align: "center",
+            sorter: true,
             customRender: (text) => {
               return formatTextRate(text.value);
             },
@@ -975,6 +987,7 @@ export default {
             key: "createTime",
             width: 120,
             align: "center",
+            sorter: true,
             customRender: (text) => {
               return formatDate(text.value);
             },
@@ -987,8 +1000,7 @@ export default {
             align: "center",
           },
         ];
-      }
-      else if (index === 6) {
+      } else if (index === 6) {
         columns.value = [
           {
             title: "岗位名称",
@@ -998,6 +1010,7 @@ export default {
             key: "stdPositionName",
             width: 120,
             align: "left",
+            sorter: true,
           },
           {
             title: "任职资格等级",
@@ -1005,6 +1018,7 @@ export default {
             ellipsis: true,
             align: "center",
             width: 120,
+            sorter: true,
           },
           {
             title: "band",
@@ -1019,6 +1033,7 @@ export default {
             ellipsis: true,
             align: "center",
             width: 120,
+            sorter: true,
           },
           {
             title: "必修任务数",
@@ -1040,6 +1055,7 @@ export default {
             ellipsis: true,
             align: "center",
             width: 120,
+            sorter: true,
           },
           {
             title: "完成人数",
@@ -1095,6 +1111,7 @@ export default {
             ellipsis: true,
             align: "center",
             width: 120,
+            sorter: true,
             customRender: (text) => {
               return formatDate(text.value);
             },
@@ -1111,8 +1128,7 @@ export default {
             },
           },
         ];
-      }
-      else if (index === 5) {
+      } else if (index === 5) {
         columns.value = [
           {
             title: "案例名称",
@@ -1122,6 +1138,7 @@ export default {
             key: "caseName",
             width: 150,
             align: "left",
+            sorter: true,
           },
           {
             title: "归属组织",
@@ -1152,6 +1169,7 @@ export default {
             ellipsis: true,
             align: "center",
             width: 120,
+            sorter: true,
             customRender: (text) => {
               return formatDate(text.value);
             },
@@ -1170,6 +1188,7 @@ export default {
             ellipsis: true,
             align: "center",
             width: 120,
+            sorter: true,
           },
           {
             title: "收藏数",
@@ -1177,6 +1196,7 @@ export default {
             ellipsis: true,
             align: "center",
             width: 120,
+            sorter: true,
           },
           {
             title: "点赞数",
@@ -1184,6 +1204,7 @@ export default {
             ellipsis: true,
             align: "center",
             width: 120,
+            sorter: true,
           },
 
           {
@@ -1192,6 +1213,7 @@ export default {
             ellipsis: true,
             align: "center",
             width: 120,
+            sorter: true,
           },
           {
             title: "是否推荐",
@@ -1238,6 +1260,7 @@ export default {
             ellipsis: true,
             align: "left",
             fixed: "left",
+            sorter: true,
           },
           {
             title: "归属组织",
@@ -1255,7 +1278,7 @@ export default {
             key: "category",
             width: 120,
             align: "center",
-            fixed: "left",
+            sorter: true,
           },
           {
             title: "授课老师",
@@ -1264,7 +1287,6 @@ export default {
             key: "teacher",
             width: 120,
             align: "center",
-            fixed: "left",
           },
           {
             title: "关键字",
@@ -1370,6 +1392,7 @@ export default {
             key: "createTime",
             width: 120,
             align: "center",
+            sorter: true,
             customRender: (text) => {
               return formatDate(text.value)
             },
@@ -1381,6 +1404,7 @@ export default {
             key: "createName",
             width: 120,
             align: "center",
+            sorter: true,
           },
         ];
       } else if (index === 2) {
@@ -1393,6 +1417,7 @@ export default {
             ellipsis: true,
             align: "left",
             fixed: "left",
+            sorter: true,
           },
           {
             title: "归属组织",
@@ -1484,6 +1509,7 @@ export default {
             key: "studentNum",
             width: 120,
             align: "center",
+            sorter: true,
           },
           {
             title: "参评人数",
@@ -1567,6 +1593,7 @@ export default {
             key: "reportCreateTime",
             width: 120,
             align: "center",
+            sorter: true,
             customRender: (text) => {
               return formatDate(text.value)
             },
@@ -1582,6 +1609,7 @@ export default {
             ellipsis: true,
             align: "left",
             fixed: "left",
+            sorter: true,
           },
           {
             title: "归属组织",
@@ -1618,6 +1646,7 @@ export default {
             key: "createTime",
             width: 120,
             align: "center",
+            sorter: true,
             customRender: (text) => {
               return text.value ? formatDate(text.value) : "";
             },
@@ -1664,7 +1693,7 @@ export default {
             key: "studentLearnRate",
             width: 120,
             align: "center",
-            customRender (text) {
+            customRender(text) {
               return formatTextRate(text.value);
             },
           },
@@ -1683,7 +1712,7 @@ export default {
             key: "studentCompleteRate",
             width: 120,
             align: "center",
-            customRender (text) {
+            customRender(text) {
               return formatTextRate(text.value);
             },
           },
@@ -1702,7 +1731,7 @@ export default {
             key: "taskRate",
             width: 120,
             align: "center",
-            customRender (text) {
+            customRender(text) {
               return formatTextRate(text.value);
             },
           },
@@ -1769,7 +1798,7 @@ export default {
       if ([0, 1].includes(index)) {
         state.statusList = statusArr[index];
       }
-
+      state.tableSorts = [];
       getTableData();
       getTabData();
     };
@@ -1801,6 +1830,21 @@ export default {
       col.width = w;
     };
 
+    // 表格 change 事件（分页、排序等）
+    const handleTableChange = (pag, filters, sorter) => {
+      const {field, order} = sorter;
+      if (order) {
+        state.tableSorts = [{
+          sortField: field,
+          sortOrder: order === 'ascend' ? 'asc' : order === 'descend' ? 'desc' : null,
+        }];
+      } else {
+        state.tableSorts = [];
+      }
+      getTableData();
+    };
+
+
     const routerStatusObj = {
       "0": "草稿",
       "1": "已发布",
@@ -1816,11 +1860,12 @@ export default {
     };
     //时间格式化 后续抽到 工具类中
     const formatTime_ = (time, format = "YYYY-MM-DD HH:mm:ss") => {
-      if(!time){
+      if (!time) {
         return null;
       }
       return dayjs(time).format(format);
     };
+
     //后续抽到 工具类中
     function formatTextRate(value) {
       if (!value && value != 0) {
@@ -1839,6 +1884,7 @@ export default {
     // 获取名称路径的函数
     function findPathByValue(data, value) {
       debugger;
+
       function recursiveSearch(nodes, value, path) {
         for (let node of nodes) {
           if (node.value === value) {
@@ -1879,7 +1925,8 @@ export default {
       orgChange,
       handleResizeColumn,
       onDragEnd,
-      sysTypeOptions
+      sysTypeOptions,
+      handleTableChange
     };
   },
 };
@@ -2133,4 +2180,7 @@ export default {
 .ant-table-tbody > tr > td {
   user-select: text !important;
 }
+.handle {
+  cursor: move;
+}
 </style>