projectManage.jsx 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530
  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 {intentProgress,transactionProgress,contractProgress,projectProgress,projectState} from '../../../../dataDic.js';
  10. import {getIntentProgress,getTransactionProgress,getContractProgress,getProjectProgress,getProjectState} from '../../../../tools.js';
  11. const ProjectOrder=Form.create()(React.createClass({
  12. loadData(pageNo) {
  13. this.state.data = [];
  14. this.setState({
  15. pageNo:pageNo,
  16. loading: true
  17. });
  18. $.ajax({
  19. method: "post",
  20. dataType: "json",
  21. crossDomain: false,
  22. url: globalConfig.context + '/api/admin/roles',
  23. data: {
  24. pageNo: pageNo || 1,
  25. pageSize: this.state.pagination.pageSize,
  26. startDate: this.state.releaseDate[0],
  27. endDate: this.state.releaseDate[1],
  28. departmentt:this.state.departmentt,
  29. startDateOrder: this.state.releaseDateOrder[0],
  30. endDateOrder: this.state.releaseDateOrder[1],
  31. customerNameSearch:this.state.customerNameSearch,//客户名称
  32. approvedSearch:this.state.approvedSearch, //是否特批
  33. orderStatusSearch:this.state.orderStatusSearch, //订单状态
  34. orderDepartmentSearch:this.state.orderDepartmentSearch, //订单部门
  35. orderLeaderSearch:this.state.orderLeaderSearch,//订单负责人
  36. financeLeaderSearch:this.state.financeLeaderSearch,//财务负责人
  37. },
  38. success: function (data) {
  39. let theArr = [];
  40. if (!data.data) {
  41. if (data.error && data.error.length) {
  42. message.warning(data.error[0].message);
  43. };
  44. } else {
  45. for (let i = 0; i < data.data.list.length; i++) {
  46. let thisdata = data.data.list[i];
  47. theArr.push({
  48. key: i,
  49. id: thisdata.id,
  50. roleName: thisdata.roleName,
  51. creater:thisdata.creater,
  52. createTime:thisdata.createTimez,
  53. pages:pageNo
  54. });
  55. };
  56. this.state.pagination.current = data.data.pageNo;
  57. this.state.pagination.total = data.data.totalCount;
  58. };
  59. if(!data.data.list.length){
  60. this.state.pagination.current=0
  61. this.state.pagination.total=0
  62. }
  63. this.setState({
  64. newProject:false,
  65. dataSource: theArr,
  66. pagination: this.state.pagination,
  67. selectedRowKeys:[]
  68. });
  69. }.bind(this),
  70. }).always(function () {
  71. this.setState({
  72. loading: false
  73. });
  74. }.bind(this));
  75. },
  76. getInitialState() {
  77. return {
  78. datauser:{},
  79. selectedRowKeys: [],
  80. selectedRows: [],
  81. searchMore: true,
  82. releaseDate: [],
  83. releaseDateOrder:[],
  84. projectState:false,
  85. newProject:false,
  86. loading: false,
  87. KnotState:true,
  88. distributionVisible:false,
  89. visible:false,
  90. showDesc:false,
  91. pagination: {
  92. defaultCurrent: 1,
  93. defaultPageSize: 10,
  94. showQuickJumper: true,
  95. pageSize: 10,
  96. onChange: function (page) {
  97. this.loadData(page);
  98. }.bind(this),
  99. showTotal: function (total) {
  100. return '共' + total + '条数据';
  101. }
  102. },
  103. columns: [
  104. {
  105. title: '订单编号',
  106. dataIndex: 'roleName',
  107. key: 'roleName'
  108. },{
  109. title: '立项时间',
  110. dataIndex: 'creater7',
  111. key: 'creater7'
  112. },{
  113. title: '客户名称',
  114. dataIndex: 'roleName1',
  115. key: 'roleName1'
  116. },
  117. {
  118. title: '项目类型',
  119. dataIndex: 'creater1',
  120. key: 'creater1'
  121. }, {
  122. title: '项目负责人',
  123. dataIndex: 'createTime1',
  124. key: 'createTime1',
  125. render:(text)=>{return getIntentProgress(text) }
  126. },{
  127. title: '项目状态',
  128. dataIndex: 'roleName2',
  129. key: 'roleName2',
  130. render:(text)=>{return getTransactionProgress(text) }
  131. }, {
  132. title: '是否锁定',
  133. dataIndex: 'creater2',
  134. key: 'creater2',
  135. render:(text)=>{return getContractProgress(text) }
  136. },{
  137. title: '是否作废',
  138. dataIndex: 'creater77',
  139. key: 'creater77',
  140. render:(text)=>{return getContractProgress(text) }
  141. },{
  142. title: '订单编号',
  143. dataIndex: 'creater9',
  144. key: 'creater9',
  145. },{
  146. title: '下单时间',
  147. dataIndex: 'creater91',
  148. key: 'creater91',
  149. },{
  150. title: '订单状态',
  151. dataIndex: 'creater7700',
  152. key: 'creater7700',
  153. render:(text)=>{return getContractProgress(text) }
  154. },{
  155. title: '结算状态',
  156. dataIndex: 'creater922',
  157. key: 'creater922',
  158. },{
  159. title: '是否特批',
  160. dataIndex: 'creater9111',
  161. key: 'creater9111',
  162. },{
  163. title: '操作',
  164. dataIndex: 'rr',
  165. key: 'rr',
  166. render:(text,record,index)=>{
  167. return (
  168. <div>
  169. <Button style={{marginRight:'5px'}} type="primary" onClick={(e) =>{ e.stopPropagation(),this.edit(record) }}>立项</Button>
  170. <Button style={{marginRight:'5px'}} type="primary" onClick={(e) =>{ e.stopPropagation(),this.Knot(record)}}>项目管理</Button>
  171. <Popconfirm title={'您将作废项目【'+record.roleName+'】,系统将自动同步作废项目任务及项目资料单,请确认'} onConfirm={(e)=>{this.scrapOrder(record)}} okText="确认" cancelText="取消">
  172. <Button style={{marginRight:'5px'}} onClick={(e) =>{ e.stopPropagation()}} type="danger">作废</Button>
  173. </Popconfirm>
  174. </div>
  175. )
  176. }
  177. }
  178. ],
  179. dataSource: [],
  180. };
  181. },
  182. //部门
  183. departmentList() {
  184. this.setState({
  185. loading: true
  186. });
  187. $.ajax({
  188. method: "post",
  189. dataType: "json",
  190. crossDomain: false,
  191. url: globalConfig.context + "/api/admin/organization/selectSuperId",
  192. data: {
  193. },
  194. success: function(data) {
  195. let thedata = data.data;
  196. let theArr=[];
  197. if(!thedata) {
  198. if(data.error && data.error.length) {
  199. message.warning(data.error[0].message);
  200. };
  201. thedata = {};
  202. }else{
  203. thedata.map(function(item,index){
  204. theArr.push({
  205. key:index,
  206. name:item.name,
  207. id:item.id,
  208. depNo:item.depNo
  209. })
  210. })
  211. }
  212. this.setState({
  213. departmentArr:theArr,
  214. })
  215. }.bind(this),
  216. }).always(function() {
  217. this.setState({
  218. loading: false
  219. });
  220. }.bind(this));
  221. },
  222. //作废项目
  223. scrapOrder(record){
  224. this.setState({
  225. loading: true
  226. });
  227. $.ajax({
  228. method: "POST",
  229. dataType: "json",
  230. crossDomain: false,
  231. url: globalConfig.context +'/api/zuofei',
  232. data: {
  233. id:record.id,
  234. }
  235. }).done(function(data) {
  236. this.setState({
  237. loading: false
  238. });
  239. if(!data.error.length) {
  240. message.success('操作成功!');
  241. this.loadData(this.state.pageNo);
  242. } else {
  243. message.warning(data.error[0].message);
  244. }
  245. }.bind(this));
  246. },
  247. //创建项目
  248. addClick() {
  249. this.setState({
  250. newProject:true,
  251. signBillVisible:false,
  252. showDesc: false
  253. });
  254. },
  255. componentWillMount() {
  256. this.loadData();
  257. this.departmentList()
  258. },
  259. //立项
  260. edit(record) {
  261. this.setState({
  262. newProject:false,
  263. Kid:record.id,
  264. signBillVisible:true
  265. })
  266. this.editData(record)
  267. },
  268. //项目管理
  269. Knot(record){
  270. this.state.userDetaile=true;
  271. this.state.datauser = record;
  272. this.setState({
  273. projectState:true,
  274. newProject:false,
  275. showDesc: true
  276. });
  277. },
  278. noProject(){
  279. this.setState({
  280. signBillVisible:false
  281. })
  282. },
  283. //立项。结项前数据获取
  284. editData(xhr){
  285. $.ajax({
  286. method: "POST",
  287. dataType: "json",
  288. crossDomain: false,
  289. url: globalConfig.context + 'api/lixiang-shuju',
  290. data: {
  291. id:xhr.id,
  292. },
  293. success: function (data) {
  294. if (!data.data) {
  295. if (data.error && data.error.length) {
  296. message.warning(data.error[0].message);
  297. };
  298. } else {
  299. };
  300. }.bind(this)},
  301. ).always(function () {
  302. this.setState({
  303. loading: false
  304. });
  305. }.bind(this));
  306. },
  307. //立项、结项保存操作
  308. projectSubmit(e){
  309. e.preventDefault();
  310. this.setState({
  311. loading: true
  312. });
  313. let api=this.state.KnotState?'/api/admin/lixiang':'/api/admin/jiexiang';
  314. $.ajax({
  315. method: "POST",
  316. dataType: "json",
  317. crossDomain: false,
  318. url: globalConfig.context +api ,
  319. data: {
  320. id:this.state.Kid,
  321. }
  322. }).done(function(data) {
  323. this.setState({
  324. loading: false
  325. });
  326. if(!data.error.length) {
  327. message.success('操作成功!');
  328. this.noProject();
  329. this.loadData(this.state.pageNo);
  330. } else {
  331. message.warning(data.error[0].message);
  332. }
  333. }.bind(this));
  334. },
  335. closeDesc(e, s) {
  336. this.state.userDetaile=false;
  337. this.state.showDesc = e;
  338. if (s) {
  339. this.loadData(this.state.pageNo);
  340. };
  341. },
  342. searchSwitch() {
  343. this.setState({
  344. newProject:false,
  345. searchMore: !this.state.searchMore
  346. });
  347. },
  348. search() {
  349. this.loadData();
  350. },
  351. tableRowClick(record, index) {
  352. this.state.userDetaile=true;
  353. this.state.datauser = record;
  354. this.setState({
  355. projectState:false,
  356. newProject:false,
  357. showDesc: true
  358. });
  359. },
  360. reset() {
  361. this.state.customerNameSearch='';
  362. this.state.releaseDate[0] = undefined;
  363. this.state.releaseDate[1] = undefined;
  364. this.state.releaseDateOrder[0] = undefined;
  365. this.state.releaseDateOrder[1] = undefined;
  366. this.state.departmentt=undefined;
  367. this.state.approvedSearch = undefined;
  368. this.state.orderStatusSearch = undefined;
  369. this.state.orderDepartmentSearch = undefined;
  370. this.state.orderLeaderSearch = '';
  371. this.state.financeLeaderSearch = '';
  372. this.loadData();
  373. },
  374. render() {
  375. const FormItem = Form.Item;
  376. const formItemLayout = {
  377. labelCol: { span: 8 },
  378. wrapperCol: { span: 14 },
  379. };
  380. const { RangePicker } = DatePicker;
  381. const rowSelection = {
  382. selectedRowKeys: this.state.selectedRowKeys,
  383. onChange: (selectedRowKeys, selectedRows) => {
  384. this.setState({
  385. selectedRows: selectedRows.slice(-1),
  386. selectedRowKeys: selectedRowKeys.slice(-1)
  387. });
  388. },
  389. onSelectAll: (selected, selectedRows, changeRows) => {
  390. this.setState({
  391. selectedRowKeys:[]
  392. })
  393. },
  394. };
  395. const hasSelected = this.state.selectedRowKeys.length > 0;
  396. let departmentArr = this.state.departmentArr || [];
  397. return (
  398. <div className="user-content" >
  399. <div className="content-title">
  400. <span style={{fontSize:'16px'}}>项目管理</span>
  401. <div className="user-search">
  402. <Input placeholder="客户名称" style={{width:'150px'}}
  403. value={this.state.customerNameSearch}
  404. onChange={(e) => { this.setState({ customerNameSearch: e.target.value }); }} />
  405. <RangePicker
  406. value={[this.state.releaseDate[0] ? moment(this.state.releaseDate[0]) : null,
  407. this.state.releaseDate[1] ? moment(this.state.releaseDate[1]) : null]}
  408. onChange={(data, dataString) => { this.setState({ releaseDate: dataString }); }} />
  409. <Button type="primary" onClick={this.search} style={{marginLeft:'10px'}}>搜索</Button>
  410. <Button onClick={this.reset}>重置</Button>
  411. <span style={{marginLeft:'10px',marginRight:'20px'}}>更多搜索<Switch defaultChecked={false} onChange={this.searchSwitch} /></span>
  412. <Button type="primary" className="addButton" onClick={this.addClick} >创建项目<Icon type="plus" /></Button>
  413. </div>
  414. <div className='clearfix' style={{marginTop:'5px'}}>
  415. <div className="search-more" style={this.state.searchMore ? { display: 'none' } : {}}>
  416. <Select placeholder="项目状态"
  417. style={{ width: 150 ,marginRight:'10px'}}
  418. value={this.state.orderDepartmentSearch}
  419. onChange={(e) => { this.setState({ orderDepartmentSearch: e }) }}>
  420. {
  421. projectState.map(function (item) {
  422. return <Select.Option key={item.value} >{item.key}</Select.Option>
  423. })
  424. }
  425. </Select>
  426. <Select placeholder="是否锁定"
  427. style={{ width: 150 ,marginRight:'10px'}}
  428. value={this.state.orderDepartmentSearch}
  429. onChange={(e) => { this.setState({ orderDepartmentSearch: e }) }}>
  430. <Select.Option value='0'>未锁定</Select.Option>
  431. <Select.Option value='1'>已锁定</Select.Option>
  432. </Select>
  433. <Select placeholder="是否作废"
  434. style={{ width: 150 ,marginRight:'10px'}}
  435. value={this.state.orderDepartmentSearch}
  436. onChange={(e) => { this.setState({ orderDepartmentSearch: e }) }}>
  437. <Select.Option value='0'>未作废</Select.Option>
  438. <Select.Option value='1'>已作废</Select.Option>
  439. </Select>
  440. <Input placeholder="订单编号" style={{width:'150px',margin:'10px'}}
  441. value={this.state.customerNameSearch}
  442. onChange={(e) => { this.setState({ customerNameSearch: e.target.value }); }} />
  443. <Select placeholder="选择部门" style={{width:'150px'}}
  444. value={this.state.departmentt}
  445. onChange={(e) => { this.setState({ departmentt: e }) }}>
  446. {
  447. departmentArr.map(function (item) {
  448. return <Select.Option key={item.depNo} >{item.name}</Select.Option>
  449. })
  450. }
  451. </Select>
  452. <Input placeholder="订单负责人" style={{width:'150px',margin:'10px'}}
  453. value={this.state.customerNameSearch}
  454. onChange={(e) => { this.setState({ customerNameSearch: e.target.value }); }} />
  455. <RangePicker
  456. value={[this.state.releaseDateOrder[0] ? moment(this.state.releaseDateOrder[0]) : null,
  457. this.state.releaseDateOrder[1] ? moment(this.state.releaseDateOrder[1]) : null]}
  458. onChange={(data, dataString) => { this.setState({ releaseDateOrder: dataString }); }} />
  459. </div>
  460. </div>
  461. <div className="patent-table">
  462. <Spin spinning={this.state.loading}>
  463. <Table columns={this.state.columns}
  464. dataSource={this.state.dataSource}
  465. rowSelection={rowSelection}
  466. pagination={this.state.pagination}
  467. onRowClick={this.tableRowClick}
  468. />
  469. </Spin>
  470. </div>
  471. <MySettlementDetaile
  472. projectState={this.state.projectState}
  473. newProject={this.state.newProject}
  474. userDetaile={this.state.userDetaile}
  475. datauser={this.state.datauser}
  476. showDesc={this.state.showDesc}
  477. closeDesc={this.closeDesc} />
  478. </div >
  479. <Modal maskClosable={false} visible={this.state.signBillVisible}
  480. onOk={this.noProject} onCancel={this.noProject}
  481. width='800px'
  482. title='项目立项'
  483. footer=''
  484. className="admin-desc-content">
  485. <Form layout="horizontal" onSubmit={this.projectSubmit} id="demand-form">
  486. <Spin spinning={this.state.loading}>
  487. <div className="clearfix">
  488. <FormItem className="half-item"
  489. {...formItemLayout}
  490. label="项目编号" >
  491. <span></span>
  492. </FormItem>
  493. <FormItem className="half-item"
  494. {...formItemLayout}
  495. label="客户名称" >
  496. <span></span>
  497. </FormItem>
  498. <FormItem className="half-item"
  499. {...formItemLayout}
  500. label="立项时间">
  501. <span></span>
  502. </FormItem>
  503. <div className='clearfix'>
  504. <FormItem
  505. labelCol={{ span: 4 }}
  506. wrapperCol={{ span: 16 }}
  507. label="立项说明" >
  508. <Input type="textarea" placeholder="请输入备注" rows={4} value={this.state.introduction}
  509. onChange={(e)=>{this.setState({introduction:e.target.value})}}/>
  510. </FormItem>
  511. </div>
  512. </div>
  513. <FormItem wrapperCol={{ span: 12, offset: 4 }} className="half-middle">
  514. <Button className="submitSave" type="primary" htmlType="submit">{this.state.KnotState?"确定立项":'确定结项'}</Button>
  515. <Button className="submitSave" type="ghost" onClick={this.noProject}>返回</Button>
  516. </FormItem>
  517. </Spin>
  518. </Form >
  519. </Modal>
  520. </div>
  521. );
  522. }
  523. }));
  524. export default ProjectOrder;