orderDetail.jsx 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348
  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} from '@/tools';
  14. import { splitUrl } from '@/tools.js';
  15. const FormItem = Form.Item;
  16. const OrderDetail = Form.create()(React.createClass({
  17. loadXmu(record) {
  18. this.state.data = [];
  19. this.setState({
  20. loading: true
  21. });
  22. $.ajax({
  23. method: "get",
  24. dataType: "json",
  25. crossDomain: false,
  26. url: globalConfig.context + '/api/admin/order/getOrderCommodity',
  27. data: {
  28. orderNo:record?record.orderNo:this.props.data.orderNo
  29. },
  30. success: function (data) {
  31. let theArr = [];
  32. if (!data.data) {
  33. if (data.error && data.error.length) {
  34. message.warning(data.error[0].message);
  35. };
  36. } else {
  37. for (let i = 0; i < data.data.length; i++) {
  38. let thisdata = data.data[i];
  39. theArr.push({
  40. key: i,
  41. id:thisdata.id,
  42. orderNo:thisdata.orderNo,
  43. commodityName:thisdata.commodityName,
  44. commodityType:thisdata.commodityType,
  45. commodityMode:thisdata.commodityMode,
  46. commodityQuantity:thisdata.commodityQuantity,
  47. commodityPrice:thisdata.commodityPrice,
  48. discountPrice:thisdata.discountPrice,
  49. commodityFirstPayment:thisdata.commodityFirstPayment,
  50. createTimes:thisdata.createTimes,
  51. discountFirstPayment:thisdata.discountFirstPayment,
  52. remarks:thisdata.remarks,
  53. commodityId:thisdata.commodityId,
  54. });
  55. };
  56. }
  57. this.setState({
  58. dataSource: theArr,
  59. pagination: false,
  60. });
  61. }.bind(this),
  62. }).always(function () {
  63. this.setState({
  64. loading: false
  65. });
  66. }.bind(this));
  67. },
  68. getInitialState() {
  69. return {
  70. visible: false,
  71. loading: false,
  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(id) {
  117. this.setState({
  118. loading: true
  119. });
  120. $.ajax({
  121. method: "get",
  122. dataType: "json",
  123. crossDomain: false,
  124. url: globalConfig.context + '/api/admin/achievement/achievementDetail' ,
  125. data: {
  126. id: id
  127. },
  128. success: function (data) {
  129. let thisData = data.data;
  130. if (!thisData) {
  131. if (data.error && data.error.length) {
  132. message.warning(data.error[0].message);
  133. };
  134. thisData = {};
  135. };
  136. let publishPagesArr = [];
  137. thisData.publishPages.map(item=>{
  138. publishPagesArr.push(item.publishPage)
  139. })
  140. this.setState({
  141. id:thisData.id,
  142. publishPagesArr:publishPagesArr,
  143. data: thisData,
  144. isHot:thisData.isHot,
  145. isUrgent:thisData.isUrgent,
  146. status:thisData.status,
  147. isHot:thisData.isHot,
  148. pictureUrl: thisData.technicalPictureUrl ? splitUrl(thisData.technicalPictureUrl, ',', globalConfig.avatarHost + '/upload') : [],
  149. pictureUrlMin: thisData.pictureUrlMin ? splitUrl(thisData.pictureUrlMin, ',', globalConfig.avatarHost + '/upload') : []
  150. });
  151. }.bind(this),
  152. }).always(function () {
  153. this.setState({
  154. loading: false
  155. });
  156. }.bind(this));
  157. },
  158. getPictureUrl(e) {
  159. this.setState({ pictureUrl: e });
  160. },
  161. cancelFun(){
  162. this.props.closeDesc();
  163. },
  164. //审核通过/拒绝
  165. updateFun(index){
  166. this.setState({
  167. loading:true
  168. })
  169. $.ajax({
  170. method: "post",
  171. dataType: "JSON",
  172. crossDomain: false,
  173. url: globalConfig.context + '/api/admin/achievement/audit',
  174. data: {
  175. id: this.state.id,
  176. auditResult:index,
  177. auditInfo:this.state.refuseValue
  178. }
  179. }).done(function (data) {
  180. if (!data.error.length) {
  181. message.success('操作成功!');
  182. this.setState({
  183. loading: false,
  184. });
  185. this.props.handOk()
  186. } else {
  187. message.warning(data.error[0].message);
  188. };
  189. }.bind(this));
  190. },
  191. //审核拒绝
  192. refuse(){
  193. this.setState({
  194. refuseValue:'',
  195. refuseVisible:true
  196. })
  197. },
  198. refuseOk(){
  199. if(!this.state.refuseValue){
  200. message.warning('请填写拒绝原因。')
  201. return;
  202. }
  203. this.setState({
  204. refuseVisible:false
  205. })
  206. this.updateFun(0)
  207. },
  208. refuseCancel(){
  209. this.setState({
  210. refuseValue:'',
  211. refuseVisible:false
  212. })
  213. },
  214. componentWillMount() {
  215. if (this.props.data.orderNo) {
  216. this.loadData(this.props.data.id);
  217. this.loadXmu(this.props.data.data);
  218. } else {
  219. this.state.data = {};
  220. };
  221. },
  222. componentWillReceiveProps(nextProps) {
  223. if (!this.props.visible && nextProps.visible) {
  224. this.state.textFileList = [];
  225. this.state.videoFileList = [];
  226. if (nextProps.data.orderNo) {
  227. this.loadData(nextProps.data.id);
  228. this.loadXmu(nextProps.data);
  229. } else {
  230. this.state.data = {};
  231. this.state.pictureUrl = [];
  232. this.state.pictureUrlMin=[];
  233. };
  234. this.props.form.resetFields();
  235. };
  236. },
  237. render() {
  238. const theData = this.state.data || {};
  239. const { getFieldDecorator } = this.props.form;
  240. const FormItem = Form.Item
  241. const formItemLayout = {
  242. labelCol: { span: 6 },
  243. wrapperCol: { span: 12 },
  244. };
  245. return (
  246. <div className='login'>
  247. <Form layout="horizontal" id="demand-form">
  248. <Spin spinning={this.state.loading}>
  249. <div className="clearfix">
  250. <FormItem className="half-item" {...formItemLayout} label="订单编号">
  251. <span>{theData.name}</span>
  252. </FormItem>
  253. <FormItem className="half-item" {...formItemLayout} label="签单时间">
  254. <span>{theData.name}</span>
  255. </FormItem>
  256. <FormItem className="half-item" {...formItemLayout} label="客户名称">
  257. <span>{theData.name}</span>
  258. </FormItem>
  259. <FormItem className="half-item" {...formItemLayout} label="流转状态">
  260. <span>{theData.name}</span>
  261. </FormItem>
  262. <FormItem className="half-item" {...formItemLayout} label="结算状态">
  263. <span>{theData.name}</span>
  264. </FormItem>
  265. <FormItem className="half-item" {...formItemLayout} label="已收款">
  266. <span>{theData.name}</span>
  267. </FormItem>
  268. <FormItem className="half-item" {...formItemLayout} label="订单类型">
  269. <span>{theData.name}</span>
  270. </FormItem>
  271. <FormItem className="half-item" {...formItemLayout} label="是否特批">
  272. <span>{theData.name}</span>
  273. </FormItem>
  274. </div>
  275. <div className="clearfix">
  276. <FormItem labelCol={{ span: 3 }} wrapperCol={{ span: 18 }} label="合同扫描件">
  277. <Upload className="demandDetailShow-upload"
  278. listType="picture-card"
  279. fileList={this.state.pictureUrl}
  280. onPreview={(file) => {
  281. this.setState({
  282. previewImage: file.url || file.thumbUrl,
  283. previewVisible: true,
  284. });
  285. }} >
  286. </Upload>
  287. <Modal maskClosable={false} footer={null}
  288. visible={this.state.previewVisible}
  289. onCancel={() => { this.setState({ previewVisible: false }) }}>
  290. <img alt="" style={{ width: '100%' }} src={this.state.previewImage || ''} />
  291. </Modal>
  292. </FormItem>
  293. </div>
  294. <div className="clearfix">
  295. <FormItem className="half-item" {...formItemLayout} label="合同编号">
  296. <span>{theData.name}</span>
  297. </FormItem>
  298. </div>
  299. <div className="clearfix">
  300. <FormItem labelCol={{ span: 3 }} wrapperCol={{ span: 18 }} label="订单留言">
  301. <span>{theData.introduction}</span>
  302. </FormItem>
  303. </div>
  304. <div className="clearfix">
  305. <FormItem labelCol={{ span: 3 }} wrapperCol={{ span: 18 }} label="收款节点">
  306. <span>{theData.introduction}</span>
  307. </FormItem>
  308. </div>
  309. <div className="clearfix">
  310. <FormItem className="half-item" {...formItemLayout} label="订单负责人">
  311. <span>{theData.introduction}</span>
  312. </FormItem>
  313. <FormItem className="half-item" {...formItemLayout} label="订单负责人电话">
  314. <span>{theData.introduction}</span>
  315. </FormItem>
  316. <FormItem className="half-item" {...formItemLayout} label="财务负责人">
  317. <span>{theData.introduction}</span>
  318. </FormItem>
  319. <FormItem className="half-item" {...formItemLayout} label="财务负责人电话">
  320. <span>{theData.introduction}</span>
  321. </FormItem>
  322. </div>
  323. <div className="clearfix">
  324. <p style={{fontSize:18,marginLeft:20}}>项目业务</p>
  325. <div className="patent-table">
  326. <Spin spinning={this.state.loading}>
  327. <Table columns={this.state.columns}
  328. dataSource={this.state.dataSource}
  329. pagination={this.state.pagination}
  330. onRowClick={this.tableRowClick}
  331. />
  332. </Spin>
  333. </div>
  334. </div>
  335. </Spin>
  336. </Form>
  337. </div>
  338. )
  339. }
  340. }));
  341. export default OrderDetail;