businessProject.jsx 19 KB

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