orderDetail.js 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402
  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.setState({ previewVisible: false });
  258. }}
  259. >
  260. <img
  261. alt=""
  262. style={{ width: "100%", transform: `rotate(${this.state.rotateDeg}deg)` }}
  263. className="rotate"
  264. src={this.state.previewImage || ""}
  265. // src={img}
  266. />
  267. <Button onClick={this.rotate}>旋转</Button>
  268. </Modal>
  269. <Button
  270. style={{
  271. float: "right",
  272. marginRight: "140px",
  273. marginTop: "20px"
  274. }}
  275. onClick={() => {
  276. this.props.getOrderLog(data.orderNo);
  277. }}
  278. >
  279. 查看订单日志
  280. </Button>
  281. </FormItem>
  282. </div>
  283. <div className="clearfix">
  284. <FormItem
  285. className="half-item"
  286. {...formItemLayout}
  287. label="订单负责人"
  288. >
  289. <span>{data.salesmanName}</span>
  290. </FormItem>
  291. <FormItem
  292. className="half-item"
  293. {...formItemLayout}
  294. label="订单负责人电话"
  295. >
  296. <span>{data.salesmanMobile}</span>
  297. </FormItem>
  298. </div>
  299. <div className="clearfix">
  300. <FormItem
  301. className="half-item"
  302. {...formItemLayout}
  303. label="财务负责人"
  304. >
  305. <span>{data.financeName}</span>
  306. </FormItem>
  307. <FormItem
  308. className="half-item"
  309. {...formItemLayout}
  310. label="财务负责人电话"
  311. >
  312. <span>{data.financeMobile}</span>
  313. </FormItem>
  314. </div>
  315. <div>
  316. <span style={{ marginLeft: "50px", fontSize: "20px" }}>催款节点</span>
  317. </div>
  318. <div className="clearfix">
  319. <Form layout="horizontal" id="demand-form">
  320. <Table
  321. pagination={false}
  322. columns={this.state.ContactsLists}
  323. dataSource={this.props.contactList}
  324. />
  325. <Col span={24} offset={9} style={{ marginTop: "15px" }}></Col>
  326. </Form>
  327. </div>
  328. <div>
  329. <span style={{ marginLeft: "50px", fontSize: "20px" }}>项目业务</span>
  330. </div>
  331. <div className="patent-table">
  332. <Table
  333. columns={this.state.columnsX}
  334. pagination={false}
  335. dataSource={this.props.dataSourceX}
  336. onRowClick={this.tableRowClickX}
  337. />
  338. </div>
  339. <Modal
  340. maskClosable={false}
  341. visible={this.state.visible}
  342. onOk={this.nextCancel}
  343. onCancel={this.nextCancel}
  344. width="800px"
  345. title={"项目任务详情"}
  346. footer=""
  347. className="admin-desc-content"
  348. >
  349. <Form layout="horizontal" id="demand-form">
  350. <div className="clearfix">
  351. <FormItem
  352. className="half-item"
  353. {...formItemLayout}
  354. label="项目名称"
  355. >
  356. <span>{this.state.commodityName}</span>
  357. </FormItem>
  358. <FormItem
  359. className="half-item"
  360. {...formItemLayout}
  361. label="项目数量"
  362. >
  363. <span>{this.state.commodityQuantity}</span>
  364. </FormItem>
  365. <FormItem
  366. className="half-item"
  367. {...formItemLayout}
  368. label="金额(万元)"
  369. >
  370. <span>{this.state.commodityPrice}</span>
  371. </FormItem>
  372. <FormItem
  373. className="half-item"
  374. {...formItemLayout}
  375. label="主要项目"
  376. >
  377. <span>{getboutique(this.state.main)}</span>
  378. </FormItem>
  379. <div className="clearfix">
  380. <FormItem
  381. labelCol={{ span: 4 }}
  382. wrapperCol={{ span: 16 }}
  383. label="服务说明"
  384. >
  385. <span>{this.state.taskComment}</span>
  386. </FormItem>
  387. </div>
  388. </div>
  389. </Form>
  390. </Modal>
  391. </div>
  392. );
  393. }
  394. }
  395. export default OrderDetail;