|
|
@@ -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);
|
