salary-management-front/pc4mobx/hrmSalary/components/captchaModal/index.js

/*
 * Author: 黎永顺
 * name: 验证码弹框
 * Description:
 * Date: 2023/6/16
 */
import React, { Component } from "react";
import { WeaDialog, WeaError, WeaFormItem, WeaInput, WeaLocaleProvider, WeaSearchGroup } from "ecCom";
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, loading: false };
    this.timeRef = null;
  }

  componentDidMount() {
    form.initFormFields(captchaCondition);
  }

  componentWillUnmount() {
    clearInterval(this.timeRef);
    this.setState({ captcha: "", time: 60, loading: false });
  }

  handleSendCaptcha = () => {
    this.setState({ loading: true });
    sendMobileCode({ id: this.props.id }).then(({ status, data }) => {
      if (status) {
        this.timeRef = setInterval(() => {
          const { time } = this.state;
          this.setState({ time: time - 1 }, () => {
            if (this.state.time === -1) {
              clearInterval(this.timeRef);
              this.setState({ time: 60, loading: false });
            }
          });
        }, 1000);
      } else {
        this.setState({ loading: false });
      }
    }).catch(() => this.setState({ loading: false }));
  };
  handleConfirm = async () => {
    const type = getQueryString("type"), f = await form.validateForm();
    if (!this.state.captcha && type !== "phone") {
      this.refs.weaError.showError();
      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, loading } = 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={loading}>
            {
              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, "验证码验证")}
              buttons={[
                <Button type="primary" onClick={this.handleConfirm}>{getLabel(826, "确定")}</Button>
              ]}
            >
              <WeaSearchGroup needTigger={false} title="" showGroup>
                <WeaFormItem
                  label={getLabel(111, "验证码")}
                  labelCol={{ span: 8 }}
                  wrapperCol={{ span: 16 }}
                >
                  <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={loading}>
                        {
                          time === 60 ? getLabel(111, "发送验证码") : `${time}S`
                        }
                      </Button>
                    </div>
                  </WeaError>
                </WeaFormItem>
              </WeaSearchGroup>
            </WeaDialog>
        }
      </React.Fragment>
    );
  }
}

export default Index;