kede-client/js/component/manageCenter/customer/managementFollow/followUpSummary/index.jsx

import React,{Component} from "react";
import {
    Button,
    DatePicker,
    Form,
    Input,
    message,
    Select,
    Spin,
    Table,
    Tabs,
    Tooltip
} from "antd";
import moment from "moment";
import ShowModalDiv from "@/showModal.jsx";
import {ShowModal,getContactType} from "@/tools.js";
import {ChooseList} from "../../../order/orderNew/chooseList";
import $ from "jquery/src/ajax";
import IntentionDetail from "../../NEW/intentionCustomer/intentionDetail/intentionDetail";
import { getProvince } from '@/NewDicProvinceList';

const {TabPane} = Tabs;
const { RangePicker } = DatePicker;

class FollowUpSummary extends Component{
    constructor(props) {
        super(props);
        this.state={
            loading:false,
            changeList:[],
            columns:[
                {
                    title: "客户名称",
                    dataIndex: "nickname",
                    key: "nickname",
                    render: text => {
                        return (
                            <Tooltip title={text}>
                                <div style={{
                                    maxWidth:'150px',
                                    overflow:'hidden',
                                    textOverflow: "ellipsis",
                                    whiteSpace:'nowrap',
                                }}>{text}</div>
                            </Tooltip>
                        )
                    }
                },
                {
                    title: '客户类型',
                    dataIndex: 'shareType',
                    key: 'shareType',
                    render: text => {
                    //    0-私有 1-公共 2 签单 3渠道
                        return (
                            text === 0 ? '私有客户' :
                                text === 1 ? '公共客户' :
                                    text === 2 ? '签单客户' :
                                        text === 3 ? '渠道客户' : ''
                        )
                    }

                },
                {
                    title: '客户初始时间',
                    dataIndex: 'startTimes',
                    key: 'startTimes',
                },
                {
                    title: "跟进方式",
                    dataIndex: "contactType",
                    key: "contactType",
                    render: (text) => {
                        return getContactType(text);
                    },
                },
                {
                    title: "跟进人",
                    dataIndex: "followName",
                    key: "followName",
                },
                {
                    title: "跟进部门",
                    dataIndex: "followDep",
                    key: "followDep",
                },
                {
                    title: "跟进说明",
                    dataIndex: "result",
                    key: "result",
                    width: 150,
                    render: (text, record) => {
                        return (
                            <Tooltip placement="topLeft" title={<div style={{wordBreak:"break-all"}}>{text}</div>}>
                                <div style={{
                                    cursor:"pointer",
                                    width: '150px',
                                    whiteSpace: 'nowrap',
                                    overflow: 'hidden',
                                    textOverflow: 'ellipsis',
                                }}>
                                  {text}
                                </div>
                            </Tooltip>
                        );
                    },
                },
                {
                    title: "跟进时间",
                    dataIndex: "followTimes",
                    key: "followTimes",
                },
                {
                    title: "次数",
                    dataIndex: "followCount",
                    key: "followCount",
                },
                {
                    title: "指导意见",
                    dataIndex: "guidance",
                    key: "guidance",
                    width:150,
                    render: (text, record) => {
                        return (
                            <Tooltip placement="topLeft" title={<div style={{wordBreak:"break-all"}}>{(record.guidanceName ? '('+record.guidanceName+')' : '') + text}</div>}>
                                <div style={{
                                    cursor:"pointer",
                                    width: '150px',
                                    whiteSpace: 'nowrap',
                                    overflow: 'hidden',
                                    textOverflow: 'ellipsis',
                                }}>
                                    {record.guidanceName ? '('+record.guidanceName+')' : null}
                                    {text}
                                </div>
                            </Tooltip>
                        );
                    },
                },
                {
                    title: "指导时间",
                    dataIndex: "guidanceTimes",
                    key: "guidanceTimes",
                    render: (text) => {
                        return (
                            <span>{text ? text : ''}</span>
                        )
                    }
                }
            ],
            dataSource:[],
            pagination: {
                defaultCurrent: 1,
                defaultPageSize: 10,
                showQuickJumper: true,
                pageSize: 10,
                onChange: function (page) {
                    this.loadData(page);
                }.bind(this),
                showTotal: function (total) {
                    return "共" + total + "条数据";
                },
            },


            releaseDate:[],
            releaseDate1:[],
            releaseDate2:[],

            userName:undefined,
            followName:undefined,
            userType:undefined,
            contactType:undefined,
            depId: undefined,

            shiroType: props.shiroType,
        }
        this.reset = this.reset.bind(this);
        this.loadData = this.loadData.bind(this);
        this.selectSuperId = this.selectSuperId.bind(this);
        this.category = this.category.bind(this);
        this.closeDesc = this.closeDesc.bind(this);
        this.tableRowClick = this.tableRowClick.bind(this);
        this.export = this.export.bind(this);
    }

