salary-management-front/pc4mobx/hrmSalary/pages/payroll/payrollDetail/payrollDetail.js

/*
  *
  * 查看工资单详情-重构页面
  * @Author:    黎永顺
  * @Date:      2024/7/15
  * @Wechat:
  * @Email:     971387674@qq.com
  * @description:
*/
import React, { Component } from "react";
import { inject, observer } from "mobx-react";
import { toJS } from "mobx";
import { WeaLoadingGlobal, WeaLocaleProvider, WeaTop } from "ecCom";
import { Button } from "antd";
import AdvanceInputBtn from "./components/advanceInputBtn";
import SalaryMonthHelpfulTip from "./components/salaryMonthHelpfulTip";
import SalaryDetailSearchPannel from "./components/salaryDetailSearchPannel";
import SalaryDetailList from "./components/salaryDetailList";
import { getQueryString } from "../../../util/url";
import { removePropertyCondition } from "../../../util/response";
import { sysConfCodeRule } from "../../../apis/ruleconfig";
import * as API from "../../../apis/payroll";
import cs from "classnames";
import "./index.less";

const getLabel = WeaLocaleProvider.getLabel;

@inject("taxAgentStore", "payrollStore")
@observer
class PayrollDetail extends Component {
  constructor(props) {
    super(props);
    this.state = {
      salarySendDetailBaseInfo: {}, showSearchAd: false, isQuery: false, conditions: [],
      showTotalCell: false
    };
    this.listRef = null;
  }

  async componentDidMount() {
    const id = getQueryString("id");
    const { payrollStore: { detailListConditionForm } } = this.props;
    const [{ data: salarySendDetailBaseInfo }, { data }, { data: confCode }] = await Promise.all([
      API.getPayrollInfo({ id }), API.getPayrollDetailSa(),
      sysConfCodeRule({ code: "OPEN_ACCT_RESULT_SUM" })
    ]);
    this.setState({
      salarySendDetailBaseInfo, showTotalCell: confCode === "1",
      conditions: removePropertyCondition(data.condition)
    }, () => detailListConditionForm.initFormFields(this.state.conditions));
  }

  handleExportAll = () => {
    const { payrollStore: { salaryTableStore } } = this.props;
    const columns = _.filter(toJS(salaryTableStore.columns), (item) => item.display === "true");
    WeaLoadingGlobal.start();
    const salarySendId = getQueryString("id");
    const promise = API.exportDetailList_reconfig({ salarySendId, columns: _.map(columns, it => it.dataIndex) });
  };

  render() {
    const { salarySendDetailBaseInfo, showSearchAd, conditions, isQuery, showTotalCell } = this.state;
    const { taxAgentStore: { PageAndOptAuth } } = this.props;
    const showOperateBtn = PageAndOptAuth.opts.length;
    const { salaryMonth, template } = salarySendDetailBaseInfo;
    const dropMenuDatas = [
      {
        key: "BTN_COLUMN",
        icon: <i className="icon-coms-Custom"/>,
        content: getLabel(111, "显示列定制"),
        onClick: () => this.listRef.wrappedInstance.handleSetCustomCols()
      }
    ];
    const btns = [
      <Button type="primary" onClick={this.handleExportAll}>{getLabel(111, "导出全部")}</Button>,
      <AdvanceInputBtn onOpenAdvanceSearch={() => this.setState({ showSearchAd: true })}
                       onAdvanceSearch={() => this.setState({ isQuery: !isQuery })}/>
    ];
    !showOperateBtn && btns.shift();
    return (
      <WeaTop
        title={getLabel(111, "查看工资单详情")} icon={<i className="icon-coms-fa"/>}
        iconBgcolor="#F14A2D" showDropIcon={true} dropMenuDatas={dropMenuDatas}
        buttons={btns} className="salary-payroll-details-layout"
      >
        <div className="salary-payroll-details">
          <div className="salary-tb-tip">
            <div>
              <span><span
                className="label">{getLabel(111, "薪资所属月")}</span>：<span>{salaryMonth}</span></span> &nbsp;&nbsp;
              {
                !_.isEmpty(salarySendDetailBaseInfo) &&
                <SalaryMonthHelpfulTip salarySendDetailBaseInfo={salarySendDetailBaseInfo}/>
              }
              <span
                className="salary-payroll-template-name"><span
                className="label">{getLabel(111, "工资单模板")}</span>：<span>{template}</span></span>
            </div>
          </div>
          <div
            className={cs("searchAdvanced-condition-container", { "searchAdvanced-condition-hide": !showSearchAd })}>
            <SalaryDetailSearchPannel onCancel={() => this.setState({ showSearchAd: false })}
                                      onAdSearch={() => this.setState({ isQuery: !isQuery })}
                                      conditions={conditions}/>
          </div>
          {/*列表*/}
          <SalaryDetailList isQuery={isQuery} showTotalCell={showTotalCell} ref={dom => this.listRef = dom}/>
        </div>
      </WeaTop>
    );
  }
}

export default PayrollDetail;