salary-management-front/pc4mobx/hrmSalary/components/PersonalScopeTable/index.js

/*
 * Author: 黎永顺
 * name: 人员范围列表数据
 * Description:
 * Date: 2022/11/30
 */
import React, { Component } from "react";
import { WeaTable } from "ecCom";
import { calcPageNo } from "../../util";
import "./index.less";

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

  componentDidMount() {
    this.getPersonalScopeList();
  }

  componentWillReceiveProps(nextProps, nextContext) {
    if (nextProps.tabActive !== this.props.tabActive) {
      this.setState({ selectedRowKeys: [] }, () => {
        this.getPersonalScopeList(nextProps.tabActive);
        nextProps.onChangeSelectKey([]);
      });
    }
  }

  getPersonalScopeList = (tabActive = this.props.tabActive) => {
    const { searchValue, searchKeyVal, APIFox, showOperateBtn } = this.props;
    const { pageInfo, loading } = this.state;
    const payload = {
      [searchKeyVal["key"]]: searchKeyVal["value"],
      targetName: searchValue,
      ...pageInfo
    };
    this.setState({ loading: { ...loading, query: true } });
    APIFox[tabActive](payload).then(({ status, data }) => {
      this.setState({ loading: { ...loading, query: false } });
      if (status) {
        const { pageNum: current, pageSize, total, columns, list: dataSource } = data;
        this.setState({
          pageInfo: { ...pageInfo, current, pageSize, total },
          dataSource,
          columns: _.map(columns, item => {
            return {
              ...item,
              render: (text, record) => {
                if (item.dataIndex === "targetName" && showOperateBtn) {
                  return <a href="javascript:void(0);" onClick={() => this.props.onEditScope(record)}>{text}</a>;
                }
                return <span className="tdEllipsis" title={text}>{text}</span>;
              }
            };
          })
        });
      }
    }).catch(() => {
      this.setState({ loading: { ...loading, query: false } });
    });
  };

  /*
   * Author: 黎永顺
   * Description: 清空选中项
   * Params:
   * Date: 2022/11/30
   */
  clearRowkeys = () => {
    const { pageInfo, selectedRowKeys } = this.state;
    this.setState({
      selectedRowKeys: [],
      pageInfo: {
        ...pageInfo,
        current: calcPageNo(pageInfo.total, pageInfo.current, 10, selectedRowKeys.length)
      }
    }, () => {
      this.getPersonalScopeList();
    });
  };

  render() {
    const { dataSource, columns, pageInfo, loading, selectedRowKeys } = this.state;
    const { onChangeSelectKey, showOperateBtn } = 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.getPersonalScopeList();
        });
      },
      onChange: current => {
        this.setState({
          pageInfo: { ...pageInfo, current }
        }, () => {
          this.getPersonalScopeList();
        });
      }
    };
    const rowSelection = {
      selectedRowKeys,
      onChange: (selectedRowKeys) => {
        this.setState({ selectedRowKeys }, () => {
          onChangeSelectKey(this.state.selectedRowKeys);
        });
      }
    };
    return (
      <WeaTable
        rowKey="id"
        rowSelection={showOperateBtn ? rowSelection : null}
        dataSource={dataSource}
        pagination={pagination}
        loading={loading.query}
        columns={columns}
      />
    );
  }
}

export default PersonalScopeTable;