Skip to content

Commit 7a1b427

Browse files
liyuan-menghanwu
liyuan-meng
and
hanwu
authored
[CTable]排序相关功能新增和问题修复[Select]支持搜索高亮[Drawer]抽屉问题修复[CPikcer]固定 rc-picker 版本 (#715)
* ✨ [CTable] 新增 footerTotalTpl 参数，支持配置 自定义 共n条 模板 * ✨ [Icon] 新增图标 * ✨ [CTable] 新增排序相关参数 sortWidthOriginStatus、sortMultiColumns、titleTooltipConfig、titleTooltipAlign * ✨ [Select] 下拉框支持搜索高亮关键字 * ✨ [CTable]修改样式 * 🐛 [CTable]修改样式，解决排序图标层级错误的问题 * 🐛 [Drawer] 添加说明文档和关闭抽屉的 DEMO * 🐛 [Select]解决配置高亮后，下拉框内容展示异常的问题 * 🐛 [Drawer]提供 excludeClassList 参数，支持配置元素类名数组，点击拥有该类名的元素，不会关闭抽屉 * 🐛 固定 rc-cascader 版本 * 更改抽屉关闭 --------- Co-authored-by: hanwu <han.wu@shuyun.com>
1 parent b6b37cc commit 7a1b427

28 files changed

Lines changed: 542 additions & 181 deletions

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@
4242
"moment": "^2.29.1",
4343
"patch-package": "^6.4.7",
4444
"prop-types": "^15.7.2",
45-
"rc-cascader": "^3.4.2",
45+
"rc-cascader": "3.4.2",
4646
"rc-color-picker": "^1.2.6",
4747
"rc-drawer": "^6.0.1",
4848
"rc-dropdown": "~4.0.1",
@@ -122,4 +122,4 @@
122122
"pre-commit": "npm run test"
123123
}
124124
}
125-
}
125+
}

‎src/components/c-table/css/basic.less‎

Lines changed: 28 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -116,6 +116,11 @@
116116
pointer-events: none;
117117
}
118118

119+
&-fix-left,
120+
&-fix-right {
121+
z-index: 2;
122+
}
123+
119124
&-fix-right-first,
120125
&-fix-right-last {
121126
.@{tablePrefixCls}-rtl & {
@@ -488,18 +493,18 @@
488493
position: absolute;
489494
right: 12px;
490495
font-size: 14px;
491-
color: @gray-7;
496+
color: #949494;
492497
display: inline-block;
493498
transform: scale(0.9);
494499
z-index: 1;
495500
}
496501

497502
.sort-up-icon {
498-
top: calc(50% - 14px);
503+
top: calc(50% - 13px);
499504
}
500505

501506
.sort-down-icon {
502-
top: calc(50% - 7px);
507+
top: calc(50% - 6px);
503508
}
504509
}
505510

@@ -521,7 +526,7 @@
521526
.filter-icon {
522527
position: absolute;
523528
right: 14px;
524-
top: 11px;
529+
top: 13px;
525530
//top: 50%;
526531
//transform: translate(0, -50%);
527532
cursor: pointer;
@@ -535,6 +540,25 @@
535540
color: @blue-4;
536541
}
537542
}
543+
544+
.title-with-tip {
545+
display: inline-flex;
546+
align-items: center;
547+
548+
.title-tip-icon {
549+
//position: relative;
550+
//top: 1px;
551+
margin: 0 4px;
552+
color: @gray-6;
553+
}
554+
555+
&.title-with-tip-right {
556+
}
557+
558+
&.title-with-tip-left {
559+
flex-direction: row-reverse;
560+
}
561+
}
538562
}
539563

540564
&-sticky {

src/components/c-table/demos/page.md renamed to src/components/c-table/demos/checkbox.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -126,6 +126,11 @@ export default function CTableDemo() {
126126
loading: isLoading,
127127
layer: true,
128128
}}
129+
footerTotalTpl={total => {
130+
return (
131+
<span>共 {total} 条，上限 1000 条</span>
132+
)
133+
}}
129134
/>
130135
</div>
131136
);

src/components/c-table/demos/page1.md renamed to src/components/c-table/demos/checkbox1.md

File renamed without changes.

src/components/c-table/demos/tree3.md renamed to src/components/c-table/demos/fullColumn.md

