proForm.jsx 12 KB

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