projectManageDetaile.jsx 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553
  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. const MySettlementDetaile = Form.create()(React.createClass({
  8. loadData() {
  9. this.setState({
  10. loading: true
  11. });
  12. $.ajax({
  13. method: "post",
  14. dataType: "json",
  15. crossDomain: false,
  16. url: globalConfig.context + '/api/admin/roles',
  17. data: {
  18. },
  19. success: function (data) {
  20. let theArr =[];
  21. if (!data.data) {
  22. if (data.error && data.error.length) {
  23. message.warning(data.error[0].message);
  24. };
  25. } else {
  26. for (let i = 0; i < data.data.list.length; i++) {
  27. let thisdata = data.data.list;
  28. theArr.push({
  29. key:i,
  30. roleName5:thisdata[i].id
  31. });
  32. };
  33. }
  34. this.setState({
  35. dataSource: theArr,
  36. pagination: false,
  37. });
  38. }.bind(this),
  39. }).always(function () {
  40. this.setState({
  41. loading: false
  42. });
  43. }.bind(this));
  44. },
  45. getInitialState() {
  46. return {
  47. loading: false,
  48. visible: false,
  49. contractState:false,
  50. projectVisible:false,
  51. orgCodeUrl:[],
  52. checkedKeys: [],
  53. columns: [
  54. {
  55. title: '业务项目名称',
  56. dataIndex: 'roleName',
  57. key: 'roleName'
  58. }, {
  59. title: '项目类别',
  60. dataIndex: 'creater1',
  61. key: 'creater1'
  62. },{
  63. title: '项目数量',
  64. dataIndex: 'roleName2',
  65. key: 'roleName2'
  66. }, {
  67. title: '下单时间',
  68. dataIndex: 'creater4',
  69. key: 'creater4'
  70. }, {
  71. title: '项目说明',
  72. dataIndex: 'roleName5',
  73. key: 'roleName5',
  74. render:(text) => {
  75. return(
  76. text?text.substr(0,6)+'...':''
  77. )
  78. }
  79. }
  80. ]
  81. };
  82. },
  83. //查看基本详情基本信息
  84. loaduser(record){
  85. if(record){
  86. $.ajax({
  87. method: "post",
  88. dataType: "json",
  89. crossDomain: false,
  90. url: globalConfig.context + '/api/admin/role/rolePermission',
  91. data: {
  92. id: record.id
  93. },
  94. success: function (data) {
  95. let thisData = data.data;
  96. if (!thisData) {
  97. if (data.error && data.error.length) {
  98. message.warning(data.error[0].message);
  99. };
  100. thisData = {};
  101. };
  102. this.setState({
  103. ids:record.id,
  104. roleName:thisData[0].rname,
  105. });
  106. }.bind(this),
  107. }).always(function () {
  108. this.setState({
  109. loading: false
  110. });
  111. }.bind(this));
  112. }
  113. },
  114. //订单编辑保存
  115. handleOk(e) {
  116. this.setState({
  117. visible: false,
  118. });
  119. this.props.closeDesc(false, true);
  120. },
  121. handleCancel(e) {
  122. this.setState({
  123. visible: false,
  124. });
  125. this.props.closeDesc(false);
  126. },
  127. //新建项目
  128. projectOk(e) {
  129. this.setState({
  130. projectVisible: false,
  131. });
  132. this.props.closeDesc(false, true);
  133. },
  134. projectCancel(e) {
  135. this.setState({
  136. projectVisible: false,
  137. });
  138. this.props.closeDesc(false);
  139. },
  140. componentWillMount() {
  141. },
  142. nextCancel() {
  143. this.setState({
  144. addnextVisible: false
  145. })
  146. },
  147. //查看订单明细
  148. orderDetails(record){
  149. if(record){
  150. $.ajax({
  151. method: "post",
  152. dataType: "json",
  153. crossDomain: false,
  154. url: globalConfig.context + '/api/admin/role/rolePermission',
  155. data: {
  156. id: record.id
  157. },
  158. success: function (data) {
  159. let thisData = data.data;
  160. if (!thisData) {
  161. if (data.error && data.error.length) {
  162. message.warning(data.error[0].message);
  163. };
  164. thisData = {};
  165. };
  166. let idList=[];
  167. thisData.map(function(item){
  168. idList.push(
  169. item.pid
  170. )
  171. })
  172. this.setState({
  173. ids:record.id,
  174. });
  175. }.bind(this),
  176. }).always(function () {
  177. this.setState({
  178. loading: false
  179. });
  180. }.bind(this));
  181. }
  182. },
  183. //创建项目保存
  184. admissibleOrder(){
  185. if(this.state.Names==''||this.state.Names==null){
  186. message.warning('请输入客户名称');
  187. this.refs.Names.focus()
  188. return false;
  189. };
  190. if(this.state.projectType==undefined){
  191. message.warning('请选择项目类型');
  192. return false;
  193. };
  194. if(this.state.pName==''||this.state.pName==null){
  195. message.warning('请输入项目负责人');
  196. this.refs.pName.focus()
  197. return false;
  198. };
  199. this.setState({
  200. loading: true
  201. });
  202. $.ajax({
  203. method: "POST",
  204. dataType: "json",
  205. crossDomain: false,
  206. url: globalConfig.context + '/api/xinjianbaocun',
  207. data: {
  208. }
  209. }).done(function(data) {
  210. this.setState({
  211. loading: false
  212. });
  213. if(!data.error.length) {
  214. message.success('保存成功!');
  215. this.projectOk()
  216. } else {
  217. message.warning(data.error[0].message);
  218. }
  219. }.bind(this));
  220. },
  221. //编辑订单保存
  222. handleSubmit(e) {
  223. e.preventDefault();
  224. this.props.form.validateFields((err, values) => {
  225. if(!err) {
  226. this.setState({
  227. loading: true
  228. });
  229. $.ajax({
  230. method: "POST",
  231. dataType: "json",
  232. crossDomain: false,
  233. url: globalConfig.context + '/api/000',
  234. data: {
  235. id:this.props.datauser.id
  236. }
  237. }).done(function(data) {
  238. this.setState({
  239. loading: false
  240. });
  241. if(!data.error.length) {
  242. message.success('保存成功!');
  243. this.handleOk()
  244. } else {
  245. message.warning(data.error[0].message);
  246. }
  247. }.bind(this));
  248. }
  249. });
  250. },
  251. tableRowClick(record, index) {
  252. this.setState({
  253. addnextVisible:true,
  254. });
  255. this.orderDetails(record)
  256. },
  257. componentWillReceiveProps(nextProps) { //props改变时触发
  258. this.state.projectVisible = nextProps.newProject;
  259. this.state.visible = nextProps.showDesc;
  260. if(nextProps.userDetaile && nextProps.showDesc ) {
  261. if(nextProps.datauser && nextProps.datauser.id ) {
  262. this.loaduser(nextProps.datauser);
  263. this.loadData();
  264. }
  265. }
  266. },
  267. render() {
  268. const FormItem = Form.Item
  269. const formItemLayout = {
  270. labelCol: { span: 8 },
  271. wrapperCol: { span: 14 },
  272. };
  273. const orderDetaiel=this.state.orderList || [];
  274. return(
  275. <div>
  276. <Modal maskClosable={false} visible={this.state.visible}
  277. onOk={this.handleOk} onCancel={this.handleCancel}
  278. width='1000px'
  279. title='编辑订单'
  280. footer=''
  281. className="admin-desc-content">
  282. <Form layout="horizontal" id="demand-form" style={{paddingBottom:'40px'}} onSubmit={this.handleSubmit}>
  283. <Spin spinning={this.state.loading}>
  284. <div className="clearfix">
  285. <div className="clearfix">
  286. <FormItem className="half-item"
  287. {...formItemLayout}
  288. label="订单编号" >
  289. <span>{orderDetaiel.roleName}</span>
  290. </FormItem>
  291. <FormItem className="half-item"
  292. {...formItemLayout}
  293. label="下单时间" >
  294. <span>{orderDetaiel.createTimez}</span>
  295. </FormItem>
  296. <FormItem className="half-item"
  297. {...formItemLayout}
  298. label="客户名称" >
  299. <span>{orderDetaiel.roleName}</span>
  300. </FormItem>
  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.roleName}</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. <div className='clearfix'>
  327. <FormItem className="half-item"
  328. {...formItemLayout}
  329. label="特批立项" >
  330. <Select placeholder="选择特批立项类型"
  331. style={{ width:'240px'}}
  332. value={this.state.orderType}
  333. onChange={(e) => { this.setState({ orderType: e }) }}>
  334. <Select.Option value='0'>不特批</Select.Option>
  335. <Select.Option value='1'>申请特批</Select.Option>
  336. <Select.Option value='2'>特批通过</Select.Option>
  337. <Select.Option value='3'>特批驳回</Select.Option>
  338. </Select>
  339. <span className="mandatory">*</span>
  340. </FormItem>
  341. </div>
  342. <div className='clearfix'>
  343. <FormItem
  344. labelCol={{ span: 4 }}
  345. wrapperCol={{ span: 16 }}
  346. label="订单留言" >
  347. <Input type="textarea" placeholder="请输入订单留言" rows={4} value={this.state.introduction}
  348. onChange={(e)=>{this.setState({introduction:e.target.value})}}/>
  349. </FormItem>
  350. </div>
  351. </div>
  352. <div className='clearfix'>
  353. <FormItem className="half-item"
  354. {...formItemLayout}
  355. label="订单负责人" >
  356. <span>{orderDetaiel.roleName}</span>
  357. </FormItem>
  358. </div>
  359. <div className='clearfix'>
  360. <FormItem className="half-item"
  361. {...formItemLayout}
  362. label="意向时间" >
  363. <span>{orderDetaiel.createTimez}</span>
  364. </FormItem>
  365. <FormItem className="half-item"
  366. {...formItemLayout}
  367. label="签单时间" >
  368. <span>{orderDetaiel.createTimez}</span>
  369. </FormItem>
  370. <FormItem className="half-item"
  371. {...formItemLayout}
  372. label="财务负责人" >
  373. <span>{orderDetaiel.createTimez}</span>
  374. </FormItem>
  375. <FormItem className="half-item"
  376. {...formItemLayout}
  377. label="首付时间" >
  378. <span>{orderDetaiel.createTimez}</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.createTimez}</span>
  389. </FormItem>
  390. </div>
  391. <div>
  392. <span style={{marginLeft:'50px',fontSize:'20px'}}>订单明细</span>
  393. </div>
  394. <div className="patent-table">
  395. <Spin spinning={this.state.loading}>
  396. <Table columns={this.state.columns}
  397. dataSource={this.state.dataSource}
  398. pagination={this.state.pagination}
  399. onRowClick={this.tableRowClick}
  400. />
  401. </Spin>
  402. </div>
  403. <div style={{marginTop:'30px',paddingLeft:'100px'}}>
  404. <Button className="setSave" type="primary" htmlType="submit" style={{marginRight:'50px'}}>保存</Button>
  405. <Button className="cancel" type="ghost" onClick={this.handleCancel}>返回</Button>
  406. </div>
  407. </div>
  408. </Spin>
  409. </Form >
  410. </Modal>
  411. <Modal maskClosable={false} visible={this.state.addnextVisible}
  412. onOk={this.nextCancel} onCancel={this.nextCancel}
  413. width='550px'
  414. title='查看订单明细服务'
  415. footer=''
  416. className="admin-desc-content">
  417. <Form layout="horizontal" id="demand-form">
  418. <Spin spinning={this.state.loading}>
  419. <div className="clearfix">
  420. <FormItem className="half-middle"
  421. {...formItemLayout}
  422. label="服务名称" >
  423. <span>{this.state.aaa}</span>
  424. </FormItem>
  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. </div>
  446. </Spin>
  447. </Form >
  448. </Modal>
  449. <Modal maskClosable={false} visible={this.state.projectVisible}
  450. onOk={this.projectOk} onCancel={this.projectCancel}
  451. width='1000px'
  452. title='创建订单'
  453. footer=''
  454. className="admin-desc-content">
  455. <Form layout="horizontal" id="demand-form" style={{paddingBottom:'40px'}} onSubmit={this.addProjectSubmit}>
  456. <Spin spinning={this.state.loading}>
  457. <div className="clearfix">
  458. <div>
  459. <FormItem className="half-item"
  460. {...formItemLayout}
  461. label="订单关联" >
  462. <span>{this.state.roleName}</span>
  463. </FormItem>
  464. </div>
  465. <FormItem className="half-item"
  466. {...formItemLayout}
  467. label="订单状态" >
  468. <span>{this.state.roleName}</span>
  469. </FormItem>
  470. <FormItem className="half-item"
  471. {...formItemLayout}
  472. label="订单时间" >
  473. <span>{this.state.roleName}</span>
  474. </FormItem>
  475. <FormItem className="half-item"
  476. {...formItemLayout}
  477. label="结算状态" >
  478. <span>{this.state.roleName}</span>
  479. </FormItem>
  480. <FormItem className="half-item"
  481. {...formItemLayout}
  482. label="是否特批" >
  483. <span>{this.state.roleName}</span>
  484. </FormItem>
  485. <FormItem className="half-item"
  486. {...formItemLayout}
  487. label="订单类型" >
  488. <span>{this.state.roleName}</span>
  489. </FormItem>
  490. <FormItem className="half-item"
  491. {...formItemLayout}
  492. label="订单负责人" >
  493. <span>{this.state.roleName}</span>
  494. </FormItem>
  495. <div className='clearfix'>
  496. <FormItem className="half-item"
  497. {...formItemLayout}
  498. label="客户名称" >
  499. <Input placeholder="客户名称" value={this.state.Names}
  500. onChange={(e)=>{this.setState({Names:e.target.value})}} style={{width:'240px'}} ref='Names'/>
  501. <span className="mandatory">*</span>
  502. </FormItem>
  503. <FormItem className="half-item"
  504. {...formItemLayout}
  505. label="项目类型" >
  506. <Select placeholder="请选择项目类型"
  507. style={{ width:'240px'}}
  508. value={this.state.projectType}
  509. onChange={(e) => { this.setState({ projectType: e }) }}>
  510. {
  511. lvl.map(function (item) {
  512. return <Select.Option key={item.value} >{item.key}</Select.Option>
  513. })
  514. }
  515. </Select>
  516. <span className="mandatory">*</span>
  517. </FormItem>
  518. <FormItem className="half-item"
  519. {...formItemLayout}
  520. label="项目负责人" >
  521. <Input placeholder="请输入项目负责人" value={this.state.pName}
  522. onChange={(e)=>{this.setState({pName:e.target.value})}} style={{width:'240px'}} ref='pName'/>
  523. <span className="mandatory">*</span>
  524. </FormItem>
  525. <div className='clearfix'>
  526. <FormItem
  527. labelCol={{ span: 4 }}
  528. wrapperCol={{ span: 16 }}
  529. label="立项说明" >
  530. <Input type="textarea" placeholder="请输入签单备注" rows={4} value={this.state.introduction}
  531. onChange={(e)=>{this.setState({introduction:e.target.value})}}/>
  532. </FormItem>
  533. </div>
  534. </div>
  535. </div>
  536. <FormItem wrapperCol={{ span: 12, offset: 4 }} className="half-middle">
  537. <Popconfirm title={'系统将依据订单【'+this.props.datauser.roleName+'】自动生成项目任务,是否保存?'} onConfirm={(e)=>{this.admissibleOrder()}} okText="确认" cancelText="取消">
  538. <Button className="submitSave" type="primary" htmlType="submit">保存</Button>
  539. </Popconfirm>
  540. <Button className="submitSave" type="ghost" onClick={this.projectCancel}>返回</Button>
  541. </FormItem>
  542. </Spin>
  543. </Form >
  544. </Modal>
  545. </div>
  546. )
  547. }
  548. }));
  549. export default MySettlementDetaile;