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

/*
 * Author: 黎永顺
 * name: 在线申报-在线对比
 * Description:
 * Date: 2024/1/22
 */
import React, { Component } from "react";
import { inject, observer } from "mobx-react";
import { toJS } from "mobx";
import { WeaCheckbox, WeaLoadingGlobal, WeaLocaleProvider, WeaTable, WeaTop } from "ecCom";
import { Button } from "antd";
import { WeaTableNew } from "comsMobx";
import { exportContrast } from "../../apis/declare";
import "./index.less";

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

@inject("payrollFilesStore")
@observer
class Index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      dataSource: [], showColumns: [],
      pageInfo: { current: 1, pageSize: 10, total: 0 },
      queryParams: { onlyShowDiffEmp: true, onlyShowDiffItem: true }
    };
  }

  componentDidMount() {
    this.getTaxdeclarationContrastList();
  }

  getTaxdeclarationContrastList = () => {
    const { pageInfo, queryParams } = this.state;
    const { params: { taxDeclarationId }, payrollFilesStore: { getTaxdeclarationContrastList } } = this.props;
    WeaLoadingGlobal.start();
    getTaxdeclarationContrastList({ taxDeclarationId, ...pageInfo, ...queryParams })
      .then(({ status, data }) => {
        WeaLoadingGlobal.destroy();
        if (status) {
          const { pageInfo: result, columns: showColumns } = data;
          const { list: dataSource, pageNum: current, pageSize, total } = result;
          this.setState({ showColumns, dataSource, pageInfo: { ...pageInfo, current, pageSize, total } });
        }
      }).catch(() => WeaLoadingGlobal.destroy());
  };
  handleDiffChange = (key, value) => {
    const { queryParams } = this.state;
    this.setState({
      queryParams: { ...queryParams, [key]: value === "1" }
    }, () => this.getTaxdeclarationContrastList());
  };
  handleExport = async () => {
    const { params: { taxDeclarationId } } = this.props;
    const { queryParams } = this.state;
    WeaLoadingGlobal.start();
    const payload = { taxDeclarationId, ...queryParams };
    const promise = await exportContrast(payload);
    WeaLoadingGlobal.destroy();
  };
  getColumns = () => {
    const { showColumns } = this.state;
    const { payrollFilesStore: { declareTableStore } } = this.props;
    return _.map(_.filter(toJS(declareTableStore.columns), (item) => (item.display === "true" && showColumns.includes(item["dataIndex"]))), o => ({
      dataIndex: o.dataIndex, title: o.title, width: 150,
      render: (text, record) => {
        return Object.prototype.toString.call(record[o["dataIndex"]]) === "[object String]" ? <span>{text}</span> :
          <div className="comparison-column-item-container">
            <div className="comparison-single-row">
              <span>{getLabel(543280, "系统值")}：</span>
              <span>{record[o["dataIndex"]].local}</span>
            </div>
            <div className="comparison-single-row">
              <span>{getLabel(111, "线上值")}：</span>
              <span>{record[o["dataIndex"]].online}</span>
            </div>
            {
              !_.isNil(record[o["dataIndex"]].diff) &&
              <div className="comparison-single-row danger">
                <span>{getLabel(543282, "差值")}：</span>
                <span>{record[o["dataIndex"]].diff}</span>
              </div>
            }
          </div>;
      }
    }));
  };
  onDropMenuClick = (key) => {
    switch (key) {
      case "custom_cols":
        const { payrollFilesStore: { declareTableStore } } = this.props;
        declareTableStore.setColSetVisible(true);
        declareTableStore.tableColSet(true);
        break;
      default:
        break;
    }
  };

  render() {
    const { payrollFilesStore: { declareTableStore } } = this.props;
    const { dataSource, pageInfo, queryParams } = this.state;
    const { onlyShowDiffEmp, onlyShowDiffItem } = queryParams;
    const pagination = {
      ...pageInfo,
      showTotal: total => `${getLabel(18609, "共")} ${total} ${getLabel(18256, "条")}`,
      showQuickJumper: true,
      showSizeChanger: true,
      pageSizeOptions: ["10", "20", "50", "100"],
      onShowSizeChange: (current, pageSize) => {
        this.setState({
          pageInfo: { ...pageInfo, current, pageSize }
        }, () => this.getTaxdeclarationContrastList());
      },
      onChange: current => {
        this.setState({
          pageInfo: { ...pageInfo, current }
        }, () => this.getTaxdeclarationContrastList());
      }
    };
    return (
      <WeaTop title={getLabel(111, "在线对比")} icon={<i className="icon-coms-fa"/>}
              iconBgcolor="#F14A2D" buttonSpace={10} showDropIcon onDropMenuClick={this.onDropMenuClick}
              buttons={[
                <Button type="primary" onClick={this.handleExport}>{getLabel(81272, "导出全部")}</Button>,
                <WeaCheckbox content={getLabel(543283, "只显示有差异的人员")} value={onlyShowDiffEmp ? 1 : 0}
                             onChange={v => this.handleDiffChange("onlyShowDiffEmp", v)}
                />,
                <WeaCheckbox content={getLabel(543284, "只显示有差异的薪资项目")} value={onlyShowDiffItem ? 1 : 0}
                             onChange={v => this.handleDiffChange("onlyShowDiffItem", v)}
                />
              ]} dropMenuDatas={[{
        key: "custom_cols",
        icon: <i className="icon-coms-Custom"/>,
        content: getLabel(32535, "显示列定制")
      }]}
      >
        <WeaTable rowKey="id" dataSource={dataSource} pagination={pagination} bordered
                  scroll={{ x: 1200, y: `calc(100vh - 170px)` }} className="online-comparison-table"
                  columns={this.getColumns()}
        />
        <WeaTableComx
          style={{ display: "none" }}
          comsWeaTableStore={declareTableStore}
          needScroll={true}
          columns={this.getColumns()}
        />
      </WeaTop>
    );
  }
}

export default Index;