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;