Skip to content

Commit 3e66767

Browse files
gimmyhehegimmyhehe
authored
feat(grid): [grid] grid component adapt to old theme (#2554)
* feat(grid): [grid] grid component adapt to old theme * test: fix e2e test case * feat(grid): [grid] grid component adapt to old theme
1 parent fdd92dd commit 3e66767

32 files changed

+230
-629
lines changed

‎examples/sites/demos/apis/grid.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -724,7 +724,10 @@ export default {
724724
mfDemo: ''
725725
},
726726
{
727-
name: 'IResizableConfig',
727+
name: 'resizable-config',
728+
meta: {
729+
stable: '3.19.0'
730+
},
728731
typeAnchorName: 'IResizableConfig',
729732
type: 'IResizableConfig',
730733
defaultValue: '',

‎examples/sites/demos/pc/app/grid/base/basic-usage-composition-api.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<tiny-grid :data="tableData" border :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }">
2+
<tiny-grid :data="tableData" :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }">
33
<tiny-grid-column type="index" width="60"></tiny-grid-column>
44
<tiny-grid-column type="selection" width="60"></tiny-grid-column>
55
<tiny-grid-column field="employees" title="员工数"></tiny-grid-column>

‎examples/sites/demos/pc/app/grid/base/basic-usage.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<tiny-grid :data="tableData" border :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }">
2+
<tiny-grid :data="tableData" :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }">
33
<tiny-grid-column type="index" width="60"></tiny-grid-column>
44
<tiny-grid-column type="selection" width="60"></tiny-grid-column>
55
<tiny-grid-column field="employees" title="员工数"></tiny-grid-column>

‎examples/sites/demos/pc/app/grid/dynamically-columns/column-switching-scroll-composition-api.vue

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
<template>
22
<div>
3-
<tiny-button @click="changeFlag">{{ flag ? '隐藏' : '显示' }}最后一列</tiny-button>
3+
<div>
4+
<tiny-button @click="changeFlag">{{ flag ? '隐藏' : '显示' }}最后一列</tiny-button>
5+
</div>
6+
<br />
47
<tiny-grid
58
ref="grid"
69
column-width="200"

‎examples/sites/demos/pc/app/grid/dynamically-columns/column-switching-scroll.vue

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
<template>
22
<div>
3-
<tiny-button @click="changeFlag">{{ flag ? '隐藏' : '显示' }}最后一列</tiny-button>
3+
<div>
4+
<tiny-button @click="changeFlag">{{ flag ? '隐藏' : '显示' }}最后一列</tiny-button>
5+
</div>
6+
<br />
47
<tiny-grid
58
ref="grid"
69
column-width="200"

‎examples/sites/demos/pc/app/grid/dynamically-columns/reverse-columns-composition-api.vue

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
<template>
22
<div>
3-
<tiny-button @click="change" type="primary" class="mb-16"> 反转列顺序 </tiny-button>
3+
<div>
4+
<tiny-button @click="change"> 反转列顺序 </tiny-button>
5+
</div>
6+
<br />
47
<tiny-grid :data="tableData">
58
<tiny-grid-column v-for="col in cols" :key="col.field" v-bind="col"></tiny-grid-column>
69
</tiny-grid>
@@ -50,9 +53,3 @@ function change() {
5053
cols.value.reverse()
5154
}
5255
</script>
53-
54-
<style scoped>
55-
.mb-16 {
56-
margin-bottom: 16px;
57-
}
58-
</style>

‎examples/sites/demos/pc/app/grid/dynamically-columns/reverse-columns.vue

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
<template>
22
<div>
3-
<tiny-button @click="change" type="primary" class="mb-16"> 反转列顺序 </tiny-button>
3+
<div>
4+
<tiny-button @click="change"> 反转列顺序 </tiny-button>
5+
</div>
6+
<br />
47
<tiny-grid :data="tableData">
58
<tiny-grid-column v-for="col in cols" :key="col.field" v-bind="col"></tiny-grid-column>
69
</tiny-grid>
@@ -60,9 +63,3 @@ export default {
6063
}
6164
}
6265
</script>
63-
64-
<style scoped>
65-
.mb-16 {
66-
margin-bottom: 16px;
67-
}
68-
</style>

‎examples/sites/demos/pc/app/grid/footer/footer-summation-empty-composition-api.vue

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
<template>
22
<div>
3-
<p><tiny-button @click="loadData">加载数据</tiny-button></p>
3+
<div>
4+
<tiny-button @click="loadData">加载数据</tiny-button>
5+
</div>
6+
<br />
47
<tiny-grid :data="tableData" show-footer :footer-method="footerMethod" border>
58
<tiny-grid-column type="index" width="60"></tiny-grid-column>
69
<tiny-grid-column type="selection" width="60"></tiny-grid-column>

‎examples/sites/demos/pc/app/grid/footer/footer-summation-empty.vue

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
<template>
22
<div>
3-
<p><tiny-button @click="loadData">加载数据</tiny-button></p>
3+
<div>
4+
<tiny-button @click="loadData">加载数据</tiny-button>
5+
</div>
6+
<br />
47
<tiny-grid :data="tableData" show-footer :footer-method="footerMethod" border>
58
<tiny-grid-column type="index" width="60"></tiny-grid-column>
69
<tiny-grid-column type="selection" width="60"></tiny-grid-column>

‎examples/sites/demos/pc/app/grid/header/config-grid-header-composition-api.vue

Lines changed: 23 additions & 165 deletions
Original file line numberDiff line numberDiff line change
@@ -2,28 +2,21 @@
22
<tiny-grid v-bind="op"></tiny-grid>
33
</template>
44

