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

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

@@ -16,60 +16,49 @@ class Index extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      yearList: {}, monthList: {}
+      visible: false,
+      salaryYearMonth: { year: "", month: "" }
     };
   }
 
   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);
-      });
-    }
+    const { value } = nextProps;
+    const [year, month] = value.split("-");
+    this.setState({
+      salaryYearMonth: { year, month }
+    });
   }
 
   handleChangeYear = (year) => {
-    this.setState({
-      yearList: {
-        ...this.state.yearList,
-        defaultValue: year
-      }
-    }, () => this.props.onChange(this.props.type, "defaultValueYear", year));
+    this.setState({ salaryYearMonth: { ...this.state.salaryYearMonth, year } });
   };
   handleChangeMonth = (month) => {
-    this.setState({
-      monthList: {
-        ...this.state.monthList,
-        defaultValue: ""
-      }
-    }, () => this.props.onChange(this.props.type, "defaultValueMonth", 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 { yearList, monthList } = this.state;
+    const { value } = this.props;
+    const { visible } = this.state;
+    const [year, month] = value.split("-");
     return (
       <div className="ui-picker-address">
-        <Popup {...this.props}>
+        <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: "2023",
+              defaultValue: year,
               displayValue(name) {
                 return name;
               }
@@ -78,8 +67,8 @@ class Index extends Component {
           <Picker
             onChange={this.handleChangeMonth}
             data={{
-              list: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
-              defaultValue: "2",
+              list: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+              defaultValue: `${parseInt(month)}月`,
               displayValue(name) {
                 return name;
               }

pc4mobx/hrmSalary/pages/mySalaryMobile/index.js

@@ -20,21 +20,7 @@ class Index extends Component {
     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()
-        }
-      }
+      salaryYearMonth: [moment().startOf("year").format("YYYY-MM"), moment().startOf("month").format("YYYY-MM")]
     };
   }
 
@@ -59,8 +45,8 @@ class Index extends Component {
     mySalaryBillList({ salaryYearMonth, ...pageInfo }).then(({ status, data }) => {
       this.setState({ loading: false });
       if (status) {
-        const { datas: dataSource, pageInfo } = data;
-        const { pageNum: current, pageSize, total } = pageInfo;
+        const { datas: dataSource, pageInfo: pageResult } = data;
+        const { pageNum: current, pageSize, total } = pageResult;
         this.setState({
           dataSource, pageInfo: { ...pageInfo, current, pageSize, total }
         });
@@ -75,43 +61,17 @@ class Index extends Component {
     const div = document.getElementById("mySalaryMobile");
     if ((div.scrollHeight - div.scrollTop) === div.clientHeight) handler();
   };
-  handleChange = (type, key, val) => {
+  handleChange = (type, val) => {
+    const { salaryYearMonth } = this.state;
+    const [salaryStartYearMonth, salaryEndYearMonth] = salaryYearMonth;
     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();
+      salaryYearMonth: type === "salaryStartYearMonth" ? [val, salaryEndYearMonth] : [salaryStartYearMonth, val]
+    }, () => this.getMySalaryBillList());
   };
 
   render() {
-    const { salaryStart, salaryEnd, salaryYearMonth, dataSource } = this.state;
+    const { 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">
@@ -121,21 +81,12 @@ class Index extends Component {
           />
         </div>
         <div className="searchWrapper">
-          <span className="date" onClick={() => this.setState({
-            salaryStart: { ...salaryStart, visible: true, type: "salaryStart" }
-          })}>{salaryStartYearMonth}</span>
+          <MobileDatePicker value={salaryStartYearMonth}
+                            onChange={(v) => this.handleChange("salaryStartYearMonth", v)}/>
           <span className="to">{getLabel(15322, "至")}</span>
-          <span className="date" onClick={() => this.setState({
-            salaryEnd: { ...salaryEnd, visible: true, type: "salaryEnd" }
-          })}>{salaryEndYearMonth}</span>
+          <MobileDatePicker value={salaryEndYearMonth} onChange={(v) => this.handleChange("salaryEndYearMonth", v)}/>
         </div>
         <PayrollList dataSource={dataSource}/>
-        <MobileDatePicker
-          {...mobilePorps}
-          onCancel={this.handleCancel}
-          onConfirm={this.handleConfirm}
-          onChange={this.handleChange}
-        />
       </div>
     );
   }

pc4mobx/hrmSalary/pages/mySalaryMobile/index.less

@@ -26,10 +26,6 @@
     position: fixed;
     top: 47px;
 
-    .date {
-      color: #333;
-    }
-
     .to {
       margin: 0 10px;
       color: #999;
@@ -37,6 +33,10 @@
   }
 
   .ui-picker-address {
+    .date {
+      color: #333;
+    }
+
     .ui-popup-title {
       font-size: 12px !important;
     }