projectManage.jsx 24 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648
  1. import React from 'react';
  2. import ReactDom from 'react-dom';
  3. import ajax from 'jquery/src/ajax/xhr.js';
  4. import $ from 'jquery/src/ajax';
  5. import { Form,Radio, Icon, Button, Input, Select, Spin, Table, Switch, message, Modal, Upload ,Popconfirm,DatePicker} from 'antd';
  6. import MySettlementDetaile from "./projectManageDetaile.jsx";
  7. import moment from 'moment';
  8. import '../userMangagement.less';
  9. import {projectState,orderState,distributeState} from '../../../../dataDic.js';
  10. import {getProjectState,getOrderState,getOrderType,getPaymentState,getApprovedState,getDistributeState} from '../../../../tools.js';
  11. const ProjectOrder=Form.create()(React.createClass({
  12. loadData(pageNo) {
  13. this.setState({
  14. loading: true
  15. });
  16. $.ajax({
  17. method: "post",
  18. dataType: "json",
  19. crossDomain: false,
  20. url: globalConfig.context + '/api/admin/techproject/listProject',
  21. data: {
  22. pageNo: pageNo || 1,
  23. pageSize: this.state.pagination.pageSize,
  24. setUpStartDate: this.state.releaseDate[0],
  25. setUpEndDate: this.state.releaseDate[1],
  26. depId:this.state.departmentt,
  27. orderStartDate: this.state.releaseDateOrder[0],
  28. orderEndDate: this.state.releaseDateOrder[1],
  29. buyerName:this.state.buyerNameSearch,//客户名称
  30. orderStatus:this.state.orderStatusSearch, //订单状态
  31. salesmanName:this.state.salesmanNameSearch,//订单负责人
  32. financeLeaderSearch:this.state.financeLeaderSearch,//财务负责人
  33. orderNo:this.state.orderNoSearch,//订单编号
  34. deletedSign:this.state.deleteSignSearch,//锁定激活
  35. serialNumber:this.state.serialNumberSearch,//项目编号
  36. principalName:this.state.principalNameSearch,
  37. taskDistribution:this.state.distributeSearch
  38. },
  39. success: function (data) {
  40. let theArr = [];
  41. if (!data.data) {
  42. if (data.error && data.error.length) {
  43. message.warning(data.error[0].message);
  44. };
  45. } else {
  46. for (let i = 0; i < data.data.list.length; i++) {
  47. let thisdata = data.data.list[i];
  48. theArr.push({
  49. key: i,
  50. id: thisdata.id,
  51. serialNumber: thisdata.serialNumber,
  52. signDate:thisdata.signDate,
  53. buyerName:thisdata.buyerName,
  54. projectType:thisdata.projectType,
  55. projectStatus:thisdata.projectStatus,
  56. deleteSign:thisdata.deletedSign,
  57. orderNo:thisdata.orderNo,
  58. orderTime:thisdata.orderTime,
  59. orderStatus:thisdata.orderStatus,
  60. liquidationStatus:thisdata.liquidationStatus,
  61. approval:thisdata.approval,
  62. buyerType:thisdata.buyerType,
  63. salesmanName:thisdata.salesmanName,
  64. departmentName:thisdata.departmentName,
  65. principalName:thisdata.principalName,
  66. taskDistribution:thisdata.taskDistribution
  67. });
  68. };
  69. this.state.pagination.current = data.data.pageNo;
  70. this.state.pagination.total = data.data.totalCount;
  71. };
  72. if(!data.data.list.length){
  73. this.state.pagination.current=0
  74. this.state.pagination.total=0
  75. }
  76. this.setState({
  77. pageNo:pageNo,
  78. newProject:false,
  79. dataSource: theArr,
  80. pagination: this.state.pagination,
  81. selectedRowKeys:[]
  82. });
  83. }.bind(this),
  84. }).always(function () {
  85. this.setState({
  86. loading: false
  87. });
  88. }.bind(this));
  89. },
  90. getInitialState() {
  91. return {
  92. datauser:{},
  93. selectedRowKeys: [],
  94. selectedRows: [],
  95. searchMore: true,
  96. releaseDate: [],
  97. releaseDateOrder:[],
  98. categoryArr:[],
  99. projectState:false,
  100. newProject:false,
  101. loading: false,
  102. KnotState:true,
  103. distributionVisible:false,
  104. visible:false,
  105. showDesc:false,
  106. pagination: {
  107. defaultCurrent: 1,
  108. defaultPageSize: 10,
  109. showQuickJumper: true,
  110. pageSize: 10,
  111. onChange: function (page) {
  112. this.loadData(page);
  113. }.bind(this),
  114. showTotal: function (total) {
  115. return '共' + total + '条数据';
  116. }
  117. },
  118. columns: [
  119. {
  120. title: '项目编号',
  121. dataIndex: 'serialNumber',
  122. key: 'serialNumber'
  123. },{
  124. title: '立项时间',
  125. dataIndex: 'signDate',
  126. key: 'signDate'
  127. },{
  128. title: '客户名称',
  129. dataIndex: 'buyerName',
  130. key: 'buyerName'
  131. },{
  132. title: '客户类型',
  133. dataIndex: 'buyerProvince',
  134. key: 'buyerProvince',
  135. render:(text)=>{return text?'单位客户':'个人客户'}
  136. },{
  137. title: '业务品类',
  138. dataIndex: 'projectType',
  139. key: 'projectType',
  140. },{
  141. title: '项目状态',
  142. dataIndex: 'projectStatus',
  143. key: 'projectStatus',
  144. render:(text)=>{return getProjectState(text) }
  145. },{
  146. title: '订单编号',
  147. dataIndex: 'orderNo',
  148. key: 'orderNo',
  149. },{
  150. title: '下单时间',
  151. dataIndex: 'orderTime',
  152. key: 'orderTime',
  153. },{
  154. title: '订单状态',
  155. dataIndex: 'orderStatus',
  156. key: 'orderStatus',
  157. render:(text)=>{return getOrderState(text) }
  158. },{
  159. title: '订单负责人',
  160. dataIndex: 'salesmanName',
  161. key: 'salesmanName',
  162. },{
  163. title: '项目负责人',
  164. dataIndex: 'principalName',
  165. key: 'principalName',
  166. },{
  167. title: '订单部门',
  168. dataIndex: 'departmentName',
  169. key: 'departmentName',
  170. },{
  171. title: '结算状态',
  172. dataIndex: 'liquidationStatus',
  173. key: 'liquidationStatus',
  174. render:(text)=>{return getPaymentState(text) }
  175. },{
  176. title: '是否特批',
  177. dataIndex: 'approval',
  178. key: 'approval',
  179. render:(text)=>{return getApprovedState(text) }
  180. },{
  181. title: '分派情况',
  182. dataIndex: 'taskDistribution',
  183. key: 'taskDistribution',
  184. render:(text)=>{return getDistributeState(text) }
  185. },
  186. {
  187. title: '操作',
  188. dataIndex: 'rr',
  189. key: 'rr',
  190. render:(text,record,index)=>{
  191. return (
  192. <div>
  193. {record.projectStatus==2||record.projectStatus==5?<Button style={{marginRight:'5px'}} type="primary" onClick={(e) =>{ e.stopPropagation(),this.Knot(record)}}>派单</Button>:''}
  194. {record.projectStatus==2&&<Button style={{marginRight:'5px'}} type="primary" onClick={(e) =>{ e.stopPropagation(),this.Knots(record)}}>结项</Button>}
  195. {record.projectStatus==1||record.projectStatus==5?<Popconfirm title={'您将作废项目【'+record.roleName+'】,系统将自动同步作废项目任务及项目资料单,请确认'} onConfirm={(e)=>{this.scrapOrder(record)}} okText="确认" cancelText="取消">
  196. <Button style={{marginRight:'5px'}} onClick={(e) =>{ e.stopPropagation()}} type="danger">作废</Button>
  197. </Popconfirm>:''}
  198. </div>
  199. )
  200. }
  201. }
  202. ],
  203. queryColumns: [
  204. {
  205. title: '项目编号',
  206. dataIndex: 'serialNumber',
  207. key: 'serialNumber'
  208. },{
  209. title: '立项时间',
  210. dataIndex: 'signDate',
  211. key: 'signDate'
  212. },{
  213. title: '客户名称',
  214. dataIndex: 'buyerName',
  215. key: 'buyerName'
  216. },{
  217. title: '客户类型',
  218. dataIndex: 'buyerType',
  219. key: 'buyerType',
  220. render:(text)=>{return text?'单位客户':'个人客户'}
  221. },{
  222. title: '业务品类',
  223. dataIndex: 'projectType',
  224. key: 'projectType',
  225. },{
  226. title: '项目状态',
  227. dataIndex: 'projectStatus',
  228. key: 'projectStatus',
  229. render:(text)=>{return getProjectState(text) }
  230. },{
  231. title: '订单编号',
  232. dataIndex: 'orderNo',
  233. key: 'orderNo',
  234. },{
  235. title: '下单时间',
  236. dataIndex: 'orderTime',
  237. key: 'orderTime',
  238. },{
  239. title: '订单状态',
  240. dataIndex: 'orderStatus',
  241. key: 'orderStatus',
  242. render:(text)=>{return getOrderState(text) }
  243. },{
  244. title: '订单负责人',
  245. dataIndex: 'salesmanName',
  246. key: 'salesmanName',
  247. },{
  248. title: '项目负责人',
  249. dataIndex: 'principalName',
  250. key: 'principalName',
  251. },{
  252. title: '订单部门',
  253. dataIndex: 'departmentName',
  254. key: 'departmentName',
  255. },{
  256. title: '结算状态',
  257. dataIndex: 'liquidationStatus',
  258. key: 'liquidationStatus',
  259. render:(text)=>{return getPaymentState(text) }
  260. },{
  261. title: '是否特批',
  262. dataIndex: 'approval',
  263. key: 'approval',
  264. render:(text)=>{return getApprovedState(text) }
  265. },{
  266. title: '分派情况',
  267. dataIndex: 'taskDistribution',
  268. key: 'taskDistribution',
  269. render:(text)=>{return getDistributeState(text) }
  270. }
  271. ],
  272. dataSource: [],
  273. };
  274. },
  275. //结项
  276. Knots(record){
  277. this.setState({
  278. signComment:'',
  279. contractId:record.id,
  280. serial:record.serialNumber,
  281. buyerName:record.buyerName,
  282. KnotState:false,
  283. signBillVisible:true
  284. })
  285. },
  286. //部门
  287. departmentList() {
  288. this.setState({
  289. loading: true
  290. });
  291. $.ajax({
  292. method: "post",
  293. dataType: "json",
  294. crossDomain: false,
  295. url: globalConfig.context + "/api/admin/organization/selectSuperId",
  296. data: {
  297. },
  298. success: function(data) {
  299. let thedata = data.data;
  300. let theArr=[];
  301. if(!thedata) {
  302. if(data.error && data.error.length) {
  303. message.warning(data.error[0].message);
  304. };
  305. thedata = {};
  306. }else{
  307. thedata.map(function(item,index){
  308. theArr.push({
  309. key:index,
  310. name:item.name,
  311. id:item.id,
  312. depNo:item.depNo
  313. })
  314. })
  315. }
  316. this.setState({
  317. departmentArr:theArr,
  318. })
  319. }.bind(this),
  320. }).always(function() {
  321. this.setState({
  322. loading: false
  323. });
  324. }.bind(this));
  325. },
  326. //作废项目
  327. scrapOrder(record){
  328. this.setState({
  329. loading: true
  330. });
  331. $.ajax({
  332. method: "POST",
  333. dataType: "json",
  334. crossDomain: false,
  335. url: globalConfig.context +'/api/zuofei',
  336. data: {
  337. id:record.id,
  338. }
  339. }).done(function(data) {
  340. this.setState({
  341. loading: false
  342. });
  343. if(!data.error.length) {
  344. message.success('操作成功!');
  345. this.loadData(this.state.pageNo);
  346. } else {
  347. message.warning(data.error[0].message);
  348. }
  349. }.bind(this));
  350. },
  351. //创建项目
  352. addClick() {
  353. this.setState({
  354. newProject:true,
  355. signBillVisible:false,
  356. showDesc: false
  357. });
  358. },
  359. //品类数据获取
  360. category(){
  361. this.setState({
  362. loading: true
  363. });
  364. $.ajax({
  365. method: "get",
  366. dataType: "json",
  367. crossDomain: false,
  368. url: globalConfig.context + "/api/admin/Varieties/getSuperList",
  369. data: {
  370. },
  371. success: function(data) {
  372. let thedata = data.data;
  373. let theArr=[];
  374. if(!thedata) {
  375. if(data.error && data.error.length) {
  376. message.warning(data.error[0].message);
  377. };
  378. thedata = {};
  379. }else{
  380. thedata.map(function(item,index){
  381. theArr.push({
  382. key:index,
  383. name:item.cname,
  384. id:item.id,
  385. })
  386. })
  387. }
  388. this.setState({
  389. categoryArr:theArr,
  390. })
  391. }.bind(this),
  392. }).always(function() {
  393. this.setState({
  394. loading: false
  395. });
  396. }.bind(this));
  397. },
  398. componentWillMount() {
  399. let data=localStorage.getItem('newData');
  400. if(data!='{}'&&data){
  401. var newData = JSON.parse(data);
  402. this.tableRowClick(newData);
  403. };
  404. },
  405. componentDidMount(){
  406. this.loadData();
  407. this.departmentList();
  408. this.category();
  409. },
  410. //项目管理
  411. Knot(record){
  412. this.state.userDetaile=true;
  413. this.state.datauser = record;
  414. this.setState({
  415. projectState:true,
  416. newProject:false,
  417. showDesc: true
  418. });
  419. },
  420. noProject(){
  421. this.setState({
  422. signBillVisible:false
  423. })
  424. },
  425. closeDesc(e, s) {
  426. this.state.userDetaile=false;
  427. this.state.showDesc = e;
  428. if (s) {
  429. this.loadData(this.state.pageNo);
  430. };
  431. },
  432. noProject(){
  433. this.setState({
  434. signBillVisible:false
  435. })
  436. },
  437. //结项
  438. projectSubmit(e){
  439. e.preventDefault();
  440. this.setState({
  441. loading: true
  442. });
  443. $.ajax({
  444. method: "get",
  445. dataType: "json",
  446. crossDomain: false,
  447. url: globalConfig.context +'/api/admin/techproject/revokeOrComplete' ,
  448. data: {
  449. contractId:this.state.contractId,
  450. operatorType:1,
  451. completeComment:this.state.signComment,
  452. }
  453. }).done(function(data) {
  454. this.setState({
  455. loading: false
  456. });
  457. if(!data.error.length) {
  458. message.success('结项成功!');
  459. this.noProject();
  460. this.loadData(this.state.pageNo);
  461. } else {
  462. message.warning(data.error[0].message);
  463. }
  464. }.bind(this));
  465. },
  466. searchSwitch() {
  467. this.setState({
  468. newProject:false,
  469. searchMore: !this.state.searchMore
  470. });
  471. },
  472. search() {
  473. this.loadData();
  474. },
  475. tableRowClick(record, index) {
  476. this.state.userDetaile=true;
  477. this.state.datauser = record;
  478. this.setState({
  479. projectState:false,
  480. newProject:false,
  481. showDesc: true
  482. });
  483. localStorage.setItem('newData','{}');
  484. },
  485. reset() {
  486. this.state.buyerNameSearch='';
  487. this.state.serialNumberSearch='';
  488. this.state.principalNameSearch='';
  489. this.state.releaseDate[0] = undefined;
  490. this.state.releaseDate[1] = undefined;
  491. this.state.releaseDateOrder[0] = undefined;
  492. this.state.releaseDateOrder[1] = undefined;
  493. this.state.departmentt=undefined;
  494. this.state.orderStatusSearch = undefined;
  495. this.state.salesmanNameSearch = '';
  496. this.state.orderNoSearch='';
  497. this.state.distributeSearch=undefined;
  498. this.state.deleteSignSearch=undefined;
  499. this.loadData();
  500. },
  501. render() {
  502. const FormItem = Form.Item;
  503. const formItemLayout = {
  504. labelCol: { span: 8 },
  505. wrapperCol: { span: 14 },
  506. };
  507. const { RangePicker } = DatePicker;
  508. const rowSelection = {
  509. selectedRowKeys: this.state.selectedRowKeys,
  510. onChange: (selectedRowKeys, selectedRows) => {
  511. this.setState({
  512. selectedRows: selectedRows.slice(-1),
  513. selectedRowKeys: selectedRowKeys.slice(-1)
  514. });
  515. },
  516. onSelectAll: (selected, selectedRows, changeRows) => {
  517. this.setState({
  518. selectedRowKeys:[]
  519. })
  520. },
  521. };
  522. const hasSelected = this.state.selectedRowKeys.length > 0;
  523. let departmentArr = this.state.departmentArr || [];
  524. return (
  525. <div className="user-content" >
  526. <div className="content-title">
  527. <span style={{fontSize:'16px'}}>{this.props.queryProject?'项目查询':'项目管理'}</span>
  528. <div className="user-search">
  529. <Input placeholder="客户名称" style={{width:'150px'}}
  530. value={this.state.buyerNameSearch}
  531. onChange={(e) => { this.setState({ buyerNameSearch: e.target.value }); }} />
  532. <Input placeholder="项目负责人" style={{width:'150px',marginRight:'10px'}}
  533. value={this.state.principalNameSearch}
  534. onChange={(e) => { this.setState({ principalNameSearch: e.target.value }); }} />
  535. <Select placeholder="分派情况" style={{width:'150px',marginLeft:'10px'}}
  536. value={this.state.distributeSearch}
  537. onChange={(e) => { this.setState({ distributeSearch: e }) }}>
  538. {
  539. distributeState.map(function (item) {
  540. return <Select.Option key={item.value} >{item.key}</Select.Option>
  541. })
  542. }
  543. </Select>
  544. <span style={{fontSize:'14px',marginRight:'5px'}}>立项时间:</span>
  545. <RangePicker
  546. value={[this.state.releaseDate[0] ? moment(this.state.releaseDate[0]) : null,
  547. this.state.releaseDate[1] ? moment(this.state.releaseDate[1]) : null]}
  548. onChange={(data, dataString) => { this.setState({ releaseDate: dataString }); }} />
  549. <Button type="primary" onClick={this.search} style={{marginLeft:'10px'}}>搜索</Button>
  550. <Button onClick={this.reset}>重置</Button>
  551. <span style={{marginLeft:'10px',marginRight:'20px'}}>更多搜索<Switch defaultChecked={false} onChange={this.searchSwitch} /></span>
  552. {this.props.queryProject?'':<Button type="primary" className="addButton" onClick={this.addClick} >创建项目<Icon type="plus" /></Button>}
  553. </div>
  554. <div className='clearfix' style={{marginTop:'5px'}}>
  555. <div className="search-more" style={this.state.searchMore ? { display: 'none' } : {}}>
  556. <Input placeholder="订单编号" style={{width:'150px',marginRight:'10px'}}
  557. value={this.state.orderNoSearch}
  558. onChange={(e) => { this.setState({ orderNoSearch: e.target.value }); }} />
  559. <Input placeholder="项目编号" style={{width:'150px',marginRight:'10px'}}
  560. value={this.state.serialNumberSearch}
  561. onChange={(e) => { this.setState({ serialNumberSearch: e.target.value }); }} />
  562. <Select placeholder="选择部门" style={{width:'150px'}}
  563. value={this.state.departmentt}
  564. onChange={(e) => { this.setState({ departmentt: e }) }}>
  565. {
  566. departmentArr.map(function (item) {
  567. return <Select.Option key={item.id} >{item.name}</Select.Option>
  568. })
  569. }
  570. </Select>
  571. <Input placeholder="订单负责人" style={{width:'150px',margin:'10px'}}
  572. value={this.state.salesmanNameSearch}
  573. onChange={(e) => { this.setState({ salesmanNameSearch: e.target.value }); }} />
  574. <span style={{fontSize:'14px',marginRight:'5px'}}>订单时间:</span>
  575. <RangePicker
  576. value={[this.state.releaseDateOrder[0] ? moment(this.state.releaseDateOrder[0]) : null,
  577. this.state.releaseDateOrder[1] ? moment(this.state.releaseDateOrder[1]) : null]}
  578. onChange={(data, dataString) => { this.setState({ releaseDateOrder: dataString }); }} />
  579. </div>
  580. </div>
  581. <div className="patent-table">
  582. <Spin spinning={this.state.loading}>
  583. <Table columns={this.props.queryProject?this.state.queryColumns:this.state.columns}
  584. dataSource={this.state.dataSource}
  585. rowSelection={rowSelection}
  586. pagination={this.state.pagination}
  587. onRowClick={this.tableRowClick}
  588. />
  589. </Spin>
  590. </div>
  591. <MySettlementDetaile
  592. categoryArr={this.state.categoryArr}
  593. queryProject={this.props.queryProject}
  594. departmentArr={this.state.departmentArr}
  595. projectState={this.state.projectState}
  596. newProject={this.state.newProject}
  597. userDetaile={this.state.userDetaile}
  598. datauser={this.state.datauser}
  599. showDesc={this.state.showDesc}
  600. closeDesc={this.closeDesc} />
  601. </div >
  602. <Modal maskClosable={false} visible={this.state.signBillVisible}
  603. onOk={this.noProject} onCancel={this.noProject}
  604. width='800px'
  605. title='项目结项'
  606. footer=''
  607. className="admin-desc-content">
  608. <Form layout="horizontal" onSubmit={this.projectSubmit} id="demand-form">
  609. <Spin spinning={this.state.loading}>
  610. <div className="clearfix">
  611. <FormItem className="half-item"
  612. {...formItemLayout}
  613. label="项目编号" >
  614. <span>{this.state.serial}</span>
  615. </FormItem>
  616. <FormItem className="half-item"
  617. {...formItemLayout}
  618. label="客户名称" >
  619. <span>{this.state.buyerName}</span>
  620. </FormItem>
  621. <div className='clearfix'>
  622. <FormItem
  623. labelCol={{ span: 4 }}
  624. wrapperCol={{ span: 16 }}
  625. label="结项说明" >
  626. <Input type="textarea" placeholder="请输入备注" rows={4} value={this.state.signComment}
  627. onChange={(e)=>{this.setState({signComment:e.target.value})}}/>
  628. </FormItem>
  629. </div>
  630. </div>
  631. <FormItem wrapperCol={{ span: 12, offset: 4 }} className="half-middle">
  632. <Button className="submitSave" type="primary" htmlType="submit">确定结项</Button>
  633. <Button className="submitSave" type="ghost" onClick={this.noProject}>返回</Button>
  634. </FormItem>
  635. </Spin>
  636. </Form >
  637. </Modal>
  638. </div>
  639. );
  640. }
  641. }));
  642. export default ProjectOrder;