    componentWillReceiveProps(prevProps) {
        if(prevProps.shiroType !== this.state.shiroType){
            this.setState({
                shiroType:prevProps.shiroType
            },()=>{
                this.reset();
                this.selectSuperId();
            })
        }
    }

    componentDidMount() {
        this.loadData();
        this.selectSuperId();
    }

    loadData(pageNo) {
        this.setState({
            loading: true,
        });
        let api = '/api/admin/userFollowList';
        $.ajax({
            method: "get",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + api,
            data: {
                pageNo: pageNo || 1,
                pageSize: this.state.pagination.pageSize,
                userName:this.state.userName || undefined,
                followName: this.state.followName || undefined,
                userType:isNaN(parseInt(this.state.userType)) ? undefined : this.state.userType,
                contactType: isNaN(parseInt(this.state.contactType)) ? undefined : this.state.contactType,
                depId: this.state.depId || undefined,
                followStartTime:this.state.releaseDate[0] ? this.state.releaseDate[0] : undefined,
                followEndTime:this.state.releaseDate[1] ? this.state.releaseDate[1] : undefined,
                createStartTime:this.state.releaseDate1[0] ? this.state.releaseDate1[0] : undefined,
                createEndTime:this.state.releaseDate1[1] ? this.state.releaseDate1[1] : undefined,
                guidanceStartTime:this.state.releaseDate2[0] ? this.state.releaseDate2[0] : undefined,
                guidanceEndTime:this.state.releaseDate2[1] ? this.state.releaseDate2[1] : undefined,

                shiroType:this.state.shiroType
            },
            success: function (data) {
                ShowModal(this);
                if (data.error.length === 0) {
                    let theArr = [];
                    for (let i = 0; i < data.data.list.length; i++) {
                        let thisdata = data.data.list[i];
                        let diqu =getProvince(thisdata.province,thisdata.city,thisdata.area)
                        thisdata.key = i;
                        thisdata.lastFollowTime = thisdata.lastFollowTime && thisdata.lastFollowTime.split(" ")[0];
                        thisdata.transferTime= thisdata.transferTime && thisdata.transferTime.split(" ")[0];
                        thisdata.surplusFollowTime= thisdata.surplusFollowTime && thisdata.surplusFollowTime.split(" ")[0];
                        thisdata.surplusSignTime= thisdata.surplusSignTime && thisdata.surplusSignTime.split(" ")[0];
                        thisdata.locationProvince= diqu;
                        thisdata.uid = thisdata.id;
                        theArr.push(thisdata);
                    }
                    this.state.pagination.current = data.data.pageNo;
                    this.state.pagination.total = data.data.totalCount;
                    this.setState({
                        pageNo: data.data.pageNo,
                        dataSource: theArr,
                        pagination: this.state.pagination,
                    });
                }else{
                    message.warning(data.error[0].message);
                }
            }.bind(this),
        }).always(
            function () {
                this.setState({
                    loading: false,
                });
            }.bind(this)
        );
    };

    selectSuperId() {
        this.state.data = []
        $.ajax({
            method: "get",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + "/api/admin/organization/selectSuperId",
            data:{},
            success: function (data) {
                if(data.error.length === 0){
                    let theArr = [];
                    for(let i=0;i<data.data.length;i++){
                        let theData = data.data[i];
                        theArr.push(
                            <Select.Option value={theData.name} key={theData.name}>{theData.name}</Select.Option>
                        );
                    }
                    this.setState({
                        contactsOption: theArr,
                    });
                }else{
                    message.warning(data.error[0].message);
                }
            }.bind(this),
        }).always(function () {}.bind(this));
    }

