kede-client/js/component/manageCenter/project/task/businessManagement/orderInfor.jsx

import React, { Component } from "react";
import { Button, Col, DatePicker, Form, Input, message, Modal, Select, Spin, Table, Tag, Tooltip } from "antd";
import { getApprovedState, getLiquidationStatus, getProcessStatus, getProjectName, splitUrl } from "../../../../tools";
import moment from "moment";
import EnterpriseNameChange from "../../../../common/enterpriseNameChange";
import PicturesWall from "../../../order/orderNew/changeComponent/picturesWall";
import ImgList from "../../../../common/imgList";
import OrderCoor from "../../../order/orderNew/changeComponent/orderCoor";
import ContentUrl from "../../../order/orderNew/contentUrl";
import $ from "jquery";

const FormItem = Form.Item;

const formItemLayout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 14 },
};

class OrderInfor extends Component {
    constructor(props) {
        super(props);
        this.state = {
            contactList: [],

            columns: [
                {
                    title: "业务项目名称",
                    dataIndex: "commodityName",
                    key: "commodityName",
                    render: (text, record) => {
                        return <span>{text}<span style={{ color: "red" }}>{record.patentTypeName}</span>{"-" + record.id}</span>
                    }
                },
                {
                    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: "projectStatus",
                    key: "projectStatus",
                    render: (text) => {
                        return getProjectName(text);
                    },
                },
                {
                    title: "主要项目",
                    dataIndex: "main",
                    key: "main",
                    render: (text) => {
                        return text ? "是" : "否";
                    },
                },
                {
                    title: "总年限",
                    dataIndex: "yearSum",
                    key: "yearSum",
                    render: (text, record) => {
                        return (
                            <div>{["", "一年", "二年", "三年", "四年", "五年"][text]}</div>
                        );
                    }
                },
                {
                    title: "年限",
                    dataIndex: "serviceLife",
                    key: "serviceLife",
                    render: (text, record) => {
                        return (
                            <div>{!!text && JSON.parse(text).toString()}</div>
                        );
                    }
                },
                {
                    title: "本次派单",
                    dataIndex: "serviceYear",
                    key: "serviceYear",
                    render: (text, record) => {
                        return (
                            <div>{!text ? "" : text}</div>
                        );
                    }
                },
                {
                    title: "项目说明",
                    dataIndex: "taskComment",
                    key: "taskComment",
                    render: (text) => {
                        return (
                            <Tooltip title={text}>
                                <div style={{
                                    maxWidth: '100px',
                                    overflow: 'hidden',
                                    textOverflow: "ellipsis",
                                    whiteSpace: 'nowrap',
                                }}>{text}</div>
                            </Tooltip>
                        );
                    },
                },
            ]
        }
        this.loaduser = this.loaduser.bind(this);
        this.jiedian = this.jiedian.bind(this);
        this.loadData = this.loadData.bind(this);
    }

    componentDidMount() {
        this.loaduser();
        this.jiedian();
        this.loadData();
    }

