feat: '运维登录新增验证码验证'

src/pages/user/login/components/Login/LoginItem.jsx

-import React from 'react';
+import React, { useState, useEffect } from 'react';
 
 import { Form, Input } from 'antd';
+import { FieldNumberOutlined, ReloadOutlined } from '@ant-design/icons';
 
 import LoginContext from './LoginContext';
 import ItemMap from './map';
+import styles from './index.less';
 
 const FormItem = Form.Item;
 
@@ -25,6 +27,52 @@ const getFormItemOptions = ({
   return options;
 };
 
+
+const ValidateCode = props => {
+  const [count, setCount] = useState(0);
+  const codeUrl = '/PandaOMS/OMS/GetVerificationCode';
+
+  useEffect(() => {
+    window.myGlobalHandError = function() {
+      handError();
+    };
+    return () => {
+      delete window.myGlobalHandError;
+    };
+  }, []);
+
+  const handError = () => {
+    setCount(Date.now());
+  };
+
+  const handeRefresh = () => {
+    setCount(Date.now());
+  };
+
+  const handChange = value => {
+    props?.onChange?.(value);
+  };
+
+  return (
+    <div className={styles.validate_view}>
+      <Input
+        size={props.size || 'large'}
+        prefix={props?.prefix || <FieldNumberOutlined />}
+        className={styles.validate_input}
+        value={props.value || ''}
+        placeholder={props?.placeholder || '请输入验证码'}
+        onChange={handChange}
+      />
+      <div className={styles.validate_img}>
+        <img src={`${codeUrl}?time=${count}`} alt="" />
+        <div className={styles.validate_refresh} onClick={handeRefresh}>
+          <ReloadOutlined />
+        </div>
+      </div>
+    </div>
+  );
+};
+
 const LoginItem = props => {
   const {
     onChange,
@@ -36,6 +84,9 @@ const LoginItem = props => {
     ...restProps
   } = props;
 
+  console.log(type,name,'666666666666666666');
+  
+
   if (!name) {
     return null;
   }
@@ -43,6 +94,14 @@ const LoginItem = props => {
   const options = getFormItemOptions(props);
   const otherProps = restProps || {};
 
+  if (type === 'Validate') {
+    return (
+      <Form.Item name={name} {...options}>
+        <ValidateCode {...customProps} {...otherProps} />
+      </Form.Item>
+    );
+  }
+
   return (
     <FormItem name={name} {...options}>
       <Input {...customProps} {...otherProps} />

src/pages/user/login/components/Login/index.jsx

@@ -41,5 +41,6 @@ Login.UserName = LoginItem.UserName;
 Login.Password = LoginItem.Password;
 Login.Mobile = LoginItem.Mobile;
 Login.Captcha = LoginItem.Captcha;
+Login.Validate = LoginItem.Validate;
 
 export default Login;

src/pages/user/login/components/Login/index.less

@@ -46,4 +46,52 @@
     width: 100%;
     margin-top: 24px;
   }
+
+  .validate_view {
+    display: flex;
+    align-items: center;
+
+    .validate_input {
+      flex: 1;
+      margin-right: 20px;
+    }
+
+    .validate_img {
+      width: 92px;
+      height: 40px;
+      flex: none;
+      position: relative;
+      cursor: pointer;
+      border: 1px solid #d9d9d9;
+      border-radius: 2px;
+
+      &:hover {
+        .validate_refresh {
+          opacity: 1;
+          background-color: rgba(238, 238, 238, 0.7);
+        }
+      }
+
+      img {
+        width: 100%;
+        height: 100%;
+        // object-fit: contain;
+      }
+
+      .validate_refresh {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        left: 0;
+        top: 0;
+        z-index: 1;
+        display: flex;
+        opacity: 0;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        color: #666666;
+      }
+    }
+  }
 }
\ No newline at end of file

src/pages/user/login/components/Login/map.jsx

 import React from 'react';
 
-import { LockTwoTone, MailTwoTone, MobileTwoTone, UserOutlined } from '@ant-design/icons';
+import {
+  LockTwoTone,
+  MailTwoTone,
+  MobileTwoTone,
+  UserOutlined,
+  FieldNumberOutlined,
+} from '@ant-design/icons';
 
 import styles from './index.less';
 
@@ -71,4 +77,25 @@ export default {
       },
     ],
   },
+  Validate: {
+    props: {
+      size: 'large',
+      id: 'validate',
+      prefix: (
+        <FieldNumberOutlined
+          style={{
+            color: '#1890ff',
+          }}
+          className={styles.prefixIcon}
+        />
+      ),
+      placeholder: '请输入验证码',
+    },
+    rules: [
+      {
+        required: true,
+        message: '请输入验证码!',
+      },
+    ],
+  },
 };

