orderDetail.js 11 KB

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