feat: 表格每页展示条数

2024-12-11 09:20:55 +08:00 · 2023-10-30 11:37:53 +08:00 · 2023-10-30 11:37:53 +08:00 · d4c9ebedae
commit d4c9ebedae
parent c09f15ed11
9 changed files with 73 additions and 38 deletions
--- a/frontend/src/components/pure/ms-table/base-table.vue
+++ b/frontend/src/components/pure/ms-table/base-table.vue
@ -53,14 +53,17 @@
          :tooltip="item.tooltip"
        >
          <template #title>
-            <div
-              v-if="props.showSetting && idx === currentColumns.length - 1"
-              class="flex flex-row flex-nowrap items-center"
-            >
+            <div v-if="props.showSetting && idx === lastColumnIndex" class="flex flex-row flex-nowrap items-center">
              <slot :name="item.titleSlotName">
                <div class="text-[var(--color-text-3)]">{{ t(item.title as string) }}</div>
              </slot>
-              <ColumnSelector :table-key="(attrs.tableKey as string)" @close="handleColumnSelectorClose" />
+              <ColumnSelector
+                :show-jump-method="(attrs.showJumpMethod as boolean)"
+                :table-key="(attrs.tableKey as string)"
+                :show-pagination="attrs.showPagination as boolean"
+                @close="handleColumnSelectorClose"
+                @page-size-change="pageSizeChange"
+              />
            </div>
            <slot v-else :name="item.titleSlotName">
              <div class="text-[var(--color-text-3)]">{{ t(item.title as string) }}</div>
@ -235,6 +238,7 @@
    (e: 'clearSelector'): void;
  }>();
  const attrs = useAttrs();
+  const lastColumnIndex = computed(() => currentColumns.value.length - 1);

  // 全选按钮-总条数
  const selectTotal = computed(() => {
--- a/frontend/src/components/pure/ms-table/columnSelector.vue
+++ b/frontend/src/components/pure/ms-table/columnSelector.vue
@ -9,34 +9,44 @@
    @cancel="handleCancel"
  >
    <div class="ms-table-column-seletor">
-      <div class="mb-2 flex items-center">
-        <span class="text-[var(--color-text-4)]">{{ t('msTable.columnSetting.mode') }}</span>
-        <a-tooltip :content="t('msTable.columnSetting.tooltipContent')">
-          <template #content>
-            <span>{{ t('msTable.columnSetting.tooltipContentDrawer') }}</span
-            ><br />
-            <span>{{ t('msTable.columnSetting.tooltipContentWindow') }}</span>
-          </template>
-          <span class="inline-block align-middle"
-            ><icon-question-circle
-              class="ml-[4px] mt-[3px] text-[var(--color-text-brand)] hover:text-[rgb(var(--primary-5))]"
-          /></span>
-        </a-tooltip>
-      </div>
-      <a-radio-group :model-value="currentMode" type="button" @change="handleModeChange">
-        <a-radio value="drawer">
-          <div class="mode-button">
-            <MsIcon :class="{ 'active-color': currentMode === 'drawer' }" type="icon-icon_drawer" />
-            <span class="mode-button-title">{{ t('msTable.columnSetting.drawer') }}</span>
-          </div>
-        </a-radio>
-        <a-radio value="new_window">
-          <div class="mode-button">
-            <MsIcon :class="{ 'active-color': currentMode === 'new_window' }" type="icon-icon_into-item_outlined" />
-            <span class="mode-button-title">{{ t('msTable.columnSetting.newWindow') }}</span>
-          </div>
-        </a-radio>
-      </a-radio-group>
+      <template v-if="showJumpMethod">
+        <div class="mb-2 flex items-center">
+          <span class="text-[var(--color-text-4)]">{{ t('msTable.columnSetting.mode') }}</span>
+          <a-tooltip :content="t('msTable.columnSetting.tooltipContent')">
+            <template #content>
+              <span>{{ t('msTable.columnSetting.tooltipContentDrawer') }}</span
+              ><br />
+              <span>{{ t('msTable.columnSetting.tooltipContentWindow') }}</span>
+            </template>
+            <span class="inline-block align-middle"
+              ><icon-question-circle
+                class="ml-[4px] mt-[3px] text-[var(--color-text-brand)] hover:text-[rgb(var(--primary-5))]"
+            /></span>
+          </a-tooltip>
+        </div>
+        <a-radio-group class="mb-2" :model-value="currentMode" type="button" @change="handleModeChange">
+          <a-radio value="drawer">
+            <div class="mode-button">
+              <MsIcon :class="{ 'active-color': currentMode === 'drawer' }" type="icon-icon_drawer" />
+              <span class="mode-button-title">{{ t('msTable.columnSetting.drawer') }}</span>
+            </div>
+          </a-radio>
+          <a-radio value="new_window">
+            <div class="mode-button">
+              <MsIcon :class="{ 'active-color': currentMode === 'new_window' }" type="icon-icon_into-item_outlined" />
+              <span class="mode-button-title">{{ t('msTable.columnSetting.newWindow') }}</span>
+            </div>
+          </a-radio>
+        </a-radio-group>
+      </template>
+      <tmplate v-if="props.showPagination">
+        <div class="text-[var(--color-text-4)]">{{ t('msTable.columnSetting.pageSize') }} </div>
+        <PageSizeSelector
+          v-model:model-value="pageSize"
+          class="mt-2"
+          @page-size-change="(v: number) => emit('pageSizeChange',v)"
+        />
+      </tmplate>
      <a-divider />
      <div class="mb-2 flex items-center justify-between">
        <div class="text-[var(--color-text-4)]">{{ t('msTable.columnSetting.header') }}</div>
@ -78,9 +88,10 @@
  import MsButton from '@/components/pure/ms-button/index.vue';
  import MsDrawer from '@/components/pure/ms-drawer/index.vue';
  import MsIcon from '@/components/pure/ms-icon-font/index.vue';
+  import PageSizeSelector from './comp/pageSizeSelector.vue';

  import { useI18n } from '@/hooks/useI18n';
-  import { useTableStore } from '@/store';
+  import { useAppStore, useTableStore } from '@/store';
  import { TableOpenDetailMode } from '@/store/modules/ms-table/types';

  import { MsTableColumn } from './type';
@ -89,6 +100,8 @@
  const tableStore = useTableStore();
  const { t } = useI18n();
  const currentMode = ref('');
+  const appStore = useAppStore();
+  const pageSize = ref(appStore.pageSize);
  // 不能拖拽的列
  const nonSortColumn = ref<MsTableColumn>([]);
  // 可以拖拽的列
@ -98,10 +111,13 @@

  const emit = defineEmits<{
    (e: 'close'): void;
+    (e: 'pageSizeChange', value: number): void;
  }>();

  const props = defineProps<{
    tableKey: string;
+    showJumpMethod: boolean;
+    showPagination: boolean;
  }>();

  const visible = ref(false);
--- a/frontend/src/components/pure/ms-table/comp/pageSizeSelector.vue
+++ b/frontend/src/components/pure/ms-table/comp/pageSizeSelector.vue
@ -1,10 +1,16 @@
 <template>
-  <div class="flex h-[32px] w-[289px] items-center gap-[4px]">
+  <div
+    class="flex h-[32px] w-[289px] items-center gap-[4px] rounded-[4px] bg-[var(--color-text-n8)] text-[var(--color-text-2)]"
+  >
    <div
      v-for="item in option"
      :key="item"
-      class="flex h-[28px] w-[49px] items-center justify-center"
-      :class="{ 'bg-[var(--color-bg-1)] text-[var(--color-text-4)]': item !== props.modelValue }"
+      class="flex h-[28px] w-[49px] cursor-pointer items-center justify-center rounded-[4px]"
+      :class="{
+        'w-[75px] bg-[var(--color-bg-1)] text-[rgb(var(--primary-5))]': item === props.modelValue,
+        'ml-[4px]': props.modelValue === 10,
+        'mr-[4px]': props.modelValue === 50,
+      }"
      @click="handleClick(item)"
      >{{ item }}</div
    >
@ -17,9 +23,11 @@
  }>();
  const emit = defineEmits<{
    (e: 'update:modelValue', value: number): void;
+    (e: 'pageSizeChange', value: number): void;
  }>();
  const option = [10, 20, 30, 40, 50];
  const handleClick = (value: number) => {
    emit('update:modelValue', value);
+    emit('pageSizeChange', value);
  };
 </script>
