Merge branch 'feature/2.19.1.2501.01-验证码验证' into release/3.0.1.2504.01-合并业务线

pc4mobx/hrmSalary/apis/payroll.js

@@ -202,8 +202,12 @@ export const salaryBillSendSum = (params) => {
   return postFetch("/api/bs/hrmsalary/salaryBill/send/sum", params);
 };
 //工资单发放-发送短信验证码
-export const sendMobileCode = (params) => {
-  return postFetch("/api/bs/hrmsalary/salaryBill/sendMobileCode", params);
+export const sendMobileCode = (params, header = {}) => {
+  return postFetch("/api/bs/hrmsalary/salaryBill/sendMobileCode", params, header);
+};
+//工资单发放-发送短信验证码
+export const checkMobileCode = (params, header = {}) => {
+  return postFetch("/api/bs/hrmsalary/salaryBill/checkMobileCode", params, header);
 };
 //工资单-验证方式
 export const payrollCheckType = params => {

pc4mobx/hrmSalary/components/captchaModal/index.js

@@ -6,22 +6,29 @@
  */
 import React, { Component } from "react";
 import { WeaDialog, WeaError, WeaFormItem, WeaInput, WeaLocaleProvider, WeaSearchGroup } from "ecCom";
-import { sendMobileCode } from "../../apis/payroll";
-import { Button } from "antd";
+import { WeaForm, WeaSwitch } from "comsMobx";
+import { checkMobileCode, sendMobileCode } from "../../apis/payroll";
+import { getQueryString } from "../../util/url";
+import FormInfo from "../FormInfo";
+import { captchaCondition } from "../../pages/mobilePayroll/pwdCondtion";
+import MobileModal from "../../pages/mobilePayroll/mobileModal";
+import { Button, message } from "antd";
 import "./index.less";
 
+const form = new WeaForm();
 const { getLabel } = WeaLocaleProvider;
 
 class Index extends Component {
   constructor(props) {
     super(props);
-    this.state = {
-      captcha: "",
-      time: 60
-    };
+    this.state = { captcha: "", time: 60 };
     this.timeRef = null;
   }
 
+  componentDidMount() {
+    form.initFormFields(captchaCondition);
+  }
+
   componentWillUnmount() {
     clearInterval(this.timeRef);
   }
@@ -48,18 +55,45 @@ class Index extends Component {
       }
     });
   };
-  handleConfirm = () => {
-    if (!this.state.captcha) {
+  handleConfirm = async () => {
+    const type = getQueryString("type"), f = await form.validateForm();
+    if (!this.state.captcha && type !== "phone") {
       this.refs.weaError.showError();
-      // return
+      return;
+    } else if (!f.isValid && type === "phone") {
+      f.showErrors();
+      return;
     }
+    checkMobileCode({ id: this.props.id, mobileCode: this.state.captcha }).then(({ status, errormsg }) => {
+      if (status) {
         this.props.onCancel();
         this.props.onConfirm();
+      } else {
+        message.error(errormsg);
+      }
+    });
   };
 
   render() {
-    const { captcha, time } = this.state;
-    return (
+    const { captcha, time } = this.state, type = getQueryString("type");
+    const itemRender = {
+      mobileCode: (field, textAreaProps, form, formParams) => {
+        return (<div className="captchaInputBox">
+          <WeaSwitch fieldConfig={{ ...field, ...textAreaProps }} form={form} formParams={formParams}
+                     onChange={() => this.setState({ captcha: form.getFormParams().mobileCode })}/>
+          <Button type="primary" onClick={this.handleSendCaptcha} disabled={time !== 60}>
+            {
+              time === 60 ? getLabel(111, "发送验证码") : `${time}S`
+            }
+          </Button>
+        </div>);
+      }
+    };
+    return (<React.Fragment>
+        {
+          type === "phone" ? <MobileModal title={getLabel(111, "验证码验证")} onConfirm={this.handleConfirm}>
+              <FormInfo center={false} itemRender={itemRender} form={form} formFields={captchaCondition}/>
+            </MobileModal> :
             <WeaDialog
               initLoadCss {...this.props} style={{ width: 550 }}
               className="captchaWrapper" title={getLabel(111, "验证码验证")}
@@ -73,7 +107,7 @@ class Index extends Component {
                   labelCol={{ span: 8 }}
                   wrapperCol={{ span: 16 }}
                 >
-            <WeaError tipPosition="bottom" ref="weaError" error={getLabel(826, "验证码未填写")}>
+                  <WeaError tipPosition="bottom" ref="weaError" error={getLabel(111, "验证码未填写")}>
                     <div className="captchaInputBox">
                       <WeaInput value={captcha} onChange={captcha => this.setState({ captcha })}/>
                       <Button type="primary" onClick={this.handleSendCaptcha} disabled={time !== 60}>
@@ -86,6 +120,8 @@ class Index extends Component {
                 </WeaFormItem>
               </WeaSearchGroup>
             </WeaDialog>
+        }
+      </React.Fragment>
     );
   }
 }

pc4mobx/hrmSalary/components/captchaModal/index.less

@@ -5,8 +5,12 @@
     .wea-form-item-wrapper {
       .wea-error {
         width: 100%;
+      }
+    }
+  }
+}
 
-        .captchaInputBox {
+.captchaInputBox {
   display: flex;
   align-items: center;
 
@@ -22,8 +26,4 @@
     height: 30px;
     line-height: 15px;
   }
-        }
-      }
-    }
-  }
 }

