salary-management-front/pc4mobx/hrmSalary/pages/ledgerPage/components/ledgerTable.js

/*
 * Author: 黎永顺
 * name: 薪资账套列表
 * Description:
 * Date: 2022/12/7
 */
import React, { Component } from "react";
import { WeaCheckbox, WeaTable } from "ecCom";
import { inject, observer } from "mobx-react";
import { Menu, message, Modal, Popover } from "antd";
import { changeLedgerStatus, deleteLedger, getLedgerList } from "../../../apis/ledger";
import CopyLedgerModal from "./copyLedgerModal";
import "./index.less";

@inject("taxAgentStore")
@observer
class LedgerTable extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      dataSource: [],
      columns: [],
      pageInfo: {
        current: 1,
        pageSize: 10,
        total: 0
      },
      copyLedgerModal: {
        visible: false,
        title: "复制账套", id: "", name: "", taxAgenyId: ""
      }
    };
  }

  componentDidMount() {
    this.getLedgerList();
  }

  componentWillReceiveProps(nextProps, nextContext) {
    if (nextProps.doSearch !== this.props.doSearch) this.getLedgerList({ current: 1 });
  }

  getLedgerList = (extra = {}) => {
    const { name } = this.props;
    const { pageInfo } = this.state;
    const payload = { name, ...pageInfo, ...extra };
    this.setState({ loading: true });
    getLedgerList(payload).then(({ status, data }) => {
      this.setState({ loading: false });
      if (status) {
        const { pageNum: current, pageSize, total, columns, list: dataSource } = data;
        this.setState({
          pageInfo: { ...pageInfo, current, pageSize, total },
          dataSource,
          columns
        });
      }
    });
  };
  getColumns = () => {
    const { columns } = this.state;
    const { taxAgentStore, onEditLedger } = this.props;
    const { showOperateBtn } = taxAgentStore;
    return _.map(columns, item => {
      const { dataIndex } = item;
      if (dataIndex === "disable") {
        item.render = (text, record) => {
          return <WeaCheckbox
            value={text === 0 ? "1" : "0"}
            display="switch"
            disabled={!showOperateBtn}
            onChange={(disable) => this.changeLedgerStatus({ id: record.id, disable: disable === "0" ? 1 : 0 })}
          />;
        };
      } else if (dataIndex === "operate") {
        item.width = 150;
        item.render = (text, record) => {
          return <div className="optWrapper">
            <a href="javascript:void(0);" className="mr10"
               onClick={() => onEditLedger(record)}>{showOperateBtn ? "编辑" : "查看"}</a>
            {/*{*/}
            {/*  showOperateBtn &&*/}
            {/*  <a href="javascript:void(0);" className="mr10"*/}
            {/*     onClick={() => this.handleMenuClick({ key: "delete" }, record)}>删除</a>*/}
            {/*}*/}
            {
              showOperateBtn &&
              <a href="javascript:void(0);" className="mr10"
                 onClick={() => this.handleMenuClick({ key: "copy" }, record)}>复制</a>
            }
            {
              showOperateBtn &&
              <Popover
                overlayClassName="moreIconWrapper"
                placement="bottomRight"
                content={<Menu onClick={(e) => this.handleMenuClick(e, record)}>
                  <Menu.Item key="delete">删除</Menu.Item>
                </Menu>} title="">
                <i className="icon-coms-more"/>
              </Popover>
            }
          </div>;
        };
      } else {
        item.render = (text) => {
          return <span className="tdEllipsis" title={text}>{text}</span>;
        };
      }
      return { ...item };
    });
  };
  /*
   * Author: 黎永顺
   * Description: 刪除薪资账套
   * Params:
   * Date: 2022/12/8
   */
  deleteLedger = (payload) => {
    deleteLedger(payload).then(({ status, errormsg }) => {
      if (status) {
        message.success("删除成功");
        this.getLedgerList();
      } else {
        message.error(errormsg || "删除失败");
      }
    });
  };
  /*
   * Author: 黎永顺
   * Description: 启用/关闭账套
   * Params:
   * Date: 2022/12/8
   */
  changeLedgerStatus = (payload) => {
    changeLedgerStatus(payload).then(({ status, errormsg }) => {
      if (status) {
        message.success("操作成功");
        this.getLedgerList();
      } else {
        message.error(errormsg || "操作成功");
      }
    });
  };
  handleResetCopy = () => {
    const { copyLedgerModal } = this.state;
    this.setState({
      copyLedgerModal: { ...copyLedgerModal, visible: false, id: "", name: "", taxAgenyId: "" }
    });
  };
  handleMenuClick = ({ key }, record) => {
    const { copyLedgerModal } = this.state;
    const { id, name, taxAgentId } = record;
    switch (key) {
      case "copy":
        this.setState({
          copyLedgerModal: { ...copyLedgerModal, visible: true, id, name, taxAgentId }
        });
        break;
      case "delete":
        Modal.confirm({
          title: "信息确认",
          content: "确认要删除吗?",
          onOk: () => {
            this.deleteLedger([id]);
          }
        });
        break;
      default:
        break;
    }
  };

  render() {
    const { dataSource, columns, pageInfo, loading, copyLedgerModal } = 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.getLedgerList();
        });
      },
      onChange: current => {
        this.setState({
          pageInfo: { ...pageInfo, current }
        }, () => {
          this.getLedgerList();
        });
      }
    };
    return (
      <React.Fragment>
        <WeaTable
          rowKey="id"
          dataSource={dataSource}
          pagination={pagination}
          loading={loading}
          columns={this.getColumns()}
          scroll={{ y: "calc(100vh - 152px)" }}
        />
        <CopyLedgerModal
          {...copyLedgerModal}
          onCancel={this.handleResetCopy}
          onRefreshList={this.getLedgerList}
        />
      </React.Fragment>
    );
  }
}

export default LedgerTable;