policyForm.jsx 12 KB

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