s-page

React s-page component

###generate filters-table page quickly

####API:

import SPage from "s-page";
const options = {
  url: "", // to getTableData
  initialData: {}, // 可动态修改表单数据
  beforeSearch: formData => ({}), // 返回的对象作为请求的参数;返回false不发送请求
  searchHandler(){},
  innerApi(currentRef) {} //fetchTableList动态变化,
  // currentRef.fetchTableList(params?,fullCoverageParams?); params: 增量覆盖;fullCoverageParams: 全量覆盖;
  onChange(formData) {}, // filters change event
  onFormDataChange(formData) {}, // filters data change
  onTableDataChange(tableData, totalNum){}
  onResponseDataChange(data){}
  onPagerChange(pageNum, pageSize){}
  formProps: {},
  initialSearch: false, // default: true
  resetForm: true, // Reset Btn; default: false
  autoHandleRangePickerParams: false, // default: true ;自动处理RangePicker参数
  verifyParams: false, // default: true; 校验必填项
  filters: [
    {
      type: "Select", // default: "Input"
      label: "",
      key: "",
      tableKey: "",   // tableColumns dataIndex
      formItemProps: {}, // Form.Item props
      props: {},
      render() {}, // Select或者Radio.Group 等组件的children; 支持返回jsx或者Promise或者options
      onChange(val) {},
      options: [], // for Select; eg:   [{ label: "a", value: 0 }] | {0:a}
      required: true, // filters 必填项,为true时allowClear为false
      inTable: false, // default : true
      tableRender(v){}, // 仅用于inTable为true 时
      tableColumn:{}  // 同 antd Column属性
    },
    {
      Comp: null, //eg: <div /> | props => <div />
      label: "",
      key: "",
      formItemProps: {}, // Form.Item props
      inTable: false // default : true
    }
  ],
  tableColumns: [
    {
      title: "",
      dataIndex: "",
      render() {}
      buttons:[
        {
          label: "",
          type: "", // Button type
          props: {} // Button props,
          handler() {}, //  返回Promise支持loading; openModal 为false 时有效
          openModal:false, // default: true,
          modalProps: {},
          modalRender: record => <div />, //Modal 的 children
          hide: record => true,
          disable: record => true,
        }
      ]
    }
  ],
  tableData: [],
  rowKey: "",
  tableProps: {},
  paginationProps: {},
  buttons: [
    // Search按钮后可追加Button
    {
      label: "Export",
      handler() {}, //  返回Promise支持loading
      type: "", // Button type
      props: {} // Button props
    },
    {
      Comp: null, //eg: <Button /> | props => <Button />
      key: "" // <Comp key={key} />
    }
  ]
};
<SPage {...options} />;

####还可以单独引入 SFilter、SForm SFilter 有以下参数,除 searchHandler 外,其他同 SPage

import { SFilter, SForm } from "s-page";
const SFilterOptions = {
  initialData: {},
  filters: [],
  formProps: {},
  buttons: [],
  searchLoading: true,
  resetForm: true,
  searchHandler() {}, // 返回Promsie支持loading
  onFormDataChange() {},
  onChange() {}
};
<SFilter {...SFilterOptions} />;

SForm 参数同 SFilter,只是缺少 buttons,searchLoading,resetForm,searchHandler

####main.js(项目入口文件)

import { useRequest } from "s-page";
useRequest(axiosInstance); // 传入自定义的axiosInstance来覆盖默认的axiosInstance

/* 
import { SPageFactor } from "s-page";
export const SPage=SPageFactor(axiosInstance); // 用于使用多个不同的axiosInstance的情况;返回值为SPage组件
*/