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