mirror of
https://gitee.com/fit2cloud-feizhiyun/MeterSphere.git
synced 2024-12-05 21:49:23 +08:00
feat: 表格每页展示条数
This commit is contained in:
parent
c09f15ed11
commit
d4c9ebedae
@ -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(() => {
|
||||
|
@ -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);
|
||||
|
@ -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>
|
||||
|
@ -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',
|
||||
|
@ -27,6 +27,7 @@ export default {
|
||||
nonSort: '以上属性不可排序',
|
||||
tooltipContentDrawer: '抽屉:以抽屉形式打开新页面',
|
||||
tooltipContentWindow: '新窗口:以新开网页打开新页面',
|
||||
pageSize: '每页显示数量',
|
||||
},
|
||||
cancel: '取消',
|
||||
confirm: '确定',
|
||||
|
@ -79,6 +79,7 @@ export interface MsTableProps<T> {
|
||||
showExpand?: boolean; // 是否显示展开行
|
||||
expandedKeys?: string[]; // 显示的展开行、子树(受控模式)
|
||||
emptyDataShowLine?: boolean; // 空数据是否显示 "-"
|
||||
showJumpMethod?: boolean; // 是否展示跳转方法
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
|
@ -63,6 +63,8 @@ export default function useTableProps<T>(
|
||||
/** 展开行相关 */
|
||||
showExpand: false, // 是否显示展开行
|
||||
emptyDataShowLine: true, // 空数据是否显示 "-"
|
||||
/** Column Selector */
|
||||
showJumpMethod: false, // 是否显示跳转方法
|
||||
...props,
|
||||
};
|
||||
|
||||
|
@ -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;
|
||||
};
|
||||
},
|
||||
},
|
||||
|
@ -282,6 +282,7 @@
|
||||
size: 'default',
|
||||
selectable: true,
|
||||
showSetting: true,
|
||||
showJumpMethod: true,
|
||||
},
|
||||
(record) => ({
|
||||
...record,
|
||||
|
Loading…
Reference in New Issue
Block a user