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

import React, { Component } from "react";
import { Form, Upload, Modal, Button, message, Input, Select, Table, Tooltip } from "antd";
import AgreeButton from "./agreeButton.js";
import Rizhi from "./rizhi.js";
import { getProcessStatusNew, changeColor } from "@/tools.js";
import { shenghePeo } from "@/tools.js";
import { typeList } from '@/dataDic.js'
import $ from "jquery/src/ajax";
import "../../../../../../css/changeDetail.less"
import quxiao from "../../../../../../image/quxiao.png";
import tongguo from "../../../../../../image/tongguo.png";
import ProAndCuiList from "./proAndCuiList.jsx";
import "./xButton.less";
// import ReactToPrint from "react-to-print";
const FormItem = Form.Item;
import Refund from "./refund.js"
import ImgList from "../../../../common/imgList";
import EnterpriseNameChange from "../../../../common/enterpriseNameChange";
import FlowChart from '../../../../common/flowchart'; // 流程图
import SelectReject from '../../../../common/selectreject'; // 驳回位置选择


const { TextArea } = Input;

const formItemLayout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 14 }
};


const getChangeType = function (e) {
  if (e || e == 0) {
    let str = e.toString();
    let theType = "";
    typeList.map(function (item) {
      if (item.value == str) {
        theType = item.key;
      }
    });
    return theType;
  }
};

class Itemlist extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    let pageData = this.props.pageData;
    return (
      <div className="clearfix">
        <Form.Item
          label={pageData.labelA}
          {...pageData.formItemLayoutA}
          className="half-item"
        >
          {pageData.labelA === '变更原因' ? <Tooltip placement="topLeft" title={pageData.dataA}>
            <div style={{
              width: '150px !important',
              whiteSpace: 'nowrap',
              wordBreak: 'break-all',
              overflow: 'hidden',
              textOverflow: 'ellipsis',
            }}>{pageData.dataA}</div>
          </Tooltip> : pageData.dataA}
          {pageData.labelA === '客户名称' ? <EnterpriseNameChange
            type='journal'
            style={{ marginLeft: 10 }}
            enterpriseId={this.props.orderUid} /> : null}
          {
            pageData.labelA === '当前进度' &&
            <FlowChart id={this.props.id} />
          }
        </Form.Item>
        <Form.Item
          label={pageData.labelB}
          {...pageData.formItemLayoutB}
          className="half-item"
        >
          <span>{pageData.dataB}</span>
        </Form.Item>
      </div>
    );
  }
}

class ChangeDetail extends Component {
  constructor(props) {
    super(props);
    this.state = {
      previewVisible: false,
      buttonStatus: true,
      dataSource: [],
      reason: "",
      rejectState: 0,
      rotateDeg: 0,
      contactList: [],
      ContactsLists: [
        {
          title: "金额（万元）",
          dataIndex: "amount",
          key: "amount",
          render: (text, record) => {
            return (
              <div>
                实际回收退票（万元）
                <Input
                  value={record.amount}
                  placeholder="请输入金额(必填项)"
                  disabled={record.load}
                  key={record.id}
                  required="required"
                  onChange={e => {
                    record.amount = e.target.value;
                    this.setState({ contactList: this.state.contactList });
                  }}
                  style={{ width: "120px" }}
                />
              </div>
            );
          }
        },
        {
          title: "时间",
          dataIndex: "createTimes",
          key: "createTimes",
          render: (text, record) => {
            return (
              <div>
                {/* <DatePicker
                  showTime
                  placeholder="请输入退票时间"
                  onChange={v => {
                    record.time = v._d;
                    this.setState({ contactList: this.state.contactList });
                  }}
                  onOk={v => {
                    record.time = v._d;
                    this.setState({ contactList: this.state.contactList });
                    console.log(this.state);
                  }}
                /> */}
                {record.createTimes}
              </div>
            );
          }
        }
        // {
        //   title: "操作",
        //   dataIndex: "dels",
        //   key: "dels",
        //   render: (text, record, index) => {
        //     return (
        //       <div style={{ display:
        //         (this.props.data.processState == 7 ||
        //           this.props.data.processState == 8) &&
        //         this.props.data.status == 4
        //           ? "none"
        //           : "block"}}>
        //         <Popconfirm
        //           title="是否删除?"
        //           onConfirm={() => {
        //             this.confirmDelet(record);
        //           }}
        //           okText="删除"
        //           cancelText="不删除"
        //         >
        //           <Button
        //             style={{
        //               marginRight: "10px",
        //               color: "#ffffff",
        //               background: "#f00",
        //               border: "none"
        //             }}
        //           >
        //             删除
        //           </Button>
        //         </Popconfirm>

        //         {record.load != true ? (
        //           <Button
        //             type="primary"
        //             onClick={() => {
        //               this.contactSave(record);
        //             }}
        //           >
        //             保存
        //           </Button>
        //         ) : (
        //           ""
        //         )}
        //       </div>
        //     );
        //   }
        // }
      ]
    };
    this.getOrgCodeUrl = this.getOrgCodeUrl.bind(this);
    this.changeButtonStatus = this.changeButtonStatus.bind(this);
    this.downImg = this.downImg.bind(this);
    this.upImg = this.upImg.bind(this);
    this.rotate = this.rotate.bind(this);
    this.moneyOld = this.moneyOld.bind(this);
  }

