登录页

.umirc.ts

@@ -38,6 +38,12 @@ export default defineConfig({
       path: '/table',
       component: './Table',
     },
+    {
+      name: '登录',
+      path: '/login',
+      component: './Login/index',
+      layout: false,
+    },
   ],
   npmClient: 'yarn',
 });

src/pages/Login/index.js

@@ -0,0 +1,141 @@
+import React, { useRef, useState } from 'react';
+import { connect, useNavigate } from 'umi';
+import { Form, Select, Input, Button, message } from 'antd';
+import { queryDepList } from '@/services/user';
+import styles from './index.less';
+import { UserOutlined, LockOutlined } from '@ant-design/icons';
+import { storeToken } from '@/utils/utils';
+const { Option } = Select;
+
+function Login(props) {
+  const {
+    submitting,
+    params,
+    dispatch,
+  } = props;
+  const [depList, setDepList] = useState([]);
+  const [hasName, setHasName] = useState(false);
+  const formRef = useRef();
+  let navigate = useNavigate();
+  const onHandleChange = async (name) => {
+    if (!name) {
+      setDepList([]);
+      setHasName(false);
+      return;
+    }
+    try {
+      var res = await queryDepList(name);
+      setDepList(res.data);
+      setHasName(true);
+      formRef.current.setFieldsValue({
+        DepId: res.data[0]?.ID + '',
+      });
+    } catch (error) {
+      setDepList([]);
+      setHasName(true);
+      message.error('用户名不存在');
+    }
+  };
+
+  const handleSubmit = (values) => {
+    dispatch({
+      type: 'login/login',
+      payload: {
+        ...values,
+        // 防止浏览器自动填充
+        password: values.password2,
+      },
+      callback: (token) => {
+        storeToken(token);
+        navigate("/home");
+      },
+    });
+  };
+  return (
+    <div className={styles.main}>
+      <div className={styles.content}>
+        <Form
+          name="basic"
+          className={styles.inp_box}
+          labelCol={{ span: 0 }}
+          wrapperCol={{ span: 24 }}
+          onFinish={handleSubmit}
+          autoComplete="new-password"
+          ref={formRef}
+        >
+          <Form.Item
+            label=""
+            name="username"
+            autoComplete="off"
+            rules={[{ required: true, message: '请输入用户名' }]}
+          >
+            <Input
+              prefix={<UserOutlined className={styles.prefixIcon} />}
+              className={styles.inp}
+              size="large"
+              autoComplete="off"
+              placeholder="请输入用户名"
+              onBlur={(e) => onHandleChange(e.target.value)}
+            />
+          </Form.Item>
+          {hasName && (
+            <Form.Item
+              label=""
+              name="DepId"
+              rules={[{ required: true, message: '请选择部门' }]}
+            >
+              <Select placeholder="请选择部门" size="large">
+                {depList.map((item) => (
+                  <Option value={item.ID + ''} key={item.ID}>
+                    {item.Name}
+                  </Option>
+                ))}
+              </Select>
+            </Form.Item>
+          )}
+
+          <Form.Item
+            label=""
+            // 不使用password，防止浏览器自动填充表单
+            name="password2"
+            className={styles.inp}
+            rules={[{ required: true, message: '请输入密码' }]}
+          >
+            <Input.Password
+              prefix={<LockOutlined className={styles.prefixIcon} />}
+              className={styles.inp}
+              size="large"
+              placeholder="请输入密码"
+              autoComplete="new-password"
+            />
+          </Form.Item>
+
+          {/* <Form.Item
+          name="remember"
+          valuePropName="checked"
+          wrapperCol={{ offset: 8, span: 16 }}
+        >
+          <Checkbox>自动登录</Checkbox>
+        </Form.Item> */}
+
+          <Form.Item>
+            <Button
+              size="large"
+              style={{ width: '100%', marginTop: 24 }}
+              loading={submitting}
+              type="primary"
+              htmlType="submit"
+            >
+              登录
+            </Button>
+          </Form.Item>
+        </Form>
+      </div>
+    </div>
+  );
+}
+
+export default connect(({ login, loading }) => ({
+  login,
+  submitting: loading.effects['login/login'],
+}))(Login);

src/pages/Login/index.less

@@ -0,0 +1,75 @@
+
+.main {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-image: url('@/assets/login-bg.png');
+  background-repeat: no-repeat;
+  background-position: 50%;
+  background-size: 100%;
+}
+
+.prefixIcon {
+  color: #42a0e0;
+  font-size: 18px;
+}
+
+.content {
+  width: 428px;
+  height: 300px;
+  border-radius: 8px;
+  padding-top: 162px;
+  background: #fff url('@/assets/login-box-top.png') no-repeat top center;
+
+  @media screen and (max-width: 576px) {
+    width: 95%;
+  }
+
+  .inp_box {
+    width: 80%;
+    margin: 0 auto;
+    padding-top: 40px;
+
+    a {
+      color: #999;
+    }
+  }
+
+  .inp {
+    input {
+      border-radius: 0px;
+      padding: 2px 4px;
+    }
+
+    i {
+      color: #42a0e0;
+      font-size: 18px;
+    }
+  }
+
+
+  .icon {
+    margin-left: 16px;
+    color: rgba(0, 0, 0, 0.2);
+    font-size: 24px;
+    vertical-align: middle;
+    cursor: pointer;
+    transition: color 0.3s;
+
+    &:hover {
+      color: #1890ff;
+    }
+  }
+
+  .other {
+    margin-top: 24px;
+    line-height: 22px;
+    text-align: left;
+
+    .register {
+      float: right;
+    }
+  }
+}

src/pages/Login/models/login.js

@@ -0,0 +1,27 @@
+import { Login } from '@/services/user';
+
+export default {
+  namespace: 'login',
+
+  state: {},
+
+  effects: {
+    *login({ payload, callback }, { call, put }) {
+      try {
+        let response = null;
+        response = yield call(Login, payload);
+        const { user, token } = response.data;
+
+        callback?.(token);
+        // yield put({
+        //   type: 'changeLoginStatus',
+        //   payload: response,
+        // });
+      } catch (error) {
+        console.error(error);
+      }
+    },
+  },
+
+  reducers: {},
+};

src/services/user.js

@@ -44,3 +44,14 @@ export async function updateUser(param) {
 export async function queryDepV2(params) {
   return request(`/api/v2/dep?${stringify(params)}`);
 }
+export async function queryDepList(userName) {
+  return request(`/api/v2/user/dep`, {
+    params: { userName },
+  });
+}
+export async function Login(data) {
+  return request('/api/v2/user/login', {
+    method: 'POST',
+    data,
+  });
+}