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

/*
  *  浮动薪酬
  *
  * @Author:    黎永顺
  * @Date:      2024/8/8
  * @Wechat:
  * @Email:     971387674@qq.com
  * @description:
*/
import React, { Component } from "react";
import { inject, observer } from "mobx-react";
import { toJS } from "mobx";
import { WeaLoadingGlobal, WeaLocaleProvider, WeaReqTop } from "ecCom";
import * as API from "../../apis/variableSalary";
import AdvanceInputBtn from "./components/advanceInputBtn";
import SalaryItemDialog from "./components/salaryItemDialog";
import SalaryFileDialog from "./components/salaryFileDialog";
import SalaryItemList from "./components/salaryItemList";
import SalaryFileList from "./components/salaryFileList";
import SalaryFileImportDialog from "./components/salaryFileImportDialog";
import { Button, message } from "antd";
import "./index.less";

const getLabel = WeaLocaleProvider.getLabel;

@inject("taxAgentStore", "baseTableStore")
@observer
class Index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedKey: "salaryFile", isQuery: false,
      SIDialog: { visible: false, title: "", id: "" }, //薪资项目薪资编辑弹框
      SFDialog: { visible: false, title: "", detail: {} }, //薪资档案编辑弹框
      SFImpDialog: { visible: false, title: getLabel(24023, "数据导入") }//薪资档案导入
    };
  }

  handleAdvanceSearch = () => this.setState({ isQuery: !this.state.isQuery });
  handleOperate = (type, detail = {}) => {
    const { baseTableStore: { SFTableStore, VSalryForm, VExtraSalryForm } } = this.props;
    switch (type) {
      case "create":
        this.setState({
          SFDialog: {
            ...this.state.SFDialog, visible: true, detail,
            title: _.isEmpty(detail) ? getLabel(111, "新增浮动数据") : getLabel(111, "编辑浮动数据")
          }
        });
        break;
      case "import":
        this.setState({ SFImpDialog: { ...this.state.SFImpDialog, visible: true } });
        break;
      case "export":
        const columns = _.map(_.filter(toJS(SFTableStore.columns), (item) => item.display === "true"), it => it.dataIndex);
        const { taxAgentIds } = VExtraSalryForm.getFormParams(), { departmentIds } = VSalryForm.getFormParams();
        const payload = {
          ...VSalryForm.getFormParams(), ...VExtraSalryForm.getFormParams(),
          taxAgentIds: !_.isEmpty(taxAgentIds) ? taxAgentIds.split(",") : [],
          departmentIds: !_.isEmpty(departmentIds) ? departmentIds.split(",") : [],
          columns
        };
        WeaLoadingGlobal.start();
        const promise = API.exportVariableSalary(payload);
        break;
      case "custom_cols":
        SFTableStore.setColSetVisible(true);
        SFTableStore.tableColSet(true);
        break;
      case "batchDel":
        const { state: { selectedRowKeys }, handleDelete } = this.salaryListRef.wrappedInstance;
        if (_.isEmpty(selectedRowKeys)) {
          message.warning(getLabel(111, "请选择数据！"));
          return;
        }
        handleDelete(selectedRowKeys);
        break;
      default:
        break;
    }
  };

  render() {
    const { selectedKey, SIDialog, SFDialog, SFImpDialog, isQuery } = this.state;
    const { taxAgentStore: { showOperateBtn }, baseTableStore: { VSSalaryItemForm } } = this.props;
    const tabs = [
      {
        title: getLabel(111, "浮动数据"), key: "salaryFile", showDropIcon: true,
        dropMenuDatas: showOperateBtn ? [
          { key: "export", icon: <i className="icon-coms-export"/>, content: getLabel(111, "导出") },
          { key: "custom_cols", icon: <i className="icon-coms-Custom"/>, content: getLabel(32535, "显示列定制") }
        ] : [
          { key: "custom_cols", icon: <i className="icon-coms-Custom"/>, content: getLabel(32535, "显示列定制") }
        ],
        buttons: showOperateBtn ? [
          <Button type="primary" onClick={() => this.handleOperate("create")}>{getLabel(111, "新建")}</Button>,
          <Button type="ghost" onClick={() => this.handleOperate("import")}>{getLabel(111, "导入")}</Button>,
          <Button type="primary" onClick={() => this.handleOperate("batchDel")}>{getLabel(111, "批量删除")}</Button>
        ] : [],
        children: <SalaryFileList {...this.props} isQuery={isQuery} ref={dom => this.salaryListRef = dom}
                                  onViewSalaryFile={(data) => this.handleOperate("create", data)}/>
      },
      {
        title: getLabel(111, "字段管理"), key: "salaryItem", showDropIcon: false, dropMenuDatas: [],
        buttons: showOperateBtn ? [
          <Button type="primary" onClick={() => this.setState({
            SIDialog: { visible: true, id: "", title: getLabel(111, "新增薪资项目") }
          })}>{getLabel(111, "新建")}</Button>,
          <AdvanceInputBtn onAdvanceSearch={this.handleAdvanceSearch}/>
        ] : [<AdvanceInputBtn onAdvanceSearch={this.handleAdvanceSearch}/>],
        children: <SalaryItemList {...this.props} isQuery={isQuery} onEditSalaryItem={data => this.setState({
          SIDialog: { visible: true, id: data.id, title: getLabel(111, "编辑薪资项目") }
        }, () => VSSalaryItemForm.updateFields({
          name: data.name, dataType: data.dataType
        }))}/>
      }
    ];
    return (
      <WeaReqTop
        title={getLabel(111, "浮动数据")} icon={<i className="icon-coms-fa"/>} selectedKey={selectedKey}
        iconBgcolor="#F14A2D" tabDatas={tabs} className="variable_salary_wrapper"
        buttons={_.find(tabs, o => selectedKey === o.key).buttons} buttonSpace={10}
        onChange={selectedKey => this.setState({ selectedKey, SFDialog: { ...SFDialog, visible: false } })}
        showDropIcon={_.find(tabs, o => selectedKey === o.key).showDropIcon} onDropMenuClick={this.handleOperate}
        dropMenuDatas={_.find(tabs, o => selectedKey === o.key).dropMenuDatas}
      >
        {_.find(tabs, o => selectedKey === o.key).children}
        {/*薪资项目*/}
        <SalaryItemDialog {...SIDialog} onSearch={this.handleAdvanceSearch} onCancel={callback => this.setState({
          SIDialog: { ...SIDialog, visible: false }
        }, () => callback && callback())}/>
        {/*薪资档案*/}
        <SalaryFileDialog {...SFDialog} onSearch={this.handleAdvanceSearch} onClose={callback => this.setState({
          SFDialog: { ...SFDialog, visible: false }
        }, () => callback && callback())}/>
        {/* 薪资档案导入*/}
        <SalaryFileImportDialog {...this.props} {...SFImpDialog} onCancel={callback => {
          this.setState({ SFImpDialog: { ...SFImpDialog, visible: false } },
            () => callback && this.handleAdvanceSearch());
        }}/>
      </WeaReqTop>
    );
  }
}

export default Index;