optimization: 列表页只在表格内滚动

TencentBlueKing · Sep 29, 2023 · 272d9be · 272d9be
1 parent 1f2ae55
commit 272d9be
Show file tree

Hide file tree

Showing 14 changed files with 38 additions and 15 deletions.
diff --git a/frontend/desktop/src/pages/admin/statistics/Appmaker.vue b/frontend/desktop/src/pages/admin/statistics/Appmaker.vue
@@ -74,6 +74,7 @@
                         class="tab-data-table"
                         v-bkloading="{ isLoading: appmakerDataLoading, opacity: 1, zIndex: 100 }"
                         :data="appmakerData"
+                        :max-height="708"
                         :pagination="pagination"
                         @sort-change="handleSortChange"
                         @page-change="handlePageChange"

diff --git a/frontend/desktop/src/pages/admin/statistics/Atom.vue b/frontend/desktop/src/pages/admin/statistics/Atom.vue
@@ -83,6 +83,7 @@
                         class="tab-data-table"
                         v-bkloading="{ isLoading: tableDataLoading, opacity: 1, zIndex: 100 }"
                         :data="tableData"
+                        :max-height="751"
                         :pagination="pagination"
                         @sort-change="handleSortChange"
                         @page-change="handlePageChange"

diff --git a/frontend/desktop/src/pages/admin/statistics/Instance.vue b/frontend/desktop/src/pages/admin/statistics/Instance.vue
@@ -100,6 +100,7 @@
                         class="tab-data-table"
                         v-bkloading="{ isLoading: instanceDataLoading, opacity: 1, zIndex: 100 }"
                         :data="instanceData"
+                        :max-height="768"
                         :pagination="pagination"
                         @sort-change="handleSortChange"
                         @page-change="handlePageChange"

diff --git a/frontend/desktop/src/pages/admin/statistics/Template.vue b/frontend/desktop/src/pages/admin/statistics/Template.vue
@@ -94,6 +94,7 @@
                         class="tab-data-table"
                         v-bkloading="{ isLoading: tplDataLoading, opacity: 1, zIndex: 100 }"
                         :data="tplData"
+                        :max-height="768"
                         :pagination="pagination"
                         @sort-change="handleSortChange"
                         @page-change="handlePageChange"

diff --git a/frontend/desktop/src/pages/audit/AuditList.vue b/frontend/desktop/src/pages/audit/AuditList.vue
@@ -28,6 +28,7 @@
                         :data="auditList"
                         :pagination="pagination"
                         :size="setting.size"
+                        :max-height="tableMaxHeight"
                         v-bkloading="{ isLoading: !firstLoading && listLoading, opacity: 1, zIndex: 100 }"
                         @page-change="onPageChange"
                         @page-limit-change="onPageLimitChange">
@@ -291,7 +292,8 @@
                     size: 'small'
                 },
                 searchList: toolsUtils.deepClone(SEARCH_LIST),
