ref-multiple-table-ui v1.0.4

ref-multiple-table 表格参照

表格参照

代码演示

$ npm install ref-multiple-table-ui --save

/**
 *
 * @title ref-multiple-table-base 复杂查询表格参照的ui
 * @description 复杂查询表格参照
 *
 */
 import React, { Component } from 'react';
import RefMultipleTableBaseUI,{ SearchPanelItem } from 'ref-multiple-table-ui';
import {FormControl,Button,Form} from 'tinper-bee';
 class Demo1 extends Component{
 
     /** 请求接口获取数据*/
     
    render() {
        const {getFieldError,getFieldProps} = this.props.form;
        let { showLoading,showModal } = this.state;
        let { columnsData, tableData, pageCount, pageSize, currPageIndex, fliterFormInputs, filterInfo, checkedArray, checkedMap } = this;
        let {dataNumSelect,handlePagination,searchFilterInfo} = this;
        let childrenProps = Object.assign(Object.assign({}, this.props), {
          showModal:showModal,
          showLoading : showLoading,
          columnsData : columnsData,
          tableData : tableData,
          pageCount : pageCount,
          pageSize : pageSize,
          currPageIndex : currPageIndex,
          fliterFormInputs : fliterFormInputs,
          filterInfo : filterInfo,
          dataNumSelect : dataNumSelect,
          handlePagination : handlePagination,
          searchFilterInfo : searchFilterInfo,
          onSave:this.onSave,
          onCancel:this.onCancel,
    		});
        return (
          <div className="demoPadding">
            <RefMultipleTableBaseUI
              placeholder="placehholder"
              title={'复杂表格参照'}
              backdrop={true}
              disabled={false}
              multiple={true}
              strictMode={true}
              miniSearch={false}
              emptyBut={true}
              {...childrenProps}
              {
              ...getFieldProps('valueField', {
                initialValue: '{"refname":"000","refpk":"c4a06b52-4789-4c1e-86b2-83cca5212007"}',
                rules: [{
                  message: '请输入姓名',
                  pattern: /[^{"refname":"","refpk":""}|{"refpk":"","refname":""}]/
                }]
              })
              }
    
            />
            <span className='error'>
              {getFieldError('valueField')}
            </span>
            <Button
              colors="primary"
              onClick={() => {
                this.setState({showModal:true})
              }}>打开参照</Button>
            <Button
              colors="primary"
              onClick={() => {
                this.props.form.validateFields((err, values) => {
                  console.log(err, values)
                });
              }}>submit</Button>
          </div>
        )
  }
 }

表格参照对外提供的组件有

RefTreeTableBaseUI

  表格参照的纯ui，需要正确的参数传入

SearchPanelItem

表格参照搜索面板处的搜索条件

RefTreeTableBaseUI API

注意:以下参数为 <RefTreeTableBaseUI/>需要使用的，为了保证功能的正常使用请传入。

注意：modalShow在refcorewithinput中有提供。因为若是refcorewithinput和refmultipletablebaseui配合使用，则不需要额外提供modalShow的，onSave和onCancel

SearchPanelItem API

注意:以下参数为 <SearchPanelItem/>需要使用的，为了保证功能的正常使用请传入。

参数详解

eg:
  

    lang:
      "zh_CN" // 中文
      "en_US" // 英文
      "zh_TW" // 繁体中文
      "fr_FR" // 法文
      "de_DE" // 德文
      "ja_JP" // 日文

示例

开发调试

$ npm install

$ npm run dev