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

/*
 * Author: 黎永顺
 * name:字段管理
 * Description:
 * Date: 2023/2/24
 */
import React, { Component } from "react";
import { WeaCheckbox, WeaTable } from "ecCom";
import { Col, message, Row } from "antd";
import AttendanceCustomFieldsModal from "./attendanceCustomFieldsModal";
import { getAttendanceFieldList, updateAttendanceFieldStatus } from "../../../../apis/attendance";
import TipLabel from "../../../../components/TipLabel";
import { fieldsColumns } from "../columns";

class FieldMangComp extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: {
        query: false
      },
      dataSource: [{}],
      columns: fieldsColumns,
      pageInfo: {
        current: 1,
        pageSize: 10,
        total: 0
      },
      addPayload: {
        visible: false,
        title: "新建考勤自定义字段"
      }
    };
  }

  componentDidMount() {
    this.getAttendanceFieldList();
  }

  getAttendanceFieldList = (extraPayload = {}) => {
    const { loading, pageInfo } = this.state;
    const module = { ...pageInfo, ...extraPayload };
    this.setState({ loading: { ...loading, query: true } });
    getAttendanceFieldList(module).then(({ status, data }) => {
      this.setState({ loading: { ...loading, query: false } });
      if (status) {
        const { pageInfo: pageInfoData } = data;
        const { list: dataSource, columns, pageNum: current, pageSize, total } = pageInfoData;
        this.setState({
          pageInfo: { ...pageInfo, current, pageSize, total },
          dataSource, columns
        });
      }
    }).catch(() => this.setState({ loading: { ...loading, query: false } }));
  };
  handleTriggerAttendFileds = () => {
    const { addPayload } = this.state;
    this.setState({ addPayload: { ...addPayload, visible: !addPayload.visible } });
  };
  handleAttendanceFieldSwitch = ({ id }, enableStatus) => {
    const payload = { id, enableStatus: enableStatus === "1" };
    updateAttendanceFieldStatus(payload).then(({ status, errormsg }) => {
      if (status) {
        message.success("操作成功");
        this.getAttendanceFieldList();
      } else {
        message.error(errormsg || "操作失败");
      }
    });
  };
  getColumns = () => {
    const { columns } = this.state;
    const { showOperateBtn } = this.props;
    return _.map(_.filter(columns, item => !!item.display), child => ({
      ...child,
      render: (text, record) => {
        switch (child.dataIndex) {
          case "enableStatus":
            return (
              <WeaCheckbox
                value={text} display="switch" disabled={!showOperateBtn}
                onChange={value => this.handleAttendanceFieldSwitch(record, value)}
              />
            );
          default:
            return <div dangerouslySetInnerHTML={{ __html: text }}/>;
        }
      }
    }));
  };

  render() {
    const { dataSource, pageInfo, loading, addPayload } = this.state;
    const { fieldName } = 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.getAttendanceFieldList({ fieldName }));
      },
      onChange: current => {
        this.setState({
          pageInfo: { ...pageInfo, current }
        }, () => this.getAttendanceFieldList({ fieldName }));
      }
    };
    return (
      <Row gutter={20}>
        <Col xs={24} sm={24} md={16} lg={18}>
          <WeaTable
            columns={this.getColumns()}
            dataSource={dataSource}
            pagination={pagination}
            loading={loading.query}
          />
          <AttendanceCustomFieldsModal
            {...addPayload} onCancel={this.handleTriggerAttendFileds}
            onRefresh={this.getAttendanceFieldList}
          />
        </Col>
        <Col xs={24} sm={24} md={8} lg={6}>
          <TipLabel
            tipList={[
              "1、考勤字段包含自定义字段和考勤模块的统计字段，所有字段不可重名；",
              "2、停用自定义字段将影响其参与计算的账套核算；"
            ]}
          />
        </Col>
      </Row>
    );
  }
}

export default FieldMangComp;