react-business-ui

react-business-ui——react业务组件的封装antdUI for react

Install

npm i react-business-ui / yarn add react-business-ui

Usage

Use in the page:

  import { BasicForm, BasicTable, BasicModal } from "react-business-ui"
  render() {
    const p = this;
    const { selectedRowKeys, data, everyData, detail } = this.state;
    const paginationProps = {
      // 分页
      total,
      defaultPageSize: 10,
      pageSize,
      current: pageNo,
      onChange(pageIndex) {
        p.handleSearch(params, pageIndex);
      },
    };

    return (
      <div>
        <Card>
          <BasicForm
            formList={this.formList()}
            extendFormList={this.extendFormList()}
            moreSearch={this.state.moreSearch}
            changeExport={this.exportExport}
            filterSubmit={this.submit}
            // 添加一个新增按钮
            nameList={["add"]}
            handleAdd={this.handleModal.bind(this, null)}
          />
        </Card>
        <Card>
          <BasicTable
            onRef={this.onRef}
            selectedRowKeys={selectedRowKeys}
            columns={this.tableColumns()}
            data={data}
            style={{ textAlign: 'center' }}
            key={(r,index)=>index}
            selectionType={"checkbox"} // 'checkbox' || null || 'radio' 默认
            pagination={paginationProps}  // 分页
          />
        </Card>

        <BasicModal
          onRef={p.onModalRef}
          visible={this.state.modalVisible}
          modalFormList={p.modalFormList(everyData)}
          submit={p.handleSubmit.bind(this)}
          detail={detail || false}
          close={() => {
            this.setState({
              modalVisible: false,
              detail: false,
              everyData: {}
            });
            this.modalRef.props.form.resetFields();
          }}
          title={this.state.title}
          handlePicChange={this.handlePicChange}
          imageUrl={this.state.imageUrl}
        />
      </div>
    );
  }