gennlife-doui v0.0.79

gennlife-doui

使用方式

yarn add gennlife-doui

基于antd4.0封装的业务组件，包含了如下：

name: 搜索表格组件--SearchTableContainer route: /CommonLibrary/SearchTableContainer

menu: CommonLibrary

import SearchTableContainer from './index'; import { Playground } from 'docz';

SearchTableContainer

 <div style={{height: "100%", display: "flex"}}>
    <SearchTableContainer
        //选择独占模式
        adapterPattern={"surplus"}
        tableUrl={table_url}
        columns={columns}
        isNeedBox={false}
        isHaveExportAuth={false}
        tableTitle={"日志"}
        rowKey={item=>item.id}
    >
    </SearchTableContainer>
</div>

该组件是为大规模使用表格数据展示而进行封装的。其中包括了调用接口，获取数据，表头筛选，排序，搜索，分页，自定义适配屏幕等等功能。

1.基本使用 使用方式：

引入
import SearchTableContainer from 'components/TablesComponentFactory/TableComponents/SearchTableContainer;

1.传入必要的参数：表格请求的接口URL

<SearchTableContainer
    tableUrl={this.props.tableUrl}
    >
</SearchTableContainer>

2.如果该接口需要接收上层的参数，例如筛选的参数：params

<SearchTableContainer
    params={params} // 筛选参数
    tableUrl={this.props.tableUrl}
    >
</SearchTableContainer>

表格会监听该参数，如果该参数的内存地址发生变化，就会触发表格的刷新。

3.表格的表头配置

表格会自动获取来之三个地方的表格头配置：

getTableColumns = () => {
        const { globalConfig, ContainerKey } = this.props;
        let columns = [];
        if (this.props.columns) {
            columns = this.props.columns;
        } else if (globalConfig && globalConfig[ContainerKey]) {
            columns = globalConfig[ContainerKey];
        } else if (this.state.columns) {
            columns = this.state.columns;
        }
        return columns;
    };

可以直接传入进来，或者放到全局的globalConfig中自己当前页面ContainerKey下。又或者通过接口直接返回表头的配置。

在drg2.0 降维中大规模使用了nacos来控制返回表头的配置。

2.屏幕的适配模式--- only 和 surplus

adapterPattern: PropTypes.oneOf(["only", "surplus"]), //适配模式，only 自己占满一个屏幕 或者 surplus 剩余
reduceHeight: PropTypes.number,//需要减去的头部高度

only:模式 独占模式，或者叫一个屏幕模式。在这样的场景下 适合使用这种模式：

1.上层有非常多的展示单元，而表格只是其中的一个展示单元，例如上层有筛选，图表，他们的高度已经超过了一个屏幕，表格作为一个现实单元，应该在小屏幕上进来展示最多的数据，所以它的高度应该calc(100vh - top)。其中top是必要的header或者title的高度。

2.表格只有它自己，例如病例列表的下钻，下钻过来以后只有一个表格，同样也适合使用该模式。

surplus:模式 剩余模式 。 它的意思是填充满父布局的高度。

display: flex;
flex: 1;

采用上面两种模式，下面表格的scrollY会自动计算得出。不需要在像以前传那么多的参数进去，然后还调不好。

一键适配屏幕。

3.配置 搜索，筛选，排序。

antd 官方已经提供了自定义的搜索，筛选，排序，为什么我们还要自己写？因为不想每一次使用的时候都要复制那么多的代码过来。

const columns = [
    {
        title:"修订字段",
        dataIndex:"checkDate",
        key:"checkDate",
        sorter:true,
        width:200,
        component:"BaseSearchComponent",
    }
]

其中排序还是像以前那样就可以。

配置搜索

而搜索则配置 component:"BaseSearchComponent"，它指向的其实就是原来官网的实现。 而它传给后端的参数则是：

{
	"name": item.key,
	"type": item.type,
	"value": [value],
	isLike":true,
}

配置筛选

必须要填加的配置是筛选的接口。url。

const columns = [
    {
        title:"修订字段",
        dataIndex:"checkDate",
        key:"checkDate",
        sorter:true,
        width:200,
        component:"BaseFilterComponent",
        url:"",
    }
]

