help_admin/src/Manager.tsx

import React from "react";
import {Tabs,Tab,Button,Table,Modal} from "react-bootstrap";
import {ManagerForm} from "./entity";
import {Input} from "./bootstrap/InputGroup";
/**
 * 管理员管理
 */
export class Manager extends React.Component<any, any>{

    constructor(props: Readonly<any>) {
        super(props);

        this.state={
            managerList:[],
            //修改密码模态框状态位
            showModifyPwd:false,
            //修改密码表单
            modify:{
                password:"",
                confirmPwd:""
            },
            //添加管理员模态框状态位
            showAddManager:false,
            //添加管理员表单
            addManager:{
                manager:"",
                password:"",
                confirmPwd:""
            }
        }

    }

    /**
     * 加载管理员数据
     */
    loadManager(){
        this.setState({
            managerList:[
                {
                    manager:"admin123"
                }
            ]
        })
    }

    /**
     * 检查密码
     */
    checkPwd(modify:any){
       if(modify.password.length>0&&modify.confirmPwd.length>0&&modify.password===modify.confirmPwd){
           return {
               check:true
           }
       }else if(modify.confirmPwd.length>0&&modify.confirmPwd.length>0){
           return {
               check:false,
               invalid:'两次密码输入不一致'
           }
       }else if(modify.password.length>0&&modify.confirmPwd.length===0){
           return {
               check:false,
               invalid: '确认密码为空'
           }
       }else{
           return {
               check:undefined
           }
       }
    }

    componentDidMount() {
       this.loadManager()
    }

    /**
     * 获取模态框表单
     */
    getForm(){
        let key: string
        let form:any
        let manager;
        if(this.state.showAddManager){
            key='addManager'
            form=this.state.addManager
            manager=<Input name="manager" type="text" desc="管理员账号" value={form.manager} onChange={(value: string)=>{this.setState({[key]:{
                    manager:value,
                    password:form.password,
                    confirmPwd:form.confirmPwd
                }})}}/>
        }else{
            key='modify'
            form=this.state.modify
        }
        return <Modal.Body>
            {manager}
            <Input name="password" type="password" desc="密码" value={form.password} onChange={(value: string)=>{this.setState({[key]:{
                    manager:form.manager,
                    password:value,
                    confirmPwd:form.confirmPwd
                }})}}/>
            <Input name="confirmPwd" type="password" desc="确认密码" value={form.confirmPwd} onChange={(value: string)=>{this.setState({[key]:{
                    manager:form.manager,
                    password:form.password,
                    confirmPwd:value
                }})}}
                   valid={this.checkPwd(form)}
            />
        </Modal.Body>
    }

    render() {


        //构造表格行数据
        const managerTr=this.state.managerList.map((manager:ManagerForm,index:number)=>
            <tr key={"tr"+index}>
                <td>{index+1}</td>
                <td>{manager.manager}</td>
                <td>
                    <Button variant="info" className="mr-3" onClick={()=>this.setState({showModifyPwd:true})}>修改密码</Button>
                    <Button variant="danger">删除</Button>
                </td>
            </tr>
        )

        const modalTitle=this.state.showModifyPwd?'修改密码':'添加管理员'

        return (
            <Tabs defaultActiveKey="info" id="uncontrolled-tab-example">
                <Tab eventKey="info" title="管理员信息">
                    <Button variant="primary" className="mt-3" onClick={()=>this.setState({showAddManager:true})}>添加管理员</Button>
                    <Table striped bordered hover className="mt-3">
                        <thead>
                        <tr>
                            <th>#</th>
                            <th>管理员名</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                            {managerTr}
                        </tbody>
                    </Table>


                    <Modal show={this.state.showModifyPwd||this.state.showAddManager} size="lg"
                           aria-labelledby="contained-modal-title-vcenter"
                           centered>
                        <Modal.Header closeButton>
                            <Modal.Title id="contained-modal-title-vcenter">
                                {modalTitle}
                            </Modal.Title>
                        </Modal.Header>
                        {this.getForm()}
                        <Modal.Footer className="ml-auto mr-auto">
                            <Button variant="info" onClick={()=>this.setState({showModifyPwd:false,showAddManager:false})}>{modalTitle}</Button>

                            <Button onClick={()=>this.setState({showModifyPwd:false,showAddManager:false})}>返回</Button>
                        </Modal.Footer>
                    </Modal>
                </Tab>
            </Tabs>
        );
    }
}