orderDetail.jsx 13 KB

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