activityUserList.jsx 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255
  1. import React from 'react';
  2. import { Icon, Button, Spin, message, Table, Input, Tabs, Select } from 'antd';
  3. //import { getActivityForm, getActivityType } from '../../../tools';
  4. //import { activityForm, activityType } from '../../../dataDic';
  5. //import moment from 'moment';
  6. import ajax from 'jquery/src/ajax/xhr.js';
  7. import $ from 'jquery/src/ajax';
  8. const ActivityTable = React.createClass({
  9. loadData(pageNo, apiUrl) {
  10. this.setState({
  11. loading: true
  12. });
  13. $.ajax({
  14. method: "get",
  15. dataType: "json",
  16. crossDomain: false,
  17. url: globalConfig.context + (apiUrl || this.props.apiUrl),
  18. data: {
  19. pageNo: pageNo || 1,
  20. pageSize: this.state.pagination.pageSize,
  21. activityName: this.state.searchName,
  22. mobile: this.state.searchMobile,
  23. username: this.state.searchUsername,
  24. unitName: this.state.searchUnitName,
  25. number: this.state.searchNumber,
  26. },
  27. success: function (data) {
  28. let theArr = [];
  29. if (!data.data || !data.data.list) {
  30. if (data.error && data.error.length) {
  31. message.warning(data.error[0].message);
  32. };
  33. } else {
  34. for (let i = 0; i < data.data.list.length; i++) {
  35. let thisdata = data.data.list[i];
  36. theArr.push({
  37. key: i,
  38. aid: thisdata.aid,
  39. uid: thisdata.uid,
  40. createTime: thisdata.createTime,
  41. lastUpdateTime: thisdata.lastUpdateTime,
  42. activityName: thisdata.activityName,
  43. number: thisdata.number,
  44. mobile: thisdata.mobile,
  45. username: thisdata.username,
  46. unitName: thisdata.unitName,
  47. theName: thisdata.username || thisdata.unitName,
  48. startTime: thisdata.startTime,
  49. endTime: thisdata.endTime,
  50. enrollDeadline: thisdata.enrollDeadline,
  51. createTimeFormattedDate: thisdata.createTimeFormattedDate,
  52. enrollDeadlineFormattedDate: thisdata.enrollDeadlineFormattedDate,
  53. startTimeFormattedDate: thisdata.startTimeFormattedDate,
  54. endTimeFormattedDate: thisdata.endTimeFormattedDate,
  55. lastUpdateTimeFormattedDate: thisdata.lastUpdateTimeFormattedDate,
  56. });
  57. };
  58. this.state.pagination.current = data.data.pageNo;
  59. this.state.pagination.total = data.data.totalCount;
  60. };
  61. this.setState({
  62. tableData: theArr,
  63. pagination: this.state.pagination
  64. });
  65. }.bind(this),
  66. }).always(function () {
  67. this.setState({
  68. loading: false
  69. });
  70. }.bind(this));
  71. },
  72. getInitialState() {
  73. return {
  74. loading: false,
  75. visible: false,
  76. selectedRowKeys: [],
  77. selectedRows: [],
  78. pagination: {
  79. defaultCurrent: 1,
  80. defaultPageSize: 10,
  81. showQuickJumper: true,
  82. pageSize: 10,
  83. onChange: function (page) {
  84. this.loadData(page);
  85. }.bind(this),
  86. showTotal: function (total) {
  87. return '共' + total + '条数据';
  88. }
  89. },
  90. columns: [
  91. {
  92. title: '报名用户名称',
  93. dataIndex: 'theName',
  94. key: 'theName'
  95. }, {
  96. title: '活动名称',
  97. dataIndex: 'activityName',
  98. key: 'activityName',
  99. }, {
  100. title: '阿凡提号',
  101. dataIndex: 'number',
  102. key: 'number'
  103. }, {
  104. title: '联系方式',
  105. dataIndex: 'mobile',
  106. key: 'mobile'
  107. }, {
  108. title: '首次报名/咨询时间',
  109. dataIndex: 'createTimeFormattedDate',
  110. key: 'createTimeFormattedDate'
  111. }, {
  112. title: '最近一次报名/咨询时间',
  113. dataIndex: 'lastUpdateTimeFormattedDate',
  114. key: 'lastUpdateTimeFormattedDate'
  115. }, {
  116. title: '活动截止报名时间',
  117. dataIndex: 'enrollDeadlineFormattedDate',
  118. key: 'enrollDeadlineFormattedDate'
  119. }
  120. ],
  121. tableData: []
  122. };
  123. },
  124. componentWillMount() {
  125. this.loadData();
  126. },
  127. componentWillReceiveProps(nextProps) {
  128. if (this.props.tableType !== nextProps.tableType) {
  129. this.loadData(nextProps.apiUrl)
  130. }
  131. },
  132. delectRow() {
  133. let deletedIds = [];
  134. for (let idx = 0; idx < this.state.selectedRows.length; idx++) {
  135. let rowItem = this.state.selectedRows[idx];
  136. if (rowItem.id) {
  137. deletedIds.push(rowItem.id)
  138. };
  139. };
  140. this.setState({
  141. selectedRowKeys: [],
  142. loading: deletedIds.length > 0
  143. });
  144. $.ajax({
  145. method: "POST",
  146. dataType: "json",
  147. crossDomain: false,
  148. url: globalConfig.context + '/api/admin/activityUser/delete',
  149. data: {
  150. ids: deletedIds
  151. }
  152. }).done(function (data) {
  153. if (data.error && data.error.length) {
  154. message.warning(data.error[0].message);
  155. } else {
  156. message.success('删除成功!');
  157. };
  158. this.setState({
  159. loading: false,
  160. });
  161. this.loadData();
  162. }.bind(this));
  163. },
  164. reset() {
  165. this.state.searchName = undefined;
  166. this.state.searchMobile = undefined;
  167. this.state.searchUsername = undefined;
  168. this.state.searchUnitName = undefined;
  169. this.state.searchNumber = undefined;
  170. this.loadData();
  171. },
  172. render() {
  173. const rowSelection = {
  174. selectedRowKeys: this.state.selectedRowKeys,
  175. onChange: (selectedRowKeys, selectedRows) => {
  176. this.setState({
  177. selectedRows: selectedRows,
  178. selectedRowKeys: selectedRowKeys
  179. });
  180. }
  181. };
  182. const hasSelected = this.state.selectedRowKeys.length > 0;
  183. return (
  184. <div className="admin-content-warp">
  185. <div className="admin-content-search">
  186. <Input placeholder="活动名称" style={{ width: 200 }}
  187. value={this.state.searchName}
  188. onChange={(e) => { this.setState({ searchName: e.target.value }); }} />
  189. <Input placeholder="报名人电话" style={{ width: 200 }}
  190. value={this.state.searchMobile}
  191. onChange={(e) => { this.setState({ searchMobile: e.target.value }); }} />
  192. {(() => {
  193. switch (this.props.tableType) {
  194. case 'user':
  195. return <Input placeholder="报名人名称" style={{ width: 200 }}
  196. value={this.state.searchUsername}
  197. onChange={(e) => { this.setState({ searchUsername: e.target.value }); }} />
  198. case 'org':
  199. return <Input placeholder="报名人名称" style={{ width: 200 }}
  200. value={this.state.searchUnitName}
  201. onChange={(e) => { this.setState({ searchUnitName: e.target.value }); }} />
  202. };
  203. })()}
  204. <Input placeholder="报名人阿凡提号" style={{ width: 200 }}
  205. value={this.state.searchNumber}
  206. onChange={(e) => { this.setState({ searchNumber: e.target.value }); }} />
  207. <Button type="primary" onClick={() => { this.loadData() }}>搜索</Button>
  208. <Button onClick={this.reset}>重置</Button>
  209. <Button type='danger' disabled={!hasSelected} onClick={this.delectRow}>
  210. 删除<Icon type="minus" />
  211. </Button>
  212. </div>
  213. <Spin spinning={this.state.loading}>
  214. <Table
  215. columns={this.state.columns}
  216. dataSource={this.state.tableData}
  217. pagination={this.state.pagination}
  218. rowSelection={rowSelection} />
  219. </Spin>
  220. </div>
  221. )
  222. }
  223. });
  224. const ActivityUserList = React.createClass({
  225. getInitialState() {
  226. return {
  227. userApiUrl: '/api/admin/activityUser/userList',
  228. orgApiUrl: '/api/admin/activityUser/orgList',
  229. tableType: 'user'
  230. };
  231. },
  232. tabChange(key) {
  233. this.setState({ tableType: key });
  234. },
  235. render() {
  236. return (
  237. <div className="admin-content" >
  238. <div className="admin-content-title">
  239. <span>活动圈报名管理</span>
  240. </div>
  241. <Tabs activeKey={this.state.tableType} onChange={this.tabChange}>
  242. <Tabs.TabPane tab="个人报名管理" key="user">
  243. <ActivityTable apiUrl={this.state.userApiUrl} tableType={'user'} />
  244. </Tabs.TabPane>
  245. <Tabs.TabPane tab="组织报名管理" key="org">
  246. <ActivityTable apiUrl={this.state.orgApiUrl} tableType={'org'} />
  247. </Tabs.TabPane>
  248. </Tabs>
  249. </div >
  250. );
  251. }
  252. });
  253. export default ActivityUserList;