activityOperation.jsx 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308
  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. if (data.error && data.error.length) {
  114. message.warning(data.error[0].message);
  115. } else {
  116. message.success('添加成功')
  117. _this.props.onCancel();
  118. }
  119. }.bind(this)
  120. }).always(
  121. function() {
  122. this.setState({
  123. loading: false
  124. });
  125. }.bind(this)
  126. );
  127. }
  128. });
  129. }
  130. getOrgCodeUrl(e) {
  131. this.setState({ pictureUrl: e });
  132. this.props.form.setFieldsValue({
  133. pictureUrl: e
  134. })
  135. }
  136. getSelect(){
  137. $.ajax({
  138. method: "get",
  139. dataType: "json",
  140. crossDomain: false,
  141. url: globalConfig.context + "/api/admin/activity/select",
  142. data: {
  143. id:this.props.id,
  144. },
  145. success: function(data) {
  146. if (data.error.length) {
  147. message.warning(data.error[0].message);
  148. } else {
  149. this.props.form.setFieldsValue({
  150. title:data.data.title,
  151. publisher:data.data.publisher,
  152. sort:data.data.sort,
  153. releaseStatus:data.data.releaseStatus,
  154. content:data.data.content,
  155. pictureUrl:data.data.pictureUrl
  156. ? splitUrl(
  157. data.data.pictureUrl,
  158. ",",
  159. globalConfig.avatarUploadHost
  160. )
  161. : []
  162. });
  163. this.setState({
  164. pictureUrl:data.data.pictureUrl
  165. ? splitUrl(
  166. data.data.pictureUrl,
  167. ",",
  168. globalConfig.avatarUploadHost
  169. )
  170. : []
  171. })
  172. }
  173. }.bind(this)
  174. }).always(
  175. function() {
  176. this.setState({
  177. loading: false
  178. });
  179. }.bind(this)
  180. );
  181. }
  182. componentDidMount() {
  183. if(this.props.id){
  184. this.getSelect();
  185. }
  186. }
  187. render() {
  188. const { getFieldDecorator } = this.props.form;
  189. return (
  190. <Modal
  191. className="customeDetails"
  192. title={"新增活动"}
  193. width="700px"
  194. onCancel={this.props.onCancel}
  195. visible={this.props.visible}
  196. footer={false}
  197. >
  198. <Form
  199. layout="horizontal"
  200. onSubmit={this.submit}
  201. id="demand-form"
  202. >
  203. <Spin spinning={this.state.loading}>
  204. <FormItem
  205. labelCol={{ span: 8 }}
  206. wrapperCol={{ span: 8 }}
  207. label="活动标题"
  208. >
  209. {getFieldDecorator('title', {
  210. rules: [{ required: true, message: '请输入活动标题!' }],
  211. })(
  212. <Input placeholder="请输入活动标题" />
  213. )}
  214. </FormItem>
  215. <FormItem
  216. labelCol={{ span: 8 }}
  217. wrapperCol={{ span: 8 }}
  218. label="发布人"
  219. >
  220. {getFieldDecorator('publisher', {
  221. rules: [{ required: true, message: '请输入发布人名称!' }],
  222. })(
  223. <Input placeholder="请输入发布人名称" />
  224. )}
  225. </FormItem>
  226. <FormItem
  227. labelCol={{ span: 8 }}
  228. wrapperCol={{ span: 8 }}
  229. label="排序"
  230. >
  231. {getFieldDecorator('sort', {
  232. rules: [{ required: true, message: '请输入排序!' }],
  233. })(
  234. <Input placeholder="请输入排序" type={'number'}/>
  235. )}
  236. </FormItem>
  237. <FormItem
  238. labelCol={{ span: 8 }}
  239. wrapperCol={{ span: 8 }}
  240. label="是否发布"
  241. >
  242. {getFieldDecorator('releaseStatus',{
  243. rules: [{ required: true, message: '请选择是否显示!' }],
  244. })(
  245. <RadioGroup>
  246. <Radio value={0}>否</Radio>
  247. <Radio value={1}>是</Radio>
  248. </RadioGroup>
  249. )}
  250. </FormItem>
  251. <FormItem
  252. labelCol={{ span: 8 }}
  253. wrapperCol={{ span: 8 }}
  254. label="活动简介"
  255. >
  256. {getFieldDecorator('content', {
  257. rules: [{ required: true, message: '请输入活动简介!' }],
  258. })(
  259. <TextArea placeholder="请输入活动简介" type={'number'}/>
  260. )}
  261. </FormItem>
  262. <FormItem
  263. labelCol={{ span: 8 }}
  264. wrapperCol={{ span: 8 }}
  265. label="活动大图"
  266. extra="图片尺寸:1240X440"
  267. >
  268. {getFieldDecorator('pictureUrl', {
  269. rules: [{ required: true, message: '请选择活动大图!' }],
  270. })(
  271. <PicturesWall
  272. fileList={this.getOrgCodeUrl}
  273. pictureUrl={this.state.pictureUrl}
  274. />
  275. )}
  276. </FormItem>
  277. <FormItem
  278. style={{
  279. display: 'flex',
  280. justifyContent: 'center',
  281. }}
  282. >
  283. <Button
  284. loading={this.state.loading}
  285. type="primary"
  286. htmlType="submit"
  287. >
  288. 添加
  289. </Button>
  290. </FormItem>
  291. </Spin>
  292. </Form>
  293. </Modal>
  294. );
  295. }
  296. }
  297. const ActivityOperationForm = Form.create()(ActivityOperation);
  298. export default ActivityOperationForm;