import React, { Component } from "react"; import { Form, Upload, Modal, Button, Table, Col, message, Tag, Tooltip } from "antd"; import { splitUrl, getProcessStatus, getjiedian, getLiquidationStatus, getboutique, getCuikuan, getApprovedState, getProjectStatus } from "@/tools.js"; import img from "./img.png" import ResolutionDetail from "@/resolutionDetail"; import ImgList from "../../../../common/imgList"; import { getProjectName } from "../../../../tools"; import { salesList } from "@/dataDic.js"; import ProjectDetailsReadOnly from "../../../../common/projectDetailsReadOnly"; import EnterpriseNameChange from "../../../../common/enterpriseNameChange"; import OrderCoor from "./orderCoor" import ContentUrl from "../contentUrl"; const FormItem = Form.Item; class OrderDetail extends Component { constructor(props) { super(props); this.state = { dataInfor: {}, contentUrl: [], newContactsLists: [ { title: "项目名称", dataIndex: "commodityName", key: "commodityName", render: (text, record) => { return <span>{text + "-" + record.tid}</span>; } }, { title: "项目分类", dataIndex: "projectType", key: "projectType", render: text => { let arr = this.props.dataSourceX || []; let str = ""; for (let i = 0; i < arr.length; i++) { if (this.props.dataSourceX[i].sort == text) { str = this.props.dataSourceX[i].cname; return <span>{str}</span>; } } if (!str) { return <span>未知</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) { let percent = Number(record.appropriationRatio * 100).toFixed(2); percent += "%"; return <span>{percent}(拨款比例)</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); } } ], resVisible: false, columnsX: [ { 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", render: text => { return this.props.processState === 2 ? "***" : text; } }, { 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 ( !!text && JSON.parse(text).map(item => <div>{item}</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={{ width: 100, overflow: "hidden", whiteSpace: "nowrap", textOverflow: "ellipsis", }} >{text}</div> </Tooltip> ) } } ], rotateDeg: 0 }; this.tableRowClickX = this.tableRowClickX.bind(this); this.nextCancel = this.nextCancel.bind(this); this.rotate = this.rotate.bind(this); this.downImg = this.downImg.bind(this); this.upImg = this.upImg.bind(this); this.downImgs = this.downImgs.bind(this); this.upImgs = this.upImgs.bind(this); this.showRes = this.showRes.bind(this); this.resCancel = this.resCancel.bind(this); } rotate() { let rotateDeg = this.state.rotateDeg + 90; this.setState({ rotateDeg }); } //项目详情关闭 nextCancel() { this.setState({ visible: false }); } //点击打卡项目详情 tableRowClickX(record) { this.setState({ dataInfor: record, jid: record.id, //项目ID kid: record.commodityId, //商品ID commodityName: record.commodityName, //金额 commodityPrice: record.commodityPrice, //金额 commodityQuantity: record.commodityQuantity, //数量 taskComment: record.taskComment, //备注 main: record.main.toString(), //是否为主要 visible: true, addState: 0 }); } downImg() { const data = this.props.orderData; let num = 0; for ( let i = 0; i < splitUrl( data.contractPictureUrl, ",", globalConfig.avatarHost + "/upload" ).length; i++ ) { if ( splitUrl( data.contractPictureUrl, ",", globalConfig.avatarHost + "/upload" )[i].url == this.state.previewImage ) { num = i; } } if ( num == splitUrl( data.contractPictureUrl, ",", globalConfig.avatarHost + "/upload" ).length - 1 ) { return message.warning("已经是最后一张了哦"); } this.state.previewImage = splitUrl( data.contractPictureUrl, ",", globalConfig.avatarHost + "/upload" )[num + 1].url; this.setState({ previewImage: this.state.previewImage, rotateDeg: 0 }); } upImg() { const data = this.props.orderData; let num = 0; for ( let i = 0; i < splitUrl( data.contractPictureUrl, ",", globalConfig.avatarHost + "/upload" ).length; i++ ) { if ( splitUrl( data.contractPictureUrl, ",", globalConfig.avatarHost + "/upload" )[i].url == this.state.previewImage ) { num = i; } } if (num == 0) { return message.warning("已经是第一张了哦"); } this.state.previewImage = splitUrl( data.contractPictureUrl, ",", globalConfig.avatarHost + "/upload" )[num - 1].url; this.setState({ previewImage: this.state.previewImage, rotateDeg: 0 }); } downImgs() { const data = this.props.orderData; let num = 0; for ( let i = 0; i < splitUrl( data.rep, ",", globalConfig.avatarHost + "/upload" ).length; i++ ) { if ( splitUrl(data.agreementUrl, ",", globalConfig.avatarHost + "/upload")[i] .url == this.state.previewImage ) { num = i; } } if ( num == splitUrl(data.agreementUrl, ",", globalConfig.avatarHost + "/upload") .length - 1 ) { return message.warning("已经是最后一张了哦"); } this.state.previewImage = splitUrl( data.agreementUrl, ",", globalConfig.avatarHost + "/upload" )[num + 1].url; this.setState({ previewImage: this.state.previewImage, rotateDeg: 0 }); } upImgs() { const data = this.props.orderData; let num = 0; for ( let i = 0; i < splitUrl(data.agreementUrl, ",", globalConfig.avatarHost + "/upload") .length; i++ ) { if ( splitUrl(data.agreementUrl, ",", globalConfig.avatarHost + "/upload")[i] .url == this.state.previewImage ) { num = i; } } if (num == 0) { return message.warning("已经是第一张了哦"); } this.state.previewImage = splitUrl( data.agreementUrl, ",", globalConfig.avatarHost + "/upload" )[num - 1].url; this.setState({ previewImage: this.state.previewImage, rotateDeg: 0 }); } // 拆分详细 showRes(record) { this.setState({ resVisible: true, resRecord: record }) } resCancel() { this.setState({ resVisible: false }) } render() { let domId = this.props.domId; domId = domId ? domId.substr(0, 4) : '' // console.log(typeof domId); const formItemLayout = { labelCol: { span: 8 }, wrapperCol: { span: 14 } }; const data = this.props.orderData; const propsList = this.props.contactList || []; return ( <div className="clearfix"> {this.state.resVisible ? ( <ResolutionDetail cancel={this.resCancel} detail={this.state.resRecord} visible={this.state.resVisible} id={this.state.resRecord.orderNo} /> ) : ( "" )} <FormItem className="half-item" {...formItemLayout} label="订单编号"> <span>{data.orderNo}</span> </FormItem> <FormItem className="half-item" {...formItemLayout} label="合同编号"> <span>{data.contractNo}</span> </FormItem> <FormItem className="half-item" {...formItemLayout} label="客户名称"> <span>{data.userName}</span> <EnterpriseNameChange type='journal' style={{ marginLeft: 10 }} enterpriseId={this.props.orderUid} /> </FormItem> <FormItem className="half-item" {...formItemLayout} label="销售类型" > <span> {(["私有客户-", "签单客户-"][data.userType] || " ") + (salesList[data.salesType] || "")} { data.other != null && data.other != "" && <Tooltip title={data.other}> <span> {"(" + data.other.toString().slice(0, 10) + (data.other.toString().length > 9 ? "...)" : ")")} </span> </Tooltip> } </span> {/* <span>{(["私有客户-", "签单客户-"][data.userType] || " ") + (salesList[data.salesType] || "")}</span> */} </FormItem> <FormItem className="half-item" {...formItemLayout} label="合同签订时间" > <span>{data.signDate}</span> </FormItem> <FormItem className="half-item" {...formItemLayout} label="流程状态"> <span>{getProcessStatus(data.processStatus)}</span> </FormItem> <FormItem className="half-item" {...formItemLayout} label="结算状态"> <span>{getLiquidationStatus(data.liquidationStatus)}</span> </FormItem> <FormItem className="half-item" {...formItemLayout} label="企业联系人"> {/* <span>{data.contacts}</span> */} <span>{this.props.isCaiWu ? "***" : data.contacts}</span> </FormItem> <FormItem className="half-item" {...formItemLayout} label="联系人电话"> {/* <span>{data.contactMobile}</span> */} <span>{this.props.isCaiWu ? "***" : data.contactMobile}</span> </FormItem> <FormItem className="half-item" {...formItemLayout} label="企业法人"> <span>{this.props.isCaiWu ? "***" : data.legalPerson}</span> </FormItem> <FormItem className="half-item" {...formItemLayout} label="法人电话"> {/* <span>{data.legalPersonTel}</span> */} <span>{this.props.isCaiWu ? "***" : data.legalPersonTel}</span> </FormItem> <FormItem className="half-item" {...formItemLayout} label="签单金额(万元)" > <span> {this.props.processState === 2 ? "***" : data.totalAmount} </span> </FormItem> <FormItem className="half-item" {...formItemLayout} label="首付金额(万元)" > <span> {this.props.processState === 2 ? "***" : data.firstAmount} </span> </FormItem> <FormItem className="half-item" {...formItemLayout} label="特批立项"> <span>{getApprovedState(data.approval)}</span> </FormItem> <FormItem className="half-item" {...formItemLayout} label="已收款项(万元)" > <span> {this.props.processState === 2 ? "***" : data.settlementAmount} </span> </FormItem> <FormItem className="half-item" {...formItemLayout} label="订单部门"> <span>{data.depName}</span> </FormItem> <FormItem className="half-item" {...formItemLayout} label="是否外包"> {data.outsource == 0 ? "否" : "是"} </FormItem> <div className="clearfix"> <FormItem labelCol={{ span: 4 }} wrapperCol={{ span: 16 }} label="订单留言" > <p style={{ width: 500, wordWrap: "break-word" }}> {data.orderRemarks} </p> </FormItem> </div> <div className="clearfix"> <FormItem labelCol={{ span: 4 }} wrapperCol={{ span: 18 }} label="合同扫描件" > {this.props.orderData && data.contractPictureUrl ? <ImgList domId={this.props.domId ? this.props.domId : 'orderDetail1'} fileList={ data.contractPictureUrl ? splitUrl(data.contractPictureUrl, ",", globalConfig.avatarHost + "/upload") : [] } /> : <div /> } <Modal maskClosable={false} footer={null} width={"50%"} visible={this.state.previewVisible} onCancel={() => { this.state.rotateDeg = 0; this.setState({ previewVisible: false, rotateDeg: this.state.rotateDeg, }); }} > <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.props.getOrderLog(data.orderNo); }} > 查看订单日志 </Button> </FormItem> <FormItem labelCol={{ span: 4 }} wrapperCol={{ span: 18 }} label="补充协议" > {/*<Upload*/} {/* className="demandDetailShow-upload"*/} {/* listType="picture-card"*/} {/* fileList={*/} {/* data.agreementUrl*/} {/* ? splitUrl(*/} {/* data.agreementUrl,*/} {/* ",",*/} {/* globalConfig.avatarHost + "/upload"*/} {/* )*/} {/* : []*/} {/* }*/} {/* onPreview={(file) => {*/} {/* this.setState({*/} {/* previewImage: file.url || file.thumbUrl,*/} {/* previewVisibles: true,*/} {/* });*/} {/* }}*/} {/*/>*/} <div style={{ paddingTop: '10px', paddingBottom: '10px' }}> <ImgList domId={this.props.domId ? this.props.domId + '1' : 'orderDetail2'} fileList={ data.agreementUrl ? splitUrl(data.agreementUrl, ",", globalConfig.avatarHost + "/upload") : [] } /> </div> <Modal maskClosable={false} footer={null} width={"50%"} visible={this.state.previewVisibles} onCancel={() => { this.state.rotateDeg = 0; this.setState({ previewVisibles: false, rotateDeg: this.state.rotateDeg, }); }} > <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.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> <ContentUrl processStatus={1} domId={"orderContent"} contentUrl={data.serviceContent ? splitUrl(data.serviceContent, ",", globalConfig.avatarHost + "/upload") : []} imgId={"orderImg1x"} // getContentUrl = {this.getContentUrl} /> <div className="clearfix"> <FormItem className="half-item" {...formItemLayout} label="订单负责人" > <span>{data.salesmanName}</span> </FormItem> <FormItem className="half-item" {...formItemLayout} label="订单负责人电话" > <span>{data.salesmanMobile}</span> </FormItem> </div> <div className="clearfix"> <FormItem className="half-item" {...formItemLayout} label="当前财务负责人" > <span>{data.nowFinance}</span> </FormItem> <FormItem className="half-item" {...formItemLayout} label="当前财务负责人电话" > <span>{data.nowFinanceMobile}</span> </FormItem> </div> <div className="clearfix"> <FormItem className="half-item" {...formItemLayout} style={{ opacity: ".5" }} label="原订单负责人" > <span>{data.oldSalesmanName}</span> </FormItem> <FormItem className="half-item" {...formItemLayout} style={{ opacity: ".5" }} label="原订单负责人电话" > <span>{data.oldSalesmanMobile}</span> </FormItem> </div> <div className="clearfix"> <FormItem className="half-item" style={{ opacity: ".5" }} {...formItemLayout} label="实际财务操作人" > <span>{data.financeName}</span> </FormItem> <FormItem className="half-item" {...formItemLayout} style={{ opacity: ".5" }} label="实际财务操作人电话" > <span>{data.financeMobile}</span> </FormItem> </div> {domId == 'yuan' ? "" : <OrderCoor orderNo={this.props.orderNo} />} <div> <span style={{ marginLeft: "50px", fontSize: "20px" }}>项目业务</span> </div> <div className="patent-table"> <Table columns={this.state.columnsX} pagination={false} dataSource={this.props.dataSourceX} onRowClick={this.tableRowClickX} style={{ cursor: 'pointer', }} bordered size="small" /> </div> <div> <span style={{ marginLeft: "50px", fontSize: "20px" }}>催款节点</span> <span style={{ display: propsList.length ? "none" : "inline-block", marginLeft: 10, color: "red", }} > 金额总计(万元): {this.props.totalCui} </span> </div> <div className="clearfix"> <Form layout="horizontal" id="demand-form"> <Table pagination={false} bordered size="small" // columns={this.state.ContactsLists} columns={ propsList.length ? this.state.ContactsLists : this.state.newContactsLists } dataSource={ propsList.length ? this.props.contactList : this.props.contactListNew } /> <Col span={24} offset={9} style={{ marginTop: "15px" }}></Col> </Form> </div> {this.state.visible && <ProjectDetailsReadOnly infor={this.state.dataInfor} visible={this.state.visible} onCancel={this.nextCancel} />} </div> ); } } export default OrderDetail;