--- a/frontend/src/components/pure/ms-table/locale/en-US.ts
+++ b/frontend/src/components/pure/ms-table/locale/en-US.ts
@ -27,6 +27,7 @@ export default {
      nonSort: 'The above properties cannot be sorted',
      tooltipContentDrawer: 'Drawer: open a new page as a drawer',
      tooltipContentWindow: 'New Window: open a new page with a new page',
+      pageSize: 'Number of items per page',
    },
    cancel: 'Cancel',
    confirm: 'Confirm',
--- a/frontend/src/components/pure/ms-table/locale/zh-CN.ts
+++ b/frontend/src/components/pure/ms-table/locale/zh-CN.ts
@ -27,6 +27,7 @@ export default {
      nonSort: '以上属性不可排序',
      tooltipContentDrawer: '抽屉：以抽屉形式打开新页面',
      tooltipContentWindow: '新窗口：以新开网页打开新页面',
+      pageSize: '每页显示数量',
    },
    cancel: '取消',
    confirm: '确定',
--- a/frontend/src/components/pure/ms-table/type.ts
+++ b/frontend/src/components/pure/ms-table/type.ts
@ -79,6 +79,7 @@ export interface MsTableProps<T> {
  showExpand?: boolean; // 是否显示展开行
  expandedKeys?: string[]; // 显示的展开行、子树（受控模式）
  emptyDataShowLine?: boolean; // 空数据是否显示 "-"
+  showJumpMethod?: boolean; // 是否展示跳转方法
  [key: string]: any;
 }

--- a/frontend/src/components/pure/ms-table/useTable.ts
+++ b/frontend/src/components/pure/ms-table/useTable.ts
@ -63,6 +63,8 @@ export default function useTableProps<T>(
    /** 展开行相关 */
    showExpand: false, // 是否显示展开行
    emptyDataShowLine: true, // 空数据是否显示 "-"
+    /** Column Selector */
+    showJumpMethod: false, // 是否显示跳转方法
    ...props,
  };

--- a/frontend/src/store/modules/ms-table/index.ts
+++ b/frontend/src/store/modules/ms-table/index.ts
@ -5,6 +5,7 @@ import { MsTableColumn, MsTableColumnData } from '@/components/pure/ms-table/typ

 import { SpecialColumnEnum } from '@/enums/tableEnum';

+import useAppStore from '../app';
 import { MsTableState, TableOpenDetailMode } from './types';

 const msTableStore = defineStore('msTable', {
@ -112,7 +113,7 @@ const msTableStore = defineStore('msTable', {
        if (state.pageSizeMap[key]) {
          return state.pageSizeMap[key];
        }
-        return 10;
+        return useAppStore().pageSize;
      };
    },
  },
--- a/frontend/src/views/setting/system/user/index.vue
+++ b/frontend/src/views/setting/system/user/index.vue
@ -282,6 +282,7 @@
      size: 'default',
      selectable: true,
      showSetting: true,
+      showJumpMethod: true,
    },
    (record) => ({
      ...record,