salary-management-front/pc4mobx/hrmSalary/pages/socialSecurityBenefits/programme/customBenefitsTable.js

/*
 * Author: 黎永顺
 * name: 社保福利方案-自定义福利表格
 * Description:
 * Date: 2023/3/2
 */
import React, { Component } from "react";
import { WeaCheckbox, WeaLocaleProvider, WeaTable } from "ecCom";
import { message, Modal } from "antd";
import { deleteCustomCategory, getCustomCategoryList, updateCustomCategoryStatus } from "../../../apis/welfareScheme";

const { getLabel } = WeaLocaleProvider;

class CustomBenefitsTable extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: {
        query: false
      },
      dataSource: [],
      columns: [],
      pageInfo: {
        current: 1,
        pageSize: 10,
        total: 0
      }
    };
  }

  componentDidMount() {
    this.getCustomCategoryList();
  }

  getCustomCategoryList = (extraPayload) => {
    const { loading, pageInfo } = this.state;
    const { welfareTypeEnum } = this.props;
    const module = { welfareTypeEnum, ...pageInfo, ...extraPayload };
    this.setState({ loading: { ...loading, query: true } });
    getCustomCategoryList(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
        });
      }
    }).catch(() => this.setState({ loading: { ...loading, query: false } }));
  };
  getColumns = () => {
    const { columns } = this.state;
    const { showOperateBtn, onCustomEdit } = this.props;
    return [..._.map(_.filter(columns, item => !!item.display), child => ({
      ...child,
      render: (text, record) => {
        switch (child.dataIndex) {
          case "isUse":
            return (
              <WeaCheckbox
                value={text} display="switch" disabled={!showOperateBtn}
                onChange={value => this.handleCustomBenefitsSwitch(record, value)}
              />
            );
          case "welfareType":
            return <span>{record.welfareTypeSpan}</span>;
          case "paymentScopt":
            return <span>{record.paymentScopeSpan}</span>;
          default:
            return <div dangerouslySetInnerHTML={{ __html: text }}/>;
        }
      }
    })), {
      title: "操作",
      width: 120,
      dataIndex: "operate",
      render: (_, record) => {
        return (
          <div className="linkWapper">
            {showOperateBtn &&
              <React.Fragment>
                <a href="javascript: void(0);" onClick={() => onCustomEdit(record)} style={{ marginRight: 10 }}>编辑</a>
                <a href="javascript: void(0);"
                   onClick={() => this.deleteCustomCategory(record.id)}>{getLabel(535052, "删除")}</a>
              </React.Fragment>
            }
          </div>
        );
      }
    }];
  };
  handleCustomBenefitsSwitch = ({ id }, isUse) => {
    Modal.confirm({
      title: "信息确认",
      content: `确认要${isUse === "1" ? "启用" : "停用"}吗`,
      onOk: () => {
        const payload = { id, isUse };
        updateCustomCategoryStatus(payload).then(({ status, errormsg }) => {
          if (status) {
            message.success("操作成功");
            this.getCustomCategoryList();
          } else {
            message.error(errormsg || "操作失败");
          }
        });
      },
      onCancel: () => {
        this.setState({
          dataSource: _.map(this.state.dataSource, item => {
            if (item.id === id) {
              return {
                ...item, isUse: item.isUse
              };
            }
            return { ...item };
          })
        });
      }
    });
  };
  deleteCustomCategory = (id) => {
    Modal.confirm({
      title: getLabel(131329, "信息确认"),
      content: getLabel(543231, "确认删除本条数据吗?"),
      onOk: () => {
        message.destroy();
        message.loading(getLabel(529063, "正在删除中..."), 0);
        const payload = { id };
        deleteCustomCategory(payload).then(({ status, errormsg }) => {
          message.destroy();
          if (status) {
            message.success(getLabel(502230, "删除成功"));
            this.getCustomCategoryList();
          } else {
            message.error(errormsg || getLabel(30651, "操作失败"));
          }
        }).catch(() => message.destroy());
      }
    });
  };

  render() {
    const { dataSource, pageInfo, loading } = this.state;
    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.getCustomCategoryList());
      },
      onChange: current => {
        this.setState({
          pageInfo: { ...pageInfo, current }
        }, () => this.getCustomCategoryList());
      }
    };
    return (
      <WeaTable
        columns={this.getColumns()}
        dataSource={dataSource}
        pagination={pagination}
        loading={loading.query}
      />
    );
  }
}

export default CustomBenefitsTable;