Merge branch 'feature/2.9.42311.02-我的薪资福利移动端列表查看' into release/2.9.9.2312.01

# Conflicts:
#	pc4mobx/hrmSalary/index.js

pc4mobx/hrmSalary/index.js

@@ -1,7 +1,7 @@
 import React from "react";
 import Route from "react-router/lib/Route";
 import { WeaLocaleProvider } from "ecCom";
-// import MySalary from "./pages/mySalary";
+import MySalaryMobile from "./pages/mySalaryMobile";
 import MySalary from "./pages/mySalaryBenefits";
 import Programme from "./pages/socialSecurityBenefits/programme";
 import Archives from "./pages/socialSecurityBenefits/archives";
@@ -62,6 +62,7 @@ const Home = (props) => props.children;
 const SocialSecurityBenefits = (props) => props.children;
 const DataAcquisition = (props) => props.children;
 
+// mySalaryMobile  我的薪资福利-移动端
 // mySalary  我的薪资福利
 // mySalaryView  我的薪资福利-查看工资单
 // socialSecurityBenefits  社保福利
@@ -105,6 +106,7 @@ const Routes = (
     path="hrmSalary"
     onEnter={getLocaleLabel}
     component={Home}>
+    <Route key="mySalaryMobile" path="mySalaryMobile" component={MySalaryMobile}/>
     <Route key="mySalary" path="mySalary" component={MySalary}/>
     <Route key="mySalaryView" path="mySalary/:salaryInfoId" component={MySalaryView}/>
     <Route

pc4mobx/hrmSalary/pages/mySalaryMobile/components/mobileDatePicker/index.js

@@ -0,0 +1,90 @@
+/*
+ * Author: 黎永顺
+ * name: 移动端页面-日期选择组件
+ * Description:
+ * Date: 2023/11/10
+ */
+import React, { Component } from "react";
+import { WeaLocaleProvider } from "ecCom";
+import moment from "moment";
+import { Picker, Popup } from "spring-picker";
+import "spring-picker/lib/style.css";
+
+const getLabel = WeaLocaleProvider.getLabel;
+
+class Index extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      visible: false,
+      salaryYearMonth: { year: "", month: "" }
+    };
+  }
+
+  componentWillReceiveProps(nextProps, nextContext) {
+    const { value } = nextProps;
+    const [year, month] = value.split("-");
+    this.setState({
+      salaryYearMonth: { year, month }
+    });
+  }
+
+  handleChangeYear = (year) => {
+    this.setState({ salaryYearMonth: { ...this.state.salaryYearMonth, year } });
+  };
+  handleChangeMonth = (month) => {
+
+    this.setState({ salaryYearMonth: { ...this.state.salaryYearMonth, month: parseInt(month).toString() } });
+  };
+  handleCancel = () => {
+    this.setState({ visible: false });
+  };
+  handleConfirm = () => {
+    const { year, month } = this.state.salaryYearMonth;
+    this.setState({ visible: false }, () => {
+      this.props.onChange(moment(new Date(`${year}- ${month}`)).format("YYYY-MM"));
+    });
+  };
+
+  render() {
+    const { value } = this.props;
+    const { visible } = this.state;
+    const [year, month] = value.split("-");
+    return (
+      <div className="ui-picker-address">
+        <span className="date" onClick={() => this.setState({ visible: true })}>{value}</span>
+        <Popup visible={visible} onCancel={this.handleCancel} onConfirm={this.handleConfirm}>
+          <Picker
+            onChange={this.handleChangeYear}
+            data={{
+              list: YearFn(Number(moment().subtract(100, "year").format("YYYY")), Number(moment().add(100, "year").format("YYYY"))),
+              defaultValue: year,
+              displayValue(name) {
+                return name;
+              }
+            }}
+          />
+          <Picker
+            onChange={this.handleChangeMonth}
+            data={{
+              list: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+              defaultValue: `${parseInt(month)}月`,
+              displayValue(name) {
+                return name;
+              }
+            }}
+          />
+        </Popup>
+      </div>
+    );
+  }
+}
+
+export default Index;
+const YearFn = (lowEnd, highEnd) => {
+  let list = [];
+  for (let i = lowEnd; i <= highEnd; i++) {
+    list.push(i.toString());
+  }
+  return list;
+};

pc4mobx/hrmSalary/pages/mySalaryMobile/components/payrollList/index.js

