detaillist.jsx 12 KB

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