salary-management-front/pc4mobx/hrmSalary/pages/calculateDetail/placeOnFileDetail.js

import React from "react";
import CustomTab from "../../components/customTab";
import { Dropdown, Menu, message } from "antd";
import { WeaHelpfulTip, WeaInputSearch, WeaSlideModal } from "ecCom";
import SlideModalTitle from "../../components/slideModalTitle";
import FileMergeDetail from "./fileMergeDetail";
import { getQueryString } from "../../util/url";
import { inject, observer } from "mobx-react";
import "./index.less";

@inject("calculateStore")
@observer
export default class PlaceOnFileDetail extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      slideVisiable: false,
      selectedRowKeys: [],
      searchValue: ""
    };
    this.id = "";
  }

  componentWillMount() {
    this.id = getQueryString("id");
    const { calculateStore: { getSalarySobCycle } } = this.props;
    getSalarySobCycle(this.id);
  }

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

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

  handleClick = ({ data }) => {
    const childFrameObj = document.getElementById("atdTable");
    const salaryAcctRecordId = getQueryString("id");
    const { type, data: { id, data: record } = {} } = data;
    if (type === "PR") {
      if (id === "BATCHDELETE") {
        this.setState({ selectedRowKeys: record });
      }
    } else {
      const payload = {
        type: "PR",
        listType: "",
        hasOperate: false,
        url: "/api/bs/hrmsalary/salaryacct/acctresult/list",
        queryParams: {
          salaryAcctRecordId,
          employeeName: this.state.searchValue
        }
      };
      childFrameObj.contentWindow.postMessage(JSON.stringify(payload), "*");
    }
  };

  handleSearch = (employeeName) => {
    const childFrameObj = document.getElementById("atdTable");
    const salaryAcctRecordId = getQueryString("id");
    const payload = {
      type: "PR",
      listType: "",
      url: "/api/bs/hrmsalary/salaryacct/acctresult/list",
      queryParams: {
        salaryAcctRecordId,
        employeeName
      }
    };
    childFrameObj.contentWindow.postMessage(JSON.stringify(payload), "*");
  };

  handleMenuClick() {
    const { calculateStore: { exportAll } } = this.props;
    const { selectedRowKeys } = this.state;
    if (selectedRowKeys.length === 0) {
      message.warning("未选择条目");
      return;
    }
    exportAll(this.id, selectedRowKeys.join(","));
  }

  handleExportAll = () => {
    const { calculateStore: { exportAll } } = this.props;
    exportAll(this.id);
  };

  render() {
    const { calculateStore } = this.props;
    const { baseSalarySobCycle } = calculateStore;
    const { slideVisiable } = this.state;


    const menu = (
      <Menu onClick={(e) => this.handleMenuClick(e)}>
        <Menu.Item key="3">导出所选</Menu.Item>
      </Menu>
    );

    const renderRightOperation = () => {
      return (
        <div style={{ display: "inline-block" }}>
          <Dropdown.Button type="primary" style={{ marginRight: "10px" }} onClick={() => {
            this.handleExportAll();
          }} overlay={menu}>导出全部</Dropdown.Button>
          <WeaInputSearch placeholder="请输入姓名" onChange={(value) => {
            this.setState({ searchValue: value });
          }} value={this.state.searchValue} onSearch={(value) => {
            this.handleSearch(value);
          }}/>
        </div>
      );
    };

    return (

      <div className="placeOnFileDetail">
        <CustomTab
          searchOperationItem={
            renderRightOperation()
          }
        />
        <div className="tabWrapper">
          <span>薪资所属月：{baseSalarySobCycle.salaryMonth}</span>
          <WeaHelpfulTip
            width={100}
            title={`薪资周期\n
                        ${baseSalarySobCycle.salaryCycle && baseSalarySobCycle.salaryCycle.fromDate}至${baseSalarySobCycle.salaryCycle && baseSalarySobCycle.salaryCycle.endDate}\n
                        税款所属期\n
                        ${baseSalarySobCycle.taxCycle}\n
                        考勤取值周期\n
                        ${baseSalarySobCycle.attendCycle && baseSalarySobCycle.attendCycle.fromDate}至${baseSalarySobCycle.attendCycle && baseSalarySobCycle.attendCycle.endDate}\n
                        福利台账月份\n
                        引用${baseSalarySobCycle.socialSecurityCycle}的福利台账数据`}
            placement="topLeft"
          />
        </div>
        <div className="tableWrapper">
          <iframe
            style={{ border: 0, width: "100%", height: "100%" }}
            // src="http://localhost:7607/#/atdTable"
            src="/spa/hrmSalary/hrmSalaryCalculateDetail/index.html#/atdTable"
            id="atdTable"
          />
        </div>
        {
          slideVisiable &&
          <WeaSlideModal
            visible={slideVisiable}
            top={0}
            width={40}
            height={100}
            direction={"right"}
            measure={"%"}
            title={
              <SlideModalTitle
                subtitle={"合并计税详情"}
                editable={true}
              />
            }
            content={(<FileMergeDetail/>)}
            onClose={() => this.setState({ slideVisiable: false })}
            showMask={true}
            closeMaskOnClick={() => this.setState({ slideVisiable: false })}/>
        }
      </div>
    );
  }
}