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 | 复选框 | 打勾勾的