@@ -0,0 +1,45 @@
+/*
+ * Author: 黎永顺
+ * name: 我的薪资福利-移动端列表数据
+ * Description:
+ * Date: 2023/11/13
+ */
+import React, { Component } from "react";
+import { WeaLocaleProvider } from "ecCom";
+import moment from "moment";
+
+const getLabel = WeaLocaleProvider.getLabel;
+
+class Index extends Component {
+
+  render() {
+    const { dataSource, isMore, loading } = this.props;
+    return (
+      <ul className="payrollList-wrapper">
+        {
+          _.map(dataSource, it => {
+            return <li className="item">
+              <div className="salaryMonth">
+                <span>{moment(it.salaryYearMonth).format("YYYY-MM")}</span>
+                <span>{`${getLabel(15323, "第")}${it.acctTimes}${getLabel(18929, "次")}`}</span>
+              </div>
+              <div className="sendTime">
+                <span>{getLabel(111, "发放时间")}</span>
+                <span>{moment(it.sendTime).format("YYYY-MM")}</span>
+              </div>
+              <a href="javascript:void(0);">{`${getLabel(33564, "查看")}>`}</a>
+            </li>;
+          })
+        }
+        {
+          loading && <li className="more">{getLabel(31230, "加载中")}</li>
+        }
+        {
+          !isMore && <li className="empty">{getLabel(83553, "暂无数据")}</li>
+        }
+      </ul>
+    );
+  }
+}
+
+export default Index;

pc4mobx/hrmSalary/pages/mySalaryMobile/index.js

@@ -0,0 +1,101 @@
+/*
+ * 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().startOf("year").format("YYYY-MM"), moment().startOf("month").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 = () => {
+    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: [...this.state.dataSource, ...dataSource],
+          pageInfo: { ...pageInfo, current, pageSize, total }
+        }, () => this.setState({ isMore: this.state.dataSource.length < total }));
+      }
+    }).catch(() => this.setState({ loading: false }));
+  };
+  handleLoadMore = () => {
+    // 为测试效果临时使用 message
+    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({
+      salaryYearMonth: type === "salaryStartYearMonth" ? [val, salaryEndYearMonth] : [salaryStartYearMonth, val]
+    }, () => this.getMySalaryBillList());
+  };
+
+  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;

pc4mobx/hrmSalary/pages/mySalaryMobile/index.less

@@ -0,0 +1,117 @@
+.salary-mobile-list-wrapper {
+  height: 100%;
+  overflow-y: auto;
+  background: #f6f6f6;
+  position: relative;
+
+  .salary-mobile-list-tab {
+    background: #fff;
+    position: fixed;
+    width: 100%;
+  }
+
+  .wea-tab {
+    display: flex;
+    justify-content: center;
+  }
+
+  .searchWrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    padding: 10px 0;
+    background: #fff;
+    height: 40px;
+    position: fixed;
+    top: 47px;
+
+    .to {
+      margin: 0 10px;
+      color: #999;
+    }
+  }
+
+  .ui-picker-address {
+    .date {
+      color: #333;
+    }
+
+    .ui-popup-title {
+      font-size: 12px !important;
+    }
+
+    .ui-popup-content {
+      display: flex;
+
+      .ui-picker-wrapper {
+        flex: 1;
+
+        .ui-picker-item {
+          font-size: 12px !important;
+        }
+      }
+    }
+  }
+}
+
+.payrollList-wrapper {
+  padding: 8px 0;
+  margin-top: 87px;
+
+  li.empty, li.more {
+    text-align: center;
+    color: #999;
+  }
+
+  li.item {
+    display: flex;
+    flex-direction: column;
+    border-radius: 5px;
+    background: #FFF;
+    margin: 0 8px 8px;
+
+    .salaryMonth {
+      display: flex;
+      padding: 10px;
+      justify-content: space-between;
+      align-items: center;
+      border-bottom: 1px solid #e5e5e5;
+
+      & > span:first-child {
+        color: #2db7f5;
+        font-size: 14px;
+      }
+
+      & > span:last-child {
+        background: rgba(45, 183, 245, .1);
+        color: #2db7f5;
+        font-size: 12px;
+        display: inline-block;
+        padding: 4px;
+        transform: scale(.8);
+      }
+    }
+
+    .sendTime {
+      padding: 10px;
+
+      & > span:first-child {
+        color: #999;
+        margin-right: 80px;
+      }
+
+      & > span:last-child {
+        color: #333;
+      }
+    }
+
+    a {
+      color: #2db7f5;
+      display: inline-block;
+      width: 100%;
+      text-align: center;
+      padding-bottom: 10px;
+    }
+  }
+}