managementDetaile.jsx 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515
  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 ManagementDetaile = 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. orgCodeUrl:[],
  101. checkedKeys: [],
  102. columns: [
  103. {
  104. title: '业务项目名称',
  105. dataIndex: 'roleName',
  106. key: 'roleName'
  107. }, {
  108. title: '项目类别',
  109. dataIndex: 'creater1',
  110. key: 'creater1'
  111. },{
  112. title: '项目数量',
  113. dataIndex: 'roleName2',
  114. key: 'roleName2'
  115. }, {
  116. title: '服务市价',
  117. dataIndex: 'creater2',
  118. key: 'creater2'
  119. }, {
  120. title: '实签价格',
  121. dataIndex: 'roleName3',
  122. key: 'roleName3'
  123. }, {
  124. title: '下单时间',
  125. dataIndex: 'creater4',
  126. key: 'creater4'
  127. }, {
  128. title: '项目说明',
  129. dataIndex: 'roleName5',
  130. key: 'roleName5'
  131. }
  132. ]
  133. };
  134. },
  135. //查看基本详情基本信息
  136. loaduser(record){
  137. if(record){
  138. $.ajax({
  139. method: "post",
  140. dataType: "json",
  141. crossDomain: false,
  142. url: globalConfig.context + '/api/admin/role/rolePermission',
  143. data: {
  144. id: record.id
  145. },
  146. success: function (data) {
  147. let thisData = data.data;
  148. if (!thisData) {
  149. if (data.error && data.error.length) {
  150. message.warning(data.error[0].message);
  151. };
  152. thisData = {};
  153. };
  154. let idList=[];
  155. thisData.map(function(item){
  156. idList.push(
  157. item.pid
  158. )
  159. })
  160. this.setState({
  161. ids:record.id,
  162. roleName:thisData[0].rname,
  163. checkedKeys:idList,
  164. });
  165. }.bind(this),
  166. }).always(function () {
  167. this.setState({
  168. loading: false
  169. });
  170. }.bind(this));
  171. }
  172. },
  173. handleOk(e) {
  174. this.setState({
  175. visible: false,
  176. });
  177. this.props.closeDesc(false, true);
  178. },
  179. handleCancel(e) {
  180. this.setState({
  181. visible: false,
  182. });
  183. this.props.closeDesc(false);
  184. },
  185. nextCancel() {
  186. this.setState({
  187. addnextVisible: false
  188. })
  189. },
  190. //查看订单明细
  191. orderDetails(record){
  192. if(record){
  193. $.ajax({
  194. method: "post",
  195. dataType: "json",
  196. crossDomain: false,
  197. url: globalConfig.context + '/api/admin/role/rolePermission',
  198. data: {
  199. id: record.id
  200. },
  201. success: function (data) {
  202. let thisData = data.data;
  203. if (!thisData) {
  204. if (data.error && data.error.length) {
  205. message.warning(data.error[0].message);
  206. };
  207. thisData = {};
  208. };
  209. let idList=[];
  210. thisData.map(function(item){
  211. idList.push(
  212. item.pid
  213. )
  214. })
  215. this.setState({
  216. ids:record.id,
  217. });
  218. }.bind(this),
  219. }).always(function () {
  220. this.setState({
  221. loading: false
  222. });
  223. }.bind(this));
  224. }
  225. },
  226. //保存编辑
  227. //新建订单、编辑订单保存
  228. handleSubmit(e) {
  229. e.preventDefault();
  230. // if(this.state.orderType==undefined){
  231. // message.warning('请选择财务负责人');
  232. // return false;
  233. // };
  234. this.props.form.validateFields((err, values) => {
  235. if(!err) {
  236. this.setState({
  237. loading: true
  238. });
  239. $.ajax({
  240. method: "POST",
  241. dataType: "json",
  242. crossDomain: false,
  243. url: globalConfig.context + 'api/baocuncaiwu',
  244. data: {
  245. id:this.props.datauser.id
  246. }
  247. }).done(function(data) {
  248. this.setState({
  249. loading: false
  250. });
  251. if(!data.error.length) {
  252. message.success('保存成功!');
  253. this.handleOk()
  254. } else {
  255. message.warning(data.error[0].message);
  256. }
  257. }.bind(this));
  258. }
  259. });
  260. },
  261. tableRowClick(record, index) {
  262. this.setState({
  263. addnextVisible:true,
  264. });
  265. this.orderDetails(record)
  266. },
  267. componentWillMount() {
  268. },
  269. componentWillReceiveProps(nextProps) { //props改变时触发
  270. this.state.visible = nextProps.showDesc;
  271. if(nextProps.userDetaile && nextProps.showDesc ) {
  272. if(nextProps.datauser && nextProps.datauser.id ) {
  273. this.loaduser(nextProps.datauser);
  274. this.loadData();
  275. }
  276. }
  277. },
  278. render() {
  279. const FormItem = Form.Item
  280. const formItemLayout = {
  281. labelCol: { span: 8 },
  282. wrapperCol: { span: 14 },
  283. };
  284. const orderDetaiel=this.state.orderList || [];
  285. const dataSources=this.state.customerArr || [];
  286. const options = dataSources.map((group,index) =>
  287. <Option key={index} value={group.name}>{group.name}</Option>
  288. )
  289. return(
  290. <div>
  291. <Modal maskClosable={false} visible={this.state.visible}
  292. onOk={this.handleOk} onCancel={this.handleCancel}
  293. width='1000px'
  294. title='编辑订单'
  295. footer=''
  296. className="admin-desc-content">
  297. <Form layout="horizontal" id="demand-form" style={{paddingBottom:'40px'}} onSubmit={this.handleSubmit} >
  298. <Spin spinning={this.state.loading}>
  299. <div className="clearfix">
  300. <div className="clearfix">
  301. <FormItem className="half-item"
  302. {...formItemLayout}
  303. label="订单编号" >
  304. <span>{orderDetaiel.roleName}</span>
  305. </FormItem>
  306. <FormItem className="half-item"
  307. {...formItemLayout}
  308. label="下单时间" >
  309. <span>{orderDetaiel.createTimez}</span>
  310. </FormItem>
  311. <FormItem className="half-item"
  312. {...formItemLayout}
  313. label="客户名称" >
  314. <span>{orderDetaiel.roleName}</span>
  315. </FormItem>
  316. <FormItem className="half-item"
  317. {...formItemLayout}
  318. label="订单类型" >
  319. <span>{orderDetaiel.roleName}</span>
  320. </FormItem>
  321. <FormItem className="half-item"
  322. {...formItemLayout}
  323. label="订单渠道" >
  324. <span>{orderDetaiel.roleName}</span>
  325. </FormItem>
  326. <FormItem className="half-item"
  327. {...formItemLayout}
  328. label="订单状态" >
  329. <span>{orderDetaiel.roleName}</span>
  330. </FormItem>
  331. <FormItem className="half-item"
  332. {...formItemLayout}
  333. label="已收款项" >
  334. <span>{orderDetaiel.roleName}</span>
  335. </FormItem>
  336. <FormItem className="half-item"
  337. {...formItemLayout}
  338. label="结算状态" >
  339. <span>{orderDetaiel.roleName}</span>
  340. </FormItem>
  341. <FormItem className="half-item"
  342. {...formItemLayout}
  343. label="市价订单金额" >
  344. <span>{orderDetaiel.roleName}</span>
  345. </FormItem>
  346. <FormItem className="half-item"
  347. {...formItemLayout}
  348. label="市价首款金额" >
  349. <span>{orderDetaiel.roleName}</span>
  350. </FormItem>
  351. <div className='clearfix'>
  352. <FormItem className="half-item"
  353. {...formItemLayout}
  354. label="实签订单金额" >
  355. <span>{orderDetaiel.roleName}</span>
  356. </FormItem>
  357. <FormItem className="half-item"
  358. {...formItemLayout}
  359. label="实签首款金额" >
  360. <span>{orderDetaiel.roleName}</span>
  361. </FormItem>
  362. <FormItem className="half-item"
  363. {...formItemLayout}
  364. label="特批立项" >
  365. <span>{orderDetaiel.roleName}</span>
  366. </FormItem>
  367. <div className="clearfix">
  368. <FormItem
  369. labelCol={{ span: 4 }}
  370. wrapperCol={{ span: 18 }}
  371. label="合同扫描件" >
  372. <Upload className="demandDetailShow-upload"
  373. listType="customer_sys_file"
  374. fileList={this.state.orgCodeUrl}
  375. onPreview={(file) => {
  376. this.setState({
  377. previewImage: file.url || file.thumbUrl,
  378. previewVisible: true,
  379. });
  380. }} >
  381. </Upload>
  382. <Modal maskClosable={false} footer={null}
  383. visible={this.state.previewVisible}
  384. onCancel={() => { this.setState({ previewVisible: false }) }}>
  385. <img alt="" style={{ width: '100%' }} src={this.state.previewImage || ''} />
  386. </Modal>
  387. </FormItem>
  388. </div>
  389. <div className='clearfix'>
  390. <FormItem
  391. labelCol={{ span: 4 }}
  392. wrapperCol={{ span: 16 }}
  393. label="订单留言" >
  394. <span>{orderDetaiel.roleName}</span>
  395. </FormItem>
  396. </div>
  397. </div>
  398. </div>
  399. <div className='clearfix'>
  400. <FormItem className="half-item"
  401. {...formItemLayout}
  402. label="订单负责人" >
  403. <span>{orderDetaiel.roleName}</span>
  404. </FormItem>
  405. </div>
  406. <div className='clearfix'>
  407. <FormItem className="half-item"
  408. {...formItemLayout}
  409. label="意向时间" >
  410. <span>{orderDetaiel.createTimez}</span>
  411. </FormItem>
  412. <FormItem className="half-item"
  413. {...formItemLayout}
  414. label="签单时间" >
  415. <span>{orderDetaiel.createTimez}</span>
  416. </FormItem>
  417. <FormItem className="half-item"
  418. {...formItemLayout}
  419. label="财务负责人" >
  420. {this.props.editState?
  421. <Select placeholder="请选择财务负责人"
  422. style={{ width: 150 }}
  423. value={this.state.orderStatus}
  424. onChange={(e) => { this.setState({ orderStatus: e }) }}>
  425. {
  426. lvl.map(function (item) {
  427. return <Select.Option key={item.value} >{item.key}</Select.Option>
  428. })
  429. }
  430. </Select>:
  431. <span>{orderDetaiel.createTimez}</span>}
  432. </FormItem>
  433. <FormItem className="half-item"
  434. {...formItemLayout}
  435. label="首付时间" >
  436. <span>{orderDetaiel.createTimez}</span>
  437. </FormItem>
  438. <FormItem className="half-item"
  439. {...formItemLayout}
  440. label="项目负责人" >
  441. <span>{orderDetaiel.roleName}</span>
  442. </FormItem>
  443. <FormItem className="half-item"
  444. {...formItemLayout}
  445. label="立项时间" >
  446. <span>{orderDetaiel.createTimez}</span>
  447. </FormItem>
  448. </div>
  449. <div>
  450. <span style={{marginLeft:'50px',fontSize:'20px'}}>订单明细</span>
  451. </div>
  452. <div className="patent-table">
  453. <Spin spinning={this.state.loading}>
  454. <Table columns={this.state.columns}
  455. dataSource={this.state.dataSource}
  456. pagination={this.state.pagination}
  457. onRowClick={this.tableRowClick}
  458. />
  459. </Spin>
  460. </div>
  461. {this.props.editState?<div className='clearfix' style={{marginTop:'20px'}}>
  462. <Button className="setSave" type="primary" htmlType="submit">保存</Button>
  463. <Button className="cancel" type="ghost" onClick={this.handleCancel}>返回</Button>
  464. </div>:''}
  465. </div>
  466. </Spin>
  467. </Form >
  468. </Modal>
  469. <Modal maskClosable={false} visible={this.state.addnextVisible}
  470. onOk={this.nextCancel} onCancel={this.nextCancel}
  471. width='550px'
  472. title='查看订单明细服务'
  473. footer=''
  474. className="admin-desc-content">
  475. <Form layout="horizontal" id="demand-form">
  476. <Spin spinning={this.state.loading}>
  477. <div className="clearfix">
  478. <FormItem className="half-middle"
  479. {...formItemLayout}
  480. label="服务名称" >
  481. <span>{this.state.aaa}</span>
  482. </FormItem>
  483. <FormItem className="half-middle"
  484. {...formItemLayout}
  485. label="市场价格" >
  486. <span>{this.state.aaa}</span>
  487. </FormItem>
  488. <FormItem className="half-middle"
  489. {...formItemLayout}
  490. label="实签价格" >
  491. <span>{this.state.aaa}</span>
  492. </FormItem>
  493. <FormItem className="half-middle"
  494. {...formItemLayout}
  495. label="服务数量" >
  496. <span>{this.state.aaa}</span>
  497. </FormItem>
  498. <FormItem className="half-middle"
  499. {...formItemLayout}
  500. label="服务说明" >
  501. <span>{this.state.aaa}</span>
  502. </FormItem>
  503. </div>
  504. </Spin>
  505. </Form >
  506. </Modal>
  507. </div>
  508. )
  509. }
  510. }));
  511. export default ManagementDetaile;