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, WeaNewScroll, WeaSlideModal, WeaTab, WeaTop } from "ecCom";
import ImportModal from "../../components/importModal";
import SlideModalTitle from "../../components/slideModalTitle";
import { getSearchs } from "../../util";
import "./index.less";
import LogDialog from "../../components/logViewModal";

const getLabel = WeaLocaleProvider.getLabel;

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

  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");
    }
  }

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

  resizeUpdate = () => {
    const { onResizeWindowInnerWidth } = this.props;
    onResizeWindowInnerWidth(window.innerWidth);
  };
  onDropMenuClick = (key) => {
    switch (key) {
      case "log":
        this.setState({ logDialogVisible: true });
        break;
      default:
        break;
    }
  };

  render() {
    const { showSearchAd, logDialogVisible } = this.state;
    const {
      title, btns, leftComp, children, taxAgentStore: { showOperateBtn },
      slidePayload, onClose, onSave, slideLoading, form, condition,
      onAdSearch, onCancel, importPayload, onImportSetStep, onImportFile,
      onPreviewImport, detailOptBtns, columns, logFunction
    } = this.props;
    const { visible, title: subtitle, children: slideChildren } = slidePayload;
    const {
      visible: importVisiable, step, importFormComponent, importOpts,
      importResult, slideDataSource, templateLink
    } = 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
          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">
          <WeaNewScroll height="100%">{children}</WeaNewScroll>
          {/*导入弹框*/}
          <ImportModal
            needimportSelected //下载模板需要带上导入所选项
            columns={columns}
            params={importOpts}
            step={step}
            setStep={onImportSetStep}
            importResult={importResult}
            onFinish={() => onCancel(true)}
            slideDataSource={slideDataSource}
            previewImport={onPreviewImport}
            importFile={onImportFile}
            templateLink={templateLink}
            renderFormComponent={() => importFormComponent}
            visiable={importVisiable}
            onCancel={onCancel}
          />
          {/* 新增-编辑-详情弹框 */}
          <WeaSlideModal
            className="slideOuterWrapper"
            visible={visible}
            top={0}
            measureT="%"
            width={80}
            measureX="%"
            height={100}
            measureY="%"
            direction="right"
            title={
              <SlideModalTitle
                subtitle={subtitle}
                loading={slideLoading}
                onSave={onSave}
                editable={subtitle.length <= 2}
                showOperateBtn={showOperateBtn}
                customOperate={subtitle.length <= 2 ? [] : detailOptBtns}
              />
            }
            content={slideChildren}
            onClose={onClose}
          />
          {/*操作日志*/}
          <LogDialog visible={logDialogVisible} logFunction={logFunction}
                     onCancel={() => this.setState({ logDialogVisible: false })}/>
        </div>
      </div>
    );
  }
}

export default Layout;