import React, { Component } from "react"; import { Form, Upload, Modal, Button, Table, Col, message, Tag } from "antd"; import { splitUrl, getProcessStatus, getjiedian, getLiquidationStatus, getboutique, getCuikuan, getApprovedState, getProjectStatus } from "@/tools.js"; import img from "./img.png" import ResolutionDetail from "@/resolutionDetail"; const FormItem = Form.Item; class OrderDetail extends Component { constructor(props) { super(props); this.state = { 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>; } } } }, { 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 && !record.money) { return <span>{record.appropriationRatio}(拨款比例)</span>; } else if (record.appropriationRatio && record.money) { return ( <span> {text}(比例:{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); } } ], resVisible: 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", 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 getProjectStatus(text); } }, { 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; } } ], 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({ 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() { console.log(this.props.pictureUrl); 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() { const formItemLayout = { labelCol: { span: 8 }, wrapperCol: { span: 14 } }; const data = this.props.orderData; const propsList = this.props.contactList || []; return ( <div className="clearfix" ref={(e) => { this.refs = e; }} > {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> </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="合同扫描件" > <Upload className="demandDetailShow-upload" listType="picture-card" fileList={ data.contractPictureUrl ? splitUrl( data.contractPictureUrl, ",", globalConfig.avatarHost + "/upload" ) : [] } onPreview={(file) => { this.setState({ previewImage: file.url || file.thumbUrl, previewVisible: true, }); }} /> <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, }); }} /> <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> <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> <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} 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> <Modal maskClosable={false} visible={this.state.visible} onOk={this.nextCancel} onCancel={this.nextCancel} width="800px" title={"项目任务详情"} footer="" className="admin-desc-content" > <Form layout="horizontal" id="demand-form"> <div className="clearfix"> <FormItem className="half-item" {...formItemLayout} label="项目名称" > <span>{this.state.commodityName}</span> </FormItem> <FormItem className="half-item" {...formItemLayout} label="项目数量" > <span>{this.state.commodityQuantity}</span> </FormItem> <FormItem className="half-item" {...formItemLayout} label="金额(万元)" > <span>{this.state.commodityPrice}</span> </FormItem> <FormItem className="half-item" {...formItemLayout} label="主要项目" > <span>{getboutique(this.state.main)}</span> </FormItem> <div className="clearfix"> <FormItem labelCol={{ span: 4 }} wrapperCol={{ span: 16 }} label="服务说明" > <span>{this.state.taskComment}</span> </FormItem> </div> </div> </Form> </Modal> </div> ); } } export default OrderDetail;