kede-client/js/component/manageCenter/customerService/administration/followUp.jsx

import React,{Component} from "react";
import {Button, DatePicker, Icon, Input, message, Select, Spin, Table, Tabs, Tag, Tooltip} from "antd";
import {ChooseList} from "../../order/orderNew/chooseList";
import FollowUpDetails from './followUpDetails';
import CorrespondingDetails from './correspondingDetails';
import OrderItemStatus from '../../../../component/common/orderItemStatus';
import $ from "jquery";

import {ShowModal} from "@/tools";
import ShowModalDiv from "@/showModal.jsx";
import moment from "moment";

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

class FollowUp extends Component{
    constructor(props) {
        super(props);
        this.state={
            columns:[
                {
                    title: "合同编号",
                    dataIndex: "contractNo",
                    key: "contractNo",
                    width: 120,
                    fixed:'left',
                },
                {
                    title: "订单编号",
                    dataIndex: "orderNo",
                    key: "orderNo",
                    width: 140,
                    fixed:'left',
                },
                {
                    title: "状态",
                    dataIndex: "deleteSign",
                    key: "deleteSign",
                    width:80,
                    fixed:'left',
                    render: (text) => {
                        //0=正常， 1=作废， 2=锁定， 3=变更中
                        return <div>
                            <OrderItemStatus deleteSign={text}/>
                        </div>
                    }
                },
                {
                    title: "订单部门",
                    dataIndex: "depName",
                    key: "depName",
                    width: 160,
                    fixed:'left',
                },
                {
                    title: "客户名称",
                    dataIndex: "userName",
                    key: "userName",
                    width:150,
                    fixed:'left',
                    render: text => {
                        return (
                            <Tooltip title={text}>
                                <div style={{
                                    maxWidth:'150px',
                                    overflow:'hidden',
                                    textOverflow: "ellipsis",
                                    whiteSpace:'nowrap',
                                }}>{text}</div>
                            </Tooltip>
                        )
                    }
                },
                {
                    title: "合同签订时间",
                    dataIndex: "signTimes",
                    key: "signTimes",
                },
                {
                    title: "下单时间",
                    dataIndex: "orderTimes",
                    key: "orderTimes",
                },
                {
                    title: "申报项目",
                    dataIndex: "projects",
                    key: "projects",
                    width: 80,
                    render: (text) => {
                        return (
                            <Tooltip placement="topLeft" title={text}>
                                <div style={{
                                    maxWidth:'80px',
                                    overflow:'hidden',
                                    textOverflow: "ellipsis",
                                    whiteSpace:'nowrap',
                                }}>{text}</div>
                            </Tooltip>
                        )
                    }
                },
                {
                    title: "咨询师",
                    dataIndex: "consultants",
                    key: "consultants",
                    width: 80,
                    render: (text) => {
                        return (
                            <Tooltip placement="topLeft" title={text}>
                                <div style={{
                                    maxWidth:'80px',
                                    overflow:'hidden',
                                    textOverflow: "ellipsis",
                                    whiteSpace:'nowrap',
                                }}>{text}</div>
                            </Tooltip>
                        )
                    }
                },
                {
                    title: "申报批次",
                    dataIndex: "declareBatchs",
                    key: "declareBatchs",
                    width: 80,
                    render: (text) => {
                        return (
                            <Tooltip placement="topLeft" title={text}>
                                <div style={{
                                    maxWidth:'80px',
                                    overflow:'hidden',
                                    textOverflow: "ellipsis",
                                    whiteSpace:'nowrap',
                                }}>{text}</div>
                            </Tooltip>
                        )
                    }
                },
                {
                    title: "证书编号",
                    dataIndex: "certificationNos",
                    key: "certificationNos",
                    width: 80,
                    render: (text) => {
                        return (
                            <Tooltip placement="topLeft" title={text}>
                                <div style={{
                                    maxWidth:'80px',
                                    overflow:'hidden',
                                    textOverflow: "ellipsis",
                                    whiteSpace:'nowrap',
                                }}>{text}</div>
                            </Tooltip>
                        )
                    }
                },
                {
                    title: "客服最新跟进",
                    dataIndex: "newTimes",
                    key: "newTimes",
                },
                {
                    title: "跟进客服",
                    dataIndex: "adminName",
                    key: "adminName",
                },
                {
                    title: "是否已添微信",
                    dataIndex: "addWechat",
                    key: "addWechat",
                    width: 100,
                    render: (text,record) => {
                        let str = text === 1 ? '是('+record.wechat+')' : text === 0 ? '否' : '';
                        return (
                            <Tooltip placement="topLeft" title={str}>
                                <div style={{
                                    maxWidth:'100px',
                                    overflow:'hidden',
                                    textOverflow: "ellipsis",
                                    whiteSpace:'nowrap',
                                }}>{str}</div>
                            </Tooltip>
                        )
                    }
                },
                {
                    title: "续签情况",
                    dataIndex: "renewal",
                    key: "renewal",
                    width: 80,
                    render: (text,record) => {
                        let str = text === 0 ? '未联系上当前联系人' :
                            text === 1 ? '企业已签其他机构' :
                                text === 2 ? '企业自己申报' :
                                    text === 3 ? '企业不打算申报/注销' :
                                        text === 4 ? '待续签，未报价（客服维护中）' :
                                            text === 5 ? '待续签，已报价（客服维护中）' :
                                                text === 6 ? ('已续签/复审、续签时间、续签项目' + (record.renewalTimes ? '('+record.renewalTimes+')' : '')): ''
                        return (
                            <Tooltip placement="topLeft" title={str}>
                                <div style={{
                                    maxWidth:'80px',
                                    overflow:'hidden',
                                    textOverflow: "ellipsis",
                                    whiteSpace:'nowrap',
                                }}>{str}</div>
                            </Tooltip>
                        )
                    }
                },
                {
                    title: "满意度(技术/业务)",
                    dataIndex: "techSatisfaction",
                    key: "techSatisfaction",
                    render: (text,record) => (
                        (
                            text === 0 ? '已投诉' :
                                text === 1 ? '不满意' :
                                    text === 2 ? '一般满意' :
                                        text === 3 ? '非常满意' : '无'
                        )
                        +'/'+
                        (record.businessSatisfaction === 0 ? '已投诉' :
                            record.businessSatisfaction === 1 ? '不满意' :
                                record.businessSatisfaction === 2 ? '一般满意' :
                                    record.businessSatisfaction === 3 ? '非常满意' : '无')
                    )
                },
                {
                    title: "备注",
                    dataIndex: "remarks",
                    key: "remarks",
                    width: 80,
                    render: (text) => {
                        return (
                            <Tooltip placement="topLeft" title={text}>
                                <div style={{
                                    maxWidth:'80px',
                                    overflow:'hidden',
                                    textOverflow: "ellipsis",
                                    whiteSpace:'nowrap',
                                }}>{text}</div>
                            </Tooltip>
                        )
                    }
                },
                {
                    title: "操作",
                    dataIndex: "a",
                    key: "a",
                    width: 100,
                    render: (_,record) => {
                        if(record.projects){
                            let projectsArr = record.projects.split('/');
                            let consultantsArr = record.consultants.split('/');
                            let declareBatchsArr = record.declareBatchs.split('/');
                            let certificationNosArr = record.certificationNos.split('/');
                            let data = [];
                            for (let i in projectsArr){
                                data.push({
                                    project:projectsArr[i],
                                    consultant:consultantsArr[i],
                                    declareBatch:declareBatchsArr[i],
                                    certificationNo:certificationNosArr[i],
                                })
                            }
                            return (
                                <Button type="primary" onClick={(e)=>{
                                    e.stopPropagation();
                                    this.setState({
                                        detailsVisible:true,
                                        detailsInfor:data
                                    })
                                }}>查看项目</Button>
                            )
                        }

                    }
                },
            ],
            changeList:[],
            listLoading:false,
            page:1,
            pagination: {
                defaultCurrent: 1,
                defaultPageSize: 10,
                showQuickJumper: true,
                pageSize: 10,
                onChange: function (page) {
                    this.loadData(page);
                }.bind(this),
                showTotal: function (total) {
                    return "共" + total + "条数据";
                },
            },
            departmentArr:[],
            customerName:'',
            releaseDate:[],
            signTimes:[],
        }
        this.changeList = this.changeList.bind(this);
        this.loadData = this.loadData.bind(this);
        this.search = this.search.bind(this);
        this.reset = this.reset.bind(this);
        this.departmentList = this.departmentList.bind(this);
        this.download = this.download.bind(this);
    }

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

