kede-client/js/component/manageCenter/customer/publicStatistics/detailedList.jsx

import React, { Component } from "react";
import {
  AutoComplete,
  Button,
  DatePicker,
  Input,
  message,
  Modal,
  Select,
  Spin,
  Table,
  Tabs,
  Tag,
  Form,
  Upload,
  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";

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

class DetailedList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      pageNo: 1,
      loading: false,
      changeList: [],
      annexUrlArr: [],
      photoUrlArr: [],
      imgListVisible: false,
      logVisible: false,
      columns: [
        {
          title: "编号",
          dataIndex: "key",
          key: "key",
          width: 45,
          fixed: "left",
        },
        {
          title: "客户名称",
          dataIndex: "userName",
          key: "userName",
          width: 120,
          fixed: "left",
          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: 80,
          render: (text) => {
            return (
              <div>{text}</div>
            );
          },
        },
        {
          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) => (
            <div>
              {text}
              {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: 200,
          render: (text) => {
            return (
              <div>{text}</div>
            );
          },
        },
        {
          title: "公出计划",
          dataIndex: "plan",
          key: "plan",
          width: 200,
          render: (text) => {
            return (
              <div>{text}</div>
            );
          },
        },
        {
          title: "预计效果",
          dataIndex: "expectedEffect",
          key: "expectedEffect",
          width: 200,
          render: (text) => {
            return (
              <div>{text}</div>
            );
          },
        },
        {
          title: "本次公出目标总结",
          dataIndex: "supplement",
          key: "supplement",
          width: 200,
          render: (text) => {
            return (
              <div>{text}</div>
            );
          },
        },
        {
          title: "下一次公出计划",
          dataIndex: "nextPlan",
          key: "nextPlan",
          width: 200,
          render: (text) => {
            return (
              <div>{text}</div>
            );
          },
        },
        // {
        //     title: "补充",
        //     dataIndex: "supplement",
        //     key: "supplement",
        //     width: 60,
        //     render: (text) => {
        //         return (
        //             <Tooltip title={text}>
        //                 <div style={{
        //                     width:50,
        //                     overflow:'hidden',
        //                     textOverflow: "ellipsis",
        //                     whiteSpace:'nowrap',
        //                 }}>{text}</div>
        //             </Tooltip>
        //         )
        //     },
        // },
        {
          title: "审核/指导",
          dataIndex: "auditInfo",
          key: "auditInfo",
          width: 200,
          render: (text) => {
            return (
              <div>{text}</div>
            );
          },
        },
        {
          title: "操作",
          dataIndex: "annexUrl",
          key: "annexUrl",
          width: 100,
          render: (text, record) => (
            <div>
              <Button
                type={"primary"}
                onClick={(e) => {
                  e.stopPropagation();
                  let arr1 = text || [];
                  let arr2 = record.photoUrl || [];
                  this.setState(
                    {
                      annexUrlArr: splitUrl(
                        arr1,
                        ",",
                        globalConfig.avatarHost + "/upload"
                      ),
                      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: [],
      status: props.status,
      clockIn: props.clockIn,
      theTypes: props.aid,
      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.supervisor1 = this.supervisor1.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);
  }

  //获取上级组织
  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)
    );
  }

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

  componentWillMount() {
    let _this = this
    this.setState({
      loading: true,
      aid: this.props.aid,
      depId: this.props.depId,
      releaseDate: this.props.releaseDate,
      createReleaseDate: this.props.createReleaseDate,
    })
    setTimeout(function () {
      _this.loadData();
      _this.setState({
        loading: false
      })
    }, 300)
    this.selectSuperId();
  }


  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,
        createStart: this.state.createReleaseDate[0] || undefined,
        createEnd: this.state.createReleaseDate[1] || undefined,
        aid: this.state.theTypes,
        sid: this.state.theTypes1 || undefined,
        uid: this.state.theCustomerTypes,
        status: this.state.status,
        clockIn: this.state.clockIn,
        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: [],
        theCustomerTypes: undefined,
        status: this.props.status,
        clockIn: this.props.clockIn,
        auto: "",
        auto1: "",
        customer: "",
        theTypes: this.props.aid,
        theTypes1: undefined,
        type: undefined,
        contractNo: undefined,
      },
      () => {
        this.loadData();
      }
    );
  }

  supervisor(e) {
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/customer/listAdminByName",
      data: {
        adminName: e,
      },
      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,
      },
      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,
    });
  }

  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,
    });
  }

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

  selectAuto(value, options) {
    this.setState({
      auto: 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) {
      customerArr1;
      contactLists.map(function (item) {
        if (item.name == e.toString()) {
          theType = item.id;
        }
      });
    }
    this.setState({
      theTypes: theType,
    });
  }

  exportExec() {
    message.config({
      duration: 20,
    });
    let loading = message.loading("下载中...");
    this.setState({
      exportPendingLoading: true,
    });
    let data = {
      releaseStart: this.state.releaseDate[0],
      releaseEnd: this.state.releaseDate[1],
      createStart: this.state.createReleaseDate[0] || undefined,
      createEnd: this.state.createReleaseDate[1] || undefined,
      aid: this.state.theTypes,
      sid: this.state.theTypes1,
      uid: this.state.theCustomerTypes,
      status: this.state.status,
      clockIn: this.state.clockIn,
      publicType: this.state.type,
    };
    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];
      }
    }
    // console.log(data);
    $.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)
    );
    // window.location.href =
    //   globalConfig.context +
    //   "/api/admin/release/publicReleaseDtails/export?" +
    //   $.param(data);
  }

  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>
        <Modal
          maskClosable={false}
          visible={this.props.visible}
          onOk={this.props.onCancel}
          onCancel={this.props.onCancel}
          width="1600px"
          title={
            <span>
              <span style={{ marginRight: "15px" }}>公出详细列表</span>
              <Tag color="#f50">{this.props.aName}</Tag>
              <Tag color="#108ee9">{this.props.title}</Tag>
            </span>
          }
          footer=""
          className="admin-desc-content"
        >
          <div className="user-content">
            <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, marginLeft: 10 }}
                      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, marginLeft: 10 }}
                      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={3}>异常打卡</Select.Option>
                    </Select>
                  </span>
                  <span>
                    <Select
                      placeholder="请选择公出类型"
                      style={{ width: 120, marginLeft: 10 }}
                      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 style={{ marginRight: "10px" }}>
                    <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>
                  <span style={{ marginRight: "10px" }}>
                    <span style={{ marginRight: "5px", marginBottom: "10px" }}>
                      创建时间 :
                    </span>
                    <RangePicker
                      style={{ width: 200, marginRight: "10px", marginBottom: "10px" }}
                      value={[
                        this.state.createReleaseDate[0]
                          ? moment(this.state.createReleaseDate[0])
                          : null,
                        this.state.createReleaseDate[1]
                          ? moment(this.state.createReleaseDate[1])
                          : null,
                      ]}
                      onChange={(data, dataString) => {
                        this.setState({ createReleaseDate: dataString });
                      }}
                    />
                  </span>
                  <span style={{ marginRight: "10px" }}>
                    <span style={{ marginRight: "5px", marginBottom: "10px" }}>
                      公出时间 :
                    </span>
                    <RangePicker
                      style={{ width: 200, marginRight: "10px", marginBottom: "10px" }}
                      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 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: "max-content", y: "100%" }}
                  columns={
                    this.state.changeList.length > 0
                      ? this.state.changeList
                      : this.state.columns
                  }
                  dataSource={this.state.dataSource}
                  pagination={this.state.pagination}
                />
              </Spin>
            </div>
          </div>
        </Modal>
        {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>申请附件</div>
              <ImgList
                fileList={this.state.annexUrlArr}
                domId="publicStatistics"
              />
              <div style={{ paddingTop: "35px" }}>打卡照片</div>
              <ImgList
                fileList={this.state.photoUrlArr}
                domId="publicStatistics1"
              />
            </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 DetailedList;