businessProject.jsx 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738
  1. import React from 'react';
  2. import $ from 'jquery/src/ajax';
  3. import 'react-quill/dist/quill.bubble.css';
  4. import {
  5. Form,
  6. Icon,
  7. Button,
  8. Input,
  9. Select,
  10. Spin,
  11. Table,
  12. message,
  13. DatePicker,
  14. Modal,
  15. Upload,
  16. Popconfirm,
  17. Cascader,
  18. InputNumber,
  19. Radio
  20. } from 'antd';
  21. import { getGameState, splitUrl, getprovince } from '@/tools.js';
  22. //主体
  23. const BusinessProject = Form.create()(
  24. React.createClass({
  25. loadData(pageNo) {
  26. this.state.data = [];
  27. this.setState({
  28. loading: true,
  29. page: pageNo
  30. });
  31. $.ajax({
  32. method: 'get',
  33. dataType: 'json',
  34. crossDomain: false,
  35. url: globalConfig.context + '/portal/service/jtProject/list',
  36. data: {
  37. pageNo: pageNo || 1,
  38. pageSize: this.state.pagination.pageSize,
  39. topId: this.state.typeSearch? this.state.typeSearch[0]:'',
  40. secondId:this.state.typeSearch?this.state.typeSearch[1]:'',
  41. name: this.state.nameSearch,
  42. privateProject: 1,
  43. auditStatus:1
  44. },
  45. success: function(data) {
  46. let theArr = [];
  47. if (!data.data || !data.data.list) {
  48. if (data.error && data.error.length) {
  49. message.warning(data.error[0].message);
  50. }
  51. } else {
  52. for (let i = 0; i < data.data.list.length; i++) {
  53. let thisdata = data.data.list[i],
  54. ProvinceCityArr = [],
  55. cname = '',
  56. superName = '',
  57. ProvinceS = thisdata.province, //getprovince
  58. citys = thisdata.city,
  59. Areas = thisdata.area;
  60. ProvinceCityArr.push(ProvinceS, citys, Areas);
  61. this.state.categoryList.map((item) => {
  62. if (thisdata.categoryId == item.id) {
  63. cname = item.name;
  64. superName = item.superName;
  65. }
  66. });
  67. theArr.push({
  68. key: i,
  69. id: thisdata.id, //业务名称
  70. name: thisdata.name, //业务名称
  71. categoryId: thisdata.categoryId, //业务品类
  72. number: thisdata.number,
  73. price: thisdata.price, //市场价
  74. superName: superName,
  75. cname: cname,
  76. companyName:thisdata.companyName,
  77. city: thisdata.city,
  78. activityPrice: thisdata.activityPrice ? thisdata.activityPrice : '', //最低折扣
  79. memberPrice: thisdata.memberPrice ? thisdata.memberPrice : '', //会员价
  80. offset: thisdata.offset ? thisdata.offset : '',
  81. activityPrice: thisdata.activityPrice ? thisdata.activityPrice : '', //活动价
  82. activityFlag: thisdata.activityFlag, //活动生效标识
  83. status: thisdata.status, //项目状态
  84. province: thisdata.province,
  85. introduce: thisdata.introduce,
  86. createTime: thisdata.createTime ? new Date(thisdata.createTime).toLocaleString() : '',
  87. value: thisdata.value,
  88. applyConditions: thisdata.applyConditions
  89. });
  90. }
  91. this.state.pagination.current = data.data.pageNo;
  92. this.state.pagination.total = data.data.totalCount;
  93. }
  94. this.setState({
  95. dataSource: theArr,
  96. pagination: this.state.pagination
  97. });
  98. }.bind(this)
  99. }).always(
  100. function() {
  101. this.setState({
  102. loading: false
  103. });
  104. }.bind(this)
  105. );
  106. },
  107. getInitialState() {
  108. return {
  109. searchMore: true,
  110. selectedRowKeys: [],
  111. selectedRows: [],
  112. loading: false,
  113. orgCodeUrl: [],
  114. typeSearch:[],
  115. companyLogoUrl: [],
  116. pagination: {
  117. defaultCurrent: 1,
  118. defaultPageSize: 10,
  119. showQuickJumper: true,
  120. pageSize: 10,
  121. onChange: function(page) {
  122. this.loadData(page);
  123. this.setState({
  124. selectedRowKeys: []
  125. });
  126. }.bind(this),
  127. showTotal: function(total) {
  128. return '共' + total + '条数据';
  129. }
  130. },
  131. columns: [
  132. {
  133. title: '项目名称',
  134. dataIndex: 'name',
  135. key: 'bname'
  136. },
  137. {
  138. title: '发布人账户昵称',
  139. dataIndex: 'companyName',
  140. key: 'companyName'
  141. },
  142. {
  143. title: '品类名称',
  144. dataIndex: 'cname',
  145. key: 'cname',
  146. render:(text,recard)=>{
  147. let ids =recard.categoryId,categoryList =this.state.categoryList,txt='' ;
  148. categoryList.map(item=>{
  149. if(item.children){
  150. (item.children).map(atem=>{
  151. if(atem.value==ids){
  152. txt= atem.label
  153. }
  154. })
  155. }
  156. })
  157. return txt;
  158. }
  159. },
  160. {
  161. title: '上级品类',
  162. dataIndex: 'superName',
  163. key: 'superName',
  164. render:(text,recard)=>{
  165. let ids =recard.categoryId,categoryList =this.state.categoryList,txt='' ;
  166. categoryList.map(item=>{
  167. if(item.children){
  168. (item.children).map(atem=>{
  169. if(atem.value==ids){
  170. txt= item.label
  171. }
  172. })
  173. }
  174. })
  175. return txt;
  176. }
  177. },
  178. {
  179. title: '业务地区',
  180. dataIndex: 'area',
  181. key: 'area',
  182. render: (text, rocard) => {
  183. return (
  184. <div>
  185. {rocard.province != 0 ? (
  186. <span>{getprovince(rocard.province) + '-' + getprovince(rocard.city)}</span>
  187. ) : (
  188. '全国'
  189. )}
  190. </div>
  191. );
  192. }
  193. },
  194. {
  195. title: '市场价(万元)',
  196. dataIndex: 'price',
  197. key: 'price'
  198. },
  199. {
  200. title: '最低折扣',
  201. dataIndex: 'offset',
  202. key: 'offset'
  203. },
  204. {
  205. title: '会员价(万元)',
  206. dataIndex: 'memberPrice',
  207. key: 'memberPrice'
  208. },
  209. {
  210. title: '活动价(万元)',
  211. dataIndex: 'activityPrice',
  212. key: 'activityPrice'
  213. },
  214. {
  215. title: '活动生效标识',
  216. dataIndex: 'activityFlag',
  217. key: 'activityFlag',
  218. render: (text) => {
  219. return getGameState(text);
  220. }
  221. },
  222. {
  223. title: '审核',
  224. dataIndex: 'caozuo',
  225. key: 'caozuo',
  226. render: (text, recard) => {
  227. return (
  228. <div className="btnRight">
  229. <Button
  230. type="primary"
  231. onClick={(e) => {
  232. e.stopPropagation();
  233. this.tableRowClick(recard);
  234. }}
  235. >
  236. 审核
  237. </Button>
  238. </div>
  239. );
  240. }
  241. }
  242. ],
  243. dataSource: []
  244. };
  245. },
  246. //业务品类列表获取
  247. topLevel() {
  248. $.ajax({
  249. method: 'get',
  250. dataType: 'json',
  251. crossDomain: false,
  252. url: globalConfig.context + '/portal/service/jtBusiness/getCategoryList',
  253. data: {
  254. },
  255. success: function(data) {
  256. let theArr = [],thisdata=data.data;
  257. if (!data.data) {
  258. if (data.error && data.error.length) {
  259. message.warning(data.error[0].message);
  260. }
  261. } else {
  262. thisdata.map((item,index) => {
  263. theArr.push({
  264. 'value':item.topLevelId,
  265. 'label':item.topLevel,
  266. 'children':[]
  267. })
  268. if (item.children) {
  269. item.children.map(atem => {
  270. (theArr[index].children).push({
  271. 'value':atem.id,
  272. 'label':atem.name
  273. })
  274. })
  275. }
  276. })
  277. }
  278. this.setState({
  279. categoryList: theArr,
  280. });
  281. this.loadData();
  282. }.bind(this)
  283. }).always(
  284. function() {
  285. this.setState({
  286. loading: false
  287. });
  288. }.bind(this)
  289. );
  290. },
  291. componentWillMount() {
  292. this.topLevel();
  293. },
  294. detailes(recard) {
  295. this.setState({
  296. loading:true
  297. });
  298. $.ajax({
  299. method: 'get',
  300. dataType: 'json',
  301. crossDomain: false,
  302. url: globalConfig.context + '/api/user/jtBusiness/project/detail',
  303. data: {
  304. id: recard.id
  305. },
  306. success: function(data) {
  307. let thisData = data.data;
  308. if (!thisData) {
  309. if (data.error && data.error.length) {
  310. message.warning(data.error[0].message);
  311. }
  312. thisData = {};
  313. }
  314. let categoryList = this.state.categoryList,name='';
  315. categoryList.map(item=>{
  316. if((item.children).length){
  317. (item.children).map(atem=>{
  318. if(atem.value==thisData.categoryId){
  319. name=item.label+'/'+atem.label;
  320. return;
  321. }
  322. })
  323. }
  324. });
  325. document.querySelector('.txt').innerHTML='';
  326. let eleDiv = document.createElement('div');
  327. eleDiv.innerHTML=thisData.introduce;
  328. document.querySelector('.txt').append(eleDiv);
  329. this.setState({
  330. id: thisData.id,
  331. data: thisData,
  332. name: name,
  333. createTime: thisData.createTime ? new Date(thisData.createTime).toLocaleString() : '',
  334. auditStatus: thisData.auditStatus,
  335. orgCodeUrl: thisData.minImgUrl
  336. ? splitUrl(thisData.minImgUrl, ',', globalConfig.avatarHost + '/upload')
  337. : [],
  338. companyLogoUrl: thisData.maxImgUrl
  339. ? splitUrl(thisData.maxImgUrl, ',', globalConfig.avatarHost + '/upload')
  340. : []
  341. });
  342. }.bind(this)
  343. }).always(
  344. function() {
  345. this.setState({
  346. loading: false
  347. });
  348. }.bind(this)
  349. );
  350. },
  351. //项目列表整行点击
  352. tableRowClick(record, index) {
  353. this.state.RowData = record;
  354. this.setState({
  355. editvisible: true
  356. });
  357. this.detailes(record);
  358. },
  359. edithandleCancel(e) {
  360. this.setState({
  361. editvisible: false
  362. });
  363. },
  364. //审核通过/拒绝
  365. updateFun(index){
  366. this.setState({
  367. loading:true
  368. })
  369. $.ajax({
  370. method: "post",
  371. dataType: "JSON",
  372. crossDomain: false,
  373. url: globalConfig.context + '/api/admin/jtBusiness/project/audit',
  374. data: {
  375. id: this.state.id,
  376. auditResult:index,
  377. auditInfo:this.state.refuseValue
  378. }
  379. }).done(function (data) {
  380. if (!data.error.length) {
  381. message.success('操作成功!');
  382. this.setState({
  383. loading: false,
  384. editvisible:false
  385. });
  386. if(this.state.pagination.total%10==1){
  387. this.loadData((this.state.page)-1);
  388. }else{
  389. this.loadData(this.state.page);
  390. }
  391. } else {
  392. message.warning(data.error[0].message);
  393. };
  394. }.bind(this));
  395. },
  396. //审核拒绝
  397. refuse(){
  398. this.setState({
  399. refuseValue:'',
  400. refuseVisible:true
  401. })
  402. },
  403. refuseOk(){
  404. if(!this.state.refuseValue){
  405. message.warning('请填写拒绝原因。')
  406. return;
  407. }
  408. this.setState({
  409. refuseVisible:false
  410. })
  411. this.updateFun(1)
  412. },
  413. refuseCancel(){
  414. this.setState({
  415. refuseValue:'',
  416. refuseVisible:false
  417. })
  418. },
  419. search() {
  420. this.loadData();
  421. },
  422. //搜索部分的清零
  423. reset() {
  424. this.state.nameSearch = ''; //项目名称清零
  425. this.state.typeSearch = undefined; //品类名称清零
  426. this.state.ressSearch = undefined; //省市区清零
  427. this.state.activityFlag = undefined; //活动生效清零
  428. this.state.status = undefined; //项目状态清零
  429. this.loadData();
  430. },
  431. //更多搜索的显示与否
  432. searchSwitch() {
  433. this.setState({
  434. searchMore: !this.state.searchMore
  435. });
  436. },
  437. render() {
  438. const FormItem = Form.Item;
  439. const rowSelection = {
  440. selectedRowKeys: this.state.selectedRowKeys,
  441. onChange: (selectedRowKeys, selectedRows) => {
  442. this.setState({
  443. selectedRows: selectedRows.slice(-1),
  444. selectedRowKeys: selectedRowKeys.slice(-1)
  445. });
  446. }
  447. };
  448. const theData = this.state.data || {};
  449. return (
  450. <div className="user-content">
  451. <div className="content-title">
  452. <span>项目业务审核</span>
  453. <div className="user-search">
  454. <Input
  455. placeholder="业务项目名称"
  456. style={{ width: '150px', marginRight: '10px', marginBottom: '10px' }}
  457. value={this.state.nameSearch}
  458. onChange={(e) => {
  459. this.setState({ nameSearch: e.target.value });
  460. }}
  461. />
  462. <Cascader placeholder='业务项目品类'
  463. options={this.state.categoryList}
  464. style={{width:200,marginRight:10}}
  465. value={this.state.typeSearch} onChange={(e)=>{this.setState({typeSearch:e})}}/>
  466. <Button type="primary" onClick={this.search} style={{ marginRight: '10px' }}>
  467. 搜索
  468. </Button>
  469. <Button onClick={this.reset} style={{ marginRight: '10px' }}>
  470. 重置
  471. </Button>
  472. </div>
  473. <div className="patent-table">
  474. <Spin spinning={this.state.loading}>
  475. <Table
  476. columns={this.state.columns}
  477. dataSource={this.state.dataSource}
  478. rowSelection={rowSelection}
  479. pagination={this.state.pagination}
  480. />
  481. </Spin>
  482. </div>
  483. <div className="patent-desc">
  484. <Modal
  485. className="customeDetails"
  486. title="业务项目"
  487. width="1000px"
  488. visible={this.state.editvisible}
  489. onOk={this.edithandleCancel}
  490. onCancel={this.edithandleCancel}
  491. footer=""
  492. >
  493. <Form layout="horizontal" onSubmit={this.edithandleSubmit} id="demand-form">
  494. <Spin spinning={this.state.loading}>
  495. <div className="clearfix">
  496. <FormItem
  497. className="half-item"
  498. labelCol={{ span: 8 }}
  499. wrapperCol={{ span: 12 }}
  500. label="项目名称"
  501. >
  502. <span>{theData.name}</span>
  503. </FormItem>
  504. <FormItem
  505. className="half-item"
  506. labelCol={{ span: 8 }}
  507. wrapperCol={{ span: 12 }}
  508. label="业务品类"
  509. >
  510. <span>{this.state.name}</span>
  511. </FormItem>
  512. </div>
  513. <div className="clearfix">
  514. <FormItem
  515. className="half-item"
  516. labelCol={{ span: 8 }}
  517. wrapperCol={{ span: 12 }}
  518. label="省份"
  519. >
  520. <span>
  521. {theData.province != '0' ? getprovince(theData.province) : '全国'}
  522. </span>
  523. </FormItem>
  524. <FormItem
  525. className="half-item"
  526. labelCol={{ span: 8 }}
  527. wrapperCol={{ span: 12 }}
  528. label="热点"
  529. >
  530. <span>{theData.isHot=='1' ? '是' :theData.isHot=='0'?'否':''}</span>
  531. </FormItem>
  532. </div>
  533. <div className="clearfix">
  534. <FormItem
  535. className="half-item"
  536. labelCol={{ span: 8 }}
  537. wrapperCol={{ span: 12 }}
  538. label="市场价"
  539. >
  540. <span>{theData.price?theData.price+' 万元':''}</span>
  541. </FormItem>
  542. <FormItem
  543. className="half-item"
  544. labelCol={{ span: 8 }}
  545. wrapperCol={{ span: 12 }}
  546. label="活动价"
  547. >
  548. <span>{theData.activityPrice?theData.activityPrice+' 万元':''}</span>
  549. </FormItem>
  550. <FormItem
  551. className="half-item"
  552. labelCol={{ span: 8 }}
  553. wrapperCol={{ span: 12 }}
  554. label="最低折扣"
  555. >
  556. <span>{theData.offset?theData.offset+' 万元':''}</span>
  557. </FormItem>
  558. <FormItem
  559. className="half-item"
  560. labelCol={{ span: 8 }}
  561. wrapperCol={{ span: 12 }}
  562. label="会员价"
  563. >
  564. <span>{theData.memberPrice?theData.memberPrice+' 万元':''}</span>
  565. </FormItem>
  566. <FormItem
  567. className="half-item"
  568. labelCol={{ span: 8 }}
  569. wrapperCol={{ span: 12 }}
  570. label="活动生效"
  571. >
  572. <span>{theData.activityFlag =='1'? '有效' : theData.activityFlag =='0'?'无效':''}</span>
  573. </FormItem>
  574. <FormItem
  575. className="half-item"
  576. labelCol={{ span: 8 }}
  577. wrapperCol={{ span: 12 }}
  578. label="创建时间"
  579. >
  580. <span>{this.state.createTime}</span>
  581. </FormItem>
  582. </div>
  583. <div className="clearfix">
  584. <FormItem labelCol={{ span: 4 }} wrapperCol={{ span: 12 }} label="项目营销说明">
  585. <span>{theData.advertisement}</span>
  586. </FormItem>
  587. </div>
  588. <div className="clearfix">
  589. <FormItem
  590. labelCol={{ span: 4 }}
  591. wrapperCol={{ span: 12 }}
  592. label="业务项目价值及作用"
  593. >
  594. <span>{theData.value}</span>
  595. </FormItem>
  596. </div>
  597. <div className="clearfix">
  598. <FormItem
  599. labelCol={{ span: 4 }}
  600. wrapperCol={{ span: 12 }}
  601. label="业务项目客户基本条件"
  602. >
  603. <span>{theData.applyConditions}</span>
  604. </FormItem>
  605. </div>
  606. <div className="clearfix">
  607. <FormItem labelCol={{ span: 4 }} wrapperCol={{ span: 18 }} label="业务项目服务内容">
  608. <div className="ql-editor">
  609. <div className="txt"></div>
  610. </div>
  611. </FormItem>
  612. </div>
  613. <div className="clearfix pictures">
  614. <FormItem
  615. className="half-item"
  616. labelCol={{ span: 8 }}
  617. wrapperCol={{ span: 10 }}
  618. label="业务项目图标(小)"
  619. >
  620. <Upload
  621. className="demandDetailShow-upload"
  622. listType="picture-card"
  623. fileList={this.state.orgCodeUrl}
  624. onPreview={(file) => {
  625. this.setState({
  626. previewImage: file.url || file.thumbUrl,
  627. previewVisible: true
  628. });
  629. }}
  630. />
  631. <Modal
  632. maskClosable={false}
  633. footer={null}
  634. visible={this.state.previewVisible}
  635. onCancel={() => {
  636. this.setState({ previewVisible: false });
  637. }}
  638. >
  639. <img
  640. alt=""
  641. style={{ width: '100%' }}
  642. src={this.state.previewImage || ''}
  643. />
  644. </Modal>
  645. </FormItem>
  646. <FormItem
  647. className="half-item"
  648. labelCol={{ span: 8 }}
  649. wrapperCol={{ span: 12 }}
  650. label="业务项目图标(大)"
  651. >
  652. <Upload
  653. className="demandDetailShow-upload"
  654. listType="picture-card"
  655. fileList={this.state.companyLogoUrl}
  656. onPreview={(file) => {
  657. this.setState({
  658. previewImage: file.url || file.thumbUrl,
  659. previewVisible: true
  660. });
  661. }}
  662. />
  663. <Modal
  664. maskClosable={false}
  665. footer={null}
  666. visible={this.state.previewVisible}
  667. onCancel={() => {
  668. this.setState({ previewVisible: false });
  669. }}
  670. >
  671. <img
  672. alt=""
  673. style={{ width: '100%' }}
  674. src={this.state.previewImage || ''}
  675. />
  676. </Modal>
  677. </FormItem>
  678. <div className="clearfix">
  679. <FormItem wrapperCol={{ span: 12, offset: 3 }}>
  680. <Button
  681. className="set-submit"
  682. type="primary"
  683. onClick={(e) => {
  684. this.updateFun(0);
  685. }}
  686. >
  687. 审核通过
  688. </Button>
  689. <Button
  690. type="danger"
  691. style={{ marginRight: 20 }}
  692. onClick={(e) => {
  693. this.refuse();
  694. }}
  695. >
  696. 审核拒绝
  697. </Button>
  698. <Button
  699. className="set-submit"
  700. type="ghost"
  701. onClick={this.edithandleCancel}
  702. >
  703. 取消
  704. </Button>
  705. </FormItem>
  706. </div>
  707. </div>
  708. </Spin>
  709. </Form>
  710. </Modal>
  711. </div>
  712. </div>
  713. <Modal
  714. title="审核拒绝"
  715. visible={this.state.refuseVisible}
  716. onOk={this.refuseOk}
  717. onCancel={this.refuseCancel}
  718. >
  719. <div>
  720. <FormItem labelCol={{ span: 3 }} wrapperCol={{ span: 18 }} label="拒绝原因">
  721. <Input type="textarea" rows={4} value={this.state.refuseValue} placeholder="输入拒绝原因" onChange={(e)=>{this.setState({refuseValue:e.target.value})}}/>
  722. </FormItem>
  723. </div>
  724. </Modal>
  725. </div>
  726. );
  727. }
  728. })
  729. );
  730. export default BusinessProject;