develop

分支 (4)

管理

管理

develop

master

feature

release

doctors
/
registrations.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
    <link rel="shortcut icon" type="image/x-icon" href="assets/img/favicon.ico">
    <title>Preclinic - Medical & Hospital - Bootstrap 4 Admin Template</title>
    <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="assets/css/font-awesome.min.css">

    <link rel="stylesheet" type="text/css" href="assets/css/style.css">
    <!--[if lt IE 9]>
    <script src="assets/js/html5shiv.min.js"></script>
    <script src="assets/js/respond.min.js"></script>
    <![endif]-->
</head>

<body>

<div class="content" id="content">
    <div class="row">
        <div class="col-sm-2 col-2">
            <h4 class="page-title">患者预约</h4>
        </div>
		<div class="col-sm-3 col-3 text-right m-b-20">
			预约日期：<input type="date" v-model="date">
		</div>
        <div class="col-sm-2 col-3 text-right m-b-20">
            <select v-model="departmentName">
                <option value="">--请选择科室--</option>
                <option :value="department.name" v-for="department in departments">{{department.name}}</option>
            </select>
        </div>
        <div class="col-sm-2 col-3 text-right m-b-20">
            <select v-model="doctorInfo">
                <option value="">--请选择医生--</option>
                <option :value="doctor.name + ',' + doctor.sicken" v-for="doctor in doctors">{{doctor.name}}</option>
            </select>
        </div>
        <div class="col-sm-2 col-3 text-right" v-if="showAdd">
            <a href="javascript:void();" @click="getTiming" class="btn btn btn-primary btn-rounded float-right">
                <i class="fa fa-plus"></i> 新增预约
            </a>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="table-responsive">
                <table class="table table-striped custom-table">
                    <thead>
                    <tr>
                        <th>预约编号</th>
                        <th>患者名字</th>
                        <th>年龄</th>
                        <th>医生姓名</th>
                        <th>部门</th>
                        <th>预约日期</th>
                        <th>预约时间</th>
                        <th>状态</th>
                        <th class="text-right">操作</th>
                    </tr>
                    </thead>
                    <tbody id="doctorAppointment">
						<tr v-for="(appointment,index) in appointments">
							<td>{{appointment.NO}}</td>
							<td><img width="28" height="28" src="assets/img/user.jpg" class="rounded-circle m-r-5" alt="">{{appointment.patientName}}</td>
							<td>{{appointment.patientAge}}</td>
							<td>{{appointment.doctorName}}</td>
							<td>{{appointment.doctorSicken}}</td>
							<td>{{appointment.date}}</td>
							<td>{{appointment.timing}}</td>
							<td><span class="custom-badge" :class="appointmentStatus(appointment.status)">{{appointment.status}}</span></td>
							<td class="text-right">
								<div class="dropdown dropdown-action" v-if="appointment.patientName == patientName">
									<a href="#" class="action-icon dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-ellipsis-v"></i></a>
									<div class="dropdown-menu dropdown-menu-right">
										<a class="dropdown-item" href="#" @click="edit(index);" data-toggle="modal" data-target="#delete_appointment"><i class="fa fa-trash-o m-r-5"></i>取消预约</a>
									</div>
								</div>
							</td>
						</tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div id="edit" class="col-lg-8 offset-lg-2"
         style="z-index: 1000; position: absolute; top: 50px; background: #fff; border: solid 1px #ccc; display: none;">
        <form id="form" enctype="multipart/form-data" method="post" action="/doctor/editDoctor">
            <input type="hidden" id="id" name="id" :value="appointment.id"/>
            <input type="hidden" name="patientAge" :value="appointment.patientAge"/>
            <div class="form-group">
                <label>预约日期</label><span class="need_red"> *</span>
                <input type="text" id="tags" name="date" class="form-control" readonly="readonly" :value="appointment.date">
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <label>医生</label><span class="need_red"> *</span>
                        <input type="text" id="tags" name="doctorName" class="form-control" readonly="readonly" :value="appointment.doctorName">
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label>科室</label><span class="need_red"> *</span>
                        <input type="text" id="tags" name="doctorSicken" class="form-control" readonly="readonly" :value="appointment.doctorSicken">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <label>预约人</label><span class="need_red"> *</span>
                        <input type="text" id="tags" name="patientName" class="form-control" readonly="readonly" :value="appointment.patientName">
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label>预约时间段</label><span class="need_red"> *</span>
                        <select v-model="appointment.timing" name="timing">
                            <option :value="timingAppointment.timing" v-for="timingAppointment in timingAppointments">{{timingAppointment.timing}}</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="m-t-20 text-center">
                <a @click="submit" href="javascript:void();" class="btn btn-primary submit-btn"><i
                        class="fa fa-plus"></i><i id="addBtn">添加</i></a>
                <a href="javascript:$('#edit').hide();" class="btn btn-primary submit-btn"><i
                        class="fa fa-plus"></i>取消</a>
            </div>
        </form>
    </div>
