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

/*
 * Author: 黎永顺
 * name:调薪管理
 * Description:
 * Date: 2023/10/13
 */
import React, { Component } from "react";
import { inject, observer } from "mobx-react";
import { WeaLocaleProvider, WeaTable, WeaTop } from "ecCom";
import { adjustRecordItemList } from "../../apis/adjustManage";
import AdvanceInputBtn from "./components/advanceInputBtn";
import AdjustAdvanceSearchPannel from "./components/adjustAdvanceSearchPannel";
import cs from "classnames";
import { Button, Dropdown, Menu } from "antd";
import { convertToUrlString } from "../../util/url";
import LogDialog from "../../components/logViewModal";
import "./index.less";

const getLabel = WeaLocaleProvider.getLabel;

@inject("payrollFilesStore")
@observer
class Index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false, columns: [], dataSource: [], showSearchAd: false,
      pageInfo: { current: 1, pageSize: 10, total: 0 }, logDialogVisible: false,
      filterConditions: "[]"
    };
  }

  componentDidMount() {
    this.adjustRecordItemList();
  }

  adjustRecordItemList = () => {
    const { payrollFilesStore: { adjustForm } } = this.props;
    const {
      departmentIds, positionIds, operatorIds,
      effectiveTime1 = "", effectiveTime2 = "",
      operateTime1 = "", operateTime2 = "",
      ...extra
    } = adjustForm.getFormParams();
    const { pageInfo } = this.state;
    const payload = {
      ...pageInfo, ...extra,
      departmentIds: departmentIds ? departmentIds.split(",") : [],
      positionIds: departmentIds ? departmentIds.split(",") : [],
      operatorIds: departmentIds ? departmentIds.split(",") : [],
      effectiveTime: effectiveTime1 ? [effectiveTime1, effectiveTime2] : [],
      operateTime: operateTime1 ? [operateTime1, operateTime2] : []
    };
    this.setState({ loading: true, showSearchAd: false });
    adjustRecordItemList(payload).then(({ status, data }) => {
      this.setState({ loading: false });
      if (status) {
        const { columns, list: dataSource, pageNum, pageSize, total } = data;
        this.setState({
          dataSource, pageInfo: { ...pageInfo, pageNum, pageSize, total },
          columns: [..._.map(columns, o => {
            if (o.dataIndex === "username") {
              return { ...o, width: 150, fixed: "left" };
            }
            return { ...o, width: 150 };
          }), {
            dataIndex: "options", title: getLabel(30585, "操作"),
            width: 120, render: (_, record) => (
              <Dropdown
                overlay={
                  <Menu>
                    <Menu.Item>
                      <a href="javascript:void(0);"
                         onClick={() => this.onDropMenuClick("log", record.id)}>{getLabel(545781, "操作日志")}</a>
                    </Menu.Item>
                  </Menu>
                }>
                <a href="javascript:void(0)"><i className="icon-coms-more"/></a>
              </Dropdown>)
          }]
        });
      }
    }).catch(() => this.setState({ loading: false }));
  };
  openAdvanceSearch = () => this.setState({ showSearchAd: !this.state.showSearchAd });
  adjustExport = () => {
    if (!this.handleDebounce) {
      this.handleDebounce = _.debounce(() => {
        const { payrollFilesStore: { adjustForm } } = this.props;
        const {
          effectiveTime1 = "", effectiveTime2 = "",
          operateTime1 = "", operateTime2 = "",
          ...extra
        } = adjustForm.getFormParams();
        const payload = {
          ...extra,
          effectiveTime: effectiveTime1 ? `${effectiveTime1},${effectiveTime2}` : "",
          operateTime: operateTime1 ? `${operateTime1},${operateTime2}` : ""
        };
        window.open(`${window.location.origin}/api/bs/hrmsalary/salaryArchive/adjustRecord/exportSalaryItemList?${convertToUrlString(payload)}`, "_target");
        this.handleDebounce = null;
      }, 500);
    }
    this.handleDebounce();
  };
  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 { loading, dataSource, columns, pageInfo, showSearchAd, logDialogVisible, filterConditions } = this.state;
    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.adjustRecordItemList());
      },
      onChange: current => {
        this.setState({
          pageInfo: { ...pageInfo, current }
        }, () => this.adjustRecordItemList());
      }
    };
    return (
      <WeaTop
        title={getLabel(111, "调薪管理")} buttonSpace={10} className="adjustManageLayout"
        icon={<i className="icon-coms-fa"/>} iconBgcolor="#F14A2D" showDropIcon
        buttons={[
          <Button type="primary" onClick={this.adjustExport}>{getLabel(17416, "导出")}</Button>,
          <AdvanceInputBtn onOpenAdvanceSearch={() => this.openAdvanceSearch()}
                           onAdvanceSearch={this.adjustRecordItemList}/>
        ]} onDropMenuClick={this.onDropMenuClick}
        dropMenuDatas={[
          {
            key: "log", icon: <i className="iconfont icon-caozuorizhi32"/>,
            content: getLabel(545781, "操作日志")
          }
        ]}
      >
        <div className={cs("searchAdvanced-condition-container", { "searchAdvanced-condition-hide": !showSearchAd })}>
          <AdjustAdvanceSearchPannel
            onToggleSwitch={this.openAdvanceSearch}
            onAdSearch={this.adjustRecordItemList}
          />
        </div>
        <WeaTable
          rowKey="id" scroll={{ x: 1200, y: "calc(100vh - 155px)" }}
          dataSource={dataSource} loading={loading}
          pagination={pagination} columns={columns}
        />
        {/*操作日志*/}
        <LogDialog visible={logDialogVisible} logFunction="salarcitemadj" filterConditions={filterConditions}
                   onCancel={() => this.setState({ logDialogVisible: false })}/>
      </WeaTop>
    );
  }
}

export default Index;