orderDetail.jsx 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335
  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 + '/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: 'commodityQuantity',
  90. key: 'commodityQuantity'
  91. },{
  92. title: '服务市价(万元)',
  93. dataIndex: 'commodityPrice',
  94. key: 'commodityPrice'
  95. }, {
  96. title: '项目状态',
  97. dataIndex: 'taskStatus',
  98. key: 'taskStatus',
  99. render:text=>{
  100. return getProjectStatus(text);
  101. }
  102. }, {
  103. title: '是否主要项目',
  104. dataIndex: 'main',
  105. key: 'main',
  106. render:text=>{
  107. return text?'是':'否'
  108. }
  109. },{
  110. title: '项目说明',
  111. dataIndex: 'taskComment',
  112. key: 'taskComment',
  113. render:text=>{
  114. return text&&text.length>8?<span title={text}>{text.substr(0,8)}...</span>:text
  115. }
  116. }
  117. ],
  118. };
  119. },
  120. loadData(record){
  121. this.state.orderList=[];
  122. $.ajax({
  123. method: "get",
  124. dataType: "json",
  125. crossDomain: false,
  126. url: globalConfig.context + '/api/admin/newOrder/getOrderNewDetail',
  127. data: {
  128. orderNo:record?record.orderNo:this.props.data.orderNo
  129. },
  130. success: function (data) {
  131. let thisData = data.data;
  132. if (!thisData) {
  133. if (data.error && data.error.length) {
  134. message.warning(data.error[0].message);
  135. };
  136. thisData = {};
  137. };
  138. this.setState({
  139. id:thisData.id,
  140. orderList:thisData,
  141. approval:thisData.approval==0?thisData.approval.toString():thisData.approval,
  142. orderRemarks:thisData.orderRemarks,
  143. orgCodeUrl: thisData.contractPictureUrl ? splitUrl(thisData.contractPictureUrl, ',', globalConfig.avatarHost + '/upload') : [],
  144. orderNo:thisData.orderNo,//订单编号
  145. buyerId:thisData.buyerId,
  146. });
  147. }.bind(this),
  148. }).always(function () {
  149. this.setState({
  150. loading: false
  151. });
  152. }.bind(this));
  153. },
  154. jdDate(record){
  155. $.ajax({
  156. method: "get",
  157. dataType: "json",
  158. crossDomain: false,
  159. url: globalConfig.context + '/api/admin/newOrder/selectOrderDun',
  160. data: {
  161. orderNo:record?record.orderNo:this.props.data.orderNo
  162. },
  163. success: function (data) {
  164. let thisData = data.data;
  165. if (!thisData.length) {
  166. if (data.error && data.error.length) {
  167. message.warning(data.error[0].message);
  168. };
  169. thisData = {};
  170. }else{
  171. this.setState({
  172. jsDate:thisData
  173. })
  174. };
  175. }.bind(this),
  176. }).always(function () {
  177. this.setState({
  178. loading: false
  179. });
  180. }.bind(this));
  181. },
  182. getPictureUrl(e) {
  183. this.setState({ pictureUrl: e });
  184. },
  185. componentWillMount() {
  186. if (this.props.data.orderNo) {
  187. this.loadData();
  188. this.loadXmu();
  189. this.jdDate();
  190. } else {
  191. this.state.data = {};
  192. };
  193. },
  194. componentWillReceiveProps(nextProps) {
  195. if (!this.props.visible && nextProps.visible) {
  196. this.state.textFileList = [];
  197. this.state.videoFileList = [];
  198. if (nextProps.data.orderNo) {
  199. this.loadData(nextProps.data);
  200. this.loadXmu(nextProps.data);
  201. this.jdDate(nextProps.data);
  202. } else {
  203. this.state.data = {};
  204. this.state.pictureUrl = [];
  205. this.state.pictureUrlMin=[];
  206. };
  207. this.props.form.resetFields();
  208. };
  209. },
  210. render() {
  211. const theData = this.state.orderList || {};
  212. const FormItem = Form.Item
  213. const formItemLayout = {
  214. labelCol: { span: 10 },
  215. wrapperCol: { span: 12 },
  216. };
  217. const jsDate = this.state.jsDate || [];
  218. return (
  219. <div className='login'>
  220. <Form layout="horizontal" id="demand-form">
  221. <Spin spinning={this.state.loading}>
  222. <div className="clearfix">
  223. <FormItem className="half-item" {...formItemLayout} label="订单编号">
  224. <span>{theData.orderNo}</span>
  225. </FormItem>
  226. <FormItem className="half-item" {...formItemLayout} label="签单时间">
  227. <span>{theData.signDate}</span>
  228. </FormItem>
  229. <FormItem className="half-item" {...formItemLayout} label="客户名称">
  230. <span>{theData.userName}</span>
  231. </FormItem>
  232. <FormItem className="half-item" {...formItemLayout} label="流转状态">
  233. <span>{getProcessStatus(theData.processStatus)}</span>
  234. </FormItem>
  235. <FormItem className="half-item" {...formItemLayout} label="订单类型">
  236. <span>{getNewOrderType(theData.orderType)}</span>
  237. </FormItem>
  238. <FormItem className="half-item" {...formItemLayout} label="结算状态">
  239. <span>{getLiquidationStatus(theData.liquidationStatus)}</span>
  240. </FormItem>
  241. <FormItem className="half-item" {...formItemLayout} label="签单总金额(万元)">
  242. <span>{theData.totalAmount}</span>
  243. </FormItem>
  244. <FormItem className="half-item" {...formItemLayout} label="首付款(万元)">
  245. <span>{theData.firstAmount}</span>
  246. </FormItem>
  247. <FormItem className="half-item" {...formItemLayout} label="已收款(万元)">
  248. <span>{theData.settlementAmount}</span>
  249. </FormItem>
  250. <FormItem className="half-item" {...formItemLayout} label="是否特批">
  251. <span>{getApproval(theData.approval)}</span>
  252. </FormItem>
  253. {this.props.data.orderStatus=='6'&&<FormItem className="half-item" {...formItemLayout} label="已退(万元)">
  254. <span>{this.props.data.refundAmount}</span>
  255. </FormItem>}
  256. </div>
  257. <div className="clearfix">
  258. <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 18 }} label="合同扫描件">
  259. <Upload className="demandDetailShow-upload"
  260. listType="picture-card"
  261. fileList={this.state.orgCodeUrl}
  262. onPreview={(file) => {
  263. this.setState({
  264. previewImage: file.url || file.thumbUrl,
  265. previewVisible: true,
  266. });
  267. }} >
  268. </Upload>
  269. <Modal maskClosable={false} footer={null}
  270. visible={this.state.previewVisible}
  271. onCancel={() => { this.setState({ previewVisible: false }) }}>
  272. <img alt="" style={{ width: '100%' }} src={this.state.previewImage || ''} />
  273. </Modal>
  274. </FormItem>
  275. </div>
  276. <div className="clearfix">
  277. <FormItem className="half-item" {...formItemLayout} label="合同编号">
  278. <span>{theData.contractNo}</span>
  279. </FormItem>
  280. </div>
  281. <div className="clearfix">
  282. <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 18 }} label="订单留言">
  283. <span>{theData.orderRemarks}</span>
  284. </FormItem>
  285. </div>
  286. <div className="clearfix">
  287. <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 18 }} label="收款节点">
  288. {
  289. jsDate.map(item=>{
  290. return <p>{getjiedian(item.dunSubject)} -- {item.money} 万元</p>
  291. })
  292. }
  293. </FormItem>
  294. </div>
  295. <div className="clearfix">
  296. <FormItem className="half-item" {...formItemLayout} label="订单负责人">
  297. <span>{theData.salesmanName}</span>
  298. </FormItem>
  299. <FormItem className="half-item" {...formItemLayout} label="订单负责人电话">
  300. <span>{theData.salesmanMobile}</span>
  301. </FormItem>
  302. <FormItem className="half-item" {...formItemLayout} label="财务负责人">
  303. <span>{theData.financeName}</span>
  304. </FormItem>
  305. <FormItem className="half-item" {...formItemLayout} label="财务负责人电话">
  306. <span>{theData.financeMobile}</span>
  307. </FormItem>
  308. </div>
  309. <div className="clearfix">
  310. <p style={{fontSize:18,marginLeft:20}}>项目业务</p>
  311. <div className="patent-table">
  312. <Spin spinning={this.state.loading}>
  313. <Table columns={this.state.columns}
  314. dataSource={this.state.dataSource}
  315. pagination={this.state.pagination}
  316. onRowClick={this.tableRowClick}
  317. />
  318. </Spin>
  319. </div>
  320. </div>
  321. </Spin>
  322. </Form>
  323. </div>
  324. )
  325. }
  326. }));
  327. export default OrderDetail;