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

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


@inject("taxAgentStore")
@observer
class PersonalScope extends Component {
  constructor(props) {
    super(props);
    this.state = {
      searchValue: "",
      selectedKey: "listInclude",
      rowKeys: [],
      personalAddModal: {
        visible: false,
        title: "关联人员",
        includeType: ""
      },
      previewDataSource: [],
      importParams: {
        visible: false,
        step: 0,
        importResult: {}
      }
    };
    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
      }
    });
  };
  salaryArchivePreview = (params) => {
    taxAgentRangePreview(params).then(({ status, data }) => {
      if (status) {
        const { preview } = data;
        this.setState({
          previewDataSource: preview
        });
      }
    });
  };
  handleImportFile = (params) => {
    const { taxAgentId } = this.props;
    taxAgentRangeImportData({ ...params, taxAgentId }).then(({ status, data }) => {
      if (status) {
        this.setState({
          importParams: {
            ...this.state.importParams,
            importResult: data
          }
        });
      }
    });
  };

  render() {
    const { selectedKey, searchValue, rowKeys, personalAddModal, importParams, previewDataSource } = this.state;
    const { taxAgentStore: { hideIconInTax, showSalaryItemBtn }, taxAgentId } = this.props;
    const topTab = [
      {
        title: "管理范围",
        viewcondition: "listInclude"
      },
      {
        title: "从范围中排除",
        viewcondition: "listExclude"
      }
    ];
    const btns = (hideIconInTax || showSalaryItemBtn) ? [
      <Button
        type="primary"
        onClick={() => {
          this.setState({ importParams: { ...importParams, visible: true, step: 0 } });
        }}
      >导入</Button>,
      <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()}
    />];
    selectedKey === "listExclude" && btns.shift();
    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: ""
              }
            })
          }
        />
        {importParams.visible && (
          <ImportModal
            isInit={false}
            columns={importEmployColumns}
            slideDataSource={previewDataSource}
            step={importParams.step}
            setStep={(step) => {
              this.setState({ importParams: { ...this.state.importParams, step } });
            }}
            importResult={importParams.importResult}
            onFinish={() => {
              this.setState({
                importParams: {
                  ...this.state.importParams,
                  visible: false
                }
              }, () => this.personalScopeTableRef.getPersonalScopeList());
            }}
            previewImport={(params) => this.salaryArchivePreview(params)}
            importFile={(params) => this.handleImportFile(params)}
            templateLink={`/api/bs/hrmsalary/taxAgent/range/downloadTemplate?taxAgentId=${taxAgentId}`}
            visiable={importParams.visible}
            onCancel={() => {
              this.setState({ importParams: { ...this.state.importParams, visible: false } });
            }}
          />
        )}
      </div>
    );
  }
}

export default PersonalScope;