| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701 | 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, record) => (                        <div style={{ display: "flex", flexDirection: "row" }}>                            <Tag color={getClockState(text).color}>                                {getClockState(text).title}                            </Tag>                            {record.updateStatus === 1 && (                                <Tag color="#1E90FF">改</Tag>                            )}                        </div>                        // <Tag color={getClockState(text).color}>{getClockState(text).title}</Tag>                    )                },                {                    title: "打卡状态",                    dataIndex: "clockIn",                    key: "clockIn",                    width: 60,                    render: (text) => (                        <span                            style={{ color: ["#F21212", "#34DE38"][text] }}                        >                            {["未打卡", "已打卡"][text]}                        </span>                    )                },                {                    title: "公出类型",                    dataIndex: "type",                    key: "type",                    width: 70,                    render: (text) =>                        <span                            style={{ color: ["#1D4FEA", "#1E90FF", "#FF5500", "red"][text] }}                        >                            {                                text === 0                                    ? "业务公出" : text === 1                                        ? "技术公出" : text === 2                                            ? "行政公出" : text === 3                                                ? "技术协单" : ""                            }                        </span>                },                {                    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,                                type: this.props.recordInfor.type                            }}                            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={JSON.parse(JSON.stringify(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={JSON.parse(JSON.stringify(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;
 |