kede-client/js/component/manageCenter/customer/operationalData/interviewStatistics/index.jsx

import React,{ Component } from 'react';
import {Select} from "antd";
import { provinceList} from '@/NewDicProvinceList';
import './index.less';
import TabelContent from '../../../../common/tabelContent'

import DetailedList from './detailedList';
import moment from "moment";

class InterviewStatistics extends Component{
    constructor(props) {
        super(props);
        this.state={
            columns: [
                {
                    title: "序号",
                    dataIndex: "key",
                    key: "key",
                },
                {
                    title: "省份",
                    dataIndex: "name",
                    key: "name",
                },
                {
                    title: "老客户面谈数",
                    dataIndex: "useInterview",
                    key: "useInterview",
                    className: 'projectTable',
                    onCellClick: (record, event) => {
                        event.stopPropagation();
                        record.type = 1;
                        this.setState({
                            visible: true,
                            recordInfor: record,
                        })
                    },
                },
                {
                    title: "老客户签单数/金额",
                    dataIndex: "useQuantity",
                    key: "useQuantity",
                    render:(text, record)=>(
                        text + '/' + record.useTotal
                    ),
                    className: 'projectTable',
                    onCellClick: (record, event) => {
                        event.stopPropagation();
                        record.type = 1;
                        this.setState({
                            visible: true,
                            recordInfor: record,
                        })
                    },
                },
                {
                    title: "老客户面谈率",
                    dataIndex: "useRatio",
                    key: "useRatio",
                    render:(text)=>(
                        parseFloat((parseFloat(text) * 100).toFixed(2)) + '%'
                    ),
                    className: 'projectTable',
                    onCellClick: (record, event) => {
                        event.stopPropagation();
                        record.type = 1;
                        this.setState({
                            visible: true,
                            recordInfor: record,
                        })
                    },
                },
                {
                    title: "新客户面谈数",
                    dataIndex: "newInterview",
                    key: "newInterview",
                    className: 'projectTable',
                    onCellClick: (record, event) => {
                        event.stopPropagation();
                        record.type = 2;
                        this.setState({
                            visible: true,
                            recordInfor: record,
                        })
                    },
                },
                {
                    title: "新客户签单数/金额",
                    dataIndex: "newQuantity",
                    key: "newQuantity",
                    render:(text, record)=>(
                        text + '/' + record.newTotal
                    ),
                    className: 'projectTable',
                    onCellClick: (record, event) => {
                        event.stopPropagation();
                        record.type = 2;
                        this.setState({
                            visible: true,
                            recordInfor: record,
                        })
                    },
                },
                {
                    title: "新客户面谈率",
                    dataIndex: "newRatio",
                    key: "newRatio",
                    render:(text)=>(
                        parseFloat((parseFloat(text) * 100).toFixed(2)) + '%'
                    ),
                    className: 'projectTable',
                    onCellClick: (record, event) => {
                        event.stopPropagation();
                        record.type = 2;
                        this.setState({
                            visible: true,
                            recordInfor: record,
                        })
                    },
                },
                {
                    title: "总面数",
                    dataIndex: "totalInterview",
                    key: "totalInterview",
                    className: 'projectTable',
                    onCellClick: (record, event) => {
                        event.stopPropagation();
                        record.type = 0;
                        this.setState({
                            visible: true,
                            recordInfor: record,
                        })
                    },
                },
                {
                    title: "总签单数/金额",
                    dataIndex: "totalQuantity",
                    key: "totalQuantity",
                    render:(text, record)=>(
                        text + '/' + record.total
                    ),
                    className: 'projectTable',
                    onCellClick: (record, event) => {
                        event.stopPropagation();
                        record.type = 0;
                        this.setState({
                            visible: true,
                            recordInfor: record,
                        })
                    },
                },
                {
                    title: "总面谈率",
                    dataIndex: "totalRatio",
                    key: "totalRatio",
                    render:(text)=>(
                        parseFloat((parseFloat(text) * 100).toFixed(2)) + '%'
                    ),
                    className: 'projectTable',
                    onCellClick: (record, event) => {
                        event.stopPropagation();
                        record.type = 0;
                        this.setState({
                            visible: true,
                            recordInfor: record,
                        })
                    },
                },
            ],
            searchConfig:{}
        }
    }

    searchList(){
        let arr = [
            {
                type:'departmentSelect',
                dataKey:'depId',
                placeholder:'请选择部门'
            },
            {
                type:'select',
                dataKey:'province',
                placeholder:'请选择省份',
                selectOptionList:()=>{
                    let Province = [];
                    provinceList.map(function(item) {
                        let id = String(item.id)
                        Province.push(
                            <Select.Option value={id} key={item.name}>{item.name}</Select.Option>
                        )
                    });
                    return Province
                },
            },
            //0 总数量 1总金额 2总面谈
            {
                type:'select',
                dataKey:'sort',
                placeholder:'请选择排序',
                selectList:[
                    {
                        value:'0',
                        label:'按总数量排序'
                    },
                    {
                        value:'1',
                        label:'按总金额排序'
                    },
                    {
                        value:'2',
                        label:'按总面谈排序'
                    },
                ]
            },
            {
                type:'times',
                title:'公出时间',
                dataKey:'date',
                format: 'YYYY/MM',

            },
        ]
        return arr;
    }

    render() {
        return (
            <div className="user-content interviewStatistics">
                <div className="content-title">
                    <span>
                        公出面谈表<span style={{fontSize:'10px',color:'#0f2be5',marginLeft:'10px'}}>注：通过公出打卡，同一家公司，多次面谈数只计算1次</span>
                    </span>
                </div>
                <TabelContent
                    searchList={this.searchList()}
                    columns={this.state.columns}
                    searchConfig={{
                        date:moment().subtract(1, 'months').format("YYYY-MM")
                    }}
                    searchOperation={(value)=>{
                        for(let i of Object.keys(value)){
                            if(i === 'sort' || i === 'pageNo' || i === 'pageSize'){
                                delete value[i]
                            }

                        }
                        this.setState({searchConfig:value})}
                    }
                    tabelApi={'/api/admin/followStatisticsList'}
                    exportApi={'/api/admin/followStatisticsListExport'}
                    onRowClick={()=>{}}
                    exportExecProcessing={(data)=>{
                        if(data.province){
                            let arr = provinceList.filter(v=>String(v.id) === String(data.province))
                            data.provinceName = arr[0].name
                        }
                        return data;
                    }}
                    dataProcessing={(data)=>{
                        let theArr = [];
                        for (let i = 0; i < data.data.length; i++) {
                            let thisdata = data.data[i];
                            thisdata.key=i + 1;
                            theArr.push(thisdata);
                        }
                        return theArr;
                    }}
                />
                {this.state.visible ? <DetailedList
                    searchConfig={JSON.parse(JSON.stringify(this.state.searchConfig))}
                    visible={this.state.visible}
                    recordInfor={this.state.recordInfor}
                    onCancel={()=>{
                        this.setState({
                            visible:false,
                            recordInfor:{}
                        })
                    }}/> : null}
            </div>
        )
    }
}

export default InterviewStatistics;