From 885437de8dc0826b2fb3cc61752ed1fbd11b9792 Mon Sep 17 00:00:00 2001
From: kuaifan <aipaw@live.cn>
Date: Tue, 8 Mar 2022 16:05:25 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E8=A1=A8=E6=A0=BC?=
 =?UTF-8?q?=E5=88=86=E9=A1=B5=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../manage/components/ProjectArchived.vue     | 127 ++++++++-------
 .../manage/components/ProjectManagement.vue   |  46 ++++--
 .../js/pages/manage/components/ReportMy.vue   |  97 ++++++-----
 .../pages/manage/components/ReportReceive.vue |  82 +++++-----
 .../pages/manage/components/TaskArchived.vue  |  46 ++++--
 .../manage/components/TeamManagement.vue      |  46 ++++--
 resources/assets/sass/components/report.scss  |  36 ++---
 resources/assets/sass/pages/common.scss       | 150 ++++++++++++++++++
 .../pages/components/project-archived.scss    |  11 +-
 .../pages/components/project-management.scss  |  15 +-
 .../sass/pages/components/task-archived.scss  |  11 +-
 .../pages/components/team-management.scss     |  13 +-
 12 files changed, 462 insertions(+), 218 deletions(-)

diff --git a/resources/assets/js/pages/manage/components/ProjectArchived.vue b/resources/assets/js/pages/manage/components/ProjectArchived.vue
index ff7b44144..595a31fe1 100644
--- a/resources/assets/js/pages/manage/components/ProjectArchived.vue
+++ b/resources/assets/js/pages/manage/components/ProjectArchived.vue
@@ -30,17 +30,26 @@
                 </li>
             </ul>
         </div>
-        <Table :columns="columns" :data="list" :no-data-text="$L(noText)"></Table>
-        <Page
-            class="page-container"
-            :total="total"
-            :current="page"
-            :pageSize="pageSize"
-            :disabled="loadIng > 0"
-            :simple="windowMax768"
-            showTotal
-            @on-change="setPage"
-            @on-page-size-change="setPageSize"/>
+        <div class="table-page-box">
+            <Table
+                :columns="columns"
+                :data="list"
+                :loading="loadIng > 0"
+                :no-data-text="$L(noText)"
+                stripe/>
+            <Page
+                :total="total"
+                :current="page"
+                :page-size="pageSize"
+                :disabled="loadIng > 0"
+                :simple="windowMax768"
+                :page-size-opts="[10,20,30,50,100]"
+                show-elevator
+                show-sizer
+                show-total
+                @on-change="setPage"
+                @on-page-size-change="setPageSize"/>
+        </div>
     </div>
 </template>
 