    search(){
        this.loadData();
    }

    reset(){
        this.setState({
            customerName:undefined,
            depId:undefined,
            addWechat:undefined,
            renewal:undefined,
            releaseDate:[],
            signTimes:[],
        },()=>{
            this.loadData();
        })
    }

    loadData(pageNo) {
        this.setState({
            listLoading: true,
        });
        $.ajax({
            method: "get",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + "/api/admin/listOrderUseService",
            data: {
                pageNo: pageNo || 1,
                pageSize: this.state.pagination.pageSize,
                userName:this.state.customerName || undefined,
                depId:this.state.depId || undefined,
                addWechat:this.state.addWechat || undefined,
                renewal:this.state.renewal || undefined,
                startFollowTimes:this.state.releaseDate[0] || undefined,
                endFollowTimes:this.state.releaseDate[1] || undefined,
                startSignTimes:this.state.signTimes[0] || undefined,
                endSignTimes:this.state.signTimes[1] || undefined,
            },
            success: function (data) {
                ShowModal(this);
                let theArr = [];
                if (!data.data || !data.data.list) {
                    if (data.error && data.error.length) {
                        message.warning(data.error[0].message);
                    }
                } else {
                    for (let i = 0; i < data.data.list.length; i++) {
                        let thisdata = data.data.list[i];
                        theArr.push(thisdata);
                    }
                    this.state.pagination.current = data.data.pageNo;
                    this.state.pagination.total = data.data.totalCount;
                    if (data.data && data.data.list && !data.data.list.length) {
                        this.state.pagination.current = 0;
                        this.state.pagination.total = 0;
                    }
                    let obj = {
                        userName:this.state.customerName || undefined,
                        depId:this.state.depId || undefined,
                        addWechat:this.state.addWechat || undefined,
                        renewal:this.state.renewal || undefined,
                        startFollowTimes:this.state.releaseDate[0] || undefined,
                        endFollowTimes:this.state.releaseDate[1] || undefined,
                        startSignTimes:this.state.signTimes[0] || undefined,
                        endSignTimes:this.state.signTimes[1] || undefined,
                    }
                    let arr = Object.keys(obj);
                    let str = '?';
                    for(let i of arr){
                        if(obj[i]){
                            str+=i+'='+obj[i]+'&'
                        }
                    }
                    this.setState({
                        dataSource: theArr,
                        page: data.data.pageNo,
                        pagination: this.state.pagination,
                        downloadSrc:str,
                    });
                }
            }.bind(this),
        }).always(
            function () {
                this.setState({
                    listLoading: 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
        });
    }

    //部门
    departmentList() {
        $.ajax({
            method: "get",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + "/api/admin/organization/selectSuperId",
            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({
                            key: index,
                            name: item.name,
                            id: item.id,
                        });
                    });
                }
                this.setState({
                    departmentArr: theArr,
                });
            }.bind(this),
        }).always(
            function () {
            }.bind(this)
        );
    }

    download() {
        window.location.href =
            globalConfig.context +
            "/api/admin/userServiceExport" + this.state.downloadSrc
    }

    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" style={{padding:'10px 0'}}>
                        <Input
                            placeholder="客户名称"
                            style={{ width: "150px", marginRight: 10,marginBottom: "10px" }}
                            value={this.state.customerName}
                            onChange={(e) => {
                                this.setState({ customerName: e.target.value });
                            }}
                        />
                        <Select
                            placeholder="订单部门"
                            style={{ width: 150, marginRight: 10,marginBottom: "10px" }}
                            value={this.state.depId}
                            onChange={(e) => {
                                this.setState({ depId: e });
                            }}
                        >
                            {this.state.departmentArr.map(function (item) {
                                return <Option key={item.id}>{item.name}</Option>;
                            })}
                        </Select>
                        <Select
                            placeholder="是否已添微信"
                            style={{ width: 150, marginRight: 10,marginBottom: "10px" }}
                            value={this.state.addWechat}
                            onChange={(e) => {
                                this.setState({ addWechat: e });
                            }}
                        >
                            <Option value={0}>否</Option>
                            <Option value={1}>是</Option>
                        </Select>
                        <Select
                            placeholder="续签情况"
                            style={{ width: 250, marginRight: 10,marginBottom: "10px" }}
                            value={this.state.renewal}
                            onChange={(e) => {
                                this.setState({ renewal: e });
                            }}
                        >
                            <Option value={6}>已续签/复审、续签时间、续签项目</Option>
                            <Option value={5}>待续签，已报价（客服维护中）</Option>
                            <Option value={4}>待续签，未报价（客服维护中）</Option>
                            <Option value={3}>企业不打算申报/注销</Option>
                            <Option value={2}>企业自己申报</Option>
                            <Option value={1}>企业已签其他机构</Option>
                            <Option value={0}>未联系上当前联系人</Option>
                        </Select>
                        <span style={{ marginRight: "10px",marginBottom: "10px" }}>跟进时间 :</span>
                        <RangePicker
                            style={{marginBottom: "10px",width:'187px'}}
                            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 });
                            }}
                        />
                        <span style={{ marginRight: "10px",marginLeft: "10px",marginBottom: "10px" }}>下单时间 :</span>
                        <RangePicker
                            style={{marginBottom: "10px",width:'187px'}}
                            value={[
                                this.state.signTimes[0]
                                    ? moment(this.state.signTimes[0])
                                    : null,
                                this.state.signTimes[1]
                                    ? moment(this.state.signTimes[1])
                                    : null,
                            ]}
                            onChange={(data, dataString) => {
                                this.setState({ signTimes: dataString });
                            }}
                        />
                        <Button
                            type="primary"
                            onClick={this.search}
                            style={{ marginLeft: "10px",marginBottom: "10px" }}
                        >
                            搜索
                            <Icon type="search" />
                        </Button>
                        <Button onClick={this.reset} style={{ marginLeft: "10px",marginBottom: "10px" }}>
                            重置 <Icon type="reload" />
                        </Button>
                    </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
                            type="primary"
                            style={{margin: '10px'}}
                            onClick={this.download}
                        >
                            导出
                        </Button>
                    </TabPane>
                </Tabs>
                <div className="patent-table">
                    <Spin spinning={this.state.listLoading}>
                        <Table
                            columns={this.state.columns}
                            dataSource={this.state.dataSource}
                            pagination={this.state.pagination}
                            scroll={{ x: "max-content", y: 0 }}
                            bordered
                            onRowClick={(record)=>{
                                this.setState({
                                    visible:true,
                                    orderNo:record.orderNo,
                                    uid:record.uid,
                                })
                            }}
                        />
                    </Spin>
                </div>
                {this.state.visible ? <FollowUpDetails
                    visible={this.state.visible}
                    orderNo={this.state.orderNo}
                    uid={this.state.uid}
                    onCancel={()=>{
                        this.setState({
                            visible:false,
                            orderNo:'',
                            uid:'',
                        },()=>{
                            this.loadData(this.state.page);
                        })
                    }}/> : ''}
                {this.state.detailsVisible ?
                    <CorrespondingDetails
                        visible={this.state.detailsVisible}
                        detailsInfor={this.state.detailsInfor}
                        onCancel={()=>{
                            this.setState({
                                detailsVisible:false,
                                detailsInfor:[],
                            })
                        }}/> : ''}
            </div>
        )
    }
}

export default FollowUp;