pc4mobx/hrmSalary/pages/mobilePayroll/index.js

@@ -37,16 +37,13 @@ export default class MobilePayroll extends React.Component {
     this.id = getQueryString("id");
     const { mySalaryStore: { init, setMySalaryBill } } = this.props;
     setMySalaryBill({});
-    if (type !== "phone") {
     const { data, status } = await payrollCheckType();
     if (status && data === "PWD") {
-        init(false, () => this.getMySalaryBill(this.id));
+      type !== "phone" ? init(false, () => this.getMySalaryBill(this.id)) : await this.initMobile();
     } else {
       this.setState({ captchaVisible: true });
     }
   }
-    type === "phone" && await this.initMobile();
-  }
 
   initMobile = async () => {
     const { mySalaryStore: { setInitEmVerify } } = this.props;
@@ -159,7 +156,10 @@ export default class MobilePayroll extends React.Component {
       <CaptchaModal
         visible={captchaVisible} id={getQueryString("id")}
         onCancel={() => this.setState({ captchaVisible: false })}
-        onConfirm={() => this.props.mySalaryStore.setInitEmVerify()}
+        onConfirm={() => {
+          setInitEmVerify();
+          this.getMySalaryBill(getQueryString("id"));
+        }}
       />
     </React.Fragment>;
     const {

pc4mobx/hrmSalary/pages/mobilePayroll/pwdCondtion.js

@@ -1,6 +1,25 @@
 import { WeaLocaleProvider } from "ecCom";
 
 const { getLabel } = WeaLocaleProvider;
+export const captchaCondition = [
+  {
+    items: [
+      {
+        colSpan: 1,
+        conditionType: "INPUT",
+        domkey: ["mobileCode"],
+        fieldcol: 18,
+        label: getLabel(111, "验证码"),
+        labelcol: 6,
+        detailtype: 1,
+        rules: "required|string",
+        viewAttr: 3
+      }
+    ],
+    title: "",
+    defaultshow: true
+  }
+];
 export const loginCondition = [
   {
     items: [

pc4mobx/hrmSalary/util/request.js

@@ -16,12 +16,12 @@ export const formHeaderPost = (url, method, params, header) => {
     body: formdata
   }).then(res => res.json());
 };
-export const postFetch = (url, params) => {
+export const postFetch = (url, params, header = {}) => {
   if (typeof localStorage.access_token === "string" && localStorage.access_token !== "") {
     params.access_token = localStorage.access_token;
   }
   url = server + url + "?__random__=" + (new Date()).valueOf();
-  return fetch(url, getFetchParams("POST", params)).then(res => res.json());
+  return fetch(url, getFetchParams("POST", params, header)).then(res => res.json());
 };
 export const headerRequestFetch = (url, method, params, header) => {
   if (typeof localStorage.access_token === "string" && localStorage.access_token !== "") {