</div>
<script src="assets/js/vue.global.js"></script>
<script src="assets/js/jquery-3.2.1.min.js"></script>
<script src="assets/js/popper.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/jquery.slimscroll.js"></script>
<script src="assets/js/app.js"></script>
<!--json data-->
<script type="text/javascript" src="json/doctors.json"></script>
<script type="text/javascript" src="json/departments.json"></script>
<script type="text/javascript" src="json/appointments.json"></script>
<script type="text/javascript" src="assets/js/jquerysession.js"></script>
<script type="text/javascript" src="js/data.js"></script>
<script type="text/javascript">
	Vue.createApp({
		  data() {
		    return{
                date: dataFomart(new Date()),
                departments: null,
                departmentName: "",
                doctors: null,
                doctorInfo: "",
                doctorName: "",
                showAdd: false,
                appointments: null,
                appointment: {},
                timingAppointments:null,
                patientName: $.session.get('name')
		  	}
		  },
		  computed: {

		  },
		  //此时可以通过vue访问data中的数据和方法，还没创建虚拟dom
		  created(){
			//预约候诊，等候或诊断中的
			let theAppointments = appointments.filter((a)=>{
			    return a.date == this.date && (a.status == "候诊" || a.status == "诊断中");
			});
			this.appointments = theAppointments.sort(sortByKeys("date:desc,timing:asc"));
			//科室，对外提供预约的科室
			this.departments = departments.filter((d)=>{
			    return d.status == "正常" && d.appo == "是";
			});
		  },
		  //页面已经挂载vue编译后的dom，此时对dom的操作才会生效
		  mounted(){
		  },
		  //监听日期改变
		  watch : {
		    date(val) {
				this.getAppointments(val, this.doctorInfo);
			},
		    //根据部门选择医生
			departmentName(val) {
                //医生
                this.doctors = doctors.filter((d)=>{
                    return d.dim == "在职";
                });
			},
			//根据医生和日期选择可预约的号
			doctorInfo(doctorInfo) {
			    //医生信息
			    this.doctorInfo = doctorInfo;
			    //过滤数据
			    this.getAppointments(this.date, doctorInfo);
			}
		  },
		  methods: {
		    getAppointments(date, doctorInfo){
		        let theAppointments;
		        if(doctorInfo != ""){
                    //日期一直有值，选了医生就确定可预约的号
                    this.showAdd = true;
                    doctorInfo = doctorInfo.split(",");
                    let doctorName = doctorInfo[0];
                    this.doctorName = doctorName;
                    //这里是为了给输入框赋值
                    this.appointment.doctorName = doctorName;
                    this.appointment.doctorSicken = doctorInfo[1];
                    this.appointment.date = this.date;
                    this.appointment.patientAge = $.session.get('age');
                    //预约候诊，等候或诊断中的
                    theAppointments = appointments.filter((a)=>{
                        return a.date == date && a.doctorName == doctorName && (a.status == "候诊" || a.status == "诊断中")
                    });
				}else{
				    //日期一直有值，没选医生则隐藏
                    this.showAdd = false;
				    //预约候诊，等候或诊断中的
                    theAppointments = appointments.filter((a)=>{
                        return a.date == date && (a.status == "候诊" || a.status == "诊断中")
                    });
				}
				this.appointments = theAppointments.sort(sortByKeys("date:desc,timing:asc"));
		    },
			appointmentStatus(status){
			    if(status == "完成"){
                    return 'status-green';
                }else if(status == "等候"){
                    return 'status-orange';
                }else if(status == "未使用"){
                    return 'status-pink';
                }else if(status == "诊断中"){
                    return 'status-purple';
                }else if(status == "作废"){
                    return 'status-blue';
                }else if(status == "取消"){
                    return 'status-grey';
                }else {
                    return 'status-red';
                }
			},
			getTiming(){
			    //检查患者是否有今天的预约了
			    let patientAppointments = appointments.filter((a)=>{
                        return a.date == this.date
                        && a.doctorName == this.doctorName
                        && a.patientName == this.patientName
                        && (a.status == "候诊" || a.status == "诊断中")
                });
                if(patientAppointments.length > 0){
                    alert("您"+ this.date +"天已预约了" + this.doctorName
                    + "，请耐心等候医生呼号，不要重复预约。如需再次预约，请将之前的预约取消。");
                    return;
                }
                this.appointment.patientName = this.patientName;
			    //选取本日、该医生未使用的号
			    this.timingAppointments = appointments.filter((a)=>{
                        return a.date == this.date && a.doctorName == this.doctorName && a.status == "未使用"
                });
                this.timingAppointments.sort(sortByKeys("timing:asc"));
                //设置默认选中
                if(this.timingAppointments.length > 0){
                    this.appointment.timing = this.timingAppointments[0].timing;
                }else{
                    alert(this.date + this.doctorName + "的预约用完了。请选择其他时间。");
                    return;
                }
                $('#edit').show();
			},
			submit(){
                //表单验证，元素的name与json的key相同
                var msg = checkForm($("#form")[0]);
                if(msg != null){
                    alert(msg);
                    return;
                }
                //组装数据
                var formText = '{"' + $("#form").serialize().replace(/&/g,'","').replace(/=/g,'":"') + '"}';
                formText = decodeURI(formText).replace("%3A", ":");
                let appointment = JSON.parse(formText);
                //其他属性补充
                var max = orderNum(appointments.filter((a)=>{
                        return a.date == this.date
                }),"NO", 3);
                appointment.NO = max;
                appointment.status = "候诊";
                var id = $("#id").val();
                //新增
                this.appointments.push(appointment);
                $('#edit').hide();
            },
			edit(index){
			    //修改
			    this.appointments[index].status = "作废";
				//重新加载
				this.getAppointments(this.date, this.doctorInfo);
			}
		  }
	}).mount('#content');

</script>
<!--json data-->
</body>

</html>