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

import React, { Component } from 'react';
import { AutoComplete, Button, DatePicker, Input, message, Select, Spin, Table, Tabs } from "antd";
import {
  ShowModal,
} from "@/tools";
import { ChooseList } from "../../order/orderNew/chooseList";
import $ from "jquery/src/ajax";
import './index.less';
import moment from "moment";

import DetailedList from './detailedList';
import { object } from "prop-types";

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

class ProjecCount extends Component {
  constructor(props) {
    super(props);
    this.state = {
      pageNo: 1,
      loading: false,
      changeList: undefined,
      columns: [
        {
          title: "编号",
          dataIndex: "key",
          key: "key",
        },
        {
          title: "公出人员",
          dataIndex: "name",
          key: "name",
        },
        {
          title: "公出次数",
          dataIndex: "tg",
          key: "tg",
          className: 'projectTable',
          onCellClick: (record, event) => {
            event.stopPropagation();
            this.setState({
              status: 2,
              visible: true,
              aid: record.aid,
              title: '公出次数',
              aName: record.name,
            })
          }
        },
        {
          title: "总时长(时)",
          dataIndex: "duration",
          key: "duration",
          className: 'projectTable',
          onCellClick: (record, event) => {
            event.stopPropagation();
            this.setState({
              status: 2,
              visible: true,
              aid: record.aid,
              title: '总时长(时)',
              aName: record.name,
            })
          }
        },
        {
          title: "未审核次数",
          dataIndex: "wsh",
          key: "wsh",
          className: 'projectTable',
          onCellClick: (record, event) => {
            event.stopPropagation();
            this.setState({
              status: 1,
              visible: true,
              aid: record.aid,
              title: '未审核次数',
              aName: record.name,
            })
          }
        },
        {
          title: "驳回次数",
          dataIndex: "bh",
          key: "bh",
          className: 'projectTable',
          onCellClick: (record, event) => {
            event.stopPropagation();
            this.setState({
              status: 0,
              visible: true,
              aid: record.aid,
              title: '驳回次数',
              aName: record.name,
            })
          }
        },
        {
          title: "已打卡次数",
          dataIndex: "dk",
          key: "dk",
          className: 'projectTable',
          onCellClick: (record, event) => {
            event.stopPropagation();
            this.setState({
              status: undefined,
              clockIn: 1,
              visible: true,
              aid: record.aid,
              title: '已打卡次数',
              aName: record.name,
            })
          }
        },
      ],
      pagination: {
        defaultCurrent: 1,
        defaultPageSize: 10,
        showQuickJumper: true,
        pageSize: 10,
        onChange: function (page) {
          this.loadData(page);
        }.bind(this),
        showTotal: function (total) {
          return "共" + total + "条数据";
        }
      },
      dataSource: [],

      releaseDate: [],
      createReleaseDate: [],
      superId: undefined,
      clockIn: 0,
    }
    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.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) {
    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/publicReleaseStatistics",
      data: {
        pageNo: pageNo || 1,
        pageSize: this.state.pagination.pageSize,
        clockStart: this.state.releaseDate[0] || undefined,
        clockEnd: this.state.releaseDate[1] || undefined,
        createStart: this.state.createReleaseDate[0] || undefined,
        createEnd: this.state.createReleaseDate[1] || undefined,
        depId: this.state.superId || undefined,
        aid: this.state.theTypes || undefined,
      },
      success: function (data) {
        ShowModal(this);
        this.setState({
          loading: false
        })
        let theArr = [];
        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: [],
      createReleaseDate: [],
      superId: undefined,
      theTypes: undefined,
      auto: ''
    }, () => {
      this.loadData();
    })
  }

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

      }.bind(this)
    );
  }

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

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

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

  componentWillMount() {
    this.loadData();
    this.selectSuperId();
  }
  // 导出
  exportExec() {
    //debugger
    let data = {
      clockStart: this.state.releaseDate[0],
      clockEnd: this.state.releaseDate[1],
      createStart: this.state.createReleaseDate[0],
      createEnd: this.state.createReleaseDate[1],
      depId: this.state.superId,
      aid: this.state.theTypes
    };
    for (let i of Object.keys(data)) {
      if (!data[i]) {
        delete data[i]
      }
    }
    window.location.href =
      globalConfig.context +
      "/api/admin/release/publicReleaseStatistics/export?" +
      $.param(data);
  }

  render() {
    const dataSources = this.state.customerArr || [];
    const options = dataSources.map((group) => (
      <Select.Option key={group.id} value={group.name}>
        {group.name}
      </Select.Option>
    ));
    return (
      <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 style={{ marginRight: "10px" }}>
                <Select
                  placeholder="请选择部门"
                  style={{ width: 200, marginLeft: 10 }}
                  value={this.state.superId}
                  onChange={(e) => { this.setState({ superId: e }) }}
                  notFoundContent="未获取到上级组织列表">
                  {this.state.contactsOption}
                </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 style={{ marginRight: "10px" }}>
                <span style={{ marginRight: '10px', marginBottom: '10px' }}>打卡时间 :</span>
                <RangePicker
                  style={{ 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>
              <span style={{ marginRight: "10px" }}>
                <span style={{ marginRight: '10px', marginBottom: '10px' }}>创建时间 :</span>
                <RangePicker
                  style={{ 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>
              <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 }}>
              <ChooseList
                columns={this.state.columns}
                changeFn={this.changeList}
                changeList={this.state.changeList}
                top={55}
                margin={11}
              />
            </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: 800, y: 0 }}
              columns={
                this.state.changeList
                  ? this.state.changeList
                  : this.state.columns
              }
              dataSource={this.state.dataSource}
              pagination={this.state.pagination}
            />
          </Spin>
        </div>
        {this.state.visible &&
          <DetailedList
            status={this.state.status}
            title={this.state.title}
            aid={this.state.aid}
            aName={this.state.aName}
            depId={this.state.depId}
            createReleaseDate={this.state.createReleaseDate}
            releaseDate={this.state.releaseDate}
            clockIn={this.state.clockIn || undefined}
            visible={this.state.visible}
            onCancel={() => {
              this.setState({
                visible: false,
                clockIn: 0,
              })
            }}
          />
        }
      </div>
    )
  }
}

export default ProjecCount;