salary-management-front/pc4mobx/hrmSalary/pages/dataAcquisition/attendance/components/attendanceDataComp.js

/*
 * Author: 黎永顺
 * name: 考勤数据
 * Description:
 * Date: 2023/2/24
 */
import React, { Component } from "react";
import { WeaTable } from "ecCom";
import { message, Modal } from "antd";
import {
  deleteAttendance,
  getAttendanceList,
  getLedgerList,
  getSalaryCycleAndAttendCycle
} from "../../../../apis/attendance";
import ImportModal from "../../../../components/importModal";
import HeaderSet from "../../../../components/importModal/headerSet";
import ImportFormOptions from "./importFormOptions";
import moment from "moment";

class AttendanceDataComp extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: {
        query: false
      },
      dataSource: [],
      columns: [],
      pageInfo: {
        current: 1,
        pageSize: 10,
        total: 0
      },
      importData: {
        visiable: false, params: {}, step: 0,
        columns: [], slideDataSource: [], importResult: []
      },
      importFormPayload: {
        salaryYearMonth: moment().format("YYYY-MM"), salarySobList: [],
        salarySobId: "", salaryCycle: "", attendCycle: ""
      }
    };
  }

  componentDidMount() {
    this.getAttendanceList();
  }

  getAttendanceList = (extraPayload) => {
    const { loading, pageInfo } = this.state;
    const module = { ...pageInfo, ...extraPayload };
    this.setState({ loading: { ...loading, query: true } });
    getAttendanceList(module).then(({ status, data }) => {
      this.setState({ loading: { ...loading, query: false } });
      if (status) {
        const { columns, list: dataSource, pageNum: current, pageSize, total } = data;
        this.setState({
          pageInfo: { ...pageInfo, current, pageSize, total },
          dataSource,
          columns: _.map(columns, item => {
            if (item.dataIndex === "salaryYearMonth") {
              return {
                ...item,
                render: (text) => <span>{moment(text).format("YYYY-MM")}</span>
              };
            }
            return { ...item };
          })
        });
      }
    }).catch(() => this.setState({ loading: { ...loading, query: false } }));
  };
  getLedgerList = () => {
    const { importFormPayload } = this.state;
    getLedgerList().then(({ status, data }) => {
      if (status) {
        this.setState({
          importFormPayload: {
            ...importFormPayload,
            salarySobList: _.map(data, it => ({ key: it.id, showname: it.content }))
          }
        });
      }
    });
  };
  handleChangeImportPayload = (key, value) => {
    const { importFormPayload } = this.state;
    this.setState({
      importFormPayload: {
        ...importFormPayload,
        [key]: value
      }
    }, () => {
      if (this.state.importFormPayload.salaryYearMonth && this.state.importFormPayload.salarySobId) {
        const payload = {
          salaryYearMonthStr: this.state.importFormPayload.salaryYearMonth,
          salarySobId: this.state.importFormPayload.salarySobId
        };
        getSalaryCycleAndAttendCycle(payload).then(({ status, data }) => {
          if (status) {
            this.setState({
              importFormPayload: {
                ...this.state.importFormPayload,
                ...data
              }
            });
          }
        });
      }
    });
  };
  handleDeleteAttendanceData = ({ id }) => {
    Modal.confirm({
      title: "信息确认",
      content: "确认要删除吗?",
      onOk: () => {
        deleteAttendance([id]).then(({ status, errormsg }) => {
          if (status) {
            message.success("删除成功");
            this.getAttendanceList();
          } else {
            message.error(errormsg || "删除失败");
          }
        });
      }
    });
  };
  handleImportAttendanceData = (importData) => {
    this.getLedgerList();
    this.setState({ importData });
  };
  setStep = step => this.setState({ importData: { ...this.state.importData, step } });
  handleFinish = () => {
    console.log("finish");
  };
  handlePreviewImport = (params) => {
    console.log("handlePreviewImport", params);
  };
  handleImport = (params) => {
    console.log("handleImport", params);
  };
  handleTemplateLinkClick = () => {
    const { importFormPayload } = this.state;
    const { salarySobId, salaryYearMonth } = importFormPayload;
    if (!salarySobId || !salaryYearMonth) {
      message.warning("请完善导入选项，再下载");
      return;
    }
    // const { attendanceStore: { downloadTemplate } } = this.props;
    // downloadTemplate(salaryYearMonth, salarySobId);
  };

  render() {
    const { dataSource, columns, pageInfo, loading, importData, importFormPayload } = this.state;
    const { showOperateBtn, salaryYearMonth } = this.props;
    const pagination = {
      ...pageInfo,
      showTotal: total => `共 ${total} 条`,
      showQuickJumper: true,
      showSizeChanger: true,
      pageSizeOptions: ["10", "20", "50", "100"],
      onShowSizeChange: (current, pageSize) => {
        this.setState({
          pageInfo: { ...pageInfo, current, pageSize }
        }, () => this.getAttendanceList({ salaryYearMonth: _.compact(salaryYearMonth) }));
      },
      onChange: current => {
        this.setState({
          pageInfo: { ...pageInfo, current }
        }, () => this.getAttendanceList({ salaryYearMonth: _.compact(salaryYearMonth) }));
      }
    };
    return (
      <React.Fragment>
        <WeaTable
          columns={[
            ...columns,
            {
              title: "操作",
              width: 120,
              dataIndex: "operate",
              render: (_, record) => {
                return (
                  <div className="linkWapper">
                    <a href="javascript: void(0);">查看</a>
                    {showOperateBtn &&
                      <a href="javascript: void(0);" onClick={() => this.handleDeleteAttendanceData(record)}>删除</a>
                    }
                  </div>
                );
              }
            }
          ]}
          dataSource={dataSource}
          pagination={pagination}
          loading={loading.query}
        />
        {/* 考勤引用导入 */}
        <ImportModal {...importData} setStep={this.setStep} onFinish={this.handleFinish}
                     previewImport={this.handlePreviewImport} importFile={this.handleImport}
                     templateLink={this.handleTemplateLinkClick} onCancel={this.handleFinish}
                     headerSetCompoent={<HeaderSet
                       onSetClick={() => {
                         // getAttendanceFieldSettingList({ sourceType: "IMPORT" });
                         // this.setState({
                         //   selectItemVisible: true
                         // });
                       }}
                     />}
                     renderFormComponent={
                       () => <ImportFormOptions
                         {...importFormPayload}
                         onChangeImportForm={this.handleChangeImportPayload}/>
                     }
        />
      </React.Fragment>
    );
  }
}

export default AttendanceDataComp;