-                searchSelectValue
+                searchSelectValue,
+                tableMaxHeight: window.innerHeight - 144
             }
         },
         computed: {

diff --git a/frontend/desktop/src/pages/commonManage/CommonTplList.vue b/frontend/desktop/src/pages/commonManage/CommonTplList.vue
@@ -79,6 +79,7 @@
                         :data="templateList"
                         :pagination="pagination"
                         :size="setting.size"
+                        :max-height="tableMaxHeight"
                         :default-sort="getDefaultSortConfig"
                         v-bkloading="{ isLoading: !firstLoading && listLoading, opacity: 1, zIndex: 100 }"
                         @sort-change="handleSortChange"
@@ -141,7 +142,7 @@
                                 </template>
                             </template>
                         </bk-table-column>
-                        <bk-table-column :label="$t('操作')" width="190" class="operation-cell" :fixed="templateList.length ? 'right' : false">
+                        <bk-table-column :label="$t('操作')" width="190" class="operation-cell" :fixed="templateList.length ? 'right' : false" :resizable="false">
                             <template slot-scope="props">
                                 <div class="template-operation" :template-name="props.row.name">
                                     <template>
@@ -483,7 +484,8 @@
                 isInit: true, // 避免default-sort在初始化时去触发table的sort-change事件
                 categoryTips: i18n.t('模板分类即将下线，建议使用标签'),
                 searchList: toolsUtils.deepClone(SEARCH_LIST),
-                searchSelectValue
+                searchSelectValue,
+                tableMaxHeight: window.innerHeight - 144
             }
         },
         computed: {

diff --git a/frontend/desktop/src/pages/functor/FunctionList.vue b/frontend/desktop/src/pages/functor/FunctionList.vue
@@ -44,6 +44,7 @@
                         :data="functorList"
                         :pagination="pagination"
                         :size="setting.size"
+                        :max-height="tableMaxHeight"
                         v-bkloading="{ isLoading: !firstLoading && listLoading, opacity: 1, zIndex: 100 }"
                         @page-change="onPageChange"
                         @page-limit-change="onPageLimitChange">
@@ -518,7 +519,8 @@
                 isLoadCommonTpl: false,
                 onTplSearch: null,
                 searchList: toolsUtils.deepClone(SEARCH_LIST),
-                searchSelectValue
+                searchSelectValue,
+                tableMaxHeight: window.innerHeight - 144
             }
         },
         computed: {

diff --git a/frontend/desktop/src/pages/home/MyDynamic.vue b/frontend/desktop/src/pages/home/MyDynamic.vue
@@ -35,6 +35,7 @@
             class="tab-data-table"
             v-bkloading="{ isLoading: isTableLoading, opacity: 1, zIndex: 100 }"
             :data="dynamicData"
+            :max-height="689"
             :pagination="pagination">
             <bk-table-column
                 v-for="item in tableColumn"

diff --git a/frontend/desktop/src/pages/project/index.vue b/frontend/desktop/src/pages/project/index.vue
@@ -30,6 +30,7 @@
                         :data="projectList"
                         :pagination="pagination"
                         :size="setting.size"
+                        :max-height="tableMaxHeight"
                         v-bkloading="{ isLoading: !firstLoading && loading, opacity: 1, zIndex: 100 }"
                         @page-change="onPageChange"
                         @page-limit-change="handlePageLimitChange">
@@ -307,7 +308,8 @@
                     creator
                 },
                 searchList: toolsUtils.deepClone(SEARCH_LIST),
