paiDan.jsx 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541
  1. import React from "react";
  2. import $ from "jquery/src/ajax";
  3. import moment from "moment";
  4. import "./public.less";
  5. import {
  6. Button,
  7. Form,
  8. Input,
  9. Select,
  10. Spin,
  11. Table,
  12. message,
  13. DatePicker,
  14. Modal, Tabs
  15. } from "antd";
  16. import OrderDesc from "@/manageCenter/financialManage/orderDetail/orderDesc";
  17. import Assign from "@/manageCenter/publicComponent/assign";
  18. import { getProcessStatus, getApproval } from "@/tools";
  19. import {ChooseList} from "../../order/orderNew/chooseList";
  20. const FormItem = Form.Item;
  21. const {TabPane} = Tabs;
  22. const PaiDan = React.createClass({
  23. departmentList() {
  24. this.setState({
  25. loading: true
  26. });
  27. $.ajax({
  28. method: "get",
  29. dataType: "json",
  30. crossDomain: false,
  31. url: globalConfig.context + "/api/admin/organization/selectSuperId",
  32. data: {},
  33. success: function(data) {
  34. let thedata = data.data;
  35. let theArr = [];
  36. if (!thedata) {
  37. if (data.error && data.error.length) {
  38. message.warning(data.error[0].message);
  39. }
  40. } else {
  41. thedata.map(function(item, index) {
  42. theArr.push({
  43. key: index,
  44. name: item.name,
  45. id: item.id
  46. });
  47. });
  48. }
  49. this.setState({
  50. departmentArr: theArr
  51. });
  52. }.bind(this)
  53. }).always(
  54. function() {
  55. this.setState({
  56. loading: false
  57. });
  58. }.bind(this)
  59. );
  60. },
  61. loadData(pageNo) {
  62. this.state.data = [];
  63. this.setState({
  64. selectedRowKeys: [],
  65. selectedRowKey: [],
  66. page: pageNo,
  67. loading: true
  68. });
  69. $.ajax({
  70. method: "get",
  71. dataType: "json",
  72. crossDomain: false,
  73. url: globalConfig.context + "/api/admin/financial/allUnassignedOrder",
  74. data: {
  75. pageNo: pageNo || 1,
  76. pageSize: this.state.pagination.pageSize,
  77. buyerName: this.state.nameSearch, //客户名称
  78. orderNo: this.state.orderNoSearch,
  79. startTime: this.state.releaseDate[0],
  80. endTime: this.state.releaseDate[1],
  81. processStatus: this.state.processStatusSearch,
  82. contractNo: this.state.contractNoSearch,
  83. departmentId: this.state.departmenttList,
  84. outsource: 0
  85. },
  86. success: function(data) {
  87. let theArr = [];
  88. if (!data.data || !data.data.list) {
  89. if (data.error && data.error.length) {
  90. message.warning(data.error[0].message);
  91. }
  92. } else {
  93. for (let i = 0; i < data.data.list.length; i++) {
  94. let thisdata = data.data.list[i];
  95. theArr.push({
  96. key: i,
  97. orderNo: thisdata.orderNo,
  98. approval: thisdata.approval,
  99. orderType: thisdata.orderType,
  100. processStatus: thisdata.processStatus,
  101. signTotalAmount: thisdata.signTotalAmount,
  102. buyerName: thisdata.buyerName,
  103. sellerName: thisdata.sellerName,
  104. createTime: thisdata.createTime
  105. ? new Date(thisdata.createTime).toLocaleString()
  106. : "",
  107. signTime: thisdata.signTime,
  108. contractNo: thisdata.contractNo,
  109. financeId: thisdata.financeId,
  110. departmentName: thisdata.departmentName
  111. });
  112. }
  113. }
  114. this.state.pagination.current = data.data.pageNo;
  115. this.state.pagination.total = data.data.totalCount;
  116. if (data.data && data.data.list && !data.data.list.length) {
  117. this.state.pagination.current = 0;
  118. this.state.pagination.total = 0;
  119. }
  120. this.setState({
  121. totalPage: data.data.totalPage,
  122. dataSource: theArr,
  123. pagination: this.state.pagination
  124. });
  125. }.bind(this)
  126. }).always(
  127. function() {
  128. this.setState({
  129. loading: false
  130. });
  131. }.bind(this)
  132. );
  133. },
  134. getInitialState() {
  135. return {
  136. searchMore: true,
  137. assignVisible: false,
  138. releaseDate: [],
  139. totalPage: 0,
  140. processStatusSearch: "2",
  141. boHuivisible: false,
  142. selectedRowKeys: [],
  143. selectedRows: [],
  144. loading: false,
  145. pagination: {
  146. defaultCurrent: 1,
  147. defaultPageSize: 10,
  148. showQuickJumper: true,
  149. pageSize: 10,
  150. onChange: function(page) {
  151. this.loadData(page);
  152. }.bind(this),
  153. showTotal: function(total) {
  154. return "共" + total + "条数据";
  155. }
  156. },
  157. columns: [
  158. {
  159. title: "订单编号",
  160. dataIndex: "orderNo",
  161. key: "orderNo"
  162. },
  163. {
  164. title: "合同编号",
  165. dataIndex: "contractNo",
  166. key: "contractNo"
  167. },
  168. {
  169. title: "下单时间",
  170. dataIndex: "createTime",
  171. key: "createTime"
  172. },
  173. {
  174. title: "签单时间",
  175. dataIndex: "signTime",
  176. key: "signTime"
  177. },
  178. {
  179. title: "签单客户",
  180. dataIndex: "buyerName",
  181. key: "buyerName",
  182. render: text => {
  183. return text && text.length > 8 ? text.substr(0, 8) + "..." : text;
  184. }
  185. },
  186. {
  187. title: "流程状态",
  188. dataIndex: "processStatus",
  189. key: "processStatus",
  190. render: text => {
  191. return getProcessStatus(text);
  192. }
  193. },
  194. {
  195. title: "订单部门",
  196. dataIndex: "departmentName",
  197. key: "departmentName",
  198. render: text => {
  199. return text && text.length > 8 ? text.substr(0, 8) + "..." : text;
  200. }
  201. },
  202. {
  203. title: "订单总金额(万)",
  204. dataIndex: "signTotalAmount",
  205. key: "signTotalAmount"
  206. },
  207. {
  208. title: "是否特批",
  209. dataIndex: "approval",
  210. key: "approval",
  211. render: text => {
  212. return getApproval(text);
  213. }
  214. },
  215. {
  216. title: "订单负责人",
  217. dataIndex: "sellerName",
  218. key: "sellerName"
  219. },
  220. {
  221. title: "操作",
  222. dataIndex: "caozuo",
  223. key: "caouzo",
  224. render: (text, recard) => {
  225. return <div>{this.judgeFenpai(recard)}</div>;
  226. }
  227. }
  228. ],
  229. dataSource: [],
  230. searchTime: [,]
  231. };
  232. },
  233. /* 判断是否有分派按钮 */
  234. judgeFenpai(recard) {
  235. if (recard.approval === 2) {
  236. if (recard.financeId === null || recard.financeId === "") {
  237. return (
  238. <Button
  239. type="primary"
  240. onClick={e => {
  241. e.stopPropagation(), this.evaluate(recard);
  242. }}
  243. >
  244. 分派
  245. </Button>
  246. );
  247. } else {
  248. return undefined;
  249. }
  250. } else if (recard.processStatus <= 2) {
  251. return (
  252. <Button
  253. type="primary"
  254. onClick={e => {
  255. e.stopPropagation(), this.evaluate(recard);
  256. }}
  257. >
  258. 分派
  259. </Button>
  260. );
  261. } else {
  262. return undefined;
  263. }
  264. },
  265. /* 分派 */
  266. evaluate(recard) {
  267. this.state.assignData = recard;
  268. this.setState({
  269. assignVisible: true
  270. });
  271. },
  272. /* 驳回 */
  273. reject(recard) {
  274. this.setState({
  275. bohuiData: recard,
  276. boHuiVisible: true,
  277. content: ""
  278. });
  279. },
  280. boHuiOk() {
  281. this.setState({
  282. boHuiVisible: false
  283. });
  284. if (
  285. this.state.pagination.current == this.state.totalPage &&
  286. this.state.pagination.total % 10 == 1
  287. ) {
  288. this.loadData(this.state.page - 1);
  289. } else {
  290. this.loadData(this.state.page);
  291. }
  292. },
  293. boHuiCancel() {
  294. this.setState({
  295. boHuiVisible: false
  296. });
  297. },
  298. componentWillMount() {
  299. this.departmentList();
  300. this.loadData();
  301. },
  302. tableRowClick(record) {
  303. this.state.RowData = record;
  304. this.setState({
  305. showDesc: true
  306. });
  307. },
  308. closeDesc(e, s) {
  309. this.state.showDesc = e;
  310. if (s) {
  311. this.loadData(this.state.page);
  312. }
  313. },
  314. closeAssign(e, s) {
  315. this.state.assignVisible = e;
  316. if (s) {
  317. if (
  318. this.state.pagination.current == this.state.totalPage &&
  319. this.state.pagination.total % 10 == 1
  320. ) {
  321. this.loadData(this.state.page - 1);
  322. } else {
  323. this.loadData(this.state.page);
  324. }
  325. }
  326. },
  327. search() {
  328. this.loadData();
  329. },
  330. reset() {
  331. this.state.nameSearch = "";
  332. this.state.releaseDate = [];
  333. this.state.orderNoSearch = "";
  334. this.state.departmenttList = undefined;
  335. this.state.processStatus = [];
  336. this.state.contractNoSearch = "";
  337. this.loadData();
  338. },
  339. searchSwitch() {
  340. this.setState({
  341. searchMore: !this.state.searchMore
  342. });
  343. },
  344. changeList(arr) {
  345. const newArr = [];
  346. this.state.columns.forEach(item => {
  347. arr.forEach(val => {
  348. if (val === item.title) {
  349. newArr.push(item);
  350. }
  351. });
  352. });
  353. this.setState({
  354. changeList: newArr
  355. });
  356. },
  357. render() {
  358. var departmentArr = this.state.departmentArr || [];
  359. const { RangePicker } = DatePicker;
  360. return (
  361. <div className="user-content">
  362. <div className="content-title">
  363. <span>派单管理</span>
  364. </div>
  365. <Tabs defaultActiveKey="1" className="test">
  366. <TabPane tab="搜索" key="1">
  367. <div className="user-search">
  368. <Input
  369. placeholder="客户名称"
  370. value={this.state.nameSearch}
  371. onChange={e => {
  372. this.setState({ nameSearch: e.target.value });
  373. }}
  374. />
  375. <Input
  376. placeholder="订单编号"
  377. value={this.state.orderNoSearch}
  378. onChange={e => {
  379. this.setState({ orderNoSearch: e.target.value });
  380. }}
  381. />
  382. <Select
  383. placeholder="订单部门"
  384. style={{ width: 150, marginRight: 10 }}
  385. value={this.state.departmenttList}
  386. onChange={e => {
  387. this.setState({ departmenttList: e });
  388. }}
  389. >
  390. {departmentArr.map(function(item) {
  391. return <Select.Option key={item.id}>{item.name}</Select.Option>;
  392. })}
  393. </Select>
  394. <Select
  395. placeholder="流程状态"
  396. onChange={e => {
  397. this.setState({ processStatusSearch: e });
  398. }}
  399. style={{ width: 160, marginRight: 5 }}
  400. value={this.state.processStatusSearch}
  401. >
  402. <Option value="2">未分配</Option>
  403. <Option value="3">已分配</Option>
  404. </Select>
  405. <Input
  406. placeholder="合同编号"
  407. value={this.state.contractNoSearch}
  408. onChange={e => {
  409. this.setState({
  410. contractNoSearch: e.target.value
  411. });
  412. }}
  413. />
  414. <span style={{ marginRight: 10 }}>下单时间 :</span>
  415. <RangePicker
  416. value={[
  417. this.state.releaseDate[0]
  418. ? moment(this.state.releaseDate[0])
  419. : null,
  420. this.state.releaseDate[1]
  421. ? moment(this.state.releaseDate[1])
  422. : null
  423. ]}
  424. onChange={(data, dataString) => {
  425. this.setState({ releaseDate: dataString });
  426. }}
  427. />
  428. <Button
  429. type="primary"
  430. onClick={this.search}
  431. style={{ marginLeft: 10 }}
  432. >
  433. 搜索
  434. </Button>
  435. <Button onClick={this.reset}>重置</Button>
  436. </div>
  437. </TabPane>
  438. <TabPane tab="更改表格显示数据" key="2">
  439. <div style={{ marginLeft: 10 }}>
  440. <ChooseList
  441. columns={this.state.columns}
  442. changeFn={this.changeList}
  443. changeList={this.state.changeList}
  444. top={55}
  445. margin={11}
  446. />
  447. </div>
  448. </TabPane>
  449. </Tabs>
  450. <div className="patent-table">
  451. <Spin spinning={this.state.loading}>
  452. <Table
  453. columns={
  454. this.state.changeList
  455. ? this.state.changeList
  456. : this.state.columns
  457. }
  458. dataSource={this.state.dataSource}
  459. scroll={{ x: 1500, y: 0 }}
  460. rowSelection={false}
  461. pagination={this.state.pagination}
  462. onRowClick={this.tableRowClick.bind(this)}
  463. bordered
  464. size="small"
  465. />
  466. </Spin>
  467. </div>
  468. <OrderDesc
  469. data={this.state.RowData}
  470. showDesc={this.state.showDesc}
  471. closeDesc={this.closeDesc.bind(this)}
  472. />
  473. <Assign
  474. title="订单"
  475. selApi="/api/admin/financial/distributionFinance"
  476. data={this.state.assignData}
  477. fenpaiData={4}
  478. showDesc={this.state.assignVisible}
  479. closeDesc={this.closeAssign.bind(this)}
  480. roleName={"财务专员"}
  481. requestMethod={"post"}
  482. />
  483. <Modal
  484. visible={this.state.boHuiVisible}
  485. width="400px"
  486. title="驳回备注"
  487. footer=""
  488. onOk={this.boHuiOk}
  489. onCancel={this.boHuiCancel}
  490. >
  491. <Form layout="horizontal" onSubmit={this.boHuiSubmit}>
  492. <Spin spinning={this.state.loading}>
  493. <FormItem
  494. labelCol={{ span: 5 }}
  495. wrapperCol={{ span: 16 }}
  496. label={
  497. <span>
  498. <strong style={{ color: "#f00" }}>*</strong>驳回原因
  499. </span>
  500. }
  501. >
  502. <Input
  503. type="textarea"
  504. rows={4}
  505. placeholder="请输入驳回原因"
  506. value={this.state.content}
  507. onChange={e => {
  508. this.setState({ content: e.target.value });
  509. }}
  510. />
  511. </FormItem>
  512. <FormItem wrapperCol={{ span: 12, offset: 5 }}>
  513. <Button
  514. type="primary"
  515. htmlType="submit"
  516. style={{ marginRight: 20 }}
  517. >
  518. 驳回
  519. </Button>
  520. <Button
  521. type="default"
  522. onClick={() => {
  523. this.boHuiCancel();
  524. }}
  525. >
  526. 取消
  527. </Button>
  528. </FormItem>
  529. </Spin>
  530. </Form>
  531. </Modal>
  532. </div>
  533. );
  534. }
  535. });
  536. export default PaiDan;