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

/*
 * Author: 黎永顺
 * name: 考勤引用数据查看
 * Description:
 * Date: 2023/3/7
 */
import React, { Component } from "react";
import { WeaInputSearch, WeaLocaleProvider, WeaSlideModal, WeaTop } from "ecCom";
import { batchDeleteData, viewAttendQuote } from "../../../../apis/attendance";
import AttendanceDataEditSlide from "./attendanceDataEditSlide";
import { Button, message, Modal, Spin } from "antd";
import "./index.less";
import { calcPageNo } from "../../../../util";

const { getLabel } = WeaLocaleProvider;

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

  componentDidMount() {
    window.addEventListener("message", this.handleReceive, false);
  }

  componentWillUnmount() {
    window.removeEventListener("message", this.handleReceive, false);
  }

  handleReceive = async ({ data }) => {
    const { type, payload: { id, params } = {} } = data;
    if (type === "turn") {
      switch (id) {
        case "PAGEINFO":
          this.setState({ pageInfo: { ...this.state.pageInfo, ...params } }, () => this.viewAttendQuote());
          break;
        case "EDIT":
          this.setState({ attendanceSlide: { visible: true, record: params } });
          break;
        case "CHECKBOX":
          const { selectedRowKeys } = params;
          this.setState({ selectedRowKeys });
          break;
        default:
          break;
      }
    }
  };

  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");
      this.setState({ selectedRowKeys: [], pageInfo: { current: 1, pageSize: 10, total: 0 } });
    }
  }

  viewAttendQuote = (extraPayload = {}, props) => {
    const { loading, pageInfo, keyword, selectedRowKeys } = this.state, { attendQuoteId } = props || this.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
        }, () => this.postMessageToChild({
          pageInfo: this.state.pageInfo, dataSource, showRowSelection: true, unitTableType: "attendanceView",
          selectedRowKeys,
          columns: [
            ..._.map(columns, (o, i) => ({ ...o, width: 150, fixed: i === 0 ? "left" : false })),
            {
              title: getLabel(111, "操作"), dataIndex: "operate", fixed: "right",
              operateType: [{ key: "EDIT", label: getLabel(111, "编辑") }]
            }
          ]
        }));
      }
    }).catch(() => this.setState({ loading: { ...loading, query: false } }));
  };
  postMessageToChild = (payload = {}) => {
    const i18n = {
      "操作": getLabel(30585, "操作"), "编辑": getLabel(111, "编辑"), "共": getLabel(18609, "共"),
      "条": getLabel(18256, "条")
    };
    const childFrameObj = document.getElementById("attendanceViewTable");
    childFrameObj && childFrameObj.contentWindow.postMessage(JSON.stringify({ ...payload, i18n }), "*");
  };
  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();
  };
  batchDeleteData = () => {
    Modal.confirm({
      title: getLabel(111, "信息确认"),
      content: getLabel(111, "确认要删除吗?"),
      onOk: () => {
        const { selectedRowKeys, pageInfo, loading } = this.state;
        this.setState({ loading: { ...loading, del: true } });
        batchDeleteData({ attendQuoteDataIds: selectedRowKeys }).then(({ status, errormsg }) => {
          if (status) {
            message.success(getLabel(111, "操作成功！"));
            this.setState({
              selectedRowKeys: [], loading: { ...loading, del: false },
              pageInfo: {
                ...pageInfo,
                current: calcPageNo(pageInfo.total, pageInfo.current, 10, selectedRowKeys.length)
              }
            }, () => this.viewAttendQuote());
          } else {
            message.error(errormsg);
          }
        });
      }
    });
  };

  render() {
    const { showOperateBtn, salaryYearMonth, ...extra } = this.props;
    const { loading, keyword, attendanceSlide, selectedRowKeys } = this.state;
    const btns = [
      <Button type="primary" onClick={this.handleExportAttendQuote}>{getLabel(81272, "导出全部")}</Button>,
      <Button type="ghost" disabled={_.isEmpty(selectedRowKeys)}
              onClick={this.batchDeleteData}>{getLabel(111, "批量删除")}</Button>,
      <WeaInputSearch
        value={keyword} placeholder={getLabel(543380, "请输入姓名/部门/工号/手机号")}
        onChange={keyword => this.setState({ keyword })}
        onSearch={() => this.viewAttendQuote({ current: 1 }, this.props)}
      />
    ];
    return (
      <WeaSlideModal {...extra} className="attendanceSlideWrapper" top={0} height={100} width={100} measure="%"
                     direction="right" title={
        <WeaTop title={getLabel(525196, "考勤数据")} icon={<i className="icon-coms-fa"/>}
                iconBgcolor="#F14A2D"
                buttons={showOperateBtn ? btns : btns.slice(2)}/>
      }
                     content={
                       <div className="attendance-slide-body">
                         <div className="attendance-tb-tip">
                           <div>{getLabel(543376, "考勤周期")}：{salaryYearMonth}</div>
                           <div></div>
                         </div>
                         <div style={{ height: `calc(100% - 40px)` }}>
                           <Spin spinning={loading.query}>
                             <iframe
                               style={{ border: 0, width: "100%", height: "100%" }}
                               // src="http://localhost:7607/#/unitTable"
                               src="/spa/hrmSalary/hrmSalaryCalculateDetail/index.html#/unitTable"
                               id="attendanceViewTable"
                             />
                           </Spin>
                         </div>
                         <AttendanceDataEditSlide {...attendanceSlide}
                                                  onSuccess={() => this.viewAttendQuote({}, this.props)}
                                                  onClose={() => this.setState({
                                                    attendanceSlide: { ...attendanceSlide, visible: false }
                                                  })}/>
                       </div>
                     }
      />
    );
  }
}

export default AttendanceDataViewSlide;