import React from 'react'; import $ from 'jquery/src/ajax'; import { Icon, Modal, message, Spin, Upload, Input, Button, Radio, Form, Checkbox, Cascader, Row, Select, Col } from 'antd'; import { splitUrl} from '@/tools.js'; import {provinceSelect } from '@/NewDicProvinceList'; import Editors from '@/richTextEditors'; 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/user/demand/uploadPicture'} data={{ sign: 'demand_picture'}} listType="picture-card" fileList={fileList} onPreview={this.handlePreview} onChange={this.handleChange} > {fileList.length >= 2 ? null : uploadButton} </Upload> <Modal maskClosable={false} visible={previewVisible} footer={null} onCancel={this.handleCancel}> <img alt="example" style={{ width: '100%' }} src={previewImage} /> </Modal> </div> ); } }); 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/news/detail' , data: { id: id }, success: function (data) { let thisData = data.data,provice=[]; if (!thisData) { if (data.error && data.error.length) { message.warning(data.error[0].message); }; thisData = {}; }; let publishPagesArr = []; let pageList = thisData.newsPublishs pageList.map(item=>{ publishPagesArr.push(item.publishPage) }); let pageK = publishPagesArr.length?publishPagesArr:['web_index','app_policy_index'] provice.push(thisData.provinceId); this.setState({ id:thisData.id, data: thisData, Province:provice, publishPages:pageK, auditStatus:thisData.auditStatus, edit:thisData.content, pictureUrl: thisData.titleImg ? splitUrl(thisData.titleImg, ',', globalConfig.avatarHost + '/upload') : [] }); }.bind(this), }).always(function () { this.setState({ loading: false }); }.bind(this)); }, getPictureUrl(e) { this.setState({ pictureUrl: e }); }, handleSubmit(e,index) { e.preventDefault(); this.props.form.validateFields((err, values) => { if((this.state.edit)==undefined||!this.state.edit||(this.state.edit)=='<p><br></p>'){ message.warning('请填写政策正文'); return false; } //url转化 let thePictureUrl = []; if (this.state.pictureUrl.length) { let picArr = []; this.state.pictureUrl.map(function (item) { if ( item.response && item.response.data && item.response.data.length ){ picArr.push(item.response.data); } }); thePictureUrl = picArr.join(","); }; if (!err) { let publishPages =(values.publishPages).join(',') this.setState({ loading: true }); $.ajax({ method: "post", dataType: "json", async:true, url: this.props.data.id ? globalConfig.context + '/api/admin/news/updateNews' : globalConfig.context + '/api/admin/news/apply', data: { id: this.props.data.id, type:values.type, title: values.title, author: values.author, titleImg: thePictureUrl, content:this.state.edit, hot:values.hot, source:values.source, sourceUrl:values.sourceUrl, auditStatus:index, summary: values.summary, provinceId: (values.ProvinceCity)[0], publishPages:publishPages } }).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.edit='<p><br></p>'; this.state.pictureUrl = []; this.state.Province=undefined; this.setState({ publishPages:['web_index','app_policy_index'] }) }; }, 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.Province=undefined; this.state.edit='<p><br></p>'; this.state.pictureUrl = []; this.state.theData={}; this.setState({ publishPages:['web_index','app_policy_index'] }) }; 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="请输入您的新闻标题" />)} </FormItem> <FormItem className="half-item" {...formItemLayout} label="新闻类型"> {getFieldDecorator('type', { rules: [ { required: true, message: '此项为必填项!' } ], initialValue: theData.type!=undefined?String(theData.type):theData.type })( <Select placeholder="新闻类型"> <Select.Option value="0" >普通新闻</Select.Option> <Select.Option value="98" >技淘百科</Select.Option> <Select.Option value="99" >技淘观点</Select.Option> </Select> )} </FormItem> </div> <div className="clearfix"> <FormItem className="half-item" {...formItemLayout} label="热门"> {getFieldDecorator('hot', { rules: [ { required: true, message: '此项为必填项!' } ], initialValue: theData.hot })( <Radio.Group> <Radio value={0}>否</Radio> <Radio value={1}>是</Radio> </Radio.Group> )} </FormItem> <FormItem className="half-item" {...formItemLayout} label="新闻来源"> {getFieldDecorator('source', { rules: [ { required: true, message: '此项为必填项!' } ], initialValue: theData.source })(<Input placeholder="请输入新闻来源" />)} </FormItem> <FormItem className="half-item" {...formItemLayout} label="来源链接"> {getFieldDecorator('sourceUrl', { initialValue: theData.sourceUrl })(<Input placeholder="请输入新闻来源链接" />)} </FormItem> <FormItem className="half-item" {...formItemLayout} label="省-市-区" > {getFieldDecorator('ProvinceCity', { rules: [ { required: true, message: '此项为必填项!' } ], initialValue: this.state.Province })( <Cascader options={provinceSelect()} placeholder="选择城市" /> )} </FormItem> </div> <div className="clearfix"> <FormItem labelCol={{ span: 3 }} wrapperCol={{ span: 18 }} label="新闻图片"> <PicturesWall fileList={this.getPictureUrl} pictureUrl={this.state.pictureUrl} visible={this.props.visible} /> </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} 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>{theData.releaseStatus?'已发布':'未发布'}</span> </FormItem> </div> <div className="clearfix"> <FormItem className="full-item" labelCol={{ span: 3 }} wrapperCol={{ span: 18 }} label="发布位置"> {getFieldDecorator('publishPages', { rules: [ { required: false } ], initialValue: this.state.publishPages })( <Checkbox.Group> <Row> <Col span={6}><Checkbox value="web_index" disabled>网站新闻首页</Checkbox></Col> <Col span={6}><Checkbox value="web_tech_service_index">网站科技服务首页</Checkbox></Col> <Col span={6}><Checkbox value="app_policy_index" disabled>app政策首页</Checkbox></Col> <Col span={6}><Checkbox value="app_tech_service_index">APP科技服务首页</Checkbox></Col> </Row> </Checkbox.Group> )} </FormItem> </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,2) }} > 发布新闻 </Button> <Button className="set-submit" type="ghost" onClick={this.cancelFun}> 取消 </Button> </FormItem> </div> </Spin> </Form> </div> ) } })); export default NewDetailForm;