ywt-react/view/MyAssociatedDoctor/MyAssociatedDoctor.js

import React from 'react';
import DefaultAvatar from '../../assets/img-defaultAvatar.png';
import Logo from '../../assets/img-logo.png';
import MyTab from '../../components/MyTab/MyTab';
import Chat from '../../components/Chat/Chat';
import FieldGroup from '../../components/FieldGroup/FieldGroup';
import {OverlayTrigger, Popover, Col, Image, FormGroup,InputGroup, FormControl, Glyphicon, Button, Table} from 'react-bootstrap';

const popoverBottom = (
	<Popover id="popover-positioned-scrolling-bottom">
		<Button bsSize="xsmall" href="#/" style={{border:0,background:'#fff',width:'120px'}}><Glyphicon glyph="off" />退  出</Button>
	</Popover>
);

class App extends React.Component{
	constructor(props){
		super(props);
		this.state = {
			appointmentModal: false,//邀约弹窗
			appConfirmModal: false,//确认邀约弹窗
			appWaitedModal: false,//等待支付弹窗
			addPatientModal: false,//添加患者弹窗显示状态
			btnSatus: 0,//获取验证码按钮状态
			btnText: '获取动态密码',//按钮text
			intervalTime: 9,//时间
			errorText: '',//错误提示
			errorType: true,//是否错误
			patientCaptcha: false,//患者验证码
			showChat: false,//是否进入会话
			patientForm: {
				name: '',//姓名
				sex: '',//性别
				age: '',//年龄
				phone: '',//电话
				captcha: '',//验证码
			},
			patientFormInit: {
				name: '',//姓名
				sex: '',//性别
				age: '',//年龄
				phone: '',//电话
				captcha: '',//验证码
			},
			patientList: [
				{id: 1,name: '王帆',sex: 'men',age: '26',phone: '18904032521'},
				{id: 2,name: '王帆',sex: 'men',age: '26',phone: '18904032521'},
				{id: 3,name: '王帆',sex: 'men',age: '26',phone: '18904032521'},
				{id: 4,name: '王帆',sex: 'men',age: '26',phone: '18904032521'},
				{id: 5,name: '王帆',sex: 'men',age: '26',phone: '18904032521'},
				{id: 6,name: '王帆',sex: 'men',age: '26',phone: '18904032521'},
				{id: 7,name: '王帆',sex: 'men',age: '26',phone: '18904032521'},
				{id: 8,name: '王帆',sex: 'men',age: '26',phone: '18904032521'},
				{id: 9,name: '王帆',sex: 'men',age: '26',phone: '18904032521'},
				{id: 10,name: '王帆',sex: 'men',age: '26',phone: '18904032521'},
				{id: 11,name: '王帆',sex: 'men',age: '26',phone: '18904032521'},
				{id: 12,name: '王帆',sex: 'men',age: '26',phone: '18904032521'},
				{id: 13,name: '王帆',sex: 'men',age: '26',phone: '18904032521'},
				{id: 14,name: '王帆',sex: 'men',age: '26',phone: '18904032521'},
				{id: 15,name: '王帆',sex: 'men',age: '26',phone: '18904032521'}
			],
			doctorList: [
				{id: 1,name: '王瀚哲1',title: '主任医师',hospital: '南方医院',department: '口腔科',speciality: '牙体牙髓疾病、前牙美……'},
				{id: 2,name: '王瀚哲2',title: '主任医师',hospital: '南方医院',department: '口腔科',speciality: '牙体牙髓疾病、前牙美……'},
				{id: 3,name: '王瀚哲3',title: '主任医师',hospital: '南方医院',department: '口腔科',speciality: '牙体牙髓疾病、前牙美……'},
				{id: 4,name: '王瀚哲4',title: '主任医师',hospital: '南方医院',department: '口腔科',speciality: '牙体牙髓疾病、前牙美……'},
				{id: 5,name: '王瀚哲5',title: '主任医师',hospital: '南方医院',department: '口腔科',speciality: '牙体牙髓疾病、前牙美……'},
				{id: 6,name: '王瀚哲6',title: '主任医师',hospital: '南方医院',department: '口腔科',speciality: '牙体牙髓疾病、前牙美……'},
			],
			orderList:[
				{id: 1,associateDoctor: '王瀚哲',transferStatus: '转出', date: '2017/09/24  10:00', orderStatus: '已经结束'},
				{id: 2,associateDoctor: '王瀚哲',transferStatus: '转出', date: '2017/09/24  10:00', orderStatus: '进入会话'},
				{id: 3,associateDoctor: '王瀚哲',transferStatus: '转出', date: '2017/09/24  10:00', orderStatus: '已经结束'},
				{id: 4,associateDoctor: '王瀚哲',transferStatus: '转出', date: '2017/09/24  10:00', orderStatus: '进入会话'},
				{id: 5,associateDoctor: '王瀚哲',transferStatus: '转出', date: '2017/09/24  10:00', orderStatus: '进入会话'},
				{id: 6,associateDoctor: '王瀚哲',transferStatus: '转出', date: '2017/09/24  10:00', orderStatus: '进入会话'},
				{id: 7,associateDoctor: '王瀚哲',transferStatus: '转出', date: '2017/09/24  10:00', orderStatus: '已经结束'},
				{id: 8,associateDoctor: '王瀚哲',transferStatus: '转出', date: '2017/09/24  10:00', orderStatus: '进入会话'},
				{id: 9,associateDoctor: '王瀚哲',transferStatus: '转出', date: '2017/09/24  10:00', orderStatus: '已经结束'},
				{id: 10,associateDoctor: '王瀚哲',transferStatus: '转出', date: '2017/09/24  10:00', orderStatus: '已经结束'},
				{id: 11,associateDoctor: '王瀚哲',transferStatus: '转出', date: '2017/09/24  10:00', orderStatus: '已经结束'}
			]
		};
		this.openAddPatientModal = this.openAddPatientModal.bind(this);
		this.closeAddPatientModal = this.closeAddPatientModal.bind(this);
		this.submitPatient = this.submitPatient.bind(this);
		this.handleInputChange = this.handleInputChange.bind(this);
		this.intervalMethod = this.intervalMethod.bind(this);
		this.showAppointmentModal = this.showAppointmentModal.bind(this);
		this.hideAppointmentModal = this.hideAppointmentModal.bind(this);
		this.showAppConfirmModalModal = this.showAppConfirmModalModal.bind(this);
		this.hideAppConfirmModalModal = this.hideAppConfirmModalModal.bind(this);
		this.showAppWaitedModalModal = this.showAppWaitedModalModal.bind(this);
		this.hideAppWaitedModalModal = this.hideAppWaitedModalModal.bind(this);
		this.showChat = this.showChat.bind(this);
		this.hideChat = this.hideChat.bind(this);
	}

