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

/*
 * Author: 黎永顺
 * name: 工资单发放-重构页面
 * Description:
 * Date: 2023/10/12
 */
import React, { Component } from "react";
import { inject, observer } from "mobx-react";
import { WeaLocaleProvider, WeaReqTop } from "ecCom";
import GrantQuery from "./components/reqQuery/grantQuery";
import TemplateQuery from "./components/reqQuery/templateQuery";
import GrantTableList from "./components/grantTableList";
import PayrollTemplateTableList from "./components/payrollTemplateTableList";
import TemplateBaseSettings from "../payroll/templateBaseSettings";
import LogDialog from "../../components/logViewModal";
import { Button } from "antd";
import moment from "moment";
import "./index.less";

const getLabel = WeaLocaleProvider.getLabel;

@inject("taxAgentStore")
@observer
class Index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedKey: "grant", isRefresh: false, baseSetSaveLoading: false,
      queryParams: {
        salarySobId: "", name: "",
        dateRange: [
          moment(new Date()).subtract(1, "year").startOf("year").format("YYYY-MM"),
          moment(new Date()).endOf("year").format("YYYY-MM")
        ]
      }, logDialogVisible: false, filterConditions: "[]"
    };
    this.templateRef = null;
    this.baseSetRef = null;
  }

  renderReqBtns = () => {
    const { taxAgentStore: { PageAndOptAuth } } = this.props;
    const { selectedKey, isRefresh, queryParams } = this.state;
    const showOperateBtn = PageAndOptAuth.opts.includes("admin");
    let reqBtns = [];
    switch (selectedKey) {
      case "grant":
        reqBtns = [
          <GrantQuery queryParams={queryParams}
                      onChange={v => this.setState({
                        isRefresh: !isRefresh,
                        queryParams: { ...queryParams, ...v }
                      })}/>
        ];
        break;
      case "template":
        const loading = this.templateRef ? this.templateRef.state.delLoading : false;
        const delDisabled = !this.templateRef || _.isEmpty(this.templateRef.state.selectedRowKeys);
        const btns = [
          <Button type="primary" onClick={() => {
            this.templateRef.handleOpts({ key: "edit" }, {});
          }}>{getLabel(365, "新建")}</Button>,
          <Button type="ghost" loading={loading} disabled={delDisabled} onClick={() => {
            this.templateRef.handleOpts({ key: "del" }, {});
          }}>{getLabel(32136, "批量删除")}</Button>
        ];
        const queryBtns = [
          <TemplateQuery queryParams={queryParams} onSearch={() => this.setState({ isRefresh: !isRefresh })}
                         onChange={v => this.setState({
                           isRefresh: _.keys(v)[0] === "name" ? isRefresh : !isRefresh,
                           queryParams: { ...queryParams, ...v }
                         })}/>
        ];
        reqBtns = showOperateBtn ? [...btns, ...queryBtns] : [...queryBtns];
        break;
      case "watermark":
        const { baseSetSaveLoading } = this.state;
        reqBtns = showOperateBtn ? [
          <Button type="primary" loading={baseSetSaveLoading}
                  onClick={() => this.baseSetRef.salaryBillBaseSetSave()}>{getLabel(537558, "保存")}</Button>
        ] : [];
        break;
      default:
        break;
    }
    return reqBtns;
  };
  renderContent = () => {
    const { taxAgentStore: { PageAndOptAuth } } = this.props;
    const { selectedKey, queryParams, isRefresh } = this.state;
    const showOperateBtn = PageAndOptAuth.opts.includes("admin");
    let dom = null;
    switch (selectedKey) {
      case "grant":
        dom = <GrantTableList queryParams={queryParams} isRefresh={isRefresh}
                              onUpdateTemp={(id) => this.setState({ selectedKey: "template" }, () => {
                                this.templateRef.handleOpts({ key: "edit" }, { id });
                              })}
                              onFilterLog={(type, targetid) => this.onDropMenuClick(type, targetid)}
        />;
        break;
      case "template":
        dom = <PayrollTemplateTableList ref={dom => this.templateRef = dom} queryParams={queryParams}
                                        isRefresh={isRefresh} forceUpdate={() => this.forceUpdate()}
                                        onFilterLog={(type, targetid) => this.onDropMenuClick(type, targetid)}/>;
        break;
      case "watermark":
        dom = <TemplateBaseSettings
          ref={dom => this.baseSetRef = dom} showOperateBtn={showOperateBtn}
          onChangeLoading={loading => this.setState({ baseSetSaveLoading: loading })}
        />;
        break;
      default:
        break;
    }
    return dom;
  };
  onDropMenuClick = (key, targetid = "") => {
    switch (key) {
      case "log":
        this.setState({
          logDialogVisible: true,
          filterConditions: targetid ? `[{\"connectCondition\":\"AND\",\"columIndex\":\"targetid\",\"type\":\"=\",\"value\":\"${targetid}\"}]` : "[]"
        });
        break;
      default:
        break;
    }
  };

  render() {
    const { selectedKey, queryParams, logDialogVisible, filterConditions } = this.state;
    const tabs = [
      { key: "grant", title: getLabel(538012, "工资单发放") },
      { key: "template", title: getLabel(543575, "工资单模板设置") },
      { key: "watermark", title: getLabel(545285, "工资单基础设置") }
    ];
    return (
      <div className="salary-payroll-main-page">
        <WeaReqTop
          title={getLabel(538012, "工资单发放")} tabDatas={tabs} selectedKey={selectedKey}
          buttonSpace={10} icon={<i className="icon-coms-fa"/>} iconBgcolor="#F14A2D"
          onChange={key => this.setState({
            selectedKey: key,
            queryParams: { ...queryParams, name: "", salarySobId: "" }
          })}
          buttons={this.renderReqBtns()} showDropIcon={selectedKey !== "watermark"}
          onDropMenuClick={this.onDropMenuClick}
          dropMenuDatas={[
            {
              key: "log", icon: <i className="iconfont icon-caozuorizhi32"/>,
              content: getLabel(545781, "操作日志")
            }
          ]}
        >
          <div className="salary-payroll-content">{this.renderContent()}</div>
          {/*操作日志*/}
          <LogDialog visible={logDialogVisible} logFunction={selectedKey === "grant" ? "salarysend" : "salarytemplate"}
                     onCancel={() => this.setState({ logDialogVisible: false })} filterConditions={filterConditions}/>
        </WeaReqTop>
      </div>
    );
  }
}

export default Index;