优化任务管理系统的分页

src/trace/FinishedProjectTraces.vue

@@ -60,10 +60,10 @@
                 <span>
                   <Checkbox
                     :id="'trace-finish-' + element.id"
-                    v-model="element.finished"
+                    v-model:value="element.finished"
                     class-name="terms"
                     class="trace-checkbox"
-                    @input="updateTracefinished(element)"
+                    @update:value="updateTracefinished(element)"
                   />
                 </span>
                 <span @click="openLine(element)">
@@ -95,7 +95,7 @@
         </div>
 			
         <div class="pull-right">
-          <Pagination :pagination="pagination2" :callback="listFinishedTask" />
+          <Pagination :pagination="pagination2" :callback="listFinishedTask" @click="updateRouter" />
         </div>
       </div>
     </div>
@@ -140,6 +140,8 @@ export default {
     var _self = this;
     this.projectId = _self.$route.params.projectId;
     this.projectName = _self.$route.query.projectName;
+    this.pagination2.current_page = this.$route.query.currentPage;
+    this.pagination2.per_page = this.$route.query.pageSize;
     this.personNumber();
     this.listFinishedTask();
   },
@@ -148,7 +150,7 @@ export default {
       this.pagination2.per_page = newPageSize;
       this.pagination2.current_page = 1;
       // 刷新界面
-      this.listFinishedTask();
+      this.updateRouter();
     },
     end(evt) {
       var _self = this;
@@ -185,6 +187,22 @@ export default {
       this.$router.push('/trace/traceUpdate/' + trace.id);
     },
 
+    updateRouter: function () {
+      this.$router.push({
+        path: '/trace/finishedProjectTraces/' + this.projectId,
+        query: {
+          projectName: this.projectName,
+          currentPage: this.pagination2.current_page,
+          pageSize: this.pagination2.per_page,
+        },
+      });
+
+      console.log(this.$route);
+      // console.log(this.$router.query.currentPage);
+      // console.log(this.$router.query.pageSize);
+      this.listFinishedTask();
+    },
+
     /**
          * 初始化项目
          */

src/trace/NotFinishedProjectTraces.vue

@@ -64,7 +64,7 @@
       </div>
 
       <div class="pull-right">
-        <Pagination :pagination="pagination" :callback="listNotFinishedTask" />
+        <Pagination :pagination="pagination" :callback="listNotFinishedTask" @click="updateRouter" />
       </div>
     </div>
     <!-- <Pagination :pagination="pagination" :callback="listNotFinishedTask"  v-if="noFinishedTraces.length"></Pagination> -->
@@ -121,6 +121,8 @@ export default {
     var _self = this;
     this.projectId = _self.$route.params.projectId;
     this.projectName = _self.$route.query.projectName;
+    this.pagination.current_page = this.$route.query.currentPage;
+    this.pagination.per_page = this.$route.query.pageSize;
     this.personNumber();
     this.adminPersonNumber();
     this.listNotFinishedTask();
@@ -131,7 +133,7 @@ export default {
       this.pagination.per_page = newPageSize;
       this.pagination.current_page = 1;
       // 刷新界面
-      this.listNotFinishedTask();
+      this.updateRouter();
     },
     end(evt) {
       var _self = this;
@@ -168,12 +170,36 @@ export default {
       this.$router.push('/trace/traceUpdate/' + trace.id);
     },
 
+    updateRouter: function () {
+      this.$router.push({
+        path: '/trace/notFinishedProjectTraces/' + this.projectId,
+        query: {
+          projectName: this.projectName,
+          currentPage: this.pagination.current_page,
+          pageSize: this.pagination.per_page,
+        },
+      });
+
+      console.log(this.$route);
+      // console.log(this.$router.query.currentPage);
+      // console.log(this.$router.query.pageSize);
+      this.listNotFinishedTask();
+    },
+
     /**
 			 * 打开已完成的项目任务
 			 */
     openFinishedProjectTraces: function() {
       var _self = this;
-      this.$router.push('/trace/finishedProjectTraces/' + _self.projectId + '?projectName=' + _self.projectName);
+      this.$router.push({
+        path: '/trace/finishedProjectTraces/' + _self.projectId,
+        query: {
+          projectName: _self.projectName,
+          currentPage: 1,
+          pageSize: 10,
+        },
+      });
+      
     },
 
     listNotFinishedTask: function() {

src/trace/ProjectList.vue

@@ -194,6 +194,8 @@ export default {
         path: '/trace/notFinishedProjectTraces/' + obj.id,
         query: {
           projectName: obj.name,
+          currentPage: 1,
+          pageSize: 10,
         },
       });
     },

src/trace/TraceDynamic.vue

@@ -82,6 +82,7 @@
         <Pagination
           :pagination="pagination"
           :callback="getDatas"
+          @click="updateRouter"
         />
       </div>
     </div>
@@ -148,6 +149,8 @@ export default {
   },
 
   mounted: function () {
+    this.pagination.current_page = this.$route.query.currentPage;
+    this.pagination.per_page = this.$route.query.pageSize;
     this.initUser();
     this.initProject();
     this.getDatas();
@@ -164,6 +167,21 @@ export default {
       this.getDatas();
     },
 
+    updateRouter: function () {
+      // var uuid = Uuid.createUUID();
+      this.$router.push({
+        path: '/trace/traceDynamic/',
+        query: {
+          currentPage: this.pagination.current_page,
+          pageSize: this.pagination.per_page,
+        },
+      });
+      console.log(this.$route);
+      // console.log(this.$router.query.currentPage);
+      // console.log(this.$router.query.pageSize);
+      this.getDatas();
+    },
+
     /**
          * 查询数据
          * @param {Object} success

src/trace/TraceHeader.vue

@@ -89,14 +89,28 @@ export default {
      */
     openDynamic() {
       var _self = this;
-      this.$router.push('/trace/traceDynamic');
+      // this.$router.push('/trace/traceDynamic');
+      this.$router.push({
+        path: '/trace/traceDynamic',
+        query: {
+          currentPage: 1,
+          pageSize: 20,
+        },
+      });
     },
 
     /**
      * 打开我自己界面
      */
     openSelf() {
-      this.$router.push('/trace/traceList/I_LAUNCH');
+      // this.$router.push('/trace/traceList/I_LAUNCH');
+      this.$router.push({
+        path: '/trace/traceList/I_LAUNCH',
+        query: {
+          currentPage: 1,
+          pageSize: 20,
+        },
+      });
     },
 
     /**

src/trace/TraceList.vue

@@ -61,7 +61,7 @@
       </div>
 
       <div class="pull-right">
-        <Pagination :pagination="pagination" :callback="getDatas" />
+        <Pagination :pagination="pagination" :callback="getDatas" @click="updateRouter" />
       </div>
     </div>
 
@@ -124,25 +124,43 @@ export default {
       console.log(this.$route);
       this.getDatas();
     },
-    'param.traceUserStatus': function(val) {
-      this.$router.push('/trace/traceList/' + val);
+    'param.traceUserStatus': function(val,oldVal) {
+      this.$router.push({
+        path: '/trace/traceList/'+ val,
+        query: {
+          currentPage: this.pagination.current_page,
+          pageSize: this.pagination.per_page,
+        },
+      });
+      // this.$router.push('/trace/traceList/' + val);
       this.$route.params.traceState = val;
       console.log(this.$route);
+      console.log(oldVal);
       this.param.traceUserStatus = this.$route.params.traceState;
-      this.pagination.total = 0;
-      this.pagination.per_page = Common.pageSize;
-      this.pagination.current_page = 1;
-      this.pagination.last_page = 10;
-      this.pagination.from = 1;
-      this.pagination.to = 10;
+      // this.updateRouter();
+      // this.pagination.total = 0;
+      // this.pagination.per_page = Common.pageSize;
+      // this.pagination.current_page = 1;
+      // this.pagination.last_page = 10;
+      // this.pagination.from = 1;
+      // this.pagination.to = 10;
       this.getDatas();
     },
+
+    beforeRouteUpdate(to, from, next) {
+      const newId = to.query.tempId;
+      const oldId = from.query.tempId;
+      console.log(newId,oldId);    //345,123
+      next();
+    },
   },
 
   mounted: function() {
     TraceResource.getImg();
     console.log(this.$route);
     this.param.traceUserStatus = this.$route.params.traceState;
+    this.pagination.current_page = this.$route.query.currentPage;
+    this.pagination.per_page = this.$route.query.pageSize;
     this.getDatas();
   },
   methods: {
@@ -150,7 +168,7 @@ export default {
       this.pagination.per_page = newPageSize;
       this.pagination.current_page = 1;
       // 刷新界面
-      this.getDatas();
+      this.updateRouter();
     },
     end(evt) {
       var _self = this;
@@ -179,6 +197,22 @@ export default {
         },
       });
     },
+
+    updateRouter: function () {
+      // var uuid = Uuid.createUUID();
+      console.log(this.param.traceUserStatus);
+      this.$router.push({
+        path: '/trace/traceList/'+ this.param.traceUserStatus,
+        query: {
+          currentPage: this.pagination.current_page,
+          pageSize: this.pagination.per_page,
+        },
+      });
+      console.log(this.$route);
+      // console.log(this.$router.query.currentPage);
+      // console.log(this.$router.query.pageSize);
+      this.getDatas();
+    },
     /**
 			 * 查询数据
 			 * @author GuoZhiBo 20180226