orderDetail.jsx 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331
  1. import React from 'react';
  2. import $ from 'jquery/src/ajax';
  3. import {
  4. Modal,
  5. message,
  6. Spin,
  7. Upload,
  8. Input,
  9. Button,
  10. Form,
  11. Table
  12. } from 'antd';
  13. import {getOrderType,getjiedian,splitUrl,getNewOrderType,getProcessStatus,getApproval,getLiquidationStatus,getProjectStatus} from '@/tools';
  14. const FormItem = Form.Item;
  15. const OrderDetail = Form.create()(React.createClass({
  16. loadXmu(record) {
  17. this.state.data = [];
  18. this.setState({
  19. loading: true
  20. });
  21. $.ajax({
  22. method: "get",
  23. dataType: "json",
  24. crossDomain: false,
  25. url: globalConfig.context + '/open/api/admin/newOrder/getOrderTask',
  26. data: {
  27. orderNo:record?record.orderNo:this.props.data.orderNo
  28. },
  29. success: function (data) {
  30. let theArr = [];
  31. if (!data.data) {
  32. if (data.error && data.error.length) {
  33. message.warning(data.error[0].message);
  34. };
  35. } else {
  36. for (let i = 0; i < data.data.length; i++) {
  37. let thisdata = data.data[i];
  38. theArr.push({
  39. key: i,
  40. id:thisdata.id,
  41. orderNo:thisdata.orderNo,
  42. commodityName:thisdata.commodityName,
  43. commodityPrice:thisdata.commodityPrice,
  44. commodityQuantity:thisdata.commodityQuantity,
  45. taskStatus:thisdata.taskStatus,
  46. taskComment:thisdata.taskComment,
  47. main:thisdata.main,
  48. contacts:thisdata.contacts,
  49. contactsMobile:thisdata.contactsMobile,
  50. cname:thisdata.cname,
  51. });
  52. };
  53. }
  54. this.setState({
  55. dataSource: theArr,
  56. pagination: false,
  57. });
  58. }.bind(this),
  59. }).always(function () {
  60. this.setState({
  61. loading: false
  62. });
  63. }.bind(this));
  64. },
  65. getInitialState() {
  66. return {
  67. visible: false,
  68. loading: false,
  69. jsDate:[],
  70. auditStatus: 0,
  71. textFileList: [],
  72. videoFileList: [],
  73. pictureUrl: [],
  74. pictureUrlMin:[],
  75. columns: [
  76. {
  77. title: '业务项目名称',
  78. dataIndex: 'commodityName',
  79. key: 'commodityName',
  80. render:text=>{
  81. return text&&text.length>6?<span title={text}>{text.substr(0,8)}...</span>:text
  82. }
  83. }, {
  84. title: '项目类别',
  85. dataIndex: 'cname',
  86. key: 'cname'
  87. }, {
  88. title: '服务市价(万元)',
  89. dataIndex: 'commodityPrice',
  90. key: 'commodityPrice'
  91. }, {
  92. title: '项目状态',
  93. dataIndex: 'taskStatus',
  94. key: 'taskStatus',
  95. render:text=>{
  96. return getProjectStatus(text);
  97. }
  98. },{
  99. title: '项目负责人',
  100. dataIndex: 'contacts',
  101. key: 'contacts'
  102. },
  103. {
  104. title: '联系方式',
  105. dataIndex: 'contactsMobile',
  106. key: 'contactsMobile'
  107. }, {
  108. title: '是否主要联系人',
  109. dataIndex: 'main',
  110. key: 'main',
  111. render:text=>{
  112. return text?'是':'否'
  113. }
  114. },{
  115. title: '项目说明',
  116. dataIndex: 'taskComment',
  117. key: 'taskComment',
  118. render:text=>{
  119. return text&&text.length>8?<span title={text}>{text.substr(0,8)}...</span>:text
  120. }
  121. }
  122. ],
  123. };
  124. },
  125. loadData(record){
  126. this.state.orderList=[];
  127. $.ajax({
  128. method: "get",
  129. dataType: "json",
  130. crossDomain: false,
  131. url: globalConfig.context + '/open/api/admin/newOrder/getOrderNewDetail',
  132. data: {
  133. orderNo:record?record.orderNo:this.props.data.orderNo
  134. },
  135. success: function (data) {
  136. let thisData = data.data;
  137. if (!thisData) {
  138. if (data.error && data.error.length) {
  139. message.warning(data.error[0].message);
  140. };
  141. thisData = {};
  142. };
  143. this.setState({
  144. id:thisData.id,
  145. orderList:thisData,
  146. approval:thisData.approval==0?thisData.approval.toString():thisData.approval,
  147. orderRemarks:thisData.orderRemarks,
  148. orgCodeUrl: thisData.contractPictureUrl ? splitUrl(thisData.contractPictureUrl, ',', globalConfig.avatarHost + '/upload') : [],
  149. orderNo:thisData.orderNo,//订单编号
  150. buyerId:thisData.buyerId,
  151. });
  152. }.bind(this),
  153. }).always(function () {
  154. this.setState({
  155. loading: false
  156. });
  157. }.bind(this));
  158. },
  159. jdDate(record){
  160. $.ajax({
  161. method: "get",
  162. dataType: "json",
  163. crossDomain: false,
  164. url: globalConfig.context + '/open/api/admin/newOrder/selectOrderDun',
  165. data: {
  166. orderNo:record?record.orderNo:this.props.data.orderNo
  167. },
  168. success: function (data) {
  169. let thisData = data.data;
  170. if (!thisData.length) {
  171. if (data.error && data.error.length) {
  172. message.warning(data.error[0].message);
  173. };
  174. thisData = {};
  175. }else{
  176. this.setState({
  177. jsDate:thisData
  178. })
  179. };
  180. }.bind(this),
  181. }).always(function () {
  182. this.setState({
  183. loading: false
  184. });
  185. }.bind(this));
  186. },
  187. getPictureUrl(e) {
  188. this.setState({ pictureUrl: e });
  189. },
  190. componentWillMount() {
  191. if (this.props.data.orderNo) {
  192. this.loadData();
  193. this.loadXmu();
  194. this.jdDate();
  195. } else {
  196. this.state.data = {};
  197. };
  198. },
  199. componentWillReceiveProps(nextProps) {
  200. if (!this.props.visible && nextProps.visible) {
  201. this.state.textFileList = [];
  202. this.state.videoFileList = [];
  203. if (nextProps.data.orderNo) {
  204. this.loadData(nextProps.data);
  205. this.loadXmu(nextProps.data);
  206. this.jdDate(nextProps.data);
  207. } else {
  208. this.state.data = {};
  209. this.state.pictureUrl = [];
  210. this.state.pictureUrlMin=[];
  211. };
  212. this.props.form.resetFields();
  213. };
  214. },
  215. render() {
  216. const theData = this.state.orderList || {};
  217. const FormItem = Form.Item
  218. const formItemLayout = {
  219. labelCol: { span: 6 },
  220. wrapperCol: { span: 12 },
  221. };
  222. const jsDate = this.state.jsDate || [];
  223. return (
  224. <div className='login'>
  225. <Form layout="horizontal" id="demand-form">
  226. <Spin spinning={this.state.loading}>
  227. <div className="clearfix">
  228. <FormItem className="half-item" {...formItemLayout} label="订单编号">
  229. <span>{theData.orderNo}</span>
  230. </FormItem>
  231. <FormItem className="half-item" {...formItemLayout} label="签单时间">
  232. <span>{theData.signTime?new Date(theData.signTime).toLocaleString():''}</span>
  233. </FormItem>
  234. <FormItem className="half-item" {...formItemLayout} label="客户名称">
  235. <span>{theData.userName}</span>
  236. </FormItem>
  237. <FormItem className="half-item" {...formItemLayout} label="流转状态">
  238. <span>{getProcessStatus(theData.processStatus)}</span>
  239. </FormItem>
  240. <FormItem className="half-item" {...formItemLayout} label="结算状态">
  241. <span>{getLiquidationStatus(theData.liquidationStatus)}</span>
  242. </FormItem>
  243. <FormItem className="half-item" {...formItemLayout} label="已收款(万元)">
  244. <span>{theData.settlementAmount}</span>
  245. </FormItem>
  246. <FormItem className="half-item" {...formItemLayout} label="订单类型">
  247. <span>{getNewOrderType(theData.orderType)}</span>
  248. </FormItem>
  249. <FormItem className="half-item" {...formItemLayout} label="是否特批">
  250. <span>{getApproval(theData.approval)}</span>
  251. </FormItem>
  252. </div>
  253. <div className="clearfix">
  254. <FormItem labelCol={{ span: 3 }} wrapperCol={{ span: 18 }} label="合同扫描件">
  255. <Upload className="demandDetailShow-upload"
  256. listType="picture-card"
  257. fileList={this.state.orgCodeUrl}
  258. onPreview={(file) => {
  259. this.setState({
  260. previewImage: file.url || file.thumbUrl,
  261. previewVisible: true,
  262. });
  263. }} >
  264. </Upload>
  265. <Modal maskClosable={false} footer={null}
  266. visible={this.state.previewVisible}
  267. onCancel={() => { this.setState({ previewVisible: false }) }}>
  268. <img alt="" style={{ width: '100%' }} src={this.state.previewImage || ''} />
  269. </Modal>
  270. </FormItem>
  271. </div>
  272. <div className="clearfix">
  273. <FormItem className="half-item" {...formItemLayout} label="合同编号">
  274. <span>{theData.contractNo}</span>
  275. </FormItem>
  276. </div>
  277. <div className="clearfix">
  278. <FormItem labelCol={{ span: 3 }} wrapperCol={{ span: 18 }} label="订单留言">
  279. <span>{theData.orderRemarks}</span>
  280. </FormItem>
  281. </div>
  282. <div className="clearfix">
  283. <FormItem labelCol={{ span: 3 }} wrapperCol={{ span: 18 }} label="收款节点">
  284. {
  285. jsDate.map(item=>{
  286. return <p>{getjiedian(item.dunSubject)} -- {item.money} 万元</p>
  287. })
  288. }
  289. </FormItem>
  290. </div>
  291. <div className="clearfix">
  292. <FormItem className="half-item" {...formItemLayout} label="订单负责人">
  293. <span>{theData.salesmanName}</span>
  294. </FormItem>
  295. <FormItem className="half-item" {...formItemLayout} label="订单负责人电话">
  296. <span>{theData.salesmanMobile}</span>
  297. </FormItem>
  298. <FormItem className="half-item" {...formItemLayout} label="财务负责人">
  299. <span>{theData.financeName}</span>
  300. </FormItem>
  301. <FormItem className="half-item" {...formItemLayout} label="财务负责人电话">
  302. <span>{theData.financeMobile}</span>
  303. </FormItem>
  304. </div>
  305. <div className="clearfix">
  306. <p style={{fontSize:18,marginLeft:20}}>项目业务</p>
  307. <div className="patent-table">
  308. <Spin spinning={this.state.loading}>
  309. <Table columns={this.state.columns}
  310. dataSource={this.state.dataSource}
  311. pagination={this.state.pagination}
  312. onRowClick={this.tableRowClick}
  313. />
  314. </Spin>
  315. </div>
  316. </div>
  317. </Spin>
  318. </Form>
  319. </div>
  320. )
  321. }
  322. }));
  323. export default OrderDetail;