104 lines
3.8 KiB
JavaScript
104 lines
3.8 KiB
JavaScript
/*
|
|
* Author: 黎永顺
|
|
* name: 我的薪资福利-移动端列表
|
|
* Description:
|
|
* Date: 2023/11/10
|
|
*/
|
|
import React, { Component } from "react";
|
|
import { WeaLocaleProvider, WeaTab } from "ecCom";
|
|
import moment from "moment";
|
|
import MobileDatePicker from "./components/mobileDatePicker";
|
|
import PayrollList from "./components/payrollList";
|
|
import { mySalaryBillList } from "../../apis/mySalaryBenefits";
|
|
import "./index.less";
|
|
|
|
const getLabel = WeaLocaleProvider.getLabel;
|
|
|
|
class Index extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
dataSource: [], loading: false, pageInfo: { current: 1, pageSize: 10, total: 0 },
|
|
salaryYearMonth: [
|
|
moment(new Date()).subtract(1, 'year').startOf("year").format("YYYY-MM"),
|
|
moment().endOf("year").format("YYYY-MM")],
|
|
isMore: true //是否还有更多数据
|
|
};
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.getMySalaryBillList();
|
|
const mySalaryMobile = document.getElementById("mySalaryMobile");
|
|
mySalaryMobile.addEventListener("scroll", this.handleScroll, true);
|
|
}
|
|
|
|
handleScroll = () => {
|
|
this.isTouchBottom(this.handleLoadMore);
|
|
};
|
|
|
|
componentWillUnmount() {
|
|
const mySalaryMobile = document.getElementById("mySalaryMobile");
|
|
mySalaryMobile.removeEventListener("scroll", this.handleScroll, true);
|
|
}
|
|
|
|
getMySalaryBillList = (type) => {
|
|
const { salaryYearMonth, pageInfo } = this.state;
|
|
this.setState({ loading: true });
|
|
mySalaryBillList({ salaryYearMonth, ...pageInfo }).then(({ status, data }) => {
|
|
this.setState({ loading: false });
|
|
if (status) {
|
|
const { datas: dataSource, pageInfo: pageResult } = data;
|
|
const { pageNum: current, pageSize, total } = pageResult;
|
|
this.setState({
|
|
dataSource: type ? dataSource : [...this.state.dataSource, ...dataSource],
|
|
pageInfo: { ...pageInfo, current, pageSize, total }
|
|
}, () => this.setState({ isMore: this.state.dataSource.length < total }));
|
|
}
|
|
}).catch(() => this.setState({ loading: false }));
|
|
};
|
|
handleLoadMore = () => {
|
|
const { pageInfo, isMore } = this.state;
|
|
if (!isMore) return;
|
|
const { current } = pageInfo;
|
|
this.setState({
|
|
pageInfo: { ...pageInfo, current: current + 1 }
|
|
}, () => this.getMySalaryBillList());
|
|
};
|
|
isTouchBottom = (handler) => {
|
|
const div = document.getElementById("mySalaryMobile");
|
|
if ((div.scrollHeight - div.scrollTop) === div.clientHeight) handler();
|
|
};
|
|
handleChange = (type, val) => {
|
|
const { salaryYearMonth } = this.state;
|
|
const [salaryStartYearMonth, salaryEndYearMonth] = salaryYearMonth;
|
|
this.setState({
|
|
pageInfo: { ...this.state.pageInfo, current: 1 },
|
|
salaryYearMonth: type === "salaryStartYearMonth" ? [val, salaryEndYearMonth] : [salaryStartYearMonth, val]
|
|
}, () => this.getMySalaryBillList(true));
|
|
};
|
|
|
|
render() {
|
|
const { salaryYearMonth, dataSource, isMore, loading } = this.state;
|
|
const [salaryStartYearMonth, salaryEndYearMonth] = salaryYearMonth;
|
|
return (
|
|
<div id="mySalaryMobile" className="salary-mobile-list-wrapper">
|
|
<div className="salary-mobile-list-tab">
|
|
<WeaTab
|
|
datas={[{ title: getLabel(111, "工资单"), viewcondition: "Payroll" }]}
|
|
keyParam="viewcondition" selectedKey="Payroll"
|
|
/>
|
|
</div>
|
|
<div className="searchWrapper">
|
|
<MobileDatePicker value={salaryStartYearMonth}
|
|
onChange={(v) => this.handleChange("salaryStartYearMonth", v)}/>
|
|
<span className="to">{getLabel(15322, "至")}</span>
|
|
<MobileDatePicker value={salaryEndYearMonth} onChange={(v) => this.handleChange("salaryEndYearMonth", v)}/>
|
|
</div>
|
|
<PayrollList dataSource={dataSource} isMore={isMore} loading={loading}/>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default Index;
|