如果希望全局统一使用一个url，可以通过 CustomSearchFactoryConfig

const CustomSearchFactoryConfig = {
    url:'xxxx/xxxxx/xxxxx/xxx'
}

通过透传的方式传给筛选的组件。

配置 时间筛选，数字筛选，树形筛选。

时间筛选：BaseTimeComponent 数字筛选：BaseNumberComponent 树形筛选：BaseTreeFilterComponent

如果上面的无法满足我们的需求，也可以在

SearchBaseTable 下面的 CustomSearchFactory 来自定义。

4.表格的渲染

antd官方的自定义渲染就是在columns中添加render方法，然后自己处理所有的数据。

每一次的渲染都要重写，无法复用，如果大规模使用同一个表格来render来进行数据判断又会非常非常的乱。

所以就逐步升级重构成现在这种模式：

默认情况下数据的展示并不需要配置。它默认的渲染会走：DefaultView.

const columns = [
    {
        title:"修订字段",
        dataIndex:"checkDate",
        key:"checkDate",
        sorter:true,
        width:200,
        component:"BaseFilterComponent",
        url:"",
        status:"DefaultView",//默认就是走的这个，不需要配置
    }
]

如果展示的该列是数字，要求 左对齐然后右对齐，就可以设置type：number.

表格会对数字列特殊处理，计算该列展示的最大值，然后给其他小于它的值补齐空格，让它看起来左对齐然后右对齐。

如果发现有的列展示的数字显示不下，请加宽表格的scrollX.

自定义渲染的原理其实就是一个组件工厂：

export default function RenderFactory(props) {
    const {item,RenderFactoryConfig} = props;

    //如果想要自己实现render，可以在RenderFactoryConfig中配置render方法
    let renderView =  window.isFunctionMethod(RenderFactoryConfig.render,props);
    if(renderView){
        return renderView;
    }
    switch (item.status) {
        //默认情况下的处理
        case "DefaultView":
            return <DefaultView {...props}/>;
        //点击按钮
        case "ButtonView":
            return <ButtonView {...props}/>;
        //下拉框
        case "SelectView":
          return <SelectView {...props}/>;
        default:
            return <DefaultView {...props}/>;
    }
}

在配置中通过status来配置你要使用哪个组件渲染，那么该列就会自动找到它，然后进行渲染。

而如果base库里没有满足你要求的 ，则可以通过ReaderFactoryConfig.render来实现自定义渲染。

组件工厂会优化判断 ReaderFactoryConfig.render 是否对该列有处理，如果有就使用，没有走下面的。

自定义渲染推荐使用该种方式来进行管理，简单，方便，已读。

5.导出功能的使用

导出功能封装在表格的SearchTable。通过两个参数来控制。

<SearchTableContainer
    params={params} // 筛选参数
    tableUrl={this.props.tableUrl}
    isHaveExportAuth={true} //导出的开关
    defaultExport={["all","page"]}//配置导出的模式
    >
</SearchTableContainer>

isHaveExportAuth:通过该参数来开启导出功能，默认有两种模式，打出全部和导出当前页。 defaultExport:导出的模式，默认是导出全部和导出当前页。而如果只有一种，可以只传入一个参数。

6.表头的渲染

默认表头的渲染是通过tableTitle来控制的，如果不设置它，则不显示导出功能。 但是如果又设置了导出权限。那么导出的功能就会渲染到分页器的右侧。

同样可以通过children来渲染表头右侧的view

7.特殊需求

当前页刷刷新，只在新开了下钻页，而下钻的页面又会修改表格的数据。需要表格的数据静默刷新。 那么就需要改功能。

可以通过currentPageRefresh 来控制，传入该参数的随机数， 在需要刷新的时候进行设置新的随机数，触发表格的刷新。 表格会记录上一次接口请求的参数，用上一次的参数重新发起一次请求。

SearchContainer

筛选组件工厂的封装是为了解决以下痛点问题：

