yxBonus.jsx 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596
  1. import React from 'react';
  2. import ajax from 'jquery/src/ajax/xhr.js';
  3. import $ from 'jquery/src/ajax';
  4. import moment from 'moment';
  5. import '../distribute/public.less';
  6. import { Button, Input, Spin, Table,Select, Switch,InputNumber, message, DatePicker,Modal ,Form } from 'antd';
  7. import {getNewOrderStatus,getProjectStatus,getJsyPaymentType,getBonusState} from '@/tools';
  8. import BonuseDetail from './bonusDetail';
  9. import { ChooseList } from "../../order/orderNew/chooseList";
  10. const FormItem= Form.Item;
  11. const YxBonus = React.createClass({
  12. departmentList() {
  13. this.setState({
  14. loading: true
  15. });
  16. $.ajax({
  17. method: "get",
  18. dataType: "json",
  19. crossDomain: false,
  20. url: globalConfig.context + "/api/admin/organization/selectSuperId",
  21. data: {},
  22. success: function(data) {
  23. let thedata = data.data;
  24. let theArr = [];
  25. if (!thedata) {
  26. if (data.error && data.error.length) {
  27. message.warning(data.error[0].message);
  28. }
  29. } else {
  30. thedata.map(function(item, index) {
  31. theArr.push({
  32. key: index,
  33. name: item.name,
  34. id: item.id
  35. });
  36. });
  37. }
  38. this.setState({
  39. departmentArr: theArr
  40. });
  41. }.bind(this)
  42. }).always(
  43. function() {
  44. this.setState({
  45. loading: false
  46. });
  47. }.bind(this)
  48. );
  49. },
  50. loadData(pageNo) {
  51. this.state.data = [];
  52. this.setState({
  53. selectedRowKeys: [],
  54. selectedRowKey: [],
  55. page: pageNo,
  56. loading: true
  57. });
  58. $.ajax({
  59. method: "get",
  60. dataType: "json",
  61. crossDomain: false,
  62. url: globalConfig.context + "/api/admin/bonus/saleBonusStatistics",
  63. data: {
  64. pageNo: pageNo || 1,
  65. pageSize: this.state.pagination.pageSize,
  66. salesName: this.state.orderRefundSearch, //订单负责人
  67. departmentId: this.state.departmenttList,
  68. orderNo: this.state.orderNoSearch,
  69. startTime: this.state.releaseDate[0],
  70. endTime: this.state.releaseDate[1],
  71. grantStatus: this.state.grantStatus,
  72. startTime1: this.state.createDate[0],
  73. endTime1: this.state.createDate[1]
  74. },
  75. success: function(data) {
  76. let theArr = [];
  77. if (!data.data || !data.data.list) {
  78. if (data.error && data.error.length) {
  79. message.warning(data.error[0].message);
  80. }
  81. }
  82. this.state.pagination.current = data.data.pageNo;
  83. this.state.pagination.total = data.data.totalCount;
  84. if (data.data && data.data.list && !data.data.list.length) {
  85. this.state.pagination.current = 0;
  86. this.state.pagination.total = 0;
  87. }
  88. this.setState({
  89. dataSource: data.data.list,
  90. pagination: this.state.pagination
  91. });
  92. }.bind(this)
  93. }).always(
  94. function() {
  95. this.setState({
  96. loading: false
  97. });
  98. }.bind(this)
  99. );
  100. },
  101. getInitialState() {
  102. return {
  103. searchMore: true,
  104. releaseDate: [],
  105. createDate: [],
  106. RowData: {},
  107. execState: false,
  108. selectedRowKeys: [],
  109. selectedRows: [],
  110. proofData: {},
  111. loading: false,
  112. changeList: undefined,
  113. pagination: {
  114. defaultCurrent: 1,
  115. defaultPageSize: 10,
  116. showQuickJumper: true,
  117. pageSize: 10,
  118. onChange: function(page) {
  119. this.loadData(page);
  120. }.bind(this),
  121. showTotal: function(total) {
  122. return "共" + total + "条数据";
  123. }
  124. },
  125. columns: [
  126. {
  127. title: "订单编号",
  128. dataIndex: "orderNo",
  129. key: "orderNo",
  130. // fixed: "left"
  131. },
  132. {
  133. title: "客户名称",
  134. dataIndex: "buyName",
  135. key: "buyName",
  136. render: text => {
  137. return text && text > 8 ? text.substr(0, 8) + "..." : text;
  138. }
  139. },
  140. {
  141. title: "订单负责人",
  142. dataIndex: "salesName",
  143. key: "salesName"
  144. },
  145. {
  146. title: "签单日期",
  147. dataIndex: "signTime",
  148. key: "signTime"
  149. },
  150. {
  151. title: "订单金额(万元)",
  152. dataIndex: "totalAmount",
  153. key: "totalAmount"
  154. },
  155. {
  156. title: "订单状态",
  157. dataIndex: "orderStatus",
  158. key: "orderStatus",
  159. render: text => {
  160. return getNewOrderStatus(text);
  161. }
  162. },
  163. {
  164. title: "项目状态",
  165. dataIndex: "projectStatus",
  166. key: "projectStatus",
  167. render: text => {
  168. return getProjectStatus(text);
  169. }
  170. },
  171. {
  172. title: "发放状态",
  173. dataIndex: "grantStatus",
  174. key: "grantStatus",
  175. render: text => {
  176. return getBonusState(text);
  177. }
  178. },
  179. {
  180. title: "发放类型",
  181. dataIndex: "bonusSubject",
  182. key: "bonusSubject",
  183. render: text => {
  184. return getJsyPaymentType(text);
  185. }
  186. },
  187. {
  188. title: "校对后单量",
  189. dataIndex: "proofCount",
  190. key: "proofCount"
  191. },
  192. {
  193. title: "已收(万元)",
  194. dataIndex: "settlementAmount",
  195. key: "settlementAmount"
  196. },
  197. {
  198. title: "已退(万元)",
  199. dataIndex: "refundAmount",
  200. key: "refundAmount"
  201. },
  202. {
  203. title: "操作",
  204. dataIndex: "state11",
  205. key: "state11",
  206. render: (text, recard) => {
  207. return (
  208. <div>
  209. {recard.proofStatus && !recard.grantStatus ? (
  210. <Button
  211. type="primary"
  212. style={{ marginRight: 10 }}
  213. onClick={e => {
  214. e.stopPropagation(), this.proofread(recard, 0);
  215. }}
  216. >
  217. 发放
  218. </Button>
  219. ) : (
  220. ""
  221. )}
  222. {recard.bonusSubject != "16" && (
  223. <Button
  224. type="primary"
  225. onClick={e => {
  226. e.stopPropagation(), this.proofread(recard, 1);
  227. }}
  228. >
  229. 校对
  230. </Button>
  231. )}
  232. </div>
  233. );
  234. }
  235. }
  236. ],
  237. dataSource: [],
  238. searchTime: [,]
  239. };
  240. },
  241. proofread(recard, index) {
  242. this.setState({
  243. proofreadState: index,
  244. boHuiVisible: true,
  245. proofData: recard,
  246. result: recard.proofCount
  247. });
  248. },
  249. tableRowClick(record, index) {
  250. this.state.RowData = record;
  251. this.setState({
  252. showDesc: true
  253. });
  254. },
  255. closeDesc(e, s) {
  256. this.state.RowData = {};
  257. this.state.showDesc = e;
  258. if (s) {
  259. this.loadData(this.state.page);
  260. }
  261. },
  262. componentWillMount() {
  263. this.loadData();
  264. this.departmentList();
  265. },
  266. search() {
  267. this.loadData();
  268. },
  269. boHuiOk() {
  270. this.setState({
  271. boHuiVisible: false
  272. });
  273. this.loadData(this.state.page);
  274. },
  275. boHuiCancel(e) {
  276. this.setState({
  277. boHuiVisible: false
  278. });
  279. },
  280. //导出
  281. exportExec() {
  282. let departmentName = "",
  283. depart = this.state.departmentArr || [];
  284. depart.map(item => {
  285. if (this.state.departmentId == item.id) {
  286. departmentName = item.name;
  287. return;
  288. }
  289. });
  290. let data = {
  291. departmentId: this.state.departmentId,
  292. departmentName: departmentName,
  293. salesName: this.state.orderRefundSearch, //订单负责人
  294. startTime: this.state.releaseDate[0],
  295. endTime: this.state.releaseDate[1],
  296. grantStatus: this.state.grantStatus,
  297. startTime1: this.state.createDate[0],
  298. endTime1: this.state.createDate[1]
  299. };
  300. window.location.href =
  301. globalConfig.context +
  302. "/api/admin/bonus/exportSaleBonusData?" +
  303. $.param(data);
  304. },
  305. //保存发放状态
  306. boHuiSubmit(e) {
  307. e.preventDefault();
  308. var resType = typeof this.state.result;
  309. if (this.state.proofreadState && resType != "number") {
  310. message.warning("请填写校对信息");
  311. return false;
  312. }
  313. this.setState({
  314. loading: true
  315. });
  316. var api = !this.state.proofreadState
  317. ? "/api/admin/bonus/bonusPayment"
  318. : "/api/admin/bonus/proofreading";
  319. $.ajax({
  320. method: "POST",
  321. dataType: "json",
  322. crossDomain: false,
  323. url: globalConfig.context + api,
  324. data: !this.state.proofreadState
  325. ? {
  326. //0-发放 1-校对
  327. id: this.state.proofData.id,
  328. orderNo: this.state.proofData.orderNo
  329. }
  330. : {
  331. orderNo: this.state.proofData.orderNo,
  332. proofCount: this.state.result
  333. }
  334. }).done(
  335. function(data) {
  336. if (!data.error.length) {
  337. message.success(!this.state.proofreadState ? "发放成功" : "校对成功");
  338. this.boHuiOk();
  339. } else {
  340. message.warning(data.error[0].message);
  341. }
  342. this.setState({
  343. loading: false
  344. });
  345. }.bind(this)
  346. );
  347. },
  348. reset() {
  349. this.state.orderRefundSearch = "";
  350. this.state.releaseDate = [];
  351. this.state.createDate = [];
  352. this.state.orderNoSearch = "";
  353. this.state.departmenttList = undefined;
  354. this.state.grantStatus = undefined;
  355. this.loadData();
  356. },
  357. searchSwitch() {
  358. this.setState({
  359. searchMore: !this.state.searchMore
  360. });
  361. },
  362. changeList(arr) {
  363. const newArr = [];
  364. this.state.columns.forEach(item => {
  365. arr.forEach(val => {
  366. if (val === item.title) {
  367. newArr.push(item);
  368. }
  369. });
  370. });
  371. this.setState({
  372. changeList: newArr
  373. });
  374. },
  375. render() {
  376. const rowSelection = {
  377. selectedRowKeys: this.state.selectedRowKeys,
  378. onChange: (selectedRowKeys, selectedRows) => {
  379. this.setState({
  380. selectedRows: selectedRows.slice(-1),
  381. selectedRowKeys: selectedRowKeys.slice(-1)
  382. });
  383. }
  384. };
  385. const hasSelected = this.state.selectedRowKeys.length > 0;
  386. const { RangePicker } = DatePicker;
  387. let departmentArr = this.state.departmentArr || [];
  388. return (
  389. <div className="user-content">
  390. <div className="content-title">
  391. <span>营销员奖金</span>
  392. </div>
  393. <div className="user-search">
  394. <Select
  395. placeholder="订单部门"
  396. style={{ width: 150, marginRight: 10 }}
  397. value={this.state.departmenttList}
  398. onChange={e => {
  399. this.setState({ departmenttList: e });
  400. }}
  401. >
  402. {departmentArr.map(function(item) {
  403. return <Select.Option key={item.id}>{item.name}</Select.Option>;
  404. })}
  405. </Select>
  406. <Input
  407. placeholder="订单编号"
  408. value={this.state.orderNoSearch}
  409. onChange={e => {
  410. this.setState({ orderNoSearch: e.target.value });
  411. }}
  412. />
  413. <Input
  414. placeholder="订单负责人"
  415. value={this.state.orderRefundSearch}
  416. onChange={e => {
  417. this.setState({ orderRefundSearch: e.target.value });
  418. }}
  419. />
  420. <Select
  421. placeholder="发放状态"
  422. style={{ width: 150, marginRight: 10 }}
  423. value={this.state.grantStatus}
  424. onChange={e => {
  425. this.setState({ grantStatus: e });
  426. }}
  427. >
  428. <Option value="0">未发放</Option>
  429. <Option value="1">已发放</Option>
  430. </Select>
  431. <Button type="primary" onClick={this.search}>
  432. 搜索
  433. </Button>
  434. <Button onClick={this.reset}>重置</Button>
  435. <Button onClick={this.exportExec} type="primary">
  436. 导出excel
  437. </Button>
  438. <span>
  439. 更多搜索
  440. <Switch
  441. defaultChecked={false}
  442. onChange={this.searchSwitch.bind(this)}
  443. />
  444. </span>
  445. <div
  446. className="search-more"
  447. style={this.state.searchMore ? { display: "none" } : {}}
  448. >
  449. <span>签单时间 :</span>
  450. <RangePicker
  451. format="YYYY-MM"
  452. value={[
  453. this.state.releaseDate[0]
  454. ? moment(this.state.releaseDate[0])
  455. : null,
  456. this.state.releaseDate[1]
  457. ? moment(this.state.releaseDate[1])
  458. : null
  459. ]}
  460. onChange={(data, dataString) => {
  461. this.setState({ releaseDate: dataString });
  462. }}
  463. />
  464. <span>创建时间 :</span>
  465. <RangePicker
  466. format="YYYY-MM-DD"
  467. value={[
  468. this.state.createDate[0]
  469. ? moment(this.state.createDate[0])
  470. : null,
  471. this.state.createDate[1]
  472. ? moment(this.state.createDate[1])
  473. : null
  474. ]}
  475. onChange={(data, dataString) => {
  476. this.setState({ createDate: dataString });
  477. }}
  478. />
  479. <ChooseList
  480. columns={this.state.columns}
  481. changeFn={this.changeList}
  482. changeList={this.state.changeList}
  483. top={55}
  484. display={ "inline-block" }
  485. />
  486. </div>
  487. </div>
  488. <div className="patent-table" id="table">
  489. <Spin spinning={this.state.loading}>
  490. <Table
  491. size="small"
  492. bordered
  493. columns={
  494. this.state.changeList == undefined
  495. ? this.state.columns
  496. : this.state.changeList
  497. }
  498. dataSource={this.state.dataSource}
  499. scroll={{ x: 1500, y: 0 }}
  500. rowSelection={false}
  501. pagination={this.state.pagination}
  502. onRowClick={this.tableRowClick}
  503. />
  504. </Spin>
  505. </div>
  506. <BonuseDetail
  507. data={this.state.RowData}
  508. showDesc={this.state.showDesc}
  509. closeDesc={this.closeDesc.bind(this)}
  510. />
  511. <Modal
  512. visible={this.state.boHuiVisible}
  513. width="400px"
  514. title={this.state.proofreadState ? "校对" : "发放"}
  515. footer=""
  516. onOk={this.boHuiOk}
  517. onCancel={this.boHuiCancel}
  518. >
  519. <Form layout="horizontal" onSubmit={this.boHuiSubmit}>
  520. <Spin spinning={this.state.loading}>
  521. {this.state.proofreadState ? (
  522. <div>
  523. <FormItem
  524. labelCol={{ span: 8 }}
  525. wrapperCol={{ span: 10 }}
  526. label={
  527. <span>
  528. <strong style={{ color: "#f00" }}>*</strong>
  529. 单量校对结果
  530. </span>
  531. }
  532. >
  533. <InputNumber
  534. min={0}
  535. max={1}
  536. placeholder="输入单量"
  537. value={this.state.result}
  538. onChange={e => {
  539. this.setState({ result: e });
  540. }}
  541. />
  542. </FormItem>
  543. <FormItem
  544. labelCol={{ span: 8 }}
  545. wrapperCol={{ span: 10 }}
  546. label="校对人"
  547. >
  548. <span>{this.state.proofData.byName}</span>
  549. </FormItem>
  550. </div>
  551. ) : (
  552. <div>
  553. <FormItem
  554. labelCol={{ span: 8 }}
  555. wrapperCol={{ span: 10 }}
  556. label="应收人"
  557. >
  558. <span>{this.state.proofData.salesName}</span>
  559. </FormItem>
  560. <FormItem
  561. labelCol={{ span: 8 }}
  562. wrapperCol={{ span: 10 }}
  563. label="发放人"
  564. >
  565. <span>{this.state.proofData.byName}</span>
  566. </FormItem>
  567. </div>
  568. )}
  569. <FormItem wrapperCol={{ span: 12, offset: 8 }}>
  570. <Button
  571. type="primary"
  572. htmlType="submit"
  573. style={{ marginRight: 20 }}
  574. >
  575. 保存
  576. </Button>
  577. <Button
  578. type="default"
  579. onClick={() => {
  580. this.boHuiCancel();
  581. }}
  582. >
  583. 取消
  584. </Button>
  585. </FormItem>
  586. </Spin>
  587. </Form>
  588. </Modal>
  589. </div>
  590. );
  591. }
  592. });
  593. export default YxBonus;