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

import React,{ Component } from 'react';
import {Button, Modal, Tag, Tooltip,} from "antd";
import './index.less';
import TabelContent from "../../../../common/tabelContent";
import {splitUrl,getClockState} from "@/tools";
import ImgList from "../../../../common/imgList";
import {clockState} from "@/dataDic";
import {getApprovedState, getLiquidationStatus, getNewOrderStatus, getProcessStatus} from "../../../../tools";
import moment from 'moment';

class DetailedList extends Component{
    constructor(props) {
        super(props);
        this.state= {
            columns: [
                {
                    title: "编号",
                    dataIndex: "key",
                    key: "key",
                    width: 120,
                },
                {
                    title: "面谈部门",
                    dataIndex: "name",
                    key: "name",
                    width: 320,
                },
                {
                    title: "客户类型",
                    dataIndex: "newUser",
                    key: "newUser",
                    width: 100,
                    render:(text)=>(
                        text === 0 ? '新客户' :
                            text === 1 ? '老客户' : ''
                    )
                },
                {
                    title: "面谈客户",
                    dataIndex: "nickname",
                    key: "nickname",
                    width: 220,
                },
                {
                    title: "面谈数",
                    dataIndex: "quantity",
                    key: "quantity",
                    className: 'projectTable',
                    width: 150,
                    onCellClick: (record, event) => {
                        event.stopPropagation();
                        this.setState({
                            visible1: true,
                            uid: record.uid,
                            depId:record.id,
                        })
                    },
                },
                {
                    title: "签单数",
                    dataIndex: "sign",
                    key: "sign",
                    className: 'projectTable',
                    width: 150,
                    onCellClick: (record, event) => {
                        event.stopPropagation();
                        this.setState({
                            visible2: true,
                            uid: record.uid,
                            depId:record.id,
                        })
                    },
                },
            ],
            columns1: [
                {
                    title: "编号",
                    dataIndex: "key",
                    key: "key",
                    width: 45
                },
                {
                    title: "客户名称",
                    dataIndex: "nickname",
                    key: "nickname",
                    width: 140,
                    render: (text) => {
                        return (
                            <div style={{
                                width:140,
                                wordBreak:'break-all',
                            }}>{text}</div>
                        )
                    },
                },
                {
                    title: "跟单人",
                    dataIndex: "sname",
                    key: "sname",
                    width: 100,
                    render: (text) => {
                        return (
                            <Tooltip title={text}>
                                <div style={{
                                    width:100,
                                    overflow:'hidden',
                                    textOverflow: "ellipsis",
                                    whiteSpace:'nowrap',
                                }}>{text}</div>
                            </Tooltip>
                        )
                    },
                },
                {
                    title: "公出申请人",
                    dataIndex: "aname",
                    key: "aname",
                    width: 100,
                    render: (text) => {
                        return (
                            <Tooltip title={text}>
                                <div style={{
                                    width:100,
                                    overflow:'hidden',
                                    textOverflow: "ellipsis",
                                    whiteSpace:'nowrap',
                                }}>{text}</div>
                            </Tooltip>
                        )
                    },
                },
                {
                    title: "申请时间",
                    dataIndex: "createTimes",
                    key: "createTimes",
                    width: 130
                },
                {
                    title: "公出时间",
                    dataIndex: "releaseStarts",
                    key: "releaseStarts",
                    width: 130,
                    render: (text, record) => (
                        <div>
                            <div>{text}</div>
                            <div style={{paddingLeft:'44px'}}>至</div>
                            <div>{record.releaseEnds}</div>
                        </div>
                    )
                },
                {
                    title: "公出地点",
                    dataIndex: "userName",
                    key: "userName",
                    width: 120,
                    render: (text) => {
                        return (
                            <Tooltip title={text}>
                                <div style={{
                                    width:120,
                                    overflow:'hidden',
                                    textOverflow: "ellipsis",
                                    whiteSpace:'nowrap',
                                }}>{text}</div>
                            </Tooltip>
                        )
                    },
                },
                {
                    title: "公出时长(时)",
                    dataIndex: "duration",
                    key: "duration",
                    width: 50
                },
                {
                    title: "打卡时间",
                    dataIndex: "clockInTimes",
                    key: "clockInTimes",
                    width: 130
                },
                {
                    title: "审核状态",
                    dataIndex: "status",
                    key: "status",
                    width: 40,
                    render: (text) => (
                        <Tag color={getClockState(text).color}>{getClockState(text).title}</Tag>
                    )
                },
                {
                    title: "打卡状态",
                    dataIndex: "clockIn",
                    key: "clockIn",
                    width: 60,
                    render: (text) => (
                        text === 1 ? '已打卡' :
                            text === 0 ? '未打卡' : ''
                    )
                },
                {
                    title: "公出原因/计划",
                    dataIndex: "remarks",
                    key: "remarks",
                    width: 155,
                    render: (text) => {
                        return (<div style={{wordBreak:"break-all"}}>{text}</div>)
                    },
                },
                {
                    title: "补充",
                    dataIndex: "supplement",
                    key: "supplement",
                    width: 155,
                    render: (text) => {
                        return (<div style={{wordBreak:"break-all"}}>{text}</div>)
                    },
                },
                {
                    title: "审核/指导",
                    dataIndex: "auditInfo",
                    key: "auditInfo",
                    width: 155,
                    render: (text) => {
                        return (<div style={{wordBreak:"break-all"}}>{text}</div>)
                    },
                },
                {
                    title: "操作",
                    dataIndex: "annexUrl",
                    key: "annexUrl",
                    render: (text,record) => (
                        <div>
                            <Button
                                type={"primary"}
                                onClick={(e) => {
                                    e.stopPropagation();
                                    let arr1 = text || [];
                                    let arr2 = record.photoUrl || [];
                                    this.setState({
                                        annexUrlArr:splitUrl(arr1, ",", globalConfig.avatarHost + "/upload"),
                                        photoUrlArr:splitUrl(arr2, ",", globalConfig.avatarHost + "/upload"),
                                    },()=>{
                                        this.setState({
                                            imgListVisible:true
                                        })
                                    })
                                }}
                            >
                                查看附件
                            </Button>
                        </div>
                    )
                },
            ],
            searchList:[
                {
                    type:'departmentSelect',
                    dataKey:'depId',
                    placeholder:'请选择部门'
                },
                {
                    type:'times',
                    title:'公出时间',
                    dataKey:'date',
                    format: 'YYYY/MM'
                },
            ],
            searchList1:[
                {
                    type:'select',
                    dataKey:'status',
                    placeholder:'请选择审核状态',
                    selectList:()=>{
                        let arr = [];
                        for(let i of clockState){
                            arr.push({
                                value:i.id,
                                label:i.title
                            })
                        }
                        return arr;
                    }
                },
                {
                    type:'select',
                    dataKey:'clockIn',
                    placeholder:'请选择打卡状态',
                    selectList:[
                        {
                            value:'0',
                            label:'已打卡'
                        },
                        {
                            value:'1',
                            label:'未打卡'
                        }
                    ]
                },
                {
                    type:'autoComplete',
                    dataKey:'aid',
                    api:'/api/admin/customer/listAdminByName',
                    search:'adminName',
                    placeholder:'请输入公出申请人'
                },
                {
                    type:'autoComplete',
                    dataKey:'sid',
                    api:'/api/admin/customer/listAdminByName',
                    search:'adminName',
                    placeholder:'请输入跟单人'
                },
            ],
            columns2:[
                {
                    title: "合同编号",
                    dataIndex: "contractNo",
                    key: "contractNo",
                },
                {
                    title: "订单编号",
                    dataIndex: "orderNo",
                    key: "orderNo",
                },
                {
                    title: "客户名称",
                    dataIndex: "userName",
                    key: "userName",
                    render:text=>{
                        return (
                            <Tooltip title={text}>
                                <div style={{
                                    maxWidth:'150px',
                                    overflow:'hidden',
                                    textOverflow: "ellipsis",
                                    whiteSpace:'nowrap',
                                }}>{text}</div>
                            </Tooltip>
                        )
                    }
                },
                {
                    title: "订单部门",
                    dataIndex: "depName",
                    key: "depName",
                },
                {
                    title: "下单时间",
                    dataIndex: "createDate",
                    key: "createTime",
                },
                {
                    title: "合同签订时间",
                    dataIndex: "signDate",
                    key: "signDate",
                },
                {
                    title: "流程状态",
                    dataIndex: "processStatus",
                    key: "processStatus",
                    render: (text) => {
                        return getProcessStatus(text);
                    },
                },
                {
                    title: "签单金额(万元)",
                    dataIndex: "totalAmount",
                    key: "totalAmount",
                },
                {
                    title: "开票金额(万元)",
                    dataIndex: "invoiceAmount",
                    key: "invoiceAmount",
                },
                {
                    title: "已收款(万元)",
                    dataIndex: "settlementAmount",
                    key: "settlementAmount",
                },
                {
                    title: "结算状态",
                    dataIndex: "liquidationStatus",
                    key: "liquidationStatus",
                    render: (text) => {
                        return getLiquidationStatus(text);
                    },
                },
                {
                    title: "是否特批",
                    dataIndex: "approval",
                    key: "approval",
                    render: (text) => {
                        return getApprovedState(text);
                    },
                },
                {
                    title: "订单状态",
                    dataIndex: "orderStatus",
                    key: "orderStatus",
                    render: (text) => {
                        return getNewOrderStatus(text);
                    },
                },
                {
                    title: "财务负责人",
                    dataIndex: "financeName",
                    key: "financeName",
                },
            ],
            searchList2:[
                {
                    type:'text',
                    placeholder:'请输入订单编号',
                    dataKey:'orderNo',
                },
                {
                    type:'text',
                    placeholder:'请输入客户名称',
                    dataKey:'name',
                },
                {
                    type:'text',
                    placeholder:'请输入合同编号',
                    dataKey:'contractNo',
                },
                {
                    type:'select',
                    dataKey:'liquidationStatus',
                    placeholder:'请选择结算状态',
                    selectList:[
                        {
                            value:'0',
                            label:'首付待付请'
                        },
                        {
                            value:'1',
                            label:'尾款待付清'
                        },
                        {
                            value:'2',
                            label:'已付清'
                        },
                    ]
                },
                {
                    type:'select',
                    dataKey:'approval',
                    placeholder:'请选择特批状态',
                    selectList:[
                        {
                            value:'0',
                            label:'非特批'
                        },
                        {
                            value:'1',
                            label:'特批'
                        },
                    ]
                },
                {
                    type:'select',
                    dataKey:'amountStatus',
                    placeholder:'请选择签单金额',
                    selectList:[
                        {
                            value:'0',
                            label:'10万元以下'
                        },
                        {
                            value:'1',
                            label:'10~20万元'
                        },
                        {
                            value:'2',
                            label:'20~30万元'
                        },
                        {
                            value:'3',
                            label:'30~40万元'
                        },
                        {
                            value:'4',
                            label:'40万元以上'
                        },
                    ]
                },
            ],
            searchConfig:{}
        }
    }

