1.修改用户信息增加性别，年龄等详细信息修改项

2.活动管理可修改活动标题，内容

package.json

@@ -13,6 +13,7 @@
     "@types/react-dom": "^16.9.0",
     "bootstrap": "^4.5.0",
     "http-proxy-middleware": "^1.0.4",
+    "moment": "^2.26.0",
     "react": "^16.13.1",
     "react-bootstrap": "^1.0.1",
     "react-cookie": "^4.0.3",
@@ -22,7 +23,7 @@
     "typescript": "~3.7.2"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "set PORT=3000&&react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"

src/Active.tsx

@@ -1,10 +1,55 @@
 import React from "react";
-import {Button, Tab, Table, Tabs} from "react-bootstrap";
+import {Button, Form, ListGroup, Tab, Table, Tabs} from "react-bootstrap";
-import {ActiveForm, ManagerActivity} from "./entity";
+import {ManagerActivity} from "./entity";
-import {Method, request} from "./interface";
+import {JSONResponse, Method, request} from "./interface";
 import {API} from "./api";
-import {FindActivityRes, FindActivityTransform, PageDataMessage} from "./result";
+import {EmptyBodyTransform, FindActivityRes, FindActivityTransform, PageDataMessage, SimpleMessage} from "./result";
 import {MyDialog} from "./ui/MyDialog";
+import moment from "moment";
+import {Input} from "./ui/InputGroup";
+
+const contentMaxLength=50
+
+class EditActive extends React.Component<
+    {
+        onClick:Function;
+        activity:ManagerActivity;
+    },
+    {
+        activity:ManagerActivity;
+    }>{
+
+
+    constructor(props: Readonly<{ onClick: Function; activity: ManagerActivity }>) {
+        super(props);
+
+        this.state={
+            activity:this.props.activity
+        }
+    }
+
+    render() {
+        return (
+            <Form>
+                <Input name="title" desc="活动标题" value={this.state.activity.title} onChange={(value:string)=>
+                    this.setState({
+                        activity:{...this.state.activity,...{title:value}}
+                    })} valid={{check:this.isNotEmpty(this.state.activity.title)}}/>
+
+                <Input name="content" desc="活动内容"  value={this.state.activity.content} as="textarea" valid=
+                    {{check:this.state.activity.content.length>0,valid:this.state.activity.content.length===0?
+                            "验证失败":"您还可输入"+(contentMaxLength-this.state.activity.content.length+"个字符")}}
+                       maxLength={contentMaxLength} onChange={(value:string)=>this.setState({activity:{...this.state.activity,...{content:value}}})}/>
+
+                <Button variant={"info"} block={true} className="ml-auto mr-auto col-3 mt-3" onClick={()=>this.props.onClick(this.state.activity)}>提交</Button>
+            </Form>
+        );
+    }
+
+    private isNotEmpty(name: any) {
+        return String(name).length>0;
+    }
+}
 
 /**
  * 活动管理
@@ -12,6 +57,7 @@ import {MyDialog} from "./ui/MyDialog";
 export class Active extends React.Component<any, {
     activeList?:Array<ManagerActivity>;
     tipContent:JSX.Element|null
+    dialog:JSX.Element|null
 }>{
 
 
@@ -19,7 +65,8 @@ export class Active extends React.Component<any, {
         super(props);
 
         this.state={
-            tipContent:null
+            tipContent:null,
+            dialog:null
         }
     }
 
@@ -61,24 +108,42 @@ export class Active extends React.Component<any, {
                                 <th>#</th>
                                 <th>活动标题</th>
                                 <th>活动内容</th>
+                                <th>开始时间</th>
+                                <th>结束时间</th>
+                                <th>求助用户id</th>
+                                <th>帮助用户id</th>
                                 <th>操作</th>
                             </tr>
                         </thead>
                         <tbody>
-                            {this.state.activeList?this.state.activeList.length>0?this.state.activeList.map((active:ActiveForm,index:number)=>
+                            {this.state.activeList?this.state.activeList.length>0?this.state.activeList.map((active:ManagerActivity,index:number)=>
                                 <tr key={"tr"+index}>
                                     <td>{index+1}</td>
                                     <td>{active.title}</td>
                                     <td>{active.content}</td>
+                                    <td>{moment(active.activityStartTime).format("YYYY-MM-DD HH:mm:ss")}</td>
+                                    <td>{moment(active.activityEndTime).format("YYYY-MM-DD HH:mm:ss")}</td>
+                                    <td>{active.seekHelpUser}</td>
                                     <td>
-                                        {/*<Button variant="danger">删除</Button>*/}
+                                        {active.helpUser != null ?
+                                            <ListGroup>
+                                                {active.helpUser.map((userId,index) =>
+                                                    <ListGroup.Item key={'item'+index}>{userId}</ListGroup.Item>)}
+                                            </ListGroup>:'无'
+                                        }
                                     </td>
