admin-ui 管理界面
为了方便使用,yutool-biz还集成了一套默认的管理页面,结合yutool-api可快速实现基础业务组件的可视化管理。
组件式开发
基于通用的交互场景开发了相应的前端组件,大大提高了开发效率。这里对各个前端组件的配置进行详细说明。
ManagePage 管理页面组件
组件配置:
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
title | 页面标题 | string | |
subtitle | 页面副标题 | string | |
optProps | 页面顶部操作区配置 | OptProps | |
sortProps | 排序配置 | SortProps | |
queryProps | 筛选配置 | QueryProps | |
groupProps | 分组配置 | GroupProps | |
aggregateProps | 聚合配置 | AggregateProps | |
dataTable | 数据表格配置 | DataTable | |
loadingProps | 加载状态属性 | LoadingProps | |
customContent | 自定义内容区 | ReactNode |
OptProps 页面顶部操作区配置
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
visible | 是否展示表头操作区 | boolean | true |
onSearch | 查询按钮点击事件回调 | () => void | |
saveEnabled | 是否显示新增按钮 | boolean | true |
onAdd | 新增按钮点击事件回调 | () => void | |
extOptComponent | 操作区扩展组件 | ReactNode |
SortProps 排序配置
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
visible | 是否展示排序 | boolean | false |
sorts | 排序项 | array [{title: string, dataIndex: string, asc: boolean}] | |
extSortColumns | 额外排序列(不包含再表格展示列dataTable.columns中的其它数据列) | array [{title: string, dataIndex: string}] | 可使用@/components/page/Sorts/addition 中提供的extSortColumns |
onSortsChange | 排序项变更事件回调 | (sorts) => void | |
onSortsSubmit | 排序项应用事件回调 | () => void |
QueryProps 筛选
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
visible | 是否展示筛选 | boolean | false |
query | 查询条件 | object | {} |
queryComponent | 查询表单组件 | ReactNode | |
onQueryChange | 查询条件变更事件回调 | (query) => void | |
onQuerySubmit | 查询条件应用事件回调 | (query) => void | |
onQueryReset | 查询条件重置事件回调 | () => void |
GroupProps 分组
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
visible | 是否展示分组 | boolean | false |
gruopKey | 分组key | string | |
onGroupKeyChange | 分组key变更事件回调 | (groupKey) => void | |
groupFormatter | 表格分页行展示内容格式化 | (groupKey, rowGroupValue) => string |
AggregateProps 聚合
属性 | 说明 | 类型/示例 | 默认值 |
---|---|---|---|
visible | 是否展示聚合 | boolean | false |
aggregates | 聚合项 | array [{title: string, dataIndex: string, type: 'SUM'|'COUNT'|'MIN'|'MAX'|'AVERAGE'}] | |
onAggregatesChange | 聚合项变更事件回调 | (aggregates) => void | |
onAggregatesSubmit | 聚合项应用事件回调 | () => void |
LoadingProps 加载状态
属性 | 说明 | 类型/示例 | 默认值 |
---|---|---|---|
dataLoading | 数据加载状态 | boolean | |
sortsBtnLoading | 排序项应用加载状态 | boolean | |
queryBtnLoading | 查询条件应用加载状态 | boolean | |
aggregatesBtnLoading | 聚合项应用加载状态 | boolean |
DataTable 页面表格
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
columns | 表格列配置: - groupable 可用于分组 - sortable 可用于排序 - aggregatable 可用于聚合 - optional 可选列 | array [{title: string, dataIndex: string, fixed: boolean, width: number, render: (text: any, record: RecordType, index: number, { expandIcon?: ReactNode, selection?: ReactNode, indentText?: ReactNode }) => object|ReactNode, sortable: boolean, aggregatable: boolean, groupable: boolean, optional: boolean}] | [] 序号列可使用 @/components/page/PageTable/addition 中提供的indexColumn |
rowKey | 表格行 key 的取值,可以是字符串或一个函数 | string | (record: RecordType) => string | 'id' |
bordered | 是否展示外边框和列边框 | boolean | false |
expanedRowRender | 额外的展开行 | (record: object, index: number, expanded: boolean) => ReactNode | |
resizable | 是否开启伸缩列功能 | boolean | false |
draggable | 是否开启行拖拽功能 | boolean | false |
dataSource | 数据 | array | [] |
expandAllRows | 是否展开所有行 | boolean | false |
expandIcon | 自定义展开按钮,传 false 关闭默认的渲染 | boolean | ReactNode | (expanded: boolean) => ReactNode | |
expandedRowKeys | 展开的行,传入此参数时行展开功能将受控 | (string | number)[] | |
onExpand | 点击行展开图标时进行触发 | (expanded: boolean, record: RecordType, DOMEvent: MouseEvent) => void | |
aggregateData | 聚合查询结果 | array [{field: string, type: 'SUM'|'COUNT'|'MIN'|'MAX'|'AVERAGE', value: object}] | |
paignation | 分页参数,传null时不显示分页器 | object {currentPage: number, pageSize: number} | null |
onPageChange | 分页事件回调 | (currentPage: number, pageSize: number) => void | |
onMoveRow | 开启行拖拽时,拖拽事件的回调 | (fromIndex: number, toIndex: number) => void | |
selectEnabled | 是否启用行选择 | boolean | false |
selectColumnWidth | 设置行选择列宽度 | number | |
selectedKeys | 指定选中项的key数组 | string[] | |
onSelectChange | 手动点击行选择框回调 | (record: RecordType, selected: boolean, selectedRows: RecordType[], nativeEvent: MouseEvent) => void |
Sorts 排序组件
Query 筛选组件
Group 分组组件
Aggregates 聚合组件
OptionalColumns 表格可选列组件
PageTable 数据表格组件
数据表格组件属性即ManagePage组件DataTable的相关属性。 PageTable.addition是对表格组件的扩展,有以下扩展内容:
扩展方法 | 功能介绍 | 参数说明 |
---|---|---|
indexColumn(width: number) | 表格序号列组件hook方法 | width: 列宽,默认48 |
FormFooter 表单页脚组件
表单页脚组件常用于Modal、SideSheet的页脚操作区,用于表单关闭或者表单提交操作。
组件配置:
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
onCancel | 表单取消事件回调 | () => void | |
onSubmit | 表单提交事件回调 | () => void | |
submitLoading | 提交按钮loading状态 | boolean |
IconPicker 图标选择器组件
组件配置:
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
btnSize | 选择器按钮大小,可选值:large 、default 、small | string | default |
popPosition | 弹出方向,可选值:top 、topLeft 、topRight 、left 、leftTop 、leftBottom 、right 、rightTop 、rightBottom 、bottom 、bottomLeft 、bottomRight | () => void | |
iconType | 图标类型,可选值:semi design内置图标类型 | string | |
onChange | 选择图标变化事件回调 | () => void |
IconHolder 图标展示组件
组件配置:
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
type | 图标类型,可选值:semi design内置图标类型 | string |
Address 地址展示组件
组件配置:
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
address | 地址对象 | Address | |
style | 组件样式 | object | |
onEdit | 编辑按钮点击事件回调 | (address) => void | |
onDelete | 删除按钮点击事件回调 | (addressId) => void |
Address地址对象:
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
id | 地址ID | number | |
addressType | 地址类型,可选值:USER 、ORGANIZATION | string | |
relId | 关联ID | number | |
primaryAddress | 是否默认地址 | boolean | |
contactPerson | 联系人姓名 | string | |
contactPhone | 联系方式 | string | |
provinceCode | 省份编码 | string | |
cityCode | 城市编码 | string | |
countyCode | 区/县编码 | string | |
townCode | 街道/乡镇编码 | string | |
detailAddress | 详细地址 | string |
AddressSelect 地址选择器组件
组件配置:
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
address | 地址对象 | Address | |
onChange | 地址变化事件回调 | (address) => void | |
cascade | 是否使用级联模式 | boolean | |
primaryHidden | 是否隐藏默认地址表单项 | boolean | false |
评论区留言准则:
1. 本评论区禁止传播封建迷信、吸烟酗酒、低俗色情、赌博诈骗等任何违法违规内容。
2. 当他人以不正当方式诱导打赏、私下交易,请谨慎判断,以防人身财产损失。
3. 请勿轻信各类招聘征婚、代练代抽、私下交易、购买礼包码、游戏币等广告信息,谨防网络诈骗。