File renamed without changes.

src/components/c-table/demos/tree2.md renamed to src/components/c-table/demos/group.md

File renamed without changes.

‎src/components/c-table/demos/sort-front.md‎

Lines changed: 63 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -8,48 +8,86 @@ desc: 表格排序
88

99
/**
1010
* title: 表格排序
11-
* desc: 表格排序（纯前端表格排序）
11+
* desc: 表格排序（纯前端表格排序），sortWidthOriginStatus 参数可选，此处配置为 true，支持排序恢复默认状态
1212
*/
13-
import React from 'react';
14-
import { CTable } from 'cloud-react';
13+
import React, { useState } from 'react';
14+
import { CTable, Checkbox } from 'cloud-react';
1515

1616
const data = [
17-
{ id: '121410327', name: '手机号优先继续发送1', createTime: '2021/12/14 10:19:02', creator: 'liyuan.meng', num: '12,222' },
18-
{ id: '121410328', name: 'ouid疲劳度3', createTime: '2021/12/13 15:47:33 ', creator: 'jiaojiao.diao', num: '198' },
19-
{ id: '121410329', name: '继续发送手机3', createTime: '2021/12/13 15:36:42', creator: 'nan.run', num: '1,232' },
20-
{ id: '121408294', name: '继续发送手机4', createTime: '2021/12/13 11:14:40', creator: 'xiaotong.fan', num: '12,122,112' },
21-
{ id: '121407191', name: '继续发送手机2', createTime: '2021/12/13 11:03:05', creator: 'zhenxiao.guo', num: '1000,000' },
17+
{ id: '121410322', name: 'ouid疲劳度2', createTime: '2021/12/13 15:47:33 ', creator: 'jiaojiao.diao', num: '198', orderNum: '122' },
18+
{ id: '121410323', name: '继续发送手机3', createTime: '2021/12/13 15:36:42', creator: 'nan.run', num: '1,232', orderNum: '1,332' },
19+
{ id: '121410321', name: '手机号优先继续发送1', createTime: '2021/12/14 10:19:02', creator: 'liyuan.meng', num: '12,222', orderNum: '33,342' },
20+
{ id: '121410324', name: '继续发送手机4', createTime: '2021/12/13 11:14:40', creator: 'xiaotong.fan', num: '12,122,112', orderNum: '112,122,112' },
21+
{ id: '121410325', name: '继续发送手机5', createTime: '2021/12/13 11:03:05', creator: 'zhenxiao.guo', num: '1000,000', orderNum: '200,000' },
2222
];
2323

2424
const columns = [
25-
{ title: '活动ID', dataIndex: 'id', sortable: true },
26-
{ title: '活动名称', dataIndex: 'name' },
25+
{
26+
title: '活动ID',
27+
dataIndex: 'id',
28+
sortable: true,
29+
sorter: (a, b, sortParams) => {
30+
if (sortParams.sortBy === 'ASC') {
31+
return Number(a.id) - Number(b.id);
32+
}
33+
if (sortParams.sortBy === 'DESC') {
34+
return Number(b.id) - Number(a.id)
35+
}
36+
return 0
37+
}
38+
},
39+
{
40+
title: '活动名称',
41+
dataIndex: 'name',
42+
sortable: true,
43+
sorter: (a, b, sortParams) => {
44+
if (sortParams.sortBy === 'ASC') {
45+
return a.name.localeCompare(b.name);
46+
}
47+
if (sortParams.sortBy === 'DESC') {
48+
return b.name.localeCompare(a.name);
49+
}
50+
return 0
51+
}
52+
},
2753
{ title: '创建时间', dataIndex: 'createTime' },
2854
{ title: '人数', dataIndex: 'num', align: 'right' },
2955
{ title: '创建人', dataIndex: 'creator' }
3056
];
3157

