feat(workflows): 第一个表格选择更多页时应该自动调整高度

close os-checker#115

Author: zjp-CN

os-checks/components/TargetTable.vue

@@ -1,9 +1,9 @@
 <template>
   <div>
     <!-- NOTE: choosing large page options will render slow and consume more memory -->
-    <DataTable :value="data" paginator :rows="5" :rowsPerPageOptions="[5, 10, 20, 50, 100, 200, 1000]" stripedRows
-      selectionMode="single" v-model:selection="selected" removableSort sortMode="multiple" scrollable
-      scrollHeight="300px" @rowSelect="rowSelect">
+    <DataTable :value="data" paginator :rows="rowsPerPage" :rowsPerPageOptions="[5, 10, 20, 50, 100, 200, 1000]"
+      stripedRows selectionMode="single" v-model:selection="selected" removableSort sortMode="multiple" scrollable
+      :scrollHeight="scrollHeight" @rowSelect="rowSelect">
       <Column v-for="col of dataColumns" :key="col.field" :field="col.field" :header="col.header" sortable />
     </DataTable>
   </div>
@@ -12,18 +12,22 @@
 <script lang="ts" setup>
 import type { DataTableRowSelectEvent } from 'primevue/datatable';
 
-
 type FieldHeader = {
   field: string,
   header: string,
 }
 
-const { data, dataColumns, rowSelect } = defineProps<{
+const { data, dataColumns, rowSelect, height, rows } = defineProps<{
   data: any,
   dataColumns: FieldHeader[],
-  rowSelect?: (_: DataTableRowSelectEvent) => void
+  rowSelect?: (_: DataTableRowSelectEvent) => void,
+  height?: string,
+  rows?: number,
 }>();
 
+const scrollHeight = computed(() => height ?? "300px");
+const rowsPerPage = computed(() => rows ?? 5);
+
 const selected = ref();
 
 </script>

os-checks/pages/workflows.vue

@@ -13,9 +13,11 @@
   </div>
 
   <TargetTable :data="workflowSelected" :dataColumns="workflowColumns" :rowSelect="onRowSelectedWorkflow"
+    :height="heightWorkflows" :rows="10"
     class="workflow-table" />
 
-  <TargetTable :data="runSelected" :dataColumns="runColumns" :rowSelect="onRowSelectedJobs" class="workflow-table" />
+  <TargetTable :data="runSelected" :dataColumns="runColumns" :rowSelect="onRowSelectedJobs"
+    :height="heightRuns" class="workflow-table" />
 
   <Dialog v-model:visible="visible" modal :style="{ width: '70%' }">
     <template #header>
@@ -116,7 +118,10 @@
 import type { DataTableRowSelectEvent } from 'primevue/datatable';
 import { type Workflows, type Summary, summary_to_workflows } from '~/shared/workflows';
 
-const { color } = storeToRefs(useStyleStore());
+const { color, viewportHeight } = storeToRefs(useStyleStore());
+
+const heightWorkflows = computed(() => `${viewportHeight.value * 0.5}px`);
+const heightRuns = computed(() => `${viewportHeight.value * 0.3}px`);
 
 const visible = ref(false);