+                                    <td><Button variant={"info"} onClick={()=>this.setState({
+                                            dialog:<MyDialog content={<EditActive onClick={(activity:ManagerActivity)=>this.modifyActivity(activity)} activity={active}/>} open={true} titleId={"activity-dialog"} menuName={"修改活动信息"}
+                                                             onClose={()=>this.setState({dialog:null})}/>
+                                    })}>修改活动信息</Button></td>
                                 </tr>
                             ):<h3 className="text-center text-info">没有活动信息</h3>:null
                             }
                         </tbody>
                     </Table>
 
+                    {this.state.dialog}
+
                     <MyDialog content={this.state.tipContent} open={this.state.tipContent!=null} titleId={"user-dialog"} menuName={"操作提示"}
                               onClose={()=>this.setState({
                                   tipContent:null
@@ -87,4 +152,32 @@ export class Active extends React.Component<any, {
             </Tabs>
         );
     }
+
+    /**
+     * 修改活动信息
+     * @param activity
+     */
+    private modifyActivity(activity: ManagerActivity) {
+        let that=this
+        request(API.account.updateActivity+activity.activityId,Method.POST, {
+                title:activity.title,
+                content:activity.content
+            },
+            new EmptyBodyTransform(),function (res:JSONResponse<SimpleMessage>) {
+                switch (res.customResult) {
+                    case SimpleMessage.ok:
+                        that.setState({
+                            tipContent:<h3 className="text-info text-center">修改成功</h3>,
+                            dialog:null
+                        })
+                        that.loadActive(1)
+                        break
+                    case SimpleMessage.fail:
+                        that.setState({
+                            tipContent:<h3 className="text-danger text-center">修改失败，请联系管理员</h3>
+                        })
+                        break
+                }
+        })
+    }
 }

src/Main.tsx

@@ -5,6 +5,7 @@ import {User} from "./User";
 import {Active} from "./Active";
 import {Cookies} from "react-cookie";
 import {manager_cookie} from "./account/PropCookie";
+import {fontEnd} from "./api";
 
 /**
  * 菜单标记
@@ -78,7 +79,7 @@ export class Main extends React.Component<
                     <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>
                 </Navbar>
                 {this.state.subMenu}

src/User.tsx

@@ -6,39 +6,136 @@ import {JSONResponse, Method, request} from "./interface";
 import {API, prefix} from "./api";
 import {EmptyBodyTransform, FindUserRes, FindUserTransform, PageDataMessage, SimpleMessage} from "./result";
 import {MyDialog} from "./ui/MyDialog";
+import {Address} from "./ui/Address";
 
 class EditUser extends React.Component<{
     user:UserEntity;
     modifyUser:Function;
 }, {
         user:UserEntity;
-        tipContent:JSX.Element|null;
     }>{
 
+    private ages:Array<number>
 
     constructor(props: Readonly<{ user: UserEntity ,modifyUser:Function;}>) {
         super(props);
 
+        this.ages=this.createAge()
+
         this.state={
-            user:this.props.user,
+            user:this.props.user
-            tipContent:null
         }
     }
 
     render() {
         return (
             <Form>
-                <Input name="name" desc="姓名" value={this.state.user.name} onChange={(value:string)=>this.setState({
+                <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)}}/>
 
-                <Button variant="info" block={true} className={"ml-auto mr-auto mt-3 col-3"} onClick={()=>this.props.modifyUser(this.state.user)}>提交</Button>
+                <div className="mt-3">
+                    <Address value={this.state.user.serviceAddress} onChange={(value:string)=>
+                        this.setState({
+                            user:{...this.state.user,...{serviceAddress: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)}}/>
+
+
+
+                <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>
 
             </Form>
         );
     }
+
+    private createAge(){
+        let age=[]
+        for(let i=18;i<100;i++){
+            age.push(i)
+        }
+        return age
+    }
+
+    /**
+     * 检查手机号
+     */
+    checkMobile(){
+        return  /1[3456789]\d{9}/g.test(this.state.user.mobile.toString())
+    }
+
+    /**
+     * 检查邮箱
+     */
+    private checkEmail() {
+        return /[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}/g.test(this.state.user.email)
+    }
+
+    //检查是否为空
+    isNotEmpty(...value:(string | number)[]){
+        for(let index in value){
+            if(value[index].toString().length===0){
+                return false
+            }
+        }
+        return true
+    }
+
+    private check() {
+        return this.isNotEmpty(this.state.user.userId,this.state.user.name,this.state.user.sex,
+            this.state.user.serviceAddress,this.state.user.userType,this.state.user.info)
+            &&this.checkMobile()&&this.checkEmail()
+    }
 }
 
 /**
@@ -107,14 +204,16 @@ export class User extends React.Component<
                                 <th>#</th>
                                 <th>用户账号</th>
                                 <th>姓名</th>
-                                <th>性别</th>
                                 <th>年龄</th>
+                                <th>性别</th>
+                                <th>住址</th>
                                 <th>头像</th>
+                                <th>服务地点</th>
+                                <th>用户身份</th>
                                 <th>电话</th>
                                 <th>邮箱</th>
-                                <th>地点</th>
                                 <th>时间币</th>
-                                <th>个人描述</th>
+                                <th>简介</th>
                                 <th>操作</th>
                             </tr>
                         </thead>
@@ -124,8 +223,9 @@ export class User extends React.Component<
                                     <td className="align-middle">{index+1}</td>
                                     <td className="align-middle">{user.userId}</td>
                                     <td className="align-middle">{user.name}</td>
-                                    <td className="align-middle">{user.sex}</td>
                                     <td className="align-middle">{user.age}</td>
+                                    <td className="align-middle">{user.sex==='man'?'男':'女'}</td>
+                                    <td className="align-middle">{user.address}</td>
                                     <td className="align-middle">
                                         {<Image className="head-img" src={prefix.image+user.headImg} onClick={()=>this.setState({
                                             dialog:<MyDialog content={<Image src={prefix.image + user.headImg}/>}
@@ -135,9 +235,11 @@ export class User extends React.Component<
                                             })}/>
                                         })}/>}
                                     </td>
+                                    <td className="align-middle">{user.serviceAddress}</td>
+                                    <td className="align-middle">{user.userType===UserType.seekHelp?'服务发起者':'服务接受者'}</td>
                                     <td className="align-middle">{user.mobile}</td>
                                     <td className="align-middle">{user.email}</td>
-                                    <td className="align-middle">{user.address}</td>
+
                                     <td className="align-middle">{user.timeScore}</td>
                                     <td className="align-middle">{user.info}</td>
                                     <td className="align-middle">
@@ -173,7 +275,16 @@ export class User extends React.Component<
         let that=this
         request(API.account.updateUser,Method.POST, {
             userId:user.userId,
-            name:user.name
+            name:user.name,
+            age:String(user.age),
+            sex:String(user.sex),
+            address:user.address,
+            serviceAddress:user.serviceAddress,
+            userType:user.userType,
+            mobile:user.mobile,
+            email:user.email,
+            info:user.info
+
         },new EmptyBodyTransform(),function (res:JSONResponse<SimpleMessage>) {
             switch (res.customResult) {
                 case SimpleMessage.ok:

src/api.ts

@@ -6,6 +6,8 @@ export const prefix={
     user:'/api/user',
     image: "/image/"
 }
+//用户前台地址
+export const fontEnd="http://localhost:3001"
 
 //接口地址
 export const API={
@@ -25,7 +27,9 @@ export const API={
     //    更新用户信息
         updateUser:prefix.manager+'/userUpdate',
         //查询活动信息
-        findActivity:prefix.manager+'/find/activity'
+        findActivity:prefix.manager+'/find/activity',
+        //修改活动信息
+        updateActivity:prefix.manager+'/update/'
     },
     user:{
 

src/entity.ts

@@ -172,7 +172,7 @@ export enum UserType {
     seekHelp="seekHelp",
     help="help"
 }
-
+//活动列表
 export interface ManagerActivity {
     activityId:number;
     content:string;
@@ -184,3 +184,16 @@ export interface ManagerActivity {
     helpUser:Array<string>;
 }
 
+/**
+ * 地点信息
+ */
+export interface AddressProps {
+    address:string;
+}
+
+export interface OnChangeAddress {
+    onChange:Function;
+    col?:number;
+    value?:string;
+}
+

