bannerManage.jsx 9.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256
  1. import React from 'react';
  2. import { Icon, Button, Spin, message, Table, Input, Modal, DatePicker, Upload, Select } from 'antd';
  3. import { beforeUpload, getBase64 } from '../../../tools';
  4. import moment from 'moment';
  5. import ajax from 'jquery/src/ajax/xhr.js';
  6. import $ from 'jquery/src/ajax';
  7. const Avatar = React.createClass({
  8. getInitialState() {
  9. return {
  10. imageUrl: ''
  11. }
  12. },
  13. handleChange(info) {
  14. if (info.file.status === 'done') {
  15. // Get this url from response in real world.
  16. getBase64(info.file.originFileObj, imageUrl => this.setState({ imageUrl }));
  17. this.props.urlData(info.file.response.data);
  18. }
  19. },
  20. componentWillReceiveProps(nextProps) {
  21. if (this.props.uid != nextProps.uid) {
  22. this.state.imageUrl = null;
  23. };
  24. },
  25. render() {
  26. const imageUrl = this.state.imageUrl;
  27. return (
  28. <Upload
  29. className="avatar-uploader"
  30. name={this.props.name}
  31. showUploadList={false}
  32. action={globalConfig.context + "/api/admin/lecture/upload"}
  33. data={{ 'uid': this.props.uid, 'sign': 'lecture_picture' }}
  34. beforeUpload={beforeUpload}
  35. onChange={this.handleChange} >
  36. {
  37. (imageUrl || this.props.imageUrl) ?
  38. <img src={imageUrl || this.props.imageUrl} role="presentation" id={this.props.name} /> :
  39. <Icon type="plus" className="avatar-uploader-trigger" />
  40. }
  41. </Upload>
  42. );
  43. }
  44. });
  45. const Lecture = React.createClass({
  46. loadData(pageNo) {
  47. this.setState({
  48. loading: true
  49. });
  50. $.ajax({
  51. method: "get",
  52. dataType: "json",
  53. crossDomain: false,
  54. url: globalConfig.context + '/api/admin/banners/list',
  55. data: {
  56. pageNo: pageNo || 1,
  57. pageSize: this.state.pagination.pageSize,
  58. key: this.state.searcchKey
  59. },
  60. success: function (data) {
  61. let theArr = [];
  62. if (!data.data) {
  63. if (data.error && data.error.length) {
  64. message.warning(data.error[0].message);
  65. };
  66. } else {
  67. for (let i = 0; i < data.data.length; i++) {
  68. let thisdata = data.data[i];
  69. theArr.push({
  70. key: i,
  71. id: thisdata.id, //主键
  72. sign: thisdata.sign, // 位置标示
  73. text: thisdata.text, //广告图描述
  74. imgurl: thisdata.imgurl, //广告图url
  75. url: thisdata.url, //跳转链接
  76. width: thisdata.width, //宽度
  77. height: thisdata.height, //高度
  78. startDate: thisdata.startDate, //广告图开始时间
  79. endDate: thisdata.endDate //广告图结束时间
  80. });
  81. };
  82. this.state.pagination.current = data.data.pageNo;
  83. this.state.pagination.total = data.data.totalCount;
  84. };
  85. this.setState({
  86. tableData: theArr,
  87. pagination: this.state.pagination
  88. });
  89. }.bind(this),
  90. }).always(function () {
  91. this.setState({
  92. loading: false
  93. });
  94. }.bind(this));
  95. },
  96. loadKeys() {
  97. this.setState({
  98. loading: true
  99. });
  100. $.ajax({
  101. method: "get",
  102. dataType: "json",
  103. url: globalConfig.context + '/api/admin/banners/keys',
  104. success: function (data) {
  105. let theArr = [];
  106. if (!data.data) {
  107. if (data.error && data.error.length) {
  108. message.warning(data.error[0].message);
  109. };
  110. } else {
  111. for (let item in data.data) {
  112. let thisdata = data.data[item];
  113. theArr.push(
  114. <Select.Option value={item} key={item}>{thisdata}</Select.Option>
  115. );
  116. };
  117. };
  118. this.setState({
  119. keysOption: theArr,
  120. keysObj: data.data
  121. });
  122. }.bind(this),
  123. }).always(function () {
  124. this.setState({
  125. loading: false
  126. });
  127. }.bind(this));
  128. },
  129. getInitialState() {
  130. return {
  131. loading: false,
  132. keysObj: {},
  133. pagination: {
  134. defaultCurrent: 1,
  135. defaultPageSize: 10,
  136. showQuickJumper: true,
  137. pageSize: 10,
  138. onChange: function (page) {
  139. this.loadData(page);
  140. }.bind(this),
  141. showTotal: function (total) {
  142. return '共' + total + '条数据';
  143. }
  144. },
  145. columns: [
  146. {
  147. title: '位置',
  148. dataIndex: 'sign',
  149. key: 'sign',
  150. render: text => { return keysObj[text] }
  151. }, {
  152. title: '广告图描述',
  153. dataIndex: 'text',
  154. key: 'text',
  155. }, {
  156. title: '广告图url',
  157. dataIndex: 'imgurl',
  158. key: 'imgurl',
  159. }, {
  160. title: '跳转链接',
  161. dataIndex: 'url',
  162. key: 'url',
  163. }, {
  164. title: '宽度',
  165. dataIndex: 'width',
  166. key: 'width',
  167. }, {
  168. title: '高度',
  169. dataIndex: 'height',
  170. key: 'height',
  171. }, {
  172. title: '开始时间',
  173. dataIndex: 'startDate',
  174. key: 'startDate',
  175. }, {
  176. title: '结束时间',
  177. dataIndex: 'endDate',
  178. key: 'endDate',
  179. }
  180. ],
  181. tableData: []
  182. };
  183. },
  184. componentWillMount() {
  185. this.loadKeys();
  186. this.loadData();
  187. },
  188. submit() {
  189. this.setState({
  190. loading: true
  191. });
  192. $.ajax({
  193. method: "post",
  194. dataType: "json",
  195. crossDomain: false,
  196. url: globalConfig.context + (this.state.addModal.id ? '/api/admin/lecture/update' : '/api/admin/lecture/add'),
  197. data: {
  198. 'id': this.state.addModal.id,
  199. "uid": this.state.addModal.uid,
  200. "name": this.state.addModal.name,
  201. "summary": this.state.addModal.summary,
  202. "lectureUrl": this.state.addModal.lectureUrl,
  203. "lectureTimeFormattedDate": this.state.addModal.lectureTimeFormattedDate,
  204. "endTimeFormattedDate": this.state.addModal.endTimeFormattedDate,
  205. "hot": this.state.addModal.showBig ? 1 : 0,
  206. "dynamic": this.state.addModal.showStar ? 1 : 0
  207. },
  208. success: function (data) {
  209. if (data.error && data.error.length) {
  210. message.warning(data.error[0].message);
  211. } else {
  212. message.success('保存成功!');
  213. this.setState({ addVisible: false });
  214. this.loadData();
  215. };
  216. }.bind(this),
  217. }).always(function () {
  218. this.setState({
  219. loading: false
  220. });
  221. }.bind(this));
  222. },
  223. reset() {
  224. this.state.searchKey = undefined;
  225. this.loadData();
  226. },
  227. render() {
  228. return (
  229. <div className="admin-content" >
  230. <div className="admin-content-title">广告图管理</div>
  231. <div className="admin-content-warp">
  232. <div className="admin-content-header">广告图列表</div>
  233. <div className="admin-content-search">
  234. <Select placeholder="选择广告图位置"
  235. style={{ width: 200 }}
  236. value={this.state.searchKey}
  237. onChange={(e) => { this.setState({ searchKey: e }) }}>
  238. {this.state.keysOption}
  239. </Select>
  240. <Button type="primary" onClick={this.loadData}>搜索</Button>
  241. <Button onClick={this.reset}>重置</Button>
  242. </div>
  243. <Spin spinning={this.state.loading}>
  244. <Table columns={this.state.columns}
  245. dataSource={this.state.tableData}
  246. pagination={this.state.pagination} />
  247. </Spin>
  248. </div>
  249. </div>
  250. );
  251. }
  252. });
  253. export default Lecture;