	//隐藏会话窗口
	hideChat() {
		this.setState({
			showChat: false
		});
	}

	//进入会话窗口
	showChat() {
		this.setState({
			showChat: true
		});
	}

	//邀约弹窗
	showAppointmentModal() {
		this.setState({
			appointmentModal: true
		});
	}
	hideAppointmentModal() {
		this.setState({
			appointmentModal: false
		});
	}
	//确认邀约弹窗
	showAppConfirmModalModal() {
		this.setState({
			appointmentModal: false,
			appConfirmModal: true
		});
	}
	hideAppConfirmModalModal() {
		this.setState({
			appConfirmModal: false
		});
	}

	//等待支付弹窗
	showAppWaitedModalModal() {
		this.setState({
			appConfirmModal: false,
			appWaitedModal: true
		});
	}
	hideAppWaitedModalModal() {
		this.setState({
			appWaitedModal: false
		});
	}

	//控件输入
	handleInputChange(e){
		const target = e.target;
		const value = target.type === 'checkbox' ? target.checked : target.value;
		const name = target.name;
		const form = this.state.patientForm;
		form[name] = value;
		this.setState({
			patientForm: form
		});
	}

	//轮询改变文字方法
	intervalMethod(e) {
		e.preventDefault();
		if(this.state.btnSatus === 0){
			//interval 和 timeout 都需要 bind 一下当前的this，不然指向window
			this.timer = setInterval(function () {
				//跳出
				if(this.state.intervalTime <=0){
					clearInterval(this.timer);
					this.setState({
						intervalTime: 9,
						btnSatus: 0,
						btnText: '获取动态密码'
					});
					return;
				}
				//执行状态更新 可能是异步 (prevState, props)
				this.setState((prevState) => (
					{
						btnSatus: 1,
						btnText: '重新获取('+prevState.intervalTime+'s)',
						intervalTime: prevState.intervalTime - 1,
						patientCaptcha: '1234'
					}
				));
			}.bind(this),1000);
		}
	}

	//显示病人弹窗
	openAddPatientModal() {
		this.setState({
			addPatientModal: true
		});
	}
	//关闭病人弹窗
	closeAddPatientModal() {
		this.setState({
			addPatientModal: false
		});
	}
	//提交病人数据 插入到 patientList 里
	submitPatient() {
		// e.preventDefault();
		if(this.state.patientCaptcha !== this.state.patientForm.captcha){
			this.setState({
				errorType: false,
				errorText: this.state.patientCaptcha === false ? '请点击获取动态密码' : '您输入的动态密码有误'
			});
			return;
		}
		const list = this.state.patientList;
		list.push(this.state.patientForm);
		this.setState({
			patientList: list,
			addPatientModal: false,
			patientForm: this.state.patientFormInit//清空表单
		});
	}

