develop

分支 (4)

管理

管理

develop

master

feature

release

doctors
/
appointments.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-4 col-3">
            <h4 class="page-title">预约</h4>
        </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="appointments">
                        <tr v-for="appointment 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">
                                    <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(appointment)"><i class="fa fa-pencil m-r-5"></i> 修改</a>
                                        <a class="dropdown-item" href="#" data-toggle="modal" data-target="#delete_appointment" @click="delete(appointment)"><i class="fa fa-trash-o m-r-5"></i> 删除</a>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </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/appointments.json"></script>
<script type="text/javascript" src="js/data.js"></script>
<script type="text/javascript">
	Vue.createApp({
		  data() {
		    return{
		  	    appointments: null,
		  	    appointment: null
		  	}
		  },
		  computed: {

		  },
		  //此时可以通过vue访问data中的数据和方法，还没创建虚拟dom
		  created(){
			//预约候诊，等候或诊断中的
			let theAppointments = appointments.filter((a)=>{
			    return a.status != "未使用"
			});
			this.appointments = theAppointments.sort(sortByKeys("date:desc,timing:asc"));
		  },
		  //页面已经挂载vue编译后的dom，此时对dom的操作才会生效
		  mounted(){

		  },
		  methods: {
			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 == "作废" || status == "过号"){
                    return 'status-blue';
                }else if(status == "取消"){
                    return 'status-grey';
                }else {
                    return 'status-red';
                }
			}
		  }
	}).mount('#content');
</script>
<!--json data-->
</body>

</html>