publicOrderDetaile.jsx 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523
  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 {lvl} from '../../../dataDic.js';
  7. //图片组件
  8. const PicturesWall = React.createClass({
  9. getInitialState() {
  10. return {
  11. previewVisible: false,
  12. previewImage: '',
  13. fileList: [],
  14. }
  15. },
  16. handleCancel() {
  17. this.setState({ previewVisible: false })
  18. },
  19. handlePreview(file) {
  20. this.setState({
  21. previewImage: file.url || file.thumbUrl,
  22. previewVisible: true,
  23. });
  24. },
  25. handleChange(info) {
  26. let fileList = info.fileList;
  27. this.setState({ fileList });
  28. this.props.fileList(fileList);
  29. },
  30. componentWillReceiveProps(nextProps) {
  31. this.state.fileList = nextProps.pictureUrl;
  32. },
  33. render() {
  34. const { previewVisible, previewImage, fileList } = this.state;
  35. const uploadButton = (
  36. <div>
  37. <Icon type="plus" />
  38. <div className="ant-upload-text">点击上传</div>
  39. </div>
  40. );
  41. return (
  42. <div style={{display:"inline-block"}}>
  43. <Upload
  44. action={globalConfig.context + "/api/admin/superviser/uploadAdminImg"}
  45. data={{ 'sign': this.props.pictureSign }}
  46. listType="picture-card"
  47. fileList={fileList}
  48. onPreview={this.handlePreview}
  49. onChange={this.handleChange} >
  50. {fileList.length >= 4 ? null : uploadButton}
  51. </Upload>
  52. <Modal maskClosable={false} visible={previewVisible} footer={null} onCancel={this.handleCancel}>
  53. <img alt="example" style={{ width: '100%' }} src={previewImage} />
  54. </Modal>
  55. </div>
  56. );
  57. }
  58. });
  59. const ApproveDetaile = Form.create()(React.createClass({
  60. loadData() {
  61. this.setState({
  62. loading: true
  63. });
  64. $.ajax({
  65. method: "post",
  66. dataType: "json",
  67. crossDomain: false,
  68. url: globalConfig.context + '/api/admin/roles',
  69. data: {
  70. },
  71. success: function (data) {
  72. let theArr = [];
  73. if (!data.data) {
  74. if (data.error && data.error.length) {
  75. message.warning(data.error[0].message);
  76. };
  77. } else {
  78. for (let i = 0; i < data.data.list.length; i++) {
  79. let thisdata = data.data.list[i];
  80. theArr.push({
  81. key: i,
  82. });
  83. };
  84. }
  85. this.setState({
  86. dataSource: theArr,
  87. pagination: false,
  88. });
  89. }.bind(this),
  90. }).always(function () {
  91. this.setState({
  92. loading: false
  93. });
  94. }.bind(this));
  95. },
  96. getInitialState() {
  97. return {
  98. loading: false,
  99. visible: false,
  100. contractState:false,
  101. orgCodeUrl:[],
  102. checkedKeys: [],
  103. columns: [
  104. {
  105. title: '业务项目名称',
  106. dataIndex: 'roleName',
  107. key: 'roleName'
  108. }, {
  109. title: '项目类别',
  110. dataIndex: 'creater1',
  111. key: 'creater1'
  112. },{
  113. title: '项目数量',
  114. dataIndex: 'roleName2',
  115. key: 'roleName2'
  116. }, {
  117. title: '服务市价',
  118. dataIndex: 'creater2',
  119. key: 'creater2'
  120. }, {
  121. title: '实签价格',
  122. dataIndex: 'roleName3',
  123. key: 'roleName3'
  124. }, {
  125. title: '下单时间',
  126. dataIndex: 'creater4',
  127. key: 'creater4'
  128. }, {
  129. title: '项目说明',
  130. dataIndex: 'roleName5',
  131. key: 'roleName5'
  132. }
  133. ]
  134. };
  135. },
  136. //主管初始加载(自动补全)
  137. supervisor(e){
  138. $.ajax({
  139. method: "post",
  140. dataType: "json",
  141. crossDomain: false,
  142. url: globalConfig.context + "/api/admin/selectName",
  143. data:{
  144. name:e
  145. },
  146. success: function (data) {
  147. let thedata=data.data;
  148. if (!thedata) {
  149. if (data.error && data.error.length) {
  150. message.warning(data.error[0].message);
  151. };
  152. thedata = {};
  153. };
  154. this.setState({
  155. customerArr:thedata,
  156. });
  157. }.bind(this),
  158. }).always(function () {
  159. this.setState({
  160. loading: false
  161. });
  162. }.bind(this));
  163. },
  164. //上级主管输入框失去焦点是判断客户是否存在
  165. selectAuto(value,options){
  166. this.setState({
  167. auto:value
  168. })
  169. },
  170. blurChange(e){
  171. let theType;
  172. let contactLists=this.state.customerArr||[];
  173. if (e) {
  174. contactLists.map(function (item) {
  175. if (item.name == e.toString()) {
  176. theType=item.id
  177. }
  178. });
  179. }
  180. this.setState({
  181. theTypes:theType
  182. })
  183. },
  184. //值改变时请求客户名称
  185. httpChange(e){
  186. if(e.length>=1){
  187. this.supervisor(e);
  188. }
  189. this.setState({
  190. auto:e
  191. })
  192. },
  193. //查看基本详情基本信息
  194. loaduser(record){
  195. if(record){
  196. $.ajax({
  197. method: "post",
  198. dataType: "json",
  199. crossDomain: false,
  200. url: globalConfig.context + '/api/admin/role/rolePermission',
  201. data: {
  202. id: record.id
  203. },
  204. success: function (data) {
  205. let thisData = data.data;
  206. if (!thisData) {
  207. if (data.error && data.error.length) {
  208. message.warning(data.error[0].message);
  209. };
  210. thisData = {};
  211. };
  212. let idList=[];
  213. thisData.map(function(item){
  214. idList.push(
  215. item.pid
  216. )
  217. })
  218. this.setState({
  219. ids:record.id,
  220. roleName:thisData[0].rname,
  221. checkedKeys:idList,
  222. });
  223. }.bind(this),
  224. }).always(function () {
  225. this.setState({
  226. loading: false
  227. });
  228. }.bind(this));
  229. }
  230. },
  231. handleOk(e) {
  232. this.setState({
  233. visible: false,
  234. });
  235. this.props.closeDesc(false, true);
  236. },
  237. handleCancel(e) {
  238. this.setState({
  239. visible: false,
  240. });
  241. this.props.closeDesc(false);
  242. },
  243. nextCancel() {
  244. this.setState({
  245. addnextVisible: false
  246. })
  247. },
  248. //查看订单明细
  249. orderDetails(record){
  250. if(record){
  251. $.ajax({
  252. method: "post",
  253. dataType: "json",
  254. crossDomain: false,
  255. url: globalConfig.context + '/api/admin/role/rolePermission',
  256. data: {
  257. id: record.id
  258. },
  259. success: function (data) {
  260. let thisData = data.data;
  261. if (!thisData) {
  262. if (data.error && data.error.length) {
  263. message.warning(data.error[0].message);
  264. };
  265. thisData = {};
  266. };
  267. let idList=[];
  268. thisData.map(function(item){
  269. idList.push(
  270. item.pid
  271. )
  272. })
  273. this.setState({
  274. ids:record.id,
  275. });
  276. }.bind(this),
  277. }).always(function () {
  278. this.setState({
  279. loading: false
  280. });
  281. }.bind(this));
  282. }
  283. },
  284. tableRowClick(record, index) {
  285. this.setState({
  286. addnextVisible:true,
  287. });
  288. this.orderDetails(record)
  289. },
  290. componentWillMount() {
  291. },
  292. componentWillReceiveProps(nextProps) { //props改变时触发
  293. this.state.visible = nextProps.showDesc;
  294. if(nextProps.userDetaile && nextProps.showDesc ) {
  295. if(nextProps.datauser && nextProps.datauser.id ) {
  296. this.loaduser(nextProps.datauser);
  297. this.loadData();
  298. }
  299. }
  300. },
  301. render() {
  302. const FormItem = Form.Item
  303. const formItemLayout = {
  304. labelCol: { span: 8 },
  305. wrapperCol: { span: 14 },
  306. };
  307. const orderDetaiel=this.state.orderList || [];
  308. const dataSources=this.state.customerArr || [];
  309. const options = dataSources.map((group,index) =>
  310. <Option key={index} value={group.name}>{group.name}</Option>
  311. )
  312. return(
  313. <div>
  314. <Modal maskClosable={false} visible={this.state.visible}
  315. onOk={this.handleOk} onCancel={this.handleCancel}
  316. width='1000px'
  317. title='编辑订单'
  318. footer=''
  319. className="admin-desc-content">
  320. <Form layout="horizontal" id="demand-form" style={{paddingBottom:'40px'}} >
  321. <Spin spinning={this.state.loading}>
  322. <div className="clearfix">
  323. <div className="clearfix">
  324. <FormItem className="half-item"
  325. {...formItemLayout}
  326. label="订单编号" >
  327. <span>{orderDetaiel.roleName}</span>
  328. </FormItem>
  329. <FormItem className="half-item"
  330. {...formItemLayout}
  331. label="下单时间" >
  332. <span>{orderDetaiel.createTimez}</span>
  333. </FormItem>
  334. <FormItem className="half-item"
  335. {...formItemLayout}
  336. label="客户名称" >
  337. <span>{orderDetaiel.roleName}</span>
  338. </FormItem>
  339. <FormItem className="half-item"
  340. {...formItemLayout}
  341. label="订单类型" >
  342. <span>{orderDetaiel.roleName}</span>
  343. </FormItem>
  344. <FormItem className="half-item"
  345. {...formItemLayout}
  346. label="订单渠道" >
  347. <span>{orderDetaiel.roleName}</span>
  348. </FormItem>
  349. <FormItem className="half-item"
  350. {...formItemLayout}
  351. label="订单状态" >
  352. <span>{orderDetaiel.roleName}</span>
  353. </FormItem>
  354. <FormItem className="half-item"
  355. {...formItemLayout}
  356. label="已收款项" >
  357. <span>{orderDetaiel.roleName}</span>
  358. </FormItem>
  359. <FormItem className="half-item"
  360. {...formItemLayout}
  361. label="结算状态" >
  362. <span>{orderDetaiel.roleName}</span>
  363. </FormItem>
  364. <FormItem className="half-item"
  365. {...formItemLayout}
  366. label="市价订单金额" >
  367. <span>{orderDetaiel.roleName}</span>
  368. </FormItem>
  369. <FormItem className="half-item"
  370. {...formItemLayout}
  371. label="市价首款金额" >
  372. <span>{orderDetaiel.roleName}</span>
  373. </FormItem>
  374. <div className='clearfix'>
  375. <FormItem className="half-item"
  376. {...formItemLayout}
  377. label="实签订单金额" >
  378. <span>{orderDetaiel.roleName}</span>
  379. </FormItem>
  380. <FormItem className="half-item"
  381. {...formItemLayout}
  382. label="实签首款金额" >
  383. <span>{orderDetaiel.roleName}</span>
  384. </FormItem>
  385. <FormItem className="half-item"
  386. {...formItemLayout}
  387. label="特批立项" >
  388. <span>{orderDetaiel.roleName}</span>
  389. </FormItem>
  390. <div className="clearfix">
  391. <FormItem
  392. labelCol={{ span: 4 }}
  393. wrapperCol={{ span: 18 }}
  394. label="合同扫描件" >
  395. <Upload className="demandDetailShow-upload"
  396. listType="customer_sys_file"
  397. fileList={this.state.orgCodeUrl}
  398. onPreview={(file) => {
  399. this.setState({
  400. previewImage: file.url || file.thumbUrl,
  401. previewVisible: true,
  402. });
  403. }} >
  404. </Upload>
  405. <Modal maskClosable={false} footer={null}
  406. visible={this.state.previewVisible}
  407. onCancel={() => { this.setState({ previewVisible: false }) }}>
  408. <img alt="" style={{ width: '100%' }} src={this.state.previewImage || ''} />
  409. </Modal>
  410. </FormItem>
  411. </div>
  412. <div className='clearfix'>
  413. <FormItem
  414. labelCol={{ span: 4 }}
  415. wrapperCol={{ span: 16 }}
  416. label="订单留言" >
  417. <span>{orderDetaiel.roleName}</span>
  418. </FormItem>
  419. </div>
  420. </div>
  421. </div>
  422. <div className='clearfix'>
  423. <FormItem className="half-item"
  424. {...formItemLayout}
  425. label="订单负责人" >
  426. <span>{orderDetaiel.roleName}</span>
  427. </FormItem>
  428. </div>
  429. <div className='clearfix'>
  430. <FormItem className="half-item"
  431. {...formItemLayout}
  432. label="意向时间" >
  433. <span>{orderDetaiel.createTimez}</span>
  434. </FormItem>
  435. <FormItem className="half-item"
  436. {...formItemLayout}
  437. label="签单时间" >
  438. <span>{orderDetaiel.createTimez}</span>
  439. </FormItem>
  440. <FormItem className="half-item"
  441. {...formItemLayout}
  442. label="财务负责人" >
  443. <span>{orderDetaiel.createTimez}</span>
  444. </FormItem>
  445. <FormItem className="half-item"
  446. {...formItemLayout}
  447. label="首付时间" >
  448. <span>{orderDetaiel.createTimez}</span>
  449. </FormItem>
  450. <FormItem className="half-item"
  451. {...formItemLayout}
  452. label="项目负责人" >
  453. <span>{orderDetaiel.roleName}</span>
  454. </FormItem>
  455. <FormItem className="half-item"
  456. {...formItemLayout}
  457. label="立项时间" >
  458. <span>{orderDetaiel.createTimez}</span>
  459. </FormItem>
  460. </div>
  461. <div>
  462. <span style={{marginLeft:'50px',fontSize:'20px'}}>订单明细</span>
  463. </div>
  464. <div className="patent-table">
  465. <Spin spinning={this.state.loading}>
  466. <Table columns={this.state.columns}
  467. dataSource={this.state.dataSource}
  468. pagination={this.state.pagination}
  469. onRowClick={this.tableRowClick}
  470. />
  471. </Spin>
  472. </div>
  473. </div>
  474. </Spin>
  475. </Form >
  476. </Modal>
  477. <Modal maskClosable={false} visible={this.state.addnextVisible}
  478. onOk={this.nextCancel} onCancel={this.nextCancel}
  479. width='550px'
  480. title='查看订单明细服务'
  481. footer=''
  482. className="admin-desc-content">
  483. <Form layout="horizontal" id="demand-form">
  484. <Spin spinning={this.state.loading}>
  485. <div className="clearfix">
  486. <FormItem className="half-middle"
  487. {...formItemLayout}
  488. label="服务名称" >
  489. <span>{this.state.aaa}</span>
  490. </FormItem>
  491. <FormItem className="half-middle"
  492. {...formItemLayout}
  493. label="市场价格" >
  494. <span>{this.state.aaa}</span>
  495. </FormItem>
  496. <FormItem className="half-middle"
  497. {...formItemLayout}
  498. label="实签价格" >
  499. <span>{this.state.aaa}</span>
  500. </FormItem>
  501. <FormItem className="half-middle"
  502. {...formItemLayout}
  503. label="服务数量" >
  504. <span>{this.state.aaa}</span>
  505. </FormItem>
  506. <FormItem className="half-middle"
  507. {...formItemLayout}
  508. label="服务说明" >
  509. <span>{this.state.aaa}</span>
  510. </FormItem>
  511. </div>
  512. </Spin>
  513. </Form >
  514. </Modal>
  515. </div>
  516. )
  517. }
  518. }));
  519. export default ApproveDetaile;