salary-management-front/pc4mobx/hrmSalary/pages/analysisOfSalaryStatistics/components/salaryDetails.js

/*
 * Author: 黎永顺
 * name:薪资明细列表
 * Description:
 * Date: 2024/3/26
 */
import React, { Component } from "react";
import { inject, observer } from "mobx-react";
import { WeaTableNew } from "comsMobx";
import { WeaLoadingGlobal, WeaLocaleProvider, WeaSelect } from "ecCom";
import { message, Spin } from "antd";
import { getIframeParentHeight } from "../../../util";
import { sysConfCodeRule } from "../../../apis/ruleconfig";
import CustomTransferDialog from "../../../components/CustomBrowser/components/customTransferDialog";
import SalaryDetailsTempDialog from "./salaryDetailsTempDialog";
import { MonthRangePicker } from "../../reportView/components/statisticalMicroSettingsSlide";
import AdvanceInputBtn from "../components/advanceInputBtn";
import SearchPannel from "../components/searchPannel";
import * as API from "../../../apis/statistics";
import cs from "classnames";
import "../index.less";

const WeaTableComx = WeaTableNew.WeaTable;
const { getLabel } = WeaLocaleProvider;

@inject("attendanceStore")
@observer
class SalaryDetails extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false, dataSource: [], columns: [], selectedRowKeys: [], tempPageList: [],
      pageInfo: { current: 1, pageSize: 10, total: 0 }, payload: {}, templateId: "",
      showTotalCell: false, updateSum: true, tempDialog: { visible: false, setting: [] },
      transferDialog: {
        visible: false, searchParamsKey: "name", dataParams: { page: "salary_details_report" }, saveLoading: false,
        completeURL: "", convertDatasource: datas => {
          return {
            listDatas: _.map(datas.setting, o => ({ id: o.id || o.column, name: o.name || o.text })),
            checked: this.converCheckedCol(datas)
          };
        },
        type: "default"
      }
    };
  }

  componentDidMount() {
    this.getSalaryList(this.props);
    this.getPageListTemplatelist();
    window.addEventListener("message", this.handleReceive, false);
    window.addEventListener("resize", () => this.setState({
      transferDialog: { ...this.state.transferDialog, cancel: true }
    }, () => this.forceUpdate()), false);
  }

  componentWillReceiveProps(nextProps, nextContext) {
    if (nextProps.isQuery !== this.props.isQuery) this.setState({
      pageInfo: { ...this.state.pageInfo, current: 1 }, updateSum: true
    }, () => this.getSalaryList(nextProps));
  }

  componentWillUnmount() {
    window.removeEventListener("message", this.handleReceive, false);
    window.removeEventListener("message", () => this.setState({
      transferDialog: { ...this.state.transferDialog, cancel: true }
    }, () => this.forceUpdate()), false);
    this.setState(({ selectedRowKeys: [] }));
  }

  getPageListTemplatelist = () => {
    API.getPageListTemplatelist({ page: "salary_details_report" }).then(({ status, data }) => {
      if (status) {
        this.setState({
          tempPageList: _.map(data, o => ({ key: String(o.id), showname: o.name })),
          templateId: String(_.find(data, o => !!o.checked).id)
        });
      }
    });
  };
  handleReceive = ({ data }) => {
    const { type, payload: { id, params } = {} } = data;
    const { pageInfo } = this.state;
    if (type === "init") {
      this.getColumns();
    } else if (type === "turn") {
      if (id === "PAGEINFO") {
        const { pageNum: current, size: pageSize } = params;
        this.setState({
          pageInfo: { ...pageInfo, current, pageSize },
          updateSum: false
        }, () => this.getSalaryList(this.props));
      } else if (id === "CHECKBOX") {
        const { selectedRowKeys: checkBox } = params;
        this.setState({ selectedRowKeys: checkBox, updateSum: false });
      }
    }
  };
  postMessageToChild = (payload) => {
    const i18n = {
      "共": getLabel(18609, "共"), "条": getLabel(18256, "条"),
      "总计": getLabel(523, "总计")
    };
    const childFrameObj = document.getElementById("atdTable");
    childFrameObj && childFrameObj.contentWindow.postMessage(JSON.stringify({ ...payload, i18n }), "*");
  };
  getSalaryList = (props) => {
    const { attendanceStore: { salaryDetailSearchForm, tableStore }, dateRange } = props || this.props;
    const [startDateStr, endDateStr] = dateRange;
    const { taxAgentIds, subcompanyIds, departmentIds, ...extra } = salaryDetailSearchForm.getFormParams();
    const { pageInfo, transferDialog } = this.state;
    const payload = {
      taxAgentIds: taxAgentIds ? taxAgentIds.split(",") : [],
      departmentIds: departmentIds ? departmentIds.split(",") : [],
      subcompanyIds: subcompanyIds ? subcompanyIds.split(",") : [],
      ...extra, ...pageInfo, startDateStr, endDateStr
    };
    this.setState({ loading: true });
    API.getSalaryList(payload).then(async ({ status, data }) => {
      // API.getSalaryListSum(payload),
      const [{ data: confCode }] = await Promise.all([sysConfCodeRule({ code: "OPEN_ACCT_RESULT_SUM" })]);
      this.setState({ loading: false });
      if (status) {
        const { columns, dataKey, pageInfo: pageparams } = data;
        const { list: dataSource, pageNum: current, total, pageSize } = pageparams;
        this.setState({
          columns, dataSource, pageInfo: { ...pageInfo, current, total, pageSize }, payload,
          showTotalCell: confCode === "1", transferDialog: { ...transferDialog, cancel: false }
        }, () => tableStore.getDatas(dataKey.datas));
      }
    }).catch(() => this.setState({ loading: false }));
  };
  handleExportSalaryList = (key) => {
    let { selectedRowKeys, payload, columns } = this.state;
    if (key === "SELECTED" && selectedRowKeys.length === 0) {
      message.warning(getLabel(543345, "请选择需要导出的数据！"));
      return;
    }
    WeaLoadingGlobal.start();
    const promise = API.exportSalaryList({
      ...payload, ids: key === "SELECTED" ? selectedRowKeys : [], columns: _.map(columns, o => o.column)
    });
  };
  getColumns = () => {
    const {
      columns, dataSource, pageInfo, selectedRowKeys, showTotalCell, payload, updateSum, transferDialog
    } = this.state;
    const sumRowlistUrl = showTotalCell ? "/api/bs/hrmsalary/report/statistics/employee/salaryListSum" : "";
    if (!_.isEmpty(columns) && !transferDialog.visible && !transferDialog.cancel) {
      this.postMessageToChild({
        dataSource, pageInfo, selectedRowKeys, showTotalCell, calcDetail: true, tableScrollHeight: 154,
        sumRowlistUrl, payload: { ...payload, updateSum },
        columns: _.map(columns, (it, idx) => ({
          dataIndex: it.column, title: it.text, calcDetail: true,
          width: (it.dataIndex === "taxAgent" || it.dataIndex === "salarySob") ? 176 : it.width,
          fixed: (idx === 1 || idx === 0 || idx === 2) ? "left" : "",
          ellipsis: true
        }))
      });
    }
    return [];
  };
  handleSetDefCols = () => this.setState({
    transferDialog: {
      ...this.state.transferDialog, completeURL: "/api/bs/hrmsalary/common/pageList/get/setting", visible: true
    }
  });
  converCheckedCol = (data) => {
    return _.reduce(data.checked || [], (pre, cur) => {
      const item = _.find(data.setting, k => k.id === cur);
      if (!_.isEmpty(item)) return [...pre, item];
      return pre;
    }, []);
  };
  savePageListSetting = (values) => {
    const { transferDialog, tempDialog } = this.state, { type } = transferDialog;
    if (type === "temp") {
      this.setState({
        tempDialog: { ...tempDialog, visible: true, setting: _.map(values, o => o.id) },
        transferDialog: { ...this.state.transferDialog, visible: false, cancel: true, type: "default" }
      });
      return;
    }
    const payload = {
      page: "salary_details_report",
      setting: _.map(values, o => o.id)
    };
    this.setState({ transferDialog: { ...this.state.transferDialog, saveLoading: true } });
    API.savePageListSetting(payload).then(({ status, errormsg }) => {
      this.setState({ transferDialog: { ...this.state.transferDialog, saveLoading: false } });
      if (status) {
        message.success(getLabel(111, "操作成功！"));
        this.setState({
          transferDialog: { ...this.state.transferDialog, visible: false, type: "default" }
        }, () => this.getSalaryList());
      } else {
        message.error(errormsg);
      }
    });
  };
  handelAddTemp = () => this.setState({
    transferDialog: {
      ...this.state.transferDialog, visible: true, type: "temp",
      completeURL: "/api/bs/hrmsalary/common/pageList/template/get"
    }
  });
  changePageListTemplate = (templateId) => {
    this.setState({ templateId }, () => {
      API.changePageListTemplate({ page: "salary_details_report", templateId }).then(({ status, errormsg }) => {
        if (status) {
          message.success(getLabel(111, "操作成功！"));
          this.getSalaryList();
        } else {
          message.error(errormsg);
        }
      });
    });
  };

  render() {
    const { loading, dataSource, transferDialog, tempDialog, tempPageList, templateId } = this.state;
    const { attendanceStore: { tableStore }, dateRange, showSearchAd } = this.props;
    return (<React.Fragment>
        <div className="query-div">
          <WeaSelect style={{ width: 200 }} hasAddBtn options={tempPageList} addOnClick={this.handelAddTemp} showSearch
                     optionFilterProp="children" value={templateId} onChange={this.changePageListTemplate}/>
          <MonthRangePicker dateRange={dateRange} viewAttr={2} onChange={this.props.onChange}/>
          <AdvanceInputBtn onOpenAdvanceSearch={() => this.setState({
            transferDialog: { ...this.state.transferDialog, cancel: true }
          }, () => this.props.handleOpenAdvanceSearch())} onAdvanceSearch={this.props.handleAdvanceSearch}/>
        </div>
        <div className={cs("searchAdvanced-condition-container", { "searchAdvanced-condition-hide": !showSearchAd })}>
          <SearchPannel onCancel={() => {
            this.setState({
              transferDialog: { ...this.state.transferDialog, cancel: true }
            }, () => this.props.onCancel());
          }} onAdSearch={this.props.onAdSearch}/>
        </div>
        <div className="table-layout"
             style={{ height: getIframeParentHeight(".wea-new-top-req-content", dataSource.length, 70) + "px" }}>
          <Spin spinning={loading}>
            <iframe
              style={{ border: 0, width: "100%", height: "100%" }}
              // src="http://localhost:7607/#/calcTable"
              src="/spa/hrmSalary/hrmSalaryCalculateDetail/index.html#/calcTable"
              id="atdTable"
            />
          </Spin>
          <WeaTableComx
            style={{ display: "none" }}
            comsWeaTableStore={tableStore}
            needScroll={true}
            columns={this.getColumns()}
          />
          {/*默认显示列,薪资模板列表*/}
          <CustomTransferDialog {...transferDialog} onChange={this.savePageListSetting}
                                onCancel={() => this.setState({
                                  transferDialog: {
                                    ...transferDialog, completeURL: "", visible: false, cancel: true, type: "default"
                                  }
                                })}/>
          {/*薪资明细模板设置*/}
          <SalaryDetailsTempDialog {...tempDialog} onSuccess={this.getPageListTemplatelist}
                                   onCancel={callback => this.setState({
                                     tempDialog: { ...tempDialog, visible: false, setting: [] }
                                   }, () => callback && callback())}/>
        </div>
      </React.Fragment>
    );
  }
}

export default SalaryDetails;