tmaito-page

Quick Start

Install

npm i tmaito-page
// or
yarn add tmaito-page

Use

import Page, { Switch, Divider, ExtraAction, Typography, Progress, Collapse, Timeline } form 'tmaito-page';

// style
@import 'tmaito-page/dist/index.css'

API

Page

参数	说明	类型	默认值
layout	页面展示样式，是否有边界间隙	string，可选值有 `normal`	-
loading	页面是否加载中	boolean	false
width	宽度	string\number	100%
height	高度	string\number	100%
animated	高度变化时是否使用动画	boolean	false
className	类名	string	-
multipleable	是否跨页勾选	boolean	false
filterBeforeTab	筛选区域 and tab区域位置关系，默认filter在前	boolean	true
filter	筛选区域	boolean \| object	false
tab	tab切换区域	boolean \| object	false
table	表格区域	boolean \| object	false
renderContent	自定义内容展示	string\|ReactNode	null
pagination	翻页&&全选区域	boolean \| object	false
footer	底部操作栏	boolean \| object	false

提示

供外部调用方法 onresize 重置Page高度计算

Collapse

伸缩框

参数	说明	类型	默认值
children	展示内容		无
height	默认展示高度	string \| number	0
onChange	当前展示高度	number	0

Switch

购销方租户切换

参数	说明	类型	默认值
onChange	左右切换回调函数	Function(values, key) {}	无
rightSwitchabled	右侧是否禁止切换	boolean	false

Divider

标题标注线

参数	说明	类型	默认值
content	标题内容	string\|ReactNode	无
type	样式，可选值 'primary'、'danger'、'warning'、'success'	string	default

ExtraAction

扩展元素

参数	说明	类型	默认值
type	Button 展示类型，可选值 `link`	string	-
size	Button 设置按钮大小，可选值为 `default` `large`	string	`small`
limit	默认展示数量	number	3
data	Button 操作集合	object[]	[]

data 数据事例如下：

[{
  authcode: 'A01202001', // 资源码
  type: 'primary', // btn 类型
  label: '手工添加', // btn 文案
  loading: false, // loading
  onClick: handleAddManual, // 点击事件
  'ubt-data': JSON.stringify({ // 埋点扩展数据
    bizType: 'insertOrder',
    bizData: 'xxxx'
  }),
  render: () => {} // 复杂渲染函数
}]

Typography

排版，监听页面宽度变化，动态调整单行展示列数

参数	说明	类型	默认值
span	展示的列宽同 antd Col 组件	number	6
labelCol	同 antd Col 组件	object	{span: 8}
wrapperCol	同 antd Col 组件	object	{span: 16}

更多参数可酌情参考 antd Tabs

分辨率 <= 1280 时，展示 3列分辨率 <= 1680 时，展示 4列分辨率 > 1680 时，展示 5 列

Typography.Item

参数	说明	类型	默认值
span	展示的列宽同 antd Col 组件，未设置则默认为父组件 span值	number	无
label	标题	string\|ReactNode	无
children	内容	string\|ReactNode	无
labelCol	同 antd Col 组件	object	{span: 8}
wrapperCol	同 antd Col 组件	object	{span: 16}

Progress

基于 antd Progress 模拟进度条；进度条规则：

30 s 以内，进度条每1s + 3

51 s 以内，进度条每3s + 1

51 s 之后，进度条每30s + 1，直至 100

Timeline

垂直展示的时间流信息。

参数	说明	类型	默认值
mode	通过设置 mode 可以改变时间轴和内容的相对位置	'alternate'	-
dataSource	节点集合	Array	[]

说明：

  [{
    label: 'zhu',
    content: '时刻劳动模范个十六开本时刻劳动模范个十六开本时刻劳动模范个十六开本',
    time: '2018.09.23'
  }]

filter

参数	说明	类型	默认值
limit	默认展示筛选项的数量	number	3
fields	筛选项数组	object[]	[]
initialValues	筛选项默认初始值	object 🌰：{[code]: value}	{}
extraAction	右侧 btn 区域额外的元素	object[] data 属性	[]
onChange	操作筛选项时实时变化参数	Function(key, values) {}	无
onSearch	查询 or 重置时，回调筛选项参数	Function(values) {}	无
resetButtonsProps	reset 按钮 props	ButtonProps	无
searchButtonsProps	search 按钮 props	ButtonProps	无

fields

参数	说明	类型	默认值
type	筛选项类型	string	input
label	label 标签的文本	string	ReactNode
code	筛选项字段	string	无
authcode	资源码	string	无
value	筛选项值	string\|string[]\|number	number[]
options	type 为 select时生效，下拉选项	object[]	无
placeholder	提示信息	string	无
format	日期格式	string	无
itemLayout	筛选项布局	object

itemLayout 使用方式：

  itemLayout: {
    labelCol: {
      span: 6 // 默认值
    },
    wrapperCol: {
      span: 18 // 默认值
    }
  }

options

下拉选项

参数	说明	类型	默认值
label	标签的文本	string	-
value	属性值	string\|number	-
disabled	是否禁用	boolean	false

type 可选值如下:

input: 输入框

select: 下拉列表

selectSearch: 下拉列表，远程搜索，防抖控制

checkbox: 复选框

radio: 单选框

range: 输入框范围 number 类型

rangeInput: 输入框范围

datePicker: 日期，默认 'YYYY-MM-DD'

rangePicker: 日期范围，默认 'YYYY-MM-DD'

monthPicker: 月份，默认 'YYYY-MM'

