# gennlife-doui

> ## 使用方式

Latest version **0.0.79** (published 2021-08-24) · ISC license · 0 weekly downloads

## Install

```sh
npm install gennlife-doui
pnpm add gennlife-doui
yarn add gennlife-doui
bun add gennlife-doui
```

## Health

**Score 10/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score; declining downloads.

## Facts

| | |
|---|---|
| Version | 0.0.79 |
| Published | 2021-08-24 |
| First published | 2021-04-29 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=8.0.0 |
| Dependencies | 28 |
| Unpacked size | 5.6 MB |
| Known vulnerabilities | 0 (+28 in 4 direct dependencies) |
| Install scripts | no |
| Maintainers | gennlife |

## Links

- npm: https://www.npmjs.com/package/gennlife-doui
- Repository: git@10.0.0.6:Gennlife-Eng/Gennlife-DRG-Auth-Mng-UI
- npm.io page: https://npm.io/package/gennlife-doui

## Dependencies (28)

- [antd](https://npm.io/package/antd.md) 4.12.3
- [docz](https://npm.io/package/docz.md) ^2.3.1
- [axios](https://npm.io/package/axios.md) ^0.19.0
- [react](https://npm.io/package/react.md) 17.0.1
- [father](https://npm.io/package/father.md) ^2.30.3
- [jquery](https://npm.io/package/jquery.md) ^3.4.1
- [rsuite](https://npm.io/package/rsuite.md) ^4.10.2
- [echarts](https://npm.io/package/echarts.md) 4.6.0
- [@antv/g6](https://npm.io/package/@antv/g6.md) ^3.7.3
- [immutable](https://npm.io/package/immutable.md) ^4.0.0-rc.12
- [js-cookie](https://npm.io/package/js-cookie.md) ^2.2.1
- [react-dom](https://npm.io/package/react-dom.md) 17.0.1
- [array-move](https://npm.io/package/array-move.md) ^3.0.1
- [highcharts](https://npm.io/package/highcharts.md) ^8.2.2
- [blueimp-md5](https://npm.io/package/blueimp-md5.md) ^2.17.0
- [dom-to-image](https://npm.io/package/dom-to-image.md) ^2.6.0
- [react-sticky](https://npm.io/package/react-sticky.md) ^6.0.3
- [element-react](https://npm.io/package/element-react.md) ^1.4.34
- [gennlife-doui](https://npm.io/package/gennlife-doui.md) ^0.0.20
- [@ant-design/icons](https://npm.io/package/@ant-design/icons.md) 4.0.0
- [echarts-liquidfill](https://npm.io/package/echarts-liquidfill.md) ^2.0.6
- [gatsby-plugin-less](https://npm.io/package/gatsby-plugin-less.md) ^5.2.0
- [react-sortable-hoc](https://npm.io/package/react-sortable-hoc.md) ^2.0.0
- [element-theme-default](https://npm.io/package/element-theme-default.md) ^1.4.13
- [react-highlight-words](https://npm.io/package/react-highlight-words.md) ^0.16.0
- [@ant-design/compatible](https://npm.io/package/@ant-design/compatible.md) ^1.0.8
- [react-infinite-scroller](https://npm.io/package/react-infinite-scroller.md) ^1.2.4
- [rollup-plugin-node-globals](https://npm.io/package/rollup-plugin-node-globals.md) ^1.4.0

## Recent versions

- 0.0.79 (latest) — 2021-08-24
- 0.0.77 — 2021-08-23
- 0.0.76 — 2021-08-23
- 0.0.75 — 2021-08-23
- 0.0.74 — 2021-08-21
- 0.0.73 — 2021-08-21
- 0.0.72 — 2021-08-21
- 0.0.71 — 2021-08-20
- 0.0.70 — 2021-08-20
- 0.0.69 — 2021-08-20
- 0.0.68 — 2021-08-20
- 0.0.67 — 2021-08-20
- 0.0.66 — 2021-08-20
- 0.0.65 — 2021-08-18
- 0.0.64 — 2021-08-18
- … 62 more at https://npm.io/package/gennlife-doui/versions

## README

# gennlife-doui

## 使用方式

```
yarn add gennlife-doui
```

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

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

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

# SearchTableContainer

```javascript
 <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` 来控制，传入该参数的随机数，
在需要刷新的时候进行设置新的随机数，触发表格的刷新。
表格会记录上一次接口请求的参数，用上一次的参数重新发起一次请求。

参数 | 说明 | 类型 | 默认值
----|------|-----|------
isStrut | 是否撑开分页,默认是不撑开| boolean | false
adapterDownLoadParams | 兼容导出的参数处理 | func | null
adapterData | 兼容数据返回的数据处理，例如返回的数据里面是不是标准返回 result | func | null

# 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>
```

参数 | 说明 | 类型 | 默认值
----|------|-----|------
defaultVisible | 默认是否收起还是展开 | boolean | true
onBoxChangeListener | 组件收起还是展开的回调 | func | -
openIcon | 展开的图标 | string | -
closeIcon | 收起的图标 | string | -
className | 图标的样式 | string | -
type | 两种模式 right 和 bottom | string | right

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

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

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

<Playground>
    <SearchMoreSelect
        url={"/drg-hospital/n041_revision/getCodeNames"}
        title={"推荐编码"}
        onChangeListener={item=>console.log("item",item)}
    >
    </SearchMoreSelect>
</Playground>

## API

| 参数 | 说明| 类型 | 默认值 |
|-------------|------------------------------------------|-------------|-------|
| url| 接口url | string| - |
| title | 标题 | ReactNode| -|
| onChangeListener| 选中都会掉| func| -|
| request | 请求的函数 ,可以传window.request进来 | func| - |

# changeLog

添加新功能：表格的默认数据支持千分符展示 通过设置
```
{
   key:"money",
   dataIndex:"money",
   title:"钱",
   type:"number",//必须
   isMicrometer:true，//必须
}
```

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

---
_Source: https://npm.io/package/gennlife-doui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._