mySettlementDetaile.jsx 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462
  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 MySettlementDetaile = 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. loaduser(record){
  138. if(record){
  139. $.ajax({
  140. method: "post",
  141. dataType: "json",
  142. crossDomain: false,
  143. url: globalConfig.context + '/api/admin/role/rolePermission',
  144. data: {
  145. id: record.id
  146. },
  147. success: function (data) {
  148. let thisData = data.data;
  149. if (!thisData) {
  150. if (data.error && data.error.length) {
  151. message.warning(data.error[0].message);
  152. };
  153. thisData = {};
  154. };
  155. let idList=[];
  156. thisData.map(function(item){
  157. idList.push(
  158. item.pid
  159. )
  160. })
  161. this.setState({
  162. ids:record.id,
  163. roleName:thisData[0].rname,
  164. checkedKeys:idList,
  165. });
  166. }.bind(this),
  167. }).always(function () {
  168. this.setState({
  169. loading: false
  170. });
  171. }.bind(this));
  172. }
  173. },
  174. handleOk(e) {
  175. this.setState({
  176. visible: false,
  177. });
  178. this.props.closeDesc(false, true);
  179. },
  180. handleCancel(e) {
  181. this.setState({
  182. visible: false,
  183. });
  184. this.props.closeDesc(false);
  185. },
  186. componentWillMount() {
  187. },
  188. nextCancel() {
  189. this.setState({
  190. addnextVisible: false
  191. })
  192. },
  193. //查看订单明细
  194. orderDetails(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. });
  221. }.bind(this),
  222. }).always(function () {
  223. this.setState({
  224. loading: false
  225. });
  226. }.bind(this));
  227. }
  228. },
  229. tableRowClick(record, index) {
  230. this.setState({
  231. addnextVisible:true,
  232. });
  233. this.orderDetails(record)
  234. },
  235. componentWillReceiveProps(nextProps) { //props改变时触发
  236. this.state.visible = nextProps.showDesc;
  237. if(nextProps.userDetaile && nextProps.showDesc ) {
  238. if(nextProps.datauser && nextProps.datauser.id ) {
  239. this.loaduser(nextProps.datauser);
  240. this.loadData();
  241. }
  242. }
  243. },
  244. render() {
  245. const FormItem = Form.Item
  246. const formItemLayout = {
  247. labelCol: { span: 8 },
  248. wrapperCol: { span: 14 },
  249. };
  250. const orderDetaiel=this.state.orderList || [];
  251. return(
  252. <div>
  253. <Modal maskClosable={false} visible={this.state.visible}
  254. onOk={this.handleOk} onCancel={this.handleCancel}
  255. width='1000px'
  256. title='编辑订单'
  257. footer=''
  258. className="admin-desc-content">
  259. <Form layout="horizontal" id="demand-form" style={{paddingBottom:'40px'}} >
  260. <Spin spinning={this.state.loading}>
  261. <div className="clearfix">
  262. <div className="clearfix">
  263. <FormItem className="half-item"
  264. {...formItemLayout}
  265. label="订单编号" >
  266. <span>{orderDetaiel.roleName}</span>
  267. </FormItem>
  268. <FormItem className="half-item"
  269. {...formItemLayout}
  270. label="下单时间" >
  271. <span>{orderDetaiel.createTimez}</span>
  272. </FormItem>
  273. <FormItem className="half-item"
  274. {...formItemLayout}
  275. label="客户名称" >
  276. <span>{orderDetaiel.roleName}</span>
  277. </FormItem>
  278. <FormItem className="half-item"
  279. {...formItemLayout}
  280. label="订单类型" >
  281. <span>{orderDetaiel.roleName}</span>
  282. </FormItem>
  283. <FormItem className="half-item"
  284. {...formItemLayout}
  285. label="订单渠道" >
  286. <span>{orderDetaiel.roleName}</span>
  287. </FormItem>
  288. <FormItem className="half-item"
  289. {...formItemLayout}
  290. label="订单状态" >
  291. <span>{orderDetaiel.roleName}</span>
  292. </FormItem>
  293. <FormItem className="half-item"
  294. {...formItemLayout}
  295. label="已收款项" >
  296. <span>{orderDetaiel.roleName}</span>
  297. </FormItem>
  298. <FormItem className="half-item"
  299. {...formItemLayout}
  300. label="结算状态" >
  301. <span>{orderDetaiel.roleName}</span>
  302. </FormItem>
  303. <FormItem className="half-item"
  304. {...formItemLayout}
  305. label="市价订单金额" >
  306. <span>{orderDetaiel.roleName}</span>
  307. </FormItem>
  308. <FormItem className="half-item"
  309. {...formItemLayout}
  310. label="市价首款金额" >
  311. <span>{orderDetaiel.roleName}</span>
  312. </FormItem>
  313. <div className='clearfix'>
  314. <FormItem className="half-item"
  315. {...formItemLayout}
  316. label="实签订单金额" >
  317. <span>{orderDetaiel.roleName}</span>
  318. </FormItem>
  319. <FormItem className="half-item"
  320. {...formItemLayout}
  321. label="实签首款金额" >
  322. <span>{orderDetaiel.roleName}</span>
  323. </FormItem>
  324. <FormItem className="half-item"
  325. {...formItemLayout}
  326. label="特批立项" >
  327. <span>{orderDetaiel.roleName}</span>
  328. </FormItem>
  329. <div className="clearfix">
  330. <FormItem
  331. labelCol={{ span: 4 }}
  332. wrapperCol={{ span: 18 }}
  333. label="合同扫描件" >
  334. <Upload className="demandDetailShow-upload"
  335. listType="customer_sys_file"
  336. fileList={this.state.orgCodeUrl}
  337. onPreview={(file) => {
  338. this.setState({
  339. previewImage: file.url || file.thumbUrl,
  340. previewVisible: true,
  341. });
  342. }} >
  343. </Upload>
  344. <Modal maskClosable={false} footer={null}
  345. visible={this.state.previewVisible}
  346. onCancel={() => { this.setState({ previewVisible: false }) }}>
  347. <img alt="" style={{ width: '100%' }} src={this.state.previewImage || ''} />
  348. </Modal>
  349. </FormItem>
  350. </div>
  351. <div className='clearfix'>
  352. <FormItem
  353. labelCol={{ span: 4 }}
  354. wrapperCol={{ span: 16 }}
  355. label="订单留言" >
  356. <span>{orderDetaiel.roleName}</span>
  357. </FormItem>
  358. </div>
  359. </div>
  360. </div>
  361. <div className='clearfix'>
  362. <FormItem className="half-item"
  363. {...formItemLayout}
  364. label="订单负责人" >
  365. <span>{orderDetaiel.roleName}</span>
  366. </FormItem>
  367. </div>
  368. <div className='clearfix'>
  369. <FormItem className="half-item"
  370. {...formItemLayout}
  371. label="意向时间" >
  372. <span>{orderDetaiel.createTimez}</span>
  373. </FormItem>
  374. <FormItem className="half-item"
  375. {...formItemLayout}
  376. label="签单时间" >
  377. <span>{orderDetaiel.createTimez}</span>
  378. </FormItem>
  379. <FormItem className="half-item"
  380. {...formItemLayout}
  381. label="财务负责人" >
  382. <span>{orderDetaiel.createTimez}</span>
  383. </FormItem>
  384. <FormItem className="half-item"
  385. {...formItemLayout}
  386. label="首付时间" >
  387. <span>{orderDetaiel.createTimez}</span>
  388. </FormItem>
  389. <FormItem className="half-item"
  390. {...formItemLayout}
  391. label="项目负责人" >
  392. <span>{orderDetaiel.roleName}</span>
  393. </FormItem>
  394. <FormItem className="half-item"
  395. {...formItemLayout}
  396. label="立项时间" >
  397. <span>{orderDetaiel.createTimez}</span>
  398. </FormItem>
  399. </div>
  400. <div>
  401. <span style={{marginLeft:'50px',fontSize:'20px'}}>订单明细</span>
  402. </div>
  403. <div className="patent-table">
  404. <Spin spinning={this.state.loading}>
  405. <Table columns={this.state.columns}
  406. dataSource={this.state.dataSource}
  407. pagination={this.state.pagination}
  408. onRowClick={this.tableRowClick}
  409. />
  410. </Spin>
  411. </div>
  412. </div>
  413. </Spin>
  414. </Form >
  415. </Modal>
  416. <Modal maskClosable={false} visible={this.state.addnextVisible}
  417. onOk={this.nextCancel} onCancel={this.nextCancel}
  418. width='550px'
  419. title='查看订单明细服务'
  420. footer=''
  421. className="admin-desc-content">
  422. <Form layout="horizontal" id="demand-form">
  423. <Spin spinning={this.state.loading}>
  424. <div className="clearfix">
  425. <FormItem className="half-middle"
  426. {...formItemLayout}
  427. label="服务名称" >
  428. <span>{this.state.aaa}</span>
  429. </FormItem>
  430. <FormItem className="half-middle"
  431. {...formItemLayout}
  432. label="市场价格" >
  433. <span>{this.state.aaa}</span>
  434. </FormItem>
  435. <FormItem className="half-middle"
  436. {...formItemLayout}
  437. label="实签价格" >
  438. <span>{this.state.aaa}</span>
  439. </FormItem>
  440. <FormItem className="half-middle"
  441. {...formItemLayout}
  442. label="服务数量" >
  443. <span>{this.state.aaa}</span>
  444. </FormItem>
  445. <FormItem className="half-middle"
  446. {...formItemLayout}
  447. label="服务说明" >
  448. <span>{this.state.aaa}</span>
  449. </FormItem>
  450. </div>
  451. </Spin>
  452. </Form >
  453. </Modal>
  454. </div>
  455. )
  456. }
  457. }));
  458. export default MySettlementDetaile;