feature/2.9.42311.02-我的薪资福利移动端列表查看

pc4mobx/hrmSalary/index.js

@@ -1,6 +1,7 @@
 import React from "react";
 import Route from "react-router/lib/Route";
 import { WeaLocaleProvider } from "ecCom";
+import MySalaryMobile from "./pages/mySalaryMobile";
 import MySalary from "./pages/mySalary";
 import Programme from "./pages/socialSecurityBenefits/programme";
 import Archives from "./pages/socialSecurityBenefits/archives";
@@ -59,6 +60,7 @@ const Home = (props) => props.children;
 const SocialSecurityBenefits = (props) => props.children;
 const DataAcquisition = (props) => props.children;
 
+// mySalaryMobile  我的薪资福利-移动端
 // mySalary  我的薪资福利
 // mySalaryView  我的薪资福利-查看工资单
 // socialSecurityBenefits  社保福利
@@ -102,6 +104,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,101 @@
+/*
+ * 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 = {
+      yearList: {}, monthList: {}
+    };
+  }
+
+  componentWillReceiveProps(nextProps, nextContext) {
+    if (nextProps.visible !== this.props.visible && nextProps.visible) {
+      this.setState({
+        yearList: {
+          list: YearFn(Number(moment().subtract(100, "year").format("YYYY")), Number(moment().add(100, "year").format("YYYY"))),
+          defaultValue: nextProps[nextProps.type].defaultValueYear,
+          displayValue(name) {
+            return name;
+          }
+        },
+        monthList: {
+          list: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
+          defaultValue: nextProps.type === "salaryStart" ? "0" : nextProps[nextProps.type].defaultValueMonth,
+          displayValue(name) {
+            return name;
+          }
+        }
+      }, () => {
+        console.log(this.state);
+      });
+    }
+  }
+
+  handleChangeYear = (year) => {
+    this.setState({
+      yearList: {
+        ...this.state.yearList,
+        defaultValue: year
+      }
+    }, () => this.props.onChange(this.props.type, "defaultValueYear", year));
+  };
+  handleChangeMonth = (month) => {
+    this.setState({
+      monthList: {
+        ...this.state.monthList,
+        defaultValue: ""
+      }
+    }, () => this.props.onChange(this.props.type, "defaultValueMonth", month));
+  };
+
+  render() {
+    const { yearList, monthList } = this.state;
+    return (
+      <div className="ui-picker-address">
+        <Popup {...this.props}>
+          <Picker
+            onChange={this.handleChangeYear}
+            data={{
+              list: YearFn(Number(moment().subtract(100, "year").format("YYYY")), Number(moment().add(100, "year").format("YYYY"))),
+              defaultValue: "2023",
+              displayValue(name) {
+                return name;
+              }
+            }}
+          />
+          <Picker
+            onChange={this.handleChangeMonth}
+            data={{
+              list: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
+              defaultValue: "2",
+              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,36 @@
+/*
+ * 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 } = this.props;
+    return (
+      <ul className="payrollList-wrapper">
+        {
+          _.map(dataSource, it => {
+            return <li>
+              <div className="salaryMonth"><span>{moment(it.salaryYearMonth).format("YYYY-MM")}</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>;
+          })
+        }
+      </ul>
+    );
+  }
+}
+
+export default Index;

pc4mobx/hrmSalary/pages/mySalaryMobile/index.js

@@ -0,0 +1,144 @@
+/*
+ * Author: 黎永顺
+ * name: 我的薪资福利-移动端列表
+ * Description:
+ * Date: 2023/11/10
+ */
+import React, { Component } from "react";
+import { WeaLocaleProvider, WeaTab } from "ecCom";
+import { message } from "antd";
+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")],
+      salaryStart: {
+        visible: false, type: "",
+        salaryStart: {
+          defaultValueYear: moment().year().toString(),
+          defaultValueMonth: (moment().startOf("year").month() + 1).toString()
+        }
+      },
+      salaryEnd: {
+        visible: false,
+        salaryEnd: {
+          defaultValueYear: moment().year().toString(),
+          defaultValueMonth: (moment().month() + 1).toString()
+        }
+      }
+    };
+  }
+
+  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 } = data;
+        const { pageNum: current, pageSize, total } = pageInfo;
+        this.setState({
+          dataSource, pageInfo: { ...pageInfo, current, pageSize, total }
+        });
+      }
+    }).catch(() => this.setState({ loading: false }));
+  };
+  handleLoadMore = () => {
+    // 为测试效果临时使用 message
+    message.info("触底了~");
+  };
+  isTouchBottom = (handler) => {
+    const div = document.getElementById("mySalaryMobile");
+    if ((div.scrollHeight - div.scrollTop) === div.clientHeight) handler();
+  };
+  handleChange = (type, key, val) => {
+    this.setState({
+      [type]: {
+        ...this.state[type],
+        [type]: {
+          ...this.state[type][type],
+          [key]: val
+        }
+      }
+    });
+  };
+  handleCancel = () => {
+    this.setState({
+      salaryStart: {
+        visible: false, type: "",
+        salaryStart: {
+          defaultValueYear: moment().year().toString(),
+          defaultValueMonth: (moment().startOf("year").month() + 1).toString()
+        }
+      },
+      salaryEnd: {
+        visible: false,
+        salaryEnd: {
+          defaultValueYear: moment().year().toString(),
+          defaultValueMonth: (moment().month() + 1).toString()
+        }
+      }
+    });
+  };
+  handleConfirm = () => {
+    this.handleCancel();
+  };
+
+  render() {
+    const { salaryStart, salaryEnd, salaryYearMonth, dataSource } = this.state;
+    const [salaryStartYearMonth, salaryEndYearMonth] = salaryYearMonth;
+    const mobilePorps = { ...salaryStart, ...salaryEnd, visible: salaryEnd.visible || salaryStart.visible };
+    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">
+          <span className="date" onClick={() => this.setState({
+            salaryStart: { ...salaryStart, visible: true, type: "salaryStart" }
+          })}>{salaryStartYearMonth}</span>
+          <span className="to">{getLabel(15322, "至")}</span>
+          <span className="date" onClick={() => this.setState({
+            salaryEnd: { ...salaryEnd, visible: true, type: "salaryEnd" }
+          })}>{salaryEndYearMonth}</span>
+        </div>
+        <PayrollList dataSource={dataSource}/>
+        <MobileDatePicker
+          {...mobilePorps}
+          onCancel={this.handleCancel}
+          onConfirm={this.handleConfirm}
+          onChange={this.handleChange}
+        />
+      </div>
+    );
+  }
+}
+
+export default Index;

pc4mobx/hrmSalary/pages/mySalaryMobile/index.less

@@ -0,0 +1,101 @@
+.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;
+
+    .date {
+      color: #333;
+    }
+
+    .to {
+      margin: 0 10px;
+      color: #999;
+    }
+  }
+
+  .ui-picker-address {
+    .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 {
+    display: flex;
+    flex-direction: column;
+    border-radius: 5px;
+    background: #FFF;
+    margin: 0 8px 8px;
+
+    .salaryMonth {
+      display: flex;
+      padding: 10px;
+      border-bottom: 1px solid #e5e5e5;
+
+      & > span:first-child {
+        color: #2db7f5;
+        font-size: 14px;
+      }
+    }
+
+    .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;
+    }
+  }
+}