| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263 | import React from 'react';import {	Icon,	Modal,	message,	Spin,	Upload,	Input,	Button,	Radio,	Form} from 'antd';import {  splitUrl} from '@/tools.js';const PicturesWall = React.createClass({	getInitialState() {		return {			previewVisible: false,			previewImage: '',			fileList: [],			tags: []		};	},	handleCancel() {		this.setState({ previewVisible: false });	},	handlePreview(file) {		this.setState({			previewImage: file.url || file.thumbUrl,			previewVisible: true		});	},	handleChange(info) {		let fileList = info.fileList;		this.setState({ fileList });		this.props.fileList(fileList);    },	componentWillReceiveProps(nextProps) {        this.state.fileList = nextProps.pictureUrl;	},	render() {		const { previewVisible, previewImage, fileList } = this.state;		const uploadButton = (			<div>				<Icon type="plus" />				<div className="ant-upload-text">点击上传</div>			</div>		);		return (			<div className="clearfix">				<Upload					action={globalConfig.context + '/api/admin/banners/uploadPicture'}					data={{ sign: 'banners'}}					listType="picture-card"					fileList={fileList}					onPreview={this.handlePreview}					onChange={this.handleChange}				>					{fileList.length >= 1 ? null : uploadButton}				</Upload>				<Modal maskClosable={false} visible={previewVisible} footer={null} onCancel={this.handleCancel}>					<img alt="example" style={{ width: '100%' }} src={previewImage} />				</Modal>			</div>		);	}});class BannerForm extends React.Component {	constructor(props) {        super(props);		this.state = {			loading: false,            imgUrl: [],            visible:false		};	}	cancelFun(){		this.props.closeDesc();	}    loadData(id) {        this.setState({            loading: true        });        $.ajax({            method: "get",            dataType: "json",            crossDomain: false,            url: globalConfig.context +  '/api/admin/banners/details' ,            data: {                id: id            },            success: function (data) {                let thisData = data.data;                if (!thisData) {                    if (data.error && data.error.length) {                        message.warning(data.error[0].message);                    };                    thisData = {};                };                this.setState({                    id: thisData.id, //品类ID                    data:thisData,                    imgUrl: thisData.imgUrl ? splitUrl(thisData.imgUrl, ',', globalConfig.avatarHost + '/upload') : [],                });            }.bind(this),        }).always(function () {            this.setState({                loading: false            });        }.bind(this));    }	    handleSubmit(e){        e.preventDefault();        this.props.form.validateFields((err, values) => {            //url转化            let thePictureUrl = [];            if (this.state.imgUrl.length) {                let picArr = [];                this.state.imgUrl.map(function (item) {                    if ( item.response && item.response.data && item.response.data.length ){                        picArr.push(item.response.data);                    }                });                thePictureUrl = picArr.join(",");            }else{                message.warning('请上传图片!');                return false;            };            if (!err) {                this.setState({                    loading: true                });                $.ajax({                    method: "post",					dataType: "json",					async:true,                    url: this.props.data.id ? globalConfig.context + '/api/admin/banners/update' : globalConfig.context + '/api/admin/banners/save',                    data: {                        id:this.props.data.id,                        text:values.text,                        forwardUrl:values.forwardUrl,                        apiUrl:values.apiUrl,                        imgUrl:thePictureUrl.length?thePictureUrl:'',                        deleteSign:false,                        client:values.client                    }                }).done(function (data) {                    this.setState({                        loading: false					});                    if (!data.error.length) {                        message.success('操作成功!');                        this.setState({                            visible: false                        });                        this.props.handOk();                    } else {                        message.warning(data.error[0].message);                    }                }.bind(this));            }        })    }    componentWillMount() {        if (this.props.data&&this.props.data.id) {            this.loadData(this.props.data.id);        } else {			this.state.data = {};			this.state.imgUrl = [];        };    }    componentWillReceiveProps(nextProps) {        if (!this.props.visible && nextProps.visible) {            this.state.textFileList = [];            this.state.videoFileList = [];            if (nextProps.data.id) {                this.loadData(nextProps.data.id);            } else {				this.state.data = {};				this.state.imgUrl = [];            };			this.props.form.resetFields();        };    }	render() {        const { getFieldDecorator } = this.props.form;        const FormItem = Form.Item;        const formItemLayout = {            labelCol: { span: 6 },            wrapperCol: { span: 12 },		};        let theData = this.state.data||{};		return (			<div className="patent-desc">                <Form layout="horizontal" onSubmit={this.handleSubmit.bind(this)} id="demand-form">                    <Spin spinning={this.state.loading}>                        <div className="clearfix">                            <FormItem  {...formItemLayout} label="轮播图描述">                                {getFieldDecorator('text', {                                    rules: [ { required: true, message: '此项为必填项!' } ],                                    initialValue: theData.text                                })(<Input placeholder="请输入轮播图名称"/>)}                            </FormItem>                        </div>                        <div className="clearfix">                            <FormItem {...formItemLayout} label="跳转地址">                                {getFieldDecorator('forwardUrl', {                                    initialValue: theData.forwardUrl                                })(<Input placeholder="请输入跳转地址"/>)}                            </FormItem>                        </div>                        <div className="clearfix">                            <FormItem  {...formItemLayout} label="api">                                {getFieldDecorator('apiUrl', {                                    rules: [ { required: true, message: '此项为必填项!' } ],                                    initialValue: theData.apiUrl                                })(<Input placeholder="请输入api"/>)}                            </FormItem>                        </div>                        <div className="clearfix">                            {/*<FormItem  {...formItemLayout} label="位置">                                {getFieldDecorator('client', {                                    rules: [ { required: true, message: '此项为必填项!' } ],                                    initialValue: theData.client                                 })(                                    <Radio.Group>                                        <Radio value={0}>网站</Radio>                                        <Radio value={1}>App</Radio>                                    </Radio.Group>                                    )                                }                            </FormItem>*/}                        </div>                        <div className="clearfix">                            <FormItem labelCol={{ span: 6 }} wrapperCol={{ span: 18 }} label={<span><strong style={{color:"#f00"}}> * </strong>轮播图</span>}>                                <PicturesWall                                    fileList={(e)=>{this.setState({imgUrl:e})}}                                    pictureUrl={this.state.imgUrl}                                    visible={this.props.visible}                                />                            </FormItem>                        </div>                        <div className="clearfix">                            <FormItem wrapperCol={{ span: 12, offset: 6 }}>                                <Button className="set-submit" type="primary" htmlType="submit">                                    保存                                </Button>                                <Button className="set-submit" type="ghost" onClick={this.cancelFun.bind(this)}>                                    取消                                </Button>                            </FormItem>                        </div>                    </Spin>                </Form>    			</div>		);	}}export default Form.create()(BannerForm);
 |