kede-client/js/component/manageCenter/customer/publicSummary/index.jsx

import React, { Component } from "react";
import {
  AutoComplete,
  Button,
  DatePicker,
  Input,
  message,
  Modal,
  Select,
  Spin,
  Table,
  Tabs,
  Tag,
  Tooltip,
} from "antd";
import { ShowModal, splitUrl, getClockState } from "@/tools";
import { clockState } from "@/dataDic";
import { ChooseList } from "../../order/orderNew/chooseList";
import $ from "jquery/src/ajax";
import "./index.less";
import moment from "moment";
import ImgList from "../../../common/imgList";
import Cascaders from "../../../common/cascaders";

const { TabPane } = Tabs;
const { RangePicker } = DatePicker;

class PublicSummary extends Component {
  constructor(props) {
    super(props);
    this.state = {
      pageNo: 1,
      loading: false,
      changeList: undefined,
      annexUrlArr: [],
      photoUrlArr: [],
      imgListVisible: false,
      logVisible: false,
      columns: [
        {
          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: "addressName",
        //   key: "addressName",
        //   width: 130,
        //   render: (text) => {
        //     return (
        //       <div>{text}</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: 120,
          render: (text, record) => (
            <div>
              {text.split("\n").map(it =>
                <div>{it}</div>
              )}
              {record.alone == 2 && record.assist == 1
                ? <Tag color="#58a3ff">无需打卡</Tag>
                : <Tag color={["#F21212", "#34DE38", "#ffd400"][record.clockIn]}>{["未打卡", "已打卡", "异常打卡"][record.clockIn]}</Tag>}
            </div>
          )
        },
        {
          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 >;
          },
        },
        {
          title: "操作",
          dataIndex: "annexUrl",
          key: "annexUrl",
          render: (text, record) => (
            <div>
              <Button
                type={"primary"}
                onClick={(e) => {
                  e.stopPropagation();
                  let arr1 = text || [];
                  // let arr2 = record.photoUrl || [];
                  let arr3 = record.list || [];
                  this.setState(
                    {
                      annexUrlArr: splitUrl(arr1, ",", globalConfig.avatarHost + "/upload"),
                      phoList: arr3,
                      // photoUrlArr: splitUrl(arr2, ",", globalConfig.avatarHost + "/upload"),
                    }, () => {
                      this.setState({
                        imgListVisible: true,
                      });
                    }
                  );
                }}
              >
                查看附件
              </Button>
              <Button
                type="primary"
                style={{ marginTop: 10 }}
                onClick={() => {
                  this.getLog(record.id)
                }}
              >
                公出日志
              </Button>
            </div>
          ),
        },
      ],
      logColumns: [
        {
          title: "状态",
          dataIndex: "status",
          key: "status",
          render: (text) => (
            <Tag color={getClockState(text, true).color}>
              {getClockState(text, true).title}
            </Tag>
          ),
        },
        {
          title: "操作人",
          dataIndex: "aname",
          key: "aname",
        },
        {
          title: "操作时间",
          dataIndex: "createTimes",
          key: "createTimes",
        },
        {
          title: "备注",
          dataIndex: "remarks",
          key: "remarks",
          render: (text) => {
            return (
              <Tooltip placement="topLeft" title={text}>
                <div
                  style={{
                    maxWidth: "250px",
                    overflow: "hidden",
                    textOverflow: "ellipsis",
                    whiteSpace: "nowrap",
                  }}
                >
                  {text}
                </div>
              </Tooltip>
            );
          },
        }
      ],
      pagination: {
        defaultCurrent: 1,
        defaultPageSize: 10,
        showQuickJumper: true,
        pageSize: 10,
        onChange: function (page) {
          this.loadData(page);
        }.bind(this),
        showTotal: function (total) {
          return "共" + total + "条数据";
        },
      },
      dataSource: [],
      logData: [],
      releaseDate: [moment(Date.now() - 777600000).format('YYYY-MM-DD'), moment(Date.now()).format('YYYY-MM-DD')],
      status: undefined,
      clockIn: undefined,
      deps: undefined,
      theTypes: undefined,
      theTypes1: undefined,
      theCustomerTypes: undefined,
      contractNo: undefined,
    };
    this.loadData = this.loadData.bind(this);
    this.resetAll = this.resetAll.bind(this);
    this.changeList = this.changeList.bind(this);
    this.selectSuperId = this.selectSuperId.bind(this);
    this.supervisor = this.supervisor.bind(this);
    this.httpChange = this.httpChange.bind(this);
    this.blurChange = this.blurChange.bind(this);
    this.selectAuto = this.selectAuto.bind(this);
    this.httpChange1 = this.httpChange1.bind(this);
    this.blurChange1 = this.blurChange1.bind(this);
    this.selectAuto1 = this.selectAuto1.bind(this);
    this.getCustomer = this.getCustomer.bind(this);
    this.selectCustomerAuto = this.selectCustomerAuto.bind(this);
    this.httpCustomerChange = this.httpCustomerChange.bind(this);
    this.blurCustomerChange = this.blurCustomerChange.bind(this);
    this.exportExec = this.exportExec.bind(this);
    this.addRowColor = this.addRowColor.bind(this)
  }
  //获取上级组织
  selectSuperId() {
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/organization/selectSuperId",
      data: {},
      success: function (data) {
        let theArr = [];
        if (data.error && data.error.length === 0) {
          for (let i = 0; i < data.data.length; i++) {
            let theData = data.data[i];
            theArr.push(
              <Select.Option value={theData.id} key={theData.id}>
                {theData.name}
              </Select.Option>
            );
          }
          this.setState({
            contactsOption: theArr,
          });
        } else {
          message.warning(data.error[0].message);
        }
      }.bind(this),
    }).always(
      function () {
        this.setState({
          loading: false,
        });
      }.bind(this)
    );
  }

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

  changeList(arr) {
    const newArr = [];
    this.state.columns.forEach((item) => {
      arr.forEach((val) => {
        if (val === item.title) {
          newArr.push(item);
        }
      });
    });
    this.setState({
      changeList: newArr,
    });
  }

  loadData(pageNo) {
    this.setState({
      loading: true,
    });
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/release/publicReleaseDtails",
      data: {
        pageNo: pageNo || 1,
        pageSize: this.state.pagination.pageSize,
        releaseStart: this.state.releaseDate[0] || undefined,
        releaseEnd: this.state.releaseDate[1] || undefined,
        aid: this.state.theTypes || undefined,
        sid: this.state.theTypes1 || undefined,
        uid: this.state.theCustomerTypes || undefined,
        status: this.state.status,
        clockIn: this.state.clockIn,
        deps: this.state.deps || undefined,
        publicType: this.state.type,
        contractNo: this.state.contractNo || undefined,
      },
      success: function (data) {
        ShowModal(this);
        let theArr = [];
        this.setState({
          loading: false,
        });
        if (data.error && data.error.length === 0) {
          for (let i = 0; i < data.data.list.length; i++) {
            let thisdata = data.data.list[i];
            thisdata.key = (data.data.pageNo - 1) * data.data.pageSize + i + 1;
            theArr.push(thisdata);
          }
          this.state.pagination.current = data.data.pageNo;
          this.state.pagination.total = data.data.totalCount;
          if (data.data && data.data.list && !data.data.list.length) {
            this.state.pagination.current = 0;
            this.state.pagination.total = 0;
          }
          this.setState({
            dataSource: theArr,
            pagination: this.state.pagination,
            pageNo: data.data.pageNo,
          });
        } else {
          message.warning(data.error[0].message);
        }
      }.bind(this),
    }).always(
      function () {
        this.setState({
          loading: false,
        });
      }.bind(this)
    );
  }

  resetAll() {
    this.setState(
      {
        releaseDate: [moment(Date.now() - 777600000).format('YYYY-MM-DD'), moment(Date.now()).format('YYYY-MM-DD')],
        theCustomerTypes: undefined,
        status: undefined,
        clockIn: undefined,
        deps: undefined,
        auto: "",
        auto1: "",
        customer: "",
        theTypes: undefined,
        theTypes1: undefined,
        type: undefined,
        contractNo: undefined,
      },
      () => {
        this.Cascaders.empty();
        this.loadData();
      }
    );
  }

  supervisor(e) {
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/customer/listAdminByName",
      data: {
        adminName: e,
        status: "2",
      },
      success: function (data) {
        if (data.error && data.error.length === 0) {
          this.setState({
            customerArr: data.data,
          });
        } else {
          message.warning(data.error[0].message);
        }
      }.bind(this),
    }).always(function () { }.bind(this));
  }

  supervisor1(e) {
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/customer/listAdminByName",
      data: {
        adminName: e,
        status: "2",
      },
      success: function (data) {
        if (data.error && data.error.length === 0) {
          this.setState({
            customerArr1: data.data,
          });
        } else {
          message.warning(data.error[0].message);
        }
      }.bind(this),
    }).always(function () { }.bind(this));
  }

  httpChange(e) {
    if (e.length >= 1) {
      this.supervisor(e);
    }
    this.setState({
      auto: e,
    });
  }

  httpChange1(e) {
    if (e.length >= 1) {
      this.supervisor1(e);
    }
    this.setState({
      auto1: e,
    });
  }

  selectAuto(value, options) {
    this.setState({
      auto: value,
    });
  }

  selectAuto1(value, options) {
    this.setState({
      auto1: value,
    });
  }

  httpCustomerChange(e) {
    if (e.length >= 1) {
      this.getCustomer(e);
    }
    this.setState({
      customer: e,
    });
  }

  selectCustomerAuto(value, options) {
    this.setState({
      customer: value,
    });
  }

  getCustomer(e) {
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/customer/getUserByName",
      data: {
        name: e,
      },
      success: function (data) {
        if (data.error && data.error.length === 0) {
          this.setState({
            customerList: data.data,
          });
        } else {
          message.warning(data.error[0].message);
        }
      }.bind(this),
    }).always(function () { }.bind(this));
  }

  blurCustomerChange(e) {
    let theType = "";
    let contactLists = this.state.customerList || [];
    if (e) {
      contactLists.map(function (item) {
        if (item.name == e.toString()) {
          theType = item.id;
        }
      });
    }
    this.setState({
      theCustomerTypes: theType,
    });
  }

  blurChange(e) {
    let theType = "";
    let contactLists = this.state.customerArr || [];
    if (e) {
      contactLists.map(function (item) {
        if (item.name == e.toString()) {
          theType = item.id;
        }
      });
    }
    this.setState({
      theTypes: theType,
    });
  }

  blurChange1(e) {
    let theType = "";
    let contactLists = this.state.customerArr1 || [];
    if (e) {
      contactLists.map(function (item) {
        if (item.name == e.toString()) {
          theType = item.id;
        }
      });
    }
    this.setState({
      theTypes1: theType,
    });
  }

  componentWillMount() {
    this.loadData();
    this.selectSuperId();
  }

  exportExec() {
    this.setState({
      exportPendingLoading: true,
    });
    message.config({
      duration: 20,
    });
    let loading = message.loading("下载中...");

    let data = {
      releaseStart: this.state.releaseDate[0] || undefined,
      releaseEnd: this.state.releaseDate[1] || undefined,
      aid: this.state.theTypes || undefined,
      sid: this.state.theTypes1 || undefined,
      uid: this.state.theCustomerTypes || undefined,
      status: this.state.status,
      clockIn: this.state.clockIn,
      // depId: this.state.depId,
      deps: this.state.deps || undefined,
      publicType: this.state.type,
      contractNo: this.state.contractNo || undefined

    };
    for (let i of Object.keys(data)) {
      if (i === "status" || i === "clockIn") {
        if (isNaN(parseInt(data[i]))) {
          delete data[i];
        }
      } else if (!data[i]) {
        delete data[i];
      }
    }

    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url:
        globalConfig.context + "/api/admin/release/publicReleaseDtails/export",
      data,
      success: function (data) {
        if (data.error.length === 0) {
          this.download(data.data);
        } else {
          message.warning(data.error[0].message);
        }
      }.bind(this),
    }).always(
      function () {
        loading();
        this.setState({
          exportPendingLoading: false,
        });
      }.bind(this)
    );
  }

  download(fileName) {
    window.location.href =
      globalConfig.context + "/open/download?fileName=" + fileName;
  }
  // 公出日志
  getLog(e) {
    this.setState({
      loading: true,
      logVisible: true
    });
    $.ajax({
      method: "get",
      dataType: "json",
      url: globalConfig.context + "/api/admin/release/listPublicReleaseLog",
      data: {
        id: e,
      },
      success: function (data) {
        if (data.error.length === 0) {
          this.setState({
            logData: data.data || [],
          });
        } else {
          message.warning(data.error[0].message);
        }
      }.bind(this),
    }).always(
      function () {
        this.setState({
          loading: false,
        });
      }.bind(this)
    );
  }

  render() {
    const dataSources = this.state.customerArr || [];
    const dataSources1 = this.state.customerArr1 || [];
    const options = dataSources.map((group) => (
      <Select.Option key={group.id} value={group.name}>
        {group.name}
      </Select.Option>
    ));
    const options1 = dataSources1.map((group) => (
      <Select.Option key={group.id} value={group.name}>
        {group.name}
      </Select.Option>
    ));
    const customerList = this.state.customerList || [];
    const customerOptions = customerList.map((group) => (
      <Select.Option key={group.id} value={group.name}>
        {group.name}
      </Select.Option>
    ));
    return (
      <div>
        <div className="user-content">
          <div className="content-title">
            <span>公出详细列表（全部）</span>
          </div>
          <Tabs defaultActiveKey="1" className="test">
            <TabPane tab="搜索" key="1">
              <div
                className="user-search"
                style={{
                  marginTop: "10px",
                  marginLeft: "10px",
                  marginRight: "10px",
                }}
              >
                <span>
                  <Input
                    placeholder="合同编号"
                    style={{ width: 120, marginRight: 10 }}
                    value={this.state.contractNo}
                    onChange={(e) => {
                      this.setState({
                        contractNo: e.target.value,
                      });
                    }}
                  />
                </span>
                <span>
                  <AutoComplete
                    className="certain-category-search"
                    dropdownClassName="certain-category-search-dropdown"
                    dropdownMatchSelectWidth={false}
                    style={{ width: "120px" }}
                    dataSource={customerOptions}
                    placeholder="输入客户名称"
                    value={this.state.customer}
                    onChange={this.httpCustomerChange}
                    filterOption={true}
                    onBlur={this.blurCustomerChange}
                    onSelect={this.selectCustomerAuto}
                  >
                    <Input />
                  </AutoComplete>
                </span>
                <span>
                  <Select
                    placeholder="请选择审核状态"
                    style={{ width: 120 }}
                    value={this.state.status}
                    onChange={(e) => {
                      this.setState({ status: e });
                    }}
                  >
                    {clockState.map((v, k) => (
                      <Select.Option key={k} value={v.id}>
                        {v.title}
                      </Select.Option>
                    ))}
                  </Select>
                </span>
                <span>
                  <Select
                    placeholder="请选择打卡状态"
                    style={{ width: 120 }}
                    value={this.state.clockIn}
                    onChange={(e) => {
                      this.setState({ clockIn: e });
                    }}
                  >
                    <Select.Option value={0}>未打卡</Select.Option>
                    <Select.Option value={1}>已打卡</Select.Option>
                    <Select.Option value={2}>异常打卡</Select.Option>
                  </Select>
                </span>
                <span style={{ marginRight: "10px" }}>
                  <Select
                    placeholder="请选择公出类型"
                    style={{ width: 120 }}
                    value={this.state.type}
                    onChange={(e) => {
                      this.setState({ type: e });
                    }}
                  >
                    <Select.Option value={0}>业务打卡</Select.Option>
                    <Select.Option value={1}>技术打卡</Select.Option>
                    <Select.Option value={2}>行政打卡</Select.Option>
                    <Select.Option value={3}>技术协单</Select.Option>
                    <Select.Option value={4}>协单助手</Select.Option>
                  </Select>
                </span>
                <span>
                  <AutoComplete
                    className="certain-category-search"
                    dropdownClassName="certain-category-search-dropdown"
                    dropdownMatchSelectWidth={false}
                    style={{ width: "120px" }}
                    dataSource={options}
                    placeholder="输入公出申请人"
                    value={this.state.auto}
                    onChange={this.httpChange}
                    filterOption={true}
                    onBlur={this.blurChange}
                    onSelect={this.selectAuto}
                  >
                    <Input />
                  </AutoComplete>
                </span>
                <span>
                  <AutoComplete
                    className="certain-category-search"
                    dropdownClassName="certain-category-search-dropdown"
                    dropdownMatchSelectWidth={false}
                    style={{ width: "120px" }}
                    dataSource={options1}
                    placeholder="输入跟单人"
                    value={this.state.auto1}
                    onChange={this.httpChange1}
                    filterOption={true}
                    onBlur={this.blurChange1}
                    onSelect={this.selectAuto1}
                  >
                    <Input />
                  </AutoComplete>
                </span>
                <Cascaders
                  ref={node => this.Cascaders = node}
                  placeholder="请选择公出部门"
                  id="id"
                  name="name"
                  children="list"
                  height={28}
                  onSel={(e) => {
                    this.setState({
                      deps: JSON.stringify(e),
                    });
                  }}
                />
                {/* <span style={{ marginRight: "10px" }}>
                  <Select
                    placeholder="请选择公出部门"
                    style={{ width: 200 }}
                    value={this.state.depId}
                    onChange={(e) => {
                      this.setState({ depId: e });
                    }}
                    notFoundContent="未获取到上级组织列表"
                  >
                    {this.state.contactsOption}
                  </Select>
                </span> */}
                <span style={{ marginRight: "10px" }}>
                  <span style={{ marginRight: "5px", marginBottom: "10px" }}>
                    公出时间 :
                  </span>
                  <RangePicker
                    allowClear={window.adminData.shiroList.indexOf("11") == -1}
                    disabledDate={(current) => {//“运营管理”角色只能查看部分时间段（暂时10天）的数据
                      let iskeep = window.adminData.shiroList.indexOf("11") != -1
                      return iskeep && current && current.valueOf() < Date.now() - 864000000;
                    }}
                    style={{ marginRight: "10px", marginBottom: "10px", width: 200 }}
                    value={[
                      this.state.releaseDate[0]
                        ? moment(this.state.releaseDate[0])
                        : null,
                      this.state.releaseDate[1]
                        ? moment(this.state.releaseDate[1])
                        : null,
                    ]}
                    onChange={(data, dataString) => {
                      this.setState({ releaseDate: dataString });
                    }}
                  />
                </span>
                <Button
                  type="primary"
                  onClick={() => {
                    this.loadData();
                  }}
                  style={{ marginRight: "10px", marginBottom: "10px" }}
                >
                  搜索
                </Button>
                <Button
                  onClick={this.resetAll}
                  style={{ marginRight: "10px", marginBottom: "10px" }}
                >
                  重置
                </Button>
              </div>
            </TabPane>
            <TabPane tab="更改表格显示数据" key="2">
              <div style={{ marginLeft: 10 }}>
                <Spin spinning={this.state.loading}>
                  <ChooseList
                    columns={this.state.columns}
                    changeFn={this.changeList}
                    changeList={this.state.changeList}
                    top={55}
                    margin={11}
                  />
                </Spin>
              </div>
            </TabPane>
            <TabPane tab="导出" key="3">
              <div style={{ float: "left" }}>
                <Button
                  loading={this.state.exportPendingLoading}
                  onClick={this.exportExec}
                  style={{ margin: 10 }}
                >
                  导出excel
                </Button>
              </div>
            </TabPane>
          </Tabs>
          <div className="patent-table">
            <Spin spinning={this.state.loading}>
              <Table
                bordered
                size="middle"
                scroll={{ x: "120%" }}
                columns={
                  this.state.changeList
                    ? this.state.changeList
                    : this.state.columns
                }
                dataSource={this.state.dataSource}
                pagination={this.state.pagination}
                rowClassName={this.addRowColor}
              />
            </Spin>
          </div>
        </div>
        {this.state.imgListVisible ? (
          <Modal
            maskClosable={false}
            visible={this.state.imgListVisible}
            onOk={() => {
              this.setState({
                imgListVisible: false,
              });
            }}
            onCancel={() => {
              this.setState({
                imgListVisible: false,
              });
            }}
            width="500px"
            title="图片"
            footer=""
          >
            <div>
              <div style={{ paddingBottom: "20px", fontSize: "15px" }}>申请附件</div>
              <ImgList
                fileList={this.state.annexUrlArr}
                domId="publicStatistics"
              />
              <div style={{ padding: "20px 0", fontSize: "15px" }}>打卡照片</div>
              {
                this.state.phoList.map(it =>
                  <div>
                    <div>{it.clockInTime}</div>
                    <ImgList
                      fileList={splitUrl(it.photoUrl, ",", globalConfig.avatarHost + "/upload")}
                      domId="publicStatistics1"
                    />
                  </div>
                )
              }
            </div>
          </Modal>
        ) : null}
        {
          this.state.logVisible &&
          <Modal
            maskClosable={false}
            visible={this.state.logVisible}
            width="700px"
            title="公出日志"
            footer=""
            onCancel={() => {
              this.setState({
                logVisible: false,
              });
            }}
          >
            <Table
              pagination={false}
              columns={this.state.logColumns}
              dataSource={this.state.logData}
            />
          </Modal>
        }
      </div>
    );
  }
}

export default PublicSummary;