|
@@ -0,0 +1,452 @@
|
|
|
+import React, { Component } from 'react';
|
|
|
+import { AutoComplete, Button, DatePicker, Input, Spin, Table, Select, message, Tabs, Tag, Tooltip, } from "antd";
|
|
|
+import $ from "jquery/src/ajax";
|
|
|
+import ShowModalDiv from "@/showModal.jsx";
|
|
|
+import { ChooseList } from "../../../order/orderNew/chooseList";
|
|
|
+import moment from "moment";
|
|
|
+import './index.less';
|
|
|
+
|
|
|
+const { TabPane } = Tabs;
|
|
|
+const { RangePicker } = DatePicker;
|
|
|
+class FinalFollowup extends Component {
|
|
|
+ constructor(props) {
|
|
|
+ super(props);
|
|
|
+ this.state = {
|
|
|
+ pageNo: 1,
|
|
|
+ totalPage: 0,
|
|
|
+ searchInfor: {},//查询条件
|
|
|
+ loading: false,
|
|
|
+ changeList: undefined,// 子组件改变的表格title数组
|
|
|
+ pagination: {
|
|
|
+ defaultCurrent: 1,
|
|
|
+ defaultPageSize: 10,
|
|
|
+ showQuickJumper: true,
|
|
|
+ pageSize: 10,
|
|
|
+ onChange: function (page) {
|
|
|
+ this.setState({
|
|
|
+ pageNo: page,
|
|
|
+ });
|
|
|
+ this.loadData(page);
|
|
|
+ }.bind(this),
|
|
|
+ showTotal: function (total) {
|
|
|
+ return "共" + total + "条数据";
|
|
|
+ },
|
|
|
+ },
|
|
|
+ columns: [
|
|
|
+ {
|
|
|
+ title: "客户名称",
|
|
|
+ dataIndex: "nickname",
|
|
|
+ key: "nickname",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "签单类型",
|
|
|
+ dataIndex: "shareType",
|
|
|
+ key: "shareType",
|
|
|
+ render: (text) => (
|
|
|
+ <div>{["私有", "公共", "签单", "外联", "渠道"][text]}</div>
|
|
|
+ )
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "跟单人",
|
|
|
+ dataIndex: "name",
|
|
|
+ key: "name",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "最新跟进时间",
|
|
|
+ dataIndex: "lastFollowTimeStr",
|
|
|
+ key: "lastFollowTimeStr",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "未跟进天数",
|
|
|
+ dataIndex: "days",
|
|
|
+ key: "days",
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ dataSource: [],
|
|
|
+ };
|
|
|
+ this.loadData = this.loadData.bind(this);
|
|
|
+ this.exportAll = this.exportAll.bind(this);
|
|
|
+ this.search = this.search.bind(this);
|
|
|
+ this.reset = this.reset.bind(this);
|
|
|
+ this.changeList = this.changeList.bind(this);
|
|
|
+ this.selectSuperId = this.selectSuperId.bind(this);
|
|
|
+ this.supervisor = this.supervisor.bind(this);
|
|
|
+ this.httpChange = this.httpChange.bind(this);
|
|
|
+ this.selectAuto = this.selectAuto.bind(this);
|
|
|
+ this.blurChange = this.blurChange.bind(this);
|
|
|
+ }
|
|
|
+
|
|
|
+ componentWillMount() {
|
|
|
+ this.loadData();
|
|
|
+ }
|
|
|
+
|
|
|
+ // 列表数据
|
|
|
+ loadData(pageNo, pageSize) {
|
|
|
+ const { searchInfor, pagination } = this.state
|
|
|
+ this.setState({
|
|
|
+ loading: true,
|
|
|
+ });
|
|
|
+ let datas = Object.assign(searchInfor, {
|
|
|
+ pageNo: pageNo || 1,
|
|
|
+ pageSize: pageSize || 10,
|
|
|
+ });
|
|
|
+ $.ajax({
|
|
|
+ method: "get",
|
|
|
+ dataType: "json",
|
|
|
+ crossDomain: false,
|
|
|
+ url: globalConfig.context + "/api/admin/customer/selectUserLastSign",
|
|
|
+ data: datas,
|
|
|
+ success: function (data) {
|
|
|
+ this.setState({
|
|
|
+ loading: false,
|
|
|
+ });
|
|
|
+ if (data.error && data.error.length === 0) {
|
|
|
+ if (data.data.list) {
|
|
|
+ pagination.current = data.data.pageNo;
|
|
|
+ pagination.total = data.data.totalCount;
|
|
|
+ if (data.data && data.data.list && !data.data.list.length) {
|
|
|
+ pagination.current = 0;
|
|
|
+ pagination.total = 0;
|
|
|
+ }
|
|
|
+ this.setState({
|
|
|
+ dataSource: data.data.list,
|
|
|
+ pagination: this.state.pagination,
|
|
|
+ pageNo: data.data.pageNo,
|
|
|
+ totalPage: data.data.totalPage,
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.setState({
|
|
|
+ dataSource: data.data,
|
|
|
+ pagination: false,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ message.warning(data.error[0].message);
|
|
|
+ }
|
|
|
+ }.bind(this),
|
|
|
+ }).always(
|
|
|
+ function () {
|
|
|
+ this.setState({
|
|
|
+ loading: false,
|
|
|
+ });
|
|
|
+ }.bind(this)
|
|
|
+ );
|
|
|
+ }
|
|
|
+
|
|
|
+ // 更改表格显示数据
|
|
|
+ changeList(arr) {
|
|
|
+ const newArr = [];
|
|
|
+ this.state.columns.forEach((item) => {
|
|
|
+ arr.forEach((val) => {
|
|
|
+ if (val === item.title) {
|
|
|
+ newArr.push(item);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ this.setState({
|
|
|
+ changeList: newArr,
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ // 导出当前列表
|
|
|
+ exportAll() {
|
|
|
+ message.config({
|
|
|
+ duration: 20,
|
|
|
+ });
|
|
|
+ let loading = message.loading("下载中...");
|
|
|
+ this.setState({
|
|
|
+ exportPendingLoading: true,
|
|
|
+ });
|
|
|
+ let obj1 = JSON.parse(JSON.stringify(this.state.searchInfor));
|
|
|
+ // data = Object.assign(data, obj1);
|
|
|
+ $.ajax({
|
|
|
+ method: "get",
|
|
|
+ dataType: "json",
|
|
|
+ crossDomain: false,
|
|
|
+ url: "/api/admin/customer/selectUserLastSign/export",
|
|
|
+ data: obj1,
|
|
|
+ success: function (data) {
|
|
|
+ if (data.error.length === 0) {
|
|
|
+ this.download(data.data);
|
|
|
+ } else {
|
|
|
+ message.warning(data.error[0].message);
|
|
|
+ }
|
|
|
+ }.bind(this),
|
|
|
+ }).always(
|
|
|
+ function () {
|
|
|
+ loading();
|
|
|
+ this.setState({
|
|
|
+ exportPendingLoading: false,
|
|
|
+ });
|
|
|
+ }.bind(this)
|
|
|
+ );
|
|
|
+ }
|
|
|
+
|
|
|
+ // 下载
|
|
|
+ download(fileName) {
|
|
|
+ window.location.href =
|
|
|
+ globalConfig.context + "/open/download?fileName=" + fileName;
|
|
|
+ }
|
|
|
+
|
|
|
+ //获取上级组织
|
|
|
+ selectSuperId() {
|
|
|
+ $.ajax({
|
|
|
+ method: "get",
|
|
|
+ dataType: "json",
|
|
|
+ crossDomain: false,
|
|
|
+ url: globalConfig.context + "/api/admin/organization/selectSuperId",
|
|
|
+ data: {},
|
|
|
+ success: function (data) {
|
|
|
+ let theArr = [];
|
|
|
+ if (data.error && data.error.length === 0) {
|
|
|
+ for (let i = 0; i < data.data.length; i++) {
|
|
|
+ let theData = data.data[i];
|
|
|
+ theArr.push(
|
|
|
+ <Select.Option value={theData.id} key={theData.id}>
|
|
|
+ {theData.name}
|
|
|
+ </Select.Option>
|
|
|
+ );
|
|
|
+ }
|
|
|
+ this.setState({
|
|
|
+ contactsOption: theArr,
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ message.warning(data.error[0].message);
|
|
|
+ }
|
|
|
+ }.bind(this),
|
|
|
+ }).always(
|
|
|
+ function () {
|
|
|
+ this.setState({
|
|
|
+ // loading: false,
|
|
|
+ });
|
|
|
+ }.bind(this)
|
|
|
+ );
|
|
|
+ }
|
|
|
+
|
|
|
+ supervisor(e) {
|
|
|
+ $.ajax({
|
|
|
+ method: "get",
|
|
|
+ dataType: "json",
|
|
|
+ crossDomain: false,
|
|
|
+ url: globalConfig.context + "/api/admin/customer/listAdminByName",
|
|
|
+ data: {
|
|
|
+ adminName: e,
|
|
|
+ status: "2",
|
|
|
+ },
|
|
|
+ success: function (data) {
|
|
|
+ if (data.error && data.error.length === 0) {
|
|
|
+ this.setState({
|
|
|
+ customerArr: data.data,
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ message.warning(data.error[0].message);
|
|
|
+ }
|
|
|
+ }.bind(this),
|
|
|
+ }).always(function () { }.bind(this));
|
|
|
+ }
|
|
|
+
|
|
|
+ httpChange(e) {
|
|
|
+ if (e.length >= 1) {
|
|
|
+ this.supervisor(e);
|
|
|
+ }
|
|
|
+ this.setState({
|
|
|
+ followAname: e,
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ selectAuto(value, options) {
|
|
|
+ this.setState({
|
|
|
+ followAname: value,
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ blurChange(e) {
|
|
|
+ const { searchInfor } = this.state
|
|
|
+ let theType = undefined;
|
|
|
+ let contactLists = this.state.customerArr || [];
|
|
|
+ if (e) {
|
|
|
+ contactLists.map(function (item) {
|
|
|
+ if (item.name == e.toString()) {
|
|
|
+ theType = item.id;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ this.setState({
|
|
|
+ searchInfor: Object.assign(searchInfor, {
|
|
|
+ aid: theType,
|
|
|
+ }),
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ // 搜索
|
|
|
+ search() {
|
|
|
+ this.setState({
|
|
|
+ selectedRowKeys: []
|
|
|
+ })
|
|
|
+ this.loadData();
|
|
|
+ }
|
|
|
+
|
|
|
+ // 重置
|
|
|
+ reset() {
|
|
|
+ this.setState({
|
|
|
+ searchInfor: JSON.parse(JSON.stringify({})),
|
|
|
+ followAname: undefined
|
|
|
+ }, () => {
|
|
|
+ this.loadData();
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ render() {
|
|
|
+ const { searchInfor } = this.state
|
|
|
+ const dataSources = this.state.customerArr || [];
|
|
|
+ const options = dataSources.map((group) => (
|
|
|
+ <Select.Option key={group.id} value={group.name}>
|
|
|
+ {group.name}
|
|
|
+ </Select.Option>
|
|
|
+ ));
|
|
|
+ return (
|
|
|
+ <div className="user-content finalfollowup">
|
|
|
+ <ShowModalDiv ShowModal={this.state.showModal} />
|
|
|
+ <div className="content-title" style={{ marginBottom: 10 }}>
|
|
|
+ <span style={{ fontWeight: 900, fontSize: 16 }}>客户最后跟进表</span>
|
|
|
+ </div>
|
|
|
+ <Tabs defaultActiveKey="1">
|
|
|
+ <TabPane tab="搜索" key="1">
|
|
|
+ <div
|
|
|
+ className="user-search"
|
|
|
+ style={{
|
|
|
+ marginTop: "10px",
|
|
|
+ marginLeft: "10px",
|
|
|
+ marginRight: "10px",
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <span style={{ marginRight: "10px" }}>
|
|
|
+ <Input
|
|
|
+ style={{ width: 160 }}
|
|
|
+ placeholder="输入客户名称"
|
|
|
+ value={searchInfor.nickname}
|
|
|
+ onChange={e => {
|
|
|
+ this.setState({
|
|
|
+ searchInfor: Object.assign(searchInfor, {
|
|
|
+ nickname: e.target.value,
|
|
|
+ }),
|
|
|
+ });
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ </span>
|
|
|
+ <span style={{ marginRight: "10px" }}>
|
|
|
+ <AutoComplete
|
|
|
+ className="certain-category-search"
|
|
|
+ dropdownClassName="certain-category-search-dropdown"
|
|
|
+ dropdownMatchSelectWidth={false}
|
|
|
+ style={{ width: 160 }}
|
|
|
+ dataSource={options}
|
|
|
+ placeholder="跟进人姓名"
|
|
|
+ value={this.state.followAname}
|
|
|
+ onChange={this.httpChange}
|
|
|
+ filterOption={true}
|
|
|
+ onBlur={this.blurChange}
|
|
|
+ onSelect={this.selectAuto}
|
|
|
+ >
|
|
|
+ <Input />
|
|
|
+ </AutoComplete>
|
|
|
+ </span>
|
|
|
+
|
|
|
+ <span style={{ marginRight: "10px" }}>
|
|
|
+ <Select
|
|
|
+ style={{ width: 120 }}
|
|
|
+ placeholder="类型"
|
|
|
+ value={searchInfor.shareType}
|
|
|
+ onChange={(e) => {
|
|
|
+ this.setState({
|
|
|
+ searchInfor: Object.assign(searchInfor, {
|
|
|
+ shareType: e,
|
|
|
+ }),
|
|
|
+ });
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <Option value={0}>私有</Option>
|
|
|
+ <Option value={2}>签单</Option>
|
|
|
+ <Option value={3}>外联</Option>
|
|
|
+ <Option value={4}>渠道</Option>
|
|
|
+ </Select>
|
|
|
+ </span>
|
|
|
+
|
|
|
+ <span style={{ marginRight: "10px" }}>
|
|
|
+ <Select
|
|
|
+ style={{ width: 120 }}
|
|
|
+ placeholder="未跟进天数"
|
|
|
+ value={searchInfor.daysType}
|
|
|
+ onChange={(e) => {
|
|
|
+ this.setState({
|
|
|
+ searchInfor: Object.assign(searchInfor, {
|
|
|
+ daysType: e,
|
|
|
+ }),
|
|
|
+ });
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <Option value={0}>30天</Option>
|
|
|
+ <Option value={1}>60天</Option>
|
|
|
+ <Option value={2}>90天</Option>
|
|
|
+ <Option value={3}>180天</Option>
|
|
|
+ <Option value={4}>1年</Option>
|
|
|
+ <Option value={5}>2年</Option>
|
|
|
+ </Select>
|
|
|
+ </span>
|
|
|
+
|
|
|
+ <Button
|
|
|
+ type="primary"
|
|
|
+ onClick={this.search}
|
|
|
+ style={{ marginRight: "10px", marginBottom: "10px" }}
|
|
|
+ >
|
|
|
+ 搜索
|
|
|
+ </Button>
|
|
|
+ <Button
|
|
|
+ onClick={this.reset}
|
|
|
+ style={{ marginRight: "10px", marginBottom: "10px" }}
|
|
|
+ >
|
|
|
+ 重置
|
|
|
+ </Button>
|
|
|
+ </div>
|
|
|
+ </TabPane>
|
|
|
+ <TabPane tab="更改表格显示数据" key="2">
|
|
|
+ <div style={{ marginLeft: 10 }}>
|
|
|
+ <ChooseList
|
|
|
+ columns={this.state.columns}
|
|
|
+ changeFn={this.changeList}
|
|
|
+ changeList={this.state.changeList}
|
|
|
+ top={55}
|
|
|
+ margin={11}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </TabPane>
|
|
|
+ <TabPane tab="导出Excel" key="3">
|
|
|
+ <Button
|
|
|
+ type="primary"
|
|
|
+ style={{ margin: "11px 0px 10px 10px" }}
|
|
|
+ onClick={this.exportAll}
|
|
|
+ >
|
|
|
+ 导出当前列表
|
|
|
+ </Button>
|
|
|
+ </TabPane>
|
|
|
+ </Tabs>
|
|
|
+ <div className="patent-table">
|
|
|
+ <Spin spinning={this.state.loading}>
|
|
|
+ <Table
|
|
|
+ bordered
|
|
|
+ columns={
|
|
|
+ this.state.changeList == undefined
|
|
|
+ ? this.state.columns
|
|
|
+ : this.state.changeList
|
|
|
+ }
|
|
|
+ dataSource={this.state.dataSource}
|
|
|
+ pagination={this.state.pagination}
|
|
|
+ />
|
|
|
+ </Spin>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+export default FinalFollowup;
|