• 大规模使用各种组件筛选，而之前的封装的使用太过繁琐。
• 各种组件的宽度适配随意写之，每一次调试都要每一个组件都重新设置一遍组件的宽度。
• 无法做到复利，我们之前的组件，用了一次之后，无法再一次使用。或者再次使用的难度大。
• 封装的antd组件，非常不利于扩展，比如我在input里写了一个，但是如果我想要input的一些其他的功能，组件确写死了。

基于以上痛点，我重新封装了组件工厂及其中的各种筛选组件。

目前提供的清单有：

//普通字符输入
'InputComponent',
//数字输入
'InputNumberComponent',
//自己封装的多选组件--凡是用到多选，就用该组件
'MultipleSelectComponent',
//单选组件
'SingleSelectComponent',
//平铺筛选组件
'SpreadFilterComponent',
//时间范围组件
'RangePickerComponent',
//时间选择器组件
'DatePickerComponent',
//由官方提供的树形结构组件--已支持高亮搜索titleh和key
'TreeSelectComponent',
//数字范围搜索组件
'InputNumberRangeComponent'
//Radio 组件
'RadioComponent'

使用方式：

<SearchContainer
    searchConfig={searchConfig}
    defaultParams={defaultParams}
    searchConfigData={searchConfigData}
    isDefaultTouch={true}
    onChangeListener={this.onChangeListener}
/>

• searchConfig 是筛选组件的配置，用来控制筛选组件的显示顺序。
• defaultParams 默认的筛选条件。也可以为各个组件初始化。
• searchConfigData 给各个需要数据的组件提供data,例如：MultipleSelectComponent,SingleSelectComponent等等。
• isDefaultTouch 是否默认触发搜索。如果设置为true，则默认触发，如果设置为false，则显示查询和重置按钮。
• onChangeListener 筛选条件的回调。
• mold 模式选择，提供两种模式，筛选模式 filter 和输入模式 input，默认是筛选模式，筛选模式返回的数据是数组，每一个筛选项都带

为实现更好的扩展和封装，约定了每一个封装的组件都必须实现接收一下的数据。

isShowTitle:PropTypes.bool, //是否展示标题
title: PropTypes.string, //标题
key: PropTypes.string,// key
dataIndex: PropTypes.string.isRequired,// 标识当前组件返回的值是哪个字段的
onChangeListener: PropTypes.func.isRequired,//输入回调的监听---必须
defaultValue: PropTypes.string, //默认值
onPressEnterListener:PropTypes.func,

其中dataIndex和onChangeListener是必须的。前者用来标识当前组件的输入的值应该对应的是谁，后者则是输入的回调。

而后面如果有自定义封装的组件，就必须实现接收上面的方法和参数。

searchConfig

我们知道了基础的组成，那么配置就是：

 [
    {
        title:"用户姓名",
        key:"name",
        dataIndex:'name',
        component:"InputComponent",
        maxLength:25,
    },
    {
        title:"用户年龄",
        key:"age",
        dataIndex:'age',
        component:"InputNumberComponent",
        max:120,
        min:0,
    },
    {
        title:"范围时间",
        key:"range_time",
        dataIndex:'range_time',
        component:"RangePickerComponent",
        limit_type:"30_limit"
    },
    {
        title:"时间选择",
        key:"date_time",
        dataIndex:'date_time',
        component:"DatePickerComponent",
    },
    {
        title:"用户标签",
        key:"tag",
        dataIndex:'tag',
        component:"MultipleSelectComponent",
    },
    {
        title:"标签",
        key:"tag1",
        dataIndex:'tag1',
        component:"SingleSelectComponent",
    },
    {
        title:"树形数据",
        key:"tree",
        dataIndex:'tree',
        component:"TreeSelectComponent",
    },
    {
        title:"平铺默认",
        key:"spread",
        dataIndex:'spread',
        component:"SpreadFilterComponent",
    },
    {
        title:"平铺一行",
        key:"spread_line",
        dataIndex:'spread_line',
        component:"SpreadFilterComponent",
        span:24,
    },
]

上面是我列举出的大部分组件的配置。可以看出上半部分是的参数都是固定的。

title:"平铺占一行", //组件的标题
key:"spread_line",//组件的key
dataIndex:'spread_line',//组件的输入对应的字段
component:"SpreadFilterComponent",//该组件指向的固定是谁
span:24,//该组件占用的栅格数

