salary-management-front/pc4mobx/hrmSalary/pages/payrollRelease/components/payrollTemplateTableList/index.js

/*
 * Author: 黎永顺
 * name:工资单发放-重构页面-工资单模板设置
 * Description:
 * Date: 2023/10/13
 */
import React, { Component } from "react";
import { inject, observer } from "mobx-react";
import { WeaLocaleProvider, WeaSelect, WeaTable } from "ecCom";
import { Dropdown, Menu, message, Modal } from "antd";
import { changePayrollDefaultUse, deletePayroll, getPayrollTemplateList } from "../../../../apis/payroll";
import PayrollCopyDialog from "../payrollCopyDialog";
import UpdatePayrollTemplateSlide from "../updatePayrollTemplateSlide";

const getLabel = WeaLocaleProvider.getLabel;

@inject("taxAgentStore")
@observer
class Index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false, columns: [], dataSource: [], selectedRowKeys: [],
      pageInfo: { current: 1, pageSize: 10, total: 0 }, delLoading: false,
      copyDialog: { visible: false, title: "", copyId: "" },
      tmplSlide: {
        visible: false, tmplId: "", top: 0, width: 792, height: 100,
        measureT: "%", measureX: "px", measureY: "%"
      }
    };
  }

  componentDidMount() {
    this.getPayrollTemplateList(this.props);
  }

  componentWillReceiveProps(nextProps, nextContext) {
    if (nextProps.isRefresh !== this.props.isRefresh) this.getPayrollTemplateList(nextProps);
  }

  getPayrollTemplateList = (props) => {
    const { pageInfo } = this.state;
    const { queryParams } = props;
    const { salarySobId, name } = queryParams;
    const payload = { ...pageInfo, salarySobId, name };
    this.setState({ loading: true });
    getPayrollTemplateList(payload).then(({ status, data }) => {
      this.setState({ loading: false });
      if (status) {
        const { columns, list: dataSource, pageNum, pageSize, total } = data;
        this.setState({
          dataSource, pageInfo: { ...pageInfo, pageNum, pageSize, total },
          columns: _.map(_.filter(columns, it => !!it.display), o => {
            const { dataIndex } = o;
            if (dataIndex === "useType") {
              return {
                ...o, width: "20%", render: (useType, record) => {
                  return <WeaSelect detailtype={3} value={useType || "0"} options={[{ key: "1", showname: "" }]}
                                    onChange={v => this.handleSwitchUsetype(v, record)}
                  />;
                }
              };
            }
            return { ...o, width: "20%" };
          })
        });
      }
    }).catch(() => this.setState({ loading: false }));
  };
  handleSwitchUsetype = (v, record) => {
    const { id } = record;
    changePayrollDefaultUse({ id }).then(({ status, errormsg }) => {
      if (status) {
        message.success(getLabel(30700, "操作成功！"));
        this.getPayrollTemplateList(this.props);
      } else {
        message.error(errormsg);
      }
    });
  };
  handleOpts = ({ key }, record) => {
    const { copyDialog, tmplSlide, selectedRowKeys } = this.state;
    const { id } = record;
    switch (key) {
      case "edit":
        this.setState({
          tmplSlide: { ...tmplSlide, visible: true, tmplId: id }
        });
        break;
      case "copy":
        this.setState({
          copyDialog: { ...copyDialog, visible: true, copyId: id, title: getLabel(543599, "复制工资单") }
        });
        break;
      case "del":
        Modal.confirm({
          title: getLabel(131329, "信息确认"),
          content: getLabel(388758, "确认要删除吗?"),
          onOk: () => {
            this.setState({ delLoading: true });
            const payload = id ? [id] : selectedRowKeys;
            deletePayroll(payload).then(({ status, errormsg }) => {
              this.setState({ delLoading: false });
              if (status) {
                message.success(getLabel(502230, "删除成功！"));
                this.getPayrollTemplateList(this.props);
                !_.isEmpty(selectedRowKeys) && this.setState({ selectedRowKeys: [] });
              } else {
                message.error(errormsg);
              }
            }).catch(() => this.setState({ delLoading: false }));
          }
        });
        break;
      default:
        break;
    }
  };

  render() {
    const { loading, dataSource, columns, pageInfo, copyDialog, tmplSlide, selectedRowKeys } = this.state;
    const { taxAgentStore: { showOperateBtn }, forceUpdate } = this.props;
    const pagination = {
      ...pageInfo,
      showTotal: total => `${getLabel(18609, "共")} ${total} ${getLabel(18256, "条")}`,
      showQuickJumper: true,
      showSizeChanger: true,
      pageSizeOptions: ["10", "20", "50", "100"],
      onShowSizeChange: (current, pageSize) => {
        this.setState({
          pageInfo: { ...pageInfo, current, pageSize }
        }, () => this.getPayrollTemplateList(this.props));
      },
      onChange: current => {
        this.setState({
          pageInfo: { ...pageInfo, current }
        }, () => this.getPayrollTemplateList(this.props));
      }
    };
    const rowSelection = {
      selectedRowKeys,
      onChange: selectedRowKeys => this.setState({ selectedRowKeys }, () => forceUpdate())
    };
    return (
      <React.Fragment>
        <WeaTable
          rowKey="id" rowSelection={rowSelection}
          dataSource={dataSource} loading={loading} pagination={pagination}
          columns={[
            ...columns,
            {
              dataIndex: "operate", title: getLabel(30585, "操作"), width: 170,
              render: (__, record) => {
                const {} = record;
                //显示更新模板
                return showOperateBtn ? <React.Fragment>
                  <a href="javascript:void(0);" onClick={() => this.handleOpts({ key: "edit" }, record)}
                     style={{ marginRight: 10 }}>{getLabel(501169, "编辑")}</a>
                  <a href="javascript:void(0);" style={{ marginRight: 10 }}
                     onClick={() => this.handleOpts({ key: "copy" }, record)}
                  >{getLabel(77, "复制")}</a>
                  <Dropdown
                    overlay={<Menu onClick={e => this.handleOpts(e, record)}>
                      <Menu.Item key="del">{getLabel(535052, "删除")}</Menu.Item>
                    </Menu>
                    }
                  >
                    <a href="javascript:void(0);"><i className="icon-coms-more"/></a>
                  </Dropdown>
                </React.Fragment> : <a href="javascript:void(0);">{getLabel(83110, "查看详情")}</a>;
              }
            }
          ]}
        />
        {/*复制工资单模板*/}
        <PayrollCopyDialog {...copyDialog}
                           onCancel={v => this.setState({
                             copyDialog: { ...copyDialog, visible: false, copyId: "" }
                           }, () => v === "refresh" && this.getPayrollTemplateList(this.props))}
        />
        {/*  新建编辑工资单模板*/}
        <UpdatePayrollTemplateSlide {...tmplSlide}
                                    onClose={v => this.setState({
                                      tmplSlide: { ...tmplSlide, visible: false, tmplId: "" }
                                    }, () => v === "refresh" && this.getPayrollTemplateList(this.props))}

        />
      </React.Fragment>
    );
  }
}

export default Index;