zl-react-component

zl的组件封装

参考自：https://www.jianshu.com/p/db6113c94dbc

说明：

1. 使用npm或cnpm进行包的安装更新

2. 组件编译 npm run build

3. 项目关联到本地 npm link

4. 其他项目引用本项目 npm link zl-react-component

    1、本地更新版本号
        比如我想来个1.0.1版本，这个是补丁的意思，补丁最合适；
        ：npm version patch
        比如我想来个1.1.0版本，这个是小修小改；
        ：npm version minor
        比如我想来个2.0.0版本，这个是大改咯；
        ：npm version major
    2、修改远端的版本,提交到远端npm中：
        npm publish 

配置文件简要说明：

.babelrc:

编译的配置文件，用于react，es6编译成es5。具体请查看注释

webpack.config:

webpack的配置文件，这里使用的是webpack3。具体请查看注释

项目中使用的插件说明：

文件拷贝：copy-webpack-plugin

dist文件清理：clean-webpack-plugin

request的页面跳转：history

React-Router v4.0上已经不推荐使用hashRouter，主推browserRouter，但是因为使用browserRouter需要服务端配合可能造成不便，有时还是需要用到hashRouter。下面是v4.0的React-Router中hashRouter以js方式跳转的实现步骤。

开发注意事项：

在基于antd开发时，没有完善对组件的样式加载，需要进行手动一个一个的引入

如何使用

组件都没有默认导出，都要用花括号的哦

import { zlrequest as request } from 'zl-react-component';

zlrequest请求组件

zlrequest 请求组件依赖包如下

"antd": "^3.11.2",      
"axios": "^0.18.0",
"history": "^4.7.2",
"react": "^16.6.3",
"react-amap": "^1.2.7",
"react-dom": "^16.6.3",
"react-json-view": "^1.19.1"

请保证项目安装了以下依赖

API：

参数	说明	类型	默认值
OpenParamsNotification	开启参数提示，这个参数是保存子啊sessionStory里面的	String	null

地图组件的使用

我们提供了三个地图组件的使用。

对于地图组件，需要使用搞得地图提供的key，你可以定义window的全局变量。也可以传递进来

1. MapPointInfo 地图上选择坐标点

    <MapPointInfo mapInfoFn={this.mapInfoFn} mapstyle={mapstyle} />

API:

参数	说明	类型	默认值
mapInfoFn	地图的点击回调	function	null
mapstyle	地图的样式	object	null
center	地图的中心点	object	天安门
markerPoint	默认显示的marker点	object	null
version	版本号	string	1.44.1
zoom	放大级别	number	15
mapConfig	地图的配置项，可以直接传递一个这个来覆盖前面的配置	object	{}

2. MapPoint 地图上显示一个marker点

    <MapPoint point={point} />

API:

参数	说明	类型	默认值
gis	后台返回的gis对象{lat: '', lng: '', address: '', addressinfo: '', }	object	null
mapstyle	地图的样式	object	null
center	地图的中心点	object	天安门
markerPoint	默认显示的marker点	object	null
version	版本号	string	1.44.1
zoom	放大级别	number	15
mapConfig	地图的配置项，可以直接传递一个这个来覆盖前面的配置	object	{}

3. MapPolygon 地图是哪个显示一个多边形

    <MapPolygon areaList={areaList} height={350} {...amapConfig} />

API:

参数	说明	类型	默认值
amapConfig	坐标点对象{point: '', center: '', version: '', amapkey: '', }	object	null
height	高度	number	不可为空
areaList	接收带有区域坐标的数据	array	[]

4. zllayouts 统一的布局

    <Col {...colOption2}>
        <GisInfo gis={project} />
    </Col>

API:

名称	说明
rowGutterOption	栅格配置（100%）
colOption2	栅格配置（二等份）
colOption3	栅格配置（三等份）
searchLayout	搜索布局
timeLayout	时间布局
formItemLayout	表单布局（labelCol和WrapperCol）

#### 5. zlnetwork 下载文件的方法

 /**
  * 获取文件的上下文
  * @param suffix 后缀名
  * @return {string} 
  */
 export const fileMIME = (suffix) => {
     switch (suffix) {
         case 'txt':
             return 'text/plain';
         case 'doc':
             return 'application/msword';
         default:
             return '';
     }
 };

