表单样式优化

src/Main.tsx

@@ -1,9 +1,11 @@
 import React from "react";
-import {Nav, Navbar} from "react-bootstrap";
+import {Button, Nav, Navbar} from "react-bootstrap";
 import {Manager} from "./Manager";
 import {User} from "./User";
 import {Active} from "./Active";
 import {Cookies} from "react-cookie";
+import {manager_cookie} from "./account/PropCookie";
+import {fontEnd} from "./api";
 
 /**
  * 菜单标记
@@ -92,6 +94,11 @@ export class Main extends React.Component<
                         <Nav.Item className="col-2">
                             <Nav.Link style={this.getMenuColor(Menu.active)} onClick={()=>this.changeMenu(Menu.active)}>活动管理</Nav.Link>
                         </Nav.Item>
+                        <Navbar.Text>
+                            欢迎管理员{this.props.cookies.get(manager_cookie)}登录
+                        </Navbar.Text>
+                        <Button variant="outline-info" className="ml-3" onClick={()=>window.location.href=fontEnd}>切换前台</Button>
+                        <Button variant="outline-primary" className="ml-3" onClick={()=>this.props.logout()}>注销登录</Button>
                     </Nav>
                 </Navbar>
                 {this.state.subMenu}

src/User.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import {Button, Form, Image, Tab, Table, Tabs} from "react-bootstrap";
+import {Button, Col, Form, Image, Row, Tab, Table, Tabs} from "react-bootstrap";
 import {PageProps, UserEntity, UserType} from "./entity";
 import {Input} from "./ui/InputGroup";
 import {JSONResponse, Method, request} from "./interface";
@@ -39,71 +39,102 @@ class EditUser extends React.Component<{
     render() {
         return (
             <Form>
-                <div className="text-center ml-auto mr-auto">
+                <Row>
-                    <UploadImg tip={"点击更新头像"} maxImageSize={maxImageSize} onChange={(value:string)=>
+                    <Col className={"text-center"}>
-                        this.setState({ user:{...this.state.user,...{activityImgFile:value}}})} />
+                        <UploadImg imgClass={"mt-3 col-12"} tip={"点击更新头像"} maxImageSize={maxImageSize} onChange={(value:string)=>
-                </div>
+                            this.setState({ user:{...this.state.user,...{activityImgFile:value}}})} />
-                <Input name="name" desc="姓名" value={this.state.user.name} onChange={(value:string)=>
+                    </Col>
-                    this.setState({
+                </Row>
-                    user:{...this.state.user,...{name:value}}
+                <Row>
-                })} valid={{check:this.isNotEmpty(this.state.user.name)}}/>
+                    <Col>
-
+                        <Input className={"mt-3 ml-auto"} name="name" desc="姓名" value={this.state.user.name} onChange={(value:string)=>
-                <Input col={4} name="age" desc="年龄" value={this.state.user.age+""} onChange={(value:string)=>
+                            this.setState({
-                    this.setState({
+                            user:{...this.state.user,...{name:value}}
-                        user:{...this.state.user,...{age:+value}}
+                        })} valid={{check:this.isNotEmpty(this.state.user.name)}}/>
-                    })
+                    </Col>
-                } as={"select"} options={this.ages.map(value=><option key={value} value={value}>{value}</option>)}/>
+
-
+                    <Col>
-                <Input col={4} name="sex" desc="性别" as="select" value={this.state.user.sex} onChange={(value:string)=>{
+                    <Input className={"mt-3 mr-auto"} name="age" desc="年龄" value={this.state.user.age+""} onChange={(value:string)=>
-                    this.setState({
-                        user:{...this.state.user,...{sex:value}}
-                    })
-                }}
-                       options={[
-                           <option value="" key={"sex"+0}>请选择性别</option>,
-                           <option value="man" key={"sex"+1}>男</option>,
-                           <option value="women" key={"sex"+2}>女</option>]}/>
-
-                <Input name="address" desc="住址" value={this.state.user.address} onChange={(value:string)=>this.setState({
-                    user:{...this.state.user,...{address:value}}
-                })} valid={{check:this.isNotEmpty(this.state.user.address)}}/>
-
-                <div className="mt-3">
-                    <Address value={this.state.user.serviceAddress} onChange={(value:string)=>
                         this.setState({
-                            user:{...this.state.user,...{serviceAddress:value}}
+                            user:{...this.state.user,...{age:+value}}
                         })
-                    }/>
+                    } as={"select"} valid={{check:true}} options={this.ages.map(value=><option key={value} value={value}>{value}</option>)}/>
-                </div>
+                    </Col>
-
+                </Row>
-                <Input col={4} name="userType" desc="用户身份" as="select" value={this.state.user.userType} onChange={(value:string)=>
+
-                    this.setState({
+                <Row>
-                        user:{...this.state.user,...{userType:value}}
+                    <Col>
-                    })
+                        <Input className={"mt-3 ml-auto"} valid={{check:this.state.user.sex!==""}} name="sex" desc="性别" as="select" value={this.state.user.sex} onChange={(value:string)=>{
-                }
+                            this.setState({
-                       options={[<option value="" key={"userType0"}>请选择用户身份</option>,
+                                user:{...this.state.user,...{sex:value}}
-                           <option key={"userType1"} value={UserType.seekHelp}>服务发起者</option>,
+                            })
-                           <option key={"userType2"} value={UserType.help}>服务接收者</option>]}/>
+                        }}
-
+                               options={[
-                <Input col={4} name="mobile" desc="电话" value={this.state.user.mobile} onChange={(value:string)=>
+                                   <option value="" key={"sex"+0}>请选择性别</option>,
-                    this.setState({
+                                   <option value="man" key={"sex"+1}>男</option>,
-                        user:{...this.state.user,...{mobile:value}}
+                                   <option value="women" key={"sex"+2}>女</option>]}/>
-                    })
+                    </Col>
-                } valid={{check:this.checkMobile()}}/>
+
-
+                    <Col>
-                <Input col={4} name="email" value={this.state.user.email} desc="邮箱" onChange={(value:string)=>
+                        <Input className={"mt-3 mr-auto"} name="address" desc="住址" value={this.state.user.address} onChange={(value:string)=>this.setState({
-                    this.setState({
+                        user:{...this.state.user,...{address:value}}
-                        user:{...this.state.user,...{email:value}}
+                    })} valid={{check:this.isNotEmpty(this.state.user.address)}}/>
-                    })
+                    </Col>
-                } valid={{check:this.checkEmail()}}/>
+                </Row>
-
+
-                <Input col={7} name="info" desc="简介" value={this.state.user.info} as={"textarea"} onChange={(value:string)=>
+                <Row>
-                    this.setState({
+
-                    user:{...this.state.user,...{info:value}}
+                    <Col>
-                })
+                        <Address className={"mt-3 ml-auto"}  value={this.state.user.serviceAddress} onChange={(value:string)=>
-                }
+                            this.setState({
-                valid={{check:this.isNotEmpty(this.state.user.info)}}/>
+                                user:{...this.state.user,...{serviceAddress:value}}
-
+                            })
+                        }/>
+                    </Col>
+
+                    <Col>
+                        <Input className={"mt-3 mr-auto"} name="userType" desc="用户身份" as="select" value={this.state.user.userType} onChange={(value:string)=>
+                            this.setState({
+                                user:{...this.state.user,...{userType:value}}
+                            })
+                        }
+                               options={[<option value="" key={"userType0"}>请选择用户身份</option>,
+                                   <option key={"userType1"} value={UserType.seekHelp}>服务发起者</option>,
+                                   <option key={"userType2"} value={UserType.help}>服务接收者</option>]}/>
+                    </Col>
+
+                </Row>
+
+                <Row>
+
+                    <Col>
+                        <Input className={"mt-3 ml-auto"} name="mobile" desc="电话" maxLength={11} value={this.state.user.mobile} onChange={(value:string)=>
+                            this.setState({
+                                user:{...this.state.user,...{mobile:value}}
+                            })
+                        } valid={{check:this.checkMobile()}}/>
+                    </Col>
+
+                    <Col>
+                        <Input className={"mt-3 mr-auto"} name="email" value={this.state.user.email} desc="邮箱" onChange={(value:string)=>
+                            this.setState({
+                                user:{...this.state.user,...{email:value}}
+                            })
+                        } valid={{check:this.checkEmail()}}/>
+                    </Col>
+
+                </Row>
+
+                <Row>
+                    <Col>
+                        <Input className={"ml-auto mr-auto mt-3 pl-0 pr-0"} name="info" desc="简介" value={this.state.user.info} as={"textarea"} onChange={(value:string)=>
+                            this.setState({
+                            user:{...this.state.user,...{info:value}}
+                        })
+                        }
+                        valid={{check:this.isNotEmpty(this.state.user.info)}}/>
+                    </Col>
+                </Row>
 
 
                 <Button variant="info" block={true} disabled={!this.check()} className={"ml-auto mr-auto mt-3 col-3"} onClick={()=>this.props.modifyUser(this.state.user)}>确认修改</Button>
@@ -259,7 +290,7 @@ export class User extends React.Component<
                                     <td className="align-middle">{user.info}</td>
                                     <td className="align-middle">
                                         <Button variant="info" className="mr-3" onClick={()=>this.setState({
-                                            dialog:<MyDialog content={<EditUser modifyUser={(user:UserEntity)=>this.modifyUser(user)} user={user}/>} open={true} titleId={"user-edit-dialog"} menuName={"修改用户信息"}
+                                            dialog:<MyDialog  content={<EditUser modifyUser={(user:UserEntity)=>this.modifyUser(user)} user={user}/>} open={true} titleId={"user-edit-dialog"} menuName={"修改用户信息"}
                                                              onClose={()=>this.setState({dialog:null})}/>
                                         })}>修改用户信息</Button>
                                         <Button variant="danger" className="mr-3">删除</Button>

src/entity.ts

@@ -75,12 +75,14 @@ export interface FormInputProps {
         valid?: String;
         invalid?: String;
     }
-    //bootstrap col
-    col?: number
     //长度
     maxLength?: number
     //选项
     options?:Array<JSX.Element>;
+    //bootstrap col
+    col?: number
+    //整体样式，若存在会覆盖col局部样式
+    className?:string;
 }
 
 /**
@@ -147,6 +149,8 @@ export interface MyDialogProps extends CloseDialogProps{
     content:JSX.Element|null;
     //弹窗状态
     open:boolean;
+    //窗口宽度
+    maxWidth?:number;
 }
 
 /**
@@ -197,6 +201,7 @@ export interface OnChangeAddress {
     onChange:Function;
     col?:number;
     value?:string;
+    className?:string;
 }
 
 export interface TimeScore {

src/ui/Address.tsx

@@ -40,7 +40,7 @@ export class Address extends React.Component<OnChangeAddress, { addressList:Arra
 
     render() {
         return (
-            <InputGroup className={"col-"+(this.props.col?this.props.col:3)+" ml-auto mr-auto"}>
+            <InputGroup className={this.props.className?this.props.className:"col-"+(this.props.col?this.props.col:3)+" ml-auto mr-auto"}>
                 <InputGroup.Prepend>
                     <InputGroup.Text>服务地点</InputGroup.Text>
                 </InputGroup.Prepend>

src/ui/InputGroup.tsx

@@ -27,7 +27,7 @@ export class Input extends React.Component<FormInputProps, { undefined?:undefine
 
     render() {
         return (
-            <InputGroup className={"col-"+(this.props.col||7)+" ml-auto mr-auto mt-3"}>
+            <InputGroup className={this.props.className?this.props.className:"col-"+(this.props.col||7)+" ml-auto mr-auto mt-3"}>
                 <InputGroup.Prepend>
                     <InputGroup.Text id={this.props.name}>{this.props.desc}</InputGroup.Text>
                 </InputGroup.Prepend>

src/ui/MyDialog.tsx

@@ -6,14 +6,20 @@ import {MyDialogProps} from "../entity";
 import {CloseDialog} from "./CloseDialog";
 
 
-const EditDialogPaper=styled(Paper)({
-    maxWidth:1000
-})
 /**
  * 我的弹窗
  */
