salary-management-front/pc4mobx/hrmSalary/pages/payrollFiles/components/importMenu.js

import React, { Component } from "react";
import ImportModal from "../../../components/importModal";
import * as API from "../../../apis/payrollFiles";
import { Menu, Modal } from "antd";
import "../index.less";

class ImportMenu extends Component {
  constructor(props) {
    super(props);
    this.state = {
      previewColumns: [],
      previewDataSource: [],
      importParams: {
        visible: false,
        step: 0,
        isInit: false,
        importType: "",
        importResult: {}
      }
    };
  }

  salaryArchivePreview = (params) => {
    params.importType = this.state.importParams.importType;
    API.salaryArchivePreview(params).then(({ status, data }) => {
      if (status) {
        const { headers, list } = data;
        this.setState({
          previewColumns: headers.map((item, index) => {
            return {
              key: index,
              title: item,
              dataIndex: index
            };
          }),
          previewDataSource: list.map(item => {
            let result = {};
            item.map((i, index) => {
              result[index] = i;
            });
            return result;
          })
        });
      }
    });
  };
  handleMenuClick = (e) => {
    const { key } = e;
    if (key === "init") {
      Modal.confirm({
        title: "信息确认",
        content: `若导入表格中的人员已存在在薪资档案中，初始化导入会将档案中该人员的数据清除再导入，点击确定继续导入`,
        onOk: () => {
          this.setState({
            importParams: {
              ...this.state.importParams,
              importType: key,
              isInit: true,
              visible: true,
              step: 0
            }
          });
        }
      });
    } else {
      this.setState({
        importParams: {
          ...this.state.importParams,
          importType: key,
          isInit: true,
          visible: true,
          step: 0
        }
      });
    }
  };
  handleInitModal = () => {
    //  清空列表数据
    this.setState({
      previewDataSource:[],
      importParams: {
        ...this.state.importParams,
        importResult:{},
      }
    });
  };
  // 导入档案
  handleImportFile = (params) => {
    params.importType = this.state.importParams.importType;
    API.importSalaryArchive(params).then(({ status, data }) => {
      if (status) {
        data.errorData = data.errorNotice;
        this.setState({
          importParams: {
            ...this.state.importParams,
            importResult: data
          }
        });
      }
    });
  };

  render() {
    const { importType, refreshList } = this.props;
    const { importParams, previewColumns, previewDataSource } = this.state;
    return (
      <React.Fragment>
        <Menu className="dropdownMenuWrapper" onClick={this.handleMenuClick}>
          {_.filter(importType, it => it.id !== "taxAgentAdjust").map((item) => (
            <Menu.Item key={item.id}>{item.content}</Menu.Item>
          ))}
        </Menu>
        {importParams.visible && (
          <ImportModal
            init={() => {
              this.handleInitModal();
            }}
            isInit={importParams.isInit}
            columns={previewColumns}
            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
                }
              }, () => refreshList());
            }}
            previewImport={(params) => this.salaryArchivePreview(params)}
            importFile={(params) => this.handleImportFile(params)}
            templateLink={
              "/api/bs/hrmsalary/salaryArchive/downloadTemplate?importType=" +
              importParams.importType
            }
            visiable={importParams.visible}
            onCancel={() => {
              this.setState({ importParams: { ...this.state.importParams, visible: false } });
            }}
          />
        )}
      </React.Fragment>
    );
  }
}

export default ImportMenu;