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 { WeaDatePicker, WeaLocaleProvider, WeaReqTop, WeaSelect } from "ecCom";
import * as API from "../../apis/variableSalary";
import AdvanceInputBtn from "./components/advanceInputBtn";
import SearchPannel from "./components/searchPannel";
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 { convertToUrlString } from "../../util/url";
import moment from "moment";
import { Button } from "antd";
import cs from "classnames";
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, showSearchAd: false, taxAgentIds: "",
      salaryMonth: moment(new Date()).format("YYYY-MM"), taxAgentOption: [],
      SIDialog: { visible: false, title: "", id: "", taxAgentOption: [] }, //薪资项目薪资编辑弹框
      SFDialog: { visible: false, title: "", detail: {}, taxAgentOption: [] }, //薪资档案编辑弹框
      SFImpDialog: { visible: false, title: getLabel(24023, "数据导入") }//薪资档案导入
    };
  }

  componentDidMount() {
    API.getAdminTaxAgentList().then(({ status, data }) => {
      if (status) {
        const taxAgentOption = _.map(data, (o, i) => ({ key: String(o.id), showname: o.name }));
        this.setState({
          taxAgentOption, taxAgentIds: _.map(taxAgentOption, o => o.key).join(","),
          SIDialog: { ...this.state.SIDialog, taxAgentOption },
          SFDialog: { ...this.state.SFDialog, taxAgentOption }
        });
      }
    });
  }

  handleAdvanceSearch = () => this.setState({ isQuery: !this.state.isQuery });
  openAdvanceSearch = () => this.setState({ showSearchAd: !this.state.showSearchAd });
  handleOperate = (type, detail = {}) => {
    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 { baseTableStore: { VSalryForm } } = this.props;
        const { salaryMonth, taxAgentIds } = this.state;
        const payload = { salaryMonth, taxAgentIds, ...VSalryForm.getFormParams() };
        window.open(`/api/bs/hrmsalary/variableSalary/export?${convertToUrlString(payload)}`, "_blank");
        break;
      default:
        break;
    }
  };

  render() {
    const {
      selectedKey, SIDialog, SFDialog, SFImpDialog, showSearchAd, isQuery, salaryMonth, taxAgentOption, taxAgentIds
    } = this.state;
    const { taxAgentStore: { showOperateBtn }, baseTableStore: { VSSalaryItemForm } } = this.props;
    const tabs = [
      {
        title: getLabel(111, "薪资档案"), key: "salaryFile", showDropIcon: showOperateBtn,
        dropMenuDatas: showOperateBtn ? [{
          key: "export", icon: <i className="icon-coms-export"/>, content: getLabel(111, "导出")
        }] : [],
        buttons: showOperateBtn ? [
          <Button type="primary" onClick={() => this.handleOperate("create")}>{getLabel(111, "新建")}</Button>,
          <Button type="ghost" onClick={() => this.handleOperate("import")}>{getLabel(111, "导入")}</Button>,
          <WeaDatePicker format="YYYY-MM" value={salaryMonth}
                         onChange={val => this.setState({ salaryMonth: val }, () => this.handleAdvanceSearch())}/>,
          <WeaSelect options={taxAgentOption} style={{ width: 200, display: "flex" }} multiple value={taxAgentIds}
                     onChange={val => this.setState({ taxAgentIds: val }, () => this.handleAdvanceSearch())}/>,
          <AdvanceInputBtn searchType="advance" onOpenAdvanceSearch={() => this.openAdvanceSearch()}
                           onAdvanceSearch={this.handleAdvanceSearch}/>
        ] : [
          <WeaDatePicker format="YYYY-MM" value={salaryMonth} onChange={val => this.setState({ salaryMonth: val })}/>,
          <WeaSelect options={taxAgentOption} style={{ width: 200, display: "flex" }} multiple value={taxAgentIds}
                     onChange={val => this.setState({ taxAgentIds: val }, () => this.handleAdvanceSearch())}/>,
          <AdvanceInputBtn searchType="advance" onOpenAdvanceSearch={() => this.openAdvanceSearch()}
                           onAdvanceSearch={this.handleAdvanceSearch}/>
        ],
        children: <SalaryFileList {...this.props} salaryMonth={salaryMonth} taxAgentIds={taxAgentIds} isQuery={isQuery}
                                  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}
      >
        <div className={cs("searchAdvanced-condition-container", { "searchAdvanced-condition-hide": !showSearchAd })}>
          <SearchPannel onCancel={() => this.setState({ showSearchAd: false })} onAdSearch={this.handleAdvanceSearch}/>
        </div>
        {_.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} salaryMonth={salaryMonth} taxAgentIds={taxAgentIds}
                                onCancel={callback => {
                                  this.setState({ SFImpDialog: { ...SFImpDialog, visible: false } },
                                    () => callback && this.handleAdvanceSearch());
                                }}/>
      </WeaReqTop>
    );
  }
}

export default Index;