    render() {
        return (
            <div>
                <Modal
                    maskClosable={false}
                    visible={this.props.visible}
                    onOk={this.props.onCancel}
                    onCancel={this.props.onCancel}
                    width='1200px'
                    title={this.props.recordInfor.name + '面谈表'}
                    footer=''
                    className="admin-desc-content">
                    <div className="user-content">
                        <TabelContent
                            scroll={{ x: 0, y: 500}}
                            searchList={this.state.searchList}
                            columns={this.state.columns}
                            searchConfig={this.props.searchConfig}
                            tabelApi={'/api/admin/provinceFollowStatisticsList'}
                            exportApi={'/api/admin/provinceFollowStatisticsListExport'}
                            query={{
                                province:this.props.recordInfor.id,
                            }}
                            onRowClick={()=>{}}
                            searchOperation={(value)=>{
                                for(let i of Object.keys(value)){
                                    if(i === 'sort' || i === 'pageNo' || i === 'pageSize'){
                                        delete value[i]
                                    }

                                }
                                this.setState({searchConfig:value})}
                            }
                            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;
                            }}
                        />
                    </div>

                    {this.state.visible1 && <Modal
                        maskClosable={false}
                        visible={this.state.visible1}
                        onOk={()=>{
                            this.setState({
                                visible1:false,
                                uid:'',
                                depId:''
                            })
                        }}
                        onCancel={()=>{
                            this.setState({
                                visible1:false,
                                uid:'',
                                depId:''
                            })
                        }}
                        width='1600px'
                        title='公出详细列表'
                        footer=''
                        className="admin-desc-content">
                        <div className="user-content">
                            <TabelContent
                                scroll={{ x: 1200 }}
                                searchConfig={this.state.searchConfig}
                                searchList={this.state.searchList1}
                                columns={this.state.columns1}
                                tabelApi={'/api/admin/release/publicReleaseDtails'}
                                exportApi={'/api/admin/release/publicReleaseDtails/export'}
                                query={{
                                    uid:this.state.uid,
                                    depId:this.state.depId,
                                    releaseStart:moment(this.state.searchConfig.date).startOf('month').format('YYYY-MM-DD'),
                                    releaseEnd:moment(this.state.searchConfig.date).endOf('month').format('YYYY-MM-DD')
                                }}
                                exportExecProcessing={(data)=>{
                                    data.uid = this.state.uid;
                                    data.depId = this.state.depId;
                                    return data;
                                }}
                                onRowClick={()=>{}}
                                dataProcessing={(data)=>{
                                    let theArr = [];
                                    for (let i = 0; i < data.data.list.length; i++) {
                                        let thisdata = data.data.list[i];
                                        thisdata.key=(data.data.pageNo - 1) * data.data.pageSize + i + 1;
                                        theArr.push(thisdata);
                                    }
                                    return theArr;
                                }}
                            />
                        </div>
                    </Modal>}

