zl-react-component v3.3.4

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：

地图组件的使用

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

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

1. MapPointInfo 地图上选择坐标点

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

API:

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

    <MapPoint point={point} />

API:

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

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

API:

4. zllayouts 统一的布局

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

API:

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:

9. BaseForm 表单构建组件

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

API:

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的说明：

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的说明：