salary-management-front/pc4mobx/hrmSalary/pages/mySalary/index.js

import React from "react";
import { inject, observer } from "mobx-react";
import { DatePicker } from "antd";
import { WeaLocaleProvider, WeaNewScroll, WeaTop } from "ecCom";
import CustomTab from "../../components/customTab";
import moment from "moment";
import PayrollModal from "./payrollModal";
import CustomPaginationTable from "../../components/customPaginationTable";
import Authority from "./authority";
import "./index.less";

const { getLabel } = WeaLocaleProvider;
const { RangePicker } = DatePicker;

@inject("mySalaryStore")
@observer
export default class MySalary extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: "",
      selectedKey: "0",
      salaryBillVisible: false,
      salaryInfoId: "",
      salaryRange: [moment().startOf("year").format("YYYY-MM"), moment().format("YYYY-MM")]
    };
    this.pageInfo = { current: 1, pageSize: 10 };
    this.historyPageInfo = { current: 1, pageSize: 10 };
  }

  componentDidMount() {
    const { mySalaryStore: { mySalaryBillList } } = this.props;
    mySalaryBillList([moment().startOf("year").format("YYYY-MM"), moment().format("YYYY-MM")]);
  }

  // 查看工资单
  handleView = (record) => {
    this.setState({
      salaryBillVisible: true,
      salaryInfoId: record.id
    });
  };

  getColumns = () => {
    const { mySalaryStore: { myBillTableStore } } = this.props;
    let columns = myBillTableStore.columns ? myBillTableStore.columns : [];
    columns = columns.filter(item => item.hide == "false");
    columns.map(item => {
      if (item.dataIndex == "salaryYearMonth") {
        item.render = (text, record) => {
          return <span>{moment(parseInt(text)).format("YYYY-MM")}</span>;
        };
      } else if (item.dataIndex == "sendTime") {
        item.render = (text, record) => {
          return <span>{moment(parseInt(text)).format("YYYY-MM-DD HH:mm:ss")}</span>;
        };
      }
    });
    columns.push({
      title: "操作",
      dataIndex: "operate",
      render: (text, record) => {
        return (
          <a target="_blank"
             href={`${window.location.origin}/spa/hrmSalary/static/index.html#/main/hrmSalary/mySalary/${record.id}`}>{getLabel(33564, "查看")}</a>
        );
      }
    });
    return columns;
  };

  // 区间改变事件
  handleSalaryRangePickerChange = (range) => {
    const isNull = _.every(range, it => !!it);
    this.setState({
      salaryRange: isNull ? range.map(item => moment(item).format("YYYY-MM")) : []
    }, () => {
      const { mySalaryStore: { mySalaryBillList } } = this.props;
      if (!_.isEmpty(range) && isNull) {
        mySalaryBillList(this.state.salaryRange, this.pageInfo);
      } else {
        mySalaryBillList([], this.pageInfo);
      }
    });
  };


  handleTabChange = (selectedKey) => {
    if (selectedKey === "2") {
      const { mySalaryStore: { initRecordData } } = this.props;
      initRecordData();
    }
  };

  handlePageChange = () => {
    const { mySalaryStore: { mySalaryBillList } } = this.props;
    mySalaryBillList(this.state.salaryRange, this.pageInfo);
  };

  handleHistoryPageChange = () => {
    const { mySalaryStore: { getRecordList } } = this.props;
    getRecordList(this.historyPageInfo);
  };

  render() {
    const { mySalaryStore } = this.props;
    const { loading, hasRight, setMySalaryBill } = mySalaryStore;
    const {
      myBillDataSource,
      recordListColumns,
      recordListDataSource,
      recordListPageInfo,
      myBillPageInfo
    } = mySalaryStore;
    const { salaryBillVisible, salaryInfoId, salaryRange } = this.state;

    const topTab = [
      {
        title: "工资单",
        viewcondition: "0"
      },
      {
        title: "调薪记录",
        viewcondition: "2"
      }
    ];
    const renderSearchOperationItem = () => {
      if (this.state.selectedKey === "0") {
        return (<div><span className="tabSearchLabel">薪资所属月：</span>

          <RangePicker format="YYYY-MM"
                       value={salaryRange}
                       onChange={(value) => this.handleSalaryRangePickerChange(value)}
          />
        </div>);
      } else {
        return (<div></div>);
      }
    };
    return (
      <div className="mySalaryBenefitsWrapper">
        <WeaTop
          title="我的薪资福利" // 文字
          icon={<i className="icon-coms-fa"/>} // 左侧图标
          iconBgcolor="#F14A2D" // 左侧图标背景色
          showDropIcon={false} // 是否显示下拉按钮
        >
          <CustomTab
            topTab={topTab}
            searchOperationItem={renderSearchOperationItem()}
            onChange={(v) => {
              this.handleTabChange(v);
              this.setState({ selectedKey: v });
            }}
          />
          <div className="tableWrapper">
            <WeaNewScroll height="100%">
              {
                this.state.selectedKey === "0" &&
                <CustomPaginationTable
                  loading={loading}
                  columns={this.getColumns()}
                  dataSource={myBillDataSource ? myBillDataSource : []}
                  total={myBillPageInfo.total}
                  current={myBillPageInfo.pageNum}
                  pageSize={this.pageInfo.pageSize}
                  onPageChange={(value) => {
                    this.pageInfo.current = value;
                    this.handlePageChange();
                  }}
                  onShowSizeChange={(current, pageSize) => {
                    this.pageInfo = { current, pageSize };
                    this.handlePageChange();
                  }}
                />
              }
              {
                this.state.selectedKey === "2" &&
                <Authority ecId={`${this && this.props && this.props.ecId || ""}_Authority@lulowc`}
                           store={this.props.mySalaryStore}>
                  <CustomPaginationTable
                    columns={recordListColumns}
                    dataSource={recordListDataSource}
                    total={recordListPageInfo.total}
                    current={recordListPageInfo.pageNum}
                    pageSize={this.historyPageInfo.pageSize}
                    onPageChange={(value) => {
                      this.historyPageInfo.current = value;
                      this.handleHistoryPageChange();
                    }}
                    onShowSizeChange={(current, pageSize) => {
                      this.historyPageInfo = { current, pageSize };
                      this.handleHistoryPageChange();
                    }}
                  />
                </Authority>
              }
            </WeaNewScroll>
          </div>
        </WeaTop>
        {
          salaryBillVisible && <PayrollModal
            visible={salaryBillVisible}
            id={salaryInfoId}
            onCancel={() => {
              this.setState({ salaryBillVisible: false, salaryInfoId: "" }, () => {
                setMySalaryBill({});
              });
            }}
          />
        }
      </div>
    );
  }
}