	render() {
		return (
			<div>
				<div className="homeTop clearfix">
					<div className="left">
						<Image src={Logo} responsive></Image>
					</div>
					<div className="right">
                        南方医务通医生工作台
					</div>
				</div>

				<div className="homeBody clearfix">
					<div className="left">
						<div className="avatarbox">
							<OverlayTrigger container={this} trigger="click" placement="bottom" overlay={popoverBottom}>
								<Button style={{border: 0,background: '#fff'}}>
									<Image className="avatar" src={DefaultAvatar} rounded responsive/>
								</Button>
							</OverlayTrigger>
							<div className="name">李秋豪</div>
						</div>
						<div className="col-lg-12 list">
							<ul className="parent">
								<li><a href="#/userMessage"><span className="icon icon-message"></span><span className="text-message">消息&nbsp;&nbsp;2</span></a></li>
								<li><a href="#/home"><span className="icon icon-home"></span><span>首页</span></a></li>
								<ul className="childList">
									<li><a href="#">专家转诊</a></li>
									<li><a href="#">双向转诊</a></li>
									<li><a href="#">名医主诊</a></li>
									<li><a href="#">咨询</a></li>
								</ul>
								<li><a href="#"><span className="icon icon-patient"></span><span>我的患者</span></a></li>
								<li className="active"><a href="#"><span className="icon icon-doctor"></span><span>我的关联医生</span></a></li>
								<li><a href="#"><span className="icon icon-expert"></span><span>平台所有医生</span></a></li>
							</ul>
						</div>
					</div>
					<div className="right" style={{overflow: 'auto'}}>
						<div className="body">
							<div className="head">
								<div className="my_tab_container">
									<MyTab activeIndex={0} isTab={false}>
										<div titleName="我的关联医生" click={this.hideChat}>
											{
												this.state.showChat?
													<Chat orderType={0} doctorType={0}>
													</Chat>
													:
													<div className="clearfix">
														<Button href="#/myalldoctor" style={{position: 'absolute',right: '40px',top: '113px'}} className="btn-danger btn-radius">添加关联医生</Button>
														<div className="clearfix" style={{paddingTop: '15px'}}>
															<Col lg={4} md={4} xs={4}>
																<FormGroup controlId="formControlsSelect">
																	<FormControl style={{border: 0}} componentClass="select" placeholder="select">
																		<option value="1">南方医院</option>
																		<option value="2">广医三院</option>
																	</FormControl>
																</FormGroup>
															</Col>
															<Col lg={4} md={4} xs={4}>
																<FormGroup controlId="formControlsSelect">
																	<FormControl style={{border: 0}} componentClass="select" placeholder="select">
																		<option value="1">口腔科</option>
																		<option value="2">内科</option>
																		<option value="3">中医科</option>
																	</FormControl>
																</FormGroup>
															</Col>
															<Col lg={4} md={4} xs={4}>
																<FormGroup style={{width: '100%',margin: '0 auto'}}>
																	<InputGroup>
																		<InputGroup.Addon style={{
																			border: 0,
																			background: '#fff',
																			borderTopLeftRadius: '20px',
																			borderBottomLeftRadius: '20px'
																		}}><Glyphicon glyph="search" /></InputGroup.Addon>
																		<FormControl type="text" style={{border: 0,boxShadow: 'none'}}/>
																		<InputGroup.Button>
																			<Button bsStyle="link" style={{background: '#fff',borderTopRightRadius: '20px',borderBottomRightRadius: '20px'}}>搜索</Button>
																		</InputGroup.Button>
																	</InputGroup>
																</FormGroup>
															</Col>
														</div>
														<div className="tableBox">
															<Table striped hover >
																<thead>
																	<tr>
																		<th>医生姓名</th>
																		<th>职称</th>
																		<th>医院</th>
																		<th>科室</th>
																		<th>擅长</th>
																		<th>操作</th>
																	</tr>
																</thead>
																<tbody>
																	{
																		this.state.doctorList.map((doctor) =>
																			<tr key={doctor.id}>
																				<td>{doctor.name}</td>
																				<td>{doctor.title}</td>
																				<td>{doctor.hospital}</td>
																				<td>{doctor.department}</td>
																				<td>{doctor.speciality}</td>
																				<td>
																					<Button bsSize="small" bsStyle="link" onClick={this.showChat}>会话</Button>
																				</td>
																			</tr>
																		)
																	}

																</tbody>
															</Table>
															<div className="clearfix myPagination" style={{paddingBottom: '15px'}}>
																<div className="addheigh">3/60页</div>
																<div className="addheigh">
																	<Button bsStyle="link">上一页</Button>
																</div>
																<div className="addheigh">
																	<Button bsStyle="link">下一页</Button>
																</div>
																<div>
															跳转到至第
																	<input style={{width: '30px'}} type="text"/>
															页
																	<Button style={{background: '#4f80f6',marginLeft: '10px'}} bsStyle="primary" bsSize="xsmall">确定</Button>
																</div>
															</div>
														</div>
													</div>
											}
										</div>
									</MyTab>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		);
	}
}

export default App;