react后台page 页面封装

基于 antd 。依赖 antd, dayjs。 基础page页面，包含顶部区域，筛选区域，自定义区域，内容区域。

安装

npm install --save @ahws/page-continar

引入

import Layouts from '@ahws/page-continar';

Demo

import React from 'react';
import PageContinar from '@ahws/page-continar';
import { Button } from 'antd';


const Page = (props: any) => {
  const headTab: any = [
    { key: 'tab1', tab: '按接收凭证' },
    { key: 'tab2', tab: '按项目类型' }
  ]

  // 筛选条件
  const searchItem: any[] = [
    { title: '姓名', name: 'name', value: 'aa', type: 'input'},
    { title: '手机号', name: 'mobile', type: 'input'},
    { title: '类型', name: 'type', type: 'select', width: 160, child: [
      {name: '类型1', value: '1'},
      {name: '类型2', value: '2'}
    ]},
    { title: '多选', name: 'checkbox', type: 'checkbox', child: [
      {name: '多选1', value: '1'},
      {name: '多选2', value: '2'}
    ]},
    { title: '日期', name: 'date', type: 'datePicker'},
    { title: '时间范围', name: 'date2', type: 'rangePicker'},
  ]

  const onHeadTab = (str : string) => {
    // 页签标题返回
    console.log(str)
  }

  const onSearch = (value: any) => {
    // 筛选 / 重置
    console.log(value)
  }

  return (
    <PageContinar
      title="我是标题"
      isBack={false}
      headExtra={
        <>
          <Button type="primary">下载附件</Button>
          <Button type="primary">+ 新增</Button>
        </>
      }
      headTab={headTab}
      // searchDom={<>筛选区域自定义内容</>}
      searchDom={searchItem}
      onHeadTab={onHeadTab}
      onSearch={onSearch}
    >
      <>
        <Table dataSource={dataSource} columns={columns} />
      </>
    </PageContinar>
  )
}

export default Page;

Props

参数	说明	类型	默认值
title	标题	React.ReactNode	--
isBack	是否显示返回上一页	Boolean	false
headExtra	页头右侧自定义内容展示	React.ReactNode	--
headTab	页头Tab列表	CardTabListType[]	--
searchDom	筛选区域内容模块，支持数据配置	SearchDom[] / React.ReactNode	--
centerDom	筛选区域下方位置自定义内容	React.ReactNode	--
onHeadTab	页头Tab列表点击事件	function(key: string) {}	--
onSearch	筛选及重置点击事件(如果是日期，内部已梳理格式)	function(values: any[]) {}	--

Props headTab[]

• tab 名称。

• key key。

Props SearchDom[] 配置

searchDom 筛选区域内容配置。

• title 名称。

• name 字段名。

• type 类型。目前支支持 input, select, checkbox, datePicker, rangePicker。

• width 宽度。

• child 选择得数据。type为 select, checkbox 时配置 {name: '', value: ''}。

效果图