salary-management-front/pc4mobx/hrmSalary/pages/ledgerPage/components/ledgerAssociatedPersonnel.js

/*
 * Author: 黎永顺
 * name: 薪资账套关联人员
 * Description:
 * Date: 2022/12/12
 */
import React, { Component } from "react";
import { inject, observer } from "mobx-react";
import { message, Modal } from "antd";
import { WeaButtonIcon, WeaInputSearch, WeaTab } from "ecCom";
import PersonalScopeTable from "../../../components/PersonalScopeTable";
import PersonalScopeModal from "../../../components/PersonalScopeModal";
import {
  deleteLedgerPersonRange,
  getLedgerPersonRangeExclude,
  getLedgerPersonRangeInclude,
  saveLedgerPersonRange
} from "../../../apis/ledger";

const APIFox = {
  listInclude: getLedgerPersonRangeInclude,
  listExclude: getLedgerPersonRangeExclude
};
const APISaveFox = {
  save: saveLedgerPersonRange
};

@inject("taxAgentStore")
@observer
class LedgerAssociatedPersonnel extends Component {
  constructor(props) {
    super(props);
    this.state = {
      searchValue: "",
      selectedKey: "listInclude",
      rowKeys: [],
      personalAddModal: {
        visible: false,
        title: "关联人员",
        includeType: ""
      }
    };
  }

  /*
   * Author: 黎永顺
   * Description: 删除人员范围
   * Params:
   * Date: 2022/11/30
   */
  taxAgentRangeDelete = () => {
    Modal.confirm({
      title: "信息确认",
      content: "确认要删除吗?",
      onOk: () => {
        deleteLedgerPersonRange(this.state.rowKeys).then(({ status, errormsg }) => {
          if (status) {
            message.success("删除成功");
            this.setState({ rowKeys: [] }, () => {
              this.personalScopeTableRef.clearRowkeys();
            });
          } else {
            message.error(errormsg || "删除失败");
          }
        });
      }
    });
  };
  /*
   * Author: 黎永顺
   * Description:新增人员范围
   * Params:
   * Date: 2022/11/30
   */
  handleAddPersonal = () => {
    const { personalAddModal, selectedKey } = this.state;
    this.setState({
      personalAddModal: {
        ...personalAddModal,
        visible: true,
        includeType: selectedKey === "listInclude" ? 1 : 0
      }
    });
  };

  render() {
    const { selectedKey, searchValue, rowKeys, personalAddModal } = this.state;
    const { taxAgentStore: { showOperateBtn }, editId, saveSalarySobId } = this.props;
    const topTab = [
      {
        title: "关联人员范围",
        viewcondition: "listInclude"
      },
      {
        title: "从范围中排除",
        viewcondition: "listExclude"
      }
    ];
    const btns = showOperateBtn ? [
      <WeaButtonIcon
        buttonType="del"
        type="primary"
        disabled={_.isEmpty(rowKeys)}
        onClick={this.taxAgentRangeDelete}
      />,
      <WeaButtonIcon buttonType="add" type="primary" onClick={this.handleAddPersonal}/>,
      <WeaInputSearch
        style={{ width: 220 }}
        value={searchValue}
        onChange={searchValue => this.setState({ searchValue })}
        placeholder="请输入对象"
        onSearch={() => this.personalScopeTableRef.getPersonalScopeList()}
      />
    ] : [<WeaInputSearch
      style={{ width: 220 }}
      value={searchValue}
      onChange={searchValue => this.setState({ searchValue })}
      placeholder="请输入对象"
      onSearch={() => this.personalScopeTableRef.getPersonalScopeList()}
    />];
    return (
      <div>
        <WeaTab
          datas={topTab}
          keyParam="viewcondition" //主键
          selectedKey={selectedKey}
          buttons={btns}
          onChange={selectedKey => this.setState({ selectedKey })}
        />
        <PersonalScopeTable
          ref={dom => this.personalScopeTableRef = dom}
          searchKeyVal={{ key: "salarySobId", value: editId || saveSalarySobId }}
          APIFox={APIFox}
          tabActive={selectedKey}
          searchValue={searchValue}
          onChangeSelectKey={rowKeys => this.setState({ rowKeys })}
        />
        {/*新增人员范围*/}
        <PersonalScopeModal
          {...personalAddModal}
          APISaveFox={APISaveFox}
          isTaxgent={false}
          saveKeyVal={{ key: "salarySobId", value: editId || saveSalarySobId }}
          onSuccess={() => this.personalScopeTableRef.getPersonalScopeList()}
          onCancel={() =>
            this.setState({
              personalAddModal: {
                ...personalAddModal,
                visible: false,
                includeType: ""
              }
            })
          }
        />
      </div>
    );
  }
}

export default LedgerAssociatedPersonnel;