bannerForm.jsx 9.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265
  1. import React from 'react';
  2. import {
  3. Icon,
  4. Modal,
  5. message,
  6. Spin,
  7. Upload,
  8. Input,
  9. Button,
  10. Radio,
  11. Form
  12. } from 'antd';
  13. import { splitUrl} from '@/tools.js';
  14. const PicturesWall = React.createClass({
  15. getInitialState() {
  16. return {
  17. previewVisible: false,
  18. previewImage: '',
  19. fileList: [],
  20. tags: []
  21. };
  22. },
  23. handleCancel() {
  24. this.setState({ previewVisible: false });
  25. },
  26. handlePreview(file) {
  27. this.setState({
  28. previewImage: file.url || file.thumbUrl,
  29. previewVisible: true
  30. });
  31. },
  32. handleChange(info) {
  33. let fileList = info.fileList;
  34. this.setState({ fileList });
  35. this.props.fileList(fileList);
  36. },
  37. componentWillReceiveProps(nextProps) {
  38. this.state.fileList = nextProps.pictureUrl;
  39. },
  40. render() {
  41. const { previewVisible, previewImage, fileList } = this.state;
  42. const uploadButton = (
  43. <div>
  44. <Icon type="plus" />
  45. <div className="ant-upload-text">点击上传</div>
  46. </div>
  47. );
  48. return (
  49. <div className="clearfix">
  50. <Upload
  51. action={globalConfig.context + '/open/api/admin/banners/uploadPicture'}
  52. data={{ sign: 'banners'}}
  53. listType="picture-card"
  54. fileList={fileList}
  55. onPreview={this.handlePreview}
  56. onChange={this.handleChange}
  57. >
  58. {fileList.length >= 1 ? null : uploadButton}
  59. </Upload>
  60. <Modal maskClosable={false} visible={previewVisible} footer={null} onCancel={this.handleCancel}>
  61. <img alt="example" style={{ width: '100%' }} src={previewImage} />
  62. </Modal>
  63. </div>
  64. );
  65. }
  66. });
  67. class BannerForm extends React.Component {
  68. constructor(props) {
  69. super(props);
  70. this.state = {
  71. loading: false,
  72. imgUrl: [],
  73. visible:false
  74. };
  75. }
  76. cancelFun(){
  77. this.props.closeDesc();
  78. }
  79. loadData(id) {
  80. this.setState({
  81. loading: true
  82. });
  83. $.ajax({
  84. method: "get",
  85. dataType: "json",
  86. crossDomain: false,
  87. url: globalConfig.context + '/open/api/admin/banners/details' ,
  88. data: {
  89. id: id
  90. },
  91. success: function (data) {
  92. let thisData = data.data;
  93. if (!thisData) {
  94. if (data.error && data.error.length) {
  95. message.warning(data.error[0].message);
  96. };
  97. thisData = {};
  98. };
  99. this.setState({
  100. id: thisData.id, //品类ID
  101. data:thisData,
  102. imgUrl: thisData.imgUrl ? splitUrl(thisData.imgUrl, ',', globalConfig.avatarHost + '/upload') : [],
  103. });
  104. }.bind(this),
  105. }).always(function () {
  106. this.setState({
  107. loading: false
  108. });
  109. }.bind(this));
  110. }
  111. handleSubmit(e){
  112. e.preventDefault();
  113. this.props.form.validateFields((err, values) => {
  114. //url转化
  115. let thePictureUrl = [];
  116. console.log(this.state.imgUrl)
  117. if (this.state.imgUrl.length) {
  118. let picArr = [];
  119. this.state.imgUrl.map(function (item) {
  120. if ( item.response && item.response.data && item.response.data.length ){
  121. picArr.push(item.response.data);
  122. }
  123. });
  124. thePictureUrl = picArr.join(",");
  125. }else{
  126. message.warning('请上传图片!');
  127. return false;
  128. };
  129. if (!err) {
  130. this.setState({
  131. loading: true
  132. });
  133. $.ajax({
  134. method: "post",
  135. dataType: "json",
  136. async:true,
  137. url: this.props.data.id ? globalConfig.context + '/open/api/admin/banners/update' : globalConfig.context + '/open/api/admin/banners/save',
  138. data: {
  139. id:this.props.data.id,
  140. text:values.text,
  141. forwardUrl:values.forwardUrl,
  142. apiUrl:values.apiUrl,
  143. imgUrl:thePictureUrl,
  144. deleteSign:false,
  145. client:values.client
  146. }
  147. }).done(function (data) {
  148. this.setState({
  149. loading: false
  150. });
  151. if (!data.error.length) {
  152. message.success('操作成功!');
  153. this.setState({
  154. visible: false
  155. });
  156. this.props.handOk();
  157. } else {
  158. message.warning(data.error[0].message);
  159. }
  160. }.bind(this));
  161. }
  162. })
  163. }
  164. componentWillMount() {
  165. if (this.props.data&&this.props.data.id) {
  166. this.loadData(this.props.data.id);
  167. } else {
  168. this.state.data = {};
  169. this.state.imgUrl = [];
  170. };
  171. }
  172. componentWillReceiveProps(nextProps) {
  173. if (!this.props.visible && nextProps.visible) {
  174. this.state.textFileList = [];
  175. this.state.videoFileList = [];
  176. if (nextProps.data.id) {
  177. this.loadData(nextProps.data.id);
  178. } else {
  179. this.state.data = {};
  180. this.state.imgUrl = [];
  181. };
  182. this.props.form.resetFields();
  183. };
  184. }
  185. render() {
  186. const { getFieldDecorator } = this.props.form;
  187. const FormItem = Form.Item;
  188. const formItemLayout = {
  189. labelCol: { span: 6 },
  190. wrapperCol: { span: 12 },
  191. };
  192. let theData = this.state.data||{};
  193. return (
  194. <div className="patent-desc">
  195. <Form layout="horizontal" onSubmit={this.handleSubmit.bind(this)} id="demand-form">
  196. <Spin spinning={this.state.loading}>
  197. <div className="clearfix">
  198. <FormItem {...formItemLayout} label="轮播图描述">
  199. {getFieldDecorator('text', {
  200. rules: [ { required: true, message: '此项为必填项!' } ],
  201. initialValue: theData.text
  202. })(<Input placeholder="请输入轮播图名称"/>)}
  203. </FormItem>
  204. </div>
  205. <div className="clearfix">
  206. <FormItem {...formItemLayout} label="跳转地址">
  207. {getFieldDecorator('forwardUrl', {
  208. rules: [ { required: true, message: '此项为必填项!' } ],
  209. initialValue: theData.forwardUrl
  210. })(<Input placeholder="请输入跳转地址"/>)}
  211. </FormItem>
  212. </div>
  213. <div className="clearfix">
  214. <FormItem {...formItemLayout} label="api">
  215. {getFieldDecorator('apiUrl', {
  216. rules: [ { required: true, message: '此项为必填项!' } ],
  217. initialValue: theData.apiUrl
  218. })(<Input placeholder="请输入api"/>)}
  219. </FormItem>
  220. </div>
  221. <div className="clearfix">
  222. <FormItem {...formItemLayout} label="位置">
  223. {getFieldDecorator('client', {
  224. rules: [ { required: true, message: '此项为必填项!' } ],
  225. initialValue: theData.client
  226. })(
  227. <Radio.Group>
  228. <Radio value={0}>网站</Radio>
  229. <Radio value={1}>App</Radio>
  230. </Radio.Group>
  231. )
  232. }
  233. </FormItem>
  234. </div>
  235. <div className="clearfix">
  236. <FormItem labelCol={{ span: 6 }} wrapperCol={{ span: 18 }} label={<span><strong style={{color:"#f00"}}> * </strong>轮播图</span>}>
  237. <PicturesWall
  238. fileList={(e)=>{this.setState({imgUrl:e})}}
  239. pictureUrl={this.state.imgUrl}
  240. visible={this.props.visible}
  241. />
  242. </FormItem>
  243. </div>
  244. <div className="clearfix">
  245. <FormItem wrapperCol={{ span: 12, offset: 6 }}>
  246. <Button className="set-submit" type="primary" htmlType="submit">
  247. 保存
  248. </Button>
  249. <Button className="set-submit" type="ghost" onClick={this.cancelFun.bind(this)}>
  250. 取消
  251. </Button>
  252. </FormItem>
  253. </div>
  254. </Spin>
  255. </Form>
  256. </div>
  257. );
  258. }
  259. }
  260. export default Form.create()(BannerForm);