update：代办列表组件更新

src/components/app-todo-list/app-todo-list.less

@@ -9,4 +9,21 @@
         overflow: hidden;
         text-overflow: ellipsis;
     }
+    .app-todo-list__search {
+        width: 400px;
+        padding: 8px 0;
+        margin: 0 8px 0 auto;
+    }
+    .el-table {
+        height: calc(100% - 98px);
+        width: 100%;
+        overflow: auto;
+    }
+    .app-todo-list__pagination {
+        height: 50px;
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        padding-right: 8px;
+    }
 }
\ No newline at end of file

src/components/app-todo-list/app-todo-list.vue

 <template>
     <div class='app-todo-list'>
-        <el-table :data="myTasks" :border="true" style="width: 100%">
+        <i-input v-model="query" search enter-button @on-search="handleSearch" class='app-todo-list__search' placeHolder="标题"/>
+        <el-table :data="myTasks" :border="true">
             <el-table-column prop="" sortable label="标题">
                 <template slot-scope="scope">
                     <span class="title" @click="handleClick(scope.row)">{{ scope.row.description }}</span>
@@ -13,11 +14,22 @@
             <el-table-column prop="createTime" sortable label="创建时间" width="200">
             </el-table-column>
         </el-table>
+        <el-pagination
+            class="app-todo-list__pagination"
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+            :current-page="curPage"
+            :page-sizes="[10, 20, 30, 40, 50, 60, 70, 80, 90, 100]"
+            :page-size="limit"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="total">
+        </el-pagination>
     </div>
 </template>
 
 <script lang = 'ts'>
 import { Environment } from '@/environments/environment';
+import { Http } from '@/utils';
 import { Component, Vue } from 'vue-property-decorator';
 
 @Component({
@@ -29,6 +41,26 @@ export default class AppTodoList extends Vue {
      */
     public myTasks: any[] = [];
 
+    /**
+     * 查询数据
+     */
+    public query: string = '';
+
+    /**
+     * 分页条数
+     */
+    public limit: number = 20;
+
+    /**
+     * 当前分页
+     */
+    public curPage: number = 0;
+
+    /**
+     * 总条数
+     */
+    public total: number = 0;
+
     /**
      * vue创建
      */
@@ -40,10 +72,20 @@ export default class AppTodoList extends Vue {
      * 获取待办列表
      */
     public getMyTasks() {
+        const params = {
+            size: this.limit,
+            page: this.curPage
+        };
         let url: any = '/wfcore/mytasks';
-        this.$http.get(url).then((response: any) => {
+        if (this.query) {
+            Object.assign(params, {query: this.query});
+        }
+        Http.getInstance().get(url, params).then((response: any) => {
             if (response && response.status == 200) {
-                const data: any = response.data;
+                if(response.headers['x-total']){
+                    this.total = Number(response.headers['x-total']);
+                }
+                const data: any = response.data || [];
                 if (data && data.length > 0) {
                     this.myTasks = data;
                 } else {
@@ -79,6 +121,29 @@ export default class AppTodoList extends Vue {
         })
     }
 
+    /**
+     * 处理搜索
+     */
+    public handleSearch() {
+        this.getMyTasks();
+    }
+
+    /**
+     * 处理分页数改变
+     */
+    public handleSizeChange(size: number) {
+        this.limit = size;
+        this.getMyTasks();
+    }
+
+    /**
+     * 处理分页改变
+     */
+    public handleCurrentChange(page: number) {
+        this.curPage = page;
+        this.getMyTasks();
+    }
+
 }
 </script>