123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384 |
- import React, { Component } from "react";
- import { Form, Upload, Modal, Button, Table, Col } from "antd";
- import {
- splitUrl,
- getProcessStatus,
- getjiedian,
- getLiquidationStatus,
- getboutique,
- getCuikuan,
- getApprovedState,
- getProjectStatus
- } from "@/tools.js";
- const FormItem = Form.Item;
- class OrderDetail extends Component {
- constructor(props) {
- super(props);
- this.state = {
- ContactsLists: [
- {
- title: "催款科目",
- dataIndex: "dunSubject",
- key: "dunSubject",
- render: text => {
- return getjiedian(text);
- }
- },
- {
- title: "金额(万)",
- dataIndex: "money",
- key: "money",
- render: text => {
- return this.props.processState === 2 ? "***" : text;
- }
- },
- {
- title: "催款状态",
- dataIndex: "dunStatus",
- key: "dunStatus",
- render: text => {
- return getCuikuan(text);
- }
- }
- ],
- columnsX: [
- {
- title: "业务项目名称",
- dataIndex: "commodityName",
- key: "commodityName"
- },
- {
- title: "项目类别",
- dataIndex: "cname",
- key: "cname"
- },
- {
- title: "项目数量",
- dataIndex: "commodityQuantity",
- key: "commodityQuantity"
- },
- {
- 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;
- }
- }
- ]
- };
- this.tableRowClickX = this.tableRowClickX.bind(this);
- this.nextCancel = this.nextCancel.bind(this);
- }
- //项目详情关闭
- 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
- });
- }
- render() {
- const formItemLayout = {
- labelCol: { span: 8 },
- wrapperCol: { span: 14 }
- };
- const data = this.props.orderData;
- return (
- <div className="clearfix">
- <FormItem className="half-item" {...formItemLayout} label="订单编号">
- <span>{this.props.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>
- </FormItem>
- <FormItem className="half-item" {...formItemLayout} label="联系人电话">
- <span>{data.contactMobile}</span>
- </FormItem>
- <FormItem className="half-item" {...formItemLayout} label="企业法人">
- <span>{data.legalPerson}</span>
- </FormItem>
- <FormItem className="half-item" {...formItemLayout} label="法人电话">
- <span>{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>
- <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}
- visible={this.state.previewVisible}
- onCancel={() => {
- this.setState({ previewVisible: false });
- }}
- >
- <img
- alt=""
- style={{ width: "100%" }}
- src={this.state.previewImage || ""}
- />
- </Modal>
- <Button
- style={{
- float: "right",
- marginRight: "140px",
- marginTop: "20px"
- }}
- onClick={() => {
- this.props.getOrderLog(data.orderNo);
- }}
- >
- 查看订单日志
- </Button>
- </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.financeName}</span>
- </FormItem>
- <FormItem
- className="half-item"
- {...formItemLayout}
- label="财务负责人电话"
- >
- <span>{data.financeMobile}</span>
- </FormItem>
- </div>
- <div>
- <span style={{ marginLeft: "50px", fontSize: "20px" }}>催款节点</span>
- </div>
- <div className="clearfix">
- <Form layout="horizontal" id="demand-form">
- <Table
- pagination={false}
- columns={this.state.ContactsLists}
- dataSource={this.props.contactList}
- />
- <Col span={24} offset={9} style={{ marginTop: "15px" }}></Col>
- </Form>
- </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}
- />
- </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;
|