panqihua
/
help_admin
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

表单样式优化

Browse Source
0603
pan 4 years ago
parent 30b2560ca6
commit d85cd51428
7 changed files with 132 additions and 81 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 9
      src/Main.tsx
  2. 161
      src/User.tsx
  3. 9
      src/entity.ts
  4. 2
      src/ui/Address.tsx
  5. 2
      src/ui/InputGroup.tsx
  6. 16
      src/ui/MyDialog.tsx
  7. 14
      src/ui/UploadImg.tsx

9
src/Main.tsx
Unescape View File

@ -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}

161
src/User.tsx
Unescape View File

@ -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">
<UploadImg tip={"点击更新头像"} maxImageSize={maxImageSize} onChange={(value:string)=>
this.setState({ user:{...this.state.user,...{activityImgFile:value}}})} />
</div>
<Input name="name" desc="姓名" value={this.state.user.name} onChange={(value:string)=>
this.setState({
user:{...this.state.user,...{name:value}}
})} valid={{check:this.isNotEmpty(this.state.user.name)}}/>
<Input col={4} name="age" desc="年龄" value={this.state.user.age+""} onChange={(value:string)=>
this.setState({
user:{...this.state.user,...{age:+value}}
})
} as={"select"} options={this.ages.map(value=><option key={value} value={value}>{value}</option>)}/>
<Input col={4} name="sex" desc="性别" as="select" value={this.state.user.sex} 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)=>
<Row>
<Col className={"text-center"}>
<UploadImg imgClass={"mt-3 col-12"} tip={"点击更新头像"} maxImageSize={maxImageSize} onChange={(value:string)=>
this.setState({ user:{...this.state.user,...{activityImgFile:value}}})} />
</Col>
</Row>
<Row>
<Col>
<Input className={"mt-3 ml-auto"} name="name" desc="姓名" value={this.state.user.name} onChange={(value:string)=>
this.setState({
user:{...this.state.user,...{name:value}}
})} valid={{check:this.isNotEmpty(this.state.user.name)}}/>
</Col>
<Col>
<Input className={"mt-3 mr-auto"} name="age" desc="年龄" value={this.state.user.age+""} onChange={(value:string)=>
this.setState({
user:{...this.state.user,...{serviceAddress:value}}
user:{...this.state.user,...{age:+value}}
})
}/>
</div>
<Input col={4} 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>]}/>
<Input col={4} name="mobile" desc="电话" value={this.state.user.mobile} onChange={(value:string)=>
this.setState({
user:{...this.state.user,...{mobile:value}}
})
} valid={{check:this.checkMobile()}}/>
<Input col={4} name="email" value={this.state.user.email} desc="邮箱" onChange={(value:string)=>
this.setState({
user:{...this.state.user,...{email:value}}
})
} valid={{check:this.checkEmail()}}/>
<Input col={7} 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)}}/>
} as={"select"} valid={{check:true}} options={this.ages.map(value=><option key={value} value={value}>{value}</option>)}/>
</Col>
</Row>
<Row>
<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({
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>]}/>
</Col>
<Col>
<Input className={"mt-3 mr-auto"} 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)}}/>
</Col>
</Row>
<Row>
<Col>
<Address className={"mt-3 ml-auto"} value={this.state.user.serviceAddress} onChange={(value:string)=>
this.setState({
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>

9
src/entity.ts
Unescape View File

@ -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 {

2
src/ui/Address.tsx
Unescape View File

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

2
src/ui/InputGroup.tsx
Unescape View File

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

16
src/ui/MyDialog.tsx
Unescape View File

@ -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"}}

14
src/ui/UploadImg.tsx
Unescape View File

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

Write Preview
Loading…
Cancel
Save