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

/*
 * Author: 黎永顺
 * name: 薪酬统计分析
 * Description:
 * Date: 2023/4/10
 */
import React, { Component } from "react";
import { inject, observer } from "mobx-react";
import { WeaDatePicker, WeaInputSearch, WeaLocaleProvider, WeaReqTop } from "ecCom";
import { Button, Dropdown, Menu } from "antd";
import { condition, reportCondition } from "./components/conditions";
import { commonEnumList, reportGetForm } from "../../apis/ruleconfig";
import { dimensionGetForm } from "../../apis/statistics";
import EmployeeDetails from "./components/employeeDetails";
import SalaryDetails from "./components/salaryDetails";
import StatisticsModal from "./components/statisticsModal";
import DimensionSlide from "./components/dimensionSlide";
import DimensionTable from "./components/dimensionTable";
import ReportList from "./components/reportList";
import ReportForm from "./components/reportForm";
import LogDialog from "../../components/logViewModal";
import moment from "moment";
import "./index.less";

const { getLabel } = WeaLocaleProvider;

@inject("taxAgentStore", "attendanceStore")
@observer
class Index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      conditions: [],
      convertConditions: [],
      reportConditions: [],
      selectedKey: "statistics",
      reportName: "",
      keyword: "",
      year: moment().format("YYYY"),
      dateRange: [
        moment(new Date()).subtract(1, "months").format("YYYY-MM"),
        moment(new Date()).subtract(1, "months").format("YYYY-MM")
      ],
      showSearchAd: false,
      isQuery: false,
      slideReq: {
        visible: false, formId: ""
      },
      modalReq: {
        title: "", visible: false,
        typeKey: "", id: ""
      },
      logDialogVisible: false, filterConditions: "[]"
    };
  }

  componentDidMount() {
    this.initReportFormCondition();
  }

  initReportFormCondition = (payload = {}) => {
    const { attendanceStore: { reportForm } } = this.props;
    reportGetForm(payload).then(({ status, data }) => {
      if (status) {
        const { statsDimOptions, data: detailData } = data;
        if (_.isEmpty(payload)) {
          this.setState({
            reportConditions: _.map(reportCondition, item => {
              return {
                ...item,
                items: _.map(item.items, child => {
                  if (child.domkey[0] === "dimensionIds") {
                    return {
                      ...child,
                      options: _.map(statsDimOptions, dimTypeItem => ({
                        key: dimTypeItem.id,
                        showname: dimTypeItem.content
                      }))
                    };
                  }
                  return { ...child };
                })
              };
            })
          }, () => {
            reportForm.initFormFields(this.state.reportConditions);
          });
        } else {
          reportForm.updateFields({
            reportName: detailData.reportName,
            dimensionIds: detailData.dimension.join(",")
          });
        }
      }
    });
  };
  initCondition = async () => {
    const { attendanceStore: { statisticsForm } } = this.props;
    const [dimTypeEnum, dimCodeList] = await Promise.all([this.commonEnumList(), this.dimensionGetForm()]);
    const { data: dimTypeData } = dimTypeEnum, { data: dimCodeData } = dimCodeList;
    const { baseForm: { statsDimOptions, groupDimOptions, data: dimTypeValue } } = dimCodeData;
    this.setState({
      conditions: _.map(condition, item => {
        return {
          ...item,
          items: _.map(item.items, child => {
            if (child.domkey[0] === "dimType") {
              return {
                ...child,
                value: dimTypeValue.dimType,
                options: _.map(dimTypeData, dimTypeItem => ({
                  key: dimTypeItem.value,
                  showname: dimTypeItem.defaultLabel
                }))
              };
            }
            if (child.domkey[0] === "setting4Qualitative") {
              return {
                ...child,
                options: _.map(statsDimOptions, dimCodeItem => ({
                  key: dimCodeItem.id,
                  showname: dimCodeItem.content
                }))
              };
            }
            if (child.domkey[0] === "dimCode") {
              return {
                ...child,
                options: _.map(groupDimOptions, dimCodeItem => ({
                  key: dimCodeItem.id,
                  showname: dimCodeItem.content
                }))
              };
            }
            return { ...child };
          })
        };
      })
    }, () => {
      this.setState({ convertConditions: this.state.conditions });
      statisticsForm.initFormFields(this.state.conditions);
    });
  };
  commonEnumList = () => {
    const payload = {
      enumClass: "com.engine.salary.report.enums.SalaryStatisticsDimensionTypeEnum"
    };
    return commonEnumList(payload);
  };
  dimensionGetForm = () => {
    return dimensionGetForm();
  };
  handleChangeCondition = (val, viewAttr) => {
    const { attendanceStore: { statisticsForm } } = this.props;
    const helpfulTitle = val === "RATION_GROUP_SPACING" ?
      "例：\n" +
      " 若：所属字段为【工龄】，分组设置为【0-5】，【5-10】；统计项为【税前薪资】，对应的统计规则为【求和】； 则统计结果为：【工龄】为【0-5】的所有人的【税前薪资】求和，【工龄】为【5-10】的所有人的【税前薪资】求和；\n" +
      "若：未选择所属字段，分组设置为【0-10,000.00】，【10,000.00-20,000.00】；若统计项为【税前薪资】，对应的统计规则为【计数】； 则统计结果为：【税前薪资】为【0-10,000.00】有多少人，【税前薪资】为【10,000.00-20,000.00】有多少人；" :
      val === "RATION_GROUP_INDIVIDUAL" ?
        "例：\n" +
        "  若：所属字段为【职级】，分组设置为【1】，【2】，【3】；统计项为【税前薪资】，对应的统计规则为【平均值】； 则统计结果为：【职级】为【1】的所有人的【税前薪资】的平均值，【职级】为【2】的所有人的【税前薪资】的平均值；【职级】为【3】的所有人的【税前薪资】的平均值；\n" +
        "若：未选择所属字段，分组设置为【1】，【2】，【3】；若统计项为【绩效】，对应的统计规则为【计数】； 则统计结果为：【绩效】为【1】有多少人，绩效为【2】有多少人，绩效为【3】有多少人；" : "";

    if (val === "QUALITATIVE") {
      this.setState({
        conditions: _.map(this.state.convertConditions, item => {
          return {
            ...item,
            items: _.map(_.filter(item.items, child => child.domkey[0] !== "dimCode"), it => {
              if (it.domkey[0] === "dimType") {
                return { ...it, value: val, viewAttr: viewAttr ? viewAttr : it.viewAttr };
              }
              return { ...it };
            })
          };
        })
      }, () => {
        statisticsForm.setCondition(this.state.conditions);
      });
    } else {
      this.setState({
        conditions: _.map(this.state.convertConditions, item => {
          return {
            ...item,
            items: _.map(_.filter(item.items, child => child.domkey[0] !== "setting4Qualitative"), it => {
              if (it.domkey[0] === "dimType") {
                return { ...it, value: val, viewAttr: viewAttr ? viewAttr : it.viewAttr };
              } else if (it.domkey[0] === "dimCode") {
                return { ...it, helpfulTitle };
              }
              return { ...it };
            })
          };
        })
      }, () => {
        statisticsForm.setCondition(this.state.conditions);
      });
    }
  };
  handleReqBtnsClick = (key, id = "") => {
    if (key === "search") {
      const { reportName } = this.state;
      this.reportListRef.reportStatisticsReportList({ reportName });
    } else {
      const { modalReq } = this.state;
      const title = key === "dimension" ?
        <div className="dimensionTitle">
          <span>{getLabel(111, "统计维度管理")}</span>
          <Button type="primary" onClick={() => this.handleAddDimension()}>{getLabel(111, "新建统计维度")}</Button>
        </div>
        : getLabel(111, id ? "编辑报表" : "新建报表");
      this.setState({
        modalReq: {
          ...modalReq, id, title,
          visible: true, typeKey: key
        }
      }, () => id && this.initReportFormCondition({ id }));
    }
  };
  handleCancel = (refresh = false) => {
    const { attendanceStore: { reportForm } } = this.props;
    const { modalReq } = this.state;
    this.setState({
      modalReq: {
        ...modalReq, visible: false, id: ""
      }
    }, () => {
      const { selectedKey, reportName, modalReq: { typeKey } } = this.state;
      selectedKey === "statistics" && reportForm.resetForm();
      typeKey === "dimension" && this.initReportFormCondition();
      refresh && selectedKey === "statistics" && this.reportListRef.reportStatisticsReportList({ reportName });
    });
  };
  handleAddDimension = (formId = "") => {
    const { slideReq } = this.state;
    this.setState({
      slideReq: {
        ...slideReq, visible: true,
        formId
      }
    });
  };
  handleClose = (initTable = false) => {
    const { attendanceStore: { statisticsForm } } = this.props;
    const { slideReq } = this.state;
    this.setState({
      slideReq: {
        ...slideReq, visible: false, formId: ""
      }
    }, () => {
      statisticsForm.resetForm();
      initTable && this.dimensionTableRef.dimensionList();
    });
  };
  onDropMenuClick = (key, targetid = "") => {
    switch (key) {
      case "log":
        this.setState({
          logDialogVisible: true,
          filterConditions: targetid ? `[{\"connectCondition\":\"AND\",\"columIndex\":\"targetid\",\"type\":\"=\",\"value\":\"${targetid}\"}]` : "[]"
        });
        break;
      default:
        break;
    }
  };
  handleOpenAdvanceSearch = () => this.setState({ showSearchAd: true });
  handleAdvanceSearch = () => this.setState({ isQuery: !this.state.isQuery });
  onAdSearch = () => this.setState({ showSearchAd: false, isQuery: !this.state.isQuery });
  handleExportSalaryList = (key) => this.salaryRef.wrappedInstance.handleExportSalaryList(key);

  render() {
    const {
      taxAgentStore: { PageAndOptAuth },
      attendanceStore: { statisticsForm, reportForm, tableStore }
    } = this.props;
    const {
      selectedKey, modalReq, slideReq, conditions, reportConditions,
      reportName, keyword, year, logDialogVisible, filterConditions,
      dateRange, showSearchAd, isQuery
    } = this.state;
    const statisticsReportBtn = PageAndOptAuth.opts.includes("admin");
    const buttons = selectedKey === "statistics" ? [
      <Button type="primary" onClick={() => this.handleReqBtnsClick("addReport")}>{getLabel(111, "新建报表")}</Button>,
      <Button type="ghost"
              onClick={() => this.handleReqBtnsClick("dimension")}>{getLabel(111, "维度统计管理")}</Button>,
      <WeaInputSearch placeholder={getLabel(111, "请输入报表名称")} className="search"
                      value={reportName}
                      onChange={reportName => this.setState({ reportName })}
                      onSearch={() => this.handleReqBtnsClick("search")}/>
    ] : selectedKey === "detail" ? [
      <span className="employeeYearWrapper">
        <span>{getLabel(111, "年度：")}</span>
        <WeaDatePicker value={year} format="YYYY" onChange={year => this.setState({ year })}/>
      </span>,
      <WeaInputSearch placeholder={getLabel(111, "请输入姓名、工号、身份证号")} className="search"
                      value={keyword}
                      onChange={keyword => this.setState({ keyword })}
                      onSearch={() => this.employeeListRef.statisticsEmployeeList()}/>
    ] : [
      <Dropdown.Button type="primary"
                       onClick={() => this.handleExportSalaryList("ALL")}
                       overlay={<Menu
                         onClick={({ key }) => this.handleExportSalaryList(key)}>
                         <Menu.Item
                           key="SELECTED">{getLabel(543715, "导出所选")}</Menu.Item>
                       </Menu>}>{getLabel(81272, "导出全部")}</Dropdown.Button>
    ];
    let dropMenuDatas = [
      {
        key: "log", icon: <i className="iconfont icon-caozuorizhi32"/>,
        content: getLabel(545781, "操作日志")
      },
      {
        key: "BTN_COLUMN",
        icon: <i className="icon-coms-Custom"/>,
        content: getLabel(111, "显示列定制"),
        onClick: () => {
          this.salaryRef.wrappedInstance.handleSetDefCols();
          // tableStore.setColSetVisible(true);
          // tableStore.tableColSet(true);
        }
      }
    ];
    const tabs = [
      { key: "statistics", title: getLabel(111, "统计表") },
      { key: "detail", title: getLabel(111, "员工明细") },
      { key: "salaryDetail", title: getLabel(111, "薪资明细") }
    ];
    dropMenuDatas = selectedKey === "salaryDetail" ? dropMenuDatas.slice(-1) : dropMenuDatas.slice(0, 1);
    return (
      <WeaReqTop
        title={getLabel(111, "薪酬统计报表")} icon={<i className="icon-coms-fa"/>} selectedKey={selectedKey}
        iconBgcolor="#F14A2D" tabDatas={tabs} className="xc_tj_fx_wrapper"
        buttons={(!statisticsReportBtn && selectedKey === "statistics") ? buttons.slice(-1) : buttons} buttonSpace={10}
        onChange={selectedKey => this.setState({ selectedKey }, () => this.state.selectedKey === "statistics" && this.initReportFormCondition())}
        showDropIcon={selectedKey !== "detail"} onDropMenuClick={this.onDropMenuClick} dropMenuDatas={dropMenuDatas}>
        {
          selectedKey === "statistics" ?
            <ReportList
              ref={dom => this.reportListRef = dom}
              reportName={reportName}
              onEdit={this.handleReqBtnsClick}
              onFilterLog={(type, targetid) => this.onDropMenuClick(type, targetid)}
            /> : selectedKey === "detail" ? <EmployeeDetails
              ref={dom => this.employeeListRef = dom}
              keyword={keyword} year={year}
              onFilterLog={(type, targetid) => this.onDropMenuClick(type, targetid)}
            /> : <SalaryDetails ref={dom => this.salaryRef = dom} dateRange={dateRange} isQuery={isQuery}
                                showSearchAd={showSearchAd} handleOpenAdvanceSearch={this.handleOpenAdvanceSearch}
                                handleAdvanceSearch={this.handleAdvanceSearch} onAdSearch={this.onAdSearch}
                                onCancel={() => this.setState({ showSearchAd: false })}
                                onChange={v => this.setState({ dateRange: v }, () => this.handleAdvanceSearch())}/>
        }
        <StatisticsModal {...modalReq} onCancel={this.handleCancel} form={reportForm} onClose={this.handleCancel}
                         onAddDimension={this.handleAddDimension}
        >
          {
            modalReq.typeKey === "dimension" &&
            <DimensionTable ref={dom => this.dimensionTableRef = dom}
                            onEdit={id => this.handleAddDimension(id)}
            />
          }
          {
            modalReq.typeKey === "addReport" &&
            <ReportForm form={reportForm} condition={reportConditions}/>
          }
        </StatisticsModal>
        <DimensionSlide
          {...slideReq} onCancel={this.handleClose}
          form={statisticsForm} condition={conditions}
          initCondition={this.initCondition} onChangeCondition={this.handleChangeCondition}
        />
        {/*操作日志*/}
        <LogDialog visible={logDialogVisible} logFunction="statreport" filterConditions={filterConditions}
                   onCancel={() => this.setState({ logDialogVisible: false })}/>
      </WeaReqTop>
    );
  }
}

export default Index;