tmaito-page v0.2.24

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

提示

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

Collapse

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

Switch

购销方租户切换

Divider

标题标注线

ExtraAction

扩展元素

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

Progress

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

• 30 s 以内，进度条每1s + 3
• 51 s 以内，进度条每3s + 1
• 51 s 之后，进度条每30s + 1， 直至 100

Timeline

垂直展示的时间流信息。

说明：

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

filter

fields

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

标签页

提示

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

tabSource

table

提示：

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

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

pagination

翻页相关属性

提示

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

footer

底部操作栏相关属性

expandRow

额外的展开行相关属性