salary-management-front/pc4mobx/hrmSalary/pages/salary/components/personalScope.js

/*
 * Author: 黎永顺
 * name: 人员范围
 * Description:
 * Date: 2022/11/30
 */
import React, { Component } from "react";
import { message, Modal } from "antd";
import { inject, observer } from "mobx-react";
import { WeaButtonIcon, WeaInputSearch, WeaTab } from "ecCom";
import { taxAgentRangeDelete } from "../../../apis/taxAgent";
import PersonalScopeTable from "./personalScopeTable";
import PersonalScopeModal from "./personalScopeModal";


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

  componentDidMount() {
    const { taxAgentStore: { hasIconInTax } } = this.props;
    hasIconInTax();
  }

  /*
   * Author: 黎永顺
   * Description: 删除人员范围
   * Params:
   * Date: 2022/11/30
   */
  taxAgentRangeDelete = () => {
    Modal.confirm({
      title: "信息确认",
      content: "确认要删除吗?",
      onOk: () => {
        taxAgentRangeDelete(this.state.rowKeys).then(({ status, errormsg }) => {
          if (status) {
            message.success("删除成功");
            this.setState({ rowKeys: [] }, () => {
              this.personalScopeTableRef.clearRowkeys();
            });
          } else {
            message.error(errormsg || "删除失败");
          }
        });
      },
      onCancel: () => {
      }
    });
  };
  /*
   * 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: { hideIconInTax, showSalaryItemBtn }, taxAgentId } = this.props;
    const topTab = [
      {
        title: "管理范围",
        viewcondition: "listInclude"
      },
      {
        title: "从范围中排除",
        viewcondition: "listExclude"
      }
    ];
    const btns = (hideIconInTax || showSalaryItemBtn) ? [
      <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}
          taxAgentId={taxAgentId}
          tabActive={selectedKey}
          searchValue={searchValue}
          onChangeSelectKey={rowKeys => this.setState({ rowKeys })}
        />
        <PersonalScopeModal
          {...personalAddModal}
          taxAgentId={taxAgentId}
          onSuccess={() => this.personalScopeTableRef.getPersonalScopeList()}
          onCancel={() =>
            this.setState({
              personalAddModal: {
                ...personalAddModal,
                visible: false,
                includeType: ""
              }
            })
          }
        />
      </div>
    );
  }
}

export default PersonalScope;