import React from 'react'; import $ from 'jquery/src/ajax'; import { message, Spin, Input, Button, Radio, Form, Select, } from 'antd'; import {productType} from '@/dataDic.js'; import {getProStatus} from '@/tools.js' import Editors from '@/richTextEditors'; import Crop from '@/crop/cropBlock'; import KeyWordTagGroup from '@/crop/keyword'; const NewDetailForm = Form.create()(React.createClass({ getInitialState() { return { visible: false, loading: false, auditStatus: 0, textFileList: [], videoFileList: [], pictureUrl: [], tags:[], edit:{}, edits:{} }; }, loadData(id) { this.setState({ loading: true }); $.ajax({ method: "get", dataType: "json", crossDomain: false, url: globalConfig.context + '/api/admin/community/getCommunintyById' , 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, data: thisData, tags:(thisData.keyword).split(',')||[], status:thisData.status, edit:thisData.content, pictureUrl: thisData.picUrl ? thisData.picUrl.split(',') : [] }); }.bind(this), }).always(function () { this.setState({ loading: false }); }.bind(this)); }, handleSubmit(e,index) { e.preventDefault(); this.props.form.validateFields((err, values) => { // if (!this.state.pictureUrl.length) { // message.warning('请上传专栏图片!'); // return false; // }; if((this.state.edit)==undefined||!this.state.edit||(this.state.edit)=='<p><br></p>'){ 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/community/updateCommunity' : globalConfig.context + '/api/admin/community/insertCommunity', data: { id: this.props.data.id, title: values.title, picUrl: this.state.pictureUrl.join(','), content:this.state.edit, category:values.category, recommend:values.recommend, top:values.top, status:index, keyword: this.state.tags ? this.state.tags.join(",") : '', summary: values.summary, } }).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)); } }); }, cancelFun(){ this.props.closeDesc(); }, componentWillMount() { if (this.props.data.id) { this.loadData(this.props.data.id); } else { this.state.visible=true; this.state.data = {}; this.state.tags=[]; this.state.edit='<p><br></p>'; this.state.pictureUrl = []; }; }, 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.visible=true; this.state.data = {}; this.state.tags=[]; this.state.edit='<p><br></p>'; this.state.pictureUrl = []; this.state.theData={}; }; this.props.form.resetFields(); }; }, render() { const theData = this.state.data || {}; const { getFieldDecorator } = this.props.form; const FormItem = Form.Item const formItemLayout = { labelCol: { span: 6 }, wrapperCol: { span: 12 }, }; return ( <div className='login'> <Form layout="horizontal" onSubmit={(e)=>{this.handleSubmit(e,0)}} id="demand-form"> <Spin spinning={this.state.loading}> <div className="clearfix"> <FormItem className="half-item" {...formItemLayout} label="标题"> {getFieldDecorator('title', { rules: [ { required: true, message: '此项为必填项!' } ], initialValue: theData.title })(<Input placeholder="请输入您的专栏标题" maxLength={40}/>)} </FormItem> <FormItem className="half-item" {...formItemLayout} label="产品类型"> {getFieldDecorator('category', { rules: [ { required: true, message: '此项为必填项!' } ], initialValue: theData.category!=undefined?String(theData.category):theData.category })( <Select placeholder="产品类型"> { productType.map(item=>{ return <Select.Option value={item.value}>{item.key}</Select.Option> }) } </Select> )} </FormItem> </div> <div className="clearfix"> <FormItem labelCol={{ span: 3 }} wrapperCol={{ span: 18 }} label="关键字"> {getFieldDecorator('keyword', { initialValue: theData.keyword })(<KeyWordTagGroup keyWordArr={this.state.tags} tagsArr={(e)=>{this.setState({tags:e})}} />)} </FormItem> </div> <div className="clearfix"> <FormItem labelCol={{ span: 3 }} wrapperCol={{ span: 18 }} label="专栏图片"> <Crop getAllImg={(e)=>{this.setState({pictureUrl:e})}} number = {1} aspectRatio = {2/1} url ={globalConfig.context + '/api/admin/community/upload'} uploadData = {{sign:'knowledge_base'}} urlArr = {this.state.pictureUrl} /> </FormItem> </div> <div className="clearfix"> <FormItem labelCol={{ span: 3 }} wrapperCol={{ span: 18 }} label="简介"> {getFieldDecorator('summary', { rules: [ { required: true, message: '此项为必填项!' } ], initialValue: theData.summary })(<Input type="textarea" rows={4} maxLength={144} placeholder="输入简介" />)} </FormItem> </div> <div className="clearfix"> <FormItem labelCol={{ span: 3 }} wrapperCol={{ span: 18 }} label={<span><i style={{color:"red",fontSize:14}}> * </i>专栏正文</span>}> <Editors textContent={this.state.edit} uploadUrl={'/api/user/demand/uploadPicture'} uploadSign={'demand_picture'} handleRichText={(value) => { this.state.edit = value; }} visible={this.state.visible} /> </FormItem> </div> <div className="clearfix"> <FormItem labelCol={{ span: 3 }} wrapperCol={{ span: 18 }} label="发布状态"> <span>{getProStatus(theData.status)}</span> </FormItem> </div> <div className="clearfix"> <FormItem className="half-item" {...formItemLayout} label="热门"> {getFieldDecorator('top', { initialValue: theData.top })( <Radio.Group> <Radio value={0}>否</Radio> <Radio value={1}>是</Radio> </Radio.Group> )} </FormItem> <FormItem className="half-item" {...formItemLayout} label="推荐"> {getFieldDecorator('recommend', { initialValue: theData.recommend })( <Radio.Group> <Radio value={0}>否</Radio> <Radio value={1}>是</Radio> </Radio.Group> )} </FormItem> {this.props.data.id&&<div className="clearfix"> <FormItem className="half-item" {...formItemLayout} label="阅读量"> <span>{theData.readNumber||0}</span> </FormItem> <FormItem className="half-item" {...formItemLayout} label="评论量"> <span>{theData.commentNumber||0}</span> </FormItem> <FormItem className="half-item" {...formItemLayout} label="点赞量"> <span>{theData.starNumber||0}</span> </FormItem> </div>} </div> <div className="clearfix"> <FormItem wrapperCol={{ span: 12, offset: 3 }}> <Button className="set-submit" type="primary" htmlType="submit"> 保存草稿 </Button> <Button className="set-submit" type="ghost" onClick={(e) => { this.handleSubmit(e,1) }} > 发布新闻 </Button> <Button className="set-submit" type="ghost" onClick={this.cancelFun}> 取消 </Button> </FormItem> </div> </Spin> </Form> </div> ) } })); export default NewDetailForm;