approveOrderDetaile.jsx 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593
  1. import React from 'react';
  2. import { Icon, Table, Modal, message, Spin, Input, Select, Button, Form, Upload, Popconfirm, AutoComplete } from 'antd';
  3. import ajax from 'jquery/src/ajax/xhr.js';
  4. import $ from 'jquery/src/ajax';
  5. import '../../userMangagement.less';
  6. import { getApprovedState, getPaymentState, getOrderState, getProjectState, getOrderChannel, getOrderType, getTransactionChannel, getTransactionProject } from '../../../../tools.js';
  7. import OrderItemStatus from "../../../../common/orderItemStatus";
  8. import EnterpriseNameChange from "../../../../common/enterpriseNameChange";
  9. import ProjectOperation from "../../../../common/projectOperation";
  10. //图片组件
  11. const PicturesWall = React.createClass({
  12. getInitialState() {
  13. return {
  14. previewVisible: false,
  15. previewImage: '',
  16. fileList: [],
  17. }
  18. },
  19. handleCancel() {
  20. this.setState({ previewVisible: false })
  21. },
  22. handlePreview(file) {
  23. this.setState({
  24. previewImage: file.url || file.thumbUrl,
  25. previewVisible: true,
  26. });
  27. },
  28. handleChange(info) {
  29. let fileList = info.fileList;
  30. this.setState({ fileList });
  31. this.props.fileList(fileList);
  32. },
  33. componentWillReceiveProps(nextProps) {
  34. this.state.fileList = nextProps.pictureUrl;
  35. },
  36. render() {
  37. const { previewVisible, previewImage, fileList } = this.state;
  38. const uploadButton = (
  39. <div>
  40. <Icon type="plus" />
  41. <div className="ant-upload-text">点击上传</div>
  42. </div>
  43. );
  44. return (
  45. <div style={{ display: "inline-block" }}>
  46. <Upload
  47. action={globalConfig.context + "/api/admin/superviser/uploadAdminImg"}
  48. data={{ 'sign': this.props.pictureSign }}
  49. listType="picture-card"
  50. fileList={fileList}
  51. onPreview={this.handlePreview}
  52. onChange={this.handleChange} >
  53. {fileList.length >= 4 ? null : uploadButton}
  54. </Upload>
  55. <Modal maskClosable={false} visible={previewVisible} footer={null} onCancel={this.handleCancel}>
  56. <img alt="example" style={{ width: '100%' }} src={previewImage} />
  57. </Modal>
  58. </div>
  59. );
  60. }
  61. });
  62. const ApproveOrderDetaile = Form.create()(React.createClass({
  63. loadData(record) {
  64. this.state.data = [];
  65. this.setState({
  66. loading: true
  67. });
  68. $.ajax({
  69. method: "get",
  70. dataType: "json",
  71. crossDomain: false,
  72. url: globalConfig.context + '/api/admin/order/getOrderCommodity',
  73. data: {
  74. orderNo: record ? record.orderNo : this.props.datauser.orderNo
  75. },
  76. success: function (data) {
  77. let theArr = [];
  78. if (!data.data) {
  79. if (data.error && data.error.length) {
  80. message.warning(data.error[0].message);
  81. };
  82. } else {
  83. for (let i = 0; i < data.data.length; i++) {
  84. let thisdata = data.data[i];
  85. theArr.push({
  86. key: i,
  87. id: thisdata.id,
  88. orderNo: thisdata.orderNo,
  89. commodityName: thisdata.commodityName,
  90. commodityType: thisdata.commodityType,
  91. commodityMode: thisdata.commodityMode,
  92. commodityQuantity: thisdata.commodityQuantity,
  93. commodityPrice: thisdata.commodityPrice,
  94. discountPrice: thisdata.discountPrice,
  95. commodityFirstPayment: thisdata.commodityFirstPayment,
  96. createTimes: thisdata.createTimes,
  97. discountFirstPayment: thisdata.discountFirstPayment,
  98. remarks: thisdata.remarks,
  99. });
  100. };
  101. }
  102. this.setState({
  103. dataSource: theArr,
  104. });
  105. }.bind(this),
  106. }).always(function () {
  107. this.setState({
  108. loading: false
  109. });
  110. }.bind(this));
  111. },
  112. getInitialState() {
  113. return {
  114. loading: false,
  115. visible: false,
  116. lookState: true,
  117. orgCodeUrl: [],
  118. lookflowList: [],
  119. checkedKeys: [],
  120. columns: [
  121. {
  122. title: '业务项目名称',
  123. dataIndex: 'commodityName',
  124. key: 'commodityName',
  125. render: (text, record) => {
  126. return <span>
  127. {text}<span style={{ color: "red" }}>{record.patentTypeName}</span>{"-" + record.id}
  128. <div>
  129. {record.cSort == 6 && record.projectType == 1 && <span>(含{record.htMember == 1 ? '高新会员&' : ''}{record.additionalDeduction == 1 ? '加计扣除&' : ''}{record.rdAwardsubsidy == 1 ? '研发奖补' : ''})</span>}
  130. {record.cSort == 6 && ([0, 3].indexOf(record.projectType) > -1) && <span>(仅提供单边会员服务)</span>}
  131. {record.cSort == 6 && record.projectType == 2 && <span>(仅填报表,仅咨询,不出备查资料)</span>}
  132. {record.cSort == 3 && <span>{record.technologyProjectType==0?'(简易项目)':record.technologyProjectType==1?'(市区级)':record.technologyProjectType==2?'(省级)':record.technologyProjectType==3?'(国家级)':''}</span>}
  133. {record.cSort == 8 ? (record.type != 2 && record.patentType == 1) ? <span>(变更)</span> : <span>{record.ordinaryRisk == 0 ? '(普通申请)' : record.ordinaryRisk == 1 ? '(风险代理)' : ''}</span> : ""}
  134. {record.type == 2 && <span>({record.days == 0 ? '普通' : record.days == 1 ? '加急' : ''}{record.scheme == 0 ? '&无方案' : record.scheme == 1 ? '&有方案' : ''})</span>}
  135. </div>
  136. </span>
  137. }
  138. }, {
  139. title: '项目类别',
  140. dataIndex: 'commodityType',
  141. key: 'commodityType',
  142. render: (text) => {
  143. return (getOrderType(text))
  144. }
  145. }, {
  146. title: '项目数量',
  147. dataIndex: 'commodityQuantity',
  148. key: 'commodityQuantity'
  149. }, {
  150. title: '服务市价(万元)',
  151. dataIndex: 'commodityPrice',
  152. key: 'commodityPrice'
  153. }, {
  154. title: '实签价格(万元)',
  155. dataIndex: 'discountPrice',
  156. key: 'discountPrice'
  157. }, {
  158. title: '下单时间',
  159. dataIndex: 'createTimes',
  160. key: 'createTimes'
  161. }, {
  162. title: '项目说明',
  163. dataIndex: 'remarks',
  164. key: 'remarks',
  165. render: (text) => {
  166. return (text && text.length > 8 ? text.substr(0, 8) + '…' : text)
  167. }
  168. }
  169. ],
  170. flowList: [
  171. {
  172. title: '平台流水号',
  173. dataIndex: 'billNo',
  174. key: 'billNo',
  175. }, {
  176. title: '平台流水时间',
  177. dataIndex: 'createTime',
  178. key: 'createTime'
  179. }, {
  180. title: '流水金额(万元)',
  181. dataIndex: 'transactionAmount',
  182. key: 'transactionAmount'
  183. }, {
  184. title: '付款人名称',
  185. dataIndex: 'payerName',
  186. key: 'payerName'
  187. }, {
  188. title: '收款人名称',
  189. dataIndex: 'payeeName',
  190. key: 'payeeName'
  191. },
  192. {
  193. title: '流水科目',
  194. dataIndex: 'transactionSubject',
  195. key: 'transactionSubject',
  196. render: (text) => { return getTransactionProject(text) }
  197. }, {
  198. title: '流水外联',
  199. dataIndex: 'transactionChannel',
  200. key: 'transactionChannel',
  201. render: (text) => { return getTransactionChannel(text) }
  202. }, {
  203. title: '财务流水号',
  204. dataIndex: 'financialPayNo',
  205. key: 'financialPayNo',
  206. }, {
  207. title: '财务流水时间',
  208. dataIndex: 'financialPayTime',
  209. key: 'financialPayTime',
  210. }, {
  211. title: '流水确认',
  212. dataIndex: 'confirmSign',
  213. key: 'confirmSign',
  214. render: (text) => { return text ? '已确认' : '待确认' }
  215. }, {
  216. title: '确认时间',
  217. dataIndex: 'confirmTime',
  218. key: 'confirmTime',
  219. }
  220. ]
  221. };
  222. },
  223. //查看基本详情基本信息
  224. loaduser(record) {
  225. if (record) {
  226. this.state.orderList = []
  227. $.ajax({
  228. method: "get",
  229. dataType: "json",
  230. crossDomain: false,
  231. url: globalConfig.context + '/api/admin/order/getServiceOrderDetail',
  232. data: {
  233. orderNo: record.orderNo
  234. },
  235. success: function (data) {
  236. let thisData = data.data;
  237. if (!thisData) {
  238. if (data.error && data.error.length) {
  239. message.warning(data.error[0].message);
  240. };
  241. thisData = {};
  242. };
  243. this.setState({
  244. id: thisData.id,
  245. orderList: thisData,
  246. orderAmount: thisData.orderAmount,
  247. firstPayment: thisData.firstPayment,
  248. signTotalAmount: thisData.signTotalAmount,
  249. signFirstPayment: thisData.signFirstPayment,
  250. approval: thisData.approval == 0 ? thisData.approval.toString() : thisData.approval,
  251. orderRemarks: thisData.orderRemarks,
  252. orgCodeUrl: thisData.orgCodeUrl ? splitUrl(thisData.orgCodeUrl, ',', globalConfig.avatarHost + '/upload') : [],
  253. //签单
  254. orderNo: thisData.orderNo,//订单编号
  255. buyerName: thisData.buyerName,
  256. });
  257. }.bind(this),
  258. }).always(function () {
  259. this.setState({
  260. loading: false
  261. });
  262. }.bind(this));
  263. }
  264. },
  265. handleOk(e) {
  266. this.setState({
  267. visible: false,
  268. });
  269. this.props.closeDesc(false, true);
  270. },
  271. handleCancel(e) {
  272. this.setState({
  273. visible: false,
  274. });
  275. this.props.closeDesc(false);
  276. },
  277. nextCancel() {
  278. this.setState({
  279. addnextVisible: false
  280. })
  281. },
  282. //订单详情
  283. xiangqings(record) {
  284. $.ajax({
  285. method: "get",
  286. dataType: "json",
  287. crossDomain: false,
  288. url: globalConfig.context + "/api/admin/newOrder/getOrderNewDetail",
  289. data: {
  290. orderNo: record ? record.orderNo : this.props.datauser.orderNo,
  291. },
  292. success: function (data) {
  293. let thisdata = data.data;
  294. if (data.error.length || data.data.list == "") {
  295. if (data.error && data.error.length) {
  296. message.warning(data.error[0].message);
  297. }
  298. } else {
  299. this.setState({
  300. deleteSign: thisdata.deleteSign,
  301. });
  302. }
  303. }.bind(this),
  304. }).always(
  305. function () {
  306. }.bind(this)
  307. );
  308. },
  309. lookflow() {
  310. this.setState({
  311. loading: true,
  312. lookVisible: true,
  313. })
  314. this.state.lookSource = [];
  315. $.ajax({
  316. method: "get",
  317. dataType: "json",
  318. crossDomain: false,
  319. url: globalConfig.context + '/api/admin/order/getBillByOrderNo',
  320. data: {
  321. orderNo: this.props.datauser.orderNo,
  322. },
  323. success: function (data) {
  324. let theArr = [];
  325. if (!data.data) {
  326. if (data.error && data.error.length) {
  327. message.warning(data.error[0].message);
  328. };
  329. } else {
  330. for (let i = 0; i < data.data.length; i++) {
  331. let thisdata = data.data[i];
  332. theArr.push({
  333. key: i,
  334. billNo: thisdata.billNo,
  335. transactionAmount: thisdata.transactionAmount,
  336. createTime: thisdata.createTime,
  337. payerName: thisdata.payerName,
  338. payeeName: thisdata.payeeName,
  339. transactionSubject: thisdata.transactionSubject,
  340. transactionChannel: thisdata.transactionChannel,
  341. financialPayNo: thisdata.financialPayNo,
  342. financialPayTime: thisdata.financialPayTime,
  343. orderNo: thisdata.orderNo,
  344. departmentName: thisdata.departmentName,
  345. salesmanName: thisdata.salesmanName,
  346. financeName: thisdata.financeName,
  347. confirmSign: thisdata.confirmSign,
  348. deleteSign: thisdata.deleteSign,
  349. confirmTime: thisdata.confirmTime
  350. });
  351. };
  352. };
  353. this.setState({
  354. lookflowList: theArr,
  355. });
  356. }.bind(this),
  357. }).always(function () {
  358. this.setState({
  359. loading: false
  360. });
  361. }.bind(this));
  362. },
  363. lookCancel() {
  364. this.setState({
  365. lookVisible: false
  366. })
  367. },
  368. tableRowClick(record, index) {
  369. this.setState({
  370. editFw: record,
  371. projectOperationVisible: true,
  372. });
  373. },
  374. componentWillMount() {
  375. },
  376. componentWillReceiveProps(nextProps) { //props改变时触发
  377. this.state.visible = nextProps.showDesc;
  378. if (nextProps.userDetaile && nextProps.showDesc) {
  379. this.loaduser(nextProps.datauser);
  380. this.loadData(nextProps.datauser);
  381. this.xiangqings(nextProps.datauser)
  382. }
  383. },
  384. render() {
  385. const FormItem = Form.Item
  386. const formItemLayout = {
  387. labelCol: { span: 8 },
  388. wrapperCol: { span: 14 },
  389. };
  390. const orderDetaiel = this.state.orderList || [];
  391. return (
  392. <div>
  393. <Modal maskClosable={false} visible={this.state.visible}
  394. onOk={this.handleOk} onCancel={this.handleCancel}
  395. width='1200px'
  396. title='订单详情'
  397. footer=''
  398. className="admin-desc-content">
  399. <Form layout="horizontal" id="demand-form" style={{ paddingBottom: '40px' }} >
  400. <Spin spinning={this.state.loading}>
  401. <div className="clearfix">
  402. <div className="clearfix">
  403. <div style={{ position: "absolute", top: '-52px', left: '81px', zIndex: 10000 }}>
  404. <OrderItemStatus deleteSign={this.state.deleteSign} />
  405. </div>
  406. <FormItem className="half-item"
  407. {...formItemLayout}
  408. label="订单编号" >
  409. <span>{orderDetaiel.orderNo}</span>
  410. </FormItem>
  411. <FormItem className="half-item"
  412. {...formItemLayout}
  413. label="下单时间" >
  414. <span>{orderDetaiel.createTime}</span>
  415. </FormItem>
  416. <FormItem className="half-item"
  417. {...formItemLayout}
  418. label="客户名称" >
  419. <span>
  420. {orderDetaiel.buyerName}
  421. <EnterpriseNameChange
  422. type='journal'
  423. style={{ marginLeft: 10 }}
  424. enterpriseId={orderDetaiel.buyerId} />
  425. </span>
  426. </FormItem>
  427. <FormItem className="half-item"
  428. {...formItemLayout}
  429. label="订单类型" >
  430. <span>{getOrderType(orderDetaiel.orderType)}</span>
  431. </FormItem>
  432. <FormItem className="half-item"
  433. {...formItemLayout}
  434. label="订单外联" >
  435. <span>{getOrderChannel(orderDetaiel.orderChannel)}</span>
  436. </FormItem>
  437. <FormItem className="half-item"
  438. {...formItemLayout}
  439. label="订单状态" >
  440. <span>{getOrderState(orderDetaiel.orderStatus)}</span>
  441. </FormItem>
  442. <FormItem className="half-item"
  443. {...formItemLayout}
  444. label="已收款项" >
  445. <span>{orderDetaiel.actuallyTotalAmount + '万元'}</span>
  446. </FormItem>
  447. <FormItem className="half-item"
  448. {...formItemLayout}
  449. label="结算状态" >
  450. <span>{getPaymentState(orderDetaiel.liquidationStatus)}</span>
  451. </FormItem>
  452. <FormItem className="half-item"
  453. {...formItemLayout}
  454. label="市价订单金额" >
  455. <span>{orderDetaiel.orderAmount + '万元'}</span>
  456. </FormItem>
  457. <FormItem className="half-item"
  458. {...formItemLayout}
  459. label="市价首款金额" >
  460. <span>{orderDetaiel.firstPayment + '万元'}</span>
  461. </FormItem>
  462. <div className='clearfix'>
  463. <FormItem className="half-item"
  464. {...formItemLayout}
  465. label="实签订单金额" >
  466. <span>{orderDetaiel.signTotalAmount + '万元'}</span>
  467. </FormItem>
  468. <FormItem className="half-item"
  469. {...formItemLayout}
  470. label="实签首款金额" >
  471. <span>{orderDetaiel.signFirstPayment + '万元'}</span>
  472. </FormItem>
  473. <FormItem className="half-item"
  474. {...formItemLayout}
  475. label="特批立项" >
  476. <span>{getApprovedState(orderDetaiel.approval)}</span>
  477. </FormItem>
  478. <FormItem className="half-item"
  479. {...formItemLayout}
  480. label="合同编号" >
  481. <span>{orderDetaiel.contractNo}</span>
  482. </FormItem>
  483. <div className='clearfix'>
  484. <FormItem
  485. labelCol={{ span: 4 }}
  486. wrapperCol={{ span: 16 }}
  487. label="订单留言" >
  488. <span>{orderDetaiel.orderRemarks}</span>
  489. </FormItem>
  490. </div>
  491. </div>
  492. </div>
  493. <div className='clearfix'>
  494. <FormItem className="half-item"
  495. {...formItemLayout}
  496. label="订单负责人" >
  497. <span>{orderDetaiel.salesmanName}</span>
  498. </FormItem>
  499. <FormItem className="half-item"
  500. {...formItemLayout}
  501. label="业务品类" >
  502. <span>{orderDetaiel.projectType}</span>
  503. </FormItem>
  504. </div>
  505. <div className='clearfix'>
  506. <FormItem className="half-item"
  507. {...formItemLayout}
  508. label="意向时间" >
  509. <span>{orderDetaiel.createTime}</span>
  510. </FormItem>
  511. <FormItem className="half-item"
  512. {...formItemLayout}
  513. label="签单时间" >
  514. <span>{orderDetaiel.signTime}</span>
  515. </FormItem>
  516. <FormItem className="half-item"
  517. {...formItemLayout}
  518. label="财务负责人" >
  519. <span>{orderDetaiel.financeName}</span>
  520. <Button onClick={this.lookflow} style={{ float: 'right' }}>查看流水</Button>
  521. </FormItem>
  522. <FormItem className="half-item"
  523. {...formItemLayout}
  524. label="项目负责人" >
  525. <span>{orderDetaiel.technicianName}</span>
  526. </FormItem>
  527. <FormItem className="half-item"
  528. {...formItemLayout}
  529. label="立项时间" >
  530. <span>{orderDetaiel.setUpTime}</span>
  531. </FormItem>
  532. <FormItem className="half-item"
  533. {...formItemLayout}
  534. label="项目状态" >
  535. <span>{getProjectState(orderDetaiel.projectStage)}</span>
  536. </FormItem>
  537. </div>
  538. <div>
  539. <span style={{ marginLeft: '50px', fontSize: '20px' }}>业务项目</span>
  540. </div>
  541. <div className="patent-table">
  542. <Spin spinning={this.state.loading}>
  543. <Table size="middle" columns={this.state.columns}
  544. dataSource={this.state.dataSource}
  545. pagination={false}
  546. onRowClick={this.tableRowClick}
  547. />
  548. </Spin>
  549. </div>
  550. </div>
  551. </Spin>
  552. </Form >
  553. </Modal>
  554. {this.state.projectOperationVisible ? <ProjectOperation
  555. readOnly={true}
  556. orderNo={this.state.orderNo}
  557. visible={this.state.projectOperationVisible}
  558. dataInfor={this.state.editFw}
  559. onCancel={() => {
  560. this.setState({
  561. projectOperationVisible: false,
  562. editFw: {},
  563. });
  564. }}
  565. /> : null}
  566. <Modal maskClosable={false} visible={this.state.lookVisible}
  567. onOk={this.lookCancel} onCancel={this.lookCancel}
  568. width='1300px'
  569. title='查看流水'
  570. footer=''
  571. className="admin-desc-content">
  572. <Form layout="horizontal" id="demand-form">
  573. <Spin spinning={this.state.loading}>
  574. <div className="clearfix">
  575. <Table size="middle" columns={this.state.flowList}
  576. dataSource={this.state.lookflowList}
  577. pagination={false}
  578. />
  579. </div>
  580. </Spin>
  581. </Form >
  582. </Modal>
  583. </div>
  584. )
  585. }
  586. }));
  587. export default ApproveOrderDetaile;