-export class MyDialog extends React.Component<MyDialogProps, { undefined?:undefined }>{
+export class MyDialog extends React.Component<MyDialogProps, { defaultPaper:any }>{
 
+    private EditDialogPaper:any;
+
+    constructor(props: Readonly<MyDialogProps>) {
+        super(props);
+
+        this.EditDialogPaper=styled(Paper)({
+            maxWidth:this.props.maxWidth?this.props.maxWidth:600
+        })
+    }
 
     render() {
         return (
@@ -22,7 +28,7 @@ export class MyDialog extends React.Component<MyDialogProps, { undefined?:undefi
                 open={this.props.open}
                 PaperComponent={(props)=>
                     <Draggable handle={"#"+this.props.titleId} cancel={'[class*="MuiDialogContent-root"]'}>
-                        <EditDialogPaper  {...props} />
+                        {<this.EditDialogPaper {...props}/>}
                     </Draggable>}
                 aria-labelledby={this.props.titleId}
                 classes={{paper:"w-100"}}

src/ui/UploadImg.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import {Form, Image} from "react-bootstrap";
+import {Form, Image, Row} from "react-bootstrap";
 import path from "path";
 
 /**
@@ -16,6 +16,8 @@ export class UploadImg extends React.Component<
         };
         //上传事件
         onChange:Function;
+        //默认样式
+        imgClass?:string;
 }, {
     //imgObj
     imgObj?:any;
@@ -24,7 +26,7 @@ export class UploadImg extends React.Component<
 }>{
 
 
-    constructor(props: Readonly<{ tip: string; maxImageSize: { width: number; height: number }; onChange: Function }>) {
+    constructor(props: Readonly<{ tip: string; maxImageSize: { width: number; height: number }; onChange: Function; imgClass: string }>) {
         super(props);
 
         this.state={}
@@ -32,11 +34,11 @@ export class UploadImg extends React.Component<
 
     render() {
         return (
-            <div>
+            <Row>
                     {/*
                         预览背景图
                         */}
-                <Image className="mt-3 d-none" src={this.state.imgObj} onLoad={(s)=> {
+                <Image className="ml-auto mr-auto mt-3 d-none" src={this.state.imgObj} onLoad={(s)=> {
                     if (s.target instanceof HTMLImageElement) {
                         //限制图片显示大小
                         s.target.width = s.target.width > this.props.maxImageSize.width ? this.props.maxImageSize.width : s.target.width
@@ -47,7 +49,7 @@ export class UploadImg extends React.Component<
                 }/>
 
                 {/*上传背景图*/}
-                <div className="col-7 ml-auto mr-auto mt-3">
+                <div className={this.props.imgClass?this.props.imgClass:"col-7 ml-auto mr-auto mt-3"}>
                     <Form.File
                         label={this.state.imageName?path.basename(this.state.imageName.replace(/\\/g,'/')):this.props.tip}
                         custom
@@ -65,7 +67,7 @@ export class UploadImg extends React.Component<
                         }}
                     />
                 </div>
-            </div>
+            </Row>
         )
     }
 }