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,
  getAttendanceFieldSettingList,
  getAttendanceList,
  getLedgerList,
  getSalaryCycleAndAttendCycle,
  importAttendQuoteData,
  previewAttendQuote
} from "../../../../apis/attendance";
import ImportModal from "../../../../components/importModal";
import HeaderSet from "../../../../components/importModal/headerSet";
import ImportFormOptions from "./importFormOptions";
import SelectItemModal from "../../../../components/selectItemsModal";
import moment from "moment";
import SelectItemsWrapper from "../../../../components/selectItemsModal/selectItemsWrapper";

class AttendanceDataComp extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: {
        query: false,
        headset: false
      },
      dataSource: [],
      columns: [],
      fieldSetList: [],
      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: ""
      },
      fieldSetPayload: { visible: false, title: "", data: [] }
    };
  }

  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, importData } = this.state;
    const { params } = importData;
    this.setState({
      importFormPayload: {
        ...importFormPayload,
        [key]: value
      },
      importData: { ...importData, params: { ...params, [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) => {
    const { importFormPayload } = this.state;
    const { salaryYearMonth, salarySobId } = importFormPayload;
    this.getLedgerList();
    this.setState({ importData: { ...importData, params: { salaryYearMonth, salarySobId } } });
  };
  setStep = step => this.setState({ importData: { ...this.state.importData, step } });
  handleFinish = () => {
    const { importData } = this.state;
    const { step } = importData;
    this.setState({
      importData: {
        ...importData, visiable: false, params: {}, step: 0,
        columns: [], slideDataSource: [], importResult: []
      }
    });
    step === 2 && this.getAttendanceList();
  };
  handlePreviewImport = (params) => {
    const { importData } = this.state;
    previewAttendQuote(params).then(({ status, data }) => {
      if (status) {
        const { headers, list } = data;
        this.setState({
          importData: {
            ...importData,
            columns: _.map(headers, (it, dataIndex) => ({ title: it, dataIndex })),
            slideDataSource: _.map(list, item => {
              return _.reduce(item, (pre, cur, key) => (_.assign(pre, { [key]: cur })), {});
            })
          }
        });
      }
    });
  };
  handleImport = (params) => {
    const { importData } = this.state;
    const { step } = importData;
    importAttendQuoteData(params).then(({ status, data }) => {
      if (status) {
        this.setState({
          importData: {
            ...importData,
            step: step + 1,
            importResult: data
          }
        });
      }
    });
  };
  handleTemplateLinkClick = () => {
    const { importFormPayload } = this.state;
    const { salarySobId, salaryYearMonth } = importFormPayload;
    if (!salarySobId || !salaryYearMonth) {
      message.warning("请完善导入选项，再下载");
      return;
    }
    window.open(`/api/bs/hrmsalary/attendQuote/downloadTemplate?salaryYearMonth=${salaryYearMonth}&salarySobId=${salarySobId}`);
  };
  /*
   * Author: 黎永顺
   * Description: 表头设置
   * Params:
   * Date: 2023/3/6
   */
  handleHeaderSettings = (params) => {
    const { fieldSetPayload, loading } = this.state;
    this.setState({ loading: { ...loading, headset: true } });
    getAttendanceFieldSettingList(params).then(({ status, data }) => {
      this.setState({ loading: { ...loading, headset: false } });
      if (status) {
        this.setState({
          fieldSetList: data,
          fieldSetPayload: {
            ...fieldSetPayload,
            visible: true, title: "导入字段设置", data
          }
        });
      }
    }).catch(() => this.setState({ loading: { ...loading, headset: false } }));
  };
  handleCloseSettings = () => {
    const { fieldSetPayload } = this.state;
    this.setState({
      fieldSetPayload: {
        ...fieldSetPayload,
        visible: false, title: "", data: []
      }
    });
  };
  handleSearchItemSet = (val) => {
    const { fieldSetPayload, fieldSetList } = this.state;
    this.setState({
      fieldSetPayload: {
        ...fieldSetPayload,
        data: _.map(_.cloneDeep(fieldSetList), item => {
          return {
            ...item,
            items: _.filter(item.items || [], child => {
              return child.name.indexOf(val) !== -1;
            })
          };
        })
      }
    });
  };
  handleShowOnlyChecked = (checked) => {
    const { fieldSetPayload, fieldSetList } = this.state;
    if (!!NUmber(checked)) {
      this.setState({
        fieldSetPayload: {
          ...fieldSetPayload,
          data: _.map(_.cloneDeep(fieldSetList), item => {
            return {
              ...item,
              items: _.map(item.items || [], child => !!child.checked)
            };
          })
        }
      });
    } else {
      this.setState({
        fieldSetPayload: {
          ...fieldSetPayload,
          data: _.cloneDeep(fieldSetList)
        }
      });
    }
  };

  render() {
    const {
      dataSource, columns, pageInfo, loading, importData, importFormPayload, fieldSetPayload
    } = 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
                       loading={loading.headset}
                       onSetClick={() => this.handleHeaderSettings({ sourceType: "IMPORT" })}/>}
                     renderFormComponent={() => <ImportFormOptions
                       {...importFormPayload}
                       onChangeImportForm={this.handleChangeImportPayload}/>
                     }
        />
        {/* 表头设置 */}
        <SelectItemModal {...fieldSetPayload}
                         comp={<SelectItemsWrapper dataSource={fieldSetPayload.data}/>}
                         onCancel={this.handleCloseSettings}
                         onSearchItemSet={this.handleSearchItemSet}
                         onShowOnlyChecked={this.handleShowOnlyChecked}
        />
      </React.Fragment>
    );
  }
}

export default AttendanceDataComp;