    //品类数据获取
    category() {
        $.ajax({
            method: "get",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + "/api/admin/Varieties/getSuperList",
            data: {},
            success: function (data) {
                let thedata = data.data;
                let theArr = [];
                if (!thedata) {
                    if (data.error && data.error.length) {
                        message.warning(data.error[0].message);
                    }
                } else {
                    thedata.map(function (item, index) {
                        theArr.push({
                            value: item.id,
                            key: item.cname,
                        });
                    });
                }
                this.setState({
                    categoryArr: theArr,
                });
            }.bind(this),
        });
    }

    tableRowClick(record){
        this.category();
        this.setState({
            rowData: record,
            modalVisible:true,
            modalName: record.nickname,
        })
    }

    closeDesc(e, s) {
        this.setState({
            visitModul: e,
            modalVisible: e,
            showDesc: e,
            tabsKey: '',
        })
        if (s) {
            this.loadData(this.state.pageNo);
        }
    }

    export(){
        this.setState({
            exportExecLoading: true
        })
        let loading = message.loading('加载中...');
        let data = {
            userName:this.state.userName || undefined,
            followName:this.state.followName || undefined,
            userType:isNaN(parseInt(this.state.userType)) ? undefined : this.state.userType,
            contactType: isNaN(parseInt(this.state.contactType)) ? undefined : this.state.contactType,
            depId:this.state.depId || undefined,
            followStartTime:this.state.releaseDate[0] ? this.state.releaseDate[0] : undefined,
            followEndTime:this.state.releaseDate[1] ? this.state.releaseDate[1] : undefined,
            createStartTime:this.state.releaseDate1[0] ? this.state.releaseDate1[0] : undefined,
            createEndTime:this.state.releaseDate1[1] ? this.state.releaseDate1[1] : undefined,
            guidanceStartTime:this.state.releaseDate2[0] ? this.state.releaseDate2[0] : undefined,
            guidanceEndTime:this.state.releaseDate2[1] ? this.state.releaseDate2[1] : undefined,

            shiroType:this.state.shiroType
        };
        for (let i in data){
            if(typeof data[i] === "undefined"){
                delete data[i]
            }
        }
        $.ajax({
            method: "get",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + "/api/admin/userFollowListExport",
            data,
            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({
                exportExecLoading: false
            })
        }.bind(this));
    }

    download(fileName){
        window.location.href = globalConfig.context + "/open/download?fileName=" + fileName
    }

    reset(){
        this.setState({
            userName:undefined,
            followName:undefined,
            userType:undefined,
            contactType:undefined,
            depId:undefined,

            releaseDate:[],
            releaseDate1:[],
            releaseDate2:[],
        },()=>{
            this.loadData();
        })
    }