3258
export default function CTableDemo() {
33-
const sort = (data, { sortParams }) => {
34-
if (sortParams?.dataIndex === 'id') {
35-
return data.sort((a, b) => sortParams.sortBy === 'ASC' ? a.id - b.id : b.id - a.id);
36-
}
37-
return data;
38-
};
39-
59+
const [sortMultiColumns, setSortMultiColumns] = useState(false);
60+
const [sortWidthOriginStatus, setSortWidthOriginStatus] = useState(false);
4061
const page = (data, { pageNum, pageSize }) => {
4162
return JSON.parse(JSON.stringify(data.slice(pageSize * (pageNum - 1), pageSize * pageNum)))
4263
}
4364

4465
return (
45-
<CTable
46-
supportPage
47-
columnData={columns}
48-
ajaxData={(params) => {
49-
const sortedData = sort(data, params);
50-
return { totals: data.length, data: page(sortedData, params) }
51-
}}
52-
/>
66+
<div>
67+
<Checkbox style={{ marginBottom: 20 }} checked={sortMultiColumns} onChange={checked => {
68+
setSortMultiColumns(checked);
69+
}}>支持多个列同时排序</Checkbox>
70+
<Checkbox style={{ marginBottom: 20, marginLeft: 15 }} checked={sortWidthOriginStatus} onChange={checked => {
71+
setSortWidthOriginStatus(checked);
72+
}}>支持排序恢复默认状态</Checkbox>
73+
<CTable
74+
key={`${sortMultiColumns}${sortWidthOriginStatus}`}
75+
supportPage
76+
sortMultiColumns={sortMultiColumns}
77+
sortWidthOriginStatus={sortWidthOriginStatus}
78+
columnData={columns}
79+
ajaxData={(params) => {
80+
console.log('所有列排序配置:');
81+
console.table(params.sortParams?.allSortColumns.map(item => {
82+
return {
83+
dataIndex: item.dataIndex,
84+
sortBy: item.sortBy
85+
}
86+
}));
87+
return { totals: data.length, data: page(data, params) }
88+
}}
89+
/>
90+
</div>
5391
);
5492
}
5593
```

‎src/components/c-table/demos/sort-no-page.md‎

Lines changed: 0 additions & 55 deletions
This file was deleted.

‎src/components/c-table/demos/sort-with-page.md‎

Lines changed: 62 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -11,34 +11,83 @@ desc: 表格排序
1111
* desc: 表格排序（从远程获取数据）
1212
*/
1313
import React from 'react';
14-
import { CTable } from 'cloud-react';
14+
import { CTable, Tooltip, Icon } from 'cloud-react';
1515

1616
const data = [
17-
{ id: '121410327', name: '手机号优先继续发送1', createTime: '2021/12/14 10:19:02', creator: 'liyuan.meng', num: '12,222' },
18-
{ id: '121410328', name: 'ouid疲劳度3', createTime: '2021/12/13 15:47:33 ', creator: 'jiaojiao.diao', num: '198' },
19-
{ id: '121410329', name: '继续发送手机3', createTime: '2021/12/13 15:36:42', creator: 'nan.run', num: '1,232' },
20-
{ id: '121408294', name: '继续发送手机4', createTime: '2021/12/13 11:14:40', creator: 'xiaotong.fan', num: '12,122,112' },
21-
{ id: '121407191', name: '继续发送手机2', createTime: '2021/12/13 11:03:05', creator: 'zhenxiao.guo', num: '1000,000' },
17+
{ id: '121410321', name: '手机号优先继续发送1', createTime: '2021/12/14 10:19:02', creator: 'liyuan.meng', num: '12,222', orderNum: '33,342' },
18+
{ id: '121410322', name: 'ouid疲劳度2', createTime: '2021/12/13 15:47:33 ', creator: 'jiaojiao.diao', num: '198', orderNum: '122' },
19+
{ id: '121410323', name: '继续发送手机3', createTime: '2021/12/13 15:36:42', creator: 'nan.run', num: '1,232', orderNum: '1,332' },
20+
{ id: '121410324', name: '继续发送手机4', createTime: '2021/12/13 11:14:40', creator: 'xiaotong.fan', num: '12,122,112', orderNum: '112,122,112' },
21+
{ id: '121410325', name: '继续发送手机5', createTime: '2021/12/13 11:03:05', creator: 'zhenxiao.guo', num: '1000,000', orderNum: '200,000' },
2222
];
2323

2424
const columns = [
25-
{ title: '活动ID', dataIndex: 'id', sortable: true },
26-
{ title: '活动名称', dataIndex: 'name', sortable: true },
27-
{ title: '创建时间', dataIndex: 'createTime', sortable: true },
28-
{ title: '人数', dataIndex: 'num', align: 'right', sortable: true },
29-
{ title: '创建人', dataIndex: 'creator', sortable: true }
25+
{
26+
title: '活动ID',
27+
dataIndex: 'id',
28+
sortable: true,
29+
fixed: 'left',
30+
width: 120,
31+
titleTooltipConfig: {
32+
content: <span>提示信息</span>
33+
}
34+
},
35+
{
36+
title: '活动名称',
37+
dataIndex: 'name',
38+
sortable: true,
39+
width: 300
40+
},
41+
{ title: '创建时间', dataIndex: 'createTime', sortable: true, width: 200 },
42+
{
43+
title: '人数',
44+
dataIndex: 'num',
45+
align: 'right',
46+
sortable: true,
47+
width: 200,
48+
titleTooltipConfig: {
49+
content: '提示信息'
50+
},
51+
},
52+
{
53+
title: '订单数',
54+
dataIndex: 'orderNum',
55+
align: 'right',
56+
sortable: true,
57+
width: 200,
58+
titleTooltipConfig: {
59+
content: '订单数提示信息'
60+
},
61+
titleTooltipAlign: 'left',
62+
},
63+
{ title: '创建人', dataIndex: 'creator', width: 120, sortable: true, fixed: 'right' }
3064
];
3165

3266
export default function CTableDemo() {
67+
const sort = (data, { sortParams }) => {
68+
if (sortParams?.dataIndex === 'id') {
69+
return data.sort((a, b) => sortParams.sortBy === 'ASC' ? Number(a.id) - Number(b.id) : Number(b.id) - Number(a.id));
70+
}
71+
if (['name', 'createTime', 'num', 'orderNum', 'creator'].includes(sortParams?.dataIndex)) {
72+
return data.sort((a, b) => sortParams.sortBy === 'ASC' ? a[sortParams.dataIndex].localeCompare(b[sortParams.dataIndex]) : b[sortParams.dataIndex].localeCompare(a[sortParams.dataIndex]));
73+
}
74+
return data;
75+
};
76+
77+
const page = (data, { pageNum, pageSize }) => {
78+
return JSON.parse(JSON.stringify(data.slice(pageSize * (pageNum - 1), pageSize * pageNum)))
79+
}
80+
3381
return (
3482
<CTable
3583
supportPage
3684
columnData={columns}
3785
ajaxData={(params) => {
38-
console.log('给后端传递参数：', '字段:', params.sortParams?.dataIndex, '；正序or倒序:', params.sortParams?.sortBy);
86+
console.log('给后端传递参数：', '字段:', params.sortParams?.dataIndex, params.sortParams?.sortBy === 'ASC' ? '；升序:' : '；降序:', params.sortParams?.sortBy);
3987
return new Promise(resolve => {
88+
const sortedData = sort(data, params);
4089
setTimeout(() => {
41-
resolve({ totals: data.length, data: JSON.parse(JSON.stringify(data.slice(params.pageSize * (params.pageNum - 1), params.pageSize * params.pageNum))) });
90+
resolve({ totals: sortedData.length, data: page(sortedData, params) });
4291
}, 500)
4392
})
4493
}}

‎src/components/c-table/index.js‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -488,7 +488,7 @@ class CTable extends Component {
488488
};
489489
const params = {
490490
..._pageOpts,
491-
sortParams: { ...sortParams, sortBy: sortParams.sortBy || 'DESC' },
491+
sortParams,
492492
filterValue,
493493
};
494494

@@ -690,6 +690,7 @@ class CTable extends Component {
690690
loadingTpl,
691691
loadingOpts,
692692
footerSelectTpl,
693+
footerTotalTpl,
693694
tooltipConfigs,
694695
disablePageOnLoad,
695696
showFooterSelect,
@@ -825,7 +826,9 @@ class CTable extends Component {
825826
<div className={classnames(`${tablePrefixCls}-footer-page`)}>
826827
{showTotal && (
827828
<span className={classnames(`${tablePrefixCls}-footer-total`)}>
828-
共 {totals} 条
829+
{(typeof footerTotalTpl === 'function'
830+
? footerTotalTpl(totals)
831+
: footerTotalTpl) || <>共 {totals} 条</>}
829832
</span>
830833
)}
831834
<Pagination

0 commit comments

Comments
 (0)