kede-client/js/component/manageCenter/financialManage/account/accountDetails.jsx

import React, { Component } from "react";
import { Form, Input, Button, message, Modal, Spin, Table, Radio, Select, Tooltip, Tag, AutoComplete } from "antd";
import {
  ShowModal, splitUrl, getAccountName, getSecondaryAccountName,
  getVehicleName, getTypeName, getClockState
} from "../../../tools"
import { accountType, accountStatus } from "@/dataDic";
import ImgList from "../../../common/imgList";
import OrderDetail from '../../order/orderNew/changeComponent/orderDetail';
import ReactToPrint from "react-to-print";
import Print from 'react-print-html';
import moment from "moment";
import $ from "jquery/src/ajax";
import './accountReview.less';
import './accountDetails.less';

const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const RadioButton = Radio.Button;

class AccountDetails extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isPrint: false,
      cNo: 0,
      editA: "",
      isTable: true,
      sloading: false,
      loading: false,
      visible: "",
      data: {},
      logvisible: false,
      logdataSour: [],
      logcolumns: [
        {
          title: "审核人",
          dataIndex: "auditorName",
          key: "auditorName"
        },
        {
          title: "操作",
          dataIndex: "status",
          key: "status",
          width: 120,
          render: (text, record) => {
            return (
              <span style={{ color: ["#1D4FEA", "#34DE38", "#108EE9", "red", "#808080", "#1D4FEA"][text] }}>
                {["【发起】", "【通过】", "【完成】", "【驳回】", "【撤销】", "【修改】"][text]}
                {this.state.processStatus == record.processStatus && !record.id &&
                  <span style={{ color: "#FFA500" }}>&nbsp;审核中...</span>}
              </span>
            );
          },
        },
        {
          title: "操作时间",
          dataIndex: "createTimeStr",
          key: "createTimeStr",
          width: 88,
        },
        {
          title: "备注",
          dataIndex: "remarks",
          key: "remarks",
          render: (text, record) => {
            return (
              <div style={{ minWidth: 250 }}>{text}</div>
            )
          }
        }
      ],
      columns: [
        {
          title: "序号",
          dataIndex: "a",
          key: "a",
          width: 40,
          render: (text, record, index) => {
            return (
              <div>{index + 1}</div>
            )
          }
        },
        {
          title: "费用时间",
          dataIndex: "agreeTime",
          key: "agreeTime",
          width: "10%",
          render: (text, record) => {
            return (
              <div>{record.types == 1
                ? (moment(record.releaseStart).format("YYYY-MM-DD HH:mm") + " 至 " + moment(record.releaseEnd).format("YYYY-MM-DD HH:mm")) : !!text
                  ? text : record.startTime}</div>
            )
          }
        },
        {
          title: "时长",
          dataIndex: "duration",
          key: "duration",
          width: 40,
          render: (text, record) => {
            return (
              <div>{record.types == 1 ? text : ""}</div>
            )
          }
        },
        {
          title: "出差地址",
          dataIndex: "districtName",
          key: "districtName",
          width: "10%",
          render: (text, record) => {
            return (
              <div>{text}</div>
            )
          }
        },
        {
          title: "出差企业",
          dataIndex: "userNames",
          key: "userNames",
          width: "10%",
          render: (text, record) => {
            return (
              <div>{text}</div>
            )
          }
        },
        {
          title: "合同编号",
          dataIndex: "contractNo",
          key: "contractNo",
          width: "8%",
          render: (text, record) => {
            return (
              <div
                style={{ color: record.bidType == 1 && "red", minHeight: "15px", cursor: (!!record.types || record.types == 0) && this.props.isOperate && "pointer" }}
                onClick={() => {
                  (!!record.types || record.types == 0) && this.props.isOperate &&
                    this.setState({
                      editA: "contractNo",
                      editTit: "修改合同编号",
                      upId: record.erid,
                      // upUserNames: record.userNames,
                    })
                }}
              >{text}
                {!!text && !this.state.check && !this.state.isPrint && this.props.isOperate &&
                  <Button type="primary"
                    onClick={e => {
                      e.stopPropagation()
                      this.setState({
                        check: true,
                        checkInfo: record,
                      }, () => {
                        this.getOrder()
                        this.getListA()
                      })
                    }}
                  >合同详情</Button>}
              </div>
            )
          }
        },
        {
          title: "类型",
          dataIndex: "types",
          key: "types",
          width: "6%",
          render: (text, record) => {
            return (
              <div style={{ color: record.publicReleaseType != null && "red", cursor: text == 0 && this.props.isOperate && "pointer" }}
                onClick={() => {
                  text == 0 && this.props.isOperate &&
                    this.setState({
                      editA: "typesOther",
                      editTit: "修改其他类型说明",
                      upId: record.erid,
                      upTypesOther: record.typesOther,
                    })
                }}
              >
                {getAccountName(text, record.typesOther)}
              </div>
            )
          }
        },
        {
          title: "详细",
          dataIndex: "cost",
          key: "cost",
          width: "8%",
          render: (text, record) => {
            return (
              <div
                style={{ cursor: !text && !record.vehicle && record.type != 1 && this.props.isOperate && "pointer" }}
                onClick={() => {
                  !text && !record.vehicle && record.type != 1 && this.props.isOperate &&
                    this.setState({
                      editA: "detTypeOther",
                      editTit: "修改其他详细说明",
                      upId: record.id,
                      detTypeOther: record.typeOther,
                    })
                }}
              >{!!text ? text : (!!record.vehicle && record.type == 1 ? (
                getVehicleName(record.vehicle, record.vehicleOther) +
                "(" + record.startDistrict + " - " + record.endDistrict + ")"
              ) : getTypeName(record.type, record.typeOther))}</div>
            )
          }
        },
        {
          title: "费用",
          dataIndex: "amount",
          key: "amount",
          width: "5%",
          render: (text, record) => {
            return (
              <div>{text}</div>
            )
          }
        },
        {
          title: "实报",
          dataIndex: "realAmount",
          key: "realAmount",
          width: "5%",
          render: (text, record) => {
            return (
              <div style={{ color: "red", cursor: !record.noEdit && this.props.isOperate && "pointer" }}
                onClick={() => {
                  !record.noEdit && this.props.isOperate &&
                    this.setState({
                      editA: "amount",
                      editTit: "修改金额",
                      upAmount: text,
                      upId: record.id,
                    })
                }}
              >{text}</div>
            )
          }
        },
        {
          title: "出差事由",
          dataIndex: "plan",
          key: "plan",
          // width: "10%",
          render: (text, record) => {
            return (
              <div>{text}</div>
            )
          }
        },
        {
          title: "报销订单/部门",
          dataIndex: "orderNo",
          key: "orderNo",
          // width: "10%",
          render: (text, record) => {
            return (
              <div>
                <div>{text}</div>
                <div>{record.applyDepName}</div>
              </div>
            )
          }
        },
        // {
        //   title: "报销事由",
        //   dataIndex: "remarks",
        //   key: "remarks",
        //   // width: "10%",
        //   render: (text, record) => {
        //     return (
        //       <div>{text}</div>
        //     )
        //   }
        // },
      ],
      checkInfo: {},
      check: false,
      checkType: "a",
      dataSourceA: [],
      dataSourceB: [],
      dataSourceC: [],
      columnsA: [
        {
          title: "类型",
          dataIndex: "type",
          key: "type",
          render: (text, record) => {
            return (
              <span>
                {(text == 0 && !record.typeOther)
                  ? getAccountName(record.sonType, record.sonTypeOther)
                  : getSecondaryAccountName(text, record.typeOther)}
              </span>
            );
          },
        },
        {
          title: "报销时间",
          dataIndex: "releaseStart",
          key: "releaseStart",
          render: (text, record) => {
            return (
              <div>
                <div style={{ textAlign: "center" }}>{text}</div>
                <div style={{ textAlign: "center" }}>至</div>
                <div style={{ textAlign: "center" }}>{record.releaseEnd}</div>
              </div>
            );
          },
        },
        {
          title: "工时",
          dataIndex: "duration",
          key: "duration",
        },
        {
          title: "报销金额（元）",
          dataIndex: "amount",
          key: "amount",
          width: 70,
        },
        {
          title: "实报金额（元）",
          dataIndex: "realAmount",
          key: "realAmount",
          width: 70,
        },
        {
          title: "天数",
          dataIndex: "days",
          key: "days",
        },
        {
          title: "报销编号",
          dataIndex: "checkNo",
          key: "checkNo",
        },
        {
          title: "报销合同",
          dataIndex: "contractNo",
          key: "contractNo",
        },
        {
          title: "客户",
          dataIndex: "buyerName",
          key: "buyerName",
        },
        {
          title: "报销人",
          dataIndex: "aname",
          key: "aname",
        },

        {
          title: "财务负责人",
          dataIndex: "financeName",
          key: "financeName",
        },
        {
          title: "报销公司/支付公司",
          dataIndex: "payDepName",
          key: "payDepName",
          render: (text, record) => {
            return (
              <div>
                <div>{record.applyDepName || ""}</div>
                <div>{text || ""}</div>
              </div>
            );
          },
        },
        {
          title: "发起时间",
          dataIndex: "createTimeStr",
          key: "createTimeStr",
        },
        {
          title: "状态",
          dataIndex: "status",
          key: "status",
          render: (text, record) => {
            return (
              <span style={{ color: accountStatus[text].color }}>
                {accountStatus[text].label}
              </span>
            );
          },
        },
      ],
      columnsB: [
        {
          title: "类型",
          dataIndex: "type",
          key: "type",
          width: 140,
          render: (text, record) => {
            return (
              <span>
                {text == 0 ? record.typeOther : accountType.find(item => item.value === text).label}
              </span>
            );
          },
        },
        {
          title: "报销金额（元）",
          dataIndex: "amount",
          key: "amount",
        },
        {
          title: "实报金额（元）",
          dataIndex: "realAmount",
          key: "realAmount",
        },
        {
          title: "报销编号",
          dataIndex: "checkNo",
          key: "checkNo",
        },
        {
          title: "报销人",
          dataIndex: "aname",
          key: "aname",
        },

        {
          title: "财务负责人",
          dataIndex: "financeName",
          key: "financeName",
        },
        {
          title: "状态",
          dataIndex: "status",
          key: "status",
          render: (text, record) => {
            return (
              <span style={{ color: accountStatus[text].color }}>
                {accountStatus[text].label}
              </span>
            );
          },
        },
        {
          title: "报销公司/支付公司",
          dataIndex: "payDepName",
          key: "payDepName",
          render: (text, record) => {
            return (
              <div>
                <div>{record.applyDepName || ""}</div>
                <div>{text || ""}</div>
              </div>
            );
          },
        },
        {
          title: "报销时间",
          dataIndex: "createTimeStr",
          key: "createTimeStr",
        },
      ],
      columnsC: [
        {
          title: "编号",
          dataIndex: "key",
          key: "key",
          width: 45,
          fixed: "left",
        },
        {
          title: "客户名称",
          dataIndex: "userName",
          key: "userName",
          width: 150,
          fixed: "left",
          render: (text, record) => {
            return (
              <div>
                <div>{text}</div>
                <div style={{ color: ["red", "green"][record.signBills] }}>
                  {["未签单", "已签单"][record.signBills]}
                  {record.signBills == 1 && `（${record.signTime}）`}
                </div>
              </div >
            );
          },
        },
        {
          title: "公出地点",
          dataIndex: "districtName",
          key: "districtName",
          width: 120,
          render: (text) => {
            return (
              <div>{text}</div>
            );
          },
        },
        {
          title: "跟单人",
          dataIndex: "sname",
          key: "sname",
          width: 90,
          render: (text, record) => {
            return (
              <Tooltip title={text}>
                <div>{text}</div>
              </Tooltip>
            );
          },
        },
        {
          title: "公出人员",
          dataIndex: "aname",
          key: "aname",
          width: 190,
          render: (text, record) => {
            return (
              <Tooltip title={text}>
                <div>
                  <p style={{ color: "red" }}>[ 打卡人：{text} ]</p>
                  {record.assist !== 0 && <p style={{ color: "#8552A1" }} >[ 协单人：{record.assistAidName}]</p>}
                  {!!record.assistantName && <p style={{ color: "#228fbd" }} >[ 协单助手：{record.assistantName}]</p>}
                </div>
              </Tooltip>
            );
          },
        },
        {
          title: "申请时间",
          dataIndex: "createTimes",
          key: "createTimes",
          width: 80,
        },
        {
          title: "公出时间",
          dataIndex: "releaseStarts",
          key: "releaseStarts",
          width: 130,
          render: (text, record) => (
            <div>
              <div>{text}</div>
              <div style={{ paddingLeft: "44px" }}>至</div>
              <div>{record.releaseEnds}</div>
            </div>
          ),
        },
        {
          title: "公出时长(时)",
          dataIndex: "duration",
          key: "duration",
          width: 50,
        },
        {
          title: "打卡时间",
          dataIndex: "clockInTimes",
          key: "clockInTimes",
          width: 80,
          render: (text, record) => (
            <span>
              <div style={{ width: 70 }}>{text}</div>
              <Tag color={["#F21212", "#34DE38", "#ffd400"][record.clockIn]}>{["未打卡", "已打卡", "异常打卡"][record.clockIn]}</Tag>
            </span>
          )
        },
        {
          title: "标签",
          dataIndex: "status",
          key: "status",
          width: 200,
          render: (text, record) => (
            <div>
              <div style={{ display: "flex", flexDirection: "row" }}>
                <Tag
                  color={["#45b97c", "#69541b", "#f47920", "#8552a1", "#228fbd"][record.type]}
                >
                  {
                    record.type === 0
                      ? "业务公出" : record.type === 1
                        ? "技术公出" : record.type === 2
                          ? "行政公出" : record.type === 3
                            ? "技术协单" : record.type === 4
                              ? "协单助手" : ""
                  }
                </Tag>
                <Tag color={getClockState(text).color}>
                  {getClockState(text).title}
                </Tag>
                {record.updateStatus == 1 && <Tag color="#1E90FF">改</Tag>}
              </div>
              {record.type === 1 && <div style={{ marginTop: 5 }}>{record.contractNo}</div>}
              {record.type === 1 && <div>{record.totalAmout + "(万元)"}</div>}
            </div>
          ),
        },
        {
          title: "公出目标",
          dataIndex: "remarks",
          key: "remarks",
          width: 280,
          render: (text) => {
            return (
              <div>{text}</div>
            );
          },
        },
        {
          title: "公出计划",
          dataIndex: "plan",
          key: "plan",
          width: 280,
          render: (text) => {
            return (
              <div>{text}</div>
            );
          },
        },
        {
          title: "预计效果",
          dataIndex: "expectedEffect",
          key: "expectedEffect",
          width: 280,
          render: (text) => {
            return (
              <div>{text}</div>
            );
          },
        },
        {
          title: "本次公出目标总结",
          dataIndex: "supplement",
          key: "supplement",
          width: 280,
          render: (text) => {
            return (
              <div>{text}</div>
            );
          },
        },
        {
          title: "下一次公出计划",
          dataIndex: "nextPlan",
          key: "nextPlan",
          width: 280,
          render: (text) => {
            return (
              <div>{text}</div>
            );
          },
        },
        {
          title: "审核/指导",
          dataIndex: "auditInfo",
          key: "auditInfo",
          width: 200,
          render: (text, record) => {
            return <div style={{ wordBreak: "break-all" }} >
              {record.auditTimes && `审核时间：${record.auditTimes}`}
              {text}
            </div >;
          },
        },
      ],
      paginationA: {
        defaultCurrent: 1,
        defaultPageSize: 9999,
        showQuickJumper: true,
        pageSize: 9999,
        onChange: function (page) {
          this.getListA(page);
        }.bind(this),
        showTotal: function (total) {
          return "共" + total + "条数据";
        },
      },
      paginationB: {
        defaultCurrent: 1,
        defaultPageSize: 9999,
        showQuickJumper: true,
        pageSize: 9999,
        onChange: function (page) {
          this.getListB(page);
        }.bind(this),
        showTotal: function (total) {
          return "共" + total + "条数据";
        },
      },
      paginationC: {
        defaultCurrent: 1,
        defaultPageSize: 9999,
        showQuickJumper: true,
        pageSize: 9999,
        onChange: function (page) {
          this.getListC(page);
        }.bind(this),
        showTotal: function (total) {
          return "共" + total + "条数据";
        },
      },
      orderList: [],
      orderData: {},
    };
    this.addRowColor = this.addRowColor.bind(this)
  }

  componentDidMount() {
    const { id } = this.props
    !!id && this.getDetails(id)
  }

  // 报销信息详情
  getDetails(id) {
    this.setState({
      loading: true,
    });
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/expenseAccount/mainExpense",
      data: { id, },
      success: function (data) {
        ShowModal(this);
        this.setState({
          loading: false,
        });
        if (data.error.length === 0) {
          let allData = data.data;
          let allList = [];
          for (var i = 0; i < allData.sonList.length; i++) {
            let dlist = allData.sonList[i].detList
            for (var j = 0; j < dlist.length; j++) {
              let obj = dlist[j]
              allData.sonList[0].detList[0].applyDepName = allData.applyDepName; // 部门
              allData.sonList[0].detList[0].remarks = allData.remarks; // 报销事由
              dlist[0].contractNo = allData.sonList[i].contractNo; // 合同编号
              dlist[0].bidType = allData.sonList[i].bidType;
              dlist[0].buyerId = allData.sonList[i].buyerId; // 客户id
              dlist[0].buyerName = allData.sonList[i].buyerName;
              dlist[0].orderNo = allData.sonList[i].orderNo; // 订单号
              dlist[0].releaseStart = allData.sonList[i].releaseStart;
              dlist[0].releaseEnd = allData.sonList[i].releaseEnd; // 公出时间
              dlist[0].duration = allData.sonList[i].duration;  // 费用时间
              dlist[0].districtName = allData.sonList[i].districtName; // 出差地址
              dlist[0].userNames = allData.sonList[i].userNames; // 出差企业
              dlist[0].plan = allData.sonList[i].plan; // 出差事由
              dlist[0].publicReleaseType = allData.sonList[i].publicReleaseType; // 公出关联
              dlist[0].types = allData.sonList[i].type; // 报销类型
              dlist[0].erid = allData.sonList[i].id; // 二级报销id
              dlist[0].typesOther = allData.sonList[i].typeOther;
              if (allData.sonList[i].type == 2) { // 非业务报销
                obj.type = allData.sonList[i].secondaryType;
                obj.typeOther = allData.sonList[i].secondaryTypeOther;
              } else if (allData.sonList[i].type == 3 || allData.sonList[i].type == 0) { // 第三方付款 其他
                obj.cost = "费用"
              } else if (allData.sonList[i].type == 4) { // 申请借支
                obj.cost = "借支费用"
              } else if (allData.sonList[i].type == 4) { // 申请抵扣
                obj.cost = "抵扣费用"
              }

              allList.push(obj)
            }
            allData.sonList[i].settlementAmount != 0 &&
              allList.push({ noEdit: true, id: allData.sonList[i].id, cost: "抵扣", amount: allData.sonList[i].settlementAmount, realAmount: " " })
            allList.push({ noEdit: true, id: allData.sonList[i].id, cost: "小计", amount: allData.sonList[i].amount, realAmount: allData.sonList[i].realAmount })
          }
          allList.push({ noEdit: true, id: allData.id, cost: "合计", amount: allData.amount, realAmount: allData.realAmount })
          this.setState({
            data: data.data,
            newList: allList,
          })
          // this.setState({
          //   data: data.data,
          //   imgs: data.data.attachmentUrl
          //     ? splitUrl(data.data.attachmentUrl, ",", globalConfig.avatarHost + "/upload")
          //     : [],
          // })
          // this.getAccountList(id)
          this.getLogData(id)
        } else {
          message.warning(data.error[0].message)
        }
      }.bind(this),
    }).always(
      function () {
        this.setState({
          loading: false,
        });
      }.bind(this)
    );
  }

  // 报销费用详情
  // getAccountList(eaid) {
  //   const { data } = this.state
  //   $.ajax({
  //     method: "get",
  //     dataType: "json",
  //     crossDomain: false,
  //     url: globalConfig.context + "/api/admin/expenseAccount/details/list",
  //     data: { eaid, },
  //     success: function (datas) {
  //       if (datas.error.length === 0) {
  //         let sum = 0
  //         for (var i = 0; i < datas.data.length; i++) {
  //           sum = commonAdd(sum, datas.data[i].amount)
  //         }
  //         let leftList = JSON.parse(JSON.stringify(datas.data)) || []
  //         let jsonArray = []
  //         if (data.type != 4 && data.type != 5 && data.debitTotalAmount) {
  //           leftList.push({ "other": "预借支", "amount": data.debitTotalAmount },)
  //         }
  //         if (data.type != 4 && data.type != 5) {
  //           leftList.push(
  //             { "other": "总金额", "amount": sum },
  //             { "other": "实报金额", "amount": (sum > data.debitTotalAmount) ? commonAdd(sum, -data.debitTotalAmount) : 0 })
  //         }
  //         if (data.type == 1) {
  //           // 差旅费
  //           jsonArray = [
  //             { "head": `支付公司：${data.payDepName}` },
  //             { "head": `事由：${data.remarks}` },
  //             { "head": `公出企业：${data.userNames}` },
  //             { "head": `公出地点：${data.districtName}` },
  //             { "head": `时间：${moment(data.releaseStartStr).format('YYYY-MM-DD HH:mm') + " 至 " + moment(data.releaseEndStr).format('YYYY-MM-DD HH:mm')}` },
  //             { "head": `公出时长：${data.duration}` },
  //           ]
  //         } else if (data.type == 3) {
  //           // 第三方付款
  //           jsonArray = [
  //             { "head": `支付公司：${data.payDepName}` },
  //             { "head": `事由：${data.remarks}` },
  //           ]
  //         } else {
  //           // 通用
  //           jsonArray = [
  //             { "head": `事由：${data.remarks}` },
  //           ]
  //         }
  //         let newArray = []
  //         if (jsonArray.length >= leftList.length) {
  //           for (var i = 0; i < leftList.length; i++) {
  //             jsonArray[i] = Object.assign(jsonArray[i], leftList[i])
  //           }
  //           newArray = jsonArray
  //         } else {
  //           for (var i = 0; i < jsonArray.length; i++) {
  //             leftList[i] = Object.assign(jsonArray[i], leftList[i])
  //           }
  //           newArray = leftList
  //         }
  //         newArray.push({}, {})
  //         this.setState({
  //           list: datas.data || [],
  //           newList: newArray,
  //           total: sum,
  //         })
  //       } else {
  //         message.warning(datas.error[0].message);
  //       }
  //     }.bind(this),
  //   }).always(
  //     function () {
  //       this.setState({
  //         loading: false,
  //       });
  //     }.bind(this)
  //   );
  // }

  isHere(list = []) {
    for (var i = 0; i < list.length; i++) {
      if (!list[i].id) {
        this.setState({
          processStatus: list[i].processStatus
        })
        return
      }
    }
  }

  // 日志
  getLogData(eaid) {
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/expenseAccount/log/list",
      data: { eaid },
      success: function (data) {
        if (data.error.length === 0) {
          this.setState({
            logdataSour: data.data || []
          });
          this.isHere(data.data || [])
        } else {
          message.warning(data.error[0].message);
        }
      }.bind(this)
    }).always(
      function () {

      }.bind(this)
    );
  }

  // 审核
  toExamine(num) {
    const { checkData, reason } = this.state
    if (!reason) {
      message.warning("请填写审核说明~");
      return;
    }
    this.setState({
      loading: true,
    });
    $.ajax({
      method: "POST",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/expenseAccount/examine",
      data: {
        id: checkData.id,
        reason,
        status: num,//1同意 3驳回
      },
    }).done(
      function (data) {
        if (!data.error.length) {
          message.success("审核成功！");
          this.setState({
            visible: "",
            reason: "",
            showDetails: false,
            checkData: {},
          });
          this.getDetails(this.state.data.id)
          this.getLogData(this.state.data.id)
        } else {
          message.warning(data.error[0].message);
        }
      }.bind(this)
    );
  }

  distinct(arr, key) {
    let hash = {};
    let result = [];
    for (let i = arr.length - 1; i >= 0; i--) {
      let value = arr[i][key];
      if (!hash[value]) {
        hash[value] = true;
        result.unshift(arr[i]);
      }
    }
    return result;
  }

  // 修改
  updateRealAmount() {
    const { editA } = this.state
    this.setState({
      upLoading: true,
    })
    if (editA == "typesOther" && !this.state.upTypesOther) {
      message.warn("其他类型说明不能为空！");
      return
    }
    if (editA == "remarks" && !this.state.upRemarks) {
      message.warn("报销事由不能为空！");
      return
    }
    if (editA == "contractNo" && this.state.cNo != 1 && this.state.cNo != 2) {
      message.warn("请先选择！");
      return
    }
    if (editA == "contractNo" && this.state.cNo == 1 && !this.state.upOrderNo) {
      message.warn("请选择合同编号！");
      return
    }
    if (editA == "detTypeOther" && !this.state.detTypeOther) {
      message.warn("其他类型说明不能为空！");
      return
    }
    let obj1 = {
      id: this.state.upId,
      amount: this.state.upAmount,
    }
    let obj2 = {
      id: this.state.upId,
      remarks: this.state.upRemarks,
    }
    let obj3 = {
      id: this.state.upId,
      typeOther: this.state.upTypesOther,
    }
    let obj4 = {
      id: this.state.upId,
      orderNo: this.state.cNo == 2 ? "" : this.state.upOrderNo,
    }
    let obj5 = {
      id: this.state.upId,
      typeOther: this.state.detTypeOther,
    }
    $.ajax({
      method: "POST",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + editA == "amount"
        ? "/api/admin/expenseAccount/updateRealAmount" : editA == "detTypeOther"
          ? "/api/admin/expenseAccount/updateDetailsTypeOther" : "/api/admin/expenseAccount/updateTypeOther",
      data: editA == "amount"
        ? obj1 : editA == "remarks"
          ? obj2 : editA == "typesOther"
            ? obj3 : editA == "contractNo"
              ? obj4 : editA == "detTypeOther" && obj5,
    }).done(
      function (data) {
        this.setState({
          upLoading: false,
        })
        if (!data.error.length) {
          message.success("修改成功！");
          this.setState({
            editA: "",
            upId: "",
            upUserNames: "",
            upUserId: "",
            upList: [],
          });
          this.getDetails(this.state.data.id)
        } else {
          message.warning(data.error[0].message);
        }
      }.bind(this)
    );
  }

  // 查询合同编号
  selectOrderByUid() {
    this.setState({
      sloading: true
    })
    $.ajax({
      method: "GET",
      dataType: "json",
      crossDomain: false,
      url: "/api/admin/release/selectOrderByUid",
      data: {
        uid: this.state.upUserId,
      },
    }).done(
      function (data) {
        this.setState({
          sloading: false
        })
        if (!data.error.length) {
          this.setState({
            upList: data.data
          })
        } else {
          message.warning(data.error[0].message);
        }
      }.bind(this)
    );
  }

  // 查询企业
  httpChange(e) {
    this.setState({
      upUserNames: e,
    });
    if (e.length >= 1) {
      this.supervisor(e);
    }
  }

  // 
  supervisor(e) {
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/customer/getUserByNames",
      data: {
        name: e,
        type: 1,
        pageNo: 1,
        pageSize: 10,
      },
      success: function (data) {
        let thedata = data.data;
        if (!thedata) {
          if (data.error && data.error.length) {
            message.warning(data.error[0].message);
          }
          thedata = {};
        }
        this.setState({
          customerArr: thedata.list,
        });
      }.bind(this),
    }).always(
      function () {

      }.bind(this)
    );
  }

  selectAuto(value) {
    const { customerArr } = this.state
    this.setState({
      upUserId: customerArr.find((item) => item.name == value).id,
    });
  }

  radioChange(e) {
    const _this = this
    this.setState({
      checkType: e.target.value,
      orderData: {}
    }, () => {
      if (e.target.value == "a") {
        this.getListA()
      } else if (e.target.value == "b") {
        this.getListB()
      } else if (e.target.value == "c") {
        this.getListC()
      } else {
        this.xiangmu(e.target.value)
        this.jiedianNew(e.target.value)
        setTimeout(function () {
          _this.orderDetailData(e.target.value)
        }, 100)
      }
    })
  }

  addRowColor(record) {
    if (record.assist === 1 || record.assist === 2 || record.assist === 3) {
      return 'light'
    } else {
      return 'dark'
    }
  }

  getOrder() {
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/release/selectOrderByUid",
      data: {
        uid: this.state.checkInfo.buyerId,
      },
      success: function (data) {
        if (data.error && data.error.length === 0) {
          if (data.data) {
            this.setState({
              orderList: data.data
            })
          }
        } else {
          message.warning(data.error[0].message);
        }
      }.bind(this),
    })
  }

  getListA(pageNoA) {
    const { paginationA, } = this.state;
    this.setState({
      loading: true,
    });
    let data = {
      pageNo: pageNoA || 1,
      pageSize: paginationA.pageSize,
      contractNo: this.state.checkInfo.contractNo,
    };
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/expenseAccount/detailsList",
      data: data,
      success: function (data) {
        ShowModal(this);
        this.setState({
          loading: false,
        });
        if (data.error && data.error.length === 0) {
          if (data.data.list) {
            paginationA.current = data.data.pageNo;
            paginationA.total = data.data.totalCount;
            if (data.data && data.data.list && !data.data.list.length) {
              paginationA.current = 0;
              paginationA.total = 0;
            }
            this.setState({
              dataSourceA: data.data.list,
              paginationA: this.state.paginationA,
              pageNoA: data.data.pageNo,
              totalAmountA: data.data.totalAmount,
            });
          } else {
            this.setState({
              dataSource: data.data,
              pagination: false,
            });
          }
        } else {
          message.warning(data.error[0].message);
        }
      }.bind(this),
    }).always(
      function () {
        this.setState({
          loading: false,
        });
      }.bind(this)
    );
  }

  getListB(pageNoB) {
    const { paginationB, } = this.state;
    this.setState({
      loading: true,
    });
    let data = {
      pageNo: pageNoB || 1,
      pageSize: paginationB.pageSize,
      expenseMain: 1,
      username: this.state.checkInfo.buyerName,
    }
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/expenseAccount/pageList",
      data: data,
      success: function (data) {
        ShowModal(this);
        this.setState({
          loading: false,
        });
        if (data.error && data.error.length === 0) {
          if (data.data.list) {
            paginationB.current = data.data.pageNo;
            paginationB.total = data.data.totalCount;
            if (data.data && data.data.list && !data.data.list.length) {
              paginationB.current = 0;
              paginationB.total = 0;
            }
            this.setState({
              dataSourceB: data.data.list,
              paginationB: this.state.paginationB,
              pageNoB: data.data.pageNo,
              totalAmountB: data.data.totalAmount,
            });
          }
        } else {
          message.warning(data.error[0].message);
        }
      }.bind(this),
    }).always(
      function () {
        this.setState({
          loading: false,
        });
      }.bind(this)
    );
  }
  // 公出信息
  getListC(pageNoC) {
    const { paginationC, } = this.state;
    this.setState({
      loading: true,
    });
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/release/publicReleaseAndCount",
      data: {
        pageNo: pageNoC || 1,
        pageSize: paginationC.pageSize,
        status: 2,
        uid: this.state.checkInfo.buyerId,
      },
      success: function (data) {
        this.setState({
          loading: false,
        });
        if (data.error && data.error.length === 0) {
          if (data.data.list) {
            paginationC.current = data.data.pageNo;
            paginationC.total = data.data.totalCount;
            if (data.data && data.data.list && !data.data.list.length) {
              paginationC.current = 0;
              paginationC.total = 0;
            }
          }
          this.setState({
            dataSourceC: data.data.list,
            paginationC: this.state.paginationC,
            pageNoC: data.data.pageNo,
            peopleCount: data.data.peopleCount,
            count: data.data.count,
            durationCount: data.data.durationCount,
          });
        } else {
          message.warning(data.error[0].message);
        }
      }.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)
    );
  }

  orderDetailData(orderNos) {
    this.setState({
      loading: true,
    });
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/newOrder/getOrderNewDetail",
      data: {
        orderNo: orderNos,
      },
      success: function (data) {
        if (data.error.length || data.data.list == "") {
          if (data.error && data.error.length) {
            message.warning(data.error[0].message);
            this.setState({
              loading: false,
            });
          }
        } else {
          let thisdata = data.data;
          this.setState({
            loading: false,
            orderUid: thisdata.uid,
            userName: thisdata.userName,
            primaryOrderNo: thisdata.primaryOrder,
            additionalOrder: thisdata.additionalOrder,
            contractNo: thisdata.contractNo,
            orderData: thisdata,
            isAddition: thisdata.additionalOrder ? true : false,
            deleteSign: thisdata.deleteSign,
            contractPictureUrl: thisdata.contractPictureUrl
              ? splitUrl(
                thisdata.contractPictureUrl,
                ",",
                globalConfig.avatarHost + "/upload"
              )
              : [],
          });
        }
      }.bind(this),
    });
  }

  xiangmu(orderNos) {
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/newOrder/getOrderTask",
      data: {
        orderNo: orderNos
      },
      success: function (data) {
        let theArr = [];
        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++) {
            let thisdata = data.data[i];
            thisdata.key = i;
            thisdata.sort = thisdata.cSort;
            theArr.push(thisdata);
          }
        }
        this.setState({
          dataSourceX: theArr
        });
      }.bind(this)
    });
  }

  render() {
    const { TextArea } = Input
    const { data, visible, newList, logdataSour, columns, customerArr = [], checkInfo } = this.state
    const { onCancel } = this.props
    const formItemLayout = {
      labelCol: { span: 5 },
      wrapperCol: { span: 18 },
    };
    const radioStyle = {
      display: 'block',
      height: '30px',
      lineHeight: '30px',
    };
    const options = customerArr.map((group) => (
      <Select.Option key={group.id} value={group.name}>
        {group.name}
      </Select.Option>
    ));
    return (
      <Modal
        maskClosable={false}
        visible={true}
        onOk={false}
        onCancel={onCancel}
        width={1400}
        title={<span style={{ fontWeight: "bold" }}>报销详情
          <Button
            type="primary"
            style={{ marginLeft: 30 }}
            onClick={() => { this.setState({ isTable: !this.state.isTable }) }}
          >{this.state.isTable ? "切换列表显示" : "切换表格显示"}</Button>
        </span>}
        footer=""
      >
        <Spin spinning={this.state.loading}>
          <div className="m_body"
            ref={ref => {
              this.printTemp = ref;
            }}
          >
            {this.state.isTable
              ? <div className="m_table">
                <div className="m_title">报销明细表</div>
                <div className="m_head">
                  <div>报销编号：{data.checkNo}</div>
                  <div>申请部门：{data.applyDepName}</div>
                  <div>报销人：{data.aname}</div>
                  <div>报销日期：{moment(data.createTimeStr).format('YYYY年MM月DD日')}</div>
                  <div
                    style={{ cursor: this.props.isOperate && "pointer" }}
                    onClick={() => {
                      this.props.isOperate &&
                        this.setState({
                          editA: "remarks",
                          editTit: "修改报销事由",
                          upId: data.id,
                          upRemarks: data.remarks,
                        })
                    }}
                  >报销事由：{data.remarks}</div>
                  <div>收款方式：{!data.name ? "" : (data.bank + " " + data.accounts + " " + data.name)}</div>
                </div>
                <Table
                  columns={columns}
                  dataSource={newList}
                  bordered
                  size="middle"
                  pagination={false}
                />
                <div className="m_head">
                  {
                    !!data.sonList && data.sonList.length > 0 && data.sonList.map(it =>
                      !!it.countStr && <div style={{ width: "100%", marginTop: 8 }}>{it.countStr}</div>
                    )
                  }
                  <div style={{ width: "100%", marginTop: 8 }}>审核日志：
                    {
                      this.state.logdataSour.map(item =>
                        item.showStatus == 0 && <span key={item.id}>【{item.auditorName}&nbsp;&nbsp;{item.createTimeStr}&nbsp;&nbsp;{item.remarks}】&nbsp;&nbsp;</span>
                      )
                    }
                  </div>
                </div>
              </div>
              : <Form layout="horizontal" id="demand-form">
                <Spin spinning={this.state.loading}>
                  <div className="clearfix">
                    <FormItem
                      {...formItemLayout}
                      label="报销编号"
                    >
                      <span>{data.checkNo}</span>
                    </FormItem>
                  </div>
                  {/* <div className="clearfix">
                    <FormItem
                      {...formItemLayout}
                      label="总金额"
                    >
                      <span>{data.totalAmount}</span>
                    </FormItem>
                  </div> */}
                  {/* <div className="clearfix">
                    <FormItem

                      {...formItemLayout}
                      label="报销至订单"
                    >
                      <div>
                        <div>{data.buyerName}</div>
                        <div>{data.contractNo}</div>
                      </div>
                    </FormItem>
                  </div> */}
                  <div className="clearfix">
                    <FormItem
                      {...formItemLayout}
                      label="报销时间"
                    >
                      <span>{data.createTimeStr}</span>
                    </FormItem>
                  </div>
                  {data.type == 1 &&
                    <div>
                      <div style={{ fontSize: 13, fontWeight: "bold" }}>公出信息</div>
                      <div className="clearfix">
                        <FormItem

                          {...formItemLayout}
                          label="公出企业"
                        >
                          <span>{data.userNames}</span>
                        </FormItem>
                      </div>
                      <div className="clearfix">
                        <FormItem

                          {...formItemLayout}
                          label="公出地点"
                        >
                          <span>{data.districtName}</span>
                        </FormItem>
                      </div>
                      <div className="clearfix">
                        <FormItem

                          {...formItemLayout}
                          label="时间"
                        >
                          <span>{data.releaseStartStr} 至 {data.releaseEndStr}</span>
                        </FormItem>
                      </div>
                      <div className="clearfix">
                        <FormItem

                          {...formItemLayout}
                          label="公出时长"
                        >
                          <span>{data.duration}小时</span>
                        </FormItem>
                      </div>
                    </div>}
                  <div style={{ fontSize: 13, fontWeight: "bold" }}>报销详细</div>
                  <div className="clearfix">
                    <FormItem
                      {...formItemLayout}
                      label="报销人"
                    >
                      <span>{data.aname}</span>
                    </FormItem>
                  </div>
                  <div className="clearfix">
                    <FormItem
                      {...formItemLayout}
                      label="报销公司"
                    >
                      <span>{data.applyDepName}</span>
                    </FormItem>
                  </div>
                  <div className="clearfix">
                    <FormItem
                      {...formItemLayout}
                      label="支付公司"
                    >
                      <span>{data.payDepName}</span>
                    </FormItem>
                  </div>
                  <div className="clearfix">
                    <FormItem
                      labelCol={{ span: 5 }}
                      wrapperCol={{ span: 18 }}
                      label="报销事由"
                    >
                      <p style={{ maxWidth: 500, wordWrap: "break-word" }}>
                        {data.remarks}
                      </p>
                    </FormItem>
                  </div>
                  <div style={{ fontSize: 13, fontWeight: "bold" }}>报销费用详细</div>
                  {
                    data.sonList.map(it =>
                      <div key={it.id} style={{ borderBottom: "1px solid #000" }}>
                        <div className="clearfix">
                          <FormItem
                            {...formItemLayout}
                            label="报销金额"
                          >
                            <span style={{ fontWeight: "bold" }}>{it.amount}（元）</span>
                          </FormItem>
                        </div>
                        <div className="clearfix">
                          <FormItem
                            {...formItemLayout}
                            label="报销类型"
                          >
                            <span style={{ fontWeight: "bold" }}>
                              {getAccountName(it.type, it.typeOther)}
                              {it.type == 2 && (" - " + getSecondaryAccountName(it.secondaryType, it.secondaryTypeOther))}
                            </span>
                          </FormItem>
                        </div>
                        {
                          !!it.publicReleaseType &&
                          <div className="clearfix">
                            <FormItem
                              {...formItemLayout}
                              label="报销来源"
                            >
                              <span style={{ fontWeight: "bold" }}>
                                {["业务公出", "技术公出", "行政公出", "技术协单", "技术助手"][it.publicReleaseType]}
                              </span>
                            </FormItem>
                          </div>
                        }
                        {
                          !!it.contractNo ?
                            <div className="clearfix">
                              <FormItem
                                {...formItemLayout}
                                label="报销至订单"
                              >
                                <span style={{ fontWeight: "bold" }}>{it.contractNo}</span>
                              </FormItem>
                            </div>
                            : <FormItem
                              {...formItemLayout}
                              label=" "
                            ><span style={{ fontWeight: "bold" }}>报销至部门</span></FormItem>
                        }
                        {/* 差旅费显示 */}
                        {it.type == 1 &&
                          it.detList.map(item =>
                            item.type == 1
                              ? <div>
                                <div className="clearfix" >
                                  <FormItem
                                    {...formItemLayout}
                                    label="交通费"
                                  >
                                    <span>
                                      {getVehicleName(item.vehicle, item.vehicleOther)}
                                      （{item.startDistrict + " - " + item.endDistrict}）
                                      {item.amount}（元）
                                    </span>
                                  </FormItem>
                                </div>
                              </div>
                              : <div className="clearfix" >
                                <FormItem
                                  {...formItemLayout}
                                  label={getTypeName(item.type)}
                                >
                                  <span>{item.amount}（元）</span>
                                </FormItem>
                              </div>
                          )
                        }

                        {/* 通用 */}
                        {(it.type == 0 || it.type == 2 || it.type == 4 || it.type == 5) &&
                          it.detList.map(item =>
                            <div className="clearfix" >
                              {!!item.agreeTimeStr &&
                                <FormItem
                                  {...formItemLayout}
                                  label={it.type == 5 ? "支付时间:" : "需付款时间:"}
                                >
                                  <span>{item.agreeTimeStr.slice(0, 10)}</span>
                                </FormItem>}
                              <FormItem
                                {...formItemLayout}
                                label={it.type == 4
                                  ? "预借支金额:" : it.type == 5
                                    ? "抵扣金额:" : "金额:"}
                              >
                                <span>{item.amount}（元）</span>
                              </FormItem>
                            </div>
                          )
                        }
                        {/* 第三方付款 */}
                        {it.type == 3 &&
                          it.detList.map(item =>
                            <div className="clearfix" >
                              {!!item.agreeTimeStr &&
                                <FormItem
                                  {...formItemLayout}
                                  label="需付款时间"
                                >
                                  <span>{item.agreeTimeStr.slice(0, 10)}</span>
                                </FormItem>
                              }
                              <FormItem
                                {...formItemLayout}
                                label="付款方式"
                              >
                                <span>{["公对公转账"][item.payType]}</span>
                              </FormItem>
                              <FormItem
                                {...formItemLayout}
                                label="发票类型"
                              >
                                <span>{["普票", "专票"][item.invoiceType]}</span>
                              </FormItem>
                              <FormItem
                                {...formItemLayout}
                                label="发票号"
                              >
                                <span>{item.invoiceNo}</span>
                              </FormItem>
                              <FormItem
                                {...formItemLayout}
                                label="付款单位"
                              >
                                <span>{item.payerName}</span>
                              </FormItem>
                              <FormItem
                                {...formItemLayout}
                                label="开户银行"
                              >
                                <span>{item.openBank}</span>
                              </FormItem>
                              <FormItem
                                {...formItemLayout}
                                label="银行账户"
                              >
                                <span>{item.bankAccounts}</span>
                              </FormItem>
                              <FormItem
                                {...formItemLayout}
                                label="开户行地址"
                              >
                                <span>{item.openBankAddress}</span>
                              </FormItem>
                              <FormItem
                                {...formItemLayout}
                                label="金额（元）"
                              >
                                <span>{item.amount}</span>
                              </FormItem>
                            </div>
                          )
                        }
                        {
                          it.settlementAmount != 0 && it.type != 4 && it.type != 5 &&
                          <div className="clearfix">
                            <FormItem
                              {...formItemLayout}
                              label="抵扣金额"
                            >
                              <span>{it.settlementAmount}（元）</span>
                            </FormItem>
                          </div>
                        }
                        <div className="clearfix">
                          <FormItem
                            {...formItemLayout}
                            label="附件"
                          >
                            <div style={{ paddingTop: '10px', paddingBottom: '10px' }}>
                              {!!it.attachmentUrl ? <ImgList domId={it.id} fileList={splitUrl(it.attachmentUrl, ",", globalConfig.avatarHost + "/upload")} ItemWidth={'96px'} /> : <div />}
                            </div>
                          </FormItem>
                        </div>
                      </div>
                    )
                  }

                  {data.type != 4 && data.debitTotalAmount &&
                    <div className="clearfix">
                      <FormItem
                        {...formItemLayout}
                        label="预借支"
                      >
                        <span style={{ color: "red" }}>{data.debitTotalAmount}（元）</span>
                      </FormItem>
                    </div>}
                  {data.type != 4 && data.type != 5 &&
                    <div className="clearfix">
                      <FormItem
                        {...formItemLayout}
                        label="本次报销金额"
                      >
                        <span style={{ color: "red", fontWeight: "bold" }}>{data.amount}（元）</span>
                      </FormItem>
                    </div>}
                  {data.type != 4 && data.type != 5 &&
                    <div className="clearfix">
                      <FormItem
                        {...formItemLayout}
                        label="实报金额"
                      >
                        <span style={{ color: "red", fontWeight: "bold" }}>{data.realAmount}（元）</span>
                      </FormItem>
                    </div>}
                  <div style={{ fontSize: 13, fontWeight: "bold" }}>收款详情</div>
                  {data.type != 3 && data.type != 5 &&
                    <div>
                      <div className="clearfix">
                        <FormItem
                          {...formItemLayout}
                          label="收款人"
                        >
                          <span>{!!data.name && data.name}</span>
                        </FormItem>
                      </div>
                      <div className="clearfix">
                        <FormItem
                          {...formItemLayout}
                          label="收款银行"
                        >
                          <span>{!!data.bank && data.bank}</span>
                        </FormItem>
                      </div>
                      <div className="clearfix">
                        <FormItem
                          {...formItemLayout}
                          label="收款账户"
                        >
                          <span>{!!data.accounts && data.accounts}</span>
                        </FormItem>
                      </div>
                    </div>}
                  <div style={{ fontSize: 13, fontWeight: "bold" }}>审核意见</div>
                  <ul
                    style={{
                      // width: "560px",
                      overflow: "hidden",
                      paddingLeft: "90px",
                      position: "relative",
                    }}
                  >
                    {logdataSour.map((item, index) => {
                      return (
                        <li
                          key={index}
                          style={{
                            width: "100%",
                            height: "auto",
                            wordBreak: "break-all",
                            marginBottom: "10px",
                          }}
                        >
                          <span>{item.auditorName}：</span>
                          <span style={{ color: ["#1D4FEA", "#34DE38", "#108EE9", "red", "#808080", "#1D4FEA"][item.status] }}>
                            {["【发起】，", "【通过】，", "【完成】，", "【驳回】，", "【撤销】，", "【修改】，"][item.status]}
                            {this.state.processStatus == item.processStatus && !item.id && data.status != 0 &&
                              <span style={{ color: "#FFA500" }}>&nbsp;审核中...</span>}
                          </span>
                          <span>{item.remarks}</span>
                          <span>&nbsp;&nbsp;&nbsp;{item.createTimeStr}</span>
                        </li>
                      );
                    })}
                  </ul>

                  <div className="clearfix" style={{ marginTop: 20 }}>
                    <Button
                      type="primary"
                      style={{
                        float: "right",
                      }}
                      onClick={() => {
                        this.setState({
                          logvisible: true
                        })
                        this.getLogData(data.id)
                      }}
                    >
                      查看日志
                    </Button>
                  </div>
                  {/* 暂时隐藏 */}
                  {false && this.props.isOperate && data.examine == 1 &&
                    <div className="clearfix"
                      style={{ width: 500, margin: "20px auto" }}>
                      <TextArea
                        rows={4}
                        value={this.state.reason}
                        onChange={(e) => {
                          this.setState({
                            reason: e.target.value,
                          })
                        }}
                        placeholder="请填写审核内容"
                      />
                      <div
                        style={{
                          width: 250,
                          display: "flex",
                          justifyContent: "space-between",
                          margin: "20px auto 0"
                        }}
                      >
                        <Button type="primary"
                          style={{ margin: 4 }}
                          onClick={(e) => {
                            this.setState({
                              checkData: data
                            }, () => {
                              this.toExamine(1)
                            })
                          }}
                        >同意</Button>
                        <Button type="danger"
                          style={{ margin: 4 }}
                          onClick={(e) => {
                            this.setState({
                              checkData: data
                            }, () => {
                              this.toExamine(3)
                            })
                          }}
                        >驳回</Button>
                      </div>
                    </div>
                  }
                </Spin>
              </Form>
            }
          </div>
        </Spin>

        <Button
          type="primary"
          style={{
            float: "right",
            marginTop: 10,
            position: "absolute",
            top: 0,
            right: 50,
          }}
          onClick={() => {
            const _this = this
            this.setState({
              isPrint: true
            }, () => {
              Print(_this.printTemp)
            })
            setTimeout(function () {
              _this.setState({
                isPrint: false
              })
            }, 2000)
          }}
        >
          打印
        </Button>

        {/* <ReactToPrint
          trigger={() => (
            <Button
              type="primary"
              style={{
                float: "right",
                marginTop: 10,
                position: "absolute",
                top: 0,
                right: 50,
              }}
            >
              打印
            </Button>
          )}
          content={() => this.refs.all}
          bodyClass="print-body"
        /> */}
        {
          //审核弹窗
          this.state.visible != "" &&
          <Modal
            width="400px"
            maskClosable={false}
            title="审核"
            confirmLoading={this.state.loading}
            visible={this.state.visible != ""}
            onOk={() => { this.toExamine(visible == "adopt" ? 1 : visible == "reject" && 3) }}
            okText={this.state.visible == "adopt" ? "通过" : this.state.visible == "reject" && "驳回"}
            onCancel={() => {
              this.setState({
                visible: '',
                reason: "",
                checkData: {},
              })
            }}
          >
            <TextArea
              rows={4}
              value={this.state.reason}
              onChange={(e) => {
                this.setState({
                  reason: e.target.value,
                })
              }}
              placeholder="请填写审核内容"
            />
          </Modal>
        }
        {
          // 审核日志
          this.state.logvisible &&
          <Modal
            visible={this.state.logvisible}
            className="admin-desc-content"
            width="800px"
            maskClosable={false}
            title="审核日志"
            footer={null}
            onCancel={() => {
              this.setState({
                logvisible: false,
              })
            }}
          >
            <div className="patent-table">
              <Spin spinning={this.state.loading}>
                <Table
                  columns={this.state.logcolumns}
                  dataSource={this.state.logdataSour}
                  pagination={false}
                  bordered
                  size="small"
                />
              </Spin>
            </div>
          </Modal>
        }
        {
          // 修改
          this.state.editA != "" &&
          <Modal
            visible={this.state.editA != ""}
            maskClosable={false}
            title={this.state.editTit}
            cancelText="取消"
            width={300}
            okText="确认"
            onOk={() => { this.updateRealAmount() }}
            onCancel={() => { this.setState({ editA: "" }) }}
          >
            {
              this.state.editA == "amount" &&
              <Input
                placeholder='请输入'
                type='number'
                value={this.state.upAmount}
                onChange={e => {
                  this.setState({
                    upAmount: e.target.value
                  })
                }}
              />
            }
            {
              this.state.editA == "remarks" &&
              <TextArea
                rows={4}
                value={this.state.upRemarks}
                onChange={(e) => {
                  this.setState({
                    upRemarks: e.target.value,
                  })
                }}
                placeholder="报销事由"
              />
            }
            {
              this.state.editA == "typesOther" &&
              <Input
                placeholder='请填写类型说明'
                value={this.state.upTypesOther}
                onChange={e => {
                  this.setState({
                    upTypesOther: e.target.value
                  })
                }}
              />
            }
            {
              this.state.editA == "contractNo" &&
              <RadioGroup onChange={e => { this.setState({ cNo: e.target.value }) }} value={this.state.cNo}>
                <Radio value={1}>修改合同编号</Radio>
                <Radio value={2}>删除合同编号</Radio>
              </RadioGroup>
            }
            {
              this.state.editA == "contractNo" && this.state.cNo == 1 &&
              <div>
                <div style={{ margin: "20px 0" }}>
                  <AutoComplete
                    className="certain-category-search"
                    dropdownClassName="certain-category-search-dropdown"
                    dropdownMatchSelectWidth={false}
                    style={{ width: 180 }}
                    dataSource={options}
                    placeholder="企业名称"
                    value={this.state.upUserNames}
                    onChange={this.httpChange.bind(this)}
                    filterOption={true}
                    onSelect={this.selectAuto.bind(this)}
                  >
                    <Input />
                  </AutoComplete>
                  <Button
                    disabled={!this.state.upUserId}
                    style={{ marginLeft: 10 }}
                    type="primary"
                    onClick={() => {
                      this.selectOrderByUid()
                    }}>搜索</Button>
                </div>

                <div>
                  <Spin spinning={this.state.sloading}>
                    {
                      !!this.state.upList && this.state.upList.length == 0 &&
                      <div style={{ color: "red", margin: "20px auto", textAlign: "center" }}>该企业暂无订单</div>
                    }
                    <RadioGroup
                      onChange={(e) => {
                        this.setState({
                          upOrderNo: e.target.value
                        })
                      }} value={this.state.upOrderNo}>
                      {
                        !!this.state.upList && this.state.upList.map(item =>
                          <Radio key={item.contractNo} style={radioStyle} value={item.orderNo}>编号：{item.contractNo}</Radio>
                        )
                      }
                    </RadioGroup>
                  </Spin>
                </div>
              </div>
            }
            {
              this.state.editA == "detTypeOther" &&
              <Input
                placeholder='请填写详细说明'
                value={this.state.detTypeOther}
                onChange={e => {
                  this.setState({
                    detTypeOther: e.target.value
                  })
                }}
              />
            }
          </Modal>
        }
        {
          this.state.check &&
          <Modal
            visible={this.state.check}
            maskClosable={false}
            footer={false}
            width={1400}
            onCancel={() => { this.setState({ check: false }) }}
          >
            <Spin spinning={this.state.loading}>
              <Table
                columns={columns}
                dataSource={[checkInfo]}
                bordered
                size="middle"
                pagination={false}
              />
              <div style={{ textAlign: "center", fontSize: "30px", fontWeight: "bold", margin: "30px 0" }}>{checkInfo.contractNo}报销/公出/订单详细</div>
              <div style={{ margin: "30px 0" }}>
                <RadioGroup size="large" onChange={e => { this.radioChange(e) }} value={this.state.checkType}>
                  <RadioButton value="a">报销详情</RadioButton>
                  <RadioButton value="b">全部报销</RadioButton>
                  <RadioButton value="c">所有公出</RadioButton>
                  {
                    this.state.orderList.map(item =>
                      <RadioButton value={item.orderNo} key={item.contractNo}>{item.contractNo}签单</RadioButton>
                    )
                  }
                </RadioGroup>
              </div>
              {
                this.state.checkType == "a" &&
                <Table
                  columns={this.state.columnsA}
                  dataSource={this.state.dataSourceA}
                  bordered
                  size="middle"
                  pagination={false}
                />
              }
              {
                this.state.checkType == "a" &&
                <p style={{ display: "inline-block", fontSize: "14px", color: "red" }}>
                  <span style={{ marginRight: 10 }}>
                    {`报销总计：${this.state.totalAmountA} 元`}
                  </span>
                </p>
              }
              {
                this.state.checkType == "b" &&
                <Table
                  columns={this.state.columnsB}
                  dataSource={this.state.dataSourceB}
                  bordered
                  size="middle"
                  pagination={false}
                />
              }
              {
                this.state.checkType == "b" &&
                <p style={{ display: "inline-block", fontSize: "14px", color: "red" }}>
                  <span style={{ marginRight: 10 }}>
                    {`报销总计：${this.state.totalAmountB} 元`}
                  </span>
                </p>
              }
              {
                this.state.checkType == "c" &&
                <Table
                  scroll={{ x: "120%" }}
                  columns={this.state.columnsC}
                  dataSource={this.state.dataSourceC}
                  bordered
                  size="middle"
                  pagination={false}
                  rowClassName={this.addRowColor}
                />
              }
              {
                this.state.checkType == "c" &&
                <p style={{ display: "inline-block", fontSize: "14px", color: "red" }}>
                  <span style={{ marginRight: 10 }}>
                    {`公出总计：${this.state.peopleCount}人公出，${this.state.count}人次，${this.state.durationCount}小时`}
                  </span>
                </p>
              }
              {
                !!this.state.orderData.orderNo &&
                <OrderDetail
                  domId={this.state.checkType}
                  orderUid={this.state.checkInfo.buyerId}
                  orderData={this.state.orderData}
                  dataSourceX={this.state.dataSourceX}
                  orderNo={this.state.checkType}
                  totalCui={this.state.totalCui}
                  contactListNew={this.state.contactListNew}
                  pictureUrl={this.state.contractPictureUrl}
                />
              }
            </Spin>
          </Modal>
        }
      </Modal>
    );
  }
}

export default AccountDetails;