salary-management-front/pc4mobx/hrmSalary/pages/dataAcquisition/attendance/components/attendanceDataViewSlide.js

/*
 * Author: 黎永顺
 * name: 考勤引用数据查看
 * Description:
 * Date: 2023/3/7
 */
import React, { Component } from "react";
import { WeaFormItem, WeaInput, WeaInputSearch, WeaSlideModal } from "ecCom";
import { Button } from "antd";
import SlideModalTitle from "../../../../components/slideModalTitle";
import { viewAttendQuote } from "../../../../apis/attendance";
import UnifiedTable from "../../../../components/UnifiedTable";
import "./index.less";

class AttendanceDataViewSlide extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: {
        query: false
      },
      keyword: "",
      dataSource: [],
      columns: [],
      pageInfo: {
        current: 1, pageSize: 10, total: 0
      }
    };
  }

  componentWillReceiveProps(nextProps, nextContext) {
    if (nextProps.visible !== this.props.visible && nextProps.visible) {
      document.querySelector(".attendanceRefWrapper").classList.add("zIndex0-attendance");
      this.viewAttendQuote({}, nextProps);
    } else if (nextProps.visible !== this.props.visible && !nextProps.visible) {
      document.querySelector(".attendanceRefWrapper").classList.remove("zIndex0-attendance");
    }
  }

  viewAttendQuote = (extraPayload = {}, props) => {
    const { loading, pageInfo, keyword } = this.state;
    const { attendQuoteId } = props;
    this.setState({ loading: { ...loading, query: true } });
    viewAttendQuote({ ...pageInfo, attendQuoteId, keyword, ...extraPayload }).then(({ status, data }) => {
      this.setState({ loading: { ...loading, query: false } });
      if (status) {
        const { columns, list: dataSource, pageNum: current, pageSize, total } = data.pageInfo;
        this.setState({
          pageInfo: { ...pageInfo, current, pageSize, total },
          dataSource,
          columns
        });
      }
    }).catch(() => this.setState({ loading: { ...loading, query: false } }));
  };
  renderCustomOperate = () => {
    const { keyword } = this.state;
    const { showOperateBtn } = this.props;
    return ([
      <div style={{ display: "inline-block" }}>
        {showOperateBtn && <Button type="primary" onClick={this.handleExportAttendQuote}>导出全部</Button>}
        <WeaInputSearch
          value={keyword}
          style={{ marginLeft: 10 }}
          placeholder="请输入姓名/部门/工号/手机号"
          onChange={keyword => this.setState({ keyword })}
          onSearch={() => this.viewAttendQuote({ current: 1 }, this.props)}
        />
      </div>
    ]);
  };
  handleExportAttendQuote = () => {
    if (!this.handleDebounce) {
      this.handleDebounce = _.debounce(() => {
        const { attendQuoteId } = this.props;
        const url = `${window.location.origin}/api/bs/hrmsalary/attendQuote/export?attendQuoteId=${attendQuoteId}`;
        window.open(url, "_self");
        this.handleDebounce = null;
      }, 500);
    }
    this.handleDebounce();
  };

  render() {
    const { showOperateBtn, salaryYearMonth, ...extra } = this.props;
    const { columns, dataSource, loading, pageInfo } = this.state;
    const pagination = {
      ...pageInfo,
      showTotal: (total) => `共 ${total} 条`,
      pageSizeOptions: ["10", "20", "50", "100"],
      showSizeChanger: true,
      showQuickJumper: true,
      onShowSizeChange: (current, pageSize) => {
        this.setState({
          pageInfo: { ...pageInfo, current, pageSize }
        }, () => this.viewAttendQuote({}, this.props));
      },
      onChange: (current) => {
        this.setState({
          pageInfo: { ...pageInfo, current }
        }, () => this.viewAttendQuote({}, this.props));
      }
    };
    return (
      <WeaSlideModal
        {...extra}
        className="attendanceSlideWrapper"
        top={0}
        measureT="%"
        width={80}
        measureX="%"
        height={100}
        measureY="%"
        direction="right"
        title={
          <SlideModalTitle
            subtitle="考勤数据"
            editable={false}
            showOperateBtn={showOperateBtn}
            customOperate={this.renderCustomOperate()}
          />
        }
        content={
          <div>
            <WeaFormItem label="考勤周期" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} underline>
              <WeaInput value={salaryYearMonth} viewAttr={1}/>
            </WeaFormItem>
            <UnifiedTable
              rowKey="id"
              columns={_.map(columns, item => ({
                ...item,
                render: (text) => {
                  return <span className="ellipsis" title={text}> {text} </span>;
                }
              }))}
              dataSource={dataSource}
              pagination={pagination}
              loading={loading.query}
              xWidth={columns.length * 180}
            />
          </div>
        }
      />
    );
  }
}

export default AttendanceDataViewSlide;