bannerForm.jsx 10 KB

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