上面是所有的基本配置，而如果输入原生组件的配置，则通过透传的方式直接传入组件，所以并不会限制使用antd组件的使用。简单而强大。例如：

 {
        title:"用户年龄",
        key:"age",
        dataIndex:'age',
        component:"InputNumberComponent",
        max:120, //原生组件的参数会直接传给组件。
        min:0,
    },

组件使用栅格的方式来进行使用。内部组件不应该自己设置大小，而是完全由外部组件来决定。 组件默认的栅格是

xxl: 6,
xl: 8,

也可以通过span来直接控制该组件的栅格数。

如果现有的组件不符合业务开发的需求。可以通过自定义的方式来使用。 通过getComponentsFactory来把你自己渲染的传入进来。和现有的组件组合使用。放在合适的位置。

const { component ,getComponentsFactory} = this.props;

const findComponent = window.isFunctionMethod(getComponentsFactory,component);

if(findComponent){
    return findComponent;
}

defaultParams

通过 defaultParams的值来控制默认数据，

defaultParams = {
                tag3:["2021-03-20","2021-04-04"],
                tag2:["all"],
                tag1:["all"]
            },

searchConfigData

通过searchConfigData来更新需要data的组件。

 searchConfigData:{
                tag:[
                    {
                        title:"全部",
                        value:"all",
                        checked:true,
                    },
                    {
                        title:"男",
                        value:"nan",
                    },
                ],
                tree:[
                    {
                        title: 'Node1',
                        value: '0-0',
                        key: '0-0',
                        children: [
                            {
                                title: 'Child Node1',
                                value: '0-0-0',
                                key: '0-0-0',
                            },
                        ],
                    },

                ],
            }

RangePickerComponent 和 DatePickerComponent

时间范围组件--之前使用过太多次的组件。而其中针对它的限制规则由不尽相同，显然这是一个变化点。

所以我针对此封装了规则的工厂。

export default function RulesFactory(type,current,limit_number,dates){

    switch (type){
        case "30_limit":
            return number_limit(current,30,type,dates);
        case "365_limit":
            return number_limit(current,365,type,dates);
        case "90_limit":
            return number_limit(current,90,type,dates);
        case "number_limit":
            return number_limit(current,limit_number,type,dates);
        default:
            return null;
    }
}

可以通过limit_type来使用现有的限制规则，例如限制输入30天,限制输入365天.等等。

而如果这些都不满足的话，可以通过number_limit来自己输入。搭配，limit_number。

而如果上面的都不满足，可以自己通过getRuleLimit来控制输入的限制规则。

getRuleLimit:PropTypes.func,//获取限制的规则--参数是当前日期 current
limit_number:PropTypes.number,//需要限制的时间区间 例如30天 365天等
limit_type:PropTypes.string,//限制的类型，为了方便后面扩展

MultipleSelectComponent

记得给它设置参数的时候，因为有全部的选项，所以需要数据有一个全部的头；

tag:[
    {
        title:"全部",
        value:"all",
        checked:true,
    },
    {
        title:"男",
        value:"nan",
    },
    {
        title:"女",
        value:"nv",
    },

],

boxOpenClose 组件

收起展开的盒子，可以监听和更换图标

有两种模式：right 模式

import {BoxOpenClose} from 'gennlife-doui';

<BoxOpenClose type={"right"}>
    <div style={{height:100,background:"#f1f1f1"}}>
    这里是内容。。。。。
    </div>
</BoxOpenClose>

有两种模式：bottom 模式

BoxOpenClose type={"bottom"}>
    <div style={{height:100,background:"#f1f1f1"}}>
        这里是内容。。。。。
    </div>
</BoxOpenClose>

SearchMoreSelect 搜索滑动加载更多 选择组件

import { Playground , Props } from 'docz'; import SearchMoreSelect from './index.js';

用于滑动加载更多的单选组件，需要传入接口。

API

changeLog

添加新功能：表格的默认数据支持千分符展示 通过设置

{
   key:"money",
   dataIndex:"money",
   title:"钱",
   type:"number",//必须
   isMicrometer:true，//必须
}

更新统一表格的筛选icon图标和样式