5-
<script setup>
5+
<script setup lang="jsx">
66
import { ref } from 'vue'
77
import { TinyGrid } from '@opentiny/vue'
8+
import { iconHelpQuery } from '@opentiny/vue-icon'
9+
10+
const TinyHelpQuery = iconHelpQuery()
811
912
const tableData = [
1013
{
1114
id: '1',
1215
transDate: '2014-04-30',
13-
a01: 0,
14-
a02: 0,
15-
a03: 0,
16-
a04: 0,
17-
a05: 0,
18-
a06: 0,
19-
a07: 0,
20-
a08: 0,
21-
a09: 0,
22-
a10: 0,
23-
a11: 0,
24-
a12: 0,
25-
a13: 0,
26-
a14: 0
16+
a1: '1-1',
17+
a2: '1-2',
18+
a3: '2-1',
19+
a4: '2-2'
2720
}
2821
]
2922
@@ -42,168 +35,33 @@ const op = ref({
4235
title: '交易日期'
4336
},
4437
{
45-
title: '支付机构业务系统中已反映的入金业务',
38+
title: '父表头1',
4639
children: [
4740
{
48-
title: '备付金账户已入金金额',
49-
children: [
50-
{
51-
title: '本期系统反映，本期入金',
52-
children: [
53-
{
54-
title: '业务系统中贷记客户账户金额',
55-
children: [
56-
{
57-
field: 'a01',
58-
title: 'A01'
59-
}
60-
]
61-
},
62-
{
63-
title: '手续费收入（支出）',
64-
children: [
65-
{
66-
field: 'a02',
67-
title: 'A02'
68-
}
69-
]
70-
},
71-
{
72-
title: '其他',
73-
children: [
74-
{
75-
field: 'a03',
76-
title: 'A03'
77-
}
78-
]
79-
}
80-
]
81-
},
82-
{
83-
title: '前期系统反映，本期入金',
84-
children: [
85-
{
86-
title: '业务系统中贷记客户账户金额',
87-
children: [
88-
{
89-
field: 'a04',
90-
title: 'A04'
91-
}
92-
]
93-
},
94-
{
95-
title: '手续费收入（支出）',
96-
children: [
97-
{
98-
field: 'a05',
99-
title: 'A05'
100-
}
101-
]
102-
},
103-
{
104-
title: '其他',
105-
children: [
106-
{
107-
field: 'a06',
108-
title: 'A06'
109-
}
110-
]
111-
}
112-
]
113-
}
114-
]
41+
field: 'a1',
42+
title: '子表头1-1'
11543
},
11644
{
117-
title: '应收入金业务金额',
118-
children: [
119-
{
120-
title: '本期业务系统中已贷记客户账户金额',
121-
children: [
122-
{
123-
field: 'a07',
124-
title: 'A07'
125-
}
126-
]
127-
},
128-
{
129-
title: '本期手续费收入（支出）',
130-
children: [
131-
{
132-
field: 'a08',
133-
title: 'A08'
134-
}
135-
]
136-
},
137-
{
138-
title: '其他',
139-
children: [
140-
{
141-
field: 'a09',
142-
title: 'A09'
143-
}
144-
]
145-
}
146-
]
45+
field: 'a2',
46+
title: '子表头1-2'
14747
}
14848
]
14949
},
15050
{
151-
title: '支付机构业务系统中未反映但备付金账户已收到款项',
51+
title: '父表头2',
15252
children: [
15353
{
154-
title: '本期收到的金额',
155-
children: [
156-
{
157-
field: 'a10',
158-
title: 'A10'
159-
}
160-
]
54+
field: 'a3',
55+
title: '子表头2-1'
16156
},
16257
{
163-
title: '当期处理',
164-
children: [
165-
{
166-
title: '补入账',
167-
children: [
168-
{
169-
title: '业务系统中贷记客户账户金额',
170-
children: [
171-
{
172-
field: 'a11',
173-
title: 'A11'
174-
}
175-
]
176-
},
177-
{
178-
title: '手续费收入（支出）',
179-
children: [
180-
{
181-
field: 'a12',
182-
title: 'A12'
183-
}
184-
]
185-
},
186-
{
187-
title: '其他',
188-
children: [
189-
{
190-
field: 'a13',
191-
title: 'A13'
192-
}
193-
]
194-
}
195-
]
196-
},
197-
{
198-
title: '退回',
199-
children: [
200-
{
201-
field: 'a14',
202-
title: 'A14'
203-
}
204-
]
205-
}
206-
]
58+
field: 'a4',
59+
title: () => (
60+
<>
61+
<span class="tiny-grid-cell-text">自定义表头</span>
62+
<TinyHelpQuery style="margin-left: 4px;" />
63+
</>
64+
)
20765
}
20866
]
20967
}

‎examples/sites/demos/pc/app/grid/header/config-grid-header.spec.js

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@ import { test, expect } from '@playwright/test'
33
test('配置式多级表头', async ({ page }) => {
44
page.on('pageerror', (exception) => expect(exception).toBeNull())
55
await page.goto('grid-header#header-config-grid-header')
6-
await expect(page.getByText('前期系统反映，本期入金')).toBeVisible()
7-
await expect(page.getByText('支付机构业务系统中未反映但备付金账户已收到款项')).toBeVisible()
8-
await expect(page.getByText('业务系统中贷记客户账户金额').nth(2)).toBeVisible()
6+
const demo = page.locator('#header-config-grid-header')
7+
await expect(demo.getByText('子表头1-1')).toBeVisible()
8+
await expect(demo.getByText('父表头2')).toBeVisible()
9+
await expect(demo.getByText('自定义表头')).toBeVisible()
910
})

0 commit comments

Comments
 (0)