feat: 表格每页展示条数

This commit is contained in:
RubyLiu 2023-10-30 11:37:53 +08:00 committed by Craftsman
parent c09f15ed11
commit d4c9ebedae
9 changed files with 73 additions and 38 deletions

View File

@ -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(() => {

View File

@ -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);

View File

@ -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>

View File

@ -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',

View File

@ -27,6 +27,7 @@ export default {
nonSort: '以上属性不可排序',
tooltipContentDrawer: '抽屉:以抽屉形式打开新页面',
tooltipContentWindow: '新窗口:以新开网页打开新页面',
pageSize: '每页显示数量',
},
cancel: '取消',
confirm: '确定',

View File

@ -79,6 +79,7 @@ export interface MsTableProps<T> {
showExpand?: boolean; // 是否显示展开行
expandedKeys?: string[]; // 显示的展开行、子树(受控模式)
emptyDataShowLine?: boolean; // 空数据是否显示 "-"
showJumpMethod?: boolean; // 是否展示跳转方法
[key: string]: any;
}

View File

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

View File

@ -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;
};
},
},

View File

@ -282,6 +282,7 @@
size: 'default',
selectable: true,
showSetting: true,
showJumpMethod: true,
},
(record) => ({
...record,