    render() {
        return (
            <div className="user-content">
                <ShowModalDiv ShowModal={this.state.showModal} />
                <div className="content-title">
                    <span>客户跟进汇总</span>
                </div>
                <Tabs defaultActiveKey="1" className="test">
                    <TabPane tab="搜索" key="1">
                        <div className="user-search">
                            <Form layout="inline">
                                <Form.Item style={{marginTop: '10px'}}>
                                    <Input
                                        placeholder="客户名称"
                                        value={this.state.userName}
                                        style={{ width: 150, marginRight: 10 }}
                                        onChange={(e) => {
                                            this.setState({ userName: e.target.value });
                                        }}
                                    />
                                </Form.Item>
                                <Form.Item style={{marginTop: '10px'}}>
                                    <Input
                                        placeholder="跟进人名称"
                                        value={this.state.followName}
                                        style={{ width: 150, marginRight: 10 }}
                                        onChange={(e) => {
                                            this.setState({ followName: e.target.value });
                                        }}
                                    />
                                </Form.Item>
                                <Form.Item>
                                    <Select
                                        placeholder="选择客户类型"
                                        style={{ width: 100, marginRight: 10}}
                                        value={this.state.userType}
                                        onChange={
                                            (e) => {
                                                this.setState({ userType: e })
                                            }}
                                    >
                                        {/*0所有 1私有客户2 公共客户 3签单客户4渠道客户*/}
                                        <Select.Option value={0}>所有</Select.Option>
                                        <Select.Option value={1}>私有客户</Select.Option>
                                        <Select.Option value={2}>公共客户</Select.Option>
                                        <Select.Option value={3}>签单客户</Select.Option>
                                        <Select.Option value={4}>渠道客户</Select.Option>
                                    </Select>
                                </Form.Item>
                                <Form.Item>
                                    <Select
                                        placeholder="选择跟进方式"
                                        style={{ width: 100, marginRight: 10}}
                                        value={this.state.contactType}
                                        onChange={(e) => { this.setState({ contactType: e }) }}
                                    >
                                        <Select.Option value={0}>外出</Select.Option>
                                        <Select.Option value={1}>电话</Select.Option>
                                        <Select.Option value={2}>QQ</Select.Option>
                                        <Select.Option value={3}>微信</Select.Option>
                                        <Select.Option value={4}>邮箱</Select.Option>
                                        <Select.Option value={5}>公出打卡</Select.Option>
                                    </Select>
                                </Form.Item>
                                <Form.Item>
                                    <Select
                                        placeholder="选择跟进部门"
                                        style={{ width:'200px',marginRight:'10px' }}
                                        value={this.state.depId}
                                        onChange={
                                            (e) => {
                                                this.setState({ depId: e })
                                            }}
                                        notFoundContent="未获取到上级组织列表"
                                    >
                                        {this.state.contactsOption}
                                    </Select>
                                </Form.Item>
                                <Form.Item label='跟进时间:' style={{marginTop: '10px'}}>
                                    <RangePicker
                                        style={{ marginRight:'10px' }}
                                        value={[
                                            this.state.releaseDate[0]
                                                ? moment(this.state.releaseDate[0])
                                                : null,
                                            this.state.releaseDate[1]
                                                ? moment(this.state.releaseDate[1])
                                                : null,
                                        ]}
                                        onChange={(data, dataString) => {
                                            this.setState({ releaseDate: dataString });
                                        }}
                                    />
                                </Form.Item>
                                <Form.Item label='客户初始时间:' style={{marginTop: '10px'}}>
                                    <RangePicker
                                        style={{ marginRight:'10px' }}
                                        value={[
                                            this.state.releaseDate1[0]
                                                ? moment(this.state.releaseDate1[0])
                                                : null,
                                            this.state.releaseDate1[1]
                                                ? moment(this.state.releaseDate1[1])
                                                : null,
                                        ]}
                                        onChange={(data, dataString) => {
                                            this.setState({ releaseDate1: dataString });
                                        }}
                                    />
                                </Form.Item>
                                <Form.Item label='指导时间:' style={{marginTop: '10px'}}>
                                    <RangePicker
                                        style={{ marginRight:'10px' }}
                                        value={[
                                            this.state.releaseDate2[0]
                                                ? moment(this.state.releaseDate2[0])
                                                : null,
                                            this.state.releaseDate2[1]
                                                ? moment(this.state.releaseDate2[1])
                                                : null,
                                        ]}
                                        onChange={(data, dataString) => {
                                            this.setState({ releaseDate2: dataString });
                                        }}
                                    />
                                </Form.Item>
                            </Form>
                            <Button
                                type="primary"
                                style={{ marginLeft: "10px", marginRight: 10 }}
                                onClick={()=>{
                                    this.loadData();
                                }}
                            >
                                搜索
                            </Button>
                            <Button onClick={this.reset}>重置</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="导出" key="3">
                        <Button style={{ float: "left",margin:10 }} onClick={this.export}>
                            导出excel
                        </Button>
                    </TabPane>
                </Tabs>
                <div className="patent-table">
                    <Spin spinning={this.state.loading}>
                        <Table
                            columns={
                                this.state.changeList.length
                                    ? this.state.changeList
                                    : this.state.columns
                            }
                            dataSource={this.state.dataSource}
                            pagination={this.state.pagination}
                            onRowClick={this.tableRowClick}
                            style={{
                                cursor: 'pointer',
                            }}
                        />
                    </Spin>
                </div>
                <IntentionDetail
                    isCustomerAdmin={this.props.isCustomerAdmin}
                    categoryArr={this.state.categoryArr}
                    IntentionData={this.state.rowData}
                    modalVisible={this.state.modalVisible}
                    isGuidanceLv={this.props.isGuidanceLv}
                    isEditGuidanceLv={this.props.isEditGuidanceLv}
                    name={this.state.modalName}
                    closeDesc={this.closeDesc}
                />
            </div>
        )
    }
}

export default FollowUpSummary;