src/pages/user/login/index.jsx

 import React, { useState, useEffect } from 'react';
 import { Alert, notification } from 'antd';
-import { OMSLogin } from '@/services/user/api';
+import { OMSLogin, IsOpenVerificationCodeValidation } from '@/services/user/api';
 import { gateWayConfig, GetGateWay } from '@/services/common/api';
 import { AUTHORITY, USER_MODE } from '@/utils/constants';
 import { appConnector } from '@/containers/App/store';
@@ -10,7 +10,7 @@ import LoginForm from './components/Login';
 import styles from './style.less';
 import { SysConfiguration } from '@/services/userManage/api';
 import { setAuthority } from '@/utils/authority';
-const { UserName, Password, Submit } = LoginForm;
+const { UserName, Password, Validate, Submit } = LoginForm;
 
 const LoginMessage = ({ content }) => (
   <Alert
@@ -31,8 +31,10 @@ const Login = props => {
   // const [autoLogin, setAutoLogin] = useState(true);
   const [type, setType] = useState('account');
   const [pasType, setPasType] = useState('');
+  const [showValidate, setShowValidate] = useState(false);
 
   useEffect(() => {
+    isShowValidate();
     passwordType();
   }, []);
 
@@ -43,12 +45,21 @@ const Login = props => {
       }
     });
   };
+  const isShowValidate = () => {
+    IsOpenVerificationCodeValidation().then(res => {
+      if (res.code === 0) {
+        setShowValidate(res.data);
+      } else {
+        setShowValidate(false);
+      }
+    });
+  };
   const handleSubmit = values => {
     /* eslint-disable no-console */
     console.log(values); // eg:{userName: "123", password: "123"}
-    const { userName: loginName, password } = values;
+    const { userName: loginName, password, validate } = values;
     setLoading(true);
-    OMSLogin(loginName, encipher(password, pasType ? pasType : '').toUpperCase(), 'CivManage')
+    OMSLogin(loginName, encipher(password, pasType ? pasType : '').toUpperCase(), 'CivManage', validate)
       .then(result => {
         const { msg } = result;
 
@@ -87,9 +98,11 @@ const Login = props => {
             message: msg || '没有权限！',
           });
         }
+        window.myGlobalHandError();
         setLoading(false);
       })
       .catch(e => {
+        window.myGlobalHandError();
         setLoading(false);
         notification.error({
           message: e.message || '没有权限！',
@@ -151,6 +164,18 @@ const Login = props => {
             },
           ]}
         />
+        {
+          showValidate && <Validate
+            name="validate"
+            placeholder="请输入验证码"
+            rules={[
+              {
+                required: true,
+                message: '请输入验证码！',
+              },
+            ]}
+          />
+        }
         <div>
           {/* <Checkbox
             checked={autoLogin}

src/services/user/api.js

@@ -4,5 +4,7 @@ export const getUserInfo = param => get('/cityinterface/getUserinfo', param);
 
 export const login = param => get(`${CITY_SERVICE}/OMS.svc/L_GetCheckUser`, param);
 
-export const OMSLogin = (userName, password, systemType) =>
-  postForm(`${PUBLISH_SERVICE}/OMSLogin`, { userName, password, systemType });
+export const IsOpenVerificationCodeValidation = param => get(`${PUBLISH_SERVICE}/IsOpenVerificationCodeValidation`, param);
+
+export const OMSLogin = (userName, password, systemType, validate) =>
+  postForm(`${PUBLISH_SERVICE}/OMSLogin`, { userName, password, systemType, vcode: validate });