-                searchSelectValue
+                searchSelectValue,
+                tableMaxHeight: window.innerHeight - 130
             }
         },
         computed: {

diff --git a/frontend/desktop/src/pages/task/ClockedList/index.vue b/frontend/desktop/src/pages/task/ClockedList/index.vue
@@ -27,6 +27,7 @@
                         :data="clockedList"
                         :pagination="pagination"
                         :size="setting.size"
+                        :max-height="tableMaxHeight"
                         @page-change="onPageChange"
                         @page-limit-change="handlePageLimitChange"
                         v-bkloading="{ isLoading: !firstLoading && listLoading, opacity: 1, zIndex: 100 }">
@@ -68,7 +69,7 @@
                                 </template>
                             </template>
                         </bk-table-column>
-                        <bk-table-column :label="$t('操作')" :width="adminView ? 120 : 230" :fixed="clockedList.length ? 'right' : false">
+                        <bk-table-column :label="$t('操作')" :width="adminView ? 120 : 230" :fixed="clockedList.length ? 'right' : false" :resizable="false">
                             <div class="clocked-operation" slot-scope="props" :clocked-task-name="props.row.name">
                                 <template v-if="!adminView">
                                     <a
@@ -342,7 +343,8 @@
                 sideSliderType: '',
                 isShowSideslider: false,
                 searchList: toolsUtils.deepClone(SEARCH_LIST),
-                searchSelectValue
+                searchSelectValue,
+                tableMaxHeight: window.innerHeight - (this.admin ? 198 : 148)
             }
         },
         computed: {

diff --git a/frontend/desktop/src/pages/task/PeriodicList/index.vue b/frontend/desktop/src/pages/task/PeriodicList/index.vue
@@ -38,6 +38,7 @@
                         :data="periodicList"
                         :pagination="pagination"
                         :size="setting.size"
+                        :max-height="tableMaxHeight"
                         @page-change="onPageChange"
                         @page-limit-change="handlePageLimitChange"
                         v-bkloading="{ isLoading: !firstLoading && listLoading, opacity: 1, zIndex: 100 }">
@@ -136,7 +137,7 @@
                                 </template>
                             </bk-table-column>
                         </template>
-                        <bk-table-column :label="$t('操作')" width="220" :fixed="periodicList.length ? 'right' : false">
+                        <bk-table-column :label="$t('操作')" width="220" :fixed="periodicList.length ? 'right' : false" :resizable="false">
                             <template slot-scope="props">
                                 <div class="periodic-operation" :periodic-task-name="props.row.name">
                                     <template v-if="!adminView">
@@ -435,7 +436,8 @@
                 editTask: true, // 编辑/创建周期任务
                 curRow: {}, // 当前选中行的数据
                 searchList: toolsUtils.deepClone(SEARCH_LIST),
-                searchSelectValue
+                searchSelectValue,
+                tableMaxHeight: window.innerHeight - (this.admin ? 198 : 148)
             }
         },
         computed: {

diff --git a/frontend/desktop/src/pages/task/TaskList/index.vue b/frontend/desktop/src/pages/task/TaskList/index.vue
@@ -39,6 +39,7 @@
                             :data="taskList"
                             :pagination="pagination"
                             :size="setting.size"
+                            :max-height="tableMaxHeight"
                             :row-class-name="getRowClassName"
                             :key="listLoading"
                             v-bkloading="{ isLoading: !firstLoading && listLoading, opacity: !firstLoading && taskList.length ? 0.6 : 1, zIndex: 100 }"
@@ -107,7 +108,7 @@
                                     </template>
                                 </template>
                             </bk-table-column>
-                            <bk-table-column :label="$t('操作')" width="150" :fixed="taskList.length ? 'right' : false">
+                            <bk-table-column :label="$t('操作')" width="150" :fixed="taskList.length ? 'right' : false" :resizable="false">
                                 <template slot-scope="props">
                                     <div v-if="props.row.is_child_taskflow" class="task-operation">
                                         <span class="default">{{ '--' }}</span>
@@ -411,7 +412,8 @@
                 isInitCreateMethod: false,
                 deletaLoading: false,
                 initOpenTask: [],
-                selectedTaskId: ''
+                selectedTaskId: '',
+                tableMaxHeight: window.innerHeight - 180
             }
         },
         computed: {

diff --git a/frontend/desktop/src/pages/template/TemplateList/CommonTplList.vue b/frontend/desktop/src/pages/template/TemplateList/CommonTplList.vue
@@ -36,6 +36,7 @@
                         :data="templateList"
                         :pagination="pagination"
                         :size="setting.size"
+                        :max-height="tableMaxHeight"
                         :default-sort="getDefaultSortConfig"
                         v-bkloading="{ isLoading: !firstLoading && listLoading, opacity: 1, zIndex: 100 }"
                         @sort-change="handleSortChange"
@@ -88,7 +89,7 @@
                                 </template>
                             </template>
                         </bk-table-column>
-                        <bk-table-column :label="$t('操作')" width="190" class="operation-cell" :fixed="templateList.length ? 'right' : false">
+                        <bk-table-column :label="$t('操作')" width="190" class="operation-cell" :fixed="templateList.length ? 'right' : false" :resizable="false">
                             <template slot-scope="props">
                                 <div class="template-operation" :template-name="props.row.name">
                                     <template>
@@ -287,7 +288,8 @@
                 isInit: true, // 避免default-sort在初始化时去触发table的sort-change事件
                 categoryTips: i18n.t('模板分类即将下线，建议使用标签'),
                 searchList: toolsUtils.deepClone(SEARCH_LIST),
-                searchSelectValue
+                searchSelectValue,
+                tableMaxHeight: window.innerHeight - 186
             }
         },
         computed: {

diff --git a/frontend/desktop/src/pages/template/TemplateList/projectTplList.vue b/frontend/desktop/src/pages/template/TemplateList/projectTplList.vue
@@ -82,6 +82,7 @@
                         :data="templateList"
                         :pagination="pagination"
                         :size="setting.size"
+                        :max-height="tableMaxHeight"
                         :default-sort="getDefaultSortConfig"
                         v-bkloading="{ isLoading: !firstLoading && listLoading, opacity: 1, zIndex: 100 }"
                         @sort-change="handleSortChange"
@@ -225,7 +226,7 @@
                                 </template>
                             </template>
                         </bk-table-column>
-                        <bk-table-column :label="$t('操作')" width="240" class="operation-cell" :fixed="templateList.length ? 'right' : false">
+                        <bk-table-column :label="$t('操作')" width="240" class="operation-cell" :fixed="templateList.length ? 'right' : false" :resizable="false">
                             <template slot-scope="props">
                                 <div class="template-operation" :template-name="props.row.name">
                                     <template>
@@ -682,7 +683,8 @@
                 curSelectedRow: {},
                 searchList: tools.deepClone(SEARCH_LIST),
                 searchSelectValue,
-                templateLabelLoading: false
+                templateLabelLoading: false,
+                tableMaxHeight: window.innerHeight - 246
             }
         },
         computed: {