  getOrgCodeUrl(e) {
    this.setState({
      orgCodeUrl: e
    });
  }

  downImg() {
    let num = 0;
    for (let i = 0; i < this.props.pictureUrl.length; i++) {
      if (this.props.pictureUrl[i].url == this.state.previewImage) {
        num = i;
      }
    }
    if (num == this.props.pictureUrl.length - 1) {
      return message.warning("已经是最后一张了哦");
    }
    this.state.previewImage = this.props.pictureUrl[num + 1].url;
    this.setState({
      previewImage: this.state.previewImage,
      rotateDeg: 0
    });
  }
  upImg() {
    let num = 0;
    for (let i = 0; i < this.props.pictureUrl.length; i++) {
      if (this.props.pictureUrl[i].url == this.state.previewImage) {
        num = i;
      }
    }
    if (num == 0) {
      return message.warning("已经是第一张了哦");
    }
    this.state.previewImage = this.props.pictureUrl[num - 1].url;
    this.setState({
      previewImage: this.state.previewImage,
      rotateDeg: 0
    });
  }
  rotate() {
    let rotateDeg = this.state.rotateDeg + 90;
    this.setState({
      rotateDeg
    });
  }

  moneyOld(str, money) {
    if (money) {
      return (
        <span style={{ color: "red", fontWeight: 900, fontSize: 16 }}>
          {str}(原合同金额{money}万元)
        </span>
      );
    } else {
      return <span style={{ color: "red", fontWeight: 900, fontSize: 16 }}>{str}</span>;
    }
  }

  componentDidMount() {
    window.setTimeout(() => {
      const contactList = this.props.contactList;
      // console.log("看看props", this.props);

      contactList.forEach(item => {
        item.load = true;
      });
      this.setState({
        contactList
      });
    }, 0);
  }

  // loadDataChange() {
  //   $.ajax({
  //     method: "get",
  //     dataType: "json",
  //     crossDomain: false,
  //     url: globalConfig.context + "/api/admin/orderChange/orderChangeLogList",
  //     data: {
  //       changeId: this.props.data.id
  //     },
  //     success: function(data) {
  //       if (data.error.length || data.data.list == "") {
  //         if (data.error && data.error.length) {
  //           message.warning(data.error[0].message);
  //         }
  //       } else {
  //         this.setState({
  //           dataSource: data.data
  //         });
  //       }
  //     }.bind(this)
  //   });
  // }

  // componentDidMount() {
  //   window.setTimeout(() => {
  //     console.log(this.props);
  //   },2000)

  // }

