index.jsx 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792
  1. import React, { Component } from "react";
  2. import {
  3. AutoComplete,
  4. Button,
  5. DatePicker,
  6. Input,
  7. message,
  8. Modal,
  9. Select,
  10. Spin,
  11. Table,
  12. Tabs,
  13. Tag,
  14. Tooltip,
  15. } from "antd";
  16. import { ShowModal, splitUrl, getClockState } from "@/tools";
  17. import { ChooseList } from "../../order/orderNew/chooseList";
  18. import $ from "jquery/src/ajax";
  19. import "./index.less";
  20. import moment from "moment";
  21. const { TabPane } = Tabs;
  22. const { RangePicker } = DatePicker;
  23. class PublicSummary extends Component {
  24. constructor(props) {
  25. super(props);
  26. this.state = {
  27. pageNo: 1,
  28. loading: false,
  29. changeList: undefined,
  30. selectedRowKeys: [],
  31. columns: [
  32. {
  33. title: "客户名称",
  34. dataIndex: "nickname",
  35. key: "nickname",
  36. width: 150,
  37. // fixed: "left",
  38. render: (text) => {
  39. return (
  40. <div>{text}</div>
  41. );
  42. },
  43. },
  44. {
  45. title: "标签",
  46. dataIndex: "status",
  47. key: "status",
  48. width: 200,
  49. render: (text, record) => (
  50. <div style={{ display: "flex", flexDirection: "row" }}>
  51. <Tag
  52. color={["#45b97c", "#69541b", "#f47920", "#8552a1", "#228fbd"][record.type]}
  53. >
  54. {
  55. record.type === 0
  56. ? "业务公出" : record.type === 1
  57. ? "技术公出" : record.type === 2
  58. ? "行政公出" : record.type === 3
  59. ? "技术协单" : record.type === 4
  60. ? "协单助手" : ""
  61. }
  62. </Tag>
  63. <Tag color={getClockState(text).color}>
  64. {getClockState(text).title}
  65. </Tag>
  66. {record.updateStatus == 1 && <Tag color="#1E90FF">改</Tag>}
  67. </div>
  68. ),
  69. },
  70. {
  71. title: "签单次数",
  72. dataIndex: "userName",
  73. key: "userName",
  74. },
  75. {
  76. title: "签单金额",
  77. dataIndex: "sname",
  78. key: "sname",
  79. },
  80. {
  81. title: "首次签单时间",
  82. dataIndex: "createTimes",
  83. key: "createTimes",
  84. },
  85. {
  86. title: "最新签单时间",
  87. dataIndex: "createTime",
  88. key: "createTime",
  89. },
  90. {
  91. title: "最新签单类型",
  92. dataIndex: "duration",
  93. key: "duration",
  94. },
  95. {
  96. title: "跟进人",
  97. dataIndex: "remarks",
  98. key: "remarks",
  99. },
  100. {
  101. title: "跟进部门",
  102. dataIndex: "plan",
  103. key: "plan",
  104. },
  105. {
  106. title: "跟进方式",
  107. dataIndex: "expectedEffect",
  108. key: "expectedEffect",
  109. },
  110. {
  111. title: "跟进说明",
  112. dataIndex: "supplement",
  113. key: "supplement",
  114. },
  115. {
  116. title: "次数",
  117. dataIndex: "nextPlan",
  118. key: "nextPlan",
  119. },
  120. {
  121. title: "最新跟进时间",
  122. dataIndex: "auditInfo",
  123. key: "auditInfo",
  124. },
  125. {
  126. title: "累计以前项目",
  127. dataIndex: "annexUrls",
  128. key: "annexUrls",
  129. },
  130. ],
  131. pagination: {
  132. defaultCurrent: 1,
  133. defaultPageSize: 10,
  134. showQuickJumper: true,
  135. pageSize: 10,
  136. onChange: function (page) {
  137. this.loadData(page);
  138. }.bind(this),
  139. showTotal: function (total) {
  140. return "共" + total + "条数据";
  141. },
  142. },
  143. dataSource: [],
  144. searchInfor: {}
  145. };
  146. this.loadData = this.loadData.bind(this);
  147. this.resetAll = this.resetAll.bind(this);
  148. this.changeList = this.changeList.bind(this);
  149. this.selectSuperId = this.selectSuperId.bind(this);
  150. this.supervisor = this.supervisor.bind(this);
  151. this.httpChange = this.httpChange.bind(this);
  152. this.blurChange = this.blurChange.bind(this);
  153. this.selectAuto = this.selectAuto.bind(this);
  154. this.getCustomer = this.getCustomer.bind(this);
  155. this.selectCustomerAuto = this.selectCustomerAuto.bind(this);
  156. this.httpCustomerChange = this.httpCustomerChange.bind(this);
  157. this.blurCustomerChange = this.blurCustomerChange.bind(this);
  158. this.exportExec = this.exportExec.bind(this);
  159. }
  160. //获取上级组织
  161. selectSuperId() {
  162. $.ajax({
  163. method: "get",
  164. dataType: "json",
  165. crossDomain: false,
  166. url: globalConfig.context + "/api/admin/organization/selectSuperId",
  167. data: {},
  168. success: function (data) {
  169. let theArr = [];
  170. if (data.error && data.error.length === 0) {
  171. for (let i = 0; i < data.data.length; i++) {
  172. let theData = data.data[i];
  173. theArr.push(
  174. <Select.Option value={theData.id} key={theData.id}>
  175. {theData.name}
  176. </Select.Option>
  177. );
  178. }
  179. this.setState({
  180. contactsOption: theArr,
  181. });
  182. } else {
  183. message.warning(data.error[0].message);
  184. }
  185. }.bind(this),
  186. }).always(
  187. function () {
  188. this.setState({
  189. loading: false,
  190. });
  191. }.bind(this)
  192. );
  193. }
  194. changeList(arr) {
  195. const newArr = [];
  196. this.state.columns.forEach((item) => {
  197. arr.forEach((val) => {
  198. if (val === item.title) {
  199. newArr.push(item);
  200. }
  201. });
  202. });
  203. this.setState({
  204. changeList: newArr,
  205. });
  206. }
  207. loadData(pageNo) {
  208. const { searchInfor, pagination } = this.state;
  209. this.setState({
  210. loading: true,
  211. });
  212. let datas = Object.assign(searchInfor, {
  213. pageNo: pageNo || 1,
  214. pageSize: pagination.pageSize,
  215. });
  216. $.ajax({
  217. method: "get",
  218. dataType: "json",
  219. crossDomain: false,
  220. url: globalConfig.context + "/api/admin/release/publicReleaseDtails",
  221. data: datas,
  222. success: function (data) {
  223. ShowModal(this);
  224. this.setState({
  225. loading: false,
  226. });
  227. if (data.error && data.error.length === 0) {
  228. if (data.data.list) {
  229. pagination.current = data.data.pageNo;
  230. pagination.total = data.data.totalCount;
  231. if (data.data && data.data.list && !data.data.list.length) {
  232. pagination.current = 0;
  233. pagination.total = 0;
  234. }
  235. this.setState({
  236. dataSource: data.data.list,
  237. pagination: this.state.pagination,
  238. pageNo: data.data.pageNo,
  239. });
  240. } else {
  241. this.setState({
  242. dataSource: data.data,
  243. pagination: false,
  244. });
  245. }
  246. } else {
  247. message.warning(data.error[0].message);
  248. }
  249. }.bind(this),
  250. }).always(
  251. function () {
  252. this.setState({
  253. loading: false,
  254. });
  255. }.bind(this)
  256. );
  257. }
  258. resetAll() {
  259. this.setState(
  260. {
  261. searchInfor: JSON.parse(JSON.stringify({})),
  262. selectedRowKeys: [],
  263. },
  264. () => {
  265. this.loadData();
  266. }
  267. );
  268. }
  269. supervisor(e) {
  270. $.ajax({
  271. method: "get",
  272. dataType: "json",
  273. crossDomain: false,
  274. url: globalConfig.context + "/api/admin/customer/listAdminByName",
  275. data: {
  276. adminName: e,
  277. status: "2",
  278. },
  279. success: function (data) {
  280. if (data.error && data.error.length === 0) {
  281. this.setState({
  282. customerArr: data.data,
  283. });
  284. } else {
  285. message.warning(data.error[0].message);
  286. }
  287. }.bind(this),
  288. }).always(function () { }.bind(this));
  289. }
  290. httpChange(e) {
  291. if (e.length >= 1) {
  292. this.supervisor(e);
  293. }
  294. this.setState({
  295. auto: e,
  296. });
  297. }
  298. selectAuto(value, options) {
  299. this.setState({
  300. auto: value,
  301. });
  302. }
  303. httpCustomerChange(e) {
  304. if (e.length >= 1) {
  305. this.getCustomer(e);
  306. }
  307. this.setState({
  308. customer: e,
  309. });
  310. }
  311. selectCustomerAuto(value, options) {
  312. this.setState({
  313. customer: value,
  314. });
  315. }
  316. getCustomer(e) {
  317. $.ajax({
  318. method: "get",
  319. dataType: "json",
  320. crossDomain: false,
  321. url: globalConfig.context + "/api/admin/customer/getUserByName",
  322. data: {
  323. name: e,
  324. },
  325. success: function (data) {
  326. if (data.error && data.error.length === 0) {
  327. this.setState({
  328. customerList: data.data,
  329. });
  330. } else {
  331. message.warning(data.error[0].message);
  332. }
  333. }.bind(this),
  334. }).always(function () { }.bind(this));
  335. }
  336. blurCustomerChange(e) {
  337. let theType = "";
  338. let contactLists = this.state.customerList || [];
  339. if (e) {
  340. contactLists.map(function (item) {
  341. if (item.name == e.toString()) {
  342. theType = item.id;
  343. }
  344. });
  345. }
  346. this.setState({
  347. theCustomerTypes: theType,
  348. });
  349. }
  350. blurChange(e) {
  351. let theType = "";
  352. let contactLists = this.state.customerArr || [];
  353. if (e) {
  354. contactLists.map(function (item) {
  355. if (item.name == e.toString()) {
  356. theType = item.id;
  357. }
  358. });
  359. }
  360. this.setState({
  361. theTypes: theType,
  362. });
  363. }
  364. componentWillMount() {
  365. this.loadData();
  366. this.selectSuperId();
  367. }
  368. // 导出Excel
  369. exportExec() {
  370. this.setState({
  371. exportPendingLoading: true,
  372. });
  373. message.config({
  374. duration: 20,
  375. });
  376. let loading = message.loading("下载中...");
  377. let data = this.state.searchInfor;
  378. $.ajax({
  379. method: "get",
  380. dataType: "json",
  381. crossDomain: false,
  382. url:
  383. globalConfig.context + "/api/admin/release/publicReleaseDtails/export",
  384. data,
  385. success: function (data) {
  386. if (data.error.length === 0) {
  387. this.download(data.data);
  388. } else {
  389. message.warning(data.error[0].message);
  390. }
  391. }.bind(this),
  392. }).always(
  393. function () {
  394. loading();
  395. this.setState({
  396. exportPendingLoading: false,
  397. });
  398. }.bind(this)
  399. );
  400. }
  401. // 下载
  402. download(fileName) {
  403. window.location.href =
  404. globalConfig.context + "/open/download?fileName=" + fileName;
  405. }
  406. // 选择行
  407. onSelectChange(selectedRowKeys, selectedRows) {
  408. this.setState({
  409. selectedRowKeys,
  410. selectedRows,
  411. });
  412. }
  413. // 关闭弹窗
  414. closeDesc() {
  415. this.setState({
  416. mvisible: "",
  417. });
  418. this.loadData(this.state.pageNo);
  419. }
  420. render() {
  421. const { searchInfor, selectedRowKeys } = this.state
  422. const dataSources = this.state.customerArr || [];
  423. const options = dataSources.map((group) => (
  424. <Select.Option key={group.id} value={group.name}>
  425. {group.name}
  426. </Select.Option>
  427. ));
  428. const customerList = this.state.customerList || [];
  429. const customerOptions = customerList.map((group) => (
  430. <Select.Option key={group.id} value={group.name}>
  431. {group.name}
  432. </Select.Option>
  433. ));
  434. const rowSelection = {
  435. hideDefaultSelections: true,
  436. selectedRowKeys,
  437. onChange: this.onSelectChange.bind(this),
  438. };
  439. return (
  440. <div>
  441. <div className="user-content">
  442. <div className="content-title">
  443. <span>签单客户汇总</span>
  444. </div>
  445. <Tabs defaultActiveKey="1" className="test">
  446. <TabPane tab="搜索" key="1">
  447. <div
  448. className="user-search"
  449. style={{
  450. marginTop: "10px",
  451. marginLeft: "10px",
  452. marginRight: "10px",
  453. }}
  454. >
  455. <span style={{ marginRight: "10px" }}>
  456. <AutoComplete
  457. className="certain-category-search"
  458. dropdownClassName="certain-category-search-dropdown"
  459. dropdownMatchSelectWidth={false}
  460. style={{ width: 160 }}
  461. dataSource={customerOptions}
  462. placeholder="输入客户名称"
  463. value={searchInfor.customer}
  464. onChange={this.httpCustomerChange}
  465. filterOption={true}
  466. onBlur={this.blurCustomerChange}
  467. onSelect={this.selectCustomerAuto}
  468. >
  469. <Input />
  470. </AutoComplete>
  471. </span>
  472. <span style={{ marginRight: "10px" }}>
  473. <AutoComplete
  474. className="certain-category-search"
  475. dropdownClassName="certain-category-search-dropdown"
  476. dropdownMatchSelectWidth={false}
  477. style={{ width: 160 }}
  478. dataSource={options}
  479. placeholder="跟单人姓名"
  480. value={searchInfor.auto}
  481. onChange={this.httpChange}
  482. filterOption={true}
  483. onBlur={this.blurChange}
  484. onSelect={this.selectAuto}
  485. >
  486. <Input />
  487. </AutoComplete>
  488. </span>
  489. <span style={{ marginRight: "10px" }}>
  490. <Select
  491. style={{ width: 160 }}
  492. placeholder="会员状态"
  493. value={searchInfor.projectType}
  494. onChange={(e) => {
  495. this.setState({
  496. searchInfor: Object.assign(searchInfor, {
  497. projectType: e,
  498. }),
  499. });
  500. }}
  501. >
  502. <Option value="1">会员</Option>
  503. <Option value="0">非会员</Option>
  504. </Select>
  505. </span>
  506. <span style={{ marginRight: "10px" }}>
  507. <Select
  508. style={{ width: 160 }}
  509. placeholder="有无退单"
  510. value={searchInfor.chargeback}
  511. onChange={(e) => {
  512. this.setState({
  513. searchInfor: Object.assign(searchInfor, {
  514. chargeback: e,
  515. }),
  516. });
  517. }}
  518. >
  519. <Option value="1">有退单</Option>
  520. <Option value="0">无退单</Option>
  521. </Select>
  522. </span>
  523. <span style={{ marginRight: "10px" }}>
  524. <Select
  525. style={{ width: 160 }}
  526. placeholder="选择跟进方式"
  527. value={searchInfor.followup}
  528. onChange={(e) => {
  529. this.setState({
  530. searchInfor: Object.assign(searchInfor, {
  531. followup: e,
  532. }),
  533. });
  534. }}
  535. >
  536. <Option value="1">公出打卡</Option>
  537. <Option value="0">其他跟进</Option>
  538. </Select>
  539. </span>
  540. <span style={{ marginRight: "10px" }}>
  541. <Select
  542. style={{ width: 160 }}
  543. placeholder="是否大客户"
  544. value={searchInfor.followup}
  545. onChange={(e) => {
  546. this.setState({
  547. searchInfor: Object.assign(searchInfor, {
  548. followup: e,
  549. }),
  550. });
  551. }}
  552. >
  553. <Option value="1">大客户</Option>
  554. <Option value="0">非大客户</Option>
  555. </Select>
  556. </span>
  557. <span style={{ marginRight: "10px" }}>
  558. <Select
  559. style={{ width: 160 }}
  560. placeholder="签单次数"
  561. value={searchInfor.followup}
  562. onChange={(e) => {
  563. this.setState({
  564. searchInfor: Object.assign(searchInfor, {
  565. followup: e,
  566. }),
  567. });
  568. }}
  569. >
  570. <Option value="1">1次</Option>
  571. <Option value="2">2次</Option>
  572. <Option value="3">3次</Option>
  573. <Option value="4">3次以上</Option>
  574. </Select>
  575. </span>
  576. <span style={{ marginRight: "10px" }}>
  577. <Select
  578. style={{ width: 160 }}
  579. placeholder="最新签单类型"
  580. value={searchInfor.followup}
  581. onChange={(e) => {
  582. this.setState({
  583. searchInfor: Object.assign(searchInfor, {
  584. followup: e,
  585. }),
  586. });
  587. }}
  588. >
  589. <Option value="1">高新复购</Option>
  590. <Option value="2">其他复购</Option>
  591. </Select>
  592. </span>
  593. <span style={{ marginRight: "10px" }}>
  594. <Select
  595. placeholder="选择跟进部门"
  596. style={{ width: 200 }}
  597. value={searchInfor.depId}
  598. onChange={(e) => {
  599. this.setState({
  600. searchInfor: Object.assign(searchInfor, {
  601. depId: e,
  602. }),
  603. });
  604. }}
  605. notFoundContent="未获取到上级组织列表"
  606. >
  607. {this.state.contactsOption}
  608. </Select>
  609. </span>
  610. <span style={{ marginRight: "10px" }}>
  611. <span style={{ marginRight: "5px", marginBottom: "10px" }}>
  612. 跟进时间 :
  613. </span>
  614. <RangePicker
  615. style={{ marginRight: "10px", marginBottom: "10px" }}
  616. value={[
  617. searchInfor.startDate
  618. ? moment(searchInfor.startDate)
  619. : null,
  620. searchInfor.endDate ? moment(searchInfor.endDate) : null,
  621. ]}
  622. onChange={(data, dataString) => {
  623. this.setState({
  624. searchInfor: Object.assign(searchInfor, {
  625. startDate: dataString[0],
  626. endDate: dataString[1],
  627. }),
  628. });
  629. }}
  630. />
  631. </span>
  632. <span style={{ marginRight: "10px" }}>
  633. <span style={{ marginRight: "5px", marginBottom: "10px" }}>
  634. 首次签单 :
  635. </span>
  636. <RangePicker
  637. style={{ marginRight: "10px", marginBottom: "10px" }}
  638. value={[
  639. searchInfor.startDate
  640. ? moment(searchInfor.startDate)
  641. : null,
  642. searchInfor.endDate ? moment(searchInfor.endDate) : null,
  643. ]}
  644. onChange={(data, dataString) => {
  645. this.setState({
  646. searchInfor: Object.assign(searchInfor, {
  647. startDate: dataString[0],
  648. endDate: dataString[1],
  649. }),
  650. });
  651. }}
  652. />
  653. </span>
  654. <span style={{ marginRight: "10px" }}>
  655. <span style={{ marginRight: "5px", marginBottom: "10px" }}>
  656. 最新签单 :
  657. </span>
  658. <RangePicker
  659. style={{ marginRight: "10px", marginBottom: "10px" }}
  660. value={[
  661. searchInfor.startDate
  662. ? moment(searchInfor.startDate)
  663. : null,
  664. searchInfor.endDate ? moment(searchInfor.endDate) : null,
  665. ]}
  666. onChange={(data, dataString) => {
  667. this.setState({
  668. searchInfor: Object.assign(searchInfor, {
  669. startDate: dataString[0],
  670. endDate: dataString[1],
  671. }),
  672. });
  673. }}
  674. />
  675. </span>
  676. <Button
  677. type="primary"
  678. onClick={() => {
  679. this.loadData();
  680. }}
  681. style={{ marginRight: "10px", marginBottom: "10px" }}
  682. >
  683. 搜索
  684. </Button>
  685. <Button
  686. onClick={this.resetAll}
  687. style={{ marginRight: "10px", marginBottom: "10px" }}
  688. >
  689. 重置
  690. </Button>
  691. </div>
  692. </TabPane>
  693. <TabPane tab="更改表格显示数据" key="2">
  694. <div style={{ marginLeft: 10 }}>
  695. <Spin spinning={this.state.loading}>
  696. <ChooseList
  697. columns={this.state.columns}
  698. changeFn={this.changeList}
  699. changeList={this.state.changeList}
  700. top={55}
  701. margin={11}
  702. />
  703. </Spin>
  704. </div>
  705. </TabPane>
  706. <TabPane tab="操作" key="3">
  707. <div style={{ float: "left" }}>
  708. <Button
  709. type="primary"
  710. loading={this.state.exportPendingLoading}
  711. onClick={this.exportExec}
  712. style={{ margin: 10 }}
  713. >
  714. 导出Excel
  715. </Button>
  716. </div>
  717. <div style={{ float: "left" }}>
  718. <Button
  719. type="primary"
  720. onClick={() => { }}
  721. style={{ margin: 10 }}
  722. disabled={this.state.selectedRowKeys.length !== 1}
  723. >
  724. 客户日志
  725. </Button>
  726. </div>
  727. <div style={{ float: "left" }}>
  728. <Button
  729. type="primary"
  730. onClick={() => {
  731. this.setState({
  732. mvisible: "channellog",
  733. });
  734. }}
  735. style={{ margin: 10 }}
  736. disabled={this.state.selectedRowKeys.length !== 1}
  737. >
  738. 转交日志
  739. </Button>
  740. </div>
  741. </TabPane>
  742. </Tabs>
  743. <div className="patent-table">
  744. <Spin spinning={this.state.loading}>
  745. <Table
  746. bordered
  747. size="middle"
  748. scroll={{ x: "120%" }}
  749. columns={
  750. this.state.changeList
  751. ? this.state.changeList
  752. : this.state.columns
  753. }
  754. dataSource={this.state.dataSource}
  755. pagination={this.state.pagination}
  756. rowSelection={rowSelection}
  757. />
  758. </Spin>
  759. </div>
  760. </div>
  761. </div>
  762. );
  763. }
  764. }
  765. export default PublicSummary;