hotfix/2.9.42311.02-我的薪资福利页面重构

pc4mobx/hrmSalary/index.js

@@ -1,7 +1,8 @@
 import React from "react";
 import Route from "react-router/lib/Route";
 import { WeaLocaleProvider } from "ecCom";
-import MySalary from "./pages/mySalary";
+// import MySalary from "./pages/mySalary";
+import MySalary from "./pages/mySalaryBenefits";
 import Programme from "./pages/socialSecurityBenefits/programme";
 import Archives from "./pages/socialSecurityBenefits/archives";
 import StandingBook from "./pages/socialSecurityBenefits/standingBook";

pc4mobx/hrmSalary/pages/mySalaryBenefits/components/SalaryAdjustmentRecords/index.js

@@ -0,0 +1,76 @@
+/*
+ * Author: 黎永顺
+ * name: 调薪记录
+ * Description:
+ * Date: 2023/11/13
+ */
+import React, { Component } from "react";
+import { inject, observer } from "mobx-react";
+import { WeaLocaleProvider, WeaTable } from "ecCom";
+import Authority from "../../../mySalary/authority";
+import { recordList } from "../../../../apis/mySalaryBenefits";
+
+const getLabel = WeaLocaleProvider.getLabel;
+
+@inject("mySalaryStore")
+@observer
+class Index extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      dataSource: [], columns: [], pageInfo: { current: 1, pageSize: 10, total: 0 },
+      loading: false
+    };
+  }
+
+  componentDidMount() {
+    const { mySalaryStore: { initRecordData } } = this.props;
+    initRecordData(this.getRecordList);
+  }
+
+  getRecordList = () => {
+    const { pageInfo } = this.state;
+    this.setState({ loading: true });
+    recordList({ ...pageInfo }).then(({ status, data }) => {
+      this.setState({ loading: false });
+      if (status) {
+        const { columns, list: dataSource, pageNum: current, pageSize, total } = data;
+        this.setState({
+          dataSource, pageInfo: { ...pageInfo, current, pageSize, total },
+          columns: _.map(columns, it => ({ ...it, width: 150 }))
+        });
+      }
+    }).catch(() => this.setState({ loading: false }));
+  };
+
+  render() {
+    const { dataSource, loading, columns, pageInfo } = this.state;
+    const pagination = {
+      ...pageInfo,
+      showTotal: total => `${getLabel(18609, "共")} ${total} ${getLabel(18256, "条")}`,
+      showQuickJumper: true,
+      showSizeChanger: true,
+      pageSizeOptions: ["10", "20", "50", "100"],
+      onShowSizeChange: (current, pageSize) => {
+        this.setState({
+          pageInfo: { ...pageInfo, current, pageSize }
+        }, () => this.getRecordList());
+      },
+      onChange: current => {
+        this.setState({
+          pageInfo: { ...pageInfo, current }
+        }, () => this.getRecordList());
+      }
+    };
+    return (
+      <Authority ecId={`${this && this.props && this.props.ecId || ""}_Authority@lulowc`}
+                 store={this.props.mySalaryStore}>
+        <WeaTable rowKey="id" dataSource={dataSource} pagination={pagination}
+                  loading={loading} columns={columns} scroll={{ x: 1200, y: `calc(100vh - 166px)` }}
+        />
+      </Authority>
+    );
+  }
+}
+
+export default Index;

pc4mobx/hrmSalary/pages/mySalaryBenefits/components/payrollTable/index.js

@@ -0,0 +1,92 @@
+/*
+ * Author: 黎永顺
+ * name: 工资单
+ * Description:
+ * Date: 2023/11/13
+ */
+import React, { Component } from "react";
+import { WeaLocaleProvider, WeaTable } from "ecCom";
+import { mySalaryBillList } from "../../../../apis/mySalaryBenefits";
+import moment from "moment";
+
+const getLabel = WeaLocaleProvider.getLabel;
+
+class Index extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      juniorMapList: [], dataSource: [], columns: [], pageInfo: { current: 1, pageSize: 10, total: 0 },
+      loading: false, employeeId: ""
+    };
+  }
+
+  componentDidMount() {
+    this.getMySalaryBillList(this.props);
+  }
+
+  componentWillReceiveProps(nextProps, nextContext) {
+    if (nextProps.salaryYearMonth !== this.props.salaryYearMonth) this.getMySalaryBillList(nextProps);
+  }
+
+  getMySalaryBillList = (props) => {
+    this.setState({ loading: true });
+    const { pageInfo, employeeId } = this.state;
+    const { salaryYearMonth } = props;
+    mySalaryBillList({ salaryYearMonth, employeeId, ...pageInfo }).then(({ status, data }) => {
+      this.setState({ loading: false });
+      if (status) {
+        const { columns, datas: dataSource, pageInfo: { pageNum: current, pageSize, total } } = data;
+        this.setState({
+          dataSource, pageInfo: { ...pageInfo, current, pageSize, total },
+          columns: _.map(columns, it => {
+            if (it.column === "salaryYearMonth" || it.column === "sendTime") {
+              return {
+                dataIndex: it.column, title: it.text, width: it.width,
+                render: (__, record) => (<span>{moment(record[it["column"]]).format("YYYY-MM")}</span>)
+              };
+            }
+            return {
+              dataIndex: it.column, title: it.text, width: it.width
+            };
+          })
+        });
+      }
+    }).catch(() => this.setState({ loading: false }));
+  };
+
+  render() {
+    const { juniorMapList, dataSource, loading, columns, pageInfo } = this.state;
+    const pagination = {
+      ...pageInfo,
+      showTotal: total => `${getLabel(18609, "共")} ${total} ${getLabel(18256, "条")}`,
+      showQuickJumper: true,
+      showSizeChanger: true,
+      pageSizeOptions: ["10", "20", "50", "100"],
+      onShowSizeChange: (current, pageSize) => {
+        this.setState({
+          pageInfo: { ...pageInfo, current, pageSize }
+        }, () => this.getMySalaryBillList(this.props));
+      },
+      onChange: current => {
+        this.setState({
+          pageInfo: { ...pageInfo, current }
+        }, () => this.getMySalaryBillList(this.props));
+      }
+    };
+    return (
+      <WeaTable rowKey="id" dataSource={dataSource} pagination={pagination}
+                scroll={{ x: 1200, y: `calc(100vh - 166px)` }}
+                loading={loading} columns={[...columns, {
+        dataIndex: "options",
+        title: getLabel(30585, "操作"),
+        width: 120,
+        render: (_, record) => (<a
+          href={`${window.location.origin}/spa/hrmSalary/static/index.html#/main/hrmSalary/mySalary/${record.id}`}
+          target="_blank">{getLabel(33564, "查看")}</a>)
+      }]}
+      />
+    );
+  }
+}
+
+export default Index;