注意： datePicker、rangePicker、monthPicker 筛选项，

可设置 disabledDate 来控制是否禁止不可选择当天之后的日期, 默认值 true 若设置 format，则展示格式遵循 format 格式若设置 vformat，则返回值格式遵循 vformat 格式，默认返回时间戳格式

** type 为 selectSearch 时：**

接口规范如下：

api: {
    method: 'GET',
    url: '/api/eccp/v1/supplier',
    searchKey: 'supplierName', // 当前搜索字段传入 接口的对应 key 值
    params: { // query 值
      page: 1,
      pageSize: 20
    },
    data: {}， // body 值
    transformResponse: (res) => { // 回调函数，处理接口返回值，返回值格式 遵照 `select options`
      const { code, result } = res;
      const { records = [] } = result || {};
      if (code === 1) {
        return records.map((item) => ({
          label: item.supplierName,
          value: item.supplierCode
        }));
      }
      return [];
    }
  }

tab

标签页

参数	说明	类型	默认值
code	tab 组件对应的接口属性字段	string	无
activeKey	当前激活 tab 面板的 key	string	无
showCount	是否展示统计数	boolean	false
tabSource	TabBar 的集合	object[]	[]
onChange	切换面板的回调	Function(activeKey) {}	无
extraAction	tab bar 上额外的元素	object[] data 属性	[]
extraActionLimit	tab bar 上额外的元素默认展示数量	number	2

提示

除以上参数，其他参数可酌情参考 antd Tabs

tabSource

参数	说明	类型	默认值
key	对应 activeKey	string	无
count	选项卡头显示统计数量, `showCount` 为 `true` 时生效	string\|number	0
label	选项卡头显示文字	string\|ReactNode	无
render	替换 TabBar，用于二次封装单个标签头	Function(record, index) {}	无

table

参数	说明	类型	默认值
mode	两种列表展示模式，`antd-table` or `virtual-table`，列表数量大时可选择`virtual`模式，可选值 'virtual'	string	-
rowKey	表格行 key 的取值	string	'key'
columns	表格列属性	Array	[]
dataSource	当前页表格数据源	Array	[]
dragable	列表项是否可拖拽排序	Boolean	false
sortable	表头是否可重新排序	Boolean	false
resizable	表头是否可拖拽调整列宽，需要与column.width配合使用	Boolean	false
onDragable	列表项拖拽事件，返回排序后的数据源	Function(dataSource)	-
onResizable	表头拖拽调整列宽事件，返回调整后的列表属性	Function(columns)	-
onSortChange	表头列表调整顺序，返回调整后的列表顺序	Function(columns)	-
rowSelection	表格行是否可选择，配置项参考 antd	object	null
hideExpandIcon	额外的展开行图标是否展示	boolean	true
expandRow	额外的展开行相关属性	object	null

提示：

若含有额外的展开行操作，则父table内所有列属性的fixed失效 table 中 rowSelection 属性的 selectedRowKeys 格式为:

[
  {
    id: 'xxx', // 表格行 rowKey 的取值, 必须字段
    record: {...record}, // 勾选行属性
    selectedRowKeys: [], // 子表格选中字段 key 集合
    selectedList: [], // 子表格选中行集合
    unselectedList: [], // 子表格未选中行集合
    unselectedRowKeys: [] // 子表格未选中的字段 key 集合
  }
]

pagination

翻页相关属性

参数	说明	类型	默认值
total	数据总数	number	0 ｜
pageNo	当前页数	number	1 ｜
pageSize	每页条数	number	20
pagination	是否展示翻页组件	boolean	true
showTotal	用于显示数据总量和当前数据顺序	Function(total, range)
extraContent	额外的元素，居左展示	React.ReactNode	无
onPageChange	pageNo, pageSize 改变的回调	Function(pageNo, pageSize)
pageSizeOptions	指定每页可以显示多少条	string[]	['20', '50', '100', '200']

提示

除以上参数以及 size 等，其他参数可酌情参考 antd pagination

footer

底部操作栏相关属性

参数	说明	类型	默认值
extraContent	额外的展示元素，居左展示	React.ReactNode	无
extraAction	额外的操作元素，居右展示	object[] data 属性	[]
labelCol	同 antd <Col> 组件	object	{span: 12}
wrapperCol	同 antd <Col> 组件	object	{span: 12}

expandRow

额外的展开行相关属性

参数	说明	类型	默认值
expandIcon	参照 antd 相关属性
expandRowByClick	参照 antd 相关属性
expandIconColumnIndex	参照 antd 相关属性
onClick	单击行展开事件	Function(record)	-
onDoubleClick	双击行展开事件	Function(record)	-
onDoubleClick	双击行展开事件	Function(record)	-
loading	页面是否加载中	boolean	false
rowKey	表格行 key 的取值	string	'key'
columns	表格列属性	Array	[]
dataSource	当前页表格数据源	Array	[]
selectionable	是否可勾选	Boolean	false
getCheckboxProps	选择框的默认属性配置	Function(record)	-

tmaito-page

Quick Start

API

Page

Collapse

Switch

Divider

ExtraAction

Typography

Progress

Timeline

filter

fields

options

tab

tabSource

table

pagination

footer

expandRow

Readme

Keywords

Package Sidebar

Install

Weekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

tmaito-page

Quick Start

API

Page

Collapse

Switch

Divider

ExtraAction

Typography

Progress

Timeline

filter

fields

options

tab

tabSource

table

pagination

footer

expandRow

Readme

Keywords

Package Sidebar

Install

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

Weekly Downloads