newForm.jsx 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367
  1. import React from 'react';
  2. import $ from 'jquery/src/ajax';
  3. import {
  4. Icon,
  5. Modal,
  6. message,
  7. Spin,
  8. Upload,
  9. Input,
  10. Button,
  11. Radio,
  12. Form,
  13. Checkbox,
  14. Cascader,
  15. Row,
  16. Col
  17. } from 'antd';
  18. import { splitUrl} from '@/tools.js';
  19. import {provinceSelect } from '@/NewDicProvinceList';
  20. import Editors from '@/richTextEditors';
  21. const PicturesWall = React.createClass({
  22. getInitialState() {
  23. return {
  24. previewVisible: false,
  25. previewImage: '',
  26. fileList: [],
  27. tags: []
  28. };
  29. },
  30. handleCancel() {
  31. this.setState({ previewVisible: false });
  32. },
  33. handlePreview(file) {
  34. this.setState({
  35. previewImage: file.url || file.thumbUrl,
  36. previewVisible: true
  37. });
  38. },
  39. handleChange(info) {
  40. let fileList = info.fileList;
  41. this.setState({ fileList });
  42. this.props.fileList(fileList);
  43. },
  44. componentWillReceiveProps(nextProps) {
  45. this.state.fileList = nextProps.pictureUrl;
  46. },
  47. render() {
  48. const { previewVisible, previewImage, fileList } = this.state;
  49. const uploadButton = (
  50. <div>
  51. <Icon type="plus" />
  52. <div className="ant-upload-text">点击上传</div>
  53. </div>
  54. );
  55. return (
  56. <div className="clearfix">
  57. <Upload
  58. action={globalConfig.context + '/api/user/demand/uploadPicture'}
  59. data={{ sign: 'demand_picture'}}
  60. listType="picture-card"
  61. fileList={fileList}
  62. onPreview={this.handlePreview}
  63. onChange={this.handleChange}
  64. >
  65. {fileList.length >= 2 ? null : uploadButton}
  66. </Upload>
  67. <Modal maskClosable={false} visible={previewVisible} footer={null} onCancel={this.handleCancel}>
  68. <img alt="example" style={{ width: '100%' }} src={previewImage} />
  69. </Modal>
  70. </div>
  71. );
  72. }
  73. });
  74. const NewDetailForm = Form.create()(React.createClass({
  75. getInitialState() {
  76. return {
  77. visible: false,
  78. loading: false,
  79. auditStatus: 0,
  80. textFileList: [],
  81. videoFileList: [],
  82. pictureUrl: [],
  83. tags:[],
  84. edit:{},
  85. edits:{}
  86. };
  87. },
  88. loadData(id) {
  89. this.setState({
  90. loading: true
  91. });
  92. $.ajax({
  93. method: "get",
  94. dataType: "json",
  95. crossDomain: false,
  96. url: globalConfig.context + '/api/admin/news/detail' ,
  97. data: {
  98. id: id
  99. },
  100. success: function (data) {
  101. let thisData = data.data,provice=[];
  102. if (!thisData) {
  103. if (data.error && data.error.length) {
  104. message.warning(data.error[0].message);
  105. };
  106. thisData = {};
  107. };
  108. let publishPagesArr = [];
  109. let pageList = thisData.newsPublishs
  110. pageList.map(item=>{
  111. publishPagesArr.push(item.publishPage)
  112. });
  113. let pageK = publishPagesArr.length?publishPagesArr:['web_index','app_policy_index']
  114. provice.push(thisData.provinceId);
  115. this.setState({
  116. id:thisData.id,
  117. data: thisData,
  118. Province:provice,
  119. publishPages:pageK,
  120. auditStatus:thisData.auditStatus,
  121. edit:thisData.content,
  122. pictureUrl: thisData.titleImg ? splitUrl(thisData.titleImg, ',', globalConfig.avatarHost + '/upload') : []
  123. });
  124. }.bind(this),
  125. }).always(function () {
  126. this.setState({
  127. loading: false
  128. });
  129. }.bind(this));
  130. },
  131. getPictureUrl(e) {
  132. this.setState({ pictureUrl: e });
  133. },
  134. handleSubmit(e,index) {
  135. e.preventDefault();
  136. this.props.form.validateFields((err, values) => {
  137. if((this.state.edit)==undefined||!this.state.edit||(this.state.edit)=='<p><br></p>'){
  138. message.warning('请填写政策正文');
  139. return false;
  140. }
  141. //url转化
  142. let thePictureUrl = [];
  143. if (this.state.pictureUrl.length) {
  144. let picArr = [];
  145. this.state.pictureUrl.map(function (item) {
  146. if ( item.response && item.response.data && item.response.data.length ){
  147. picArr.push(item.response.data);
  148. }
  149. });
  150. thePictureUrl = picArr.join(",");
  151. };
  152. if (!err) {
  153. let publishPages =(values.publishPages).join(',')
  154. this.setState({
  155. loading: true
  156. });
  157. $.ajax({
  158. method: "post",
  159. dataType: "json",
  160. async:true,
  161. url: this.props.data.id ? globalConfig.context + '/api/admin/news/updateNews' : globalConfig.context + '/api/admin/news/apply',
  162. data: {
  163. id: this.props.data.id,
  164. type:0,
  165. title: values.title,
  166. author: values.author,
  167. titleImg: thePictureUrl,
  168. content:this.state.edit,
  169. hot:values.hot,
  170. source:values.source,
  171. sourceUrl:values.sourceUrl,
  172. auditStatus:index,
  173. summary: values.summary,
  174. provinceId: (values.ProvinceCity)[0],
  175. publishPages:publishPages
  176. }
  177. }).done(function (data) {
  178. this.setState({
  179. loading: false
  180. });
  181. if (!data.error.length) {
  182. message.success('操作成功!');
  183. this.setState({
  184. visible: false
  185. });
  186. this.props.handOk();
  187. } else {
  188. message.warning(data.error[0].message);
  189. }
  190. }.bind(this));
  191. }
  192. });
  193. },
  194. cancelFun(){
  195. this.props.closeDesc();
  196. },
  197. componentWillMount() {
  198. if (this.props.data.id) {
  199. this.loadData(this.props.data.id);
  200. } else {
  201. this.state.visible=true;
  202. this.state.data = {};
  203. this.state.edit='<p><br></p>';
  204. this.state.pictureUrl = [];
  205. this.setState({
  206. publishPages:['web_index','app_policy_index']
  207. })
  208. };
  209. },
  210. componentWillReceiveProps(nextProps) {
  211. if (!this.props.visible && nextProps.visible) {
  212. this.state.textFileList = [];
  213. this.state.videoFileList = [];
  214. if (nextProps.data.id) {
  215. this.loadData(nextProps.data.id);
  216. } else {
  217. this.state.visible=true;
  218. this.state.data = {};
  219. this.state.edit='<p><br></p>';
  220. this.state.pictureUrl = [];
  221. this.state.theData={};
  222. this.setState({
  223. publishPages:['web_index','app_policy_index']
  224. })
  225. };
  226. this.props.form.resetFields();
  227. };
  228. },
  229. render() {
  230. const theData = this.state.data || {};
  231. const { getFieldDecorator } = this.props.form;
  232. const FormItem = Form.Item
  233. const formItemLayout = {
  234. labelCol: { span: 6 },
  235. wrapperCol: { span: 12 },
  236. };
  237. return (
  238. <div className='login'>
  239. <Form layout="horizontal" onSubmit={(e)=>{this.handleSubmit(e,0)}} id="demand-form">
  240. <Spin spinning={this.state.loading}>
  241. <div className="clearfix">
  242. <FormItem className="half-item" {...formItemLayout} label="标题">
  243. {getFieldDecorator('title', {
  244. rules: [ { required: true, message: '此项为必填项!' } ],
  245. initialValue: theData.title
  246. })(<Input placeholder="请输入您的新闻标题" />)}
  247. </FormItem>
  248. </div>
  249. <div className="clearfix">
  250. <FormItem className="half-item" {...formItemLayout} label="热门">
  251. {getFieldDecorator('hot', {
  252. rules: [ { required: true, message: '此项为必填项!' } ],
  253. initialValue: theData.hot
  254. })(
  255. <Radio.Group>
  256. <Radio value={0}>否</Radio>
  257. <Radio value={1}>是</Radio>
  258. </Radio.Group>
  259. )}
  260. </FormItem>
  261. <FormItem className="half-item" {...formItemLayout} label="新闻来源">
  262. {getFieldDecorator('source', {
  263. rules: [ { required: true, message: '此项为必填项!' } ],
  264. initialValue: theData.source
  265. })(<Input placeholder="请输入新闻来源" />)}
  266. </FormItem>
  267. <FormItem className="half-item" {...formItemLayout} label="来源链接">
  268. {getFieldDecorator('sourceUrl', {
  269. initialValue: theData.sourceUrl
  270. })(<Input placeholder="请输入新闻来源链接" />)}
  271. </FormItem>
  272. <FormItem className="half-item"
  273. {...formItemLayout}
  274. label="省-市-区"
  275. >
  276. {getFieldDecorator('ProvinceCity', {
  277. rules: [ { required: true, message: '此项为必填项!' } ],
  278. initialValue: this.state.Province
  279. })(
  280. <Cascader options={provinceSelect()} placeholder="选择城市" />
  281. )}
  282. </FormItem>
  283. </div>
  284. <div className="clearfix">
  285. <FormItem labelCol={{ span: 3 }} wrapperCol={{ span: 18 }} label="新闻图片">
  286. <PicturesWall
  287. fileList={this.getPictureUrl}
  288. pictureUrl={this.state.pictureUrl}
  289. visible={this.props.visible}
  290. />
  291. </FormItem>
  292. </div>
  293. <div className="clearfix">
  294. <FormItem labelCol={{ span: 3 }} wrapperCol={{ span: 18 }} label="新闻简介">
  295. {getFieldDecorator('summary', {
  296. rules: [ { required: true, message: '此项为必填项!' } ],
  297. initialValue: theData.summary
  298. })(<Input type="textarea" rows={4} placeholder="输入新闻简介" />)}
  299. </FormItem>
  300. </div>
  301. <div className="clearfix">
  302. <FormItem labelCol={{ span: 3 }} wrapperCol={{ span: 18 }} label={<span><i style={{color:"red",fontSize:14}}> * </i>新闻正文</span>}>
  303. <Editors textContent={this.state.edit}
  304. uploadUrl={'/api/user/demand/uploadPicture'}
  305. uploadSign={'demand_picture'}
  306. handleRichText={(value) => { this.state.edit = value; }}
  307. visible={this.state.visible} />
  308. </FormItem>
  309. </div>
  310. <div className="clearfix">
  311. <FormItem labelCol={{ span: 3 }} wrapperCol={{ span: 18 }} label="是否发布">
  312. <span>{theData.releaseStatus?'已发布':'未发布'}</span>
  313. </FormItem>
  314. </div>
  315. <div className="clearfix">
  316. <FormItem className="full-item"
  317. labelCol={{ span: 3 }}
  318. wrapperCol={{ span: 18 }} label="发布位置">
  319. {getFieldDecorator('publishPages', {
  320. rules: [ { required: false } ],
  321. initialValue: this.state.publishPages
  322. })(
  323. <Checkbox.Group>
  324. <Row>
  325. <Col span={6}><Checkbox value="web_index" disabled>网站新闻首页</Checkbox></Col>
  326. <Col span={6}><Checkbox value="web_tech_service_index">网站科技服务首页</Checkbox></Col>
  327. <Col span={6}><Checkbox value="app_policy_index" disabled>app政策首页</Checkbox></Col>
  328. <Col span={6}><Checkbox value="app_tech_service_index">APP科技服务首页</Checkbox></Col>
  329. </Row>
  330. </Checkbox.Group>
  331. )}
  332. </FormItem>
  333. </div>
  334. <div className="clearfix">
  335. <FormItem wrapperCol={{ span: 12, offset: 3 }}>
  336. <Button className="set-submit" type="primary" htmlType="submit">
  337. 保存草稿
  338. </Button>
  339. <Button
  340. className="set-submit"
  341. type="ghost"
  342. onClick={(e) => {
  343. this.handleSubmit(e,2)
  344. }}
  345. >
  346. 发布新闻
  347. </Button>
  348. <Button className="set-submit" type="ghost" onClick={this.cancelFun}>
  349. 取消
  350. </Button>
  351. </FormItem>
  352. </div>
  353. </Spin>
  354. </Form>
  355. </div>
  356. )
  357. }
  358. }));
  359. export default NewDetailForm;