orderDetail.jsx 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376
  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,splitUrl,getNewOrderType,getProcessStatus,getApproval,getLiquidationStatus} 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/order/getOrderCommodity',
  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. commodityType:thisdata.commodityType,
  44. commodityMode:thisdata.commodityMode,
  45. commodityQuantity:thisdata.commodityQuantity,
  46. commodityPrice:thisdata.commodityPrice,
  47. discountPrice:thisdata.discountPrice,
  48. commodityFirstPayment:thisdata.commodityFirstPayment,
  49. createTimes:thisdata.createTimes,
  50. discountFirstPayment:thisdata.discountFirstPayment,
  51. remarks:thisdata.remarks,
  52. commodityId:thisdata.commodityId,
  53. });
  54. };
  55. }
  56. this.setState({
  57. dataSource: theArr,
  58. pagination: false,
  59. });
  60. }.bind(this),
  61. }).always(function () {
  62. this.setState({
  63. loading: false
  64. });
  65. }.bind(this));
  66. },
  67. getInitialState() {
  68. return {
  69. visible: false,
  70. loading: false,
  71. jsDate:[],
  72. auditStatus: 0,
  73. textFileList: [],
  74. videoFileList: [],
  75. pictureUrl: [],
  76. pictureUrlMin:[],
  77. columns: [
  78. {
  79. title: '业务项目名称',
  80. dataIndex: 'commodityName',
  81. key: 'commodityName'
  82. }, {
  83. title: '项目类别',
  84. dataIndex: 'commodityType',
  85. key: 'commodityType',
  86. render:(text)=>{
  87. return (getOrderType(text))
  88. }
  89. },{
  90. title: '项目数量',
  91. dataIndex: 'commodityQuantity',
  92. key: 'commodityQuantity'
  93. }, {
  94. title: '服务市价(万元)',
  95. dataIndex: 'commodityPrice',
  96. key: 'commodityPrice'
  97. }, {
  98. title: '实签价格(万元)',
  99. dataIndex: 'discountPrice',
  100. key: 'discountPrice'
  101. }, {
  102. title: '下单时间',
  103. dataIndex: 'createTimes',
  104. key: 'createTimes'
  105. }, {
  106. title: '项目说明',
  107. dataIndex: 'remarks',
  108. key: 'remarks',
  109. render:(text)=>{
  110. return (text&&text.length>8?text.substr(0,8)+'…':text)
  111. }
  112. }
  113. ],
  114. };
  115. },
  116. loadData(record){
  117. this.state.orderList=[];
  118. $.ajax({
  119. method: "get",
  120. dataType: "json",
  121. crossDomain: false,
  122. url: globalConfig.context + '/api/admin/order/getServiceOrderDetail',
  123. data: {
  124. orderNo:record?record.orderNo:this.props.data.orderNo
  125. },
  126. success: function (data) {
  127. let thisData = data.data;
  128. if (!thisData) {
  129. if (data.error && data.error.length) {
  130. message.warning(data.error[0].message);
  131. };
  132. thisData = {};
  133. };
  134. this.setState({
  135. id:thisData.id,
  136. orderList:thisData,
  137. approval:thisData.approval==0?thisData.approval.toString():thisData.approval,
  138. orderRemarks:thisData.orderRemarks,
  139. orgCodeUrl: thisData.contractPictureUrl ? splitUrl(thisData.contractPictureUrl, ',', globalConfig.avatarHost + '/upload') : [],
  140. orderNo:thisData.orderNo,//订单编号
  141. buyerId:thisData.buyerId,
  142. });
  143. }.bind(this),
  144. }).always(function () {
  145. this.setState({
  146. loading: false
  147. });
  148. }.bind(this));
  149. },
  150. jdDate(record){
  151. $.ajax({
  152. method: "get",
  153. dataType: "json",
  154. crossDomain: false,
  155. url: globalConfig.context + '/open/api/admin/newOrder/selectOrderDun',
  156. data: {
  157. orderNo:record?record.orderNo:this.props.data.orderNo
  158. },
  159. success: function (data) {
  160. let thisData = data.data;
  161. if (!thisData.length) {
  162. if (data.error && data.error.length) {
  163. message.warning(data.error[0].message);
  164. };
  165. thisData = {};
  166. }else{
  167. this.setState({
  168. jsDate:thisData
  169. })
  170. };
  171. }.bind(this),
  172. }).always(function () {
  173. this.setState({
  174. loading: false
  175. });
  176. }.bind(this));
  177. },
  178. getPictureUrl(e) {
  179. this.setState({ pictureUrl: e });
  180. },
  181. cancelFun(){
  182. this.props.closeDesc();
  183. },
  184. //审核通过/拒绝
  185. updateFun(index){
  186. this.setState({
  187. loading:true
  188. })
  189. $.ajax({
  190. method: "post",
  191. dataType: "JSON",
  192. crossDomain: false,
  193. url: globalConfig.context + '/api/admin/achievement/audit',
  194. data: {
  195. id: this.state.id,
  196. auditResult:index,
  197. auditInfo:this.state.refuseValue
  198. }
  199. }).done(function (data) {
  200. if (!data.error.length) {
  201. message.success('操作成功!');
  202. this.setState({
  203. loading: false,
  204. });
  205. this.props.handOk()
  206. } else {
  207. message.warning(data.error[0].message);
  208. };
  209. }.bind(this));
  210. },
  211. //审核拒绝
  212. refuse(){
  213. this.setState({
  214. refuseValue:'',
  215. refuseVisible:true
  216. })
  217. },
  218. refuseOk(){
  219. if(!this.state.refuseValue){
  220. message.warning('请填写拒绝原因。')
  221. return;
  222. }
  223. this.setState({
  224. refuseVisible:false
  225. })
  226. this.updateFun(0)
  227. },
  228. refuseCancel(){
  229. this.setState({
  230. refuseValue:'',
  231. refuseVisible:false
  232. })
  233. },
  234. componentWillMount() {
  235. if (this.props.data.orderNo) {
  236. this.loadData();
  237. this.loadXmu();
  238. this.jdDate();
  239. } else {
  240. this.state.data = {};
  241. };
  242. },
  243. componentWillReceiveProps(nextProps) {
  244. if (!this.props.visible && nextProps.visible) {
  245. this.state.textFileList = [];
  246. this.state.videoFileList = [];
  247. if (nextProps.data.orderNo) {
  248. this.loadData(nextProps.data);
  249. this.loadXmu(nextProps.data);
  250. this.jdDate(nextProps.data);
  251. } else {
  252. this.state.data = {};
  253. this.state.pictureUrl = [];
  254. this.state.pictureUrlMin=[];
  255. };
  256. this.props.form.resetFields();
  257. };
  258. },
  259. render() {
  260. const theData = this.state.orderList || {};
  261. const { getFieldDecorator } = this.props.form;
  262. const FormItem = Form.Item
  263. const formItemLayout = {
  264. labelCol: { span: 6 },
  265. wrapperCol: { span: 12 },
  266. };
  267. const jsDate = this.state.jsDate || [];
  268. return (
  269. <div className='login'>
  270. <Form layout="horizontal" id="demand-form">
  271. <Spin spinning={this.state.loading}>
  272. <div className="clearfix">
  273. <FormItem className="half-item" {...formItemLayout} label="订单编号">
  274. <span>{theData.orderNo}</span>
  275. </FormItem>
  276. <FormItem className="half-item" {...formItemLayout} label="签单时间">
  277. <span>{theData.signDate?(new Date(theData.signDate)).toLocaleString():''}</span>
  278. </FormItem>
  279. <FormItem className="half-item" {...formItemLayout} label="客户名称">
  280. <span>{theData.userName}</span>
  281. </FormItem>
  282. <FormItem className="half-item" {...formItemLayout} label="流转状态">
  283. <span>{getProcessStatus(theData.processStatus)}</span>
  284. </FormItem>
  285. <FormItem className="half-item" {...formItemLayout} label="结算状态">
  286. <span>{getLiquidationStatus(theData.liquidationStatus)}</span>
  287. </FormItem>
  288. <FormItem className="half-item" {...formItemLayout} label="已收款">
  289. <span>{theData.settlementAmount}</span>
  290. </FormItem>
  291. <FormItem className="half-item" {...formItemLayout} label="订单类型">
  292. <span>{getNewOrderType(theData.orderType)}</span>
  293. </FormItem>
  294. <FormItem className="half-item" {...formItemLayout} label="是否特批">
  295. <span>{getApproval(theData.approval)}</span>
  296. </FormItem>
  297. </div>
  298. <div className="clearfix">
  299. <FormItem labelCol={{ span: 3 }} wrapperCol={{ span: 18 }} label="合同扫描件">
  300. <Upload className="demandDetailShow-upload"
  301. listType="picture-card"
  302. fileList={this.state.orgCodeUrl}
  303. onPreview={(file) => {
  304. this.setState({
  305. previewImage: file.url || file.thumbUrl,
  306. previewVisible: true,
  307. });
  308. }} >
  309. </Upload>
  310. <Modal maskClosable={false} footer={null}
  311. visible={this.state.previewVisible}
  312. onCancel={() => { this.setState({ previewVisible: false }) }}>
  313. <img alt="" style={{ width: '100%' }} src={this.state.previewImage || ''} />
  314. </Modal>
  315. </FormItem>
  316. </div>
  317. <div className="clearfix">
  318. <FormItem className="half-item" {...formItemLayout} label="合同编号">
  319. <span>{theData.contractNo}</span>
  320. </FormItem>
  321. </div>
  322. <div className="clearfix">
  323. <FormItem labelCol={{ span: 3 }} wrapperCol={{ span: 18 }} label="订单留言">
  324. <span>{theData.orderRemarks}</span>
  325. </FormItem>
  326. </div>
  327. <div className="clearfix">
  328. <FormItem labelCol={{ span: 3 }} wrapperCol={{ span: 18 }} label="收款节点">
  329. {
  330. jsDate.map(item=>{
  331. return <p>{item.dunSubject} -- {item.money} 万元</p>
  332. })
  333. }
  334. </FormItem>
  335. </div>
  336. <div className="clearfix">
  337. <FormItem className="half-item" {...formItemLayout} label="订单负责人">
  338. <span>{theData.salesmanName}</span>
  339. </FormItem>
  340. <FormItem className="half-item" {...formItemLayout} label="订单负责人电话">
  341. <span>{theData.salesmanMobile}</span>
  342. </FormItem>
  343. <FormItem className="half-item" {...formItemLayout} label="财务负责人">
  344. <span>{theData.financeName}</span>
  345. </FormItem>
  346. <FormItem className="half-item" {...formItemLayout} label="财务负责人电话">
  347. <span>{theData.financeMobile}</span>
  348. </FormItem>
  349. </div>
  350. <div className="clearfix">
  351. <p style={{fontSize:18,marginLeft:20}}>项目业务</p>
  352. <div className="patent-table">
  353. <Spin spinning={this.state.loading}>
  354. <Table columns={this.state.columns}
  355. dataSource={this.state.dataSource}
  356. pagination={this.state.pagination}
  357. onRowClick={this.tableRowClick}
  358. />
  359. </Spin>
  360. </div>
  361. </div>
  362. </Spin>
  363. </Form>
  364. </div>
  365. )
  366. }
  367. }));
  368. export default OrderDetail;