activityUserList.jsx 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250
  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) {
  10. this.setState({
  11. loading: true
  12. });
  13. $.ajax({
  14. method: "get",
  15. dataType: "json",
  16. crossDomain: false,
  17. url: globalConfig.context + 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. delectRow() {
  128. let deletedIds = [];
  129. for (let idx = 0; idx < this.state.selectedRows.length; idx++) {
  130. let rowItem = this.state.selectedRows[idx];
  131. if (rowItem.id) {
  132. deletedIds.push(rowItem.id)
  133. };
  134. };
  135. this.setState({
  136. selectedRowKeys: [],
  137. loading: deletedIds.length > 0
  138. });
  139. $.ajax({
  140. method: "POST",
  141. dataType: "json",
  142. crossDomain: false,
  143. url: globalConfig.context + "/api/admin/activity/delete",
  144. data: {
  145. ids: deletedIds
  146. }
  147. }).done(function (data) {
  148. if (data.error && data.error.length) {
  149. message.warning(data.error[0].message);
  150. } else {
  151. message.success('删除成功!');
  152. };
  153. this.setState({
  154. loading: false,
  155. });
  156. this.loadData();
  157. }.bind(this));
  158. },
  159. reset() {
  160. this.state.searchName = undefined;
  161. this.state.searchMobile = undefined;
  162. this.state.searchUsername = undefined;
  163. this.state.searchUnitName = undefined;
  164. this.state.searchNumber = undefined;
  165. this.loadData();
  166. },
  167. render() {
  168. const rowSelection = {
  169. selectedRowKeys: this.state.selectedRowKeys,
  170. onChange: (selectedRowKeys, selectedRows) => {
  171. this.setState({
  172. selectedRows: selectedRows.slice(-1),
  173. selectedRowKeys: selectedRowKeys.slice(-1)
  174. });
  175. }
  176. };
  177. const hasSelected = this.state.selectedRowKeys.length > 0;
  178. return (
  179. <div className="admin-content-warp">
  180. <div className="admin-content-search">
  181. <Input placeholder="活动名称" style={{ width: 200 }}
  182. value={this.state.searchName}
  183. onChange={(e) => { this.setState({ searchName: e.target.value }); }} />
  184. <Input placeholder="报名人电话" style={{ width: 200 }}
  185. value={this.state.searchMobile}
  186. onChange={(e) => { this.setState({ searchMobile: e.target.value }); }} />
  187. {(() => {
  188. switch (this.props.tableType) {
  189. case 'user':
  190. return <Input placeholder="报名人名称" style={{ width: 200 }}
  191. value={this.state.searchUsername}
  192. onChange={(e) => { this.setState({ searchUsername: e.target.value }); }} />
  193. case 'org':
  194. return <Input placeholder="报名人名称" style={{ width: 200 }}
  195. value={this.state.searchUnitName}
  196. onChange={(e) => { this.setState({ searchUnitName: e.target.value }); }} />
  197. };
  198. })()}
  199. <Input placeholder="报名人阿凡提号" style={{ width: 200 }}
  200. value={this.state.searchNumber}
  201. onChange={(e) => { this.setState({ searchNumber: e.target.value }); }} />
  202. <Button type="primary" onClick={() => { this.loadData() }}>搜索</Button>
  203. <Button onClick={this.reset}>重置</Button>
  204. <Button type='danger' disabled={!hasSelected} onClick={this.delectRow}>
  205. 删除<Icon type="minus" />
  206. </Button>
  207. </div>
  208. <Spin spinning={this.state.loading}>
  209. <Table className="no-all-select"
  210. columns={this.state.columns}
  211. dataSource={this.state.tableData}
  212. pagination={this.state.pagination}
  213. rowSelection={rowSelection} />
  214. </Spin>
  215. </div>
  216. )
  217. }
  218. });
  219. const ActivityUserList = React.createClass({
  220. getInitialState() {
  221. return {
  222. userApiUrl: '/api/admin/activityUser/userList',
  223. orgApiUrl: '/api/admin/activityUser/orgList',
  224. tableType: 'user'
  225. };
  226. },
  227. tabChange(key) {
  228. this.setState({ tableType: key });
  229. },
  230. render() {
  231. return (
  232. <div className="admin-content" >
  233. <div className="admin-content-title">
  234. <span>活动圈报名管理</span>
  235. </div>
  236. <Tabs activeKey={this.state.tableType} onChange={this.tabChange}>
  237. <TabPane tab="个人报名管理" key="user">
  238. <ActivityTable apiUrl={this.state.userApiUrl} tableType={'user'} />
  239. </TabPane>
  240. <TabPane tab="组织报名管理" key="org">
  241. <ActivityTable apiUrl={this.state.orgApiUrl} tableType={'org'} />
  242. </TabPane>
  243. </Tabs>
  244. </div >
  245. );
  246. }
  247. });
  248. export default ActivityUserList;