src/ui/Address.tsx

@@ -0,0 +1,56 @@
+import {Form, InputGroup} from "react-bootstrap";
+import {AddressProps, OnChangeAddress} from "../entity";
+import React from "react";
+
+/**
+ * 加载服务地点信息
+ */
+export class Address extends React.Component<OnChangeAddress, { addressList:Array<{ address:string }> }>{
+
+
+    constructor(props: Readonly<OnChangeAddress>) {
+        super(props);
+
+        this.state={
+            addressList:[],
+
+        }
+    }
+
+    componentDidMount() {
+        this.loadAddress()
+    }
+
+    /**
+     * 加载服务地点
+     */
+    loadAddress(){
+        this.setState({
+            addressList:[{
+                address:"北京",
+            },
+                {
+                    address:"广州",
+                },
+                {
+                    address:"上海",
+                }]
+        })
+    }
+
+    render() {
+        return (
+            <InputGroup className={"col-"+(this.props.col?this.props.col:3)+" ml-auto mr-auto"}>
+                <InputGroup.Prepend>
+                    <InputGroup.Text>服务地点</InputGroup.Text>
+                </InputGroup.Prepend>
+                <Form.Control as="select" value={this.props.value} custom onChange={(e)=>this.props.onChange(e.target.value)}>
+                    <option value="">请选择服务地点</option>
+                    {this.state.addressList.map((address:AddressProps, index:number)=>
+                        <option key={"option"+index} value={address.address} >{address.address}</option>
+                    )}
+                </Form.Control>
+            </InputGroup>
+        )
+    }
+}

