kede-client/js/component/manageCenter/financialManage/orderDetail/orderDetail.jsx

import React from 'react';
import $ from 'jquery/src/ajax';
import {
	Modal,
	message,
	Spin,
	Upload,
	Button,
    Form,
    Table,
    Col,
    Tag
} from 'antd';
import {
  getjiedian,
  splitUrl,
  getNewOrderType,
  getProcessStatus,
  getApproval,
  getLiquidationStatus,
  getboutique,
  getCuikuan,
} from "@/tools";
import OrderRiZi from "@/orderRiZi.jsx";
import ResolutionDetail from "@/resolutionDetail";
import ImgList from "../../../common/imgList";
import {getProjectName} from "../../../tools";
import ProjectDetailsReadOnly from "../../../common/projectDetailsReadOnly";
import OrderItemStatus from "../../../common/orderItemStatus";
import EnterpriseNameChange from "../../../common/enterpriseNameChange";
const OrderDetail = Form.create()(
  React.createClass({
    loadXmu(record) {
      this.state.data = [];
      this.setState({
        loading: true,
      });
      $.ajax({
        method: "get",
        dataType: "json",
        crossDomain: false,
        url: globalConfig.context + "/api/admin/newOrder/getOrderTask",
        data: {
          orderNo: record ? record.orderNo : this.props.data.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;
              theArr.push(thisdata);
            }
          }
          this.setState({
            dataSource: theArr,
            pagination: false,
          });
        }.bind(this),
      }).always(
        function () {
          this.setState({
            loading: false,
          });
        }.bind(this)
      );
    },
    getInitialState() {
      return {
        rotateDeg: 0,
        visible: false,
        avisible: false,
        loading: false,
        declarationBatch: 1,
        dataInfor: {},
        addnextVisible:false,
        jsDate: [],
        replenishUrl: [],
        auditStatus: 0,
        textFileList: [],
        videoFileList: [],
        previewVisibles: false,
        pictureUrl: [],
        pictureUrlMin: [],
        columns: [
          {
            title: "业务项目名称",
            dataIndex: "commodityName",
            key: "commodityName",
            render: (text, record) => {
              return text && text.length > 6 ? (
                <span title={text}>
                  {text.substr(0, 8) + "-" + record.id}...
                </span>
              ) : (
                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",
          },
          {
            title: "项目状态",
            dataIndex: "projectStatus",
            key: "projectStatus",
            render: (text) => {
              return getProjectName(text);
            },
          },
          {
            title: "证书编号",
            dataIndex: "certificateNumber",
            key: "certificateNumber",
          },
          {
            title: "是否主要项目",
            dataIndex: "main",
            key: "main",
            render: (text) => {
              return text ? "是" : "否";
            },
          },
          {
            title: "项目说明",
            dataIndex: "taskComment",
            key: "taskComment",
            render: (text) => {
              return text && text.length > 8 ? (
                <span title={text}>{text.substr(0, 8)}...</span>
              ) : (
                text
              );
            },
          },
        ],
        columnsX: [
          {
            title: "流程",
            dataIndex: "processName",
            key: "processName",
          },
          {
            title: "操作人",
            dataIndex: "adminName",
            key: "adminName",
          },
          {
            title: "时间",
            dataIndex: "createDate",
            key: "createDate",
          },
        ],
        ContactsListsNew: [
          {
            title: "项目名称",
            dataIndex: "commodityName",
            key: "commodityName",
            render: (text, record) => {
              return <span>{text + "-" + record.tid}</span>;
            },
          },
          {
            title: "项目分类",
            dataIndex: "projectType",
            key: "projectType",
            render: (text) => {
              let arr = this.state.dataSource || [];
              let str = "";
              for (let i = 0; i < arr.length; i++) {
                if (this.state.dataSource[i].sort == text) {
                  str = this.state.dataSource[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) {
                  return <span>{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);
            },
          },
        ],
      };
    },
    //点击打卡项目详情
    tableRowClick(record) {
      if (record.type == "1") {
        this.setState({
          displayFees: "block",
          costReduction: record.costReduction,
          officialCost: record.officialCost,
        });
      }else{
        this.setState({
          displayFees: "none",
        });
      }
      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(), //是否为主要
        addnextVisible: true,
        dataInfor:record,
        addState: 0,
      });
    },
    //项目详情关闭
    nextCancel() {
      this.setState({
        addnextVisible: false,
        displayFees: "none",
        officialCost: "", //是否有官费
        costReduction: "", //是否有费减
      });
    },
    // 拆分详细
    showRes(record) {
      this.setState({
        resVisible: true,
        resRecord: record,
      });
    },
    resCancel() {
      this.setState({
        resVisible: false,
      });
    },

    loadData(record) {
      this.state.orderList = [];
      $.ajax({
        method: "get",
        dataType: "json",
        crossDomain: false,
        url: globalConfig.context + "/api/admin/newOrder/getOrderNewDetail",
        data: {
          orderNo: record ? record.orderNo : this.props.data.orderNo,
        },
        success: function (data) {
          let thisData = data.data;
          if (!thisData) {
            if (data.error && data.error.length) {
              message.warning(data.error[0].message);
            }
            thisData = {};
          }
          this.setState({
            id: thisData.id,
            orderUid: thisData.uid,
            orderList: thisData,
            approval:
              thisData.approval == 0
                ? thisData.approval.toString()
                : thisData.approval,
            orderRemarks: thisData.orderRemarks,
            orgCodeUrl: thisData.contractPictureUrl
              ? splitUrl(
                  thisData.contractPictureUrl,
                  ",",
                  globalConfig.avatarHost + "/upload"
                )
              : [],
            replenishUrl: thisData.agreementUrl
              ? splitUrl(
                  thisData.agreementUrl,
                  ",",
                  globalConfig.avatarHost + "/upload"
                )
              : [],
            orderNo: thisData.orderNo, //订单编号
            buyerId: thisData.buyerId,
            depName: thisData.depName,
            outsource: thisData.outsource == 0 ? "否" : "是",
            deleteSign:thisData.deleteSign,
          });
        }.bind(this),
      }).always(
        function () {
          this.setState({
            loading: false,
          });
        }.bind(this)
      );
    },
    jdDate(record) {
      $.ajax({
        method: "get",
        dataType: "json",
        crossDomain: false,
        url: globalConfig.context + "/api/admin/newOrder/selectOrderDun",
        data: {
          orderNo: record ? record.orderNo : this.props.data.orderNo,
        },
        success: function (data) {
          let thisData = data.data;
          if (!thisData.length) {
            if (data.error && data.error.length) {
              message.warning(data.error[0].message);
            }
            thisData = {};
          } else {
            this.setState({
              jsDate: thisData,
            });
          }
        }.bind(this),
      }).always(
        function () {
          this.setState({
            loading: false,
          });
        }.bind(this)
      );
    },

    rizhi() {
      this.setState({
        loading: true,
      });
      $.ajax({
        method: "get",
        dataType: "json",
        crossDomain: false,
        url: "/api/admin/newOrder/selectOrderLog",
        data: {
          orderNo: this.props.data.orderNo,
        },
        success: function (data) {
          let theArr = [];
          let thisData = data.data;
          if (!thisData.length) {
            if (data.error && data.error.length) {
              message.warning(data.error[0].message);
            }
            thisData = {};
          } else {
            for (let i = 0; i < data.data.length; i++) {
              let thisdata = data.data[i];
              theArr.push({
                processName: thisdata.processName,
                adminName: thisdata.adminName,
                createDate: thisdata.createDate,
                remarks: thisdata.remarks,
              });
            }
          }
          this.setState({
            dataSourceX: theArr,
          });
        }.bind(this),
      }).always(
        function () {
          this.setState({
            loading: false,
          });
        }.bind(this)
      );
    },

    getOrderLog() {
      this.setState({
        avisible: true,
      });
      this.rizhi();
    },
    closeOrderLog() {
      this.setState({
        avisible: false,
      });
    },

    getPictureUrl(e) {
      this.setState({ pictureUrl: e });
    },
    componentWillMount() {
      if (this.props.data.orderNo) {
        this.loadData();
        this.loadXmu();
        this.jdDate();
        this.jiedian(this.props.data.orderNo);
        this.jiedianNew(this.props.data.orderNo);
      } else {
        this.state.data = {};
      }
    },
    componentWillReceiveProps(nextProps) {
      if (!this.props.visible && nextProps.visible) {
        this.state.textFileList = [];
        this.state.videoFileList = [];
        if (nextProps.data.orderNo) {
          this.loadData(nextProps.data);
          this.loadXmu(nextProps.data);
          this.jdDate(nextProps.data);
          this.jiedian(nextProps.data.orderNo);
          this.jiedianNew(nextProps.data.orderNo);
        } else {
          this.state.data = {};
          this.state.pictureUrl = [];
          this.state.pictureUrlMin = [];
        }
        this.props.form.resetFields();
      }
    },
    downImg() {
      let num = 0;
      for (let i = 0; i < this.state.orgCodeUrl.length; i++) {
        if (this.state.orgCodeUrl[i].url == this.state.previewImage) {
          num = i;
        }
      }
      if (num == this.state.orgCodeUrl.length - 1) {
        return message.warning("已经是最后一张了哦");
      }
      this.state.previewImage = this.state.orgCodeUrl[num + 1].url;
      this.setState({
        previewImage: this.state.previewImage,
        rotateDeg: 0,
      });
    },
    upImg() {
      let num = 0;
      for (let i = 0; i < this.state.orgCodeUrl.length; i++) {
        if (this.state.orgCodeUrl[i].url == this.state.previewImage) {
          num = i;
        }
      }
      if (num == 0) {
        return message.warning("已经是第一张了哦");
      }
      this.state.previewImage = this.state.orgCodeUrl[num - 1].url;
      this.setState({
        previewImage: this.state.previewImage,
        rotateDeg: 0,
      });
    },
    rotate() {
      let rotateDeg = this.state.rotateDeg + 90;
      this.setState({
        rotateDeg,
      });
    },
    downImgs() {
      let num = 0;
      for (let i = 0; i < this.state.replenishUrl.length; i++) {
        if (this.state.replenishUrl[i].url == this.state.previewImage) {
          num = i;
        }
      }
      if (num == this.state.replenishUrl.length - 1) {
        return message.warning("已经是最后一张了哦");
      }
      this.state.previewImage = this.state.replenishUrl[num + 1].url;
      this.setState({
        previewImage: this.state.previewImage,
        rotateDeg: 0,
      });
    },
    upImgs() {
      let num = 0;
      for (let i = 0; i < this.state.replenishUrl.length; i++) {
        if (this.state.replenishUrl[i].url == this.state.previewImage) {
          num = i;
        }
      }
      if (num == 0) {
        return message.warning("已经是第一张了哦");
      }
      this.state.previewImage = this.state.replenishUrl[num - 1].url;
      this.setState({
        previewImage: this.state.previewImage,
        rotateDeg: 0,
      });
    },
    rotates() {
      let rotateDeg = this.state.rotateDeg + 90;
      this.setState({
        rotateDeg,
      });
    },
    //节点列表
    jiedian(orderNos) {
      $.ajax({
        method: "get",
        dataType: "json",
        crossDomain: false,
        url: globalConfig.context + "/api/admin/newOrder/selectOrderDun",
        data: {
          orderNo: orderNos,
        },
        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)
      );
    },
    //查看催款节点
    jiedianNew(orderNos) {
      $.ajax({
        method: "get",
        dataType: "json",
        crossDomain: false,
        url:
          globalConfig.context + "/api/admin/newOrderDun/selectListNewOrderDun",
        data: {
          orderNo: orderNos,
        },
        success: function (data) {
          if (data.error && data.error.length) {
            message.warning(data.error[0].message);
          } else {
            let theArr = [];
            let thisData = [];
            let arr = data.data || [];
            let totalCui = 0;
            for (let i = 0; i < arr.length; i++) {
              thisData = arr[i];
              totalCui += +thisData.money;
              theArr.push({
                key: i,
                dunSubject: thisData.dunSubject
                  ? thisData.dunSubject.toString()
                  : "", //催款科目
                id: thisData.id, //节点Id
                money: thisData.money, //催款金额
                // orderNo: record ? record.orderNo : this.props.datauser.orderNo,
                commodityName: thisData.commodityName,
                projectType: thisData.projectType,
                dunTypeName: thisData.dunTypeName,
                status: thisData.status,
                waitDay: thisData.waitDay,
                effectiveCount: thisData.effectiveCount,
                startDate: thisData.startDate,
                dunType: thisData.dunType,
                appropriationRatio: thisData.appropriationRatio,
                customizeName: thisData.customizeName,
                customizeTimes: thisData.customizeTimes,
                tid: thisData.tid,
              });
            }
            if (!totalCui) {
              totalCui = 0;
            }
            totalCui = (Math.round(totalCui * 1000000) / 1000000).toFixed(6);
            this.setState({
              contactListNew: theArr,
              totalCui,
            });
          }
        }.bind(this),
      }).always(
        function () {
          this.setState({
            loading: false,
          });
        }.bind(this)
      );
    },
    render() {
      const theData = this.state.orderList || {};
      const FormItem = Form.Item;
      const formItemLayout = {
        labelCol: { span: 10 },
        wrapperCol: { span: 12 },
      };
      const jsDate = this.state.jsDate || [];
      const cuiDataList = this.state.contactList || [];
      return (
        <div className="login">
          <div style={{position:"absolute",top:'12px',left:'81px',zIndex:10000}}>
            <OrderItemStatus deleteSign={this.state.deleteSign}/>
          </div>
          {this.state.resVisible ? (
            <ResolutionDetail
              cancel={this.resCancel}
              detail={this.state.resRecord}
              visible={this.state.resVisible}
              id={this.state.resRecord.orderNo}
            />
          ) : (
            ""
          )}
          <Form layout="horizontal" id="demand-form">
            <Spin spinning={this.state.loading}>
              <div className="clearfix">
                <FormItem
                  className="half-item"
                  {...formItemLayout}
                  label="订单编号"
                >
                  <span>{theData.orderNo}</span>
                </FormItem>
                <FormItem
                  className="half-item"
                  {...formItemLayout}
                  label="签单时间"
                >
                  <span>{theData.signDate}</span>
                </FormItem>
                <FormItem
                  className="half-item"
                  {...formItemLayout}
                  label="客户名称"
                >
                  <span>
                    {theData.userName}
                    <EnterpriseNameChange
                        type='journal'
                        style={{ marginLeft: 10 }}
                        enterpriseId={this.state.orderUid}/>
                  </span>
                </FormItem>
                <FormItem
                  className="half-item"
                  {...formItemLayout}
                  label="流程状态"
                >
                  <span>{getProcessStatus(theData.processStatus)}</span>
                </FormItem>
                <FormItem
                  className="half-item"
                  {...formItemLayout}
                  label="订单类型"
                >
                  <span>{getNewOrderType(theData.orderType)}</span>
                </FormItem>
                <FormItem
                  className="half-item"
                  {...formItemLayout}
                  label="结算状态"
                >
                  <span>{getLiquidationStatus(theData.liquidationStatus)}</span>
                </FormItem>
                <FormItem
                  className="half-item"
                  {...formItemLayout}
                  label="签单总金额(万元)"
                >
                  <span>{theData.totalAmount}</span>
                </FormItem>
                <FormItem
                  className="half-item"
                  {...formItemLayout}
                  label="首付款(万元)"
                >
                  <span>{theData.firstAmount}</span>
                </FormItem>
                <FormItem
                  className="half-item"
                  {...formItemLayout}
                  label="已收款(万元)"
                >
                  <span>{theData.settlementAmount}</span>
                </FormItem>
                <FormItem
                  className="half-item"
                  {...formItemLayout}
                  label="是否特批"
                >
                  <span>{getApproval(theData.approval)}</span>
                </FormItem>
                <FormItem
                  className="half-item"
                  {...formItemLayout}
                  label="是否外包"
                >
                  <span>{this.state.outsource}</span>
                </FormItem>
                {this.props.data.orderStatus == "6" && (
                  <FormItem
                    className="half-item"
                    {...formItemLayout}
                    label="已退(万元)"
                  >
                    <span>{this.props.data.refundAmount}</span>
                  </FormItem>
                )}
              </div>
              <div className="clearfix">
                <FormItem
                  labelCol={{ span: 5 }}
                  wrapperCol={{ span: 18 }}
                  label="合同扫描件"
                >
                  {/*<Upload*/}
                  {/*  className="demandDetailShow-upload"*/}
                  {/*  listType="picture-card"*/}
                  {/*  fileList={this.state.orgCodeUrl}*/}
                  {/*  onPreview={(file) => {*/}
                  {/*    this.setState({*/}
                  {/*      previewImage: file.url || file.thumbUrl,*/}
                  {/*      previewVisible: true,*/}
                  {/*    });*/}
                  {/*  }}*/}
                  {/*/>*/}
                  <div style={{paddingTop:'10px',paddingBottom:'10px'}}>
                    {this.state.orgCodeUrl ? <ImgList 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 });
                    }}
                  >
                    {/* <div
                      onClick={this.upImg}
                      className="up-btn"
                      style={{
                        cursor: "pointer",
                        transition: "all .5s",
                        opacity: ".2",
                        width: "41px",
                        height: "69px",
                        backgroundColor: "rgba(0,0,0,.5)",
                        position: "absolute",
                        top: "50%",
                        left: 16,
                        transform: "translateY(-50%)",
                        zIndex: 1
                      }}
                    >
                      <span
                        style={{
                          position: "absolute",
                          border: "1px solid #fff",
                          width: "20px",
                          height: "20px",
                          left: "60%",
                          top: "50%",
                          transform: "translate(-50%, -50%) rotate(45deg)",
                          borderTop: "none",
                          borderRight: "none"
                        }}
                      ></span>
                    </div>
                    <div
                      onClick={this.rotate}
                      style={{
                        textAlign: "center",
                        lineHeight: "30px",
                        color: "#000",
                        cursor: "pointer",
                        transition: "all .5s",
                        width: "50px",
                        height: "30px",
                        backgroundColor: "white",
                        position: "absolute",
                        bottom: "-30",
                        left: "50%",
                        transform: "translateX(-50%)",
                        zIndex: 1,
                        borderRadius: "5px",
                        border: "1px solid #ccc"
                      }}
                    >
                      旋转
                    </div>
                    <div
                      onClick={this.downImg}
                      className="up-btn"
                      style={{
                        cursor: "pointer",
                        transition: "all .5s",
                        opacity: ".2",
                        width: "41px",
                        height: "69px",
                        backgroundColor: "rgba(0,0,0,.5)",
                        position: "absolute",
                        top: "50%",
                        right: 16,
                        transform: "translateY(-50%)",
                        zIndex: 1
                      }}
                    >
                      <span
                        style={{
                          position: "absolute",
                          border: "1px solid #fff",
                          width: "20px",
                          height: "20px",
                          left: "40%",
                          top: "50%",
                          transform: "translate(-50%, -50%) rotate(225deg)",
                          borderTop: "none",
                          borderRight: "none"
                        }}
                      ></span>
                    </div> */}
                    <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: 5 }}
                  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.replenishUrl ? <ImgList domId={'orderDetail1'} fileList={this.state.replenishUrl}/> : <div/>}
                  </div>
                  <Modal
                    maskClosable={false}
                    footer={null}
                    width={"50%"}
                    visible={this.state.previewVisibles}
                    onCancel={() => {
                      this.setState({ previewVisibles: false, rotateDeg: 0 });
                    }}
                  >
                    {/* <div
                      onClick={this.upImg}
                      className="up-btn"
                      style={{
                        cursor: "pointer",
                        transition: "all .5s",
                        opacity: ".2",
                        width: "41px",
                        height: "69px",
                        backgroundColor: "rgba(0,0,0,.5)",
                        position: "absolute",
                        top: "50%",
                        left: 16,
                        transform: "translateY(-50%)",
                        zIndex: 1
                      }}
                    >
                      <span
                        style={{
                          position: "absolute",
                          border: "1px solid #fff",
                          width: "20px",
                          height: "20px",
                          left: "60%",
                          top: "50%",
                          transform: "translate(-50%, -50%) rotate(45deg)",
                          borderTop: "none",
                          borderRight: "none"
                        }}
                      ></span>
                    </div>
                    <div
                      onClick={this.rotate}
                      style={{
                        textAlign: "center",
                        lineHeight: "30px",
                        color: "#000",
                        cursor: "pointer",
                        transition: "all .5s",
                        width: "50px",
                        height: "30px",
                        backgroundColor: "white",
                        position: "absolute",
                        bottom: "-30",
                        left: "50%",
                        transform: "translateX(-50%)",
                        zIndex: 1,
                        borderRadius: "5px",
                        border: "1px solid #ccc"
                      }}
                    >
                      旋转
                    </div>
                    <div
                      onClick={this.downImg}
                      className="up-btn"
                      style={{
                        cursor: "pointer",
                        transition: "all .5s",
                        opacity: ".2",
                        width: "41px",
                        height: "69px",
                        backgroundColor: "rgba(0,0,0,.5)",
                        position: "absolute",
                        top: "50%",
                        right: 16,
                        transform: "translateY(-50%)",
                        zIndex: 1
                      }}
                    >
                      <span
                        style={{
                          position: "absolute",
                          border: "1px solid #fff",
                          width: "20px",
                          height: "20px",
                          left: "40%",
                          top: "50%",
                          transform: "translate(-50%, -50%) rotate(225deg)",
                          borderTop: "none",
                          borderRight: "none"
                        }}
                      ></span>
                    </div> */}
                    <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 className="clearfix">
                <FormItem
                  className="half-item"
                  {...formItemLayout}
                  label="合同编号"
                >
                  <span>{theData.contractNo}</span>
                </FormItem>
                <FormItem
                  className="half-item"
                  {...formItemLayout}
                  label="订单部门"
                >
                  <span>{theData.depName}</span>
                </FormItem>
              </div>
              <div className="clearfix">
                <FormItem
                  labelCol={{ span: 5 }}
                  wrapperCol={{ span: 18 }}
                  label="订单留言"
                >
                  <p style={{ maxWidth: 500, wordWrap: "break-word" }}>
                    {this.state.orderRemarks}
                  </p>
                </FormItem>
              </div>
              {/* <div className="clearfix">
                <FormItem
                  labelCol={{ span: 5 }}
                  wrapperCol={{ span: 18 }}
                  label="收款节点"
                >
                  {jsDate.map(item => {
                    return (
                      <p>
                        {getjiedian(item.dunSubject)} -- {item.money} 万元
                      </p>
                    );
                  })}
                </FormItem>
              </div> */}
              <div className="clearfix">
                <FormItem
                  className="half-item"
                  {...formItemLayout}
                  label="订单负责人"
                >
                  <span>{theData.salesmanName}</span>
                </FormItem>
                <FormItem
                  className="half-item"
                  {...formItemLayout}
                  label="订单负责人电话"
                >
                  <span>{theData.salesmanMobile}</span>
                </FormItem>
                <FormItem
                  className="half-item"
                  {...formItemLayout}
                  label="当前财务负责人"
                >
                  <span>{theData.nowFinance}</span>
                </FormItem>
                <FormItem
                  className="half-item"
                  {...formItemLayout}
                  label="当前财务负责人电话"
                >
                  <span>{theData.nowFinanceMobile}</span>
                </FormItem>
                <FormItem
                  className="half-item"
                  {...formItemLayout}
                  style={{ opacity: ".5" }}
                  label="原订单负责人"
                >
                  <span>{theData.oldSalesmanName}</span>
                </FormItem>
                <FormItem
                  className="half-item"
                  {...formItemLayout}
                  style={{ opacity: ".5" }}
                  label="原订单负责人电话"
                >
                  <span>{theData.oldSalesmanMobile}</span>
                </FormItem>
                <FormItem
                  className="half-item"
                  {...formItemLayout}
                  style={{ opacity: ".5" }}
                  label="实际财务操作人"
                >
                  <span>{theData.financeName}</span>
                </FormItem>
                <FormItem
                  className="half-item"
                  {...formItemLayout}
                  style={{ opacity: ".5" }}
                  label="实际财务操作人电话"
                >
                  <span>{theData.financeMobile}</span>
                </FormItem>
              </div>
              {/* <Modal
                  visible={this.state.avisible}
                  className="admin-desc-content"
                  width="800px"
                  maskClosable={false}
                  title="订单日志"
                  footer={null}
                  onCancel={this.closeOrderLog}
                >
                  <div className="patent-table">
                    <Spin spinning={this.state.loading}>
                      <Table
                        columns={this.state.columnsX}
                        dataSource={this.state.dataSourceX}
                        pagination={false}
                      />
                    </Spin>
                  </div>
                </Modal> */}
              <OrderRiZi
                dataSourcerizhi={this.state.dataSourceX}
                closeOrderLog={this.closeOrderLog}
                visible={this.state.avisible}
                loading={this.state.loading}
              />
              <div className="clearfix" style={{ marginBottom: 10 }}>
                <p style={{ fontSize: 18, marginLeft: 20 }}>项目业务</p>
                <div className="patent-table">
                  <Spin spinning={this.state.loading}>
                    <Table
                      columns={this.state.columns}
                      dataSource={this.state.dataSource}
                      pagination={this.state.pagination}
                      onRowClick={this.tableRowClick}
                      bordered
                      size="small"
                    />
                  </Spin>
                </div>
              </div>
              <div>
                <span style={{ marginLeft: 20, fontSize: "18px" }}>
                  催款节点
                </span>
                <span
                  style={{
                    display: cuiDataList.length ? "none" : "inline-block",
                    marginLeft: 10,
                    color: "red",
                  }}
                >
                  金额总计(万元): {this.state.totalCui}
                </span>
              </div>
              <div className="clearfix">
                <Spin spinning={this.state.loading}>
                  <Form layout="horizontal" id="demand-form">
                    <Table
                      pagination={false}
                      bordered
                      size="small"
                      columns={
                        cuiDataList.length
                          ? this.state.ContactsLists
                          : this.state.ContactsListsNew
                      }
                      dataSource={
                        cuiDataList.length
                          ? this.state.contactList
                          : this.state.contactListNew
                      }
                    />
                    <Col
                      span={24}
                      offset={9}
                      style={{ marginTop: "15px" }}
                    ></Col>
                  </Form>
                </Spin>
              </div>
            </Spin>
          </Form>
          {this.state.addnextVisible && <ProjectDetailsReadOnly
              infor={this.state.dataInfor}
              visible={this.state.addnextVisible}
              onCancel={this.nextCancel}
          />}
        </div>
      );
    },
  })
);
export default OrderDetail;