考勤列表改为分页显示。

src/views/business/workAttendance-list.vue

@@ -1,5 +1,7 @@
 <template>
-  <div v-loading="downloadLoading">
+  <div v-loading="downloadLoading" 
+    element-loading-text="加载中"
+    element-loading-spinner="el-icon-loading">
     <el-breadcrumb separator=">">
       <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
       <el-breadcrumb-item>
@@ -92,7 +94,7 @@
       :data="tableData"
       :height="tableHeight"
       style="width: 100%">
-      <el-table-column label="序号" fixed="left" type="index"></el-table-column>
+      <el-table-column label="序号" fixed="left" type="index" :index="indexMethod"></el-table-column>
       <el-table-column label="姓名" fixed="left" prop="name"></el-table-column>
       <el-table-column label="单位" prop="company"></el-table-column>
       <el-table-column label="部门" prop="department"></el-table-column>
@@ -116,6 +118,14 @@
         </el-table-column>
       </template>
     </el-table>
+    <el-pagination
+      :current-page.sync="pageIndex"
+      :total="totalElements"
+      :page-sizes="pageSizeList"
+      @current-change="changePage"
+      @size-change="pageSizeChange"
+      layout="total, sizes, prev, pager, next, jumper"
+    ></el-pagination>
   </div>
 </template>
 <script>
@@ -145,12 +155,12 @@ export default {
       loading: false,
       tableData: [],
       pageIndex: 1,
-      pageSize: 10,
+      pageSize: 20,
       totalPages: 0,
       totalElements: 0,
       field: "",
       direction: "",
-      pageSizeList: [10, 20, 30],
+      pageSizeList: [20, 30, 50],
       multipleSelection: [],
       showModal: false,
       modalTitle: "",
@@ -185,6 +195,62 @@ export default {
     this.getCurrentMonthFirst();
   },
   methods: {
+    indexMethod(index){
+      return (this.pageIndex-1)*this.pageSize + (index+1);
+    },
+    changePage(pageIndex) {
+      var self = this;
+      self.pageIndex = pageIndex;
+
+      var formData = new FormData();
+
+      formData.append("pageIndex", self.pageIndex);
+      formData.append("pageSize", self.pageSize);
+
+      formData.append("companyId", self.queryModel.companyId);
+      formData.append("name", self.queryModel.name);
+      formData.append("jobNumber", self.queryModel.jobNumber);
+
+      var startDate = "";
+      var endDate = "";
+      var timeRanges = self.queryModel.timeRanges + "";
+
+      if (timeRanges != "" && timeRanges != null) {
+        timeRanges = timeRanges.split(",");
+        startDate = timeRanges[0];
+        endDate = timeRanges[1];
+      }
+
+      formData.append("startDate", startDate);
+      formData.append("endDate", endDate);
+      
+      self.downloadLoading = true;
+
+      workAttendanceApi.statList(formData).then(function(response) {
+        var jsonData = response.data;
+
+        self.downloadLoading = false;
+        
+        if (jsonData.result) {
+          self.tableData = jsonData.data.data;
+          self.totalPages = jsonData.data.totalPage;
+          self.totalElements = jsonData.data.totalElements;
+
+          self.tableHeight = window.innerHeight - 280;
+          self.dayColumns = jsonData.data.dayColumns;
+          self.tmplKey = jsonData.data.tmplKey;
+        } else {
+          self.$message({
+            type: "warning",
+            message: jsonData.message
+          });
+        }
+      });
+    },
+    pageSizeChange(pageSize) {
+      this.pageSize = pageSize;
+      this.changePage(1);
+    },
     showItem(item){
       var content = [];
 
@@ -230,43 +296,7 @@ export default {
 
       this.$refs["queryForm"].validate(valid => {
         if (valid) {
-          self.downloadLoading = true;      
-          var formData = new FormData();
-
-          formData.append("companyId", self.queryModel.companyId);
-          formData.append("name", self.queryModel.name);
-          formData.append("jobNumber", self.queryModel.jobNumber);
-
-          var startDate = "";
-          var endDate = "";
-          var timeRanges = self.queryModel.timeRanges + "";
-
-          if (timeRanges != "" && timeRanges != null) {
-            timeRanges = timeRanges.split(",");
-            startDate = timeRanges[0];
-            endDate = timeRanges[1];
-          }
-
-          formData.append("startDate", startDate);
-          formData.append("endDate", endDate);
-
-          workAttendanceApi.statList(formData).then(function(response) {
-            var jsonData = response.data;
-
-            self.downloadLoading = false;
-            
-            if (jsonData.result) {
-              self.tableData = jsonData.data.list;
-              self.tableHeight = window.innerHeight - 280;
-              self.dayColumns = jsonData.data.dayColumns;
-              self.tmplKey = jsonData.data.tmplKey;
-            } else {
-              self.$message({
-                type: "warning",
-                message: jsonData.message
-              });
-            }
-          });
+          self.changePage(1);
         }
       });
     },
@@ -279,16 +309,14 @@ export default {
       //导出
       this.$refs["queryForm"].validate(valid => {
         if (valid) {
-          if(self.tmplKey==null || self.tmplKey.length==0){
-            self.$message.warning("请先查询!");
-            return;
-          }
-
           self.downloadLoading = true;
 
           var formData = new FormData();
-          formData.append("tmplKey", self.tmplKey);
-          
+
+          formData.append("companyId", self.queryModel.companyId);
+          formData.append("name", self.queryModel.name);
+          formData.append("jobNumber", self.queryModel.jobNumber);
+
           var startDate = "";
           var endDate = "";
           var timeRanges = self.queryModel.timeRanges + "";
@@ -301,7 +329,7 @@ export default {
 
           formData.append("startDate", startDate);
           formData.append("endDate", endDate);
-
+          
           workAttendanceApi.exportXls(formData).then(function(response) {
             var jsonData = response.data;
 
@@ -311,7 +339,8 @@ export default {
               self.$message({
                 type: "success",
                 message: `报表已生成，<a href="${jsonData.data}">请点击链接下载</a>`,
-                dangerouslyUseHTMLString: true
+                dangerouslyUseHTMLString: true,
+                duration: 30000
               });
             } else {
               self.$message({