html/admin-web
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化

Browse Source
This commit is contained in:
ouyangxq
2026-08-11 20:39:34 +08:00
parent 75f9c51bea
commit 23fc845dcf
6 changed files with 82 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/shared/components/DataTable.test.ts
+54 -5
View File
@@ -22,7 +22,7 @@ const configurableColumns: DataTableColumn[] = [
function mountTable() {
return shallowMount(DataTable, {
props: { data: [], columns: configurableColumns, preferenceKey: 'orders-table' },
props: { data: [], columns: configurableColumns, preferenceKey: 'orders-table', columnSettingsMode: 'show' },
global: {
provide: { [UI_PREFERENCE_SCOPE as symbol]: computed(() => 'user-1') },
stubs: {
@@ -90,7 +90,7 @@ describe('DataTable column preferences', () => {
it('keeps business actions, column settings, and trailing controls in one toolbar', () => {
const wrapper = shallowMount(DataTable, {
props: { data: [], columns: configurableColumns, preferenceKey: 'orders-table' },
props: { data: [], columns: configurableColumns, preferenceKey: 'orders-table', columnSettingsMode: 'show' },
slots: {
'toolbar-start': '<h2>订单列表</h2>',
'toolbar-actions': '<button>新增订单</button>',
@@ -120,7 +120,7 @@ describe('DataTable column preferences', () => {
it('uses a compact right-aligned toolbar when no leading content is provided', () => {
const wrapper = shallowMount(DataTable, {
props: { data: [], columns: configurableColumns, preferenceKey: 'orders-table' },
props: { data: [], columns: configurableColumns, preferenceKey: 'orders-table', columnSettingsMode: 'show' },
slots: { 'toolbar-actions': '<button>新增订单</button>' },
global: {
provide: { [UI_PREFERENCE_SCOPE as symbol]: computed(() => 'user-1') },
@@ -142,7 +142,7 @@ describe('DataTable column preferences', () => {
it('keeps business actions in a separate mobile-wrappable group from column settings', () => {
const wrapper = shallowMount(DataTable, {
props: { data: [], columns: configurableColumns, preferenceKey: 'orders-table' },
props: { data: [], columns: configurableColumns, preferenceKey: 'orders-table', columnSettingsMode: 'show' },
slots: { 'toolbar-actions': '<button class="create-action">新增快递公司</button>' },
global: {
provide: { [UI_PREFERENCE_SCOPE as symbol]: computed(() => 'user-1') },
@@ -166,7 +166,7 @@ describe('DataTable column preferences', () => {
it('can hide column settings for compact tables without leaving an empty toolbar', () => {
const wrapper = shallowMount(DataTable, {
props: { data: [], columns: configurableColumns, preferenceKey: 'summary-table', showColumnSettings: false },
props: { data: [], columns: configurableColumns, preferenceKey: 'summary-table', columnSettingsMode: 'hide' },
global: {
provide: { [UI_PREFERENCE_SCOPE as symbol]: computed(() => 'user-1') },
stubs: { ElTable: TableStub, ElTableColumn: ColumnStub, ElButton: ButtonStub, ElPopover: PopoverStub },
@@ -177,4 +177,53 @@ describe('DataTable column preferences', () => {
expect(wrapper.find('button[aria-label="列设置"]').exists()).toBe(false)
expect(wrapper.find('.data-table__toolbar').exists()).toBe(false)
})
it('shows every column when column settings are hidden', () => {
localStorage.setItem('cc:ui-layout:user-1:table:summary-table', JSON.stringify({
version: 1,
order: configurableColumns.map((column) => String(column.key)),
hidden: ['status'],
}))
const wrapper = shallowMount(DataTable, {
props: { data: [], columns: configurableColumns, preferenceKey: 'summary-table', columnSettingsMode: 'hide' },
global: {
provide: { [UI_PREFERENCE_SCOPE as symbol]: computed(() => 'user-1') },
stubs: { ElTable: TableStub, ElTableColumn: ColumnStub, ElButton: ButtonStub, ElPopover: PopoverStub },
directives: { loading: {} },
},
})
expect(wrapper.findAllComponents(ColumnStub)).toHaveLength(configurableColumns.length)
})
it('hides column settings by default for four or fewer configurable business columns', () => {
const wrapper = shallowMount(DataTable, {
props: { data: [], columns: configurableColumns, preferenceKey: 'compact-table' },
global: {
provide: { [UI_PREFERENCE_SCOPE as symbol]: computed(() => 'user-1') },
stubs: { ElTable: TableStub, ElTableColumn: ColumnStub, ElButton: ButtonStub, ElPopover: PopoverStub },
directives: { loading: {} },
},
})
expect(wrapper.find('button[aria-label="列设置"]').exists()).toBe(false)
expect(wrapper.find('.data-table__toolbar').exists()).toBe(false)
})
it('keeps column settings by default for complex tables', () => {
const complexColumns: DataTableColumn[] = [
{ key: 'actions', label: '操作' },
...Array.from({ length: 5 }, (_, index) => ({ key: `field-${index}`, label: `字段 ${index + 1}` })),
]
const wrapper = shallowMount(DataTable, {
props: { data: [], columns: complexColumns, preferenceKey: 'complex-table' },
global: {
provide: { [UI_PREFERENCE_SCOPE as symbol]: computed(() => 'user-1') },
stubs: { ElTable: TableStub, ElTableColumn: ColumnStub, ElButton: ButtonStub, ElPopover: PopoverStub },
directives: { loading: {} },
},
})
expect(wrapper.find('button[aria-label="列设置"]').exists()).toBe(true)
})
})