orderDetail.js 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481
  1. import React, { Component } from "react";
  2. import { Form, Upload, Modal, Button, Table, Col, message } from "antd";
  3. import {
  4. splitUrl,
  5. getProcessStatus,
  6. getjiedian,
  7. getLiquidationStatus,
  8. getboutique,
  9. getCuikuan,
  10. getApprovedState,
  11. getProjectStatus
  12. } from "@/tools.js";
  13. import img from "./img.png"
  14. const FormItem = Form.Item;
  15. class OrderDetail extends Component {
  16. constructor(props) {
  17. super(props);
  18. this.state = {
  19. ContactsLists: [
  20. {
  21. title: "催款科目",
  22. dataIndex: "dunSubject",
  23. key: "dunSubject",
  24. render: text => {
  25. return getjiedian(text);
  26. }
  27. },
  28. {
  29. title: "金额(万)",
  30. dataIndex: "money",
  31. key: "money",
  32. render: text => {
  33. return this.props.processState === 2 ? "***" : text;
  34. }
  35. },
  36. {
  37. title: "催款状态",
  38. dataIndex: "dunStatus",
  39. key: "dunStatus",
  40. render: text => {
  41. return getCuikuan(text);
  42. }
  43. }
  44. ],
  45. columnsX: [
  46. {
  47. title: "业务项目名称",
  48. dataIndex: "commodityName",
  49. key: "commodityName"
  50. },
  51. {
  52. title: "项目类别",
  53. dataIndex: "cname",
  54. key: "cname"
  55. },
  56. {
  57. title: "项目数量",
  58. dataIndex: "commodityQuantity",
  59. key: "commodityQuantity"
  60. },
  61. {
  62. title: "金额(万元)",
  63. dataIndex: "commodityPrice",
  64. key: "commodityPrice",
  65. render: text => {
  66. return this.props.processState === 2 ? "***" : text;
  67. }
  68. },
  69. {
  70. title: "负责人",
  71. dataIndex: "contacts",
  72. key: "contacts"
  73. },
  74. {
  75. title: "负责人电话",
  76. dataIndex: "contactsMobile",
  77. key: "contactsMobile"
  78. },
  79. {
  80. title: "项目状态",
  81. dataIndex: "projectStatus",
  82. key: "projectStatus",
  83. render: text => {
  84. return getProjectStatus(text);
  85. }
  86. },
  87. {
  88. title: "主要项目",
  89. dataIndex: "main",
  90. key: "main",
  91. render: text => {
  92. return text ? "是" : "否";
  93. }
  94. },
  95. {
  96. title: "项目说明",
  97. dataIndex: "taskComment",
  98. key: "taskComment",
  99. render: text => {
  100. return text && text.length > 8 ? text.substr(0, 8) + "…" : text;
  101. }
  102. }
  103. ],
  104. rotateDeg: 0
  105. };
  106. this.tableRowClickX = this.tableRowClickX.bind(this);
  107. this.nextCancel = this.nextCancel.bind(this);
  108. this.rotate = this.rotate.bind(this);
  109. this.downImg = this.downImg.bind(this);
  110. this.upImg = this.upImg.bind(this);
  111. }
  112. rotate() {
  113. let rotateDeg = this.state.rotateDeg + 90;
  114. this.setState({
  115. rotateDeg
  116. });
  117. }
  118. //项目详情关闭
  119. nextCancel() {
  120. this.setState({
  121. visible: false
  122. });
  123. }
  124. //点击打卡项目详情
  125. tableRowClickX(record) {
  126. this.setState({
  127. jid: record.id, //项目ID
  128. kid: record.commodityId, //商品ID
  129. commodityName: record.commodityName, //金额
  130. commodityPrice: record.commodityPrice, //金额
  131. commodityQuantity: record.commodityQuantity, //数量
  132. taskComment: record.taskComment, //备注
  133. main: record.main.toString(), //是否为主要
  134. visible: true,
  135. addState: 0
  136. });
  137. }
  138. downImg() {
  139. console.log(this.props.pictureUrl);
  140. let num = 0;
  141. for (let i = 0; i < this.props.pictureUrl.length; i++) {
  142. if (this.props.pictureUrl[i].url == this.state.previewImage) {
  143. num = i;
  144. }
  145. }
  146. if (num == this.props.pictureUrl.length - 1) {
  147. return message.warning("已经是最后一张了哦");
  148. }
  149. this.state.previewImage = this.props.pictureUrl[num + 1].url;
  150. this.setState({
  151. previewImage: this.state.previewImage,
  152. rotateDeg: 0
  153. });
  154. }
  155. upImg() {
  156. let num = 0;
  157. for (let i = 0; i < this.props.pictureUrl.length; i++) {
  158. if (this.props.pictureUrl[i].url == this.state.previewImage) {
  159. num = i;
  160. }
  161. }
  162. if (num == 0) {
  163. return message.warning("已经是第一张了哦");
  164. }
  165. this.state.previewImage = this.props.pictureUrl[num - 1].url;
  166. this.setState({
  167. previewImage: this.state.previewImage,
  168. rotateDeg: 0
  169. });
  170. }
  171. render() {
  172. const formItemLayout = {
  173. labelCol: { span: 8 },
  174. wrapperCol: { span: 14 }
  175. };
  176. const data = this.props.orderData;
  177. return (
  178. <div
  179. className="clearfix"
  180. ref={e => {
  181. this.refs = e;
  182. }}
  183. >
  184. <FormItem className="half-item" {...formItemLayout} label="订单编号">
  185. <span>{this.props.orderNo}</span>
  186. </FormItem>
  187. <FormItem className="half-item" {...formItemLayout} label="合同编号">
  188. <span>{data.contractNo}</span>
  189. </FormItem>
  190. <FormItem className="half-item" {...formItemLayout} label="客户名称">
  191. <span>{data.userName}</span>
  192. </FormItem>
  193. <FormItem
  194. className="half-item"
  195. {...formItemLayout}
  196. label="合同签订时间"
  197. >
  198. <span>{data.signDate}</span>
  199. </FormItem>
  200. <FormItem className="half-item" {...formItemLayout} label="流程状态">
  201. <span>{getProcessStatus(data.processStatus)}</span>
  202. </FormItem>
  203. <FormItem className="half-item" {...formItemLayout} label="结算状态">
  204. <span>{getLiquidationStatus(data.liquidationStatus)}</span>
  205. </FormItem>
  206. <FormItem className="half-item" {...formItemLayout} label="企业联系人">
  207. <span>{data.contacts}</span>
  208. </FormItem>
  209. <FormItem className="half-item" {...formItemLayout} label="联系人电话">
  210. <span>{data.contactMobile}</span>
  211. </FormItem>
  212. <FormItem className="half-item" {...formItemLayout} label="企业法人">
  213. <span>{data.legalPerson}</span>
  214. </FormItem>
  215. <FormItem className="half-item" {...formItemLayout} label="法人电话">
  216. <span>{data.legalPersonTel}</span>
  217. </FormItem>
  218. <FormItem
  219. className="half-item"
  220. {...formItemLayout}
  221. label="签单金额(万元)"
  222. >
  223. <span>
  224. {this.props.processState === 2 ? "***" : data.totalAmount}
  225. </span>
  226. </FormItem>
  227. <FormItem
  228. className="half-item"
  229. {...formItemLayout}
  230. label="首付金额(万元)"
  231. >
  232. <span>
  233. {this.props.processState === 2 ? "***" : data.firstAmount}
  234. </span>
  235. </FormItem>
  236. <FormItem className="half-item" {...formItemLayout} label="特批立项">
  237. <span>{getApprovedState(data.approval)}</span>
  238. </FormItem>
  239. <FormItem
  240. className="half-item"
  241. {...formItemLayout}
  242. label="已收款项(万元)"
  243. >
  244. <span>
  245. {this.props.processState === 2 ? "***" : data.settlementAmount}
  246. </span>
  247. </FormItem>
  248. <FormItem className="half-item" {...formItemLayout} label="订单部门">
  249. <span>{data.depName}</span>
  250. </FormItem>
  251. <div className="clearfix">
  252. <FormItem
  253. labelCol={{ span: 4 }}
  254. wrapperCol={{ span: 16 }}
  255. label="订单留言"
  256. >
  257. <p style={{ width: 500, wordWrap: "break-word" }}>
  258. {data.orderRemarks}
  259. </p>
  260. </FormItem>
  261. </div>
  262. <div className="clearfix">
  263. <FormItem
  264. labelCol={{ span: 4 }}
  265. wrapperCol={{ span: 18 }}
  266. label="合同扫描件"
  267. >
  268. <Upload
  269. className="demandDetailShow-upload"
  270. listType="picture-card"
  271. fileList={
  272. data.contractPictureUrl
  273. ? splitUrl(
  274. data.contractPictureUrl,
  275. ",",
  276. globalConfig.avatarHost + "/upload"
  277. )
  278. : []
  279. }
  280. onPreview={file => {
  281. this.setState({
  282. previewImage: file.url || file.thumbUrl,
  283. previewVisible: true
  284. });
  285. }}
  286. />
  287. <Modal
  288. maskClosable={false}
  289. footer={null}
  290. visible={this.state.previewVisible}
  291. onCancel={() => {
  292. this.state.rotateDeg = 0;
  293. this.setState({
  294. previewVisible: false,
  295. rotateDeg: this.state.rotateDeg
  296. });
  297. }}
  298. >
  299. <img
  300. alt=""
  301. style={{
  302. width: "100%",
  303. transform: `rotate(${this.state.rotateDeg}deg)`
  304. }}
  305. src={this.state.previewImage || ""}
  306. />
  307. <Button onClick={this.rotate}>旋转</Button>
  308. <Button onClick={this.upImg}>上一张</Button>
  309. <Button onClick={this.downImg}>下一张</Button>
  310. </Modal>
  311. <Button
  312. style={{
  313. float: "right",
  314. marginRight: "140px",
  315. marginTop: "20px"
  316. }}
  317. onClick={() => {
  318. this.props.getOrderLog(data.orderNo);
  319. }}
  320. >
  321. 查看订单日志
  322. </Button>
  323. </FormItem>
  324. </div>
  325. <div className="clearfix">
  326. <FormItem
  327. className="half-item"
  328. {...formItemLayout}
  329. label="订单负责人"
  330. >
  331. <span>{data.salesmanName}</span>
  332. </FormItem>
  333. <FormItem
  334. className="half-item"
  335. {...formItemLayout}
  336. label="订单负责人电话"
  337. >
  338. <span>{data.salesmanMobile}</span>
  339. </FormItem>
  340. </div>
  341. <div className="clearfix">
  342. <FormItem
  343. className="half-item"
  344. {...formItemLayout}
  345. label="当前财务负责人"
  346. >
  347. <span>{data.nowFinance}</span>
  348. </FormItem>
  349. <FormItem
  350. className="half-item"
  351. {...formItemLayout}
  352. label="当前财务负责人电话"
  353. >
  354. <span>{data.nowFinanceMobile}</span>
  355. </FormItem>
  356. </div>
  357. <div className="clearfix">
  358. <FormItem
  359. className="half-item"
  360. {...formItemLayout}
  361. style={{ opacity: ".5" }}
  362. label="原订单负责人"
  363. >
  364. <span>{data.oldSalesmanName}</span>
  365. </FormItem>
  366. <FormItem
  367. className="half-item"
  368. {...formItemLayout}
  369. style={{ opacity: ".5" }}
  370. label="原订单负责人电话"
  371. >
  372. <span>{data.oldSalesmanMobile}</span>
  373. </FormItem>
  374. </div>
  375. <div className="clearfix">
  376. <FormItem
  377. className="half-item"
  378. style={{ opacity: ".5" }}
  379. {...formItemLayout}
  380. label="实际财务操作人"
  381. >
  382. <span>{data.financeName}</span>
  383. </FormItem>
  384. <FormItem
  385. className="half-item"
  386. {...formItemLayout}
  387. style={{ opacity: ".5" }}
  388. label="实际财务操作人电话"
  389. >
  390. <span>{data.financeMobile}</span>
  391. </FormItem>
  392. </div>
  393. <div>
  394. <span style={{ marginLeft: "50px", fontSize: "20px" }}>催款节点</span>
  395. </div>
  396. <div className="clearfix">
  397. <Form layout="horizontal" id="demand-form">
  398. <Table
  399. pagination={false}
  400. columns={this.state.ContactsLists}
  401. dataSource={this.props.contactList}
  402. />
  403. <Col span={24} offset={9} style={{ marginTop: "15px" }}></Col>
  404. </Form>
  405. </div>
  406. <div>
  407. <span style={{ marginLeft: "50px", fontSize: "20px" }}>项目业务</span>
  408. </div>
  409. <div className="patent-table">
  410. <Table
  411. columns={this.state.columnsX}
  412. pagination={false}
  413. dataSource={this.props.dataSourceX}
  414. onRowClick={this.tableRowClickX}
  415. />
  416. </div>
  417. <Modal
  418. maskClosable={false}
  419. visible={this.state.visible}
  420. onOk={this.nextCancel}
  421. onCancel={this.nextCancel}
  422. width="800px"
  423. title={"项目任务详情"}
  424. footer=""
  425. className="admin-desc-content"
  426. >
  427. <Form layout="horizontal" id="demand-form">
  428. <div className="clearfix">
  429. <FormItem
  430. className="half-item"
  431. {...formItemLayout}
  432. label="项目名称"
  433. >
  434. <span>{this.state.commodityName}</span>
  435. </FormItem>
  436. <FormItem
  437. className="half-item"
  438. {...formItemLayout}
  439. label="项目数量"
  440. >
  441. <span>{this.state.commodityQuantity}</span>
  442. </FormItem>
  443. <FormItem
  444. className="half-item"
  445. {...formItemLayout}
  446. label="金额(万元)"
  447. >
  448. <span>{this.state.commodityPrice}</span>
  449. </FormItem>
  450. <FormItem
  451. className="half-item"
  452. {...formItemLayout}
  453. label="主要项目"
  454. >
  455. <span>{getboutique(this.state.main)}</span>
  456. </FormItem>
  457. <div className="clearfix">
  458. <FormItem
  459. labelCol={{ span: 4 }}
  460. wrapperCol={{ span: 16 }}
  461. label="服务说明"
  462. >
  463. <span>{this.state.taskComment}</span>
  464. </FormItem>
  465. </div>
  466. </div>
  467. </Form>
  468. </Modal>
  469. </div>
  470. );
  471. }
  472. }
  473. export default OrderDetail;