salary-management-front/pc4mobx/hrmSalary/pages/dataAcquisition/layout.js

/*
 * Author: 黎永顺
 * name: 数据采集-组件框
 * Description:
 * Date: 2023/2/17
 */
import React, { Component } from "react";
import { inject, observer } from "mobx-react";
import { toJS } from "mobx";
import { WeaLocaleProvider, WeaSlideModal, WeaTab, WeaTop } from "ecCom";
import { Button } from "antd";
import ImportModal from "./importDialog";
import LogDialog from "../../components/logViewModal";
import { getSearchs } from "../../util";
import "./index.less";

const getLabel = WeaLocaleProvider.getLabel;

@inject("taxAgentStore")
@observer
class Layout extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showSearchAd: false, logDialogVisible: false, filterConditions: "[]"
    };
  }

  componentDidMount() {
    const { taxAgentStore: { fetchTaxAgentOption } } = this.props;
    fetchTaxAgentOption();
    window.addEventListener("resize", this.resizeUpdate);
  }

  componentWillReceiveProps(nextProps, nextContext) {
    if (nextProps.exportPayloadType !== this.props.exportPayloadType) {
      /*
       * Author: 黎永顺
       * Description:导出数据采集数据
       * Params:
       * Date: 2023/2/20
       */
      window.open(nextProps.exportPayloadUrl, "_self");
    }
    if (nextProps.targetid !== this.props.targetid && nextProps.targetid) {
      /*
       * Author: 黎永顺
       * Description:操作日志
       * Params:
       * Date: 2023/2/20
       */
      this.onDropMenuClick("log", nextProps.targetid);
    }
  }

  componentWillUnmount() {
    window.removeEventListener("resize", this.resizeUpdate);
  }

  resizeUpdate = () => {
    const { onResizeWindowInnerWidth } = this.props;
    onResizeWindowInnerWidth(window.innerWidth);
  };
  onDropMenuClick = (key, targetid = "") => {
    switch (key) {
      case "log":
        this.setState({
          logDialogVisible: true,
          filterConditions: targetid ? `[{\"connectCondition\":\"AND\",\"columIndex\":\"targetid\",\"type\":\"=\",\"value\":\"${targetid}\"}]` : "[]"
        });
        break;
      default:
        break;
    }
  };
  renderTitle = () => {
    const { slidePayload, slideLoading, detailOptBtns, onSave } = this.props;
    const { title } = slidePayload;
    return <div className="titleDialog">
      <div className="titleCol titleLeftBox">
        <div className="titleIcon"><i className="icon-coms-fa"/></div>
        <div className="title">{title}</div>
      </div>
      <div className="titleCol titleRightBox">
        {(slidePayload.children && slidePayload.children.props.className) ? [...detailOptBtns] :
          <Button type="primary" loading={slideLoading} onClick={onSave}>{getLabel(537558, "保存")}</Button>}
      </div>
    </div>;
  };

  render() {
    const { showSearchAd, logDialogVisible, filterConditions } = this.state;
    const {
      title, btns, leftComp, children, taxAgentStore: { showOperateBtn },
      slidePayload, onClose, form, condition, onImportFile,
      onAdSearch, onCancel, importPayload, logFunction, onClearTargrtid
    } = this.props;
    const { visible, children: slideChildren } = slidePayload;
    const {
      visible: importVisiable, importFormComponent, importOpts,
      importResult, templateLink, previewUrl
    } = importPayload;
    return (
      <div className="layoutWrapper">
        <WeaTop title={title} buttons={showOperateBtn ? btns : []}
                icon={<i className="icon-coms-fa"/>} iconBgcolor="#F14A2D"
                showDropIcon onDropMenuClick={this.onDropMenuClick}
                dropMenuDatas={[
                  {
                    key: "log", icon: <i className="iconfont icon-caozuorizhi32"/>,
                    content: getLabel(545781, "操作日志")
                  }
                ]}
        />
        <WeaTab
          advanceHeight={162}
          searchType={["base", "advanced"]}
          replaceLeft={leftComp}
          searchsAd={getSearchs(form, toJS(condition), 2)}
          showSearchAd={showSearchAd}
          setShowSearchAd={bool => this.setState({ showSearchAd: bool })}
          onAdReset={() => form.resetForm()}
          onAdSearch={onAdSearch}
          onSearch={onAdSearch}
          onSearchChange={(v) => form.updateFields({ username: v })}
          searchsBaseValue={form.getFormParams().username}
        />
        <div className="dataContent">
          {children}
          {/*导入弹框*/}
          <ImportModal
            visible={importVisiable} onCancel={onCancel} importParams={importFormComponent}
            importOpts={importOpts} importResult={importResult} templateLink={templateLink}
            previewUrl={previewUrl} onImportFile={onImportFile}
          />
          {/* 新增-编辑-详情弹框 */}
          <WeaSlideModal
            className="slideOuterWrapper"
            visible={visible}
            top={0}
            measureT="%"
            width={850}
            measureX="px"
            height={100}
            measureY="%"
            direction="right"
            title={this.renderTitle()}
            content={slideChildren}
            onClose={onClose}
          />
          {/*操作日志*/}
          <LogDialog visible={logDialogVisible} logFunction={logFunction} filterConditions={filterConditions}
                     onCancel={() => this.setState({ logDialogVisible: false }, () => onClearTargrtid())}/>
        </div>
      </div>
    );
  }
}

export default Layout;