| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874 | import React,{Component} from "react";import {Button, Col, Form, message, Modal, Spin, Table, Tabs, Tag} from "antd";import {    getApprovedState,    getCuikuan,    getjiedian,    getLiquidationStatus,    getProcessStatus,    splitUrl} from "../../../tools";import ImgList from "../../../common/imgList";import $ from "jquery/src/ajax";import OrderRiZi from "@/orderRiZi.jsx";import ProjectDetailsReadOnly from "../../../common/projectDetailsReadOnly";import CustomerServiceRecord from './customerServiceRecord';import OrderItemStatus from "../../../common/orderItemStatus";import EnterpriseNameChange from "../../../common/enterpriseNameChange";import OrderCoor from "../../order/orderNew/changeComponent/orderCoor";import ContentUrl from "../../order/orderNew/contentUrl";const FormItem = Form.Item;const { TabPane } = Tabs;const formItemLayout = {    labelCol: { span: 8 },    wrapperCol: { span: 14 },};class FollowUpDetails extends Component{    constructor(props) {        super(props);        this.state={            loading:false,            columnsX: [                {                    title: "业务项目名称",                    dataIndex: "commodityName",                    key: "commodityName",                    render: (text, record) => {                        return text + "-" + record.id                    }                },                {                    title: "项目类别",                    dataIndex: "cname",                    key: "cname",                },                {                    title: "项目数量",                    dataIndex: "commodityQuantity",                    key: "commodityQuantity",                    render: (text, record) => {                        if (record.splitStatus == 1) {                            return (                                <span>                    {text}{" "}                                    <Tag                                        color="#108ee9"                                        onClick={(e) => {                                            e.stopPropagation();                                            this.showRes(record);                                        }}                                    >                      已拆                    </Tag>                  </span>                            );                        } else {                            return text;                        }                    },                },                {                    title: "金额(万元)",                    dataIndex: "commodityPrice",                    key: "commodityPrice",                },                {                    title: "负责人",                    dataIndex: "contacts",                    key: "contacts",                },                {                    title: "负责人电话",                    dataIndex: "contactsMobile",                    key: "contactsMobile",                },                {                    title: "主要项目",                    dataIndex: "main",                    key: "main",                    render: (text) => {                        return text ? "是" : "否";                    },                },                {                    title: "项目说明",                    dataIndex: "taskComment",                    key: "taskComment",                    render: (text) => {                        return text && text.length > 8 ? text.substr(0, 8) + "…" : text;                    },                },            ],            dataSourceX:[],            contactList:[],            ContactsListsNew: [                {                    title: "项目名称",                    dataIndex: "commodityName",                    key: "commodityName",                    render: (text, record) => {                        return <span>{text + "-" + record.tid}</span>;                    },                },                {                    title: "项目分类",                    dataIndex: "projectType",                    key: "projectType",                    render: (text) => {                        let arr = this.state.dataSourceX || [];                        let str = "";                        for (let i = 0; i < arr.length; i++) {                            if (this.state.dataSourceX[i].sort == text) {                                str = this.state.dataSourceX[i].cname;                                return <span>{str}</span>;                            }                        }                    },                },                {                    title: "催款科目",                    dataIndex: "dunTypeName",                    key: "dunTypeName",                    render: (text, record) => {                        if (record.customizeName) {                            return text + record.customizeName;                        }                        return <span>{text}</span>;                    },                },                {                    title: "时间(天)",                    dataIndex: "waitDay",                    key: "waitDay",                    render: (text, record) => {                        if (record.dunTypeName) {                            if (record.customizeTimes) {                                return record.customizeTimes;                            }                            return <span>{text}</span>;                        }                    },                },                {                    title: "金额(万元)",                    dataIndex: "money",                    key: "money",                    render: (text, record) => {                        if (record.dunTypeName) {                            if (record.appropriationRatio) {                                return <span>{record.appropriationRatio}(拨款比例)</span>;                            } else {                                return <span>{text}</span>;                            }                        }                    },                },                {                    title: "服务年限",                    dataIndex: "startDate",                    key: "startDate",                    render: (text, record) => {                        if (record.dunTypeName) {                            return <span>{text}</span>;                        }                    },                },                {                    title: "催款状态",                    dataIndex: "status",                    key: "status",                    render: (text) => {                        return <span>{text == 1 ? "已启动" : "未启动"}</span>;                    },                },            ],            ContactsLists: [                {                    title: "催款科目",                    dataIndex: "dunSubject",                    key: "dunSubject",                    render: (text) => {                        return getjiedian(text);                    },                },                {                    title: "金额(万元)",                    dataIndex: "money",                    key: "money",                },                {                    title: "催款状态",                    dataIndex: "dunStatus",                    key: "dunStatus",                    render: (text) => {                        return getCuikuan(text);                    },                },            ],            tabsKey:'1',            dataSourcerizhi:[],        }        this.jiedian =this.jiedian.bind(this);        this.jiedianNew =this.jiedianNew.bind(this);        this.xiangqing =this.xiangqing.bind(this);        this.rizhi =this.rizhi.bind(this);        this.closeOrderLog =this.closeOrderLog.bind(this);        this.tableRowClickX =this.tableRowClickX.bind(this);        this.nextCancel =this.nextCancel.bind(this);        this.rizhi =this.rizhi.bind(this);        this.getOrderLog =this.getOrderLog.bind(this);        this.xiangmu =this.xiangmu.bind(this);    }    componentDidMount() {        this.xiangqing();        this.jiedian();        this.jiedianNew();        this.xiangmu();    }    getOrderLog() {        this.setState({            rizhivisible: true,        });        this.rizhi();    }    closeOrderLog() {        this.setState({            rizhivisible: false,            dataSourcerizhi:[],        });    }    tableRowClickX(record) {        this.setState({            addnextVisible: true,            dataInfor:record,        });    }    nextCancel() {        this.setState({            addnextVisible: false,            dataInfor:{}        });    }    rizhi() {        this.setState({            selectOrderLogLoading: true,        });        $.ajax({            method: "get",            dataType: "json",            crossDomain: false,            url: "/api/admin/newOrder/selectOrderLog",            data: {                orderNo: this.props.orderNo,            },            success: function (data) {                let theArr = [];                let thisData = data.data;                if (!thisData.length) {                    if (data.error && data.error.length) {                        message.warning(data.error[0].message);                    }                } else {                    for (let i = 0; i < data.data.length; i++) {                        let thisdata = data.data[i];                        theArr.push({                            processName: thisdata.processName,                            adminName: thisdata.adminName,                            createDate: thisdata.createDate,                            remarks: thisdata.remarks,                        });                    }                }                this.setState({                    dataSourcerizhi: theArr,                });            }.bind(this),        }).always(            function () {                this.setState({                    selectOrderLogLoading: false,                });            }.bind(this)        );    }    jiedian() {        $.ajax({            method: "get",            dataType: "json",            crossDomain: false,            url: globalConfig.context + "/api/admin/newOrder/selectOrderDun",            data: {                orderNo: this.props.orderNo,            },            success: function (data) {                let theArr = [];                let thisData = [];                if (data.error.length || data.data.list == "") {                    if (data.error && data.error.length) {                        message.warning(data.error[0].message);                    }                } else {                    for (let i = 0; i < data.data.length; i++) {                        thisData = data.data[i];                        theArr.push({                            key: i,                            dunSubject: thisData.dunSubject                                ? thisData.dunSubject.toString()                                : "", //催款科目                            id: thisData.id, //节点Id                            money: thisData.money, //催款金额                            dunStatus: thisData.dunStatus, //催款状态                        });                    }                    this.setState({                        contactList: theArr,                    });                }            }.bind(this),        }).always(            function () {            }.bind(this)        );    }    //查看催款节点    jiedianNew() {        this.setState({            newOrderDunLoading: true,        });        $.ajax({            method: "get",            dataType: "json",            crossDomain: false,            url:                globalConfig.context + "/api/admin/newOrderDun/selectListNewOrderDun",            data: {                orderNo: this.props.orderNo,            },            success: function (data) {                if (data.error && data.error.length) {                    message.warning(data.error[0].message);                } else {                    let theArr = [];                    let thisData = [];                    let arr = data.data || [];                    let totalCui = 0;                    for (let i = 0; i < arr.length; i++) {                        thisData = arr[i];                        totalCui += +thisData.money;                        theArr.push({                            key: i,                            dunSubject: thisData.dunSubject                                ? thisData.dunSubject.toString()                                : "", //催款科目                            id: thisData.id, //节点Id                            money: thisData.money, //催款金额                            commodityName: thisData.commodityName,                            projectType: thisData.projectType,                            dunTypeName: thisData.dunTypeName,                            status: thisData.status,                            waitDay: thisData.waitDay,                            effectiveCount: thisData.effectiveCount,                            startDate: thisData.startDate,                            dunType: thisData.dunType,                            appropriationRatio: thisData.appropriationRatio,                            customizeName: thisData.customizeName,                            customizeTimes: thisData.customizeTimes,                            tid: thisData.tid,                        });                    }                    if (!totalCui) {                        totalCui = 0;                    }                    totalCui = (Math.round(totalCui * 1000000) / 1000000).toFixed(6);                    this.setState({                        contactListNew: theArr,                        totalCui,                    });                }            }.bind(this),        }).always(            function () {                this.setState({                    newOrderDunLoading: false,                });            }.bind(this)        );    }    xiangqing() {        this.setState({            loading: true,        });        $.ajax({            method: "get",            dataType: "json",            crossDomain: false,            url: globalConfig.context + "/api/admin/newOrder/getOrderNewDetail",            data: {                orderNo: this.props.orderNo,            },            success: function (data) {                if (data.error.length || data.data.list == "") {                    if (data.error && data.error.length) {                        message.warning(data.error[0].message);                    }                } else {                    let thisdata = data.data;                    this.setState({                        orderUid: thisdata.uid,                        orderNo: thisdata.orderNo, //订单编号                        contractNo: thisdata.contractNo, //合同编号                        userName: thisdata.userName, //客户名称                        signDate: thisdata.signDate, //签单时间                        processStatus: thisdata.processStatus, //流程状态                        liquidationStatus: thisdata.liquidationStatus, //结算状态                        contacts: thisdata.contacts, //企业联系人                        contactMobile: thisdata.contactMobile, //联系人电话                        legalPerson: thisdata.legalPerson, //法人                        legalPersonTel: thisdata.legalPersonTel, //法人电话                        firstAmount: thisdata.firstAmount, //签单金额                        totalAmount: thisdata.totalAmount, //首付金额                        approval: thisdata.approval, //特批状态                        settlementAmount: thisdata.settlementAmount, //已收款项                        orderRemarks: thisdata.orderRemarks, //订单留言                        orgCodeUrl: thisdata.contractPictureUrl                            ? splitUrl(                                thisdata.contractPictureUrl,                                ",",                                globalConfig.avatarHost + "/upload"                            )                            : [], //图片地址                        replenishUrl: thisdata.agreementUrl                            ? splitUrl(                                thisdata.agreementUrl,                                ",",                                globalConfig.avatarHost + "/upload"                            )                            : [], //图片地址                        contentUrl:thisdata.serviceContent                            ? splitUrl(                                thisdata.serviceContent,                                ",",                                globalConfig.avatarHost + "/upload"                              )                            : [], //图片地址                        salesmanName: thisdata.salesmanName, //营销员名称                        salesmanMobile: thisdata.salesmanMobile, //营销员电话                        oldSalesmanName: thisdata.oldSalesmanName, //营销员名称                        oldSalesmanMobile: thisdata.oldSalesmanMobile, //营销员电话                        financeName: thisdata.financeName, //财务名称                        financeMobile: thisdata.financeMobile, //财务电话                        nowFinance: thisdata.nowFinance, //财务名称                        nowFinanceMobile: thisdata.nowFinanceMobile, //财务电话                        depName: thisdata.depName,                        outsource: thisdata.outsource == 0 ? "否" : "是",                        deleteSign:thisdata.deleteSign,                    });                }            }.bind(this),        }).always(            function () {                this.setState({                    loading: false,                });            }.bind(this)        );    }    xiangmu() {        this.setState({            orderTaskLoading:true        })        $.ajax({            method: "get",            dataType: "json",            crossDomain: false,            url: globalConfig.context + "/api/admin/newOrder/getOrderTask",            data: {                orderNo: this.props.orderNo,            },            success: function (data) {                let theArr = [];                if (data.error.length || data.data.list == "") {                    if (data.error && data.error.length) {                        message.warning(data.error[0].message);                    }                } else {                    for (let i = 0; i < data.data.length; i++) {                        let thisdata = data.data[i];                        thisdata.key = i;                        theArr.push(thisdata);                    }                    this.setState({                        dataSourceX: theArr,                    });                }            }.bind(this),        }).always(            function () {                this.setState({                    orderTaskLoading: false,                });            }.bind(this)        );    }    render() {        return (            <Modal                className="customeDetails"                footer=""                title={null}                width="1200px"                maskClosable={false}                visible={this.props.visible}                onOk={this.props.onCancel}                onCancel={this.props.onCancel}            >                <div>                    <Tabs                        defaultActiveKey="1"                        className="test"                        activeKey={this.state.tabsKey}                        onChange={(e)=>{this.setState({tabsKey:e})}}                        tabBarExtraContent={                            <div style={{fontWeight:'bold',paddingRight:'15px'}}>                                <OrderItemStatus deleteSign={this.state.deleteSign}/>                            </div>                        }                    >                        <TabPane tab="订单详情" key="1">                            <Form                                layout="horizontal"                                id="demand-form"                                style={{ paddingBottom: "40px" }}                            >                                <Spin spinning={this.state.loading}>                                    <div className="clearfix">                                        <FormItem                                            className="half-item"                                            {...formItemLayout}                                            label="订单编号"                                        >                                            <span>{this.state.orderNo}</span>                                        </FormItem>                                        <FormItem                                            className="half-item"                                            {...formItemLayout}                                            label="合同编号"                                        >                                            <span>{this.state.contractNo}</span>                                        </FormItem>                                        <FormItem                                            className="half-item"                                            {...formItemLayout}                                            label="客户名称"                                        >                                            <span>{this.state.userName}</span>                                            <EnterpriseNameChange                                                type='journal'                                                style={{ marginLeft: 10 }}                                                enterpriseId={this.state.orderUid}/>                                        </FormItem>                                        <FormItem                                            className="half-item"                                            {...formItemLayout}                                            label="下单时间"                                        >                                            <span>{this.state.signDate}</span>                                        </FormItem>                                        <FormItem                                            className="half-item"                                            {...formItemLayout}                                            label="流程状态"                                        >                                            <span>{getProcessStatus(this.state.processStatus)}</span>                                        </FormItem>                                        <FormItem                                            className="half-item"                                            {...formItemLayout}                                            label="结算状态"                                        >                                          <span>                                            {getLiquidationStatus(this.state.liquidationStatus)}                                          </span>                                        </FormItem>                                        <FormItem                                            className="half-item"                                            {...formItemLayout}                                            label="企业联系人"                                        >                                            <span>{this.state.contacts}</span>                                        </FormItem>                                        <FormItem                                            className="half-item"                                            {...formItemLayout}                                            label="联系人电话"                                        >                                            <span>{this.state.contactMobile}</span>                                        </FormItem>                                        <FormItem                                            className="half-item"                                            {...formItemLayout}                                            label="企业法人"                                        >                                            <span>{this.state.legalPerson}</span>                                        </FormItem>                                        <FormItem                                            className="half-item"                                            {...formItemLayout}                                            label="法人电话"                                        >                                            <span>{this.state.legalPersonTel}</span>                                        </FormItem>                                        <FormItem                                            className="half-item"                                            {...formItemLayout}                                            label="签单金额(万元)"                                        >                                            <span>{this.state.totalAmount}</span>                                        </FormItem>                                        <FormItem                                            className="half-item"                                            {...formItemLayout}                                            label="首付金额(万元)"                                        >                                            <span>{this.state.firstAmount}</span>                                        </FormItem>                                        <FormItem                                            className="half-item"                                            {...formItemLayout}                                            label="特批立项"                                        >                                            <span>{getApprovedState(this.state.approval)}</span>                                        </FormItem>                                        <FormItem                                            className="half-item"                                            {...formItemLayout}                                            label="已收款项(万元)"                                        >                                            <span>{this.state.settlementAmount}</span>                                        </FormItem>                                        <FormItem                                            className="half-item"                                            {...formItemLayout}                                            label="订单部门"                                        >                                            <span>{this.state.depName}</span>                                        </FormItem>                                        <FormItem                                            className="half-item"                                            {...formItemLayout}                                            label="是否外包"                                        >                                            {this.state.outsource}                                        </FormItem>                                        <div className="clearfix">                                            <FormItem                                                labelCol={{ span: 4 }}                                                wrapperCol={{ span: 16 }}                                                label="订单留言"                                            >                                                <span>{this.state.orderRemarks}</span>                                            </FormItem>                                        </div>                                        <div className="clearfix">                                            <FormItem                                                labelCol={{ span: 4 }}                                                wrapperCol={{ span: 18 }}                                                label={"合同扫描件"}                                            >                                                <div style={{paddingTop:'10px',paddingBottom:'10px'}}>                                                    {this.props.visible && this.state.orgCodeUrl ? <ImgList fileList={this.state.orgCodeUrl} ItemWidth={'96px'}/> : <div/>}                                                </div>                                                <Button                                                    style={{                                                        float: "right",                                                        marginRight: "140px",                                                        marginTop: "20px",                                                    }}                                                    onClick={this.getOrderLog}                                                >                                                    查看订单 日志                                                </Button>                                            </FormItem>                                            <FormItem                                                labelCol={{ span: 4 }}                                                wrapperCol={{ span: 18 }}                                                label="补充协议"                                            >                                                <div style={{paddingTop:'10px',paddingBottom:'10px'}}>                                                    {this.props.visible && this.state.replenishUrl ? <ImgList domId={'inquiry1'} fileList={this.state.replenishUrl} ItemWidth={'96px'}/> : <div/>}                                                </div>                                            </FormItem>                                        </div>                                        <ContentUrl                                        processStatus={1}                                        domId = {"followContent"}                                        contentUrl = {this.state.contentUrl}                                        imgId = {"followContentImg"}                                        />                                        <div className="clearfix">                                            <FormItem                                                className="half-item"                                                {...formItemLayout}                                                label="订单负责人"                                            >                                                <span>{this.state.salesmanName}</span>                                            </FormItem>                                            <FormItem                                                className="half-item"                                                {...formItemLayout}                                                label="订单负责人电话"                                            >                                                <span>{this.state.salesmanMobile}</span>                                            </FormItem>                                        </div>                                        <div className="clearfix">                                            <FormItem                                                className="half-item"                                                {...formItemLayout}                                                label="当前财务负责人"                                            >                                                <span>{this.state.nowFinance}</span>                                            </FormItem>                                            <FormItem                                                className="half-item"                                                {...formItemLayout}                                                label="当前财务负责人电话"                                            >                                                <span>{this.state.nowFinanceMobile}</span>                                            </FormItem>                                        </div>                                        <div className="clearfix">                                            <FormItem                                                className="half-item"                                                {...formItemLayout}                                                style={{ opacity: ".5" }}                                                label="原订单负责人"                                            >                                                <span>{this.state.oldSalesmanName}</span>                                            </FormItem>                                            <FormItem                                                className="half-item"                                                {...formItemLayout}                                                style={{ opacity: ".5" }}                                                label="原订单负责人电话"                                            >                                                <span>{this.state.oldSalesmanMobile}</span>                                            </FormItem>                                        </div>                                        <div className="clearfix">                                            <FormItem                                                className="half-item"                                                style={{ opacity: ".5" }}                                                {...formItemLayout}                                                label="实际财务操作人"                                            >                                                <span>{this.state.financeName}</span>                                            </FormItem>                                            <FormItem                                                className="half-item"                                                {...formItemLayout}                                                style={{ opacity: ".5" }}                                                label="实际财务操作人电话"                                            >                                                <span>{this.state.financeMobile}</span>                                            </FormItem>                                        </div>                                        {/* 协作人员 */}                                        <OrderCoor orderNo={this.props.orderNo}/>                                        <div>                                          <span style={{ marginLeft: "50px", fontSize: "20px" }}>                                            项目业务                                          </span>                                        </div>                                        <div className="patent-table">                                            <Spin spinning={this.state.orderTaskLoading}>                                                <Table                                                    columns={this.state.columnsX}                                                    dataSource={this.state.dataSourceX}                                                    pagination={false}                                                    onRowClick={this.tableRowClickX}                                                    bordered                                                    size="small"                                                />                                            </Spin>                                        </div>                                        <div>                                          <span style={{ marginLeft: "50px", fontSize: "20px" }}>                                            催款节点                                          </span>                                          <span                                            style={{                                                display: this.state.contactList.length ? "none" : "inline-block",                                                marginLeft: 10,                                                color: "red",                                            }}                                          >                                            金额总计(万元): {this.state.totalCui}                                          </span>                                        </div>                                        <div className="clearfix">                                            <Spin spinning={this.state.newOrderDunLoading}>                                                <Form layout="horizontal" id="demand-form">                                                    <Table                                                        pagination={false}                                                        bordered                                                        size="small"                                                        columns={                                                            this.state.ContactsListsNew                                                        }                                                        dataSource={                                                            this.state.contactListNew                                                        }                                                    />                                                    <Col                                                        span={24}                                                        offset={9}                                                        style={{ marginTop: "15px" }}                                                    />                                                </Form>                                            </Spin>                                        </div>                                    </div>                                </Spin>                            </Form>                        </TabPane>                        <TabPane tab="客服跟进详情" key="2">                            {this.state.tabsKey === '2' ? <CustomerServiceRecord                                orderNo={this.props.orderNo}                                uid={this.props.uid}                            /> : ''}                        </TabPane>                    </Tabs>                    <OrderRiZi                        dataSourcerizhi={this.state.dataSourcerizhi}                        closeOrderLog={this.closeOrderLog}                        visible={this.state.rizhivisible}                        loading={this.state.selectOrderLogLoading}                    />                    {this.state.addnextVisible && <ProjectDetailsReadOnly                        infor={this.state.dataInfor}                        visible={this.state.addnextVisible}                        onCancel={this.nextCancel}                    />}                </div>            </Modal>        )    }}export default FollowUpDetails;
 |