src/ui/MyDialog.tsx

@@ -1,10 +1,14 @@
 import React from "react";
 import Dialog from "@material-ui/core/Dialog";
 import Draggable from "react-draggable";
-import {Paper} from "@material-ui/core";
+import {Paper, styled, withWidth} from "@material-ui/core";
 import {MyDialogProps} from "../entity";
 import {CloseDialog} from "./CloseDialog";
 
+
+const EditDialogPaper=styled(Paper)({
+    maxWidth:1000
+})
 /**
  * 我的弹窗
  */
@@ -18,7 +22,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"]'}>
-                        <Paper {...props} />
+                        <EditDialogPaper  {...props} />
                     </Draggable>}
                 aria-labelledby={this.props.titleId}
                 classes={{paper:"w-100"}}

yarn.lock

@@ -7101,6 +7101,11 @@ mkdirp@^0.5.1, mkdirp@^0.5.3, mkdirp@~0.5.1:
   dependencies:
     minimist "^1.2.5"
 
+moment@^2.26.0:
+  version "2.26.0"
+  resolved "https://registry.npm.taobao.org/moment/download/moment-2.26.0.tgz#5e1f82c6bafca6e83e808b30c8705eed0dcbd39a"
+  integrity sha1-Xh+Cxrr8pug+gIswyHBe7Q3L05o=
+
 move-concurrently@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npm.taobao.org/move-concurrently/download/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"