pc4mobx/hrmSalary/pages/mySalaryBenefits/index.js

@@ -0,0 +1,67 @@
+/*
+ * Author: 黎永顺
+ * name: 我的薪资福利
+ * Description:
+ * Date: 2023/11/13
+ */
+import React, { Component } from "react";
+import { WeaLocaleProvider, WeaReqTop } from "ecCom";
+import Payroll from "./components/payrollTable";
+import SalaryAdjustmentRecords from "./components/SalaryAdjustmentRecords";
+import { MonthRangePicker } from "../reportView/components/statisticalMicroSettingsSlide";
+import moment from "moment";
+import "./index.less";
+
+const getLabel = WeaLocaleProvider.getLabel;
+
+class Index extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      selectedKey: "1", salaryYearMonth: [moment().startOf("year").format("YYYY-MM"), moment().format("YYYY-MM")]
+    };
+  }
+
+  renderContent = () => {
+    const { selectedKey, salaryYearMonth } = this.state;
+    let Dom = null;
+    switch (selectedKey) {
+      case "1":
+        Dom = <Payroll salaryYearMonth={salaryYearMonth}/>;
+        break;
+      case "2":
+        Dom = <SalaryAdjustmentRecords/>;
+        break;
+      default:
+        break;
+    }
+    return Dom;
+  };
+
+  render() {
+    const { selectedKey, salaryYearMonth } = this.state;
+    const tabs = [
+      { key: "1", title: getLabel(111, "工资单") },
+      { key: "2", title: getLabel(543150, "调薪记录") }
+    ];
+    const btns = [
+      <div className="flex-salary">
+        <div className="mysalary-search-title">{getLabel(542604, "薪资所属月")}</div>
+        <MonthRangePicker dateRange={salaryYearMonth} viewAttr={2}
+                          onChange={v => this.setState({ salaryYearMonth: v })}/>
+      </div>
+    ];
+    return (
+      <WeaReqTop
+        title={getLabel(537998, "我的薪资福利")} icon={<i className="icon-coms-fa"/>}
+        iconBgcolor="#F14A2D" tabDatas={tabs} className="mySalary_wrapper"
+        buttons={selectedKey === "1" ? btns : []} buttonSpace={10} selectedKey={selectedKey}
+        onChange={selectedKey => this.setState({ selectedKey })}
+      >
+        {this.renderContent()}
+      </WeaReqTop>
+    );
+  }
+}
+
+export default Index;

pc4mobx/hrmSalary/pages/mySalaryBenefits/index.less

@@ -0,0 +1,19 @@
+.mySalary_wrapper {
+  .wea-transfer-list-wrapper {
+    border: none;
+  }
+
+  .flex-salary {
+    display: flex;
+    align-items: center;
+    margin-right: 16px;
+
+    .mysalary-search-title {
+      margin-right: 8px;
+    }
+  }
+
+  .wea-new-table {
+    background: #fff;
+  }
+}

pc4mobx/hrmSalary/stores/mySalary.js

@@ -218,28 +218,28 @@ export class MySalaryStore {
     });
   };
 
-  @action initRecordData = async (payload) => {
+  @action initRecordData = async (callback) => {
     this.clear();
     //1.check is need second verify
     if (window.doCheckSecondaryVerify4ec) {
       window.doCheckSecondaryVerify4ec({ mouldCode: "HRM", itemCode: "SALARY" }, (data) => this.getRecordData({
-        ...data, payload
+        ...data, callback
       }));
     } else {
-      //4.loaddata
-      this.getRecordData({ status: "1", token: "", payload });
+      this.getRecordData({ status: "1", token: "", callback });
     }
   };
 
   @action
   getRecordData = async (params = {}) => {
     if (_.isEmpty(params)) return;
-    const { status, payload, token } = params;
+    const { status, callback, token } = params;
     if (status == "1") {
       // Object.assign(this._reqParams, { token });
       // this.getFormData({ viewAttr: 1 });
       this.hasRight = true;
-      this.getRecordList(payload);
+      !callback && this.getRecordList();
+      callback && callback();
     } else {
       this.hasRight = false;
     }