jsBonus.jsx 16 KB

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