    //查看项目列表
    loadData(record) {
        this.setState({
            loading: 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.data) {
                    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;
                        thisdata.sort = thisdata.cSort;
                        thisdata.declarationBatch = thisdata.declarationBatch || undefined;//申报批次
                        thisdata.ifCertificationFee = isNaN(parseInt(thisdata.ifCertificationFee)) ? undefined : thisdata.ifCertificationFee;//是否包含申报批次
                        theArr.push(thisdata);
                    }
                }
                this.setState({
                    dataSource: theArr,
                });
            }.bind(this),
        }).always(
            function () {
                this.setState({
                    loading: false,
                });
            }.bind(this)
        );
    }

    loaduser() {
        $.ajax({
            method: "get",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + "/api/admin/newOrder/getOrderNewDetail",
            data: {
                orderNo: this.props.orderNo,
            },
            success: function (data) {
                let thisData = data.data;
                if (!thisData) {
                    if (data.error && data.error.length) {
                        message.warning(data.error[0].message);
                    }
                    thisData = {};
                }
                if (thisData.approval == 2) {
                    thisData.approval = "特批通过";
                } else if (thisData.approval == 3) {
                    thisData.approval = "特批驳回";
                }
                this.setState({
                    id: thisData.id,
                    kehuId: thisData.buyerId,
                    orderNo: thisData.orderNo, //订单编号
                    orderType: thisData.orderType, //订单类型
                    firstAmount: thisData.firstAmount, //首付金额
                    totalAmount: thisData.totalAmount, //总金额
                    settlementAmount: thisData.settlementAmount, //结算金额
                    liquidationStatus: thisData.liquidationStatus, //清算状态
                    examineName: thisData.examineName,
                    processStatus: thisData.processStatus, //流程状态
                    orderRemarks: thisData.orderRemarks, //订单备注
                    contractNo: thisData.contractNo, //合同编号
                    contacts: thisData.contacts, //联系人
                    contactMobile: thisData.contactMobile, //联系人电话
                    legalPerson: thisData.legalPerson, //法人
                    legalPersonTel: thisData.legalPersonTel, //法人电话
                    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"
                        )
                        : [], //图片地址
                    signDate: thisData.signDate, //签单时间
                    userName: thisData.userName, //客户名称
                    salesmanName: thisData.salesmanName, //营销员名称
                    salesmanMobile: thisData.salesmanMobile, //营销员电话
                    oldSalesmanName: thisData.oldSalesmanName, //营销员名称
                    oldSalesmanMobile: thisData.oldSalesmanMobile, //营销员电话
                    financeName: thisData.financeName, //财务名称
                    financeMobile: thisData.financeMobile, //财务电话
                    nowFinanceMobile: thisData.nowFinanceMobile,
                    nowFinance: thisData.nowFinance,
                    approval:
                        thisData.approval == 0
                            ? thisData.approval.toString()
                            : thisData.approval,
                    organizationSearch: thisData.orderDep,
                    depName: thisData.depName,
                    status: thisData.status,
                    outsource: thisData.outsource,
                    deleteSign: thisData.deleteSign,
                    orderUid: thisData.uid,
                });
            }.bind(this),
        }).always(
            function () {
                this.setState({
                    loading: false,
                });
            }.bind(this)
        );
    }

    jiedian() {
        this.setState({
            loadData: true,
        });
        $.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, //催款状态
                            orderNo: thisData.orderNo,
                        });
                    }
                    this.setState({
                        contactList: theArr,
                    });
                }
            }.bind(this),
        }).always(
            function () {
                this.setState({
                    loading: false,
                });
            }.bind(this)
        );
    }

    render() {
        const formItemList = [
            {
                label: "企业联系人",
                content: <span>{this.state.contacts}</span>,
            },
            {
                label: "客户名称",
                content: <span>
                    {this.state.userName}
                    <EnterpriseNameChange
                        type='journal'
                        style={{ marginLeft: 10 }}
                        enterpriseId={this.state.orderUid} />
                </span>,
            },
            {
                label: "联系人电话",
                content: <span>{this.state.contactMobile}</span>,
            },
            {
                label: "企业法人",
                content: <span>{this.state.legalPerson}</span>,
            },
            {
                label: "法人电话",
                content: <span>{this.state.legalPersonTel}</span>,
            },
        ];
        return (
            <Modal
                maskClosable={false}
                visible={this.props.visible}
                onOk={this.props.onCancel}
                onCancel={this.props.onCancel}
                width={800}
                title='订单详情'
                footer=""
                className="admin-desc-content"
            >
                <div className="clearfix">
                    <div className="clearfix">
                        <FormItem
                            className="half-item"
                            {...formItemLayout}
                            label="合同编号"
                        >
                            {<span>{this.state.contractNo}</span>}
                        </FormItem>
                        <FormItem
                            className="half-item"
                            {...formItemLayout}
                            label="订单编号"
                        >
                            <span>{this.state.orderNo}</span>
                        </FormItem>
                        <FormItem
                            className="half-item"
                            {...formItemLayout}
                            label="流程状态"
                        >
                            <span>
                                {getProcessStatus(this.state.processStatus, this.state.examineName, this.state.approval)}
                            </span>
                        </FormItem>
                        <FormItem
                            className="half-item"
                            {...formItemLayout}
                            label="结算状态"
                        >
                            <span>
                                {getLiquidationStatus(
                                    this.state.liquidationStatus
                                )}
                            </span>
                        </FormItem>
                        <div className="clearfix">
                            <FormItem
                                className="half-item"
                                {...formItemLayout}
                                label="特批立项"
                            >
                                <span>
                                    {getApprovedState(this.state.approval)}
                                </span>
                            </FormItem>
                            <FormItem
                                className="half-item"
                                {...formItemLayout}
                                label="合同签订时间"
                            >
                                <span>{this.state.signDate}</span>
                            </FormItem>
                            <FormItem
                                className="half-item"
                                {...formItemLayout}
                                label="订单部门"
                            >
                                <span>{this.state.depName}</span>
                            </FormItem>
                            <FormItem
                                className="half-item"
                                {...formItemLayout}
                                label="是否外包"
                            >
                                <span>
                                    {this.state.outsource == 0 ? "否" : "是"}
                                </span>
                            </FormItem>
                        </div>
                    </div>
                    <h3
                        style={{
                            marginLeft: 10,
                            fontWeight: 800,
                            marginBottom: 10,
                        }}
                    >
                        收款项目
                    </h3>
                    {this.state.processStatus === 0 ? (
                        <div className="clearfix">
                            <FormItem
                                className="half-item"
                                {...formItemLayout}
                                label="签单金额(万元)"
                            >
                                <Input
                                    placeholder="签单金额"
                                    ref="totalAmountRef"
                                    value={this.state.totalAmount}
                                    onChange={(e) => {
                                        this.setState({
                                            totalAmount: e.target.value,
                                        });
                                    }}
                                    style={{ width: "240px" }}
                                />
                            </FormItem>
                            <FormItem
                                className="half-item"
                                {...formItemLayout}
                                label="首付金额(万元)"
                            >
                                <Input
                                    placeholder="请输入实签首款金额"
                                    ref="firstAmountRef"
                                    value={this.state.firstAmount}
                                    onChange={(e) => {
                                        this.setState({
                                            firstAmount: e.target.value,
                                        });
                                    }}
                                    style={{ width: "240px" }}
                                />
                            </FormItem>
                            <FormItem
                                className="half-item"
                                {...formItemLayout}
                                label="已收款项"
                            >
                                <span>
                                    {this.state.settlementAmount + "万元"}
                                </span>
                            </FormItem>
                        </div>
                    ) : (
                        <div className="clearfix">
                            <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>
                                    {this.state.settlementAmount + "万元"}
                                </span>
                            </FormItem>
                        </div>
                    )}
                    <h3
                        style={{
                            marginLeft: 10,
                            fontWeight: 800,
                            marginBottom: 10,
                        }}
                    >
                        联系信息
                    </h3>
                    <div className="clearfix">
                        {formItemList.map((data, index) => {
                            return (
                                <FormItem
                                    className="half-item"
                                    {...formItemLayout}
                                    key={index}
                                    label={data.label}
                                >
                                    {data.content}
                                </FormItem>
                            );
                        })}
                    </div>
                    <div className="clearfix">
                        <div>
                            <FormItem
                                labelCol={{ span: 4 }}
                                wrapperCol={{ span: 18 }}
                                label="合同扫描件"
                            >
                                <div style={{ paddingTop: '10px', paddingBottom: '10px' }}>
                                    {this.state.orgCodeUrl && this.state.visible && this.state.activeKey === '1' ? <ImgList domId={'addService3'} fileList={this.state.orgCodeUrl} ItemWidth={'96px'} /> : <div />}
                                </div>
                                <Modal
                                    maskClosable={false}
                                    footer={null}
                                    width={"50%"}
                                    visible={this.state.previewVisible}
                                    onCancel={() => {
                                        this.setState({
                                            previewVisible: false,
                                            rotateDeg: 0,
                                        });
                                    }}
                                >
                                    <img
                                        alt=""
                                        style={{
                                            width: "100%",
                                            transform: `rotate(${this.state.rotateDeg}deg)`,
                                        }}
                                        src={this.state.previewImage || ""}
                                    />
                                    <Button
                                        onClick={this.rotate}
                                        style={{
                                            position: "relative",
                                            left: "50%",
                                            transform: "translateX(-50%)",
                                        }}
                                    >
                                        旋转
                                    </Button>
                                    <Button
                                        onClick={this.upImg}
                                        style={{
                                            position: "absolute",
                                            left: -81,
                                            top: "50%",
                                            transform: "translateY(-50%)",
                                        }}
                                    >
                                        上一张
                                    </Button>
                                    <Button
                                        onClick={this.downImg}
                                        style={{
                                            position: "absolute",
                                            right: -81,
                                            top: "50%",
                                            transform: "translateY(-50%)",
                                        }}
                                    >
                                        下一张
                                    </Button>
                                </Modal>
                                <Button
                                    style={{
                                        float: "right",
                                        marginRight: "140px",
                                        marginTop: "20px",
                                    }}
                                    onClick={this.getOrderLog}
                                >
                                    查看订单日志
                                </Button>
                            </FormItem>
                            <FormItem
                                labelCol={{ span: 4 }}
                                wrapperCol={{ span: 18 }}
                                label="补充协议"
                            >
                                {/*<Upload*/}
                                {/*  className="demandDetailShow-upload"*/}
                                {/*  listType="picture-card"*/}
                                {/*  fileList={this.state.replenishUrl}*/}
                                {/*  onPreview={(file) => {*/}
                                {/*    this.setState({*/}
                                {/*      previewImage: file.url || file.thumbUrl,*/}
                                {/*      previewVisibles: true,*/}
                                {/*    });*/}
                                {/*  }}*/}
                                {/*/>*/}
                                <div style={{ paddingTop: '10px', paddingBottom: '10px' }}>
                                    {
                                        this.state.visible && this.state.activeKey === '1' && this.state.replenishUrl ?
                                            <ImgList domId={'addService4'} fileList={this.state.replenishUrl} ItemWidth={'96px'} /> :
                                            <div />
                                    }
                                </div>
                                <Modal
                                    maskClosable={false}
                                    footer={null}
                                    width={"50%"}
                                    visible={this.state.previewVisibles}
                                    onCancel={() => {
                                        this.setState({
                                            previewVisibles: false,
                                            rotateDeg: 0,
                                        });
                                    }}
                                >
                                    <img
                                        alt=""
                                        style={{
                                            width: "100%",
                                            transform: `rotate(${this.state.rotateDeg}deg)`,
                                        }}
                                        src={this.state.previewImage || ""}
                                    />
                                    <Button
                                        onClick={this.rotates}
                                        style={{
                                            position: "relative",
                                            left: "50%",
                                            transform: "translateX(-50%)",
                                        }}
                                    >
                                        旋转
                                    </Button>
                                    <Button
                                        onClick={this.upImgs}
                                        style={{
                                            position: "absolute",
                                            left: -81,
                                            top: "50%",
                                            transform: "translateY(-50%)",
                                        }}
                                    >
                                        上一张
                                    </Button>
                                    <Button
                                        onClick={this.downImgs}
                                        style={{
                                            position: "absolute",
                                            right: -81,
                                            top: "50%",
                                            transform: "translateY(-50%)",
                                        }}
                                    >
                                        下一张
                                    </Button>
                                </Modal>
                            </FormItem>
                        </div>
                    </div>
                    <ContentUrl
                        processStatus={2}
                        domId={"inforContents"}
                        contentUrl={this.state.contentUrl}
                        imgId={"inforContentsImg"}
                    />
                    <div className="clearfix">
                        <FormItem
                            labelCol={{ span: 4 }}
                            wrapperCol={{ span: 16 }}
                            label="订单留言"
                        >
                            <p
                                style={{ width: 500, wordWrap: "break-word" }}
                            >
                                {this.state.orderRemarks}
                            </p>
                        </FormItem>
                    </div>
                    <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"
                        style={{ marginBottom: 10 }}
                    >
                        <Spin spinning={this.state.loading}>
                            <Table
                                columns={this.state.columns}
                                scroll={{ x: "max-content", y: 0 }}
                                dataSource={this.state.dataSource}
                                pagination={false}
                                onRowClick={this.tableRowClick}
                                bordered
                                size="small"
                            />
                        </Spin>
                    </div>
                </div>
            </Modal>
        )
    }
}

export default OrderInfor;