  //同意拒绝按钮的有无
  changeButtonStatus() {
    this.setState({
      buttonStatus: !this.state.buttonStatus
    });
  }

  componentWillReceiveProps(nextProps) {
    this.setState({
      paymentTimes: nextProps.data.paymentTimes,
      paymentAmount: nextProps.data.paymentAmount,
      invoiceTimes: nextProps.data.invoiceTimes,
      invoiceAmount: nextProps.data.invoiceAmount,
      cwCost: nextProps.data.cwCost,
      refundableAmount: nextProps.data.refundableAmount,
      cwRemarks: nextProps.data.cwRemarks,
      contactList: nextProps.contactList,
      refundInvoice: nextProps.data.refundInvoice
    });
    // if (!nextProps.reset) {
    //   this.reset();
    // }
  }

  onRef(ref) {
    this.fun = ref;
  }

  render() {
    const pageData = [
      {
        labelA: "客户名称",
        formItemLayoutA: formItemLayout,
        dataA: this.props.data.userName,
        labelB: "合同编号",
        formItemLayoutB: formItemLayout,
        dataB: this.props.data.contractNo
      },
      {
        labelA: "时间",
        formItemLayoutA: formItemLayout,
        dataA: this.props.data.createTimes,
        labelB: "发起人",
        formItemLayoutB: formItemLayout,
        dataB: this.props.data.applicant
      },
      {
        labelA: "当前进度",
        formItemLayoutA: formItemLayout,
        // 当前是咨询师以及咨询师经理时使用shenhePeo函数，其他流程正常显示
        dataA:
          this.props.data.processState == 3 || this.props.data.processState == 4
            ? shenghePeo(this.props.data.examineName, this.props.data.processState)
            : getProcessStatusNew(
              this.props.data.examineName,
              this.props.data.processState,
              this.props.data.status
            ),
        labelB: "变更类型",
        formItemLayoutB: formItemLayout,
        dataB: getChangeType(this.props.data.type)
      },

      {
        labelA: this.props.data.type == 0 ? "企业总经理姓名" : "",
        formItemLayoutA: formItemLayout,
        dataA: this.props.data.managerContacts,
        labelB: "企业总经理联系电话",
        formItemLayoutB: formItemLayout,
        dataB: this.props.data.managerContactMobile,
      },

      {
        labelA: this.props.data.type == 0 ? "企业联系人姓名" : "",
        formItemLayoutA: formItemLayout,
        dataA: this.props.data.contacts,
        labelB: "企业联系人联系方式",
        formItemLayoutB: formItemLayout,
        dataB: this.props.data.contactMobile,
      },

      {
        labelA: "合同额(万元)",
        formItemLayoutA: formItemLayout,
        dataA: this.moneyOld(this.props.data.totalAmount, this.props.money),
        labelB: "已收款(万元)",
        formItemLayoutB: formItemLayout,
        dataB: changeColor(this.props.data.settlementAmount)
      },
      {
        labelA: "欠款(万元)",
        formItemLayoutA: formItemLayout,
        dataA: changeColor(this.props.data.arrears),
        labelB: "申请退款(万元)",
        formItemLayoutB: formItemLayout,
        dataB: changeColor(this.props.data.changeAmount)
      },
      {
        labelA: "首付款(万元)",
        formItemLayoutA: formItemLayout,
        dataA: changeColor(this.props.data.firstAmount),
      },
      {
        labelA: "变更原因",
        formItemLayoutA: formItemLayout,
        dataA: this.props.data.remarks
      }
    ];
    const planData = [
      {
        labelA: "项目进度",
        formItemLayoutA: formItemLayout,
        dataA: this.props.data.projectState,
        onChangeA: value => {
          this.setState({
            projectState: value
          });
        },
        labelB: "发生成本费用(万元)",
        formItemLayoutB: formItemLayout,
        dataB: this.props.data.zxsCost,
        onChangeB: value => {
          this.setState({
            zxsCost: value
          });
        }
      },
      {
        labelA: "备注",
        formItemLayoutA: formItemLayout,
        dataA: this.props.data.zxsRemarks,
        onChangeA: value => {
          this.setState({
            zxsRemarks: value
          });
        }
      }
    ];
    const financeData = [
      // {
      //   labelA: "收款时间",
      //   formItemLayoutA: formItemLayout,
      //   dataA: this.props.data.paymentTimes,
      //   labelB: "收款金额(万元)",
      //   formItemLayoutB: formItemLayout,
      //   dataB: this.props.data.paymentAmount
      // },
      // {
      //   labelA: "开票时间",
      //   formItemLayoutA: formItemLayout,
      //   dataA: this.props.data.invoiceTimes,
      //   labelB: "已开票金额(万元)",
      //   formItemLayoutB: formItemLayout,
      //   dataB: this.props.data.invoiceAmount
      // },
      {
        labelA: "发生直接成本(万元)",
        formItemLayoutA: formItemLayout,
        dataA: this.props.data.cwCost,
        labelB: "发生间接成本(万元)",
        formItemLayoutB: formItemLayout,
        dataB: this.props.data.cwIndirectCost
      },
      {
        labelA: "应退金额(万元)",
        formItemLayoutA: formItemLayout,
        dataA: this.props.data.refundableAmount,
      }
      // {
      //   labelA: "补充资料/备注",
      //   formItemLayoutA: formItemLayout,
      //   dataA: this.props.data.cwRemarks
      // }
    ];
    const buttonData = [
      {
        name: "同意",
        title: "理由",
        placeholder: "请输入理由",
        type: "primary",
        status: 2,
        onChange: value => {
          this.setState({
            remarks: value
          });
        }
      },
      {
        name: "拒绝",
        title: "理由",
        placeholder: "请输入理由",
        type: "danger",
        status: 3,
        onChange: value => {
          this.setState({
            remarks: value
          });
        }
      }
    ];
    const orgCodeUrl = this.props.pictureUrl;
    const attachment = this.props.attachment
    return (
      <div className="clearfix changeDetail">
        <div
          className="clearfix"
          ref={(e) => {
            this.refs = e;
          }}
        >
          <div
            style={{
              borderRadius: "50%",
              width: 300,
              height: 300,
              position: "absolute",
              top: 230,
              left: 525,
              transform: "rotate(-5deg)",
              zIndex: 1,
              display:
                this.props.data.status == 4
                  ? "block"
                  : "none",
            }}
          >
            <img src={tongguo} style={{ width: "100%" }} />
          </div>
          <div
            style={{
              borderRadius: "50%",
              width: 300,
              height: 300,
              position: "absolute",
              top: 284,
              left: 586,
              transform: "rotate(-5deg)",
              zIndex: 1,
              display: this.props.data.status == 5 ? "block" : "none",
            }}
          >
            <img src={quxiao} style={{ width: "63%" }} />
          </div>

          <h2 style={{ textAlign: "center", marginBottom: 10, marginTop: 20 }}>
            合同变更记录
          </h2>
          {pageData.map((item, index) => {
            return !!item.labelA && <Itemlist key={index} pageData={item} orderUid={this.props.orderUid} id={this.props.id} />;
          })}
          <Form.Item
            label="变更凭证"
            labelCol={{ span: 4 }}
            wrapperCol={{ span: 18 }}
          >
            {/*<Upload*/}
            {/*  className="demandDetailShow-upload"*/}
            {/*  listType="picture-card"*/}
            {/*  fileList={orgCodeUrl}*/}
            {/*  onPreview={(file) => {*/}
            {/*    this.setState({*/}
            {/*      previewImage: file.url || file.thumbUrl,*/}
            {/*      previewVisible: true,*/}
            {/*    });*/}
            {/*  }}*/}
            {/*/>*/}
            <div style={{ paddingTop: '10px', paddingBottom: '10px' }}>
              {orgCodeUrl ? <ImgList domId={'changeDetailCwzj' + this.props.id} fileList={orgCodeUrl} /> : <div />}
            </div>
            <Rizhi changeId={this.props.id} />
          </Form.Item>
          {
            this.props.contractPictureUrl && this.props.contractPictureUrl.length != 0 &&
            <div className="clearfix">
              <Form.Item
                labelCol={{ span: 4 }}
                wrapperCol={{ span: 18 }}
                label="最新合同"
              >
                <div style={{ paddingTop: 10 }}>
                  <ImgList
                    domId={"zxht"}
                    fileList={
                      this.props.contractPictureUrl
                    }
                    ItemWidth={"96px"}
                  />
                </div>
              </Form.Item>
            </div>
          }
          {/* <h2 style={{ textAlign: "center", marginBottom: 0 }}>变更日志</h2> */}
          <ul
            style={{
              width: "868px",
              overflow: "hidden",
              paddingLeft: "90px",
              paddingTop: "10px",
              position: "relative",
              bottom: "20px",
            }}
          >
            {/* <span>操作人：</span> */}
            {this.props.dataSource.map((item, index) => {
              if (item.status == 0) {
                item.status = "发起";
              } else if (item.status == 1) {
                item.status = "审核中";
              } else if (item.status == 2) {
                item.status = "通过";
              } else if (item.status == 3) {
                item.status = "驳回";
              } else if (item.status == 4) {
                item.status = "完成";
              } else if (item.status == 5) {
                item.status = "撤销";
              }
              return (
                <li
                  key={index}
                  style={{
                    width: "100%",
                    height: "auto",
                    wordBreak: "break-all",
                    marginBottom: "10px",
                  }}
                >
                  {item.aname + "：" + "【" + item.status + "】" + item.remarks + "（" + item.createTimes + "）"}
                </li>
              );
            })}
          </ul>

          <ProAndCuiList id={this.props.id} />
          {/* 收款情况 */}
          <div className="clearfix">
            <h3 style={{ marginLeft: 20, fontWeight: 800, marginBottom: 10 }}>
              收款情况
            </h3>
            <div style={{ marginLeft: "90px" }}>
              <ul>
                {(this.props.proceedsData.bill || []).map((item, index) => (
                  <li key={index}>
                    {item.payTime +
                      " " +
                      item.aName +
                      " 收款：" +
                      item.transactionAmount +
                      "万元"}
                  </li>
                ))}
              </ul>

              <div>收款总计:{this.props.proceedsTotal}万元</div>
            </div>
            <br />
            <div style={{ marginLeft: "90px" }}>
              <ul>
                {(this.props.proceedsData.invoice || []).map((item, index) => (
                  <li key={index}>
                    {item.createTime + " " + " 开票：" + item.amount + "万元"}
                  </li>
                ))}
              </ul>
              <div>开票总计:{this.props.invoiceTotal}万元</div>
            </div>

            <p style={{ marginLeft: "90px", color: "red" }}>
              系统预估 产生成本（万元）：
              {this.props.data.estimateCost
                ? this.props.data.estimateCost
                : "0"}{" "}
              &nbsp;应退金额（万元）：
              {this.props.data.estimateRefundable
                ? this.props.data.estimateRefundable
                : "0"}
            </p>
          </div>
          {/* 当前财务状态 */}
          {this.props.data.processState > 6 &&
            (this.props.data.status == 1 || this.props.data.status == 3) &&
            this.props.processState == this.props.data.processState ? (
            // this.state.buttonStatus ? (
            <div>
              <div style={{ marginBottom: 10 }}>
                <div className="clearfix">
                  <div>
                    <h3
                      style={{
                        marginLeft: 10,
                        fontWeight: 800,
                        marginBottom: 10,
                      }}
                    >
                      当前财务状态(财务填写)
                    </h3>
                    {financeData.map((item, index) => {
                      return <Itemlist key={index} pageData={item} orderUid={this.props.orderUid} id={this.props.id} />;
                    })}
                  </div>
                </div>

                <div
                  style={{
                    marginTop: "10px",
                    display:
                      this.props.processState == this.props.data.processState
                        ? "block"
                        : "none",
                  }}
                >
                  <Form.Item
                    label="备注"
                    labelCol={{ span: 4 }}
                    wrapperCol={{ span: 14 }}
                  >
                    <Input.TextArea
                      rows={4}
                      value={this.state.reason}
                      placeholder="请输入补充资料/备注"
                      onChange={(e) => {
                        this.setState({
                          reason: e.target.value,
                        });
                      }}
                    />
                  </Form.Item>
                </div>
              </div>
              <div
                className="clearfix"
                style={{ display: "flex", justifyContent: "space-around" }}
              >
                {buttonData.map((item, index) => {
                  return (
                    <AgreeButton
                      data={item}
                      key={index}
                      backData={this.props.data}
                      processState={this.props.processState}
                      visible={this.changeButtonStatus}
                      ajaxData={this.state}
                      loadData={this.props.loadData}
                      reason={this.state.reason}
                      rejectState={this.state.rejectState}
                      onCancel={this.props.onCancel}
                    />
                  );
                })}
              </div>

              <div style={{ width: 120, float: "left", position: "relative", bottom: "28px", right: "-600px", }}>
                <SelectReject
                  type={this.props.data.type}
                  processState={this.props.processState}
                  onSelect={val => {
                    this.setState({
                      rejectState: val
                    })
                  }}
                />
              </div>

              {/* <Select
                defaultValue="0"
                style={{
                  width: 120,
                  float: "left",
                  position: "relative",
                  bottom: "28px",
                  right: "-600px",
                }}
                onChange={(val) => {
                  this.setState({ rejectState: val });
                }}
              >
                <Option
                  value="0"
                  style={{
                    display: this.props.processState >= 2 ? "block" : "none",
                  }}
                >
                  营销员
                </Option>
                <Option
                  value="1"
                  style={{
                    display: this.props.processState >= 3 ? "block" : "none",
                  }}
                >
                  营销管理员
                </Option>
                <Option
                  value="2"
                  style={{
                    display: this.props.processState >= 4 ? "block" : "none",
                  }}
                >
                  咨询师
                </Option>
                <Option
                  value="3"
                  style={{
                    display: this.props.processState >= 5 ? "block" : "none",
                  }}
                >
                  咨询师经理
                </Option>
                <Option
                  value="4"
                  style={{
                    display: this.props.processState >= 6 ? "block" : "none",
                  }}
                >
                  咨询师总监
                </Option>
                <Option
                  value="5"
                  style={{
                    display: this.props.processState >= 7 ? "block" : "none",
                  }}
                >
                  财务专员(退单)
                </Option>
                <Option
                  value="6"
                  style={{
                    display: this.props.processState >= 8 ? "block" : "none",
                  }}
                >
                  财务总监
                </Option>
                <Option
                  value="7"
                  style={{
                    display: this.props.processState >= 9 ? "block" : "none",
                  }}
                >
                  总裁
                </Option>
              </Select> */}

            </div>
          ) : (
            <div>
              <h3 style={{ marginLeft: 10, fontWeight: 800, marginBottom: 10 }}>
                当前财务状态(财务填写)
              </h3>
              {financeData.map((item, index) => {
                return <Itemlist key={index} pageData={item} orderUid={this.props.orderUid} id={this.props.id} />;
              })}
            </div>
          )}
          {/* 回收退票 */}
          <div
            style={{
              display:
                (this.props.data.processState == 9 ||
                  this.props.data.processState == 8 ||
                  this.props.data.processState == 10) &&
                  (this.props.data.status == 2 || this.props.data.status == 4 || this.props.data.status == 3 || this.props.data.status == 6)
                  ? "block"
                  : "none",
            }}
          >
            <h3 style={{ marginLeft: 20, fontWeight: 800, marginBottom: 10 }}>
              回收退票
            </h3>
            {/* {this.state.processStatus == 0 ? ( */}
            <Button
              type="primary"
              onClick={this.addcontact}
              style={{
                float: "right",
                marginRight: "50px",
                marginBottom: "15px",
                position: "relative",
                zIndex: "999",
                display: "none",
              }}
            >
              添加回收退票
            </Button>
            {/* ) : (
              ""
            )} */}
            <Table
              size="middle"
              pagination={false}
              bordered
              columns={this.state.ContactsLists}
              dataSource={this.state.contactList}
            />
          </div>
          {/* 完成审核,上传附件 */}
          <div style={{
            position: "relative",
            display:
              (this.props.data.processState == 8 ||
                this.props.data.processState == 9 ||
                this.props.data.processState == 10) &&
                this.props.data.status == 2 || this.props.data.status == 4 || this.props.data.status == 3 || this.props.data.status == 6
                ? "block"
                : "none",
            marginTop: 10,
          }}
          >
            <hr
              style={{
                marginTop: 12,
                marginBottom: 10,
                backgroundColor: "black",
                height: 1,
                border: "none",
              }}
            />
            <h3
              style={{
                marginLeft: 20,
                fontWeight: 800,
                marginBottom: 10,
                display: "inline-block",
              }}
            >
              完成审核,上传附件{" "}
              <span
                style={{ fontSize: 12, fontWeight: "normal", color: "red" }}
              >
                (注：由营销员上传变更后附件,全变更流程完成。)
              </span>
            </h3>
            <div>
              <Form.Item
                label="变更附件"
                labelCol={{ span: 4 }}
                wrapperCol={{ span: 18 }}
              >
                <div style={{ paddingTop: '10px', paddingBottom: '10px' }}>
                  {attachment.length > 0 ? <ImgList domId={this.props.domId + 2 ? this.props.domId + 2 : 'changeDetailCwzj1'} fileList={attachment} ItemWidth={'96px'} /> : '无附件'}
                </div>
                {/* <Rizhi changeId={this.props.id} /> */}
              </Form.Item>
            </div>
          </div>
          {/* {this.props.data.type === 0 && this.props.data.processState >= 4 ? (
            <div>
              <h3 style={{ marginLeft: 10, fontWeight: 800, marginBottom: 10 }}>
                当前项目进度(咨询师经理填写)
              </h3>
              {planData.map((item, index) => {
                return <Itemlist key={index} pageData={item} />;
              })}
            </div>
          ) : (
            ""
          )} */}
          {/* {this.props.data.type === 0 ? (
            this.props.data.processState >= 5 ? (
              <div>
                <h3
                  style={{ marginLeft: 10, fontWeight: 800, marginBottom: 10 }}
                >
                  当前财务状态(财务填写)
                </h3>
                {financeData.map((item, index) => {
                  return <Itemlist key={index} pageData={item} />;
                })}
              </div>
            ) : (
              ""
            )
          ) : this.props.data.status === 4 ? (
            <div>
              <h3 style={{ marginLeft: 10, fontWeight: 800, marginBottom: 10 }}>
                当前财务状态(财务填写)
              </h3>
              {financeData.map((item, index) => {
                return <Itemlist key={index} pageData={item} />;
              })}
            </div>
          ) : (
            ""
          )} */}
        </div>

        <div
          style={{
            display:
              (this.props.data.processState == 8 ||
                this.props.data.processState == 9 ||
                this.props.data.processState == 10) &&
                this.props.data.status == 4 &&
                this.props.data.refundStatus
                ? "block"
                : "none",
          }}
        >
          <Refund data={this.props.data} id={this.props.id} />
        </div>
        {/* <ReactToPrint
          trigger={() => (
            <div className="clearfix">
              <Button type="primary" style={{ float: "right", marginTop: 10 }}>
                打印
              </Button>
            </div>
          )}
          content={() => this.refs}
        /> */}
      </div>
    );
  }
}

export { ChangeDetail };