产品-工资单验证方式

pc4mobx/hrmSalary/components/captchaModal/index.js

@@ -28,26 +28,35 @@ class Index extends Component {
 
   componentWillReceiveProps(nextProps, nextContext) {
     if (nextProps.visible !== this.props.visible && !nextProps.visible) {
-      this.setState({ captcha: "" });
-    } else {
       clearInterval(this.timeRef);
-      this.setState({ time: 60 });
+      this.setState({ captcha: "", time: 60 });
     }
   }
 
   handleSendCaptcha = () => {
-    sendMobileCode({ id: this.props.id }).then(({}) => {
-      this.timeRef = setInterval(() => {
-        const { time } = this.state;
-        this.setState({ time: time - 1 }, () => {
-          if (this.state.time === -1) {
-            clearInterval(this.timeRef);
-            this.setState({ time: 60 });
-          }
-        });
-      }, 1000);
+    sendMobileCode({ id: this.props.id }).then(({ status, data }) => {
+      if (status) {
+        console.log(data);
+        this.timeRef = setInterval(() => {
+          const { time } = this.state;
+          this.setState({ time: time - 1 }, () => {
+            if (this.state.time === -1) {
+              clearInterval(this.timeRef);
+              this.setState({ time: 60 });
+            }
+          });
+        }, 1000);
+      }
     });
   };
+  handleConfirm = () => {
+    if (!this.state.captcha) {
+      this.refs.weaError.showError();
+      // return
+    }
+    this.props.onCancel();
+    this.props.onConfirm();
+  };
 
   render() {
     const { captcha, time } = this.state;
@@ -56,7 +65,7 @@ class Index extends Component {
         initLoadCss {...this.props} style={{ width: 550 }}
         className="captchaWrapper" title={getLabel(111, "验证码验证")}
         buttons={[
-          <Button type="primary">{getLabel(826, "确定")}</Button>
+          <Button type="primary" onClick={this.handleConfirm}>{getLabel(826, "确定")}</Button>
         ]}
       >
         <WeaSearchGroup needTigger={false} title="" showGroup>

pc4mobx/hrmSalary/pages/mobilePayroll/index.js

@@ -8,7 +8,9 @@ import ComputerTemplate from "../payroll/templatePreview/computerTemplate";
 import PhoneTemplate from "../payroll/templatePreview/phoneTemplate";
 import "../payroll/templatePreview/index.less";
 import * as API from "../../apis/mySalaryBenefits";
+import { payrollCheckType } from "../../apis/payroll";
 import "./index.less";
+import CaptchaModal from "../../components/captchaModal";
 
 @inject("mySalaryStore")
 @observer
@@ -17,6 +19,7 @@ export default class MobilePayroll extends React.Component {
     super(props);
     this.state = {
       visible: false,
+      captchaVisible: false,
       authCode: "",
       mySalaryBillData: {
         employeeInformation: {},
@@ -26,13 +29,20 @@ export default class MobilePayroll extends React.Component {
     this.id = "";
   }
 
-  componentWillMount() {
+  async componentWillMount() {
     const type = getQueryString("type");
     this.id = getQueryString("id");
     const { mySalaryStore: { init } } = this.props;
-    type !== "phone" && init(false);
-    type === "phone" && this.initMobile();
     this.getMySalaryBill(this.id);
+    const { data, status } = await payrollCheckType();
+    if (type !== "phone") {
+      if (status && data === "PWD") {
+        init(false);
+      } else {
+        this.setState({ captchaVisible: true });
+      }
+    }
+    type === "phone" && this.initMobile();
   }
 
   initMobile = () => {
@@ -96,7 +106,7 @@ export default class MobilePayroll extends React.Component {
 
   render() {
     const { mySalaryStore: { clearLoading } } = this.props;
-    const { mySalaryBillData, visible } = this.state;
+    const { mySalaryBillData, visible, captchaVisible } = this.state;
     const type = getQueryString("type");
     const employeeInformation = mySalaryBillData.employeeInformation ? mySalaryBillData.employeeInformation : {};
     const salaryGroups = mySalaryBillData.salaryGroups ? mySalaryBillData.salaryGroups : [];
@@ -148,6 +158,11 @@ export default class MobilePayroll extends React.Component {
               </div>
             </Authority>
         }
+        <CaptchaModal
+          visible={captchaVisible} id={getQueryString("id")}
+          onCancel={() => this.setState({ captchaVisible: false })}
+          onConfirm={() => this.props.mySalaryStore.setInitEmVerify()}
+        />
       </div>
     );
   }

pc4mobx/hrmSalary/pages/mySalary/index.js

@@ -6,7 +6,6 @@ import { renderNoright } from "../../util"; // 渲染form数据的方法：因
 import CustomTab from "../../components/customTab";
 import moment from "moment";
 import PayrollModal from "./payrollModal";
-import Authority from "./authority";
 import CustomPaginationTable from "../../components/customPaginationTable";
 import "./index.less";
 
@@ -29,9 +28,9 @@ export default class MySalary extends React.Component {
     this.historyPageInfo = { current: 1, pageSize: 10 };
   }
 
-  componentWillMount() {
-    const { mySalaryStore: { init } } = this.props;
-    init();
+  componentDidMount() {
+    const { mySalaryStore: { mySalaryBillList } } = this.props;
+    mySalaryBillList([moment().startOf("year").format("YYYY-MM"), moment().format("YYYY-MM")]);
   }
 
   // 查看工资单
@@ -114,7 +113,6 @@ export default class MySalary extends React.Component {
       myBillPageInfo
     } = mySalaryStore;
     const { salaryBillVisible, salaryInfoId, salaryRange } = this.state;
-    if (!hasRight && !loading) return renderNoright();
 
     const topTab = [
       {
@@ -141,64 +139,62 @@ export default class MySalary extends React.Component {
     };
     return (
       <div className="mySalaryBenefitsWrapper">
-        <Authority ecId={`${this && this.props && this.props.ecId || ""}_Authority@lulowc`} store={mySalaryStore}>
-          <WeaTop
-            title="我的薪资福利" // 文字
-            icon={<i className="icon-coms-fa"/>} // 左侧图标
-            iconBgcolor="#F14A2D" // 左侧图标背景色
-            showDropIcon={false} // 是否显示下拉按钮
-          >
-            <CustomTab
-              topTab={topTab}
-              searchOperationItem={renderSearchOperationItem()}
-              onChange={(v) => {
-                this.handleTabChange(v);
-                this.setState({ selectedKey: v });
-              }}
-            />
-            <div className="tableWrapper">
-              <WeaNewScroll height="100%">
-                {
-                  this.state.selectedKey === "0" &&
-                  <CustomPaginationTable
-                    loading={loading}
-                    columns={this.getColumns()}
-                    dataSource={myBillDataSource ? myBillDataSource : []}
-                    total={myBillPageInfo.total}
-                    current={myBillPageInfo.pageNum}
-                    pageSize={this.pageInfo.pageSize}
-                    onPageChange={(value) => {
-                      this.pageInfo.current = value;
-                      this.handlePageChange();
-                    }}
-                    onShowSizeChange={(current, pageSize) => {
-                      this.pageInfo = { current, pageSize };
-                      this.handlePageChange();
-                    }}
-                  />
-                }
-                {
-                  this.state.selectedKey === "2" &&
-                  <CustomPaginationTable
-                    columns={recordListColumns}
-                    dataSource={recordListDataSource}
-                    total={recordListPageInfo.total}
-                    current={recordListPageInfo.pageNum}
-                    pageSize={this.historyPageInfo.pageSize}
-                    onPageChange={(value) => {
-                      this.historyPageInfo.current = value;
-                      this.handleHistoryPageChange();
-                    }}
-                    onShowSizeChange={(current, pageSize) => {
-                      this.historyPageInfo = { current, pageSize };
-                      this.handleHistoryPageChange();
-                    }}
-                  />
-                }
-              </WeaNewScroll>
-            </div>
-          </WeaTop>
-        </Authority>
+        <WeaTop
+          title="我的薪资福利" // 文字
+          icon={<i className="icon-coms-fa"/>} // 左侧图标
+          iconBgcolor="#F14A2D" // 左侧图标背景色
+          showDropIcon={false} // 是否显示下拉按钮
+        >
+          <CustomTab
+            topTab={topTab}
+            searchOperationItem={renderSearchOperationItem()}
+            onChange={(v) => {
+              this.handleTabChange(v);
+              this.setState({ selectedKey: v });
+            }}
+          />
+          <div className="tableWrapper">
+            <WeaNewScroll height="100%">
+              {
+                this.state.selectedKey === "0" &&
+                <CustomPaginationTable
+                  loading={loading}
+                  columns={this.getColumns()}
+                  dataSource={myBillDataSource ? myBillDataSource : []}
+                  total={myBillPageInfo.total}
+                  current={myBillPageInfo.pageNum}
+                  pageSize={this.pageInfo.pageSize}
+                  onPageChange={(value) => {
+                    this.pageInfo.current = value;
+                    this.handlePageChange();
+                  }}
+                  onShowSizeChange={(current, pageSize) => {
+                    this.pageInfo = { current, pageSize };
+                    this.handlePageChange();
+                  }}
+                />
+              }
+              {
+                this.state.selectedKey === "2" &&
+                <CustomPaginationTable
+                  columns={recordListColumns}
+                  dataSource={recordListDataSource}
+                  total={recordListPageInfo.total}
+                  current={recordListPageInfo.pageNum}
+                  pageSize={this.historyPageInfo.pageSize}
+                  onPageChange={(value) => {
+                    this.historyPageInfo.current = value;
+                    this.handleHistoryPageChange();
+                  }}
+                  onShowSizeChange={(current, pageSize) => {
+                    this.historyPageInfo = { current, pageSize };
+                    this.handleHistoryPageChange();
+                  }}
+                />
+              }
+            </WeaNewScroll>
+          </div>
+        </WeaTop>
         {
           salaryBillVisible && <PayrollModal
             visible={salaryBillVisible}

pc4mobx/hrmSalary/pages/mySalary/mySalaryView.js

@@ -7,31 +7,58 @@
 import React, { Component } from "react";
 import { inject, observer } from "mobx-react";
 import { toJS } from "mobx";
+import Authority from "./authority";
 import ComputerTemplate from "../payroll/templatePreview/computerTemplate";
+import { payrollCheckType } from "../../apis/payroll";
+import CaptchaModal from "../../components/captchaModal";
 import "../payroll/templatePreview/index.less";
 
 @inject("mySalaryStore")
 @observer
 class MySalaryView extends Component {
-  componentDidMount() {
-    const { mySalaryStore: { getMySalaryBill }, params: { salaryInfoId } } = this.props;
+  constructor(props) {
+    super(props);
+    this.state = {
+      captchaVisible: false
+    };
+  }
+
+  async componentDidMount() {
+    const { mySalaryStore: { getMySalaryBill, init }, params: { salaryInfoId } } = this.props;
+    const { data, status } = await payrollCheckType();
+    if (status && data === "PWD") {
+      init(false);
+    } else {
+      this.setState({ captchaVisible: true });
+    }
     getMySalaryBill(Number(salaryInfoId));
   }
 
   render() {
-    const { mySalaryStore: { mySalaryBill } } = this.props;
+    const { captchaVisible } = this.state;
+    const { mySalaryStore, params: { salaryInfoId } } = this.props;
+    const { mySalaryBill } = mySalaryStore;
     const employeeInformation = mySalaryBill.employeeInformation && toJS(mySalaryBill.employeeInformation);
     const salaryGroups = mySalaryBill.salaryGroups && toJS(mySalaryBill.salaryGroups);
     return (
-      <div>
-        <div className="templatePreview">
-          <ComputerTemplate
-            isPreview
-            salaryTemplateShowSet={JSON.stringify(mySalaryBill.salaryTemplate)}
-            salaryItemSet={!_.isEmpty(salaryGroups) ? JSON.stringify([employeeInformation, ...salaryGroups]) : []}
-          />
-        </div>
-      </div>
+      <React.Fragment>
+        <Authority ecId={`${this && this.props && this.props.ecId || ""}_Authority@lulowc`} store={mySalaryStore}>
+          <div>
+            <div className="templatePreview">
+              <ComputerTemplate
+                isPreview isMsgPreview
+                salaryTemplateShowSet={JSON.stringify(mySalaryBill.salaryTemplate)}
+                salaryItemSet={!_.isEmpty(salaryGroups) ? JSON.stringify([employeeInformation, ...salaryGroups]) : []}
+              />
+            </div>
+          </div>
+        </Authority>
+        <CaptchaModal
+          visible={captchaVisible} id={salaryInfoId}
+          onCancel={() => this.setState({ captchaVisible: false })}
+          onConfirm={() => mySalaryStore.setInitEmVerify()}
+        />
+      </React.Fragment>
     );
   }
 }