salary-management-front/pc4mobx/hrmSalary/pages/employeedeclareDetail/index.js

/*
 * Author: 黎永顺
 * name: 人员信息报送-查看详情
 * Description:
 * Date: 2023/8/11
 */
import React, { Component } from "react";
import { WeaDatePicker, WeaLocaleProvider, WeaSelect, WeaTab, WeaTop } from "ecCom";
import { Button, Dropdown, Menu, Spin } from "antd";
import BaseInfo from "./components/baseInfo";
import { advanceConditions, submitStatus } from "./constants";
import { getSearchs } from "../../util";
import { inject, observer } from "mobx-react";
import { toJS } from "mobx";
import "./index.less";

const { getLabel } = WeaLocaleProvider;

@inject("taxAgentStore", "employeeDeclareStore")
@observer
class Index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedKey: "0",
      showSearchAd: false,
      declareStatus: "ALL",
      taxCycle: new Date()
    };
  }

  componentDidMount() {
    const { employeeDeclareStore: { advanceForm } } = this.props;
    document.title = getLabel(544289, "人员信息报送");
    advanceForm.initFormFields(advanceConditions);
    window.addEventListener("message", this.handleReceive, false);
  }

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

  handleReceive = ({ data }) => {
    const { type, payload: { id, params } = {} } = data;
    if (type === "init") {
      this.postMessageToChild({});
    } else if (type === "turn") {
      if (id === "PAGEINFO") {
        const { pageNum: current, size: pageSize } = params;
        this.setState({ pageInfo: { ...pageInfo, current, pageSize } });
      }
    }
  };
  postMessageToChild = (payload) => {
    const childFrameObj = document.getElementById("atdTable");
    childFrameObj && childFrameObj.contentWindow.postMessage(JSON.stringify({}), "*");
  };

  render() {
    const { selectedKey, showSearchAd, declareStatus, taxCycle } = this.state;
    const { taxAgentStore: { showOperateBtn }, employeeDeclareStore: { advanceForm: form } } = this.props;
    const menu = (
      <Menu>
        <Menu.Item key="1">{getLabel(32136, "批量删除")}</Menu.Item>
        <Menu.Item key="2">{getLabel(111, "批量编辑")}</Menu.Item>
        <Menu.Item key="3">{getLabel(81272, "导出全部")}</Menu.Item>
        <Menu.Item key="4">{getLabel(543715, "导出所选")}</Menu.Item>
      </Menu>
    );
    const buttons = [
      <Button type="primary">{getLabel(111, "全部报送")}</Button>,
      <Button type="ghost">{getLabel(111, "获取报送结果")}</Button>,
      <Button type="ghost">{getLabel(111, "刷新数据")}</Button>,
      <WeaDatePicker arrow type="month" className="pickerDateCustom flex a-center" value={taxCycle}
                     onChange={val => console.log(val)}/>,
      <Dropdown overlay={menu}>
        <Button type="ghost" icon="ellipsis" className="moreBtn"/>
      </Dropdown>
    ];
    const topTab = [
      { title: getLabel(332, "全部"), viewcondition: "0" },
      { title: getLabel(111, "本月新增"), viewcondition: "1" },
      { title: getLabel(111, "本月信息变动"), viewcondition: "2" }
    ];
    return (
      <WeaTop
        title={getLabel(544289, "人员信息报送")} iconBgcolor="#F14A2D"
        icon={<i className="icon-coms-fa"/>} className="declareWrapper"
        buttons={showOperateBtn ? buttons : []}
      >
        <div style={{ height: "100%", background: "#f6f6f6" }} className="flex flex-rollback">
          {/*基础信息*/}
          <BaseInfo/>
          {/*列表数据*/}
          <div className="listview-com-layout flex-1 flex flex-rollback">
            <WeaTab
              datas={topTab} keyParam="viewcondition" showSearchAd={showSearchAd}
              selectedKey={selectedKey} searchType={["base", "advanced"]}
              setShowSearchAd={bool => this.setState({ showSearchAd: bool })}
              advanceHeight={300} searchsAd={getSearchs(form, toJS(advanceConditions), 2)}
              buttons={[
                <Dropdown.Button
                  overlay={
                    <Menu>
                      <Menu.Item key="1">{getLabel(32935, "导入")}</Menu.Item>
                    </Menu>
                  }
                  type="primary">{getLabel(1421, "新增")}</Dropdown.Button>,
                <WeaSelect
                  value={declareStatus}
                  style={{ width: 150 }}
                  options={_.map(submitStatus, it => ({ ...it, showname: getLabel(it.lanId, it.showname) }))}
                  onChange={declareStatus => this.setState({ declareStatus })}
                />
              ]} searchsBaseValue={form.getFormParams().keyword}
              onSearchChange={(v) => form.updateFields({ keyword: v })}
              onChange={key => this.setState({ selectedKey: key })}
              onAdReset={() => form.resetForm()}
            />
            <div className="flex-1">
              <Spin spinning={false}>
                <iframe
                  style={{ border: 0, width: "100%", height: "100%" }}
                  src="http://localhost:7607/#/employeeDeclareTable"
                  // src="/spa/hrmSalary/hrmSalaryCalculateDetail/index.html#/employeeDeclareTable"
                  id="atdTable"
                />
              </Spin>
            </div>
          </div>
        </div>
      </WeaTop>
    );
  }
}

export default Index;