orderDetail.js 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403
  1. import React, { Component } from "react";
  2. import { Form, Upload, Modal, Button, Table, Col } 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. }
  110. rotate() {
  111. let rotateDeg = this.state.rotateDeg + 90
  112. this.setState({
  113. rotateDeg
  114. })
  115. }
  116. //项目详情关闭
  117. nextCancel() {
  118. this.setState({
  119. visible: false
  120. });
  121. }
  122. //点击打卡项目详情
  123. tableRowClickX(record) {
  124. this.setState({
  125. jid: record.id, //项目ID
  126. kid: record.commodityId, //商品ID
  127. commodityName: record.commodityName, //金额
  128. commodityPrice: record.commodityPrice, //金额
  129. commodityQuantity: record.commodityQuantity, //数量
  130. taskComment: record.taskComment, //备注
  131. main: record.main.toString(), //是否为主要
  132. visible: true,
  133. addState: 0
  134. });
  135. }
  136. render() {
  137. const formItemLayout = {
  138. labelCol: { span: 8 },
  139. wrapperCol: { span: 14 }
  140. };
  141. const data = this.props.orderData;
  142. return (
  143. <div
  144. className="clearfix"
  145. ref={e => {
  146. this.refs = e;
  147. }}
  148. >
  149. <FormItem className="half-item" {...formItemLayout} label="订单编号">
  150. <span>{this.props.orderNo}</span>
  151. </FormItem>
  152. <FormItem className="half-item" {...formItemLayout} label="合同编号">
  153. <span>{data.contractNo}</span>
  154. </FormItem>
  155. <FormItem className="half-item" {...formItemLayout} label="客户名称">
  156. <span>{data.userName}</span>
  157. </FormItem>
  158. <FormItem
  159. className="half-item"
  160. {...formItemLayout}
  161. label="合同签订时间"
  162. >
  163. <span>{data.signDate}</span>
  164. </FormItem>
  165. <FormItem className="half-item" {...formItemLayout} label="流程状态">
  166. <span>{getProcessStatus(data.processStatus)}</span>
  167. </FormItem>
  168. <FormItem className="half-item" {...formItemLayout} label="结算状态">
  169. <span>{getLiquidationStatus(data.liquidationStatus)}</span>
  170. </FormItem>
  171. <FormItem className="half-item" {...formItemLayout} label="企业联系人">
  172. <span>{data.contacts}</span>
  173. </FormItem>
  174. <FormItem className="half-item" {...formItemLayout} label="联系人电话">
  175. <span>{data.contactMobile}</span>
  176. </FormItem>
  177. <FormItem className="half-item" {...formItemLayout} label="企业法人">
  178. <span>{data.legalPerson}</span>
  179. </FormItem>
  180. <FormItem className="half-item" {...formItemLayout} label="法人电话">
  181. <span>{data.legalPersonTel}</span>
  182. </FormItem>
  183. <FormItem
  184. className="half-item"
  185. {...formItemLayout}
  186. label="签单金额(万元)"
  187. >
  188. <span>
  189. {this.props.processState === 2 ? "***" : data.totalAmount}
  190. </span>
  191. </FormItem>
  192. <FormItem
  193. className="half-item"
  194. {...formItemLayout}
  195. label="首付金额(万元)"
  196. >
  197. <span>
  198. {this.props.processState === 2 ? "***" : data.firstAmount}
  199. </span>
  200. </FormItem>
  201. <FormItem className="half-item" {...formItemLayout} label="特批立项">
  202. <span>{getApprovedState(data.approval)}</span>
  203. </FormItem>
  204. <FormItem
  205. className="half-item"
  206. {...formItemLayout}
  207. label="已收款项(万元)"
  208. >
  209. <span>
  210. {this.props.processState === 2 ? "***" : data.settlementAmount}
  211. </span>
  212. </FormItem>
  213. <FormItem className="half-item" {...formItemLayout} label="订单部门">
  214. <span>{data.depName}</span>
  215. </FormItem>
  216. <div className="clearfix">
  217. <FormItem
  218. labelCol={{ span: 4 }}
  219. wrapperCol={{ span: 16 }}
  220. label="订单留言"
  221. >
  222. <p style={{ width: 500, wordWrap: "break-word" }}>
  223. {data.orderRemarks}
  224. </p>
  225. </FormItem>
  226. </div>
  227. <div className="clearfix">
  228. <FormItem
  229. labelCol={{ span: 4 }}
  230. wrapperCol={{ span: 18 }}
  231. label="合同扫描件"
  232. >
  233. <Upload
  234. className="demandDetailShow-upload"
  235. listType="picture-card"
  236. fileList={
  237. data.contractPictureUrl
  238. ? splitUrl(
  239. data.contractPictureUrl,
  240. ",",
  241. globalConfig.avatarHost + "/upload"
  242. )
  243. : []
  244. }
  245. onPreview={file => {
  246. this.setState({
  247. previewImage: file.url || file.thumbUrl,
  248. previewVisible: true
  249. });
  250. }}
  251. />
  252. <Modal
  253. maskClosable={false}
  254. footer={null}
  255. visible={this.state.previewVisible}
  256. onCancel={() => {
  257. this.state.rotateDeg = 0
  258. this.setState({ previewVisible: false, rotateDeg: this.state.rotateDeg });
  259. }}
  260. >
  261. <img
  262. alt=""
  263. style={{ width: "100%", transform: `rotate(${this.state.rotateDeg}deg)` }}
  264. className="rotate"
  265. src={this.state.previewImage || ""}
  266. // src={img}
  267. />
  268. <Button onClick={this.rotate}>旋转</Button>
  269. </Modal>
  270. <Button
  271. style={{
  272. float: "right",
  273. marginRight: "140px",
  274. marginTop: "20px"
  275. }}
  276. onClick={() => {
  277. this.props.getOrderLog(data.orderNo);
  278. }}
  279. >
  280. 查看订单日志
  281. </Button>
  282. </FormItem>
  283. </div>
  284. <div className="clearfix">
  285. <FormItem
  286. className="half-item"
  287. {...formItemLayout}
  288. label="订单负责人"
  289. >
  290. <span>{data.salesmanName}</span>
  291. </FormItem>
  292. <FormItem
  293. className="half-item"
  294. {...formItemLayout}
  295. label="订单负责人电话"
  296. >
  297. <span>{data.salesmanMobile}</span>
  298. </FormItem>
  299. </div>
  300. <div className="clearfix">
  301. <FormItem
  302. className="half-item"
  303. {...formItemLayout}
  304. label="财务负责人"
  305. >
  306. <span>{data.financeName}</span>
  307. </FormItem>
  308. <FormItem
  309. className="half-item"
  310. {...formItemLayout}
  311. label="财务负责人电话"
  312. >
  313. <span>{data.financeMobile}</span>
  314. </FormItem>
  315. </div>
  316. <div>
  317. <span style={{ marginLeft: "50px", fontSize: "20px" }}>催款节点</span>
  318. </div>
  319. <div className="clearfix">
  320. <Form layout="horizontal" id="demand-form">
  321. <Table
  322. pagination={false}
  323. columns={this.state.ContactsLists}
  324. dataSource={this.props.contactList}
  325. />
  326. <Col span={24} offset={9} style={{ marginTop: "15px" }}></Col>
  327. </Form>
  328. </div>
  329. <div>
  330. <span style={{ marginLeft: "50px", fontSize: "20px" }}>项目业务</span>
  331. </div>
  332. <div className="patent-table">
  333. <Table
  334. columns={this.state.columnsX}
  335. pagination={false}
  336. dataSource={this.props.dataSourceX}
  337. onRowClick={this.tableRowClickX}
  338. />
  339. </div>
  340. <Modal
  341. maskClosable={false}
  342. visible={this.state.visible}
  343. onOk={this.nextCancel}
  344. onCancel={this.nextCancel}
  345. width="800px"
  346. title={"项目任务详情"}
  347. footer=""
  348. className="admin-desc-content"
  349. >
  350. <Form layout="horizontal" id="demand-form">
  351. <div className="clearfix">
  352. <FormItem
  353. className="half-item"
  354. {...formItemLayout}
  355. label="项目名称"
  356. >
  357. <span>{this.state.commodityName}</span>
  358. </FormItem>
  359. <FormItem
  360. className="half-item"
  361. {...formItemLayout}
  362. label="项目数量"
  363. >
  364. <span>{this.state.commodityQuantity}</span>
  365. </FormItem>
  366. <FormItem
  367. className="half-item"
  368. {...formItemLayout}
  369. label="金额(万元)"
  370. >
  371. <span>{this.state.commodityPrice}</span>
  372. </FormItem>
  373. <FormItem
  374. className="half-item"
  375. {...formItemLayout}
  376. label="主要项目"
  377. >
  378. <span>{getboutique(this.state.main)}</span>
  379. </FormItem>
  380. <div className="clearfix">
  381. <FormItem
  382. labelCol={{ span: 4 }}
  383. wrapperCol={{ span: 16 }}
  384. label="服务说明"
  385. >
  386. <span>{this.state.taskComment}</span>
  387. </FormItem>
  388. </div>
  389. </div>
  390. </Form>
  391. </Modal>
  392. </div>
  393. );
  394. }
  395. }
  396. export default OrderDetail;