detaillist.jsx 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416
  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. // 整行点击
  250. tableRowClick(record) {
  251. this.state.orderData = record;
  252. this.setState({
  253. details: true,
  254. });
  255. }
  256. // 详情弹窗
  257. closeDesc() {
  258. this.setState({
  259. details: false
  260. })
  261. this.loadData(this.state.pageNo);
  262. }
  263. componentWillMount() {
  264. this.loadData();
  265. }
  266. render() {
  267. const { searchInfor, details } = this.state
  268. return (
  269. <div>
  270. <div className="user-content">
  271. <Tabs defaultActiveKey="1" className="test">
  272. <TabPane tab="搜索" key="1">
  273. <div
  274. className="user-search"
  275. style={{
  276. marginTop: "10px",
  277. marginLeft: "10px",
  278. marginRight: "10px",
  279. }}
  280. >
  281. <span style={{ marginRight: "10px" }}>
  282. <Select
  283. style={{ width: 160 }}
  284. placeholder="签单金额"
  285. value={searchInfor.amountType}
  286. onChange={(e) => {
  287. this.setState({
  288. searchInfor: Object.assign(searchInfor, {
  289. amountType: e,
  290. }),
  291. });
  292. }}
  293. >
  294. <Option value="0">全部</Option>
  295. <Option value="1">小于10万</Option>
  296. <Option value="2">10-20万</Option>
  297. <Option value="3">20-30万</Option>
  298. <Option value="4">30万以上</Option>
  299. </Select>
  300. </span>
  301. <span style={{ marginRight: "10px" }}>
  302. <Select
  303. style={{ width: 160 }}
  304. placeholder="最新签单类型"
  305. value={searchInfor.orderType}
  306. onChange={(e) => {
  307. this.setState({
  308. searchInfor: Object.assign(searchInfor, {
  309. orderType: e,
  310. }),
  311. });
  312. }}
  313. >
  314. <Option value="0">所有</Option>
  315. <Option value="1">新签</Option>
  316. <Option value="2">复购</Option>
  317. <Option value="3">渠道</Option>
  318. </Select>
  319. </span>
  320. <span style={{ marginRight: "10px" }}>
  321. <span style={{ marginRight: "5px", marginBottom: "10px" }}>
  322. 签单时间 :
  323. </span>
  324. <RangePicker
  325. style={{ marginRight: "10px", marginBottom: "10px" }}
  326. value={[
  327. searchInfor.signTimeStart
  328. ? moment(searchInfor.signTimeStart)
  329. : null,
  330. searchInfor.signTimeEnd
  331. ? moment(searchInfor.signTimeEnd)
  332. : null,
  333. ]}
  334. onChange={(data, dataString) => {
  335. this.setState({
  336. searchInfor: Object.assign(searchInfor, {
  337. signTimeStart: dataString[0],
  338. signTimeEnd: dataString[1],
  339. }),
  340. });
  341. }}
  342. />
  343. </span>
  344. <Button
  345. type="primary"
  346. onClick={() => {
  347. this.loadData();
  348. }}
  349. style={{ marginRight: "10px", marginBottom: "10px" }}
  350. >
  351. 搜索
  352. </Button>
  353. <Button
  354. onClick={this.resetAll}
  355. style={{ marginRight: "10px", marginBottom: "10px" }}
  356. >
  357. 重置
  358. </Button>
  359. </div>
  360. </TabPane>
  361. <TabPane tab="更改表格显示数据" key="2">
  362. <div style={{ marginLeft: 10 }}>
  363. <Spin spinning={this.state.loading}>
  364. <ChooseList
  365. columns={this.state.columns}
  366. changeFn={this.changeList}
  367. changeList={this.state.changeList}
  368. top={55}
  369. margin={11}
  370. />
  371. </Spin>
  372. </div>
  373. </TabPane>
  374. </Tabs>
  375. <div className="patent-table">
  376. <Spin spinning={this.state.loading}>
  377. <Table
  378. bordered
  379. size="middle"
  380. columns={
  381. this.state.changeList
  382. ? this.state.changeList
  383. : this.state.columns
  384. }
  385. dataSource={this.state.dataSource}
  386. pagination={this.state.pagination}
  387. onRowClick={this.tableRowClick.bind(this)}
  388. />
  389. </Spin>
  390. </div>
  391. </div>
  392. {/* 订单详情 */}
  393. <OrderDesc
  394. data={this.state.orderData}
  395. showDesc={details}
  396. closeDesc={this.closeDesc.bind(this)}
  397. />
  398. </div>
  399. );
  400. }
  401. }
  402. export default DetailList;