/**
* 文件下载
* @param { function } downloadFile 下载文件的方法
* @param { string } fileid 文件的id
* @param { string } name 文件的名称
* @param { string } suffix 文件的后缀名
* @param { string } alias 别名
*/
export const downloadFileUtil = (downloadFile,fileid,name,suffix,alias) => {
   // 获取文件的名字
   const getName = alias ? name + "_" + alias : name;
   // 获得mime配置
   const mime = fileMIME(suffix);
   downloadFile({ fileid }).then(res => {
       // 这里res.data是返回的blob对象
       // application/vnd.openxmlformats-officedocument.spreadsheetml.sheet这里表示xlsx类型
       const blob = new Blob([res], { type: mime + ';charset=utf-8' });
       const downloadElement = document.createElement('a');
       // 创建下载的链接
       const href = window.URL.createObjectURL(blob);
       downloadElement.href = href;
       // 下载后文件名
       downloadElement.download = getName;
       document.body.appendChild(downloadElement);
       // 点击下载
       downloadElement.click();
       // 下载完成移除元素
       document.body.removeChild(downloadElement);
       // 释放掉blob对象
       window.URL.revokeObjectURL(href);
   });
};

6.zlobject封装好的一些方法（区域颜色样式、假数据数组等）

7.zlrequest 发送请求

• @param params 参数数组
• @param apiUrl 请求的地址
• @returns {*}
• @constructor

8. ImageUpload 图片上传组件

<ImageUpload
    saveImgList={this.saveImgList}
    boxType="picture-card"
/>

API:

参数	说明	类型	默认值
saveImgList	上传文件后的回调	func	null
boxType	上传文件的样式	string	'picture-card'
maxNum	文件上传的最大数量	number	6

9. BaseForm 表单构建组件

<BaseForm itemList={itemList} form={form} col={24} />

API:

参数	说明	类型	默认值
itemList	表单配置数据	Array	null
itemObj	表单配置数据	Object	null
form	表单对象，基于ant提供的form组件	Obj	null
col	布局	number	12

itemList是一个有着固定规范的表单对象

栗子：

 const itemList = [{
    id: 'name',
    name: '名字',
    type: 'input',
    must: true
}, {
    id: 'uniscid',
    name: '统一社会信用代码',
    type: 'text',
    must: true
}, {
    id: 'sex',
    value: '', // 默认值
    name: '性别',
    type: 'select',
    must: true,
    opts: [
        {
            text: '男',
            id: '01'
        },
        {
            text: '女',
            id: '02'
        }
    ]
}];

对象栗子：

const itemObj = {
    id: 'rangeTime',
    name: '选择日期',
    type: 'rangeTime',
    value: '',
    must: true,
}

关于type的说明：

参数	说明	其他参数
input	输入框
select	单选框
selectMu	多选框
text	文本输入-默认三行
number	数字-使用数字的时候	最小值-min，最大值-max
time	日期选择
rangeTime	开始时间-结束时间
cascader	级联选择	直接查看ant的级联选择
radio	单选点击	竖布局-vertical true或者false
rate	评分

10. BaseFormItem（推荐使用）单个Form组件渲染

在使用BaseForm进行开发的时候，出现了这么一个需求，我们要点击想要的输入框，然后动态的编辑他的文本，所以弄了一个单个的FormItem组件

注意：在BaseFormItem里面，使用了Col组件，所以，在开发中，我们要求这么使用

<Row>
    {formData.map(item => (
        <div key={item.id}>
            <BaseFormItem itemObj={item} form={form} />
        </div>
    ))}
</Row>

对于BaseFormItem，它只接收对象，不能接收数组，

数据格式:

const formObj = {
    id: 'rangeTime',
    name: '选择日期',
    type: 'rangeTime',
    value: '',
    must: true,
}

关于type的说明：

参数	说明	其他参数
input	输入框
select	单选框
selectMu	多选框
text	文本输入-默认三行
number	数字-使用数字的时候	最小值-min，最大值-max
time	日期选择
rangeTime	开始时间-结束时间
cascader	级联选择	直接查看ant的级联选择
radio	单选点击	竖布局-vertical true或者false
rate	评分
checkbox	复选框	打勾勾的