levelSet.jsx 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466
  1. import React from 'react';
  2. import { Icon, Button, Input, Spin, Table, message, Modal, Tabs, InputNumber, Checkbox, Select } from 'antd';
  3. import ajax from 'jquery/src/ajax/xhr.js';
  4. import $ from 'jquery/src/ajax';
  5. import './userList.less';
  6. const ListAdd = React.createClass({
  7. getInitialState () {
  8. return {
  9. visible: false,
  10. loading: false
  11. };
  12. },
  13. showModal () {
  14. this.setState({
  15. visible: true,
  16. });
  17. },
  18. handleCancel (e) {
  19. this.setState({
  20. visible: false,
  21. });
  22. },
  23. handleOk () {
  24. this.setState({
  25. loading: true
  26. });
  27. $.ajax({
  28. method: "post",
  29. dataType: "json",
  30. crossDomain: false,
  31. url: globalConfig.context + "/api/admin/member/addGradeName",
  32. data: {
  33. gradeName: this.state.lvlName,
  34. memberRank: this.state.level
  35. },
  36. success: function (data) {
  37. if (data.error && data.error.length) {
  38. message.warning(data.error[0].message);
  39. } else {
  40. message.success("添加成功!");
  41. this.state.visible = false;
  42. this.props.refresh(this.state.level);
  43. }
  44. this.setState({
  45. loading: false
  46. })
  47. }.bind(this),
  48. });
  49. },
  50. render () {
  51. const Option = Select.Option;
  52. return (
  53. <div className="patent-desc" style={{ float: 'right', marginRight: '20px' }}>
  54. <Button type="primary" onClick={this.showModal}>添加新等级</Button>
  55. <Modal maskClosable={false}
  56. title="新增用户等级"
  57. visible={this.state.visible}
  58. onCancel={this.handleCancel}
  59. afterClose={() => { this.state.lvlName = undefined; this.state.level = undefined }}
  60. width='400px'
  61. footer={[
  62. <Button key="submit" type="primary" loading={this.state.loading} onClick={this.handleOk}>提交</Button>,
  63. <Button key="back" onClick={this.handleCancel}>返回</Button>
  64. ]}
  65. className="admin-desc-content">
  66. <div className='orgAdd-input'>
  67. <span>会员等级名称:</span>
  68. <Input value={this.state.lvlName} style={{ width: '200px' }}
  69. onChange={(e) => { this.setState({ lvlName: e.target.value }); }} />
  70. </div>
  71. <div className='orgAdd-input'>
  72. <span>会员等级:</span>
  73. <Select value={this.state.level} style={{ width: 120 }}
  74. onChange={(e) => { this.setState({ level: e }) }}>
  75. <Option value="1">1</Option>
  76. <Option value="2">2</Option>
  77. <Option value="3">3</Option>
  78. <Option value="4">4</Option>
  79. <Option value="5">5</Option>
  80. </Select>
  81. </div>
  82. </Modal>
  83. </div>
  84. );
  85. }
  86. });
  87. const ListDelete = React.createClass({
  88. getInitialState () {
  89. return {
  90. visible: false,
  91. loading: false
  92. };
  93. },
  94. showModal () {
  95. this.setState({
  96. visible: true,
  97. });
  98. },
  99. handleCancel (e) {
  100. this.setState({
  101. visible: false,
  102. });
  103. },
  104. handleOk () {
  105. this.setState({
  106. loading: true
  107. });
  108. $.ajax({
  109. method: "get",
  110. dataType: "json",
  111. crossDomain: false,
  112. url: globalConfig.context + "/api/admin/member/delGrade",
  113. data: {
  114. id: this.props.rid
  115. },
  116. success: function (data) {
  117. if (data.error && data.error.length) {
  118. message.warning(data.error[0].message);
  119. } else {
  120. message.success("删除成功!");
  121. this.state.visible = false;
  122. this.props.refreshForDel();
  123. }
  124. this.setState({
  125. loading: false
  126. })
  127. }.bind(this),
  128. });
  129. },
  130. render () {
  131. return (
  132. <div className="patent-desc" style={{ float: 'right', marginRight: '20px' }}>
  133. <Button type="ghost" onClick={this.showModal}>删除</Button>
  134. <Modal maskClosable={false}
  135. title="删除用户等级"
  136. visible={this.state.visible}
  137. onCancel={this.handleCancel}
  138. width='400px'
  139. footer={[
  140. <Button key="submit" type="primary" loading={this.state.loading} onClick={this.handleOk}>提交</Button>,
  141. <Button key="back" onClick={this.handleCancel}>返回</Button>
  142. ]} >
  143. <div className="level-tabs-modal">
  144. <p>
  145. <Icon type="exclamation-circle-o" />
  146. <span> 确认要删除该用户等级吗?删除以后不可恢复!</span>
  147. </p>
  148. </div>
  149. </Modal>
  150. </div>
  151. );
  152. }
  153. });
  154. const SetContent = React.createClass({
  155. getInitialState () {
  156. return {
  157. visible: false,
  158. loading: false,
  159. columns: [
  160. {
  161. title: '会员时长',
  162. dataIndex: 'time',
  163. key: 'time',
  164. render: (text, record, index) => {
  165. return <div>
  166. <Input style={{ width: '80px' }}
  167. value={record.time}
  168. onChange={(e) => {
  169. record.time = e.target.value;
  170. this.setState({ dataSource: this.state.dataSource });
  171. }} />
  172. <span style={{ marginLeft: '10px' }}>个月</span>
  173. </div>
  174. }
  175. }, {
  176. title: '金额',
  177. dataIndex: 'money',
  178. key: 'money',
  179. render: (text, record, index) => {
  180. return <div>
  181. <InputNumber step={0.01} min={0}
  182. value={record.money}
  183. onChange={(e) => {
  184. record.money = e;
  185. this.setState({ dataSource: this.state.dataSource });
  186. }} />
  187. <span style={{ marginLeft: '10px' }}>元</span>
  188. </div>
  189. }
  190. }
  191. ],
  192. dataSource: [],
  193. selectedRowKeys: []
  194. };
  195. },
  196. componentWillMount () {
  197. this.state.checked01 = this.props.business.checked01;
  198. this.state.checked02 = this.props.business.checked02;
  199. this.state.checked03 = this.props.business.checked03;
  200. this.state.checked04 = this.props.business.checked04;
  201. this.state.checked05 = this.props.business.checked05;
  202. this.state.checked06 = this.props.business.checked06;
  203. this.state.checked07 = this.props.business.checked07;
  204. this.state.checked08 = this.props.business.checked08;
  205. for (let item in this.props.cost) {
  206. this.state.dataSource.push({
  207. key: this.state.dataSource.length,
  208. time: item,
  209. money: this.props.cost[item]
  210. })
  211. }
  212. },
  213. remove () {
  214. this.state.selectedRowKeys.sort((a, b) => { return b - a });
  215. let theArr = this.state.dataSource.concat();
  216. for (let idx = 0; idx < this.state.selectedRowKeys.length; idx++) {
  217. let dataIndex = this.state.selectedRowKeys[idx];
  218. theArr.map((item, index) => {
  219. if (item.key === dataIndex) {
  220. theArr.splice(index, 1);
  221. }
  222. })
  223. };
  224. this.state.dataSource = [];
  225. for (let i = 0; i < theArr.length; i++) {
  226. let item = theArr[i];
  227. this.state.dataSource.push({
  228. key: i,
  229. time: item.time,
  230. money: item.money
  231. })
  232. };
  233. this.setState({
  234. dataSource: this.state.dataSource,
  235. selectedRowKeys: []
  236. });
  237. },
  238. addNew () {
  239. this.state.dataSource.push({
  240. key: this.state.dataSource.length,
  241. time: '',
  242. money: ''
  243. });
  244. this.setState({
  245. dataSource: this.state.dataSource
  246. })
  247. },
  248. submit () {
  249. this.setState({ loading: true });
  250. let theCost = {};
  251. if (this.state.dataSource.length) {
  252. for (let i = 0; i < this.state.dataSource.length; i++) {
  253. let theMoney = this.state.dataSource[i].money;
  254. let theTime = this.state.dataSource[i].time;
  255. theCost[theTime] = theMoney;
  256. }
  257. };
  258. $.ajax({
  259. method: "get",
  260. dataType: "json",
  261. crossDomain: false,
  262. url: globalConfig.context + "/api/admin/member/addBusinessAndCost",
  263. data: {
  264. id: this.props.rid,
  265. business: JSON.stringify({
  266. "1008": this.state.checked08 ? "1" : "0",
  267. "1007": this.state.checked07 ? "1" : "0",
  268. "1006": this.state.checked06 ? "1" : "0",
  269. "1005": this.state.checked05 ? "1" : "0",
  270. "1004": this.state.checked04 ? "1" : "0",
  271. "1003": this.state.checked03 ? "1" : "0",
  272. "1002": this.state.checked02 ? "1" : "0",
  273. "1001": this.state.checked01 ? "1" : "0",
  274. }),
  275. cost: JSON.stringify(theCost)
  276. },
  277. success: function (data) {
  278. if (data.error && data.error.length) {
  279. message.warning(data.error[0].message);
  280. } else {
  281. message.success("保存成功!");
  282. this.state.visible = false
  283. }
  284. this.setState({
  285. loading: false
  286. })
  287. }.bind(this),
  288. });
  289. },
  290. render () {
  291. const rowSelection = {
  292. type: 'checkbox',
  293. selectedRowKeys: this.state.selectedRowKeys,
  294. onChange: (selectedRowKeys, selectedRows) => {
  295. this.setState({
  296. selectedRows: selectedRows,
  297. selectedRowKeys: selectedRowKeys
  298. });
  299. }
  300. };
  301. const hasSelected = this.state.selectedRowKeys.length > 0;
  302. return (
  303. <Spin spinning={this.state.loading}>
  304. <div className="level-tabs">
  305. <div className="level-tabs-title">
  306. <span>会员等级费用设置</span>
  307. <Button style={{ background: "#ea0862", border: "none", color: "#fff" }}
  308. onClick={this.addNew}>添加<Icon type="plus" /></Button>
  309. <Button style={{ background: "#3fcf9e", border: "none", color: "#fff" }}
  310. disabled={!hasSelected}
  311. onClick={this.remove}>删除<Icon type="minus" /></Button>
  312. </div>
  313. <Table className="level-tabs-table no-all-select"
  314. columns={this.state.columns}
  315. dataSource={this.state.dataSource}
  316. pagination={false}
  317. rowSelection={rowSelection} />
  318. <div className="level-tabs-title">
  319. <span>会员等级增值服务设置</span>
  320. </div>
  321. <div>
  322. <div className="level-checkbox">
  323. <Checkbox checked={this.state.checked01}
  324. onChange={(e) => { this.setState({ checked01: e.target.checked }) }}>
  325. 科技成果,专家信息定点推送
  326. </Checkbox>
  327. </div>
  328. <div className="level-checkbox">
  329. <Checkbox checked={this.state.checked02}
  330. onChange={(e) => { this.setState({ checked02: e.target.checked }) }}>
  331. 查看专家的联系方式
  332. </Checkbox>
  333. </div>
  334. <div className="level-checkbox">
  335. <Checkbox checked={this.state.checked03}
  336. onChange={(e) => { this.setState({ checked03: e.target.checked }) }}>
  337. 任何业务申请,付费业享受会员专属折扣
  338. </Checkbox>
  339. </div>
  340. <div className="level-checkbox">
  341. <Checkbox checked={this.state.checked04}
  342. onChange={(e) => { this.setState({ checked04: e.target.checked }) }}>
  343. 一对一的技术经纪人服务,进行技术成果媒合服务
  344. </Checkbox>
  345. </div>
  346. <div className="level-checkbox">
  347. <Checkbox checked={this.state.checked05}
  348. onChange={(e) => { this.setState({ checked05: e.target.checked }) }}>
  349. 一对一的科技咨询师服务
  350. </Checkbox>
  351. </div>
  352. <div className="level-checkbox">
  353. <Checkbox checked={this.state.checked06}
  354. onChange={(e) => { this.setState({ checked06: e.target.checked }) }}>
  355. 一对一的专业技术顾问,搜集技术情报,提供研发高参
  356. </Checkbox>
  357. </div>
  358. <div className="level-checkbox">
  359. <Checkbox checked={this.state.checked07}
  360. onChange={(e) => { this.setState({ checked07: e.target.checked }) }}>
  361. 免费参加现场业务培训会
  362. </Checkbox>
  363. </div>
  364. <div className="level-checkbox">
  365. <Checkbox checked={this.state.checked08}
  366. onChange={(e) => { this.setState({ checked08: e.target.checked }) }}>
  367. 免前期费用做科技类扶持资金项目申报
  368. </Checkbox>
  369. </div>
  370. </div>
  371. <div className="level-tabs-save">
  372. <Button type="primary" onClick={this.submit}>保存</Button>
  373. <ListDelete rid={this.props.rid} refreshForDel={this.props.refreshForDel} />
  374. </div>
  375. </div>
  376. </Spin>
  377. );
  378. }
  379. });
  380. const LevelSet = React.createClass({
  381. loadData (pageNo) {
  382. this.setState({
  383. loading: true
  384. });
  385. $.ajax({
  386. method: "get",
  387. dataType: "json",
  388. crossDomain: false,
  389. url: globalConfig.context + "/api/admin/member/selectMemberGrade",
  390. data: {
  391. },
  392. success: function (data) {
  393. let theArr = [];
  394. if (data.error && data.error.length) {
  395. message.warning(data.error[0].message);
  396. } else {
  397. for (let i = 0; i < data.data.length; i++) {
  398. let item = data.data[i];
  399. let theBusiness = {};
  400. theBusiness['checked01'] = (item.business && item.business['1001'] == 1 ? true : false);
  401. theBusiness['checked02'] = (item.business && item.business['1002'] == 1 ? true : false);
  402. theBusiness['checked03'] = (item.business && item.business['1003'] == 1 ? true : false);
  403. theBusiness['checked04'] = (item.business && item.business['1004'] == 1 ? true : false);
  404. theBusiness['checked05'] = (item.business && item.business['1005'] == 1 ? true : false);
  405. theBusiness['checked06'] = (item.business && item.business['1006'] == 1 ? true : false);
  406. theBusiness['checked07'] = (item.business && item.business['1007'] == 1 ? true : false);
  407. theBusiness['checked08'] = (item.business && item.business['1008'] == 1 ? true : false);
  408. theArr.push(
  409. <Tabs.TabPane tab={item.gradeName + '( Lv.' + item.memberRank + ' )'} key={item.memberRank}>
  410. <SetContent business={theBusiness} cost={item.cost || []} rid={item.id} refreshForDel={this.refreshForDel} />
  411. </Tabs.TabPane>
  412. )
  413. };
  414. this.setState({ tabPane: theArr })
  415. }
  416. }.bind(this),
  417. }).always(function () {
  418. this.setState({
  419. loading: false
  420. });
  421. }.bind(this));
  422. },
  423. getInitialState () {
  424. return {
  425. tabPane: [],
  426. activeKey: '1',
  427. loading: false
  428. };
  429. },
  430. componentWillMount () {
  431. this.loadData();
  432. },
  433. refresh (e) {
  434. this.state.activeKey = e;
  435. this.loadData()
  436. },
  437. refreshForDel () {
  438. this.state.activeKey = '1';
  439. this.loadData();
  440. },
  441. tabChange (e) {
  442. this.setState({ activeKey: e });
  443. },
  444. render () {
  445. return (
  446. <div className="user-content" >
  447. <div className="content-title clearfix">
  448. <span>会员等级管理</span>
  449. <ListAdd refresh={this.refresh} />
  450. </div>
  451. <div>
  452. <Tabs activeKey={this.state.activeKey} onChange={this.tabChange}>
  453. {this.state.tabPane}
  454. </Tabs>
  455. </div>
  456. </div >
  457. );
  458. }
  459. });
  460. export default LevelSet;