前端同学福利: react-antd-super-form分享一个管理后台前端开发辅助包 react-antd-supe

分享一个管理后台前端开发辅助包 react-antd-super-form, 以 react + antd 为基础, 对后台常见的页面的开发效率的提升有极大的帮助. 废话不多说,直接上地址

相比其它相关功能的npm包, react-antd-super-form 使用更简单,但功能更强大

有兴趣的同学可以一起研究下源码, 有问题或新需求可以提 issue, 希望 react-antd-super-form 可以为我们解决更多问题

安装

npm install --save react-antd-super-form

使用

import React, { Component } from 'react';
import SuperForm, { Table, List, Form, Modal } from 'react-antd-super-form';

class Example extends Component {
  render () {
    return (
      <SuperForm
        // ...
        search={{}}
        table={{}}
      />
      <Form 
       // ...
       data={[]}
       data={(form)=>[]}
      />

    )
  }
}

封装原则

0 样式
尽量维持原 antd 组件属性命名

基本结构

<SuperForm
formStyle={{
  // 搜索区样式
}}
tableStyle={{
  // 数据区样式
}}
type="table|list" //default table
search={
  {
    layout: 'horizontal'|'vertical'|'inline',
    formLayout: {
      labelCol: { span: 2 },
      wrapperCol: { span: 14 },
    },
    data:[]
  }
}
table={
  {
    // 扩展属性
    // 是否开始时进行 action 进行调用
    isInit:true|false,
    // 数据请求的处理函数
    action:func,
    // 接口数据 返回值 res 与 组件内字段完成 映射, list 为数据数组, total 为 数据量, status 为接口是否正常
    valueMap:(res) => {
      return {
        status: res.status,
        dataSource: res.entry,
        total: res.totalRecordSize
      }
    },
    // 分页请求字段重命名[可选]
    pageName:'',
    pageSizeName:'',
    // 附加参数
    extraParams : ()=>{},
    // 初始化数据量[可选]
    total: 0,
    // 初始化数据[可选]
    dataSource:[],
    // antd Table 固有属性
    ...prop
  }
}
/>

search 字段配置

data = [
  {
    visible: true, // 默认 true,  组件是否渲染
    label: 'xxx', // FormItem label 标签, 非必填
    type: 'select', // ['br','span', 'group', 'button', 'input','inputnumber','select','radio','radiobutton','slider','textarea','checkbox','datepicker','rangepicker', 'monthpicker', 'timepicker', 'switch','upload','cascader','steps']

    unbind: false, // 非输入组件 建议必填, 
    key: 'xxx', // 输入组件必填, 非输入组件可不填, 建议必填: key 值中 如果包含有逗号则此参数在提交时会被过滤
    config: { // for 
      initialValue: 1
    },

    render: (form)=>{},
    renderFix: (item)=> item,

    style: {
      width: 100
    },
    placeholder: '请选择',
    // for select | radio | radiobutton | slider | checkbox
    options: [
      {label: '订单号', value: 1}
      {label: '手机号', value: 2}
    ]

  
    // For button
    text: '', // 按钮文案
    tp: 'primary',
    bindSearch: true|false, // 自动绑定搜索事件
    onClick(event, form),

    // for upload
    children:()=>{
      return <div>点我上传</div>
    }

    // for form item
    formItemLayout:{
      labelCol: { span: 2 },
      wrapperCol: { span: 14 },
    }
    // other
    ...
  },
]

table 字段配置

type="list|table"
columns={columns}
rowKey={"id"}
pagination={{
// 配置同 antd
}}
// 扩展属性
// 是否开始时进行 action 进行调用
isInit={true|false}
// 数据请求的处理函数
action={func}
// 接口数据 返回值 res 与 组件内字段完成 映射, list 为数据数组, total 为 数据量, status 为接口是否正常
valueMap = {(res) => {
  return {
    status: res.status,
    dataSource: res.entry||[],
    total: res.totalRecordSize
  }
}}
// 分页请求字段重命名[可选]
pageName = {}
pageSizeName = {}
// 附加参数
extraParams = {()=>{}}
// 初始化数据量[可选]
total={0}
// 初始化数据[可选]
dataSource={[]}
// antd Table 固有属性
{...prop}