tuiDan.jsx 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466
  1. import React from 'react';
  2. import $ from 'jquery/src/ajax';
  3. import moment from 'moment';
  4. import './public.less';
  5. import { Button, InputNumber, Select, Input, Spin, Table, message, DatePicker, Tabs } from 'antd';
  6. import Receivable from './receivable';
  7. import Examine from './examine';
  8. import OrderDesc from '../orderDetail/orderDesc';
  9. import { getLiquidationStatus, getNewOrderStatus, getRefundStatus } from '@/tools';
  10. import { ChooseList } from "../../order/orderNew/chooseList";
  11. const { TabPane } = Tabs
  12. const TuiDan = React.createClass({
  13. departmentList() {
  14. this.setState({
  15. loading: true
  16. });
  17. $.ajax({
  18. method: "get",
  19. dataType: "json",
  20. crossDomain: false,
  21. url: globalConfig.context + "/api/admin/organization/selectSuperId",
  22. data: {},
  23. success: function (data) {
  24. let thedata = data.data;
  25. let theArr = [];
  26. if (!thedata) {
  27. if (data.error && data.error.length) {
  28. message.warning(data.error[0].message);
  29. }
  30. } else {
  31. thedata.map(function (item, index) {
  32. theArr.push({
  33. key: index,
  34. name: item.name,
  35. id: item.id
  36. });
  37. });
  38. }
  39. this.setState({
  40. departmentArr: theArr
  41. });
  42. }.bind(this)
  43. }).always(
  44. function () {
  45. this.setState({
  46. loading: false
  47. });
  48. }.bind(this)
  49. );
  50. },
  51. loadData(pageNo) {
  52. this.state.data = [];
  53. this.setState({
  54. selectedRowKeys: [],
  55. selectedRowKey: [],
  56. page: pageNo,
  57. loading: true
  58. });
  59. $.ajax({
  60. method: "get",
  61. dataType: "json",
  62. crossDomain: false,
  63. url: globalConfig.context + "/api/admin/financial/getRefundList",
  64. data: {
  65. pageNo: pageNo || 1,
  66. pageSize: this.state.pagination.pageSize,
  67. id: this.state.orderRefundSearch,
  68. buyName: this.state.nameSearch, //客户名称
  69. orderNo: this.state.orderNoSearch,
  70. refundStatus: this.state.refundStatus,
  71. startTime: this.state.releaseDate[0],
  72. endTime: this.state.releaseDate[1],
  73. departmentId: this.state.departmenttList
  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. } else {
  82. for (let i = 0; i < data.data.list.length; i++) {
  83. let thisdata = data.data.list[i];
  84. theArr.push({
  85. key: i,
  86. id: thisdata.id,
  87. orderNo: thisdata.orderNo,
  88. orderType: thisdata.orderType,
  89. buyName: thisdata.buyName,
  90. companyName: thisdata.buyName,
  91. buyerName: thisdata.saleName,
  92. contractNo: thisdata.contractNo,
  93. buyerId: "0",
  94. refundAmount: thisdata.refundAmount,
  95. companyId: thisdata.buyid,
  96. orderStatus: thisdata.orderStatus,
  97. liquidationStatus: thisdata.liquidationStatus,
  98. refundStatus: thisdata.refundStatus,
  99. saleName: thisdata.saleName,
  100. createTime: thisdata.createTime
  101. ? new Date(thisdata.createTime).toLocaleString()
  102. : ""
  103. });
  104. }
  105. }
  106. this.state.pagination.current = data.data.pageNo;
  107. this.state.pagination.total = data.data.totalCount;
  108. if (data.data && data.data.list && !data.data.list.length) {
  109. this.state.pagination.current = 0;
  110. this.state.pagination.total = 0;
  111. }
  112. this.setState({
  113. totalPage: data.data.totalPage,
  114. dataSource: theArr,
  115. pagination: this.state.pagination
  116. });
  117. }.bind(this)
  118. }).always(
  119. function () {
  120. this.setState({
  121. loading: false
  122. });
  123. }.bind(this)
  124. );
  125. },
  126. getInitialState() {
  127. return {
  128. searchMore: true,
  129. assignVisible: false,
  130. releaseDate: [],
  131. totalPage: 0,
  132. assignData: [],
  133. // 子组件改变的表格title数组
  134. changeList: undefined,
  135. boHuivisible: false,
  136. selectedRowKeys: [],
  137. selectedRows: [],
  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: "id",
  155. key: "id"
  156. // fixed: "left"
  157. },
  158. {
  159. title: "申请退单时间",
  160. dataIndex: "createTime",
  161. key: "createTime"
  162. },
  163. {
  164. title: "订单编号",
  165. dataIndex: "orderNo",
  166. key: "orderNo"
  167. },
  168. {
  169. title: "客户名称",
  170. dataIndex: "buyName",
  171. key: "buyName"
  172. },
  173. {
  174. title: "订单状态",
  175. dataIndex: "orderStatus",
  176. key: "orderStatus",
  177. render: text => {
  178. return getNewOrderStatus(text);
  179. }
  180. },
  181. {
  182. title: "订单负责人",
  183. dataIndex: "saleName",
  184. key: "saleName"
  185. },
  186. {
  187. title: "结算状态",
  188. dataIndex: "liquidationStatus",
  189. key: "liquidationStatus",
  190. render: text => {
  191. return getLiquidationStatus(text);
  192. }
  193. },
  194. {
  195. title: "审批状态",
  196. dataIndex: "refundStatus",
  197. key: "refundStatus",
  198. render: text => {
  199. return getRefundStatus(text);
  200. }
  201. },
  202. {
  203. title: "操作",
  204. dataIndex: "caozuo",
  205. key: "caouzo",
  206. render: (text, recard) => {
  207. return (
  208. <div>
  209. {recard.refundStatus == 1 && (
  210. <Button
  211. type="primary"
  212. onClick={e => {
  213. e.stopPropagation(), this.evaluate(recard);
  214. }}
  215. >
  216. 添加退款记录
  217. </Button>
  218. )}
  219. {recard.refundStatus == 0 && (
  220. <Button
  221. type="primary"
  222. onClick={e => {
  223. e.stopPropagation(), this.reject(recard);
  224. }}
  225. >
  226. 审批
  227. </Button>
  228. )}
  229. </div>
  230. );
  231. }
  232. }
  233. ],
  234. dataSource: [],
  235. examineData: {},
  236. searchTime: [,]
  237. };
  238. },
  239. /* 添加收款记录 */
  240. evaluate(recard) {
  241. this.state.assignData = recard;
  242. this.setState({
  243. assignVisible: true
  244. });
  245. },
  246. /* 驳回 */
  247. reject(recard) {
  248. this.setState({
  249. examineData: recard,
  250. examineVisible: true
  251. });
  252. },
  253. componentWillMount() {
  254. this.loadData();
  255. this.departmentList();
  256. },
  257. tableRowClick(record) {
  258. this.state.RowData = record;
  259. this.setState({
  260. showDesc: true
  261. });
  262. },
  263. closeExamine(e, s, nub) {
  264. this.state.examineData = {};
  265. this.state.examineVisible = e;
  266. if (s) {
  267. if (nub == "2") {
  268. if (
  269. this.state.pagination.current == this.state.totalPage &&
  270. this.state.pagination.total % 10 == 1
  271. ) {
  272. this.loadData(this.state.page - 1);
  273. } else {
  274. this.loadData(this.state.page);
  275. }
  276. } else {
  277. this.loadData(this.state.page);
  278. }
  279. }
  280. },
  281. closeDesc(e, s) {
  282. this.state.RowData = {};
  283. this.state.showDesc = e;
  284. if (s) {
  285. this.loadData(this.state.page);
  286. }
  287. },
  288. closeAssign(e, s) {
  289. this.state.assignData = {};
  290. this.state.assignVisible = e;
  291. if (s) {
  292. this.loadData(this.state.page);
  293. }
  294. },
  295. search() {
  296. this.loadData();
  297. },
  298. reset() {
  299. this.state.nameSearch = "";
  300. this.state.orderRefundSearch = "";
  301. this.state.releaseDate = [];
  302. this.state.orderNoSearch = "";
  303. this.state.departmenttList = undefined;
  304. this.state.refundStatus = undefined;
  305. this.loadData();
  306. },
  307. searchSwitch() {
  308. this.setState({
  309. searchMore: !this.state.searchMore
  310. });
  311. },
  312. changeList(arr) {
  313. const newArr = [];
  314. this.state.columns.forEach(item => {
  315. arr.forEach(val => {
  316. if (val === item.title) {
  317. newArr.push(item);
  318. }
  319. });
  320. });
  321. this.setState({
  322. changeList: newArr
  323. });
  324. },
  325. render() {
  326. const { RangePicker } = DatePicker;
  327. var departmentArr = this.state.departmentArr || [];
  328. return (
  329. <div className="user-content">
  330. <div className="content-title" style={{ marginBottom: 10 }}>
  331. <span style={{ fontWeight: 900, fontSize: 16 }}>退单管理</span>
  332. </div>
  333. <Tabs
  334. defaultActiveKey="1"
  335. onChange={this.callback}
  336. className="test">
  337. <TabPane tab="搜索" key="1">
  338. <div className="user-search">
  339. <InputNumber
  340. min={0}
  341. max={2147483647}
  342. formatter={value =>
  343. `${value && !isNaN(value) ? parseInt(value) : ""}`
  344. }
  345. style={{ marginRight: 10, width: 120, marginLeft: 10 }}
  346. placeholder="退单编号"
  347. value={this.state.orderRefundSearch}
  348. onChange={e => {
  349. this.setState({ orderRefundSearch: e });
  350. }}
  351. />
  352. <Input
  353. placeholder="订单编号"
  354. value={this.state.orderNoSearch}
  355. onChange={e => {
  356. this.setState({ orderNoSearch: e.target.value });
  357. }}
  358. />
  359. <Input
  360. placeholder="客户名称"
  361. value={this.state.nameSearch}
  362. onChange={e => {
  363. this.setState({ nameSearch: e.target.value });
  364. }}
  365. />
  366. <Select
  367. placeholder="订单部门"
  368. style={{ width: 150, marginRight: 10 }}
  369. value={this.state.departmenttList}
  370. onChange={e => {
  371. this.setState({ departmenttList: e });
  372. }}
  373. >
  374. {departmentArr.map(function (item) {
  375. return <Select.Option key={item.id}>{item.name}</Select.Option>;
  376. })}
  377. </Select>
  378. <Select
  379. onChange={e => {
  380. this.setState({ refundStatus: e });
  381. }}
  382. style={{ width: 160, marginRight: 5 }}
  383. placeholder="审核状态"
  384. value={this.state.refundStatus}
  385. >
  386. <Option value="0">未审核</Option>
  387. <Option value="1">审核通过</Option>
  388. <Option value="2">审核拒绝</Option>
  389. </Select>
  390. <span style={{ marginRight: 10 }}>退单时间 :</span>
  391. <RangePicker
  392. value={[
  393. this.state.releaseDate[0]
  394. ? moment(this.state.releaseDate[0])
  395. : null,
  396. this.state.releaseDate[1]
  397. ? moment(this.state.releaseDate[1])
  398. : null
  399. ]}
  400. onChange={(data, dataString) => {
  401. this.setState({ releaseDate: dataString });
  402. }}
  403. />
  404. <Button
  405. type="primary"
  406. onClick={this.search}
  407. style={{ marginLeft: 10 }}
  408. >
  409. 搜索
  410. </Button>
  411. <Button onClick={this.reset}>重置</Button>
  412. </div>
  413. </TabPane>
  414. <TabPane tab="更改表格数据" key="2">
  415. <div style={{ marginLeft: 10, marginTop: 10 }}>
  416. <ChooseList
  417. columns={this.state.columns}
  418. changeFn={this.changeList}
  419. changeList={this.state.changeList}
  420. top={55}
  421. /></div>
  422. </TabPane>
  423. </Tabs>
  424. <div className="patent-table">
  425. <Spin spinning={this.state.loading}>
  426. <Table
  427. bordered
  428. columns={
  429. this.state.changeList == undefined
  430. ? this.state.columns
  431. : this.state.changeList
  432. }
  433. dataSource={this.state.dataSource}
  434. scroll={{ x: 1500, y: 0 }}
  435. rowSelection={false}
  436. pagination={this.state.pagination}
  437. onRowClick={this.tableRowClick.bind(this)}
  438. bordered
  439. size="small"
  440. />
  441. </Spin>
  442. </div>
  443. <Receivable
  444. title="退款记录"
  445. api="/api/admin/financial/addRefundFlow"
  446. data={this.state.assignData}
  447. showDesc={this.state.assignVisible}
  448. closeDesc={this.closeAssign.bind(this)}
  449. />
  450. <Examine
  451. data={this.state.examineData}
  452. showDesc={this.state.examineVisible}
  453. closeDesc={this.closeExamine.bind(this)}
  454. />
  455. <OrderDesc
  456. data={this.state.RowData}
  457. showDesc={this.state.showDesc}
  458. closeDesc={this.closeDesc.bind(this)}
  459. />
  460. </div>
  461. );
  462. }
  463. });
  464. export default TuiDan;