@@ -74,10 +83,19 @@ export default {
         initLanguage() {
             this.columns = [
                 {
-                    title: this.$L('ID'),
+                    title: 'ID',
                     key: 'id',
-                    minWidth: 50,
-                    maxWidth: 70,
+                    width: 80,
+                    render: (h, {row, column}) => {
+                        return h('TableAction', {
+                            props: {
+                                column: column,
+                                align: 'left'
+                            }
+                        }, [
+                            h("div", row.id),
+                        ]);
+                    }
                 },
                 {
                     title: this.$L('项目名称'),
@@ -127,51 +145,50 @@ export default {
                     align: 'center',
                     width: 100,
                     render: (h, params) => {
-                        const recoveryNode = h('Poptip', {
-                            props: {
-                                title: this.$L('你确定要还原归档吗？'),
-                                confirm: true,
-                                transfer: true,
-                                placement: 'left',
-                            },
-                            style: {
-                                fontSize: '13px',
-                                cursor: 'pointer',
-                                color: '#8bcf70',
-                            },
-                            on: {
-                                'on-ok': () => {
-                                    this.recovery(params.row);
-                                }
-                            },
-                        }, this.$L('还原'));
-                        const deleteNode = h('Poptip', {
-                            props: {
-                                title: this.$L('你确定要删除项目吗？'),
-                                confirm: true,
-                                transfer: true,
-                                placement: 'left',
-                            },
-                            style: {
-                                marginLeft: '6px',
-                                fontSize: '13px',
-                                cursor: 'pointer',
-                                color: '#f00',
-                            },
-                            on: {
-                                'on-ok': () => {
-                                    this.delete(params.row);
-                                }
-                            },
-                        }, this.$L('删除'));
+                        const vNode = [
+                            h('Poptip', {
+                                props: {
+                                    title: this.$L('你确定要还原归档吗？'),
+                                    confirm: true,
+                                    transfer: true,
+                                    placement: 'left',
+                                },
+                                style: {
+                                    fontSize: '13px',
+                                    cursor: 'pointer',
+                                    color: '#8bcf70',
+                                },
+                                on: {
+                                    'on-ok': () => {
+                                        this.recovery(params.row);
+                                    }
+                                },
+                            }, this.$L('还原')),
+                            h('Poptip', {
+                                props: {
+                                    title: this.$L('你确定要删除项目吗？'),
+                                    confirm: true,
+                                    transfer: true,
+                                    placement: 'left',
+                                },
+                                style: {
+                                    marginLeft: '8px',
+                                    fontSize: '13px',
+                                    cursor: 'pointer',
+                                    color: '#f00',
+                                },
+                                on: {
+                                    'on-ok': () => {
+                                        this.delete(params.row);
+                                    }
+                                },
+                            }, this.$L('删除'))
+                        ];
                         return h('TableAction', {
                             props: {
                                 column: params.column
                             }
-                        }, [
-                            recoveryNode,
-                            deleteNode,
-                        ]);
+                        }, vNode);
                     },
                 }
             ]
diff --git a/resources/assets/js/pages/manage/components/ProjectManagement.vue b/resources/assets/js/pages/manage/components/ProjectManagement.vue
index 9d84fa3f3..2314d9d9a 100644
--- a/resources/assets/js/pages/manage/components/ProjectManagement.vue
+++ b/resources/assets/js/pages/manage/components/ProjectManagement.vue
@@ -42,17 +42,26 @@
                 </li>
             </ul>
         </div>
-        <Table :columns="columns" :data="list" :no-data-text="$L(noText)"></Table>
-        <Page
-            class="page-container"
-            :total="total"
-            :current="page"
-            :pageSize="pageSize"
-            :disabled="loadIng > 0"
-            :simple="windowMax768"
-            showTotal
-            @on-change="setPage"
-            @on-page-size-change="setPageSize"/>
+        <div class="table-page-box">
+            <Table
+                :columns="columns"
+                :data="list"
+                :loading="loadIng > 0"
+                :no-data-text="$L(noText)"
+                stripe/>
+            <Page
+                :total="total"
+                :current="page"
+                :page-size="pageSize"
+                :disabled="loadIng > 0"
+                :simple="windowMax768"
+                :page-size-opts="[10,20,30,50,100]"
+                show-elevator
+                show-sizer
+                show-total
+                @on-change="setPage"
+                @on-page-size-change="setPageSize"/>
+        </div>
     </div>
 </template>
 
@@ -86,10 +95,19 @@ export default {
         initLanguage() {
             this.columns = [
                 {
-                    title: this.$L('ID'),
+                    title: 'ID',
                     key: 'id',
-                    minWidth: 50,
-                    maxWidth: 70,
+                    width: 80,
+                    render: (h, {row, column}) => {
+                        return h('TableAction', {
+                            props: {
+                                column: column,
+                                align: 'left'
+                            }
+                        }, [
+                            h("div", row.id),
+                        ]);
+                    }
                 },
                 {
                     title: this.$L('项目名称'),
diff --git a/resources/assets/js/pages/manage/components/ReportMy.vue b/resources/assets/js/pages/manage/components/ReportMy.vue
index 50b616af1..cbf52643d 100644
--- a/resources/assets/js/pages/manage/components/ReportMy.vue
+++ b/resources/assets/js/pages/manage/components/ReportMy.vue
@@ -46,30 +46,32 @@
             </div>
         </div>
 
-        <Table
-            class="tableFill report-row-content"
-            ref="tableRef"
-            :columns="columns" :data="lists"
-            :loading="loadIng > 0"
-            :no-data-text="$L(noDataText)"
-            stripe/>
-        <Page
-            class="page-box report-row-foot"
-            :total="listTotal"
-            :current="listPage"
-            :disabled="loadIng > 0"
-            @on-change="setPage"
-            @on-page-size-change="setPageSize"
-            :page-size-opts="[10,20,30,50,100]"
-            placement="top"
-            show-elevator
-            show-sizer
-            show-total
-            transfer/>
+        <div class="table-page-box">
+            <Table
+                :columns="columns"
+                :data="lists"
+                :loading="loadIng > 0"
+                :no-data-text="$L(noDataText)"
+                stripe/>
+            <Page
+                :total="listTotal"
+                :current="listPage"
+                :page-size="listPageSize"
+                :disabled="loadIng > 0"
+                :simple="windowMax768"
+                :page-size-opts="[10,20,30,50,100]"
+                show-elevator
+                show-sizer
+                show-total
+                @on-change="setPage"
+                @on-page-size-change="setPageSize"/>
+        </div>
     </div>
 </template>
 
 <script>
+import {mapState} from "vuex";
+
 export default {
     name: "ReportMy",
     data() {
@@ -79,8 +81,9 @@ export default {
             lists: [],
             listPage: 1,
             listTotal: 0,
-            listPageSize: 10,
+            listPageSize: 20,
             noDataText: "",
+
             createAt: [],
             reportType: '',
             reportTypeList: [],
@@ -89,6 +92,9 @@ export default {
     mounted() {
         this.getLists();
     },
+    computed: {
+        ...mapState(['windowMax768'])
+    },
     methods: {
         initLanguage() {
             this.noDataText = this.noDataText || "数据加载中.....";
@@ -102,13 +108,13 @@ export default {
                 key: 'type',
                 align: 'center',
                 sortable: true,
-                maxWidth: 80,
+                width: 80,
             }, {
                 title: this.$L("汇报时间"),
                 key: 'created_at',
                 align: 'center',
                 sortable: true,
-                maxWidth: 180,
+                width: 180,
             }, {
                 title: this.$L("操作"),
                 align: 'center',
@@ -118,36 +124,27 @@ export default {
                     if (!row.id) {
                         return null;
                     }
-                    const vNodes = [
-                        h('ETooltip', {
-                            props: {content: this.$L('编辑'), transfer: true, delay: 600}
-                        }, [h('Icon', {
-                            props: {type: 'md-create', size: 16},
-                            style: {margin: '0 3px', cursor: 'pointer'},
-                            on: {
-                                click: () => {
-                                    this.$emit("on-edit", row.id);
-                                }
-                            }
-                        })]),
-                        h('ETooltip', {
-                            props: {content: this.$L('查看'), transfer: true, delay: 600},
-                            style: {position: 'relative', marginLeft: '6px'},
-                        }, [h('Icon', {
-                            props: {type: 'md-eye', size: 16},
-                            style: {margin: '0 3px', cursor: 'pointer'},
-                            on: {
-                                click: () => {
-                                    this.$emit("on-view", row);
-                                }
-                            }
-                        })]),
-                    ];
                     return h('TableAction', {
                         props: {
-                            column
+                            column,
+                            menu: [
+                                {
+                                    icon: "md-create",
+                                    action: "edit",
+                                },
+                                {
+                                    icon: "md-eye",
+                                    action: "view",
+                                }
+                            ]
+                        },
+                        on: {
+                            action: (name) => {
+                                if (name === 'edit') this.$emit("on-edit", row.id);
+                                if (name === 'view') this.$emit("on-view", row);
+                            }
                         }
-                    }, vNodes);
+                    });
                 },
             }];
             this.reportTypeList = [
diff --git a/resources/assets/js/pages/manage/components/ReportReceive.vue b/resources/assets/js/pages/manage/components/ReportReceive.vue
index d009ee1f2..8034102ed 100644
--- a/resources/assets/js/pages/manage/components/ReportReceive.vue
+++ b/resources/assets/js/pages/manage/components/ReportReceive.vue
@@ -49,26 +49,26 @@
             </ul>
         </div>
 
-        <Table
-            class="tableFill report-row-content"
-            ref="tableRef"
-            :columns="columns" :data="lists"
-            :loading="loadIng > 0"
-            :no-data-text="$L(noDataText)"
-            stripe/>
-        <Page
-            class="page-box report-row-foot"
-            :total="listTotal"
-            :current="listPage"
-            :disabled="loadIng > 0"
-            @on-change="setPage"
-            @on-page-size-change="setPageSize"
-            :page-size-opts="[10,20,30,50,100]"
-            placement="top"
-            show-elevator
-            show-sizer
-            show-total
-            transfer/>
+        <div class="table-page-box">
+            <Table
+                :columns="columns"
+                :data="lists"
+                :loading="loadIng > 0"
+                :no-data-text="$L(noDataText)"
+                stripe/>
+            <Page
+                :total="listTotal"
+                :current="listPage"
+                :page-size="listPageSize"
+                :disabled="loadIng > 0"
+                :simple="windowMax768"
+                :page-size-opts="[10,20,30,50,100]"
+                show-elevator
+                show-sizer
+                show-total
+                @on-change="setPage"
+                @on-page-size-change="setPageSize"/>
+        </div>
     </div>
 </template>
 
@@ -84,7 +84,7 @@ export default {
             lists: [],
             listPage: 1,
             listTotal: 0,
-            listPageSize: 10,
+            listPageSize: 20,
             noDataText: "",
 
             username: '',
@@ -97,7 +97,7 @@ export default {
         this.getLists();
     },
     computed: {
-        ...mapState(['userId'])
+        ...mapState(['userId', 'windowMax768'])
     },
     methods: {
         initLanguage() {
@@ -124,7 +124,6 @@ export default {
                             h('span', row.title)
                         )
                     }
-
                     return h('div', arr)
                 }
             }, {
@@ -132,31 +131,35 @@ export default {
                 key: 'type',
                 align: 'center',
                 sortable: true,
-                maxWidth: 80,
+                width: 80,
             }, {
                 title: this.$L("接收时间"),
                 key: 'receive_time',
                 align: 'center',
                 sortable: true,
-                maxWidth: 180,
+                width: 180,
             }, {
                 title: this.$L("操作"),
                 align: 'center',
-                width: 100,
-                minWidth: 100,
+                width: 90,
+                minWidth: 90,
                 render: (h, {column, row}) => {
                     if (!row.id) {
                         return null;
                     }
-                    const vNodes = [
-                        h('ETooltip', {
-                            props: {content: this.$L('查看'), transfer: true, delay: 600},
-                            style: {position: 'relative'},
-                        }, [h('Icon', {
-                            props: {type: 'md-eye', size: 16},
-                            style: {margin: '0 3px', cursor: 'pointer'},
-                            on: {
-                                click: () => {
+                    return h('TableAction', {
+                        props: {
+                            column,
+                            menu: [
+                                {
+                                    icon: "md-eye",
+                                    action: "view",
+                                }
+                            ]
+                        },
+                        on: {
+                            action: (name) => {
+                                if (name === 'view') {
                                     this.$emit("on-view", row)
                                     const myUser = row.receives_user.find(({userid}) => userid == this.userId)
                                     if (myUser) {
@@ -164,13 +167,8 @@ export default {
                                     }
                                 }
                             }
-                        })])
-                    ];
-                    return h('TableAction', {
-                        props: {
-                            column: column
                         }
-                    }, vNodes);
+                    });
                 },
             }];
             this.reportTypeList = [
diff --git a/resources/assets/js/pages/manage/components/TaskArchived.vue b/resources/assets/js/pages/manage/components/TaskArchived.vue
index 07716a1c6..078a9c92f 100644
--- a/resources/assets/js/pages/manage/components/TaskArchived.vue
+++ b/resources/assets/js/pages/manage/components/TaskArchived.vue
@@ -30,17 +30,26 @@
                 </li>
             </ul>
         </div>
-        <Table :columns="columns" :data="list" :loading="loadIng > 0" :no-data-text="$L(noText)"></Table>
-        <Page
-            class="page-container"
-            :total="total"
-            :current="page"
-            :pageSize="pageSize"
-            :disabled="loadIng > 0"
-            :simple="windowMax768"
-            showTotal
-            @on-change="setPage"
-            @on-page-size-change="setPageSize"/>
+        <div class="table-page-box">
+            <Table
+                :columns="columns"
+                :data="list"
+                :loading="loadIng > 0"
+                :no-data-text="$L(noText)"
+                stripe/>
+            <Page
+                :total="total"
+                :current="page"
+                :page-size="pageSize"
+                :disabled="loadIng > 0"
+                :simple="windowMax768"
+                :page-size-opts="[10,20,30,50,100]"
+                show-elevator
+                show-sizer
+                show-total
+                @on-change="setPage"
+                @on-page-size-change="setPageSize"/>
+        </div>
     </div>
 </template>
 
@@ -88,10 +97,19 @@ export default {
         initLanguage() {
             this.columns = [
                 {
-                    title: this.$L('ID'),
-                    minWidth: 50,
-                    maxWidth: 70,
+                    title: 'ID',
                     key: 'id',
+                    width: 80,
+                    render: (h, {row, column}) => {
+                        return h('TableAction', {
+                            props: {
+                                column: column,
+                                align: 'left'
+                            }
+                        }, [
+                            h("div", row.id),
+                        ]);
+                    }
                 },
                 {
                     title: this.$L('任务名称'),
diff --git a/resources/assets/js/pages/manage/components/TeamManagement.vue b/resources/assets/js/pages/manage/components/TeamManagement.vue
index e2c5303ae..4d900700d 100644
--- a/resources/assets/js/pages/manage/components/TeamManagement.vue
+++ b/resources/assets/js/pages/manage/components/TeamManagement.vue
@@ -60,17 +60,26 @@
                 </li>
             </ul>
         </div>
-        <Table :columns="columns" :data="list" :no-data-text="$L(noText)"></Table>
-        <Page
-            class="page-container"
-            :total="total"
-            :current="page"
-            :pageSize="pageSize"
-            :disabled="loadIng > 0"
-            :simple="windowMax768"
-            showTotal
-            @on-change="setPage"
-            @on-page-size-change="setPageSize"/>
+        <div class="table-page-box">
+            <Table
+                :columns="columns"
+                :data="list"
+                :loading="loadIng > 0"
+                :no-data-text="$L(noText)"
+                stripe/>
+            <Page
+                :total="total"
+                :current="page"
+                :page-size="pageSize"
+                :disabled="loadIng > 0"
+                :simple="windowMax768"
+                :page-size-opts="[10,20,30,50,100]"
+                show-elevator
+                show-sizer
+                show-total
+                @on-change="setPage"
+                @on-page-size-change="setPageSize"/>
+        </div>
     </div>
 </template>
 
@@ -104,10 +113,19 @@ export default {
         initLanguage() {
             this.columns = [
                 {
-                    title: this.$L('ID'),
-                    minWidth: 50,
-                    maxWidth: 70,
+                    title: 'ID',
                     key: 'userid',
+                    width: 80,
+                    render: (h, {row, column}) => {
+                        return h('TableAction', {
+                            props: {
+                                column: column,
+                                align: 'left'
+                            }
+                        }, [
+                            h("div", row.userid),
+                        ]);
+                    }
                 },
                 {
                     title: this.$L('邮箱'),
diff --git a/resources/assets/sass/components/report.scss b/resources/assets/sass/components/report.scss
index 2b9d3b5f3..e3dcbce82 100644
--- a/resources/assets/sass/components/report.scss
+++ b/resources/assets/sass/components/report.scss
@@ -1,44 +1,28 @@
 .report {
     height: 100%;
-    padding: 10px 20px;
+    padding: 20px;
 
     .report-list-wrap {
+        position: absolute;
+        top: 0;
         width: 100%;
         height: 100%;
-        display: flex;
-        top: 0;
         padding-top: 53px;
+        display: flex;
         flex-direction: column;
-        position: absolute;
 
-        .report-row-foot {
-            flex: 0 0 auto;
-        }
-
-        .report-row-content {
-            flex: 1 1 auto;
-            overflow-y: auto;
-
-            .ivu-table {
-                .ivu-table-body {
-                    height: 100%;
-                    overflow-y: auto;
-                    padding-bottom: 50px;
-                }
-            }
+        .table-page-box {
+            flex: 1;
+            height: 0;
         }
     }
-    .manage-box-report{
+
+    .manage-box-report {
         margin-left: 4px;
         transform: scale(0.8);
         vertical-align: top;
     }
 
-    .page-box {
-        text-align: center;
-        margin-top: 15px;
-    }
-
     .ivu-tabs {
         height: 100%;
         position: relative;
@@ -172,6 +156,7 @@
             .ivu-form-item-content {
                 height: 100%;
                 display: flex;
+
                 .teditor-wrapper {
                     flex: 1;
                     display: flex;
@@ -248,6 +233,7 @@
         }
 
     }
+
     .report-buttongroup {
         margin-left: 20px;
         background: #F4F5F7 !important;
diff --git a/resources/assets/sass/pages/common.scss b/resources/assets/sass/pages/common.scss
index a3c490b54..0e38a5d08 100755
--- a/resources/assets/sass/pages/common.scss
+++ b/resources/assets/sass/pages/common.scss
@@ -1,24 +1,30 @@
 body {
     overflow: hidden;
+
     .form-tip {
         color: #999999;
         line-height: 22px;
         padding: 5px 0;
     }
+
     .ivu-input,
     .ivu-select-selection {
         border-color: #e8e8e8;
     }
+
     .ivu-select-dropdown {
         max-height: 360px;
+
         &.select-node {
             .ivu-select-item {
                 display: flex;
                 align-items: center;
                 justify-content: space-between;
+
                 .option-title {
                     flex: 1;
                 }
+
                 .ivu-tag {
                     flex-shrink: 0;
                     margin-left: 18px;
@@ -28,23 +34,28 @@ body {
                 }
             }
         }
+
         &.ivu-date-picker-transfer {
             max-width: 98%;
             overflow: auto;
         }
     }
+
     .ivu-tooltip-popper {
         .ivu-tooltip-inner {
             white-space: normal;
         }
     }
+
     .ivu-table {
         table {
             width: 100% !important;
+
             .ivu-table-cell {
                 padding-left: 12px;
                 padding-right: 12px;
             }
+
             thead {
                 .ivu-table-cell {
                     display: block;
@@ -53,11 +64,13 @@ body {
                     text-overflow: ellipsis;
                 }
             }
+
             tbody {
                 .tree-icon-loading {
                     .ivu-table-cell {
                         display: flex;
                         align-items: center;
+
                         .ivu-table-cell-tree {
                             margin-right: 6px;
                         }
@@ -65,10 +78,12 @@ body {
                 }
             }
         }
+
         .td-ellipsis {
             display: flex;
             align-items: center;
             max-width: 100%;
+
             .remark-text {
                 overflow: hidden;
                 text-overflow: ellipsis;
@@ -78,11 +93,13 @@ body {
                 line-height: 20px;
                 margin-right: 6px;
             }
+
             .remark-icon {
                 display: none;
                 font-size: 16px;
                 cursor: pointer;
             }
+
             .remark-tag {
                 display: inline-block;
                 height: 22px;
@@ -98,6 +115,7 @@ body {
                 padding: 0 4px;
                 white-space: nowrap;
                 overflow: visible;
+
                 &.pointer-tag {
                     cursor: pointer;
                     color: #1890ff;
@@ -105,6 +123,7 @@ body {
                     border-color: #91d5ff;
                 }
             }
+
             .icon-tooltip {
                 .ivu-tooltip-rel {
                     display: flex;
@@ -112,27 +131,34 @@ body {
                 }
             }
         }
+
         .td-action {
             max-width: 100%;
             display: flex;
             align-items: center;
             justify-content: center;
+
             .td-action-container {
                 flex-shrink: 0;
+
                 a {
                     font-size: 12px;
                     padding: 0 5px;
                 }
+
                 &.td-action-menu {
                     display: flex;
                     align-items: center;
+
                     .menu-dropdown {
                         display: flex;
                     }
+
                     .menu-icon {
                         cursor: pointer;
                         font-size: 21px;
                         padding: 0 6px;
+
                         &.ivu-icon {
                             font-size: 16px;
                         }
@@ -140,6 +166,7 @@ body {
                 }
             }
         }
+
         .ivu-table-row-hover {
             &:hover {
                 .td-ellipsis {
@@ -149,12 +176,15 @@ body {
                 }
             }
         }
+
         &:before {
             background-color: #efefef;
         }
     }
+
     .ivu-modal-wrap {
         overflow: overlay;
+
         .ivu-modal {
             top: 100px;
             padding-bottom: 100px;
@@ -162,56 +192,71 @@ body {
                 top: 35px;
                 padding-bottom: 35px;
             }
+
             &.ivu-modal-fullscreen {
                 top: 0;
             }
+
             .ivu-modal-header,
             .ivu-modal-footer {
                 border-color: transparent;
             }
+
             .ivu-modal-header {
                 padding: 22px 24px 20px;
+
                 .ivu-modal-header-inner {
                     font-size: 18px;
                 }
             }
+
             .ivu-modal-body {
                 padding: 16px 32px 2px;
             }
+
             .ivu-modal-footer {
                 padding: 20px 30px 22px;
+
                 .ivu-btn {
                     height: 34px;
                     line-height: 32px;
                     min-width: 94px;
                 }
+
                 @media (max-width: 576px) {
                     .adaption {
                         display: flex;
                         align-items: center;
+
                         > .ivu-btn {
                             padding: 0;
+
                             > span {
                                 padding: 0 15px;
                             }
                         }
+
                         .ivu-btn {
                             height: 38px;
                             line-height: 36px;
                             min-width: auto;
                         }
+
                         .ivu-btn,
                         .ivu-btn-group,
                         .ivu-poptip {
                             flex: 1;
                         }
+
                         .ivu-btn-group {
                             display: flex;
                             align-items: center;
                         }
+
                         .ivu-poptip {
                             display: flex;
                             align-items: center;
+
                             .ivu-poptip-rel {
                                 flex: 1;
                                 display: flex;
@@ -221,8 +266,10 @@ body {
                     }
                 }
             }
+
             .ivu-modal-content {
                 border-radius: 18px;
+
                 .ivu-modal-close {
                     .ivu-icon-ios-close {
                         font-size: 38px;
@@ -230,6 +277,7 @@ body {
                         right: 2px;
                         transition: all 0.2s;
                     }
+
                     &:hover {
                         .ivu-icon-ios-close {
                             transform: rotate(-90deg);
@@ -238,29 +286,36 @@ body {
                 }
             }
         }
+
         .ivu-modal-confirm {
             padding: 6px 0 20px;
+
             .ivu-modal-confirm-body {
                 > div {
                     word-break: break-all;
                 }
             }
         }
+
         .form-network-add-tabs {
             .ivu-tabs-tabpane {
                 padding: 10px 6px 0;
             }
         }
+
         .form-network-add-in-out {
             padding: 0 6px;
+
             .select-in-type {
                 span.ivu-radio {
                     display: none;
                 }
+
                 .select-in-type-item-checked {
                     color: $primary-color;
                     border: 1px solid $primary-color !important;
                 }
+
                 .select-in-type-item {
                     display: flex;
                     align-items: center;
@@ -269,34 +324,42 @@ body {
                     border-radius: 4px;
                     padding: 0 12px;
                     margin: 0 8px 0 0;
+
                     > span {
                         flex: 1;
                     }
+
                     &:hover {
                         cursor: pointer;
                     }
+
                     .select-in-type-icon {
                         margin-left: 12px;
                     }
                 }
             }
+
             .select-in-node {
                 margin-top: 18px;
             }
         }
     }
+
     .ivu-progress {
         display: flex;
         align-items: center;
+
         .ivu-progress-outer {
             display: flex;
             align-items: center;
         }
+
         &.ivu-progress-show-info {
             .ivu-progress-outer {
                 margin: 0;
                 padding: 0;
             }
+
             .ivu-progress-text {
                 flex-shrink: 0;
                 overflow: hidden;
@@ -305,13 +368,16 @@ body {
             }
         }
     }
+
     .ivu-drawer-right {
         .ivu-drawer-content {
             border-radius: 18px 0 0 18px;
+
             .ivu-drawer-header {
                 padding-top: 16px;
                 padding-bottom: 6px;
                 border-bottom: 1px solid transparent;
+
                 .ivu-drawer-header-inner {
                     font-size: 18px;
                     padding: 0 4px;
@@ -319,16 +385,20 @@ body {
                     line-height: 32px;
                 }
             }
+
             .ivu-drawer-body {
                 padding: 10px 20px;
             }
         }
     }
+
     .ivu-drawer-bottom {
         .ivu-drawer-content {
             border-radius: 18px 18px 0 0;
+
             .ivu-drawer-close {
                 top: -40px;
+
                 .ivu-icon {
                     font-size: 40px;
                     color: #ffffff;
@@ -350,11 +420,72 @@ body {
         display: table;
         content: ""
     }
+
     &:after {
         clear: both
     }
 }
 
+.table-page-box {
+    display: flex;
+    flex-direction: column;
+
+    .ivu-table-wrapper {
+        flex: 1;
+
+        .ivu-table {
+            display: flex;
+            flex-direction: column;
+
+            .ivu-table-header {
+                flex-shrink: 0;
+            }
+
+            .ivu-table-body {
+                flex: 1;
+                overflow: auto;
+                overflow-y: overlay !important;
+
+                &::-webkit-scrollbar {
+                    width: 10px;
+                    height: 10px;
+                }
+
+                &::-webkit-scrollbar-thumb {
+                    border-radius: 10px;
+                    background: rgba(0, 0, 0, 0);
+                }
+
+                &::-webkit-scrollbar-thumb:active {
+                    border-radius: 10px;
+                    background: rgba(0, 0, 0, .5);
+                }
+
+                &:hover::-webkit-scrollbar-thumb {
+                    border: 2px solid transparent;
+                    background: rgba(0, 0, 0, .2);
+                    background-clip: content-box;
+                }
+
+                &:hover::-webkit-scrollbar-thumb:hover {
+                    border-top-width: 0;
+                    border-bottom-width: 0;
+                }
+
+                &::-webkit-scrollbar-track {
+                    border-radius: 10px;
+                    background: rgba(0, 0, 0, 0);
+                }
+            }
+        }
+    }
+
+    .ivu-page {
+        flex-shrink: 0;
+        text-align: center;
+        margin-top: 20px;
+    }
+}
 
 .page-container {
     text-align: center;
@@ -363,10 +494,12 @@ body {
 
 .search-container {
     margin-bottom: 12px;
+
     > ul {
         display: flex;
         align-items: flex-end;
         flex-wrap: wrap;
+
         > li {
             flex: 1;
             flex-shrink: 0;
@@ -375,26 +508,32 @@ body {
             list-style: none;
             display: flex;
             flex-direction: column;
+
             &:last-child {
                 margin-right: 0;
             }
+
             .search-label {
                 font-weight: 600;
             }
+
             .search-content {
                 margin-top: 6px;
             }
+
             &.search-button {
                 flex: none;
                 display: flex;
                 align-items: center;
                 flex-direction: row;
+
                 > button + button {
                     margin-left: 8px;
                 }
             }
         }
     }
+
     &.lr {
         > ul {
             > li:not(.search-button) {
@@ -402,12 +541,15 @@ body {
                 flex-direction: row;
                 align-items: center;
                 margin-right: 18px;
+
                 .search-label {
                     flex-shrink: 0;
                 }
+
                 .search-content {
                     margin-top: 0;
                     margin-left: 6px;
+
                     .ivu-input-wrapper,
                     .ivu-select {
                         width: 168px;
@@ -417,13 +559,16 @@ body {
             }
         }
     }
+
     &.auto {
         > ul {
             > li:not(.search-button) {
                 flex: none;
+
                 .search-content {
                     margin-top: 0;
                     margin-left: 6px;
+
                     .ivu-input-wrapper,
                     .ivu-select {
                         width: 150px;
@@ -434,23 +579,28 @@ body {
         }
     }
 }
+
 .search-expand {
     display: flex;
     align-items: flex-end;
+
     .search-container {
         flex: 1;
     }
+
     .expand-button-group {
         flex-shrink: 0;
         margin-left: 24px;
         margin-bottom: 24px;
     }
 }
+
 .search-button-clear {
     .ivu-tooltip-inner {
         padding: 0;
         display: flex;
         align-items: center;
+
         .ivu-btn {
             min-width: 80px;
             font-size: 13px;
diff --git a/resources/assets/sass/pages/components/project-archived.scss b/resources/assets/sass/pages/components/project-archived.scss
index 878359bf5..a0b3ddcd1 100644
--- a/resources/assets/sass/pages/components/project-archived.scss
+++ b/resources/assets/sass/pages/components/project-archived.scss
@@ -5,7 +5,9 @@
     right: 0;
     bottom: 0;
     padding: 20px;
-    overflow: auto;
+    display: flex;
+    flex-direction: column;
+
     .archived-title {
         color: #333333;
         font-size: 20px;
@@ -14,6 +16,7 @@
         margin-bottom: 24px;
         display: flex;
         align-items: center;
+
         .title-icon {
             display: flex;
             align-items: center;
@@ -21,9 +24,15 @@
             height: 14px;
             margin-left: 4px;
             margin-top: 2px;
+
             > i {
                 cursor: pointer;
             }
         }
     }
+
+    .table-page-box {
+        flex: 1;
+        height: 0;
+    }
 }
diff --git a/resources/assets/sass/pages/components/project-management.scss b/resources/assets/sass/pages/components/project-management.scss
index 39dce8296..a7893888f 100644
--- a/resources/assets/sass/pages/components/project-management.scss
+++ b/resources/assets/sass/pages/components/project-management.scss
@@ -5,7 +5,9 @@
     right: 0;
     bottom: 0;
     padding: 20px;
-    overflow: auto;
+    display: flex;
+    flex-direction: column;
+
     .management-title {
         color: #333333;
         font-size: 20px;
@@ -14,6 +16,7 @@
         margin-bottom: 24px;
         display: flex;
         align-items: center;
+
         .title-icon {
             display: flex;
             align-items: center;
@@ -21,14 +24,17 @@
             height: 14px;
             margin-left: 4px;
             margin-top: 2px;
+
             > i {
                 cursor: pointer;
             }
         }
     }
+
     .project-name {
         display: flex;
         align-items: center;
+
         .ivu-tag {
             height: 18px;
             line-height: 18px;
@@ -41,10 +47,17 @@
             white-space: nowrap
         }
     }
+
     .project-percent {
         line-height: 1;
+
         .ivu-progress {
             margin-top: 2px;
         }
     }
+
+    .table-page-box {
+        flex: 1;
+        height: 0;
+    }
 }
diff --git a/resources/assets/sass/pages/components/task-archived.scss b/resources/assets/sass/pages/components/task-archived.scss
index cebe8bf21..c152090ff 100644
--- a/resources/assets/sass/pages/components/task-archived.scss
+++ b/resources/assets/sass/pages/components/task-archived.scss
@@ -5,7 +5,9 @@
     right: 0;
     bottom: 0;
     padding: 20px;
-    overflow: auto;
+    display: flex;
+    flex-direction: column;
+
     .archived-title {
         color: #333333;
         font-size: 20px;
@@ -14,6 +16,7 @@
         margin-bottom: 24px;
         display: flex;
         align-items: center;
+
         .title-icon {
             display: flex;
             align-items: center;
@@ -21,9 +24,15 @@
             height: 14px;
             margin-left: 4px;
             margin-top: 2px;
+
             > i {
                 cursor: pointer;
             }
         }
     }
+
+    .table-page-box {
+        flex: 1;
+        height: 0;
+    }
 }
diff --git a/resources/assets/sass/pages/components/team-management.scss b/resources/assets/sass/pages/components/team-management.scss
index 16828d871..60a3fd8c1 100644
--- a/resources/assets/sass/pages/components/team-management.scss
+++ b/resources/assets/sass/pages/components/team-management.scss
@@ -5,7 +5,9 @@
     right: 0;
     bottom: 0;
     padding: 20px;
-    overflow: auto;
+    display: flex;
+    flex-direction: column;
+
     .management-title {
         color: #333333;
         font-size: 20px;
@@ -14,6 +16,7 @@
         margin-bottom: 24px;
         display: flex;
         align-items: center;
+
         .title-icon {
             display: flex;
             align-items: center;
@@ -21,14 +24,17 @@
             height: 14px;
             margin-left: 4px;
             margin-top: 2px;
+
             > i {
                 cursor: pointer;
             }
         }
     }
+
     .team-email {
         display: flex;
         align-items: center;
+
         .ivu-tag {
             height: 18px;
             line-height: 18px;
@@ -41,4 +47,9 @@
             white-space: nowrap
         }
     }
+
+    .table-page-box {
+        flex: 1;
+        height: 0;
+    }
 }