taskAssignment.jsx 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557
  1. import React,{Component} from 'react';
  2. import ajax from 'jquery/src/ajax/xhr.js';
  3. import $ from 'jquery/src/ajax';
  4. import moment from 'moment';
  5. import '@/manageCenter/financialManage/distribute/public.less';
  6. import { Icon, Button,Form, Input, Select, Upload,Col,Spin, Table, Switch, message, DatePicker, Modal } from 'antd';
  7. import OrderDesc from '@/manageCenter/financialManage/orderDetail/orderDesc'
  8. import Assign from '@/manageCenter/publicComponent/assign';
  9. import {getProcessStatus,getApproval,getTaskStatus,getLiquidationStatus,getApprovedState,getProjectState,splitUrl} from '@/tools';
  10. const FormItem =Form.Item;
  11. const Task = React.createClass({
  12. loadData(pageNo) {
  13. this.state.data = [];
  14. this.setState({
  15. page:pageNo,
  16. loading: true
  17. });
  18. $.ajax({
  19. method: "get",
  20. dataType: "json",
  21. crossDomain: false,
  22. url: globalConfig.context + "/api/admin/orderProject/orderTaskList",
  23. data: {
  24. pageNo: pageNo || 1,
  25. pageSize: this.state.pagination.pageSize,
  26. specially:1,//经理
  27. name: this.state.nameSearch,//客户名称
  28. orderNo:this.state.orderNoSearch,//订单编号
  29. taskId:this.state.taskId, //任务编号
  30. taskStatus:this.state.taskStatus,//任务状态
  31. adminName:this.state.adminName,//任务受理人
  32. },
  33. success: function (data) {
  34. let theArr = [];
  35. if (!data.data || !data.data.list) {
  36. if (data.error && data.error.length) {
  37. message.warning(data.error[0].message);
  38. };
  39. } else {
  40. for (let i = 0; i < data.data.list.length; i++) {
  41. let thisdata = data.data.list[i];
  42. theArr.push({
  43. key: i,
  44. orderNo: thisdata.orderNo,//订单编号
  45. id:thisdata.id,//任务ID
  46. taskName:thisdata.taskName,//名称
  47. cname:thisdata.cname,//项目品类
  48. receiverName:thisdata.receiverName,//受理人
  49. projectStatus:thisdata.projectStatus,//项目状态
  50. taskStatus:thisdata.taskStatus,//任务状态
  51. taskDate:thisdata.taskDate,//分配时间
  52. commodityQuantity:thisdata.commodityQuantity,//数量
  53. userName:thisdata.userName,//用户名
  54. });
  55. };
  56. }
  57. this.state.pagination.current = data.data.pageNo;
  58. this.state.pagination.total = data.data.totalCount;
  59. if(data.data&&data.data.list&&!data.data.list.length){
  60. this.state.pagination.current=0
  61. this.state.pagination.total=0
  62. }
  63. this.setState({
  64. dataSource: theArr,
  65. pagination: this.state.pagination
  66. });
  67. }.bind(this),
  68. }).always(function () {
  69. this.setState({
  70. loading: false
  71. });
  72. }.bind(this));
  73. },
  74. getInitialState() {
  75. return {
  76. searchMore: true,
  77. assignVisible:false,
  78. releaseDate: [],
  79. roleName:'',
  80. boHuivisible:false,
  81. selectedRowKeys: [],
  82. selectedRows: [],
  83. paginations:false,
  84. loading: false,
  85. pagination: {
  86. defaultCurrent: 1,
  87. defaultPageSize: 10,
  88. showQuickJumper: true,
  89. pageSize: 10,
  90. onChange: function (page) {
  91. this.loadData(page);
  92. }.bind(this),
  93. showTotal: function (total) {
  94. return '共' + total + '条数据';
  95. }
  96. },
  97. columns: [
  98. {
  99. title: '任务编号',
  100. dataIndex: 'id',
  101. key: 'id',
  102. }, {
  103. title: '任务名称',
  104. dataIndex: 'taskName',
  105. key: 'taskName',
  106. }, {
  107. title: '订单编号',
  108. dataIndex: 'orderNo',
  109. key: 'orderNo',
  110. },
  111. {
  112. title: '业务类别',
  113. dataIndex: 'cname',
  114. key: 'cname',
  115. },
  116. {
  117. title: '客户名称',
  118. dataIndex: 'userName',
  119. key: 'userName',
  120. },
  121. {
  122. title: '任务状态',
  123. dataIndex: 'taskStatus',
  124. key: 'taskStatus',
  125. render: text => { return getTaskStatus(text)}
  126. },
  127. {
  128. title: '项目状态',
  129. dataIndex: 'projectStatus',
  130. key: 'projectStatus',
  131. render: text => { return getProjectState(text)}
  132. },
  133. {
  134. title: '分配时间',
  135. dataIndex: 'taskDate',
  136. key: 'taskDate'
  137. },
  138. {
  139. title: '任务数量',
  140. dataIndex: 'commodityQuantity',
  141. key: 'commodityQuantity'
  142. },
  143. {
  144. title:'操作',
  145. dataIndex: 'caozuo',
  146. key: 'caouzo',
  147. render:(text,record)=>{
  148. return <div>
  149. <Button type="primary" style={{margin:'0 10px'}} onClick={(e)=>{e.stopPropagation(),this.evaluate(record,'咨询师经理')}}>转交</Button>
  150. <Button type="primary" style={{margin:'0 10px'}} onClick={(e)=>{e.stopPropagation(),this.evaluate(record,'咨询师')}}>分配任务</Button>
  151. </div>
  152. }
  153. }
  154. ],
  155. dataSource: [],
  156. searchTime: [],
  157. columnsX: [
  158. {
  159. title: '业务项目名称',
  160. dataIndex: 'commodityName',
  161. key: 'commodityName'
  162. }, {
  163. title: '项目类别',
  164. dataIndex: 'cname',
  165. key: 'cname',
  166. },{
  167. title: '项目数量',
  168. dataIndex: 'commodityQuantity',
  169. key: 'commodityQuantity'
  170. }, {
  171. title: '金额(万元)',
  172. dataIndex: 'commodityPrice',
  173. key: 'commodityPrice'
  174. }, {
  175. title: '负责人',
  176. dataIndex: 'contacts',
  177. key: 'contacts'
  178. }, {
  179. title: '负责人电话',
  180. dataIndex: 'contactsMobile',
  181. key: 'contactsMobile'
  182. }, {
  183. title: '主要项目',
  184. dataIndex: 'main',
  185. key: 'main',
  186. render:(text)=>{
  187. return (text?'是':'否')
  188. }
  189. }, {
  190. title: '项目说明',
  191. dataIndex: 'taskComment',
  192. key: 'taskComment',
  193. render:(text)=>{
  194. return (text&&text.length>8?text.substr(0,8)+'…':text)
  195. }
  196. }
  197. ],
  198. dataSourceX: [],
  199. }
  200. },
  201. /* 分派 */
  202. evaluate(record,nub){
  203. this.state.assignData=record;
  204. this.setState({
  205. nub,
  206. assignVisible:true
  207. })
  208. },
  209. componentWillMount() {
  210. this.loadData();
  211. },
  212. tableRowClick(record, index) {
  213. this.state.RowData = record;
  214. this.setState({
  215. visible: true,
  216. });
  217. this.xiangqing(record.orderNo);
  218. this.xiangmu(record.orderNo);
  219. },
  220. //订单详情
  221. xiangqing(orderNos) {
  222. $.ajax({
  223. method: "get",
  224. dataType: "json",
  225. crossDomain: false,
  226. url: globalConfig.context +"/api/admin/newOrder/getOrderNewDetail",
  227. data: {
  228. orderNo:orderNos
  229. },
  230. success: function(data) {
  231. let theArr = [];
  232. if(data.error.length || data.data.list == "") {
  233. if(data.error && data.error.length) {
  234. message.warning(data.error[0].message);
  235. };
  236. } else {
  237. let thisdata=data.data;
  238. this.setState({
  239. orderNo: thisdata.orderNo,//订单编号
  240. contractNo: thisdata.contractNo,//合同编号
  241. userName:thisdata.userName,//客户名称
  242. signDate:thisdata.signDate,//签单时间
  243. processStatus:thisdata.processStatus,//流程状态
  244. liquidationStatus:thisdata.liquidationStatus,//结算状态
  245. contacts:thisdata.contacts,//企业联系人
  246. contactMobile:thisdata.contactMobile,//联系人电话
  247. legalPerson:thisdata.legalPerson,//法人
  248. legalPersonTel:thisdata.legalPersonTel,//法人电话
  249. firstAmount:thisdata.firstAmount,//签单金额
  250. totalAmount:thisdata.totalAmount,//首付金额
  251. approval:thisdata.approval,//特批状态
  252. settlementAmount:thisdata.settlementAmount,//已收款项
  253. orderRemarks:thisdata.orderRemarks,//订单留言
  254. orgCodeUrl: thisdata.contractPictureUrl ? splitUrl(thisdata.contractPictureUrl, ',', globalConfig.avatarHost + '/upload') : [],//图片地址
  255. salesmanName:thisdata.salesmanName,//营销员名称
  256. salesmanMobile:thisdata.salesmanMobile,//营销员电话
  257. financeName:thisdata.financeName,//财务名称
  258. financeMobile:thisdata.financeMobile,//财务电话
  259. })
  260. };
  261. }.bind(this),
  262. }).always(function() {
  263. this.setState({
  264. loading: false
  265. });
  266. }.bind(this));
  267. },
  268. //项目列表
  269. xiangmu(orderNos) {
  270. $.ajax({
  271. method: "get",
  272. dataType: "json",
  273. crossDomain: false,
  274. url: globalConfig.context +"/api/admin/newOrder/getOrderTask",
  275. data: {
  276. orderNo:orderNos
  277. },
  278. success: function(data) {
  279. let theArr = [];
  280. if(data.error.length || data.data.list == "") {
  281. if(data.error && data.error.length) {
  282. message.warning(data.error[0].message);
  283. };
  284. } else {
  285. for (let i = 0; i < data.data.length; i++) {
  286. let thisdata = data.data[i];
  287. theArr.push({
  288. key: i,
  289. id:thisdata.id,
  290. orderNo:thisdata.orderNo,//订单编号
  291. commodityId:thisdata.commodityId,//项目ID
  292. commodityName:thisdata.commodityName,//项目名称
  293. cname:thisdata.cname,//项目类别
  294. commodityPrice:thisdata.commodityPrice,//项目价格
  295. commodityQuantity:thisdata.commodityQuantity,//项目数量
  296. main:thisdata.main,//是否为主要任务
  297. taskComment:thisdata.taskComment,//任务说明
  298. contacts:thisdata.contacts,//联系人
  299. contactsMobile:thisdata.contactsMobile,//联系人电话
  300. taskStatus:thisdata.taskStatus,//是否分配
  301. });
  302. };
  303. };
  304. this.setState({
  305. dataSourceX: theArr,
  306. });
  307. }.bind(this),
  308. }).always(function() {
  309. this.setState({
  310. loading: false
  311. });
  312. }.bind(this));
  313. },
  314. //关闭详情
  315. visitCancel(e){
  316. this.setState({
  317. visible:false
  318. })
  319. this.reset();
  320. },
  321. visitOk(e){
  322. this.setState({
  323. visible:false
  324. })
  325. this.reset();
  326. },
  327. closeDesc(e, s) {
  328. this.state.showDesc = e;
  329. if (s) {
  330. this.loadData(this.state.page);
  331. };
  332. },
  333. closeAssign(e, s) {
  334. this.state.roleName='';
  335. this.state.assignVisible = e;
  336. if (s) {
  337. this.loadData(this.state.page);
  338. };
  339. },
  340. search() {
  341. this.loadData();
  342. },
  343. reset() {
  344. this.state.nameSearch = '';
  345. this.state.releaseDate = [];
  346. this.state.orderNoSearch='';
  347. this.state.taskNoSearch='';
  348. this.state.distribution=undefined;
  349. this.loadData();
  350. },
  351. searchSwitch() {
  352. this.setState({
  353. searchMore: !this.state.searchMore
  354. });
  355. },
  356. render() {
  357. const rowSelection = {
  358. selectedRowKeys: this.state.selectedRowKeys,
  359. onChange: (selectedRowKeys, selectedRows) => {
  360. this.setState({
  361. selectedRows: selectedRows.slice(-1),
  362. selectedRowKeys: selectedRowKeys.slice(-1)
  363. });
  364. }
  365. };
  366. const formItemLayout = {
  367. labelCol: { span: 8 },
  368. wrapperCol: { span: 14 },
  369. };
  370. const hasSelected = this.state.selectedRowKeys.length > 0;
  371. const { RangePicker } = DatePicker;
  372. return ( <div className="user-content">
  373. <div className="content-title">
  374. <span>任务派单</span>
  375. </div>
  376. <div className="user-search">
  377. <Input placeholder="客户名称"
  378. value={this.state.nameSearch}
  379. onChange={(e) => { this.setState({ nameSearch: e.target.value }); }} />
  380. <Input placeholder="订单编号"
  381. value={this.state.orderNoSearch}
  382. onChange={(e) => { this.setState({ orderNoSearch: e.target.value }); }} />
  383. <Input placeholder="任务编号"
  384. value={this.state.taskNoSearch}
  385. onChange={(e) => { this.setState({ taskNoSearch: e.target.value }); }} />
  386. <Button type="primary" onClick={this.search}>搜索</Button>
  387. <Button onClick={this.reset}>重置</Button>
  388. {/* <span>更多搜索<Switch defaultChecked={false} onChange={this.searchSwitch.bind(this)} /></span>
  389. <div className="search-more" style={this.state.searchMore ? { display: 'none' } : {}}>
  390. <span>订单时间 :</span>
  391. <RangePicker
  392. value={[this.state.releaseDate[0] ? moment(this.state.releaseDate[0]) : null,
  393. this.state.releaseDate[1] ? moment(this.state.releaseDate[1]) : null]}
  394. onChange={(data, dataString) => { this.setState({ releaseDate: dataString }); }} />
  395. </div> */}
  396. </div>
  397. <div className="patent-table">
  398. <Spin spinning={this.state.loading}>
  399. <Table columns={this.state.columns}
  400. dataSource={this.state.dataSource}
  401. rowSelection={rowSelection}
  402. pagination={this.state.pagination}
  403. onRowClick={this.tableRowClick.bind(this)} />
  404. </Spin>
  405. </div>
  406. <Assign
  407. title="任务"
  408. selApi={"/api/admin/orderProject/projectDistribution"}
  409. data={this.state.assignData}
  410. showDesc={this.state.assignVisible}
  411. closeDesc={this.closeAssign.bind(this)}
  412. fenpaiData={8}
  413. specially={0}
  414. roleName={this.state.nub}
  415. />
  416. <Modal
  417. className="customeDetails"
  418. footer=''
  419. title="任务详情"
  420. width='900px'
  421. visible={this.state.visible}
  422. onOk={this.visitOk}
  423. onCancel={this.visitCancel}
  424. >
  425. <Form layout="horizontal" onSubmit={this.handleSubmit} id="demand-form" style={{paddingBottom:'40px'}} >
  426. <Spin spinning={this.state.loading}>
  427. <div className="clearfix">
  428. <FormItem className="half-item"
  429. {...formItemLayout}
  430. label="订单编号" >
  431. <span>{this.state.orderNo}</span>
  432. </FormItem>
  433. <FormItem className="half-item"
  434. {...formItemLayout}
  435. label="合同编号" >
  436. <span>{this.state.contractNo}</span>
  437. </FormItem>
  438. <FormItem className="half-item"
  439. {...formItemLayout}
  440. label="客户名称" >
  441. <span>{this.state.userName}</span>
  442. </FormItem>
  443. <FormItem className="half-item"
  444. {...formItemLayout}
  445. label="合同签订时间" >
  446. <span>{this.state.signDate}</span>
  447. </FormItem>
  448. <FormItem className="half-item"
  449. {...formItemLayout}
  450. label="流程状态" >
  451. <span>{getProcessStatus(this.state.processStatus)}</span>
  452. </FormItem>
  453. <FormItem className="half-item"
  454. {...formItemLayout}
  455. label="结算状态" >
  456. <span>{getLiquidationStatus(this.state.liquidationStatus)}</span>
  457. </FormItem>
  458. <FormItem className="half-item"
  459. {...formItemLayout}
  460. label="企业联系人" >
  461. <span>{this.state.contacts}</span>
  462. </FormItem>
  463. <FormItem className="half-item"
  464. {...formItemLayout}
  465. label="联系人电话" >
  466. <span>{this.state.contactMobile}</span>
  467. </FormItem>
  468. <FormItem className="half-item"
  469. {...formItemLayout}
  470. label="企业法人" >
  471. <span>{this.state.legalPerson}</span>
  472. </FormItem>
  473. <FormItem className="half-item"
  474. {...formItemLayout}
  475. label="法人电话" >
  476. <span>{this.state.legalPersonTel}</span>
  477. </FormItem>
  478. <FormItem className="half-item"
  479. {...formItemLayout}
  480. label="签单金额(万元)" >
  481. <span>{this.state.firstAmount}</span>
  482. </FormItem>
  483. <FormItem className="half-item"
  484. {...formItemLayout}
  485. label="首付金额(万元)" >
  486. <span>{this.state.totalAmount}</span>
  487. </FormItem>
  488. <FormItem className="half-item"
  489. {...formItemLayout}
  490. label="特批立项" >
  491. <span>{getApprovedState(this.state.approval)}</span>
  492. </FormItem>
  493. <FormItem className="half-item"
  494. {...formItemLayout}
  495. label="已收款项(万元)" >
  496. <span>{this.state.settlementAmount}</span>
  497. </FormItem>
  498. <div className='clearfix'>
  499. <FormItem
  500. labelCol={{ span: 4 }}
  501. wrapperCol={{ span: 16 }}
  502. label="订单留言" >
  503. <span>{this.state.orderRemarks}</span>
  504. </FormItem>
  505. </div>
  506. <div className='clearfix'>
  507. <FormItem className="half-item"
  508. {...formItemLayout}
  509. label="订单负责人" >
  510. <span>{this.state.salesmanName}</span>
  511. </FormItem>
  512. <FormItem className="half-item"
  513. {...formItemLayout}
  514. label="订单负责人电话" >
  515. <span>{this.state.salesmanMobile}</span>
  516. </FormItem>
  517. </div>
  518. <div className='clearfix'>
  519. <FormItem className="half-item"
  520. {...formItemLayout}
  521. label="财务负责人" >
  522. <span>{this.state.financeName}</span>
  523. </FormItem>
  524. <FormItem className="half-item"
  525. {...formItemLayout}
  526. label="财务负责人电话" >
  527. <span>{this.state.financeMobile}</span>
  528. </FormItem>
  529. </div>
  530. <div>
  531. <span style={{marginLeft:'50px',fontSize:'20px'}}>项目业务</span>
  532. {this.state.processStatus==0?<Button type='primary' onClick={this.addDetailed} style={{float:'right',marginRight:'50px',marginBottom:'15px'}}>添加项目明细</Button>:""}
  533. </div>
  534. <div className="patent-table">
  535. <Spin spinning={this.state.loading}>
  536. <Table columns={this.state.columnsX}
  537. dataSource={this.state.dataSourceX}
  538. pagination={this.state.paginations}
  539. onRowClick={this.tableRowClickX}
  540. />
  541. </Spin>
  542. </div>
  543. </div>
  544. </Spin>
  545. </Form>
  546. </Modal>
  547. </div> )
  548. }
  549. })
  550. export default Task;