huiKuan.jsx 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436
  1. import React from "react";
  2. import $ from "jquery/src/ajax";
  3. import "./public.less";
  4. import {
  5. Form,
  6. Button,
  7. Input,
  8. Select,
  9. Spin,
  10. Table,
  11. message,
  12. Modal,
  13. Upload
  14. } from "antd";
  15. import {
  16. getProjectStatus,
  17. getProvinceA,
  18. getInvoiceStatus,
  19. getprovince,
  20. getStatus,
  21. getPeople,
  22. splitUrl
  23. } from "@/tools";
  24. import { ChooseList } from "../../../../component/manageCenter/order/orderNew/chooseList";
  25. import "./huiKuan.less"
  26. const FormItem = Form.Item;
  27. const inSpecial = React.createClass({
  28. loadData(pageNo) {
  29. this.state.data = [];
  30. this.setState({
  31. loading: true
  32. });
  33. $.ajax({
  34. method: "get",
  35. dataType: "json",
  36. crossDomain: false,
  37. url:
  38. globalConfig.context +
  39. "/api/admin/orderInvoice/approvalOrderInvoiceList",
  40. data: {
  41. pageNo: pageNo || 1,
  42. pageSize: this.state.pagination.pageSize,
  43. name: this.state.nameSearch, //客户名称
  44. userName: this.state.userName,
  45. status: this.state.status,
  46. orderNo: this.state.orderNoSearch,
  47. orderDep: this.state.departmenttList,
  48. type: 0,
  49. approval: this.state.processStatus
  50. },
  51. success: function(data) {
  52. let theArr = [];
  53. if (!data.data || !data.data.list) {
  54. if (data.error && data.error.length) {
  55. message.warning(data.error[0].message);
  56. }
  57. } else {
  58. for (let i = 0; i < data.data.list.length; i++) {
  59. let thisdata = data.data.list[i];
  60. theArr.push({
  61. key: i,
  62. id: thisdata.id,
  63. status: thisdata.status,
  64. unitName: thisdata.unitName,
  65. orderno: thisdata.orderno,
  66. name: thisdata.name,
  67. processStatus: thisdata.processStatus,
  68. projectStatus: thisdata.projectStatus,
  69. amount: thisdata.amount,
  70. sumAmount: thisdata.sumAmount,
  71. createTime: thisdata.createTime
  72. ? new Date(thisdata.createTime).toLocaleString()
  73. : "",
  74. settlementAmount: thisdata.settlementAmount,
  75. notAmount: thisdata.notAmount,
  76. approval: thisdata.approval
  77. });
  78. }
  79. }
  80. this.state.pagination.current = data.data.pageNo;
  81. this.state.pagination.total = data.data.totalCount;
  82. if (data.data && data.data.list && !data.data.list.length) {
  83. this.state.pagination.current = 0;
  84. this.state.pagination.total = 0;
  85. }
  86. this.setState({
  87. totalPage: data.data.totalPage,
  88. dataSource: theArr,
  89. pagination: this.state.pagination
  90. });
  91. }.bind(this)
  92. }).always(
  93. function() {
  94. this.setState({
  95. loading: false
  96. });
  97. }.bind(this)
  98. );
  99. },
  100. getInitialState() {
  101. return {
  102. visible: false,
  103. selectedRowKeys: [], // Check here to configure the default column
  104. loading: false,
  105. searchMore: true,
  106. assignVisible: false,
  107. releaseDate: [],
  108. totalPage: 0,
  109. boHuivisible: false,
  110. selectedRowKeys: [],
  111. selectedRows: [],
  112. //开票状态
  113. //用户名称搜索
  114. // userName: "",
  115. contractNo: "",
  116. loading: false,
  117. reason: "",
  118. foo: 0,
  119. // 子组件改变的表格title数组
  120. changeList: undefined,
  121. pagination: {
  122. defaultCurrent: 1,
  123. defaultPageSize: 10,
  124. showQuickJumper: true,
  125. pageSize: 10,
  126. onChange: function(page) {
  127. this.loadData(page);
  128. }.bind(this),
  129. showTotal: function(total) {
  130. return "共" + total + "条数据";
  131. }
  132. },
  133. columns: [
  134. {
  135. title: "合同编号",
  136. dataIndex: "id",
  137. key: "id"
  138. // fixed: "left"
  139. },
  140. {
  141. title: "订单编号",
  142. dataIndex: "orderNo",
  143. key: "orderNo"
  144. },
  145. {
  146. title: "客户名称",
  147. dataIndex: "name",
  148. key: "name"
  149. },
  150. {
  151. title: "合同额",
  152. dataIndex: "hetong",
  153. key: "hetong"
  154. },
  155. {
  156. title: "本次回款(万元)",
  157. dataIndex: "benci",
  158. key: "benci"
  159. },
  160. {
  161. title: "回款时间",
  162. dataIndex: "huiTime",
  163. key: "huiTime"
  164. },
  165. {
  166. title: "批量导入时间",
  167. dataIndex: "daoTime",
  168. key: "daoTime"
  169. },
  170. {
  171. title: "备注",
  172. dataIndex: "remake",
  173. key: "remake"
  174. }
  175. ],
  176. columnsDate: [
  177. {
  178. title: "编号",
  179. dataIndex: "id",
  180. key: "id"
  181. },
  182. {
  183. title: "订单编号",
  184. dataIndex: "orderno",
  185. key: "orderno"
  186. },
  187. {
  188. title: "开票金额(万元)",
  189. dataIndex: "amount",
  190. key: "amount"
  191. },
  192. {
  193. title: "申请时间",
  194. dataIndex: "createTime",
  195. key: "createTime"
  196. },
  197. {
  198. title: "开票状态",
  199. dataIndex: "status",
  200. key: "status",
  201. render: text => {
  202. return getInvoiceStatus(text);
  203. }
  204. }
  205. ],
  206. dataSource: [
  207. {
  208. id: 1,
  209. orderNo: "w1",
  210. name: "张三",
  211. hetong: 3,
  212. benci: 1,
  213. huiTime: "2019-10-11",
  214. daoTime: "2019-10-11",
  215. remake: "hhhhh",
  216. key: "w1"
  217. },
  218. {
  219. id: 2,
  220. orderNo: "w2",
  221. name: "王五",
  222. hetong: 3,
  223. benci: 1,
  224. huiTime: "2019-10-11",
  225. daoTime: "2019-10-11",
  226. remake: "zzzzzz",
  227. key: "w2"
  228. },
  229. {
  230. id: 3,
  231. orderNo: "w3",
  232. name: "二麻子",
  233. hetong: 3,
  234. benci: 1,
  235. huiTime: "2019-10-11",
  236. daoTime: "2019-10-11",
  237. remake: "yyyyyyy",
  238. key: "w3"
  239. },
  240. {
  241. id: 4,
  242. orderNo: "w4",
  243. name: "jax",
  244. hetong: 3,
  245. benci: 1,
  246. huiTime: "2019-10-11",
  247. daoTime: "2019-10-11",
  248. remake: "bbbbbb",
  249. key: "w4"
  250. }
  251. ],
  252. searchTime: [,]
  253. };
  254. },
  255. search() {
  256. this.loadData();
  257. },
  258. componentWillMount() {
  259. // this.loadData();
  260. },
  261. reset() {
  262. this.state.nameSearch = "";
  263. this.state.releaseDate = [];
  264. this.state.orderNoSearch = "";
  265. this.state.userName = "";
  266. // this.loadData();
  267. },
  268. changeList(arr) {
  269. const newArr = [];
  270. this.state.columns.forEach(item => {
  271. arr.forEach(val => {
  272. if (val === item.title) {
  273. newArr.push(item);
  274. }
  275. });
  276. });
  277. this.setState({
  278. changeList: newArr
  279. });
  280. },
  281. onSelectChange(selectedRowKeys) {
  282. console.log('selectedRowKeys changed: ', selectedRowKeys);
  283. this.setState({ selectedRowKeys });
  284. },
  285. showModal() {
  286. this.setState({
  287. visible: true,
  288. });
  289. },
  290. handleOk() {
  291. this.setState({ loading: true });
  292. setTimeout(() => {
  293. this.setState({ loading: false, visible: false });
  294. }, 3000);
  295. },
  296. handleCancel() {
  297. this.setState({ visible: false });
  298. },
  299. render() {
  300. const formItemLayout = {
  301. labelCol: { span: 8 },
  302. wrapperCol: { span: 14 }
  303. };
  304. var departmentArr = this.state.departmentArr || [];
  305. const { loading, selectedRowKeys,visible } = this.state;
  306. const rowSelection = {
  307. selectedRowKeys,
  308. onChange: this.onSelectChange,
  309. hideDefaultSelections: true
  310. };
  311. return (
  312. <div className="user-content" style={{ position: "relative" }}>
  313. <div className="content-title">
  314. <span>回款</span>
  315. </div>
  316. <div className="user-search">
  317. <Input
  318. placeholder="合同编号"
  319. value={this.state.nameSearch}
  320. onChange={e => {
  321. this.setState({ nameSearch: e.target.value });
  322. }}
  323. />
  324. <Input
  325. placeholder="订单编号"
  326. value={this.state.orderNoSearch}
  327. onChange={e => {
  328. this.setState({ orderNoSearch: e.target.value });
  329. }}
  330. />
  331. <Input
  332. placeholder="客户名称"
  333. value={this.state.userName}
  334. onChange={e => {
  335. this.setState({ userName: e.target.value });
  336. }}
  337. />
  338. <Select
  339. placeholder="订单部门"
  340. style={{ width: 150, marginRight: 10 }}
  341. value={this.state.departmenttList}
  342. onChange={e => {
  343. this.setState({ departmenttList: e });
  344. }}
  345. >
  346. {departmentArr.map(function(item) {
  347. return <Select.Option key={item.id}>{item.name}</Select.Option>;
  348. })}
  349. </Select>
  350. <Button
  351. type="primary"
  352. onClick={this.search}
  353. style={{ marginLeft: 10 }}
  354. >
  355. 搜索
  356. </Button>
  357. <Button onClick={this.reset}>重置</Button>
  358. </div>
  359. <ChooseList
  360. columns={this.state.columns}
  361. changeFn={this.changeList}
  362. changeList={this.state.changeList}
  363. top={55}
  364. display={"inline-block"}
  365. />
  366. <Button
  367. type="primary"
  368. style={{ marginLeft: 15 }}
  369. disabled={this.state.selectedRowKeys.length == 1 ? false : true}
  370. onClick={this.showModal}
  371. >
  372. 修改单条数据
  373. </Button>
  374. <div className="patent-table">
  375. <Spin spinning={this.state.loading}>
  376. <Table
  377. columns={
  378. this.state.changeList == undefined
  379. ? this.state.columns
  380. : this.state.changeList
  381. }
  382. // scroll={{ x: 1500, y: 0 }}
  383. dataSource={this.state.dataSource}
  384. pagination={this.state.pagination}
  385. rowSelection={rowSelection}
  386. bordered
  387. />
  388. </Spin>
  389. </div>
  390. <Modal
  391. visible={visible}
  392. title="Title"
  393. onOk={this.handleOk}
  394. onCancel={this.handleCancel}
  395. footer={[
  396. <Button key="back" onClick={this.handleCancel}>
  397. Return
  398. </Button>,
  399. <Button
  400. key="submit"
  401. type="primary"
  402. loading={loading}
  403. onClick={this.handleOk}
  404. >
  405. Submit
  406. </Button>
  407. ]}
  408. >
  409. <p>{this.state.dataSource.id}</p>
  410. <p>Some contents...</p>
  411. <p>Some contents...</p>
  412. <p>Some contents...</p>
  413. <p>Some contents...</p>
  414. </Modal>
  415. </div>
  416. );
  417. }
  418. });
  419. export default inSpecial;