Components
AlertAlignButtonCheckboxCheckbox GroupConfirmDatepickerDialogDropdownFormIconInputMenuMessageMonthpickerPagePickerPopconfirmRadioStatusboxTabTableProps & MethodsBasic UsageComplex HeaderCross ColumnNull ValuesSelect RowsNo DataCollapseTableTableSortAutoTable Basic UsageAutoTable PersistenceAutoTable APIsAutoTable Error RetryAutoCollapseTableUploadValidator
Table
Props & Methods
Table
style
object
className
string
cols
Array<{
"display": "any",
"width": "number",
"colspan": "number",
"style": "object"
}>
data
Array<undefined>
required
canSelect
bool
false
onSelectedChange
func
onRowClick
func
differentiateRow
bool
true
overlap
any
noDataMsg
any
<StatusBox type="info" size="l">暂无数据</StatusBox>
CollapseTable
可折叠行表格,封装自Table，具有以下功能：- 可折叠部分行
style
object
className
string
tableProps
Table.propTypes
cols
Array<{
"display": "any",
"width": "number",
"colspan": "number"
}>
data
Array<{
"collapseRows": "Array<undefined>",
"showCollapseRows": "Boolean"
}>
[]
overlap
any
👆data
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| row | 一维数组，当前一行需要的数据。该行会一直显示，通过点击来控制是否显示对应被控制的折叠的行是否显示 如果数组元素是 React组件实例：展示元素本身 else：展示元素toString() 如果数组元素是空字符串或者==null会显示为'-' | array.isRequired | undefined |
| collapseRows | 当前这行控制的可以被折叠的行,二维数组 | arrayOf(PropTypes.array) | undefined |
| showCollapseRows | 是否显示,当前这行控制的可以被折叠的行 | arrayOf(PropTypes.array) | false |
AutoTable
数据表格组件，封装自Table,具有以下功能：- 自动分页- 数据缓存- 选中- 排序- 筛选
style
object
className
string
tableProps
Table.propTypes
maxRow
number
5
cache
bool
true
cols
Array<{
"display": "any",
"width": "number",
"colspan": "number",
"sort": "Array<{\n \"display\": \"any\",\n \"key\": \"string\",\n \"value\": \"-1 │ 1\"\n}>"
}>
required
fetch
func
required
translateRow
func
required
persistence
{
"get": "Function",
"set": "Function"
}
{}
onPageChange
func
() => {}
👆cols
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| display | 表格头部一列名称 如果数组元素是 React组件实例：展示元素本身 else：展示元素toString() | array.isRequired | undefined |
| width | 表格一列所占宽度百分比 | number | undefined |
| colspan | 跨列,默认为1 | number | 1 |
| sort | 该表头是否需要排序，如果需要排序 1.该列只有一个排序选项：请传入一个只有一个元素的[SortType]类型的Arrays 2.该列有多个排序选项:请传入一个[SortType]类型的Arrays | arrayOf | undefined |
👆sort
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| display | 表格头部一列名称 如果数组元素是 React组件实例：展示元素本身 else：展示元素toString() | array.isRequired | undefined |
| key | 用于表示该排序方法的唯一key | string.isRequired | undefined |
| value | 默认排序方法 1=顺序 -1=逆序 如果==null表示当前排序方法默认不启用 | oneOf([-1, 1]) | undefined |
AutoCollapseTable
可折叠行表格数据表格组件，封装自CollapseTable,具有以下功能：- 可折叠部分行- 自动分页- 数据缓存- 选中- 排序- 筛选
style
object
className
string
tableProps
Table.propTypes
cols
Array<{
"display": "any",
"width": "number",
"colspan": "number"
}>
data
Array<{
"collapseRows": "Array<undefined>",
"showCollapseRows": "Boolean"
}>
[]
overlap
any
TableSort
style
object
className
string
options
Array<{
"display": "any",
"key": "any"
}>
required
defaultSort
string
defaultOrder
1 │ -1
onChange
func
active
bool
true
dropdownWidth
number
👆options
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| display | 用来展示 | any.isRequired | undefined |
| value | 用于回调 | any.isRequired | undefined |
Basic Usage
| 角色 | 描述 | 成员数 | 操作 |
|---|---|---|---|
| 超级管理员 | 机构创始人，拥有所有功能的权限，且可以为其他角色自由配置功能。 | 1 | 管理成员 |
| 教学管理员 | 机构创始人从所关联的成员中选取，协助管理机构，主要是教务教学相关工作的管理，默认拥有大部分权限。 | 62 | 管理成员 |
| 老师 | 主要负责给学生上课，以及准备课程教案和教学资料。 | 230 | 管理成员 |
| 助教 | 主要协助老师上课，工作内容包括在课堂上进行班级纪律管理，以及维护班级交流QQ群等。 | 232 | 管理成员 |
| 销售管理员 | 销售模块的管理人员，默认拥有查询学员、分配销售人员并查看机构与销售人员的销售相关数据的权限。 | 3 | 管理成员 |
| 教务 | 主要负责除了上课之外的大部分教务教学相关工作。 | 5 | 管理成员 |
| 销售 | 销售人员，默认拥有查询被分配课程的学员、查看自己的销售数据并进行销售记录的相关权限。 | 12 | 管理成员 |
| 财务 | 主要负责机构营收的查询和管理。 | 1 | 管理成员 |
| 自定义1 | 自定义1 | 1 |
Complex Header
Cross Column
Null Values
| 角色 | 操作 |
|---|---|
| 超级管理员 | - |
| 教学管理员 | - |
| 老师 | - |
| 助教 | 0 |
Select Rows
| A | B | |
|---|---|---|
| 0 | 1 | |
| 1 | 2 | |
| 2 | 3 | |
| 3 | 4 |
No Data
| A | B |
|---|---|
暂无数据
CollapseTable
TableSort
A | C |
|---|---|
| A=1 B=9 | 5 |
| A=5 B=1 | 4 |
| A=4 B=4 | 2 |
| A=7 B=8 | 6 |
| A=2 B=7 | 9 |
对字段进行排序使用TableSort组件传入cols属性
AutoTable Basic Usage
| A | B | C |
|---|---|---|
加载中
AutoTable Persistence
| A | B | C |
|---|---|---|
加载中
AutoTable的state被持久化到了localStorage，先切换下页面，重新刷新页面可以看到这个AutoTable还是之前的样子
AutoTable APIs
| A | B | C |
|---|---|---|
加载中
跳转到第page页, 如果没有第page页的数据会回调fetch去加载更多的数据, 从0开始计数
跳转到第page页, 如果没有第page页的数据 不会 回调fetch去加载更多的数据, 业务侧自己保证第page页有数据
每当表单的查询条件发生改变时请调reset方法重置AutoTable
AutoTable Error Retry
| A | B | C |
|---|---|---|
加载中
AutoCollapseTable
| A | B | C |
|---|---|---|
加载中