| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090 | 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>            );          },        },        {          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) => (            <div>              {text}              <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;
 |