temp

src/components/management/AddUser.tsx

@@ -26,7 +26,10 @@ class AddUser extends React.Component<AddUserProps, AddUserState> {
 
     handleOk = () => {
         this.formRef.current?.submit();
-        this.props.onSuccess();
+    };
+
+    handleCancel = () => {
+        this.switchShow();
     };
 
     switchShow = () => {
@@ -39,13 +42,20 @@ class AddUser extends React.Component<AddUserProps, AddUserState> {
         trailwayAddUser(values).then((resp: any) => {
             if (resp.code == 200) {
                 this.switchShow();
+                this.props.onSuccess();
             }
         });
     };
 
     render() {
         return (
-            <Modal title="增加用户" visible={this.state.isShow} onOk={this.handleOk}>
+            <Modal
+                title="增加用户"
+                visible={this.state.isShow}
+                onOk={this.handleOk}
+                onCancel={this.handleCancel}
+                closable={false}
+            >
                 <Form ref={this.formRef} onFinish={this.handleFinish}>
                     <FormItem name="username">
                         <Input placeholder="账户" />

src/components/management/ChangePwd.tsx

@@ -0,0 +1,73 @@
+import React, { useState, SetStateAction } from 'react';
+import Modal from 'antd/lib/modal/Modal';
+import { Input } from 'antd';
+import Form, { FormInstance } from 'antd/lib/form/Form';
+import FormItem from 'antd/lib/form/FormItem';
+import { trailwayAddUser, trailwayChangePwd } from '../../service';
+
+type ChangePwdState = {
+    isShow: boolean;
+    userId: Number;
+};
+
+type ChangePwdProps = {
+    showChangePwd?: () => void;
+};
+
+class ChangePwd extends React.Component<ChangePwdProps, ChangePwdState> {
+    private formRef = React.createRef<FormInstance>();
+
+    constructor(props: ChangePwdProps) {
+        super(props);
+        this.state = {
+            isShow: false,
+            userId: 0,
+        };
+    }
+
+    handleOk = () => {
+        this.formRef.current?.submit();
+    };
+
+    handleCancel = () => {
+        this.switchShow(0);
+    };
+
+    switchShow = (id: Number) => {
+        this.setState((state) => ({
+            isShow: !state.isShow,
+            userId: id,
+        }));
+    };
+
+    handleFinish = (id: Number, values: any) => {
+        trailwayChangePwd(id, values).then((resp: any) => {
+            if (resp.code == 200) {
+                this.switchShow(0);
+            }
+        });
+    };
+
+    render() {
+        return (
+            <Modal
+                title="修改密码"
+                visible={this.state.isShow}
+                onOk={this.handleOk}
+                onCancel={this.handleCancel}
+                closable={false}
+            >
+                <Form
+                    ref={this.formRef}
+                    onFinish={(values: any) => this.handleFinish(this.state.userId, values)}
+                >
+                    <FormItem name="password">
+                        <Input placeholder="密码" />
+                    </FormItem>
+                </Form>
+            </Modal>
+        );
+    }
+}
+
+export default ChangePwd;

src/components/management/UserManage.tsx

@@ -5,11 +5,14 @@ import React from 'react';
 import { Table, Input, Button } from 'antd';
 import { trailwayDelUser, trailwayListUsers } from '../../service';
 import AddUser from './AddUser';
+import ChangePwd from './ChangePwd';
 
 class UserManage extends React.Component {
     constructor(props: {}) {
         super(props);
     }
+    private addUserRef = React.createRef<AddUser>();
+    private changePwdRef = React.createRef<ChangePwd>();
 
     state = {
         filterDropdownVisible: false,
@@ -22,10 +25,6 @@ class UserManage extends React.Component {
     componentDidMount() {
         this.refreshUser();
     }
-
-    onInputChange = (e: any) => {
-        this.setState({ searchText: e.target.value });
-    };
     refreshUser = () => {
         trailwayListUsers().then((res) => {
             this.setState({
@@ -33,12 +32,19 @@ class UserManage extends React.Component {
             });
         });
     };
-    handleSwitchShow = () => {
+    showAddUser = () => {
+        this.addUserRef.current?.switchShow();
         console.log('handleSwitchShow');
     };
+    showChangePwd = (userId: Number) => {
+        this.changePwdRef.current?.switchShow(userId);
+    };
     handleDel = (id: Number) => {
-        trailwayDelUser(id);
+        trailwayDelUser(id).then((res) => {
+            if (res.code == 200) {
                 this.refreshUser();
+            }
+        });
     };
     render() {
         const columns = [
@@ -63,8 +69,12 @@ class UserManage extends React.Component {
                 title: '操作',
                 render: (record: any) => (
                     <div>
-                        <Button type="primary" size="small">
-                            编辑
+                        <Button
+                            onClick={() => this.showChangePwd(record.id)}
+                            type="primary"
+                            size="small"
+                        >
+                            修改密码
                         </Button>
                         <Button
                             type="primary"
@@ -79,11 +89,16 @@ class UserManage extends React.Component {
         ];
         return (
             <div>
-                <Button onClick={this.refreshUser} type="primary">
+                <Button onClick={this.showAddUser} type="primary">
                     增加用户
                 </Button>
-                <AddUser onSuccess={this.refreshUser}></AddUser>
-                <Table columns={columns} dataSource={this.state.data} />
+                <AddUser ref={this.addUserRef} onSuccess={this.refreshUser}></AddUser>
+                <ChangePwd ref={this.changePwdRef}></ChangePwd>
+                <Table
+                    columns={columns}
+                    dataSource={this.state.data}
+                    rowKey={(record) => record.id}
+                />
                 <style>{`
                     .custom-filter-dropdown {
                       padding: 8px;

src/components/pages/Login.tsx

@@ -35,36 +35,27 @@ const Login = (props: LoginProps) => {
         }
     }, [history, auth]);
 
-    const handleSubmit = (values: any) => {
-        if (checkUser(values)) {
+    const handleSubmit = async (values: any) => {
+        console.log(await checkUser(values));
+        if (await checkUser(values)) {
             setAlita({ funcName: values.userName, stateName: 'auth' });
         }
     };
-    const checkUser = (values: any) => {
-        // const users = [
-        //     ['admin', 'admin'],
-        //     ['guest', 'guest'],
-        // ];
-        // return users.some((user) => user[0] === values.userName && user[1] === values.password);
-        let success = trailwayLogin({ username: values.userName, password: values.password }).then(
-            (res) => {
-                console.log(res);
-                return res.data.success === true;
-            }
-        );
-        console.log(success);
+    const checkUser = async (values: any) => {
+        let success = await trailwayLogin({
+            username: values.userName,
+            password: values.password,
+        }).then((res) => {
+            return res.data.success;
+        });
         return success;
     };
-    const gitHub = () => {
-        window.location.href =
-            'https://github.com/login/oauth/authorize?client_id=792cdcd244e98dcd2dee&redirect_uri=http://localhost:3006/&scope=user&state=reactAdmin';
-    };
 
     return (
         <div className="login">
             <div className="login-form">
                 <div className="login-logo">
-                    <span>React Admin</span>
+                    <span>地铁可视化</span>
                     <PwaInstaller />
                 </div>
                 <Form onFinish={handleSubmit} style={{ maxWidth: '300px' }}>
@@ -72,22 +63,16 @@ const Login = (props: LoginProps) => {
                         name="userName"
                         rules={[{ required: true, message: '请输入用户名!' }]}
                     >
-                        <Input
-                            prefix={<UserOutlined size={13} />}
-                            placeholder="管理员输入admin, 游客输入guest"
-                        />
+                        <Input prefix={<UserOutlined size={13} />} placeholder="Username" />
                     </FormItem>
                     <FormItem name="password" rules={[{ required: true, message: '请输入密码!' }]}>
                         <Input
                             prefix={<LockOutlined size={13} />}
                             type="password"
-                            placeholder="管理员输入admin, 游客输入guest"
+                            placeholder="Password"
                         />
                     </FormItem>
                     <FormItem>
-                        <span className="login-form-forgot" style={{ float: 'right' }}>
-                            忘记密码
-                        </span>
                         <Button
                             type="primary"
                             htmlType="submit"
@@ -96,13 +81,6 @@ const Login = (props: LoginProps) => {
                         >
                             登录
                         </Button>
-                        <p style={{ display: 'flex', justifyContent: 'space-between' }}>
-                            <span>或 现在就去注册!</span>
-                            <span onClick={gitHub}>
-                                <GithubOutlined />
-                                (第三方登录)
-                            </span>
-                        </p>
                     </FormItem>
                 </Form>
             </div>

src/service/index.ts

@@ -52,3 +52,5 @@ export const trailwayDelUser = (id: Number) =>
     get({ url: config.TRAILWAY_API + '/user/delete/' + id });
 export const trailwayAddUser = (data: any) =>
     post({ url: config.TRAILWAY_API + '/user/add/', data });
+export const trailwayChangePwd = (id: Number, data: any) =>
+    post({ url: config.TRAILWAY_API + '/user/pwd/' + id, data });