banner.jsx 7.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235
  1. import { Component } from 'react';
  2. import { Input, Select, Spin, Table, message, Button,Icon } from 'antd';
  3. import BannerFrom from '@/administration/banner/bannerDes.jsx';
  4. import { splitUrl} from '@/tools.js';
  5. class Banner extends Component {
  6. constructor(props) {
  7. super(props);
  8. this.state = {
  9. loading: false,
  10. dataSource: [],
  11. showDesc:false,
  12. selectedRowKey:[],
  13. selectedRowKeys:[],
  14. pagination: {
  15. defaultCurrent: 1,
  16. defaultPageSize: 10,
  17. showQuickJumper: true,
  18. pageSize: 10,
  19. onChange: function(page) {
  20. this.loadData(page);
  21. this.setState({
  22. selectedRowKeys: []
  23. });
  24. }.bind(this),
  25. showTotal: function(total) {
  26. return '共' + total + '条数据';
  27. }
  28. },
  29. columns: [
  30. {
  31. title: '轮播图描述',
  32. dataIndex: 'text',
  33. key: 'text'
  34. },
  35. {
  36. title: '跳转地址',
  37. dataIndex: 'forwardUrl',
  38. key: 'forwardUrl'
  39. },
  40. {
  41. title: '位置',
  42. dataIndex: 'client',
  43. key: 'client',
  44. render:(text=>{
  45. return text==1?'APP':'网站'
  46. })
  47. },
  48. {
  49. title: '轮播图API',
  50. dataIndex: 'apiUrl',
  51. key: 'apiUrl'
  52. },
  53. ]
  54. };
  55. }
  56. loadData(pageNo) {
  57. this.setState({
  58. page:pageNo,
  59. loading: true,
  60. selectedRowKeys:[],
  61. });
  62. $.ajax({
  63. method: "get",
  64. dataType: "json",
  65. crossDomain: false,
  66. url: globalConfig.context + "/open/api/admin/banners/list",
  67. data: {
  68. pageNo: pageNo || 1,
  69. pageSize: this.state.pagination.pageSize,
  70. apiUrl:this.state.apiSearch,
  71. client:this.state.positionSearch,
  72. },
  73. success: function (data) {
  74. let theArr = [];
  75. if (!data.data || !data.data.list) {
  76. if (data.error && data.error.length) {
  77. message.warning(data.error[0].message);
  78. };
  79. } else {
  80. for (let i = 0; i < data.data.list.length; i++) {
  81. let thisdata = data.data.list[i];
  82. theArr.push({
  83. key:i,
  84. id: thisdata.id, //品类ID
  85. text: thisdata.text, //品类序号
  86. apiUrl:thisdata.apiUrl,
  87. forwardUrl:thisdata.forwardUrl,
  88. client:thisdata.client,
  89. imgUrl: thisdata.imgUrl ? splitUrl(thisdata.imgUrl, ',', globalConfig.avatarHost + '/upload') : [],
  90. });
  91. };
  92. }
  93. this.state.pagination.current = data.data.pageNo;
  94. this.state.pagination.total = data.data.totalCount;
  95. if(data.data&&data.data.list&&!data.data.list.length){
  96. this.state.pagination.current=0
  97. this.state.pagination.total=0
  98. }
  99. this.setState({
  100. dataSource: theArr,
  101. pagination: this.state.pagination
  102. });
  103. }.bind(this),
  104. }).always(function () {
  105. this.setState({
  106. loading: false
  107. });
  108. }.bind(this));
  109. }
  110. search() {
  111. this.loadData();
  112. }
  113. reset() {
  114. this.state.apiSearch = '';
  115. this.state.positionSearch = undefined;
  116. this.loadData();
  117. }
  118. closeDesc(e, s) {
  119. this.state.showDesc = e;
  120. if (s) {
  121. this.loadData(this.state.page);
  122. };
  123. }
  124. addClick() {
  125. this.state.RowData = {};
  126. this.setState({
  127. showDesc: true
  128. });
  129. }
  130. tableRowClick(record, index) {
  131. this.state.RowData = record;
  132. this.setState({
  133. showDesc: true,
  134. });
  135. }
  136. delectRow() {
  137. this.setState({
  138. loading:true
  139. })
  140. let deletedIds =[];
  141. let rowItem = this.state.selectedRowKeys[0];
  142. let data = this.state.dataSource ||[];
  143. if (data.length) {
  144. deletedIds.push(data[rowItem].id);
  145. }
  146. $.ajax({
  147. method: "POST",
  148. dataType: "json",
  149. crossDomain: false,
  150. url: globalConfig.context + "/open/api/admin/banners/delete",
  151. data: {
  152. id: deletedIds[0]
  153. }
  154. }).done(function (data) {
  155. if (!data.error.length) {
  156. message.success('删除成功!');
  157. this.setState({
  158. loading: false
  159. });
  160. this.loadData(this.state.page);
  161. } else {
  162. message.warning(data.error[0].message);
  163. };
  164. }.bind(this));
  165. }
  166. componentWillMount() {
  167. this.loadData();
  168. }
  169. render() {
  170. const rowSelection = {
  171. selectedRowKeys: this.state.selectedRowKeys,
  172. onChange: (selectedRowKeys, selectedRows) => {
  173. this.setState({
  174. selectedRows: selectedRows.slice(-1),
  175. selectedRowKeys: selectedRowKeys.slice(-1)
  176. });
  177. }
  178. };
  179. const hasSelect = this.state.selectedRowKeys.length;
  180. return (
  181. <div className="user-content">
  182. <div className="content-title">
  183. <div className="content-title">
  184. <span>轮播图库</span>
  185. <div className="patent-addNew">
  186. <Button type="primary" onClick={this.addClick.bind(this)}>新建轮播图<Icon type="plus" /></Button>
  187. </div>
  188. </div>
  189. <div className="user-search">
  190. <Input
  191. style={{ marginRight: 10,width:200 }}
  192. value={this.state.apiSearch}
  193. placeholder="API"
  194. onChange={(e) => {
  195. this.setState({ apiSearch: e.target.value });
  196. }}
  197. />
  198. <Select style={{width:150}}
  199. placeholder="轮播图位置"
  200. value={this.state.positionSearch}
  201. onChange={(e)=>{this.setState({positionSearch:e})}}>
  202. <Select.Option value="0">网站</Select.Option>
  203. <Select.Option value="1">App</Select.Option>
  204. </Select>
  205. <Button type="primary" onClick={this.search.bind(this)} style={{ marginRight: 10 }}>
  206. 搜索
  207. </Button>
  208. <Button onClick={this.reset.bind(this)} style={{ marginRight: 10 }}>重置</Button>
  209. <Button type="danger" disabled={!hasSelect} onClick={(e)=>{this.delectRow()}}>删除</Button>
  210. </div>
  211. <div className="patent-table">
  212. <Spin spinning={this.state.loading}>
  213. <Table
  214. columns={this.state.columns}
  215. dataSource={this.state.dataSource}
  216. rowSelection={rowSelection}
  217. pagination={this.state.pagination}
  218. onRowClick={this.tableRowClick.bind(this)}
  219. />
  220. </Spin>
  221. </div>
  222. </div>
  223. <BannerFrom
  224. data={this.state.RowData}
  225. showDesc={this.state.showDesc}
  226. closeDesc={this.closeDesc.bind(this)}
  227. />
  228. </div>
  229. );
  230. }
  231. }
  232. export default Banner;