kede-client/js/component/manageCenter/order/orderNew/changeComponent/orderDetail.js

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 NewEditProject from "../../../../common/projectOperation/newEditProject";
import OrderCoor from "./orderCoor"
import ContentUrl from "../contentUrl";
import FlowChart from '../../../../common/flowchart'; // 流程图
import Gxczx from '../../../../common/orderDetail/gxczx' // 高新纯咨询合同说明详情
import Property from '../../../../common/orderDetail/property' // 知识产权情况


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;
            return text == null ? "***" : 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",
          width: 50,
          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={{
                    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
    })
  }
  // 可展开颜色不同
  addRowColor(record) {
    if (!!record.splitList && record.splitList.length > 0) {
      return 'light'
    } else {
      return 'dark'
    }
  }

  render() {
    let domId = this.props.domId;
    domId = domId ? domId.substr(0, 4) : ''
    const formItemLayout = {
      labelCol: { span: 10 },
      wrapperCol: { span: 14 }
    };
    const data = this.props.orderData || {};
    const propsList = this.props.contactList || [];
    const expandedRowRenderVip = (e) => {
      const data = e.splitList;
      let columns = [];
      if (data instanceof Array && data.length) {
        if (e.cSort == 6) {
          columns = [
            {
              title: "负责人",
              dataIndex: "receiverName",
              key: "receiverName",
            },
            {
              title: "负责人电话",
              dataIndex: "receiverMobile",
              key: "receiverMobile",
            },
            {
              title: "项目状态",
              dataIndex: "projectStatus",
              key: "projectStatus",
              render: (text) => {
                return getProjectName(text);
              },
            },
            {
              title: "本次派单",
              dataIndex: "serviceYear",
              key: "serviceYear",
            },
            {
              title: "项目说明",
              dataIndex: "taskComment",
              key: "taskComment",
              render: (text) => {
                return (
                  <Tooltip title={text}>
                    <div
                    >{text}</div>
                  </Tooltip>
                )
              },
            },
          ];
        } else {
          columns = [
            {
              title: "子项目名称",
              dataIndex: "taskName",
              key: "taskName"
            },
            {
              title: "子项目数量",
              dataIndex: "commodityQuantity",
              key: "commodityQuantity"
            },
            {
              title: "拆分操作人",
              dataIndex: "splitAname",
              key: "splitAname"
            },
            {
              title: "项目负责人",
              dataIndex: "receiverName",
              key: "receiverName"
            },
            {
              title: "拆分时间",
              dataIndex: "splitTimes",
              key: "splitTimes"
            }
          ]
        }
        return (
          <Table
            columns={columns}
            dataSource={data}
            pagination={false}
          />
        );
      } else {
        columns = [];
        return (
          <p
            style={{ fontWeight: "bold", color: "red", textAlign: "center" }}
          >
            {e.cSort == 6 ? "暂无派单" : "此项目暂未拆分"}
          </p>
        );
      }
    };
    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, data.examineName, data.approval)}</span>
          <FlowChart
            orderNo={data.orderNo || this.props.orderNo}
          />
        </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 === 3 ? "***" : data.totalAmount}
          </span>
        </FormItem>
        <FormItem
          className="half-item"
          {...formItemLayout}
          label="首付金额(万元)"
        >
          <span>
            {this.props.processState === 3 ? "***" : 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 === 3 ? "***" : 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: 5 }}
            wrapperCol={{ span: 19 }}
            label="订单留言"
          >
            <p style={{ width: 500, wordWrap: "break-word" }}>
              {data.orderRemarks}
            </p>
          </FormItem>
        </div>
        <div className="clearfix">
          <FormItem
            labelCol={{ span: 5 }}
            wrapperCol={{ span: 19 }}
            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 />
            }
            <Button
              style={{
                float: "right",
                marginRight: "140px",
                marginTop: "20px",
              }}
              onClick={() => {
                this.props.getOrderLog(data.orderNo);
              }}
            >
              查看订单日志
            </Button>
          </FormItem>

          {/* 高新纯咨询合同说明详情 */}
          <Gxczx
            knowledgeServices={data.knowledgeServices}
            auditServices={data.auditServices}
            addDeductionServices={data.addDeductionServices}
            knowledgeOther={data.knowledgeOther}
            auditOther={data.auditOther}
            addDeductionOther={data.addDeductionOther}
          />

          <FormItem
            labelCol={{ span: 5 }}
            wrapperCol={{ span: 19 }}
            label="补充协议"
          >
            <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>
          </FormItem>
        </div>
        <ContentUrl
          processStatus={2}
          domId={"orderContent"}
          contentUrl={data.serviceContent ? splitUrl(data.serviceContent, ",", globalConfig.avatarHost + "/upload") : []}
          imgId={"orderImg1x"}
        //  getContentUrl = {this.getContentUrl}
        />

        <Property
          patentStatus={data.patentStatus}
        />

        <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}
            expandedRowRender={expandedRowRenderVip}
            rowClassName={this.addRowColor}
            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 &&
          <NewEditProject
            readOnly={
              this.state.dataInfor &&
              Object.keys(this.state.dataInfor).length > 0 &&
              this.state.processStatus !== 0
            }
            visible={this.state.visible}
            dataInfor={this.state.dataInfor}
            onCancel={this.nextCancel}
          />
          // <ProjectDetailsReadOnly
          //   infor={this.state.dataInfor}
          //   visible={this.state.visible}
          //   onCancel={this.nextCancel}
          // />
        }
      </div>
    );
  }
}

export default OrderDetail;