activityOperation.jsx 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311
  1. import React, { Component } from 'react';
  2. import { Form, Input, Modal, Spin, Radio, Button, Icon, Upload, message } from "antd";
  3. import TextArea from "antd/es/input/TextArea";
  4. import {
  5. splitUrl,
  6. beforeUploadFile,
  7. } from "@/tools.js";
  8. import $ from "jquery/src/ajax";
  9. const FormItem = Form.Item;
  10. const RadioGroup = Radio.Group;
  11. // 上传文件
  12. const PicturesWall = React.createClass({
  13. getInitialState() {
  14. return {
  15. previewVisible: false,
  16. previewImage: "",
  17. fileList: this.props.pictureUrl
  18. };
  19. },
  20. getDefaultProps() {
  21. return {
  22. changeClick: this.modifyChange
  23. };
  24. },
  25. handleCancel() {
  26. this.setState({ previewVisible: false });
  27. },
  28. handlePreview(file) {
  29. this.setState({
  30. previewImage: file.url || file.thumbUrl,
  31. previewVisible: true
  32. });
  33. },
  34. handleChange(info) {
  35. let fileList = info.fileList;
  36. this.setState({ fileList });
  37. this.props.fileList(fileList);
  38. },
  39. componentWillReceiveProps(nextProps) {
  40. this.state.fileList = nextProps.pictureUrl;
  41. },
  42. render() {
  43. const { previewVisible, previewImage, fileList } = this.state;
  44. // 点击上传
  45. const uploadButton = (
  46. <div>
  47. <Icon type="plus" />
  48. <div className="ant-upload-text">点击上传</div>
  49. </div>
  50. );
  51. return (
  52. //上传组件
  53. <div style={{ display: "inline-block" }}>
  54. <Upload
  55. beforeUpload={beforeUploadFile}
  56. action={globalConfig.context + "/api/admin/activity/upload"}
  57. listType="picture-card"
  58. fileList={fileList}
  59. onPreview={this.handlePreview}
  60. onChange={this.handleChange}
  61. >
  62. {fileList && fileList.length >= 1 ? null : uploadButton}
  63. </Upload>
  64. <Modal
  65. maskClosable={false}
  66. visible={previewVisible}
  67. footer={null}
  68. onCancel={e => {
  69. this.setState({ previewVisible: false });
  70. }}
  71. >
  72. <img alt="" style={{ width: "100%" }} src={previewImage} />
  73. </Modal>
  74. </div>
  75. );
  76. }
  77. });
  78. class ActivityOperation extends Component {
  79. constructor(props) {
  80. super(props);
  81. this.state = {
  82. loading: false,
  83. pictureUrl: [],
  84. details: {},
  85. }
  86. this.submit = this.submit.bind(this);
  87. this.getOrgCodeUrl = this.getOrgCodeUrl.bind(this);
  88. }
  89. submit(e) {
  90. e.preventDefault();
  91. let _this = this;
  92. this.props.form.validateFields((err, values) => {
  93. if (values.title.length > 6) {
  94. message.warning('标题最多六个字');
  95. return;
  96. }
  97. if (!err) {
  98. this.setState({
  99. loading: true
  100. })
  101. values.pictureUrl = values.pictureUrl ? values.pictureUrl[0].response.data : undefined;
  102. let url = this.props.id ? "/api/admin/activity/update" : "/api/admin/activity/add";
  103. if (this.props.id) {
  104. values.id = this.props.id;
  105. }
  106. $.ajax({
  107. method: "post",
  108. dataType: "json",
  109. crossDomain: false,
  110. url: globalConfig.context + url,
  111. data: values,
  112. success: function (data) {
  113. this.setState({
  114. loading: false
  115. });
  116. if (data.error && data.error.length) {
  117. message.warning(data.error[0].message);
  118. } else {
  119. message.success('添加成功')
  120. _this.props.onCancel();
  121. }
  122. }.bind(this)
  123. }).always(
  124. function () {
  125. this.setState({
  126. loading: false
  127. });
  128. }.bind(this)
  129. );
  130. }
  131. });
  132. }
  133. getOrgCodeUrl(e) {
  134. this.setState({ pictureUrl: e });
  135. this.props.form.setFieldsValue({
  136. pictureUrl: e
  137. })
  138. }
  139. getSelect() {
  140. $.ajax({
  141. method: "get",
  142. dataType: "json",
  143. crossDomain: false,
  144. url: globalConfig.context + "/api/admin/activity/select",
  145. data: {
  146. id: this.props.id,
  147. },
  148. success: function (data) {
  149. if (data.error.length) {
  150. message.warning(data.error[0].message);
  151. } else {
  152. this.props.form.setFieldsValue({
  153. title: data.data.title,
  154. publisher: data.data.publisher,
  155. sort: data.data.sort,
  156. releaseStatus: data.data.releaseStatus,
  157. content: data.data.content,
  158. pictureUrl: data.data.pictureUrl
  159. ? splitUrl(
  160. data.data.pictureUrl,
  161. ",",
  162. globalConfig.avatarUploadHost
  163. )
  164. : []
  165. });
  166. this.setState({
  167. pictureUrl: data.data.pictureUrl
  168. ? splitUrl(
  169. data.data.pictureUrl,
  170. ",",
  171. globalConfig.avatarUploadHost
  172. )
  173. : []
  174. })
  175. }
  176. }.bind(this)
  177. }).always(
  178. function () {
  179. this.setState({
  180. loading: false
  181. });
  182. }.bind(this)
  183. );
  184. }
  185. componentDidMount() {
  186. if (this.props.id) {
  187. this.getSelect();
  188. }
  189. }
  190. render() {
  191. const { getFieldDecorator } = this.props.form;
  192. return (
  193. <Modal
  194. className="customeDetails"
  195. title={"新增活动"}
  196. width="700px"
  197. onCancel={this.props.onCancel}
  198. visible={this.props.visible}
  199. footer={false}
  200. >
  201. <Form
  202. layout="horizontal"
  203. onSubmit={this.submit}
  204. id="demand-form"
  205. >
  206. <Spin spinning={this.state.loading}>
  207. <FormItem
  208. labelCol={{ span: 8 }}
  209. wrapperCol={{ span: 8 }}
  210. label="活动标题"
  211. >
  212. {getFieldDecorator('title', {
  213. rules: [{ required: true, message: '请输入活动标题!' }],
  214. })(
  215. <Input placeholder="请输入活动标题" />
  216. )}
  217. </FormItem>
  218. <FormItem
  219. labelCol={{ span: 8 }}
  220. wrapperCol={{ span: 8 }}
  221. label="发布人"
  222. >
  223. {getFieldDecorator('publisher', {
  224. rules: [{ required: true, message: '请输入发布人名称!' }],
  225. })(
  226. <Input placeholder="请输入发布人名称" />
  227. )}
  228. </FormItem>
  229. <FormItem
  230. labelCol={{ span: 8 }}
  231. wrapperCol={{ span: 8 }}
  232. label="排序"
  233. >
  234. {getFieldDecorator('sort', {
  235. rules: [{ required: true, message: '请输入排序!' }],
  236. })(
  237. <Input placeholder="请输入排序" type={'number'} />
  238. )}
  239. </FormItem>
  240. <FormItem
  241. labelCol={{ span: 8 }}
  242. wrapperCol={{ span: 8 }}
  243. label="是否发布"
  244. >
  245. {getFieldDecorator('releaseStatus', {
  246. rules: [{ required: true, message: '请选择是否显示!' }],
  247. })(
  248. <RadioGroup>
  249. <Radio value={0}>否</Radio>
  250. <Radio value={1}>是</Radio>
  251. </RadioGroup>
  252. )}
  253. </FormItem>
  254. <FormItem
  255. labelCol={{ span: 8 }}
  256. wrapperCol={{ span: 8 }}
  257. label="活动简介"
  258. >
  259. {getFieldDecorator('content', {
  260. rules: [{ required: true, message: '请输入活动简介!' }],
  261. })(
  262. <TextArea placeholder="请输入活动简介" type={'number'} />
  263. )}
  264. </FormItem>
  265. <FormItem
  266. labelCol={{ span: 8 }}
  267. wrapperCol={{ span: 8 }}
  268. label="活动大图"
  269. extra="图片尺寸:1240X440"
  270. >
  271. {getFieldDecorator('pictureUrl', {
  272. rules: [{ required: true, message: '请选择活动大图!' }],
  273. })(
  274. <PicturesWall
  275. fileList={this.getOrgCodeUrl}
  276. pictureUrl={this.state.pictureUrl}
  277. />
  278. )}
  279. </FormItem>
  280. <FormItem
  281. style={{
  282. display: 'flex',
  283. justifyContent: 'center',
  284. }}
  285. >
  286. <Button
  287. loading={this.state.loading}
  288. type="primary"
  289. htmlType="submit"
  290. >
  291. 添加
  292. </Button>
  293. </FormItem>
  294. </Spin>
  295. </Form>
  296. </Modal>
  297. );
  298. }
  299. }
  300. const ActivityOperationForm = Form.create()(ActivityOperation);
  301. export default ActivityOperationForm;