bannerAdd.js

import React,{Component} from 'react';
import WhiteBar from '@src/components/Common/WhiteBar';
import {Table,Input,Form,Button,Row,Col,Message,Radio,Upload,Icon} from 'antd';
import { API_MENU_MANAGE, API_FILEUPLOAD_MANAGE,API_SYS_CMS } from '@src/Api';
import SYS_CONFIG from '@src/config/constant.js';
import {Link} from 'react-router-dom';
import axios from '@src/axios/index';


class BannerAdd extends Component {
	state = {
		cover: '', // 图片上传的地址
		id: '',
	}
	upDateCount = {count: 0}
	componentDidMount () {
		let id = this.props.match.params.id;
		if (id) {
			this.setState({id});
			this.getBannerDetail(id);
		}
	}
	getBannerDetail = (id) => {
		axios.ajax({
			url: API_SYS_CMS.getAppBannerById,
			data: {
				id: id
			}
		}).then((res) => {
			this.props.form.setFieldsValue({
				state: res.state,
				title: res.title
			});
			this.setState({
				cover: res.cover,
				conent: res.content
			});
		})
	}
	imgUpLoadChange = (info,fileList,e) => {
		let _this = this;
		if (info.file.status === 'done') {
			this.getBase64(info.file.originFileObj,(imgUrl) => {
				// imgUrl: base64位编码
				_this.imgUpLoad(imgUrl);
			});
		}
	}
	// 图片上传
	imgUpLoad = (imageUrl) => {
		axios.ajax({
			url: API_FILEUPLOAD_MANAGE.base64,
			data: {
				"imageDatas": [{
		        	"className": "bannerImg",
		          	"data": imageUrl
		        }]
			}
		}).then((res) => {
			console.log(res);
			let cover = SYS_CONFIG.fileApi + '/img/' + res[0];
			this.setState({cover},() => {
				console.log(this.state.cover);
			});
		});
	}
	//图片转base64
	getBase64 = (img, callback)=> {
	    const reader = new FileReader();
	    reader.addEventListener('load', () => callback(reader.result));
	    reader.readAsDataURL(img)
	}
	// 移除
	removeImg = (file) => {
		this.setState({cover: ''});
		this.upDateCount.count = 0;
	}
	// 上传前
	beforeUpload = (file) => {
		let _this = this;
		return new Promise ((resolve,reject) => {
			// 对图片上传图片进行验证
			const imgArr = ['image/jpeg', 'image/png', 'image/jpg'];
			const isJPG = imgArr.indexOf(file.type) === -1;
			if (isJPG) {
				Message.warn('图片只支持jpeg,png格式');
				reject();
			}
			const isLt2M = file.size / 1024 / 1024 < 2;
			if (!isLt2M) {
				Message.warn('图片不能大于2M');
				reject();
			}
			if (_this.state.id) {
				if (_this.upDateCount.count == 0) {
					// 更改图片
					_this.setState({cover: ''});
					_this.upDateCount.count++;
					resolve();
				} else {
					Message.warn('每次只能上传一张图片');
					reject();
				}
			} else {
				// 添加图片
				if (_this.state.cover !== '') {
					Message.warn('每次只能上传一张图片');
					reject();
				} else {
					resolve();
				}
			}
		}) 
	}
	// 保存图片
	save = () => {
		let _this = this;
		// 进行验证
		this.props.form.validateFields((err,data) => {
			if (!err) {
				if (!this.state.cover) {
					Message.warn('请先上传图片');
					return;
				}
				if (_this.state.id) {
					// 修改图片
					_this.updateBanner(data);
				} else {
					// 新增图片
					_this.addBanner(data);
				}
			}
		})
	}
	// 添加图片
	addBanner = (data) => {
		axios.ajax({
			url: API_SYS_CMS.addBanner,
			data: {
				...data,
				cover: this.state.cover
			}
		}).then((res) => {
			Message.success('保存成功');
			this.props.history.push({pathname: '/home/permission/bannerManage'});
		});
	}
	// 修改图片
	updateBanner = (data) => {
		axios.ajax({
			url: API_SYS_CMS.editBanner,
			data: {
				...data,
				cover: this.state.cover,
				id: this.state.id
			}
		}).then((res) => {
			Message.success('修改成功');
			this.props.history.push({pathname: '/home/permission/bannerManage'});
		});
	}
	render () {
		let _this = this;
		const FormItem = Form.Item;
		const {getFieldDecorator}  = this.props.form;
		const RadioGroup = Radio.Group;
		const formItemLayout = {
	    	labelCol: {
	        	md: { span: 12 },
	        	lg: { span: 8 },
	      	},
	     	wrapperCol: {
	        	md: { span: 24 },
	        	lg: { span: 16 },
	      },
	    }
		return (
			<div className="com-BannerAdd">
				<WhiteBar title="添加图片" />
				<div style={{paddingLeft: 20}}>
					<Button>
						<Link to="/home/permission/bannerManage">返回</Link>
					</Button>
				</div>
				<WhiteBar title="基本信息" />
				<div style={{background: '#fff',padding: 20}}>
					<Form>
						<Row gutter={10}>
							<Col span={6}>
								<FormItem {...formItemLayout} label="标题名称:">
	                                {
	                                    getFieldDecorator('title',{
	                                        rules: [
	                                        	{required: true,message: '标题不能为空'},
	                                        	{max:20,message: '标题名称不能超过20个字符'},
                                                {pattern: /^(?!_)(?!.*?_$)[a-zA-Z0-9_\u4e00-\u9fa5]+$/, message: '标题名称名称不能有特殊字符'}
	                                        ]
	                                    })(
	                                    	<Input type="text"  placeholder="标题名称" />
	                                    )
	                                }
	                            </FormItem>
							</Col>
							<Col span={6}>
								<FormItem {...formItemLayout} label="状态:">
	                                {
	                                    getFieldDecorator('state',{
	                                        rules: [
	                                        	{required: true,message: '状态不能为空'}
	                                        ]
	                                    })(
	                                    	<RadioGroup onChange={this.chgIconSelect}>
						                        <Radio value={1}>有效</Radio>
						                        <Radio value={2}>无效</Radio>
						                    </RadioGroup>
	                                    )
	                                }
	                            </FormItem>
							</Col>
							<Col span={6}>
								<FormItem {...formItemLayout} label="图片链接:">
	                                {
	                                    getFieldDecorator('content',{
	                                        rules: [
	                                        ]
	                                    })(
	                                    	<Input type="text"  placeholder="图片链接的地址" />
	                                    )
	                                }
	                            </FormItem>
							</Col>
						</Row>
						<Row>
							<Col span={18} style={{paddingTop: 5,textAlign:'center'}}>
								<Upload 
								accept={"image/*"}
								action={SYS_CONFIG.baseApi + API_FILEUPLOAD_MANAGE.base64}
								onChange={this.imgUpLoadChange}
								onRemove={this.removeImg}
								beforeUpload={this.beforeUpload}
								className='uploadBtn'>
			                    	<Button>
			                        	<Icon type="upload" /> 点击上传
			                      	</Button>
			                    </Upload>
							</Col>
						</Row>
						<Row>
							<Col span={18}>
								<div style={{margin:'auto',width: 400,height: 250,textAlign: 'center',border:'1px solid #ddd'}}>
									{
										this.state.cover == '' ?
										<p style={{marginTop: 50}}>图片预览</p> : <img style={{width: 300 }} src={this.state.cover} />
									}
								</div>
							</Col>
						</Row>
					</Form>
				</div>
				<div style={{marginTop:20,textAlign: 'center'}}>
					<Button onClick={this.save}>保存</Button>
				</div>
			</div>
		)
	}
}

export default Form.create()(BannerAdd);