order.jsx 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467
  1. import React, { Component } from "react";
  2. import {
  3. Button,
  4. Form,
  5. Input,
  6. message,
  7. Spin,
  8. Select,
  9. Tabs,
  10. Table,
  11. Modal,
  12. Tooltip,
  13. } from "antd";
  14. import $ from "jquery/src/ajax";
  15. import { ChooseList } from "../../../manageCenter/order/orderNew/chooseList";
  16. // import OrderDetail from "../orderNew/changeComponent/orderDetail";
  17. import OrderDesc from "../../financialManage/orderDetail/orderDesc";
  18. import OrderRiZi from "@/orderRiZi.jsx";
  19. import { salesList } from "@/dataDic.js";
  20. import {
  21. getProcessStatus,
  22. getLiquidationStatus,
  23. getNewOrderStatus,
  24. ShowModal,
  25. } from "@/tools.js";
  26. const { TabPane } = Tabs;
  27. const FormItem = Form.Item;
  28. const Option = Select.Option;
  29. class OrderList extends Component {
  30. constructor(props) {
  31. super(props);
  32. this.state = {
  33. onelist: [
  34. {
  35. value: "0",
  36. label: "首付待付请",
  37. },
  38. {
  39. value: "1",
  40. label: "尾款待付清",
  41. },
  42. {
  43. value: "2",
  44. label: "已付请",
  45. },
  46. ],
  47. twolist: [
  48. {
  49. value: "0",
  50. label: "非特批",
  51. },
  52. {
  53. value: "1",
  54. label: "特批",
  55. },
  56. ],
  57. threelist: [
  58. {
  59. value: "0",
  60. label: "10万元以下",
  61. },
  62. {
  63. value: "1",
  64. label: "10万~20万",
  65. },
  66. {
  67. value: "2",
  68. label: "20万~30万",
  69. },
  70. {
  71. value: "3",
  72. label: "30万~40万",
  73. },
  74. {
  75. value: "4",
  76. label: "40万以上",
  77. },
  78. ],
  79. columns: [
  80. {
  81. title: "销售类型",
  82. dataIndex: "salesType",
  83. key: "salesType",
  84. render: (text, record) => {
  85. return (
  86. <Tooltip
  87. title={salesList[text] + ((text == 3 || text == 4 || text == 5) ? (!record.other ? "" : "," + record.other) : "")}
  88. >
  89. <span>
  90. {salesList[text]}
  91. </span>
  92. </Tooltip>
  93. );
  94. },
  95. },
  96. {
  97. title: "合同编号",
  98. dataIndex: "contractNo",
  99. key: "contractNo",
  100. },
  101. {
  102. title: "订单编号",
  103. dataIndex: "orderNo",
  104. key: "orderNo",
  105. },
  106. {
  107. title: "客户名称",
  108. dataIndex: "userName",
  109. key: "userName",
  110. },
  111. {
  112. title: "订单部门",
  113. dataIndex: "depName",
  114. key: "depName",
  115. },
  116. {
  117. title: "营销员",
  118. dataIndex: "salesmanName",
  119. key: "salesmanName",
  120. },
  121. {
  122. title: "下单时间",
  123. dataIndex: "createDate",
  124. key: "createDate",
  125. },
  126. {
  127. title: "合同签订时间",
  128. dataIndex: "signDate",
  129. key: "signDate",
  130. },
  131. {
  132. title: "流程状态",
  133. dataIndex: "processStatus",
  134. key: "processStatus",
  135. render: (text, record) =>
  136. <span >
  137. {getProcessStatus(text)}
  138. </span>
  139. },
  140. {
  141. title: "签单金额(万元)",
  142. dataIndex: "totalAmount",
  143. key: "totalAmount",
  144. render: (text, record) =>
  145. <span >
  146. {text}
  147. </span>
  148. },
  149. {
  150. title: "开单金额(万元)",
  151. dataIndex: "invoiceAmount",
  152. key: "invoiceAmount",
  153. render: (text, record) =>
  154. <span >
  155. {text}
  156. </span>
  157. },
  158. {
  159. title: "已收款(万元)",
  160. dataIndex: "settlementAmount",
  161. key: "settlementAmount",
  162. render: (text, record) =>
  163. <span >
  164. {text}
  165. </span>
  166. },
  167. {
  168. title: "结算状态",
  169. dataIndex: "liquidationStatus",
  170. key: "liquidationStatus",
  171. render: (text, record) =>
  172. <span >
  173. {getLiquidationStatus(text)}
  174. </span>
  175. },
  176. {
  177. title: "是否特批",
  178. dataIndex: "approval",
  179. key: "approval",
  180. render: (text, record) =>
  181. <span >
  182. {["非特批", "特批", "特批通过"][text]}
  183. </span>
  184. },
  185. {
  186. title: "订单状态",
  187. dataIndex: "orderStatus",
  188. key: "orderStatus",
  189. render: (text, record) =>
  190. <span >
  191. {getNewOrderStatus(text)}
  192. </span>
  193. },
  194. ],
  195. pagination: {
  196. defaultCurrent: 1,
  197. defaultPageSize: 10,
  198. showQuickJumper: true,
  199. pageSize: 10,
  200. onChange: function (page) {
  201. this.loadData(page);
  202. }.bind(this),
  203. showTotal: function (total) {
  204. return "共" + total + "条数据";
  205. },
  206. },
  207. loading: false,
  208. changeList: undefined,
  209. searchValues: {},
  210. dataSource: [],
  211. details: false,
  212. orderData: {},
  213. };
  214. }
  215. changeList(arr) {
  216. const newArr = [];
  217. this.state.columns.forEach((item) => {
  218. arr.forEach((val) => {
  219. if (val === item.title) {
  220. newArr.push(item);
  221. }
  222. });
  223. });
  224. this.setState({
  225. changeList: newArr,
  226. });
  227. }
  228. // 重置
  229. resetAll() {
  230. this.setState(
  231. {
  232. searchValues: JSON.parse(JSON.stringify({})),
  233. selectedRowKeys: [],
  234. },
  235. () => {
  236. this.loadData();
  237. }
  238. );
  239. }
  240. // 列表接口
  241. loadData(pageNo) {
  242. const { searchValues, pagination } = this.state;
  243. this.setState({
  244. loading: true,
  245. });
  246. let prs = this.props.data;
  247. prs.pageNo = pageNo || 1;
  248. prs.pageSize = pagination.pageSize;
  249. let datas = Object.assign(searchValues, prs);
  250. $.ajax({
  251. method: "get",
  252. dataType: "json",
  253. crossDomain: false,
  254. url: globalConfig.context + "/api/admin/newOrder/statistics/orderList",
  255. data: datas,
  256. success: function (data) {
  257. ShowModal(this);
  258. this.setState({
  259. loading: false,
  260. });
  261. if (data.error && data.error.length === 0) {
  262. if (data.data.list) {
  263. pagination.current = data.data.pageNo;
  264. pagination.total = data.data.totalCount;
  265. if (data.data && data.data.list && !data.data.list.length) {
  266. pagination.current = 0;
  267. pagination.total = 0;
  268. }
  269. this.setState({
  270. dataSource: data.data.list,
  271. pagination: this.state.pagination,
  272. pageNo: data.data.pageNo,
  273. });
  274. } else {
  275. this.setState({
  276. dataSource: data.data,
  277. pagination: false,
  278. });
  279. }
  280. } else {
  281. message.warning(data.error[0].message);
  282. }
  283. }.bind(this),
  284. }).always(
  285. function () {
  286. this.setState({
  287. loading: false,
  288. });
  289. }.bind(this)
  290. );
  291. }
  292. // 整行点击
  293. tableRowClick(record) {
  294. this.state.orderData = record;
  295. this.setState({
  296. details: true,
  297. });
  298. }
  299. // 详情弹窗
  300. closeDesc() {
  301. this.setState({
  302. details: false
  303. })
  304. this.loadData(this.state.pageNo);
  305. }
  306. componentWillMount() {
  307. this.loadData();
  308. }
  309. render() {
  310. const { searchValues, onelist, twolist, threelist, columns, changeList, details } = this.state;
  311. return (
  312. <div className="user-content signatureStatistics">
  313. <Tabs defaultActiveKey="1">
  314. <TabPane tab="搜索" key="1">
  315. <div style={{ paddingTop: 10 }}>
  316. <Form layout="inline">
  317. <FormItem>
  318. <Input
  319. placeholder="请输入订单编号"
  320. value={searchValues["orderNo"]}
  321. onChange={(e) => {
  322. searchValues["orderNo"] = e.target.value
  323. this.setState({
  324. searchValues: searchValues,
  325. });
  326. }}
  327. />
  328. </FormItem>
  329. <FormItem>
  330. <Input
  331. placeholder="请输入客户姓名"
  332. value={searchValues["name"]}
  333. onChange={(e) => {
  334. searchValues["name"] = e.target.value
  335. this.setState({
  336. searchValues: searchValues,
  337. });
  338. }}
  339. />
  340. </FormItem>
  341. <FormItem>
  342. <Input
  343. placeholder="请输入合同编号"
  344. value={searchValues["contractNo"]}
  345. onChange={(e) => {
  346. searchValues["contractNo"] = e.target.value
  347. this.setState({
  348. searchValues: searchValues,
  349. });
  350. }}
  351. />
  352. </FormItem>
  353. <FormItem>
  354. <Select
  355. placeholder={"请选择结算状态"}
  356. style={{ width: 150 }}
  357. value={searchValues["liquidationStatus"]
  358. ? searchValues["liquidationStatus"]
  359. : undefined}
  360. onChange={(e) => {
  361. searchValues["liquidationStatus"] = e
  362. this.setState({
  363. searchValues: searchValues,
  364. });
  365. }}
  366. >
  367. {onelist.map((it, ins) => (
  368. <Option key={it.value}>{it.label}</Option>
  369. ))}
  370. </Select>
  371. </FormItem>
  372. <FormItem>
  373. <Select
  374. placeholder={"请选择特批状态"}
  375. style={{ width: 150 }}
  376. value={searchValues["approval"]
  377. ? searchValues["approval"]
  378. : undefined}
  379. onChange={(e) => {
  380. searchValues["approval"] = e
  381. this.setState({
  382. searchValues: searchValues,
  383. });
  384. }}
  385. >
  386. {twolist.map((it, ins) => (
  387. <Option key={it.value}>{it.label}</Option>
  388. ))}
  389. </Select>
  390. </FormItem>
  391. <FormItem>
  392. <Select
  393. placeholder={"请选择签单金额"}
  394. style={{ width: 150 }}
  395. value={searchValues["amountStatus"]
  396. ? searchValues["amountStatus"]
  397. : undefined}
  398. onChange={(e) => {
  399. searchValues["amountStatus"] = e
  400. this.setState({
  401. searchValues: searchValues,
  402. });
  403. }}
  404. >
  405. {threelist.map((it, ins) => (
  406. <Option key={it.value}>{it.label}</Option>
  407. ))}
  408. </Select>
  409. </FormItem>
  410. <Button
  411. type="primary"
  412. onClick={() => { this.loadData() }}
  413. style={{ marginRight: "10px" }}
  414. >
  415. 搜索
  416. </Button>
  417. <Button
  418. onClick={() => { this.resetAll() }}
  419. style={{ marginRight: "10px" }}
  420. >
  421. 重置
  422. </Button>
  423. </Form>
  424. </div>
  425. </TabPane>
  426. <TabPane tab="更改表格显示数据" key="2">
  427. <div style={{ marginLeft: 10 }}>
  428. <ChooseList
  429. columns={columns}
  430. changeFn={this.changeList.bind(this)}
  431. changeList={changeList}
  432. top={55}
  433. margin={11}
  434. />
  435. </div>
  436. </TabPane>
  437. </Tabs>
  438. <div className="patent-table">
  439. <Spin spinning={this.state.loading}>
  440. <Table
  441. bordered
  442. size="middle"
  443. columns={changeList ? changeList : columns}
  444. dataSource={this.state.dataSource}
  445. pagination={this.state.pagination}
  446. onRowClick={this.tableRowClick.bind(this)}
  447. />
  448. </Spin>
  449. </div>
  450. {/* 订单详情 */}
  451. <OrderDesc
  452. data={this.state.orderData}
  453. showDesc={details}
  454. closeDesc={this.closeDesc.bind(this)}
  455. />
  456. </div>
  457. );
  458. }
  459. }
  460. export default OrderList;