orderDetail.js 11 KB

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