huiKuan.jsx 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550
  1. import React from "react";
  2. import $ from "jquery/src/ajax";
  3. import moment from "moment";
  4. import "./public.less";
  5. import {
  6. Form,
  7. Button,
  8. Input,
  9. Select,
  10. Spin,
  11. Table,
  12. message,
  13. Modal,
  14. Upload,
  15. DatePicker,
  16. } from "antd";
  17. import {
  18. getProjectStatus,
  19. getProvinceA,
  20. getInvoiceStatus,
  21. getprovince,
  22. getStatus,
  23. getPeople,
  24. splitUrl
  25. } from "@/tools";
  26. import { ChooseList } from "../../../../component/manageCenter/order/orderNew/chooseList";
  27. import "./huiKuan.less"
  28. const { RangePicker } = DatePicker;
  29. const FormItem = Form.Item;
  30. const { TextArea } = Input;
  31. const inSpecial = React.createClass({
  32. loadData(pageNo) {
  33. this.state.data = [];
  34. this.setState({
  35. loading: true
  36. });
  37. $.ajax({
  38. method: "get",
  39. dataType: "json",
  40. crossDomain: false,
  41. url:
  42. globalConfig.context +
  43. "/api/admin/orderInvoice/approvalOrderInvoiceList",
  44. data: {
  45. pageNo: pageNo || 1,
  46. pageSize: this.state.pagination.pageSize,
  47. name: this.state.nameSearch, //客户名称
  48. userName: this.state.userName,
  49. status: this.state.status,
  50. orderNo: this.state.orderNoSearch,
  51. orderDep: this.state.departmenttList,
  52. type: 0,
  53. approval: this.state.processStatus
  54. },
  55. success: function(data) {
  56. let theArr = [];
  57. if (!data.data || !data.data.list) {
  58. if (data.error && data.error.length) {
  59. message.warning(data.error[0].message);
  60. }
  61. } else {
  62. for (let i = 0; i < data.data.list.length; i++) {
  63. let thisdata = data.data.list[i];
  64. theArr.push({
  65. key: i,
  66. id: thisdata.id,
  67. status: thisdata.status,
  68. unitName: thisdata.unitName,
  69. orderno: thisdata.orderno,
  70. name: thisdata.name,
  71. processStatus: thisdata.processStatus,
  72. projectStatus: thisdata.projectStatus,
  73. amount: thisdata.amount,
  74. sumAmount: thisdata.sumAmount,
  75. createTime: thisdata.createTime
  76. ? new Date(thisdata.createTime).toLocaleString()
  77. : "",
  78. settlementAmount: thisdata.settlementAmount,
  79. notAmount: thisdata.notAmount,
  80. approval: thisdata.approval
  81. });
  82. }
  83. }
  84. this.state.pagination.current = data.data.pageNo;
  85. this.state.pagination.total = data.data.totalCount;
  86. if (data.data && data.data.list && !data.data.list.length) {
  87. this.state.pagination.current = 0;
  88. this.state.pagination.total = 0;
  89. }
  90. this.setState({
  91. totalPage: data.data.totalPage,
  92. dataSource: theArr,
  93. pagination: this.state.pagination
  94. });
  95. }.bind(this)
  96. }).always(
  97. function() {
  98. this.setState({
  99. loading: false
  100. });
  101. }.bind(this)
  102. );
  103. },
  104. departmentList() {
  105. this.setState({
  106. loading: true
  107. });
  108. $.ajax({
  109. method: "get",
  110. dataType: "json",
  111. crossDomain: false,
  112. url: globalConfig.context + "/api/admin/organization/selectSuperId",
  113. data: {},
  114. success: function(data) {
  115. let thedata = data.data;
  116. let theArr = [];
  117. if (!thedata) {
  118. if (data.error && data.error.length) {
  119. message.warning(data.error[0].message);
  120. }
  121. } else {
  122. thedata.map(function(item, index) {
  123. theArr.push({
  124. key: index,
  125. name: item.name,
  126. id: item.id
  127. });
  128. });
  129. }
  130. this.setState({
  131. departmentArr: theArr
  132. });
  133. }.bind(this)
  134. }).always(
  135. function() {
  136. this.setState({
  137. loading: false
  138. });
  139. }.bind(this)
  140. );
  141. },
  142. getInitialState() {
  143. return {
  144. visible: false,
  145. selectedRowKeys: [], // Check here to configure the default column
  146. loading: false,
  147. searchMore: true,
  148. assignVisible: false,
  149. releaseDate: [],
  150. totalPage: 0,
  151. boHuivisible: false,
  152. selectedRowKeys: [],
  153. selectedRows: [],
  154. // 弹出层数据
  155. modalData: {},
  156. // userName: "",
  157. contractNo: "",
  158. loading: false,
  159. reason: "",
  160. foo: 0,
  161. // 子组件改变的表格title数组
  162. changeList: undefined,
  163. pagination: {
  164. defaultCurrent: 1,
  165. defaultPageSize: 10,
  166. showQuickJumper: true,
  167. pageSize: 10,
  168. onChange: function(page) {
  169. this.loadData(page);
  170. }.bind(this),
  171. showTotal: function(total) {
  172. return "共" + total + "条数据";
  173. }
  174. },
  175. columns: [
  176. {
  177. title: "合同编号",
  178. dataIndex: "id",
  179. key: "id"
  180. // fixed: "left"
  181. },
  182. {
  183. title: "订单编号",
  184. dataIndex: "orderNo",
  185. key: "orderNo"
  186. },
  187. {
  188. title: "客户名称",
  189. dataIndex: "name",
  190. key: "name"
  191. },
  192. {
  193. title: "合同额",
  194. dataIndex: "hetong",
  195. key: "hetong"
  196. },
  197. {
  198. title: "本次回款(万元)",
  199. dataIndex: "benci",
  200. key: "benci"
  201. },
  202. {
  203. title: "回款时间",
  204. dataIndex: "huiTime",
  205. key: "huiTime"
  206. },
  207. {
  208. title: "批量导入时间",
  209. dataIndex: "daoTime",
  210. key: "daoTime"
  211. },
  212. {
  213. title: "备注",
  214. dataIndex: "remake",
  215. key: "remake"
  216. }
  217. ],
  218. columnsDate: [
  219. {
  220. title: "编号",
  221. dataIndex: "id",
  222. key: "id"
  223. },
  224. {
  225. title: "订单编号",
  226. dataIndex: "orderno",
  227. key: "orderno"
  228. },
  229. {
  230. title: "开票金额(万元)",
  231. dataIndex: "amount",
  232. key: "amount"
  233. },
  234. {
  235. title: "申请时间",
  236. dataIndex: "createTime",
  237. key: "createTime"
  238. },
  239. {
  240. title: "开票状态",
  241. dataIndex: "status",
  242. key: "status",
  243. render: text => {
  244. return getInvoiceStatus(text);
  245. }
  246. }
  247. ],
  248. // dataSource: [
  249. // {
  250. // id: 1,
  251. // orderNo: "w1",
  252. // name: "张三",
  253. // hetong: 3,
  254. // benci: 1,
  255. // huiTime: "2019-10-11",
  256. // daoTime: "2019-10-11",
  257. // remake: "hhhhh",
  258. // key: "w1"
  259. // },
  260. // {
  261. // id: 2,
  262. // orderNo: "w2",
  263. // name: "王五",
  264. // hetong: 3,
  265. // benci: 1,
  266. // huiTime: "2019-10-11",
  267. // daoTime: "2019-10-11",
  268. // remake: "zzzzzz",
  269. // key: "w2"
  270. // },
  271. // {
  272. // id: 3,
  273. // orderNo: "w3",
  274. // name: "二麻子",
  275. // hetong: 3,
  276. // benci: 1,
  277. // huiTime: "2019-10-11",
  278. // daoTime: "2019-10-11",
  279. // remake: "yyyyyyy",
  280. // key: "w3"
  281. // },
  282. // {
  283. // id: 4,
  284. // orderNo: "w4",
  285. // name: "jax",
  286. // hetong: 3,
  287. // benci: 1,
  288. // huiTime: "2019-10-11",
  289. // daoTime: "2019-10-11",
  290. // remake: "bbbbbb",
  291. // key: "w4"
  292. // }
  293. // ],
  294. searchTime: [,]
  295. };
  296. },
  297. search() {
  298. this.loadData();
  299. },
  300. componentWillMount() {
  301. // this.loadData();
  302. this.departmentList();
  303. },
  304. reset() {
  305. this.state.nameSearch = "";
  306. this.state.releaseDate = [];
  307. this.state.orderNoSearch = "";
  308. this.state.userName = "";
  309. this.state.departmenttList = [];
  310. // this.loadData();
  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. onSelectChange(selectedRowKeys) {
  326. console.log("selectedRowKeys changed: ", selectedRowKeys);
  327. this.setState({ selectedRowKeys });
  328. },
  329. showModal() {
  330. this.setState({
  331. visible: true
  332. });
  333. this.state.dataSource.forEach((item) => {
  334. if(item.key == this.state.selectedRowKeys[0]) {
  335. this.setState({
  336. modalData: item
  337. })
  338. }
  339. })
  340. },
  341. handleOk() {
  342. this.setState({ loading: true });
  343. setTimeout(() => {
  344. this.setState({ loading: false, visible: false });
  345. }, 3000);
  346. },
  347. handleCancel() {
  348. this.setState({ visible: false });
  349. },
  350. render() {
  351. const formItemLayout = {
  352. labelCol: { span: 8 },
  353. wrapperCol: { span: 14 }
  354. };
  355. var departmentArr = this.state.departmentArr || [];
  356. const { loading, selectedRowKeys, visible } = this.state;
  357. const rowSelection = {
  358. selectedRowKeys,
  359. onChange: this.onSelectChange,
  360. hideDefaultSelections: true
  361. };
  362. var departmentArr = this.state.departmentArr || [];
  363. return (
  364. <div className="user-content" style={{ position: "relative" }}>
  365. <div className="content-title">
  366. <span>回款</span>
  367. </div>
  368. <div className="user-search">
  369. <Input
  370. placeholder="合同编号"
  371. value={this.state.nameSearch}
  372. onChange={e => {
  373. this.setState({ nameSearch: e.target.value });
  374. }}
  375. />
  376. <Input
  377. placeholder="订单编号"
  378. value={this.state.orderNoSearch}
  379. onChange={e => {
  380. this.setState({ orderNoSearch: e.target.value });
  381. }}
  382. />
  383. <Input
  384. placeholder="客户名称"
  385. value={this.state.userName}
  386. onChange={e => {
  387. this.setState({ userName: e.target.value });
  388. }}
  389. />
  390. <Select
  391. placeholder="订单部门"
  392. style={{ width: 150, marginRight: 10 }}
  393. value={this.state.departmenttList}
  394. onChange={e => {
  395. this.setState({ departmenttList: e });
  396. }}
  397. >
  398. {departmentArr.map(function(item) {
  399. return <Select.Option key={item.id}>{item.name}</Select.Option>;
  400. })}
  401. </Select>
  402. <Button
  403. type="primary"
  404. onClick={this.search}
  405. style={{ marginLeft: 10 }}
  406. >
  407. 搜索
  408. </Button>
  409. <Button onClick={this.reset}>重置</Button>
  410. </div>
  411. <ChooseList
  412. columns={this.state.columns}
  413. changeFn={this.changeList}
  414. changeList={this.state.changeList}
  415. top={55}
  416. display={"inline-block"}
  417. />
  418. <Button
  419. type="primary"
  420. style={{ marginLeft: 15 }}
  421. disabled={this.state.selectedRowKeys.length == 1 ? false : true}
  422. onClick={this.showModal}
  423. >
  424. 修改单条数据
  425. </Button>
  426. <div className="patent-table">
  427. <Spin spinning={this.state.loading}>
  428. <Table
  429. columns={
  430. this.state.changeList == undefined
  431. ? this.state.columns
  432. : this.state.changeList
  433. }
  434. // scroll={{ x: 1500, y: 0 }}
  435. dataSource={this.state.dataSource}
  436. pagination={this.state.pagination}
  437. rowSelection={rowSelection}
  438. bordered
  439. />
  440. </Spin>
  441. </div>
  442. <Modal
  443. width={800}
  444. visible={visible}
  445. title="收款记录"
  446. onOk={this.handleOk}
  447. onCancel={this.handleCancel}
  448. footer={[
  449. <Button key="back" onClick={this.handleCancel}>
  450. 取消
  451. </Button>,
  452. <Button
  453. key="submit"
  454. type="primary"
  455. loading={loading}
  456. onClick={this.handleOk}
  457. >
  458. 保存
  459. </Button>
  460. ]}
  461. >
  462. <p style={{ marginBottom: 10 }}>
  463. 合同编号:{this.state.modalData.name}
  464. </p>
  465. <p style={{ marginBottom: 10 }}>
  466. 订单编号:{this.state.modalData.name}
  467. </p>
  468. <p style={{ marginBottom: 10 }}>
  469. 客户名称:{this.state.modalData.name}
  470. </p>
  471. <p style={{ marginBottom: 10 }}>
  472. 合同额(万元):
  473. <Input
  474. style={{ width: "auto" }}
  475. value={this.state.modalData.hetong}
  476. onChange={e => {
  477. let val = e.target.value;
  478. this.state.modalData.hetong = val;
  479. this.setState({ modalData: this.state.modalData });
  480. }}
  481. />
  482. </p>
  483. <p style={{ marginBottom: 10 }}>
  484. 本次回款(万元):
  485. <Input
  486. style={{ width: "auto" }}
  487. value={this.state.modalData.benci}
  488. onChange={e => {
  489. let val = e.target.value;
  490. this.state.modalData.benci = val;
  491. this.setState({ modalData: this.state.modalData });
  492. }}
  493. />
  494. </p>
  495. <p style={{ marginBottom: 10 }}>
  496. 回款时间:
  497. <DatePicker
  498. showTime
  499. placeholder="选择回款时间"
  500. value={moment(this.state.modalData.huiTime, "YYYY-MM-DD")}
  501. onChange={(v, e) => {
  502. this.state.modalData.huiTime = e;
  503. console.log(e);
  504. this.setState({ modalData: this.state.modalData });
  505. }}
  506. onOk={() => {}}
  507. />
  508. </p>
  509. <p style={{ marginBottom: 10 }}>
  510. 批量导入时间:{this.state.modalData.daoTime}
  511. </p>
  512. <p style={{ marginBottom: 10 }}>
  513. <span style={{ display: "inline-block", marginBottom: 20 }}>
  514. 备注:
  515. </span>
  516. <TextArea
  517. style={{ width: "70%" }}
  518. value={this.state.modalData.remake}
  519. onChange={e => {
  520. this.state.modalData.remake = e.target.value;
  521. console.log(e);
  522. this.setState({ modalData: this.state.modalData });
  523. }}
  524. placeholder="请输入备注信息"
  525. autosize={{ minRows: 3, maxRows: 5 }}
  526. />
  527. </p>
  528. </Modal>
  529. </div>
  530. );
  531. }
  532. });
  533. export default inSpecial;