                    {this.state.visible2 && <Modal
                        maskClosable={false}
                        visible={this.state.visible2}
                        onOk={()=>{
                            this.setState({
                                visible2:false,
                                uid:'',
                                depId:''
                            })
                        }}
                        onCancel={()=>{
                            this.setState({
                                visible2:false,
                                uid:'',
                                depId:''
                            })
                        }}
                        width='1600px'
                        title='客户订单列表'
                        footer=''
                        className="admin-desc-content">
                        <div className="user-content">
                            <TabelContent
                                scroll={{ x: 1200 }}
                                searchConfig={this.state.searchConfig}
                                searchList={this.state.searchList2}
                                columns={this.state.columns2}
                                tabelApi={'/api/admin/newOrder/orderNewList'}
                                query={{
                                    uid:this.state.uid,
                                    depId:this.state.depId,
                                    specially: 8,
                                    starTime:moment(this.state.searchConfig.date).startOf('month').format('YYYY-MM-DD'),
                                    endTime:moment(this.state.searchConfig.date).endOf('month').format('YYYY-MM-DD')
                                }}
                                onRowClick={()=>{}}
                                dataProcessing={(data)=>{
                                    let theArr = [];
                                    for (let i = 0; i < data.data.list.length; i++) {
                                        let thisdata = data.data.list[i];
                                        thisdata.key=(data.data.pageNo - 1) * data.data.pageSize + i + 1;
                                        theArr.push(thisdata);
                                    }
                                    return theArr;
                                }}
                            />
                        </div>
                    </Modal>}

                </Modal>

                {this.state.imgListVisible ? <Modal
                    maskClosable={false}
                    visible={this.state.imgListVisible}
                    onOk={()=>{this.setState({
                        imgListVisible:false
                    })}}
                    onCancel={()=>{this.setState({
                        imgListVisible:false
                    })}}
                    width='500px'
                    title='图片'
                    footer=''>
                    <div>
                        <div>申请附件</div>
                        <ImgList fileList={this.state.annexUrlArr} domId='publicStatistics'/>
                        <div style={{paddingTop:'35px'}}>打卡照片</div>
                        <ImgList fileList={this.state.photoUrlArr} domId='publicStatistics1'/>
                    </div>
                </Modal> : null}
            </div>
        )
    }
}

export default DetailedList;