policyForm.jsx 13 KB

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