开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 【Vue】Vue重写教室管理系统的前端网页V1（前后端分离）--20221222 -> 正文阅读

[JavaScript知识库]【Vue】Vue重写教室管理系统的前端网页V1（前后端分离）--20221222

项目说明

目的

练习并熟悉Vue2 的API，来为Vue项目做准备：

插值语法
插槽
props和data
父子组件通信
Ajax异步请求数据
生命周期函数
methods方法
computed属性
vue-router、路由守卫、query/params传参、编程函数式路由
模拟后端服务器传送数据
打包项目

需要加强的部分：

Vuex
全局路线总线
post数据至后端服务器
elementUI
父子孙组件通信
vue-router中meta

说明

Vue实现前端，利用插件axios实现Ajax获取后端数据，实现前后端分离。

架构

在这里插入图片描述

文件结构

在这里插入图片描述

基础模块

App.vue

<template>
	<div>

		<MyNav/>
		
		
		<MyBanner/>
		
		<keep-alive>
			<router-view></router-view>
		</keep-alive>
		
		<MyFooter/>

	</div>
</template>

<script>
	import MyNav from './components/MyNav.vue'
	import MyBanner from './components/MyBanner.vue'
	import MyFooter from './components/MyFooter.vue'

	export default {
		name:'App',
		components:{
			MyNav,
			MyBanner,
			MyFooter,
		}
	}
</script>


<style>
	html, body {
		position: relative;
		height: 100%;
	}
	body {
		background: #fff;
		font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
		font-size: 14px;
		color:#000;
		margin: 10;
		padding: 10;
	}
</style>

main.js

import App from './App.vue'
import Vue from 'vue'
import VueRouter from 'vue-router'
import router from './router'
//引入ElementUI组件库
import ElementUI from 'element-ui';
//引入ElementUI全部样式
import 'element-ui/lib/theme-chalk/index.css';


Vue.config.productionTip = false

Vue.use(ElementUI)
Vue.use(VueRouter)

new Vue({
	el:'#root',
	render: h => h(App),
	router,
})

router/index.js

import Vue from "vue"
import VueRouter from "vue-router"
import MyHome from '../pages/MyHome.vue'
import MyClassroom from '../pages/MyClassroom.vue'
import MyHelp from '../pages/MyHelp.vue'
import MyToday from '../pages/MyToday.vue'
import MyClassroomQuery from '../pages/MyClassroomQuery.vue'
import MyBookingApply from '../pages/MyBookingApply.vue'
import MyBookingQuery from '../pages/MyBookingQuery.vue'
import MyBookingApplyHR from '../pages/MyBookingApplyHR.vue'
import MyAudit from '../pages/MyAudit.vue'
import MyClassroomQueryResult from '../pages/MyClassroomQueryResult.vue'
import MyBookingDetail from '../pages/MyBookingDetail.vue'
import MyBookingList from '../pages/MyBookingList.vue'
import MyAuditList from '../pages/MyAuditList.vue'


export default new VueRouter({
	mode:'history',
	routes:[
		{
            path:'/',
            redirect:'/home'//默认显示
        },
		{	
			name:'home',
			path:'/home',
			component:MyHome,
		},
		{	
			name:'classroom',
			path:'/classroom',
			component:MyClassroom,
		},
		{	
			name:'classroomQuery',
			path:'/classroomQuery',
			component:MyClassroomQuery,
		},
		{	
			name:'classroomQueryResult',
			path:'/classroomQueryResult/:checkedClassroom/:classroomschedule_date_start/:classroomschedule_date_end',//使用占位符声明接收params参数
			// path:'/classroomQueryResult',
			component:MyClassroomQueryResult,
			props(route){
				return {
					checkedClassroom : route.params.checkedClassroom,
					classroomschedule_date_start : route.params.classroomschedule_date_start,
					classroomschedule_date_end : route.params.classroomschedule_date_end,
				}
			},
		},
		{	
			name:'bookingApply',
			path:'/bookingApply',
			component:MyBookingApply,
		},
		{	
			name:'BookingList',
			path:'/BookingList',
			component:MyBookingList,
		},
		{	
			name:'bookingDetail',
			path:'/bookingDetail',
			component:MyBookingDetail,
		},
		{	
			name:'bookingQuery',
			path:'/bookingQuery',
			component:MyBookingQuery,
		},
		{	
			name:'bookingApplyHR',
			path:'/bookingApplyHR',
			component:MyBookingApplyHR,
		},
		{	
			name:'audit',
			path:'/audit',
			component:MyAudit,
			meta:{isAuth:true,},
			beforeEnter(to,from,next){
				console.log('前置路由守卫',to,from)
				if(to.meta.isAuth){
					if(localStorage.getItem('school')==='atguigu'){
						next()
					}else{
						alert('无访问权限，请修改school为atguigu')
					}
				}else{
					next()
				}
			}
		},
		{	
			name:'AuditList',
			path:'/AuditList',
			component:MyAuditList,
		},
		{	
			name:'help',
			path:'/help',
			component:MyHelp,
		},
		{	
			name:'today',
			path:'/today',
			component:MyToday,
		},
	]
})

components

MyNav.vue

<template>
    <div>

		<nav class="navbar navbar-expand-lg navbar-light bg-light">
			<a class="navbar-brand" href="#">教室管理</a>
			<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
				<span class="navbar-toggler-icon"></span>
			</button>
			<div class="collapse navbar-collapse" id="navbarSupportedContent">
				<div class="navbar-nav">
					<router-link class="nav-link text-body font-weight-bold" active-class="active" to="/home" > 主页 </router-link>

					<li class="nav-item dropdown">
						<a class="nav-link active dropdown-toggle text-body font-weight-bold" href="#" id="navbarDropdown" role="button" data-toggle="dropdown">
							借订申请
						</a>
						<div class="dropdown-menu" aria-labelledby="navbarDropdown">
							<!-- <a class="dropdown-item" href="/classroom_info/">教室简介</a> -->
							<router-link class="dropdown-item" active-class="active" to="/classroom" > 教室简介 </router-link>
							<div class="dropdown-divider"></div>
							<!-- <a class="dropdown-item" href="/classroom_query/">教室查询</a> -->
							<router-link class="dropdown-item" active-class="active" to="/classroomQuery">教室查询</router-link>
							
							<div class="dropdown-divider"></div>
							<!-- <a class="dropdown-item" href="/booking_apply/">教室借订申请</a> -->
							<router-link class="dropdown-item" active-class="active" to="/bookingApply">教室借订申请</router-link>

							<div class="dropdown-divider"></div>
							<!-- <a class="dropdown-item" href="/query_booking_apply/">查看教室借订记录</a> -->
							<router-link class="dropdown-item" active-class="active" to="/bookingQuery">查看教室借订记录</router-link>
							
							<div class="dropdown-divider"></div>
							<!-- <a class="dropdown-item" href="/booking_apply_for_admin/">教室借订申请for管理员</a> -->
							<router-link class="dropdown-item" active-class="active" to="/bookingApplyHR">教室借订申请for管理员</router-link>

							
						</div>
					</li>


					
					<li class="nav-item dropdown">
						<a class="nav-link active dropdown-toggle text-body font-weight-bold" href="#" id="navbarDropdown" role="button" data-toggle="dropdown">
							借订管理
						</a>
						<div class="dropdown-menu" aria-labelledby="navbarDropdown">
							<!-- <a class="dropdown-item" href="/audit_query_booking_apply/">审核教室借订(含5S检查)</a> -->
							<router-link class="dropdown-item" active-class="active" to="/audit">审核教室借订(含5S检查)</router-link>
						</div>
					</li>
					

					<!-- <a class="nav-link text-body font-weight-bold" href="/today_booking/" > 今日排程 </a> -->
					<router-link class="nav-link text-body font-weight-bold" to="/today" > 今日排程 </router-link>
					
					
					<a class="nav-link text-body font-weight-bold" href="/dashboard_month/" > 教室看板 </a>
					

					
					
					<li class="nav-item dropdown">
						<a class="nav-link active dropdown-toggle text-body font-weight-bold" href="#" id="navbarDropdown" role="button" data-toggle="dropdown">
							系统维护
						</a>
						<div class="dropdown-menu" aria-labelledby="navbarDropdown">
							<a class="dropdown-item" href="/admin/">后台管理</a>
							<div class="dropdown-divider"></div>
							<a class="dropdown-item" href="/export/csv/">导出用户</a>
						</div>
					</li>
					

					
					<li class="nav-item dropdown">
						<a class="nav-link active dropdown-toggle text-body font-weight-bold" href="#" id="navbarDropdown" role="button" data-toggle="dropdown">
							API数据接口
						</a>
						<div class="dropdown-menu" aria-labelledby="navbarDropdown">
							<a class="dropdown-item" href="/bookingDef/2022-07-13/">API查询教室预定</a>   
							<div class="dropdown-divider"></div>
							<a class="dropdown-item" href="/classroomscheduleDef/2022-07-13/">API查询教室排程</a>
						</div>
					</li>
					

					<!-- <a class="nav-link text-body font-weight-bold" href="/guidebook/" > Help </a> -->
					<router-link class="nav-link text-body font-weight-bold" active-class="active" to="/help" > Help </router-link>


					<li class="nav-item dropdown mt-1">
						<div style="flex: 1; align-content:right;">
							<form action="/i18n/setlang/" method="post" style="margin-block-end: 0em;"><input type="hidden" name="csrfmiddlewaretoken" value="ktilH6291DFsGeEAUHWHofurBlRXKFIZo49U8SQ20HPfHHkFM77AwaEX4rymvDiA">
								<input name="next" type="hidden" value="" style="font-size:12;height:23px">
								<select name="language">
									
									
									
									
										<option value="zh-hans" selected>
											简体中文 (zh-hans)
										</option>
									
										<option value="en">
											English (en)
										</option>
									
								</select>
							
								<input class="" type="submit" value=Switch style="font-size:12;height:23px">
							</form>
						</div>
					</li>

					
					
				</div>
			</div>
			<!--增加登入登出的功能开始-->
			
				Welcome season
				
				<a class="nav-link text-body font-weight-bold" href="/change_password/" > 点击修改密码 </a>
				
				<a class="float-right btn btn-secondary mx-1 " style="font-size: 12px;" href="/user_logout/">登出</a>
			
			<!--增加登入登出的功能结束-->
		</nav>

    </div>
</template>
  
<script>
	export default {
		name:'MyNav',
	}
</script>

<style>
</style>

MyBanner.vue

<template>
    <div>

		
		<div class="m-3">
			姓名：<span class="text-primary">season</span>&nbsp;&nbsp;
			邮箱：<span class="text-primary">9@qq.com</span>&nbsp;&nbsp;
			工号：<span class="text-primary">season</span>&nbsp;&nbsp;
			<button class="ml-3 btn-primary" @click="back">返回</button>
			<button class="ml-3 btn-primary" @click="forward">前进</button>
		</div>
		<div class="m-3 text-primary"></div>
		



    </div>
</template>
  
<script>
	export default {
		name:'MyBanner',
		methods: {
            back(){
                this.$router.back()
            },
            forward(){
                this.$router.forward()
            },
        },
	}
</script>

<style>
</style>

MyFooter.vue

<template>

	<div class="container">
		<footer class="bd-footer text-muted pt-2 border-top">
			<div class="container-fluid py-3 py-md-5">
			<div class="row">
			<ul class="bd-footer-links">
				<span class="mr-2"><a class="text-dark" href="#">预订智能化</a></span>
				<span class="mx-2"><a class="text-dark" href="#">管理公开化</a></span>
				<span class="mx-2"><a class="text-dark" href="#">资源可视化</a></span>
				<span class="mx-2"><a class="text-dark" href="#">数据集成化</a></span>
				</ul>
			</div>
			<p class="mx-4">Designed and built with all the love in the WZS by HR team. Maintained by the core team with the help of our contributors</a>.</p>
			<p class="mx-4">Currently v1.2 has been go-live.</p>
			</div>
		</footer>
	</div>

</template>
  
<script>
	export default {
		name:'MyFooter',
	}
</script>

<style>
</style>

路由组件1-静态页面

MyHome.vue

在这里插入图片描述

<template>
	<div>
		<div>

		<div class="container">
			<div class="row py-4">

				<!--引入轮播图-->
				<MyCarousel/>
			</div>


			<div class="container">
				<div class="card-deck mb-3 text-center">
					<MyCard title="教室概况" href_sop="classroom" buttonName="more">
					</MyCard>

					<MyCard title="预定须知" href_sop="bookingApply" buttonName="apply">
					</MyCard>

					<MyCard title="联系人员" href_sop="bookingQuery" buttonName="record">
					</MyCard>

				</div>

			</div>



		</div>


		</div>
	</div>
</template>
  
<script>

	import MyCarousel from './MyCarousel.vue'
	import MyCard from './MyCard.vue'

	export default {
		name:'MyContainer',
		components:{
			MyCarousel,
			MyCard,
		}
	}
</script>

<style>
</style>

MyCard.vue

<template>

		<div class="card mb-4 box-shadow">
			<div class="card-header">
			<h4 class="my-0 font-weight-normal">&nbsp;</h4>
			</div>
			<div class="card-body">
			<h1 class="card-title pricing-card-title"><small class="text-muted">{{ title }}</small></h1>
			<ul class="list-unstyled mt-3 mb-4">
				<slot>我是插槽</slot>
			</ul>
			<!-- <a type="button" :href="href_sop" class="btn btn-lg btn-block btn-outline-primary">{{ buttonName }}</a> -->
			<button @click="showPush(href_sop)" type="button" class="btn btn-lg btn-block btn-outline-primary">{{ buttonName }}</button>
			</div>
		</div>

</template>
  
<script>
	export default {
		name:'MyCard',
		data() {
			return {
				// title:'教室概况',
				// buttonName:'more',
				// href_sop:''
			}
    	},
		props:['title','buttonName','href_sop',],
		methods: {
			showPush(h){
				console.log('访问地址',h)
				this.$router.push({
					name: h,
				})
			},
		},
	}
</script>

<style>
</style>

MyCarousel.vue

<template>
	<div class="bd-example w-100">
		<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel" data-interval="5000">
			<ol class="carousel-indicators">
			<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
			<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
			<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
			</ol>
			<div class="carousel-inner">

			<div class="carousel-item active">
				
				<div class="jumbotron w-100">
				......
				</div>
				
			</div>


			<div class="carousel-item">
				
				<div class="w-100">
					<a rel="contentitem-images" >
					<img src="/media/media/images/5s.png" alt="" width="1100px" height="450px">
					</a>
				</div>
				
			</div>


			<div class="carousel-item">
				
				<div class="w-100">
					<a rel="contentitem-images" >
					<img src="/media/media/images/classroom_info.png" alt="" width="1100px" height="450px">
					</a>
				</div>
				
			</div>

			</div>
			<a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
			<span class="carousel-control-prev-icon" aria-hidden="true"></span>
			<span class="sr-only">Previous</span>
			</a>
			<a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
			<span class="carousel-control-next-icon" aria-hidden="true"></span>
			<span class="sr-only">Next</span>
			</a>
		</div>
	</div>

</template>
  
<script>
	export default {
		name:'MyCarousel',
	}
</script>

<style>
</style>

路由组件2-管理员审核

MyAudit.vue

在这里插入图片描述

<template>
	<div class="container">

		<div class="row py-4 align-items-center"  style="font-size:15px;">

			<!--查询条件-->
			<div class="col-lg-12 col-md-12">
				<div class="py-3 text-center">
					<h2>按条件查询教室借订记录</h2>
					<p class="lead">请您填写对应查询条件进行查询</p>
				</div>


				<form class="text-center" action="/audit_query_booking_apply/" method="POST">
					<input type="hidden" name="csrfmiddlewaretoken" value="NDhDGVW8CIV4viAFrIVcR7S0LPrsDVygtJeOfjZRpgdpe7oYUYIEaYmjhBy28aSE">
					<br>
					<div class="form-group ml-4">
						<div class="row">
							<label class="my-0 mr-2 col-4">开始日期</label>
							<input class="form-control col-6" type="date"  style="font-size:15px;" name="booking_date_start" />
						</div>
						<br>
						<div class="row">
							<label class="my-0 mr-2 col-4">结束日期</label>
							<input class="form-control col-6" type="date"  style="font-size:15px;" name="booking_date_end" />
						</div>
						<br>
						<div class="row">
							<label class="my-0 mr-2 col-4">学员工号</label>
							<input class="form-control col-6" type="text"  style="font-size:15px;" name="booking_employee_id" />
						</div>
						<br>
						<div class="row">
							<label class="my-0 mr-2 col-4">预定是否被核准</label>
							<select class="custom-select col-6" name="booking_approve_Y_N" id="booking_approve_Y_N"  required="required" >
								<option value='待审核' selected>待审核</option>
								<option value='All'>All</option>
								<option value='Y'>Y</option>
								<option value='N'>N</option>
							</select>
						</div>
						<br>
						<div class="row">
							<label class="my-0 mr-2 col-4">5S检查情况是否正常</label>
							<select class="custom-select col-6" name="booking_audit" id="booking_audit"  required="required" >
								<option value='All' selected>All</option>
								<option value='待审核'>待审核</option>
								<option value='Y'>Y</option>
								<option value='N'>N</option>
							</select>
						</div>
						<hr>
						<!-- <input class="ml-2 btn-small btn-primary" type="submit" value="查询/Query"> -->
						<router-link class="ml-2 btn-primary col-1 p-2"  
						:to="{
							name:'AuditList',
							// params:{
							// 	checkedClassroom:this.checkedClassroom,
							// 	classroomschedule_date_start:this.classroomschedule_date_start,
							// 	classroomschedule_date_end:this.classroomschedule_date_end,
							// }
						}"
						>查询</router-link>
					</div>
				</form>
			</div>


		</div>
	</div>

</template>
  


<script>


	export default {
		name:'MyAudit',
	}
</script>

<style>
</style>

MyAuditList.vue

在这里插入图片描述

<template>

<div class="container">
        <div class="row py-2 align-items-center">
            
            <!--展示显示人员-->
            <div class="col-lg-12 col-md-12 m-0 p-0 table-responsive"  style="background-color: #fff;">
                <!--表单--> 
                <h2>教室借订记录</h2>
                
                <!--HR或管理员才显示导出功能-->
                <!-- 
                    <button type="button" class="btn btn-outline-secondary"><a class="" href="/export_excel/">导出数据</a></button>
                 -->

                <!--表单--> 
                <table class="table table-striped table-bordered ">
                    <thead>
                        <tr style="color:White;background-color:#3366FF;font-family:微軟正黑體,Tahoma,Arial,微軟雅黑體;font-size:15px;">
                            <th scope="col">编号</th>
                            <th scope="col">教室</th>
                            <th scope="col">人数</th>
                            <th scope="col">日期</th>
                            <th scope="col">时间</th>
                            <th scope="col">类别</th>
                            <th scope="col" style="width: 15%;">内容</th>
                            <th scope="col">预定人</th>
                            <th scope="col">是否被核准</th>
                            <th scope="col">预定状态</th>
                            <th scope="col">5S检查</th>
                        </tr>
                    </thead>
                

                    
                    <tr valign="middle" style="color:Black;border-color:#E0E0E0;font-size:15px;">
                        <td><a target="_blank" href="/query_booking_apply_detail/289/">289</a></td>
                        <td>教室</td>
                        <td>30</td>
                        <td>2022年12月15日</td>
                        <td>08:00-17:59</td>
                        <td>培训课程</td>
                        <td style="width: 15%;">培训</td>
                        <td>sea</td>
                        <td>N</td>
                        <td>取消借订</td>
                        <td></td>
                    </tr>                 
                    
                </table>


            </div>
        </div>
    </div>

</template>
  
<script>
	import axios from 'axios'
	export default {
		name:'MyAuditList',
		// props:['clsid','classroomschedule_date'],
		data(){
			return{
				ScheduleList:[],
				booking_id: this.$route.query.bid,
				classroomschedule_date: this.$route.query.classroomschedule_date,
			}
		},
		computed:{
			SchFirst(){
				return this.ScheduleList[0]
			}
		},
		methods:{
			searchSchedules(bid,date){
					this.ScheduleList = []
					axios.get(`http://localhost:8080/tc1/bookingDef/${date}/`).then(
					response => {
						console.log('请求成功了',response.data)
						// 判断状态后放入数组中
						response.data.forEach(element => {
							console.log('element',element)
							// 增加教室名称判断
							if(element.booking_id == bid){
							this.ScheduleList.push(element)
							}
						});
						console.log('this.ScheduleList',this.ScheduleList)
					},
					error => {
						console.log('请求失败了',error.message)
						// this.$bus.$emit('getUsers',false,false,error.message,[])
					}
				)
			},

		},
		mounted() {
			console.log(this.classroomschedule_date)
			this.searchSchedules(this.booking_id,this.classroomschedule_date)
		},
	}
</script>

<style>
</style>

路由组件3-一般使用者申请

MyBookingApply.vue

在这里插入图片描述

<template>
	<div class="container">
		
		<div class="row py-4 align-items-center">

		<!--展示显示人员-->
			<div class="col-lg-12 col-md-12 mt-0"  style="background-color: #fff;">
				<!--表单--> 
				<div class="py-3 text-center">
					<h2>教室借订申请</h2>
					<p class="lead">请您填写条件进行申请，开始时间请选00分或30分，结束时间请选29分或59分。</p>
					
					<div><a type="button" class="ml-2 btn btn-primary"  target="_blank" href="/media/media/file/5S.pdf" >教室管理5S标准</a></div>
					
				</div>


				
				<form class="text-center" method="post" id="app" oninput="OnInput (event)">
					<input type="hidden" name="csrfmiddlewaretoken" value="KnSaRNwmH4CJRhSQciWbJMZiSsFqG4rvqtPlqbz5uCU4A6G9FyJD2DtBoeM0bjLT">
					
					<div class="row mt-3">
						<div class="col-4 text-body font-weight-bold ml-3">预定教室名称</div>
						<div class="col-6">
								<select class="custom-select" name="booking_classroom_name" id="inputGroupSelect02"  required="required" >
									<option value=''></option>
									<option v-for="(option,index) in this.classroom_options" :key="index" :value="option">
										{{ option }}
									</option>
								</select>
						</div>
					</div>
					<div class="row mt-3">
						<div class="col-4 text-body font-weight-bold ml-3">参与人数</div>
						<div class="col-6">
							<input class="col-12 form-control" type="number" min='1' max='200'  required="required" id="booking_classroom_person_hc" name="booking_classroom_person_hc">
						</div>
					</div>
					<div class="row mt-3">
						<div class="col-4 text-body font-weight-bold ml-3">预定类别</div>
						<div class="col-6">
								<select class="custom-select" name="booking_type" id="booking_type"  required="required" >
									<option value=''></option>
									<option value='HR培训课程'>HR培训课程</option>
									<option value='非HR培训课程'>非HR培训课程</option>
									<option value='会议'>会议</option>
									<option value='其他'>其他</option>
								</select>
						</div>
					</div>
					<div class="row mt-3">
						<div class="col-4 text-body font-weight-bold ml-3">预定事宜说明</div>
						<div class="col-6">
							<input class="form-control" type="text" required="required" style="font-size:15px;" id="booking_content" name="booking_content" />
						</div>
					</div>
					<div class="row mt-3">
						<div class="col-4 text-body font-weight-bold ml-3">预定日期</div>
						<div class="col-6">
							
							<input class="form-control" type="date" required="required" style="font-size:15px;"  min="2022-12-21" max="2023-03-21" id="booking_date" name="booking_date" />
							
						</div>
					</div>
					<div class="row mt-3">
						<div class="col-4 text-body font-weight-bold ml-3">开始时间<br>(请选00分或30分开始)</div>
						<div class="col-6">
							<input class="form-control" type="time" required="required" style="font-size:15px;" id="booking_start_time" name="booking_start_time" />
						</div>
					</div>
					<div class="row mt-3">
						<div class="col-4 text-body font-weight-bold ml-3">结束时间<br>(请选29分或59分结尾)</div>
						<div class="col-6">
							<input class="form-control" type="time" required="required" style="font-size:15px;" id="booking_end_time" name="booking_end_time" />
						</div>
					</div>
					<div class="row mt-3">
						<div class="col-4 text-body font-weight-bold ml-3">预定人工号</div>
						<div class="col-6">
							<input class="form-control" type="text" required="required" style="font-size:15px;" id="booking_employee_id" name="booking_employee_id" value=""/>
						</div>
					</div>
					<div class="row mt-3">
						<div class="col-4 text-body font-weight-bold ml-3">预定人姓名</div>
						<div class="col-6">
							<input class="form-control" type="text" required="required" style="font-size:15px;" id="booking_employee_name" name="booking_employee_name" placeholder="中文名"/>
						</div>
					</div>
					<div class="row mt-3">
						<div class="col-4 text-body font-weight-bold ml-3">预定人电话(长号)</div>
						<div class="col-6">
							<input class="form-control" type="number" required="required" min='13000000000' max='19999999999' style="font-size:15px;" id="booking_employee_phone" name="booking_employee_phone" placeholder="长号"/>
						</div>
					</div>
					<div class="row mt-3">
						<div class="col-4 text-body font-weight-bold ml-3">预定填写日期</div>
						<div class="col-6">
							<input class="form-control" type="date" required="required" style="font-size:15px;" id="booking_fill_date" name="booking_fill_date" />
						</div>
					</div>
					<div class="row mt-3">
						<span class="col-5"></span><input class="ml-2 btn-small btn-primary  col-2 p-1" type="submit" value="提交/submit">                    
					</div>
				</form>
			</div>
		</div>
		
	</div>

</template>
  


<script>


	export default {
		name:'MyClassroomQuery',
		
		data(){
			return{
				classroom_options:[],
				checkedClassroom:[],
			}
		}
	}
</script>

<style>
</style>

MyBookingApplyHR.vue

在这里插入图片描述

<template>

	<div class="container">
		<div class="row py-4 align-items-center">

		<!--展示显示人员-->
			<div class="col-lg-12 col-md-12 mt-0"  style="background-color: #fff;">
				<!--表单-->
				<div class="py-3 text-center">
					<h2>教室借订申请for管理员</h2>
					<p class="lead">请您填写条件进行申请，开始时间请选00分或30分，结束时间请选29分或59分。</p>
					
					<div><a type="button" class="ml-2 btn btn-primary"  target="_blank" href="/media/media/file/5S.pdf" >教室管理5S标准</a></div>
					
				</div>
				
				<form class="text-center" method="post" id="app">
					<input type="hidden" name="csrfmiddlewaretoken" value="uZ7vyd6EGFFZSqpWwvriuybkDIgRq3xba54G7B9ntdXkBfdfZLeKNpFD9unrViRz">
					
					<div class="row mt-3">
						<div class="col-4 text-body font-weight-bold ml-3">预定教室名称</div>
						<div class="col-6">
								<select class="custom-select" name="booking_classroom_name" id="inputGroupSelect02"  required="required" >
									<option value=''></option>
									<option v-for="(option,index) in this.classroom_options" :key="index" :value="option">
										{{ option }}
									</option>
								</select>
						</div>
					</div>
					<div class="row mt-3">
						<div class="col-4 text-body font-weight-bold ml-3">参与人数</div>
						<div class="col-6">
							<input class="col-12 form-control" type="number" min='1' max='200'  required="required" id="booking_classroom_person_hc" name="booking_classroom_person_hc">
						</div>
					</div>
					<div class="row mt-3">
						<div class="col-4 text-body font-weight-bold ml-3">预定类别</div>
						<div class="col-6">
								<select class="custom-select" name="booking_type" id="booking_type"  required="required" >
									<option value=''></option>
									<option value='HR培训课程'>HR培训课程</option>
									<option value='非HR培训课程'>非HR培训课程</option>
									<option value='会议'>会议</option>
									<option value='其他'>其他</option>
								</select>
						</div>
					</div>
					<div class="row mt-3">
						<div class="col-4 text-body font-weight-bold ml-3">预定事宜说明</div>
						<div class="col-6">
							<input class="form-control" type="text" required="required" style="font-size:15px;" id="booking_content" name="booking_content" />
						</div>
					</div>
					<div class="row mt-3">
						<div class="col-4 text-body font-weight-bold ml-3">预定日期</div>
						<div class="col-6">
							
							<input class="form-control" type="date" required="required" style="font-size:15px;"  min="2022-12-21" max="2023-03-21" id="booking_date" name="booking_date" />
							
						</div>
					</div>
					<div class="row mt-3">
						<div class="col-4 text-body font-weight-bold ml-3">开始时间(请选00分或30分开始)</div>
						<div class="col-6">
							<input class="form-control" type="time" required="required" style="font-size:15px;" id="booking_start_time" name="booking_start_time" />
						</div>
					</div>
					<div class="row mt-3">
						<div class="col-4 text-body font-weight-bold ml-3">结束时间(请选29分或59分结尾)</div>
						<div class="col-6">
							<input class="form-control" type="time" required="required" style="font-size:15px;" id="booking_end_time" name="booking_end_time" />
						</div>
					</div>
					<div class="row mt-3">
						<div class="col-4 text-body font-weight-bold ml-3">预定人工号</div>
						<div class="col-6">
							<input class="form-control" type="text" required="required" style="font-size:15px;" id="booking_employee_id" name="booking_employee_id"/>
						</div>
					</div>
					<div class="row mt-3">
						<div class="col-4 text-body font-weight-bold ml-3">预定人姓名</div>
						<div class="col-6">
							<input class="form-control" type="text" required="required" style="font-size:15px;" id="booking_employee_name" name="booking_employee_name" placeholder="中文名"/>
						</div>
					</div>
					<div class="row mt-3">
						<div class="col-4 text-body font-weight-bold ml-3">预定人电话(请输入长号)</div>
						<div class="col-6">
							<input class="form-control" type="text" required="required" style="font-size:15px;" id="booking_employee_phone" name="booking_employee_phone" placeholder="长号"/>
						</div>
					</div>
					<div class="row mt-3">
						<div class="col-4 text-body font-weight-bold ml-3">预定填写日期</div>
						<div class="col-6">
							<input class="form-control" type="date" required="required" style="font-size:15px;" id="booking_fill_date" name="booking_fill_date" />
						</div>
					</div>


					<div class="row mt-3">
						<div class="col-4 text-body font-weight-bold ml-3">预定审核人姓名</div>
						<div class="col-6">
							<input class="form-control" type="text" required="required" style="font-size:15px;"  id="booking_approve_admin_name" name="booking_approve_admin_name" value=""/>
						</div>
					</div>
					<div class="row mt-3">
						<div class="col-4 text-body font-weight-bold ml-3">预定审核人电话</div>
						<div class="col-6">
							<input class="form-control" type="text" required="required" style="font-size:15px;"  id="booking_approve_admin_phone" name="booking_approve_admin_phone" value=""/>
						</div>
					</div>
					<div class="row mt-3">
						<div class="col-4 text-body font-weight-bold ml-3">预定是否被核准</div>
						<div class="col-6">
							
							<select class="custom-select" name="booking_approve_Y_N" style="font-size:15px;" id="booking_approve_Y_N"  required="required" value="">
								<option value='Y' selected>Y</option>
							</select>
							
						</div>
					</div>



					<div class="row mt-3">
						<span class="col-9"></span><input type="submit" value="提交/submit">
					</div>
					
				</form>
			</div>
		</div>
	</div>


</template>
  


<script>


	export default {
		name:'MyBookingApplyHR',
		
		data(){
			return{
				classroom_options:[],
				checkedClassroom:[],
			}
		}
	}
</script>




<style>
</style>

路由组件4-一般使用者查询教室

MyClassroom.vue

在这里插入图片描述

<template>
	<div class="container">
		<div class="row py-4 align-items-center">
			
			<!--展示显示人员-->
			<div class="col-lg-12 col-md-12 mt-0 table-responsive "  style="background-color: #fff;">
				<!--表单-->
				<h2>教室简介</h2>
				<table class="table table-striped table-sm table-bordered text-center ">
				
					<tr class="row" style="color:White;background-color:#3366FF;font-family:微軟正黑體,Tahoma,Arial,微軟雅黑體;font-size:15px;">
						<th class="col-2">教室</th>
						<th class="col-1">教室区域</th>
						<th class="col-1">教室地址</th>
						<th class="col-2">教室设备</th>
						<th class="col-1">可容纳人数</th>
						<th class="col-1">公开借订</th>
						<th class="col-2">备注</th>
						<th class="col-2">教室照片</th>
					</tr>

					
			
					<tr class="row" v-for='cr in classroomList' :key="cr.clid" valign="middle"  style="color:Black;border-color:#E0E0E0;font-size:15px;">
						<td class="col-2"><router-link to="/classroomQuery">{{ cr.classroom_name }}</router-link></td>
						<td class="col-1">{{ cr.classroom_location }}</td>
						<td class="col-1">{{ cr.classroom_address }}</td>
						<td class="col-2">{{ cr.classroom_equipment }}</td>
						<td class="col-1">{{ cr.classroom_person_hc }}</td>
						<td class="col-1">{{ cr.classroom_public }}</td>
						<td class="col-2"><a target="_blank" :href="cr.classroom_remark1" >教室影片</a></td>
						<td class="col-2" style="width:200px;">
							<a target="_blank" :href='cr.classroom_photo_1' >
								<img :src='cr.classroom_photo_1' alt="photo" width="180px">
							</a>
						</td>
					</tr>
		
					
				</table>



			</div>
		</div>
	</div>
</template>
  
<script>
	import { nanoid } from 'nanoid';
	export default {
		name:'MyClassroom',
		data(){
			return{
				classroomList:[],
			}
		}
	}
</script>

<style>
</style>

MyClassroomQuery.vue

在这里插入图片描述

<template>
	<div class="container">

		<div class="row py-4 align-items-center"  style="font-size:15px;">

			<!--查询条件-->
			<div class="col-lg-12 col-md-12">
				<form method="POST">
					<input type="hidden" name="csrfmiddlewaretoken" value="KSWlpLbfHQP7ZGOuYAJK22AlvtdhwGzqqYTwY9eYuo7sIvCNrQwclT4E1fkR1VTO">

					<div class="py-3 text-center">
						<h2>查询教室</h2>
						<p class="lead">请您在选择开始日期、结束日期后，挑选您要查询的教室，并按【查询】以获得教室预订情况。</p>
					</div>

					<br>
					<div class="form-group ml-4 py-3 text-center" id="app">
						<div class="row">
							<label class="my-0 mr-2 col-4">开始日期</label>
							<input class="form-control col-6" type="date"  style="font-size:15px;" v-model="classroomschedule_date_start" id="classroomschedule_date_start" name="classroomschedule_date_start" />
						</div>
						<br>
						<div class="row">
							<label class="my-0 mr-2 col-4">结束日期</label>
							<input class="form-control col-6" type="date"  style="font-size:15px;" v-model="classroomschedule_date_end" id="classroomschedule_date_end" name="classroomschedule_date_end" />
						</div>
						<br>
						<div class="row" >
							<label class="my-0 mr-2 col-4">教室名称</label>
							<div class="row my-0 mr-2 col-6">
							<div v-for="(option,index) in this.classroom_options" :key="index">
								<input type="checkbox" class="m-0" :value="option" v-model="checkedClassroom" name="classroomschedule_classroom_name2">
								<label class="m-1">{{ option }}</label>
							<br>
							</div>
							</div>
						</div>
						<div class="row" ><label class="my-0 mr-2 col-4"></label><span>选择的教室为: {{ checkedClassroom }} </span></div>
						
						<hr>
						<!-- <input class="ml-2 btn-small btn-primary col-2 p-1" type="submit" value="查询"> -->
						<!-- <input class="ml-2 btn-small btn-primary col-1"  @click="submitQuery()" value="查询"> -->
						<router-link class="ml-2 btn-primary col-1 p-2"  
						:to="{
							name:'classroomQueryResult',
							params:{
								checkedClassroom:this.checkedClassroom,
								classroomschedule_date_start:this.classroomschedule_date_start,
								classroomschedule_date_end:this.classroomschedule_date_end,
							}
						}"
						>查询</router-link>
					</div>
				</form>
			</div>


		</div>
	</div>
</template>
  


<script>


	export default {
		name:'MyClassroomQuery',
		
		data(){
			return{
				classroom_options:[],
				checkedClassroom:],
				classroomschedule_date_start:'2022-12-21',
				classroomschedule_date_end:'2022-12-22',
			}
		},
	}
</script>

<style>
</style>

MyClassroomQueryResult.vue

在这里插入图片描述

<template>
    <div class="container ">
        <div class="row py-2 align-items-center">
            
            <!--展示显示人员-->
            <h2>教室空闲时间查询</h2><span>(Y为已预订)</span>
            <span class="pl-5 ml-5"><a type="button" class="ml-2 btn btn-primary"  target="_blank" href="/booking_apply/" >教室预定申请</a></span>
            <div class="col-lg-12 col-md-12 m-0 p-0 table-responsive"  style="background-color: #fff;">
              
                <!--表单--> 
                <table class="table table-striped table-bordered">
                    <thead>
                        <tr style="color:White;background-color:#3366FF;font-family:微軟正黑體,Tahoma,Arial,微軟雅黑體;font-size:10px;">
                            <th scope="col" class="p-1 text-center" style="width: 15%;">教室</th>
                            <th scope="col" class="p-1">日期</th>
                            <th scope="col" class="p-1">08:00</th>
                            <th scope="col" class="p-1">08:30</th>
                            <th scope="col" class="p-1">09:00</th>
                            <th scope="col" class="p-1">09:30</th>
                            <th scope="col" class="p-1">10:00</th>
                            <th scope="col" class="p-1">10:30</th>
                            <th scope="col" class="p-1">11:00</th>
                            <th scope="col" class="p-1">11:30</th>
                            <th scope="col" class="p-1">12:00</th>
                            <th scope="col" class="p-1">12:30</th>
                            <th scope="col" class="p-1">13:00</th>
                            <th scope="col" class="p-1">13:30</th>
                            <th scope="col" class="p-1">14:00</th>
                            <th scope="col" class="p-1">14:30</th>
                            <th scope="col" class="p-1">15:00</th>
                            <th scope="col" class="p-1">15:30</th>
                            <th scope="col" class="p-1">16:00</th>
                            <th scope="col" class="p-1">16:30</th>
                            <th scope="col" class="p-1">17:00</th>
                            <th scope="col" class="p-1">17:30</th>
                            <th scope="col" class="p-1">18:00</th>
                            <th scope="col" class="p-1">18:30</th>
                            <th scope="col" class="p-1">19:00</th>
                            <th scope="col" class="p-1">19:30</th>
                            <th scope="col" class="p-1">20:00</th>
                        </tr>
                    </thead>
                
                    
                    <tr v-for="cs in ScheduleList" :key="cs.clsid" valign="middle" style="color:Black;border-color:#E0E0E0;font-size:10px;">
                        <td class="p-0 text-center" style="width: 15%;"><a target="_blank" href="/classroom_info/">{{ cs.classroomschedule_classroom_name }}</a></td>
                        <td class="p-0 px-1 text-center">{{ cs.classroomschedule_date }}</td>
                        
						<td class="p-0 p1 text-center"><router-link target="_blank" :to="`/bookingDetail?bid=${cs.classroomschedule_0800_0829_content}&classroomschedule_date=${cs.classroomschedule_date}`">{{ cs.classroomschedule_0800_0829_YN | deleteN }}</router-link></td>
						<td class="p-0 p1 text-center"><router-link target="_blank" :to="`/bookingDetail?bid=${cs.classroomschedule_0830_0859_content}&classroomschedule_date=${cs.classroomschedule_date}`">{{ cs.classroomschedule_0830_0859_YN | deleteN }}</router-link></td>
						<td class="p-0 p1 text-center"><router-link target="_blank" :to="`/bookingDetail?bid=${cs.classroomschedule_0900_0929_content}&classroomschedule_date=${cs.classroomschedule_date}`">{{ cs.classroomschedule_0900_0929_YN | deleteN }}</router-link></td>
						<td class="p-0 p1 text-center"><router-link target="_blank" :to="`/bookingDetail?bid=${cs.classroomschedule_0930_0959_content}&classroomschedule_date=${cs.classroomschedule_date}`">{{ cs.classroomschedule_0930_0959_YN | deleteN }}</router-link></td>
						<td class="p-0 p1 text-center"><router-link target="_blank" :to="`/bookingDetail?bid=${cs.classroomschedule_1000_1029_content}&classroomschedule_date=${cs.classroomschedule_date}`">{{ cs.classroomschedule_1000_1029_YN | deleteN }}</router-link></td>
						<td class="p-0 p1 text-center"><router-link target="_blank" :to="`/bookingDetail?bid=${cs.classroomschedule_1030_1059_content}&classroomschedule_date=${cs.classroomschedule_date}`">{{ cs.classroomschedule_1030_1059_YN | deleteN }}</router-link></td>
						<td class="p-0 p1 text-center"><router-link target="_blank" :to="`/bookingDetail?bid=${cs.classroomschedule_1100_1129_content }&classroomschedule_date=${cs.classroomschedule_date}`">{{ cs.classroomschedule_1100_1129_YN | deleteN }}</router-link></td>
						<td class="p-0 p1 text-center"><router-link target="_blank" :to="`/bookingDetail?bid=${cs.classroomschedule_1130_1159_content }&classroomschedule_date=${cs.classroomschedule_date}`">{{ cs.classroomschedule_1130_1159_YN | deleteN }}</router-link></td>
						<td class="p-0 p1 text-center"><router-link target="_blank" :to="`/bookingDetail?bid=${cs.classroomschedule_1200_1229_content }&classroomschedule_date=${cs.classroomschedule_date}`">{{ cs.classroomschedule_1200_1229_YN | deleteN }}</router-link></td>
						<td class="p-0 p1 text-center"><router-link target="_blank" :to="`/bookingDetail?bid=${cs.classroomschedule_1230_1259_content }&classroomschedule_date=${cs.classroomschedule_date}`">{{ cs.classroomschedule_1230_1259_YN | deleteN }}</router-link></td>
						<td class="p-0 p1 text-center"><router-link target="_blank" :to="`/bookingDetail?bid=${cs.classroomschedule_1300_1329_content }&classroomschedule_date=${cs.classroomschedule_date}`">{{ cs.classroomschedule_1300_1329_YN | deleteN }}</router-link></td>
						<td class="p-0 p1 text-center"><router-link target="_blank" :to="`/bookingDetail?bid=${cs.classroomschedule_1330_1359_content }&classroomschedule_date=${cs.classroomschedule_date}`">{{ cs.classroomschedule_1330_1359_YN | deleteN }}</router-link></td>
						<td class="p-0 p1 text-center"><router-link target="_blank" :to="`/bookingDetail?bid=${cs.classroomschedule_1400_1429_content }&classroomschedule_date=${cs.classroomschedule_date}`">{{ cs.classroomschedule_1400_1429_YN | deleteN }}</router-link></td>
						<td class="p-0 p1 text-center"><router-link target="_blank" :to="`/bookingDetail?bid=${cs.classroomschedule_1430_1459_content }&classroomschedule_date=${cs.classroomschedule_date}`">{{ cs.classroomschedule_1430_1459_YN | deleteN }}</router-link></td>
						<td class="p-0 p1 text-center"><router-link target="_blank" :to="`/bookingDetail?bid=${cs.classroomschedule_1500_1529_content }&classroomschedule_date=${cs.classroomschedule_date}`">{{ cs.classroomschedule_1500_1529_YN | deleteN }}</router-link></td>
						<td class="p-0 p1 text-center"><router-link target="_blank" :to="`/bookingDetail?bid=${cs.classroomschedule_1530_1559_content }&classroomschedule_date=${cs.classroomschedule_date}`">{{ cs.classroomschedule_1530_1559_YN | deleteN }}</router-link></td>
						<td class="p-0 p1 text-center"><router-link target="_blank" :to="`/bookingDetail?bid=${cs.classroomschedule_1600_1629_content }&classroomschedule_date=${cs.classroomschedule_date}`">{{ cs.classroomschedule_1600_1629_YN | deleteN }}</router-link></td>
						<td class="p-0 p1 text-center"><router-link target="_blank" :to="`/bookingDetail?bid=${cs.classroomschedule_1630_1659_content }&classroomschedule_date=${cs.classroomschedule_date}`">{{ cs.classroomschedule_1630_1659_YN | deleteN }}</router-link></td>
						<td class="p-0 p1 text-center"><router-link target="_blank" :to="`/bookingDetail?bid=${cs.classroomschedule_1700_1729_content }&classroomschedule_date=${cs.classroomschedule_date}`">{{ cs.classroomschedule_1700_1729_YN | deleteN }}</router-link></td>
						<td class="p-0 p1 text-center"><router-link target="_blank" :to="`/bookingDetail?bid=${cs.classroomschedule_1730_1759_content }&classroomschedule_date=${cs.classroomschedule_date}`">{{ cs.classroomschedule_1730_1759_YN | deleteN }}</router-link></td>
						<td class="p-0 p1 text-center"><router-link target="_blank" :to="`/bookingDetail?bid=${cs.classroomschedule_1800_1829_content }&classroomschedule_date=${cs.classroomschedule_date}`">{{ cs.classroomschedule_1800_1829_YN | deleteN }}</router-link></td>
						<td class="p-0 p1 text-center"><router-link target="_blank" :to="`/bookingDetail?bid=${cs.classroomschedule_1830_1859_content }&classroomschedule_date=${cs.classroomschedule_date}`">{{ cs.classroomschedule_1830_1859_YN | deleteN }}</router-link></td>
						<td class="p-0 p1 text-center"><router-link target="_blank" :to="`/bookingDetail?bid=${cs.classroomschedule_1900_1929_content }&classroomschedule_date=${cs.classroomschedule_date}`">{{ cs.classroomschedule_1900_1929_YN | deleteN }}</router-link></td>
						<td class="p-0 p1 text-center"><router-link target="_blank" :to="`/bookingDetail?bid=${cs.classroomschedule_1930_1959_content }&classroomschedule_date=${cs.classroomschedule_date}`">{{ cs.classroomschedule_1930_1959_YN | deleteN }}</router-link></td>
						<td class="p-0 p1 text-center"><router-link target="_blank" :to="`/bookingDetail?bid=${cs.classroomschedule_2000_2029_content }&classroomschedule_date=${cs.classroomschedule_date}`">{{ cs.classroomschedule_2000_2029_YN | deleteN }}</router-link></td>
                        
                    </tr>
                    
                </table>
  
            </div>
        </div>
    </div>
</template>
  


<script>
	import axios from 'axios'

	export default {
		name:'MyClassroomQueryResult',
		
		data(){
			return{
				classroom_options:[],
				ScheduleList:[],
				keyWord:[this.classroomschedule_date_start,this.classroomschedule_date_end]
				//keyWord:['2022-12-20','2022-12-21','2022-12-22',]
			}
		},
		props:['checkedClassroom','classroomschedule_date_start','classroomschedule_date_end',],
		methods: {
			searchSchedules(k,e){
					this.ScheduleList = []
					k.forEach(
						k1 => {
							axios.get(`http://localhost:8080/tc1/classroomscheduleDef/${k1}/`).then(
							response => {
								console.log('请求成功了',response.data)
								// 判断状态后放入数组中
								response.data.forEach(element => {
									// 增加教室名称判断
									if(this.checkedClassroom.indexOf(element.classroomschedule_classroom_name)>-1){
									this.ScheduleList.push(element)
									}
								});
								// DOM更新后执行(不建议直接操作DOM)
								this.$nextTick(
									function(){
										let i= 0
										let paradom1 = document.getElementsByClassName("p1")
										for (i = 0 ; i < paradom1.length; i++) {
											var para = document.getElementsByClassName("p1")[i];
											if (para.textContent =='N') {
												para.style.backgroundColor = "white";
											}else if (para.textContent =='Y') {
												para.style.backgroundColor = "grey";
											}else{para.style.color = "black";}
										}
									}
								)
							},
							error => {
								console.log('请求失败了',error.message)
								// this.$bus.$emit('getUsers',false,false,error.message,[])
							}
						)
						}
					)
			},

		},
		mounted(){
			this.searchSchedules(this.keyWord)
		},
		filters: {
			deleteN: function (value) {
				if (value === 'Y') return 'Y'
			}
			}

	}
</script>

<style>
</style>

MyBookingDetail.vue

在这里插入图片描述

<template>

<div class="container">
    <div class="row py-4 align-items-center">

    <!--展示显示人员-->
        <div class="col-lg-12 col-md-12 mt-0"  style="background-color: #fff;">
            <!--表单--> 
            <h2>查看教室借订的明细</h2>
            <form method="post" style="width:600px;margin-left:5px" action="/booking_cancel/">
                <input type="hidden" name="csrfmiddlewaretoken" value="poWLXZvFTZZ7HR5KNKPM7IyXu9aKDcK95uTWwnyoGxhsqGT3g0Ceqz2g0Vhk8r4x">

                
                <div class="row mt-3">
                    <div class="col text-body font-weight-bold ml-3">预定编号</div>
                    <div class="col">
                        <input class="form-control" type="text"  required="required" id="booking_id" readonly name="booking_id" :value="SchFirst.booking_id">
                    </div>
                </div> 
                <div class="row mt-3">
                    <div class="col text-body font-weight-bold ml-3">预定教室名称</div>
                    <div class="col">
                        <input class="form-control" type="text"   id="booking_classroom_name" readonly name="booking_classroom_name" :value="SchFirst.booking_classroom_name">
                    </div>
                </div> 
                <div class="row mt-3">
                    <div class="col text-body font-weight-bold ml-3">参与人数</div>
                    <div class="col">
                        <input class="form-control" type="number" min='1' max='200'   id="booking_classroom_person_hc" readonly name="booking_classroom_person_hc" :value="SchFirst.booking_classroom_person_hc">
                    </div>
                </div>
                <div class="row mt-3">
                    <div class="col text-body font-weight-bold ml-3">预定类别</div>
                    <div class="col">
                        <input class="form-control" type="text"  id="booking_type" readonly name="booking_type" :value="SchFirst.booking_type">
                    </div>
                </div>
  
                <div class="row mt-3">
                    <div class="col text-body font-weight-bold ml-3">预定事宜说明</div>
                    <div class="col">
                        <input class="form-control" type="text"  style="font-size:15px;" readonly  id="booking_content" name="booking_content" :value="SchFirst.booking_content"/>
                    </div>
                </div>
                <div class="row mt-3">
                    <div class="col text-body font-weight-bold ml-3">预定日期</div>
                    <div class="col">
                        <input class="form-control" type="text" style="font-size:15px;" readonly id="booking_date" name="booking_date" :value="SchFirst.booking_date"/>
                    </div>
                </div>
                <div class="row mt-3">
                    <div class="col text-body font-weight-bold ml-3">开始时间(请选00分或30分开始)</div>
                    <div class="col">
                        <input class="form-control" type="time" style="font-size:15px;" readonly id="booking_start_time" name="booking_start_time" :value="SchFirst.booking_start_time"/>
                    </div>
                </div>
                <div class="row mt-3">
                    <div class="col text-body font-weight-bold ml-3">结束时间(请选29分或59分结尾)</div>
                    <div class="col">
                        <input class="form-control" type="time" style="font-size:15px;" readonly id="booking_end_time" name="booking_end_time" :value="SchFirst.booking_end_time"/>
                    </div>
                </div>
                <div class="row mt-3">
                    <div class="col text-body font-weight-bold ml-3">预定人工号</div>
                    <div class="col">
                        <input class="form-control" type="text" style="font-size:15px;" readonly id="booking_employee_id" name="booking_employee_id" :value="SchFirst.booking_employee_id"/>
                    </div>
                </div>
                <div class="row mt-3">
                    <div class="col text-body font-weight-bold ml-3">预定人姓名</div>
                    <div class="col">
                        <input class="form-control" type="text" style="font-size:15px;" readonly id="booking_employee_name" name="booking_employee_name" :value="SchFirst.booking_employee_name"/>
                    </div>
                </div>
                <div class="row mt-3">
                    <div class="col text-body font-weight-bold ml-3">预定人电话</div>
                    <div class="col">
                        <input class="form-control" type="text" style="font-size:15px;" readonly id="booking_employee_phone" name="booking_employee_phone" :value="SchFirst.booking_employee_phone"/>
                    </div>
                </div>
                <div class="row mt-3">
                    <div class="col text-body font-weight-bold ml-3">预定填写日期</div>
                    <div class="col">
                        <input class="form-control" type="text" style="font-size:15px;" readonly id="booking_fill_date" name="booking_fill_date" :value="SchFirst.booking_fill_date"/>
                    </div>
                </div>

                <div class="row mt-3">
                    <div class="col text-body font-weight-bold ml-3">预定审核人姓名</div>
                    <div class="col">
                        <input class="form-control" type="text"  style="font-size:15px;"  id="booking_approve_admin_name" name="booking_approve_admin_name" :value="SchFirst.booking_approve_admin_name"/>
                    </div>
                </div>
                <div class="row mt-3">
                    <div class="col text-body font-weight-bold ml-3">预定审核人电话</div>
                    <div class="col">
                        <input class="form-control" type="text"  style="font-size:15px;"  id="booking_approve_admin_phone" name="booking_approve_admin_phone" :value="SchFirst.booking_approve_admin_phone"/>
                    </div>
                </div>
                <div class="row mt-3">
                    <div class="col text-body font-weight-bold ml-3">预定是否被核准</div>
                    <div class="col">
                        
                        <select class="custom-select col-4" name="booking_approve_Y_N" style="font-size:15px;" id="booking_approve_Y_N"  :value="SchFirst.booking_approve_Y_N">
                            <option value='' selected></option>
                            <option value='Y'>Y</option>
                            <option value='N'>N</option>
                        </select>
                        
                    </div>
                </div>


                <!-- 5S检查结果 -->
                


                <!-- 本人 or HR or 超级管理员 可取消预定 -->
                <!-- 管理员随时可以取消 -->
                <!-- 一般使用者提前一天取消 -->
                
                    
                    <div class="row mt-3">
                        <span class="col-9"></span><input type="submit" value="取消预定">
                    </div>
                    
                


                
                
            </form>
        </div>
    </div>
</div>

</template>
  
<script>
	import axios from 'axios'
	export default {
		name:'MyBookingDetail',
		// props:['clsid','classroomschedule_date'],
		data(){
			return{
				ScheduleList:[],
				booking_id: this.$route.query.bid,
				classroomschedule_date: this.$route.query.classroomschedule_date,
			}
		},
		computed:{
			SchFirst(){
				return this.ScheduleList[0]
			}
		},
		methods:{
			searchSchedules(bid,date){
					this.ScheduleList = []
					axios.get(`http://localhost:8080/tc1/bookingDef/${date}/`).then(
					response => {
						console.log('请求成功了',response.data)
						// 判断状态后放入数组中
						response.data.forEach(element => {
							console.log('element',element)
							// 增加教室名称判断
							if(element.booking_id == bid){
							this.ScheduleList.push(element)
							}
						});
						console.log('this.ScheduleList',this.ScheduleList)
					},
					error => {
						console.log('请求失败了',error.message)
						// this.$bus.$emit('getUsers',false,false,error.message,[])
					}
				)
			},

		},
		mounted() {
			console.log(this.classroomschedule_date)
			this.searchSchedules(this.booking_id,this.classroomschedule_date)
		},
	}
</script>

<style>
</style>

路由组件5-一般使用者查询预约

MyBookingQuery.vue

在这里插入图片描述

<template>
	<div class="container">

		<div class="row py-4 align-items-center"  style="font-size:15px;">

			<!--查询条件-->
			<div class="col-lg-12 col-md-12">

				<div class="py-3 text-center">
					<h2>按条件查询教室借订记录</h2>
					<p class="lead">请您填写条件进行申请，开始时间请选00分或30分，结束时间请选29分或59分。</p>
				</div>

				<form class="text-center" action="/query_booking_apply/" method="POST">
					<input type="hidden" name="csrfmiddlewaretoken" value="sJ96NlTwf5OE6Gh14R6LZZsyicdwl5Qp8P6hmJWf2D6ZPv5kx7TdiQWROYk6QkaN">
					<br>
					<div class="form-group ml-4">
						<div class="row">
							<label class="my-0 mr-2 col-4">开始日期</label>
							<input class="form-control col-6" type="date"  style="font-size:15px;" name="booking_date_start" />
						</div>
						<br>
						<div class="row">
							<label class="my-0 mr-2 col-4">结束日期</label>
							<input class="form-control col-6" type="date"  style="font-size:15px;" name="booking_date_end" />
						</div>
						<br>
						<div class="row">
							<label class="my-0 mr-2 col-4">学员工号</label>
							<input class="form-control col-6" type="text"  style="font-size:15px;" name="booking_employee_id" value=""/>
						</div>
						<br>
						<div class="row">
							<label class="my-0 mr-2 col-4">预定是否被核准</label>
							<select class="custom-select col-6" name="booking_approve_Y_N" id="booking_approve_Y_N"  required="required" >
								<option value='All' selected>All</option>
								<option value='Y'>Y</option>
								<option value='N'>N</option>
							</select>
						</div>
						<hr>
						<router-link class="ml-2 btn-primary col-1 p-2"  
						:to="{
							name:'BookingList',
							// params:{
							// 	checkedClassroom:this.checkedClassroom,
							// 	classroomschedule_date_start:this.classroomschedule_date_start,
							// 	classroomschedule_date_end:this.classroomschedule_date_end,
							// }
						}"
						>查询</router-link>

					</div>
				</form>
			</div>


		</div>
	</div>
</template>
  


<script>


	export default {
		name:'MyBookingQuery',
	}
</script>

<style>
</style>

MyBookingList.vue

在这里插入图片描述

<template>

<div class="container">
        <div class="row py-2 align-items-center">
            
            <!--展示显示人员-->
            <div class="col-lg-12 col-md-12 m-0 p-0 table-responsive"  style="background-color: #fff;">
                <!--表单--> 
                <h2>教室借订记录</h2>
                
                <!--HR或管理员才显示导出功能-->
                <!-- 
                    <button type="button" class="btn btn-outline-secondary"><a class="" href="/export_excel/">导出数据</a></button>
                 -->

                <!--表单--> 
                <table class="table table-striped table-bordered ">
                    <thead>
                        <tr style="color:White;background-color:#3366FF;font-family:微軟正黑體,Tahoma,Arial,微軟雅黑體;font-size:15px;">
                            <th scope="col">编号</th>
                            <th scope="col">教室</th>
                            <th scope="col">人数</th>
                            <th scope="col">日期</th>
                            <th scope="col">时间</th>
                            <th scope="col">类别</th>
                            <th scope="col" style="width: 15%;">内容</th>
                            <th scope="col">预定人</th>
                            <th scope="col">是否被核准</th>
                            <th scope="col">预定状态</th>
                            <th scope="col">5S检查</th>
                        </tr>
                    </thead>
                

                    
                    <tr valign="middle" style="color:Black;border-color:#E0E0E0;font-size:15px;">
                        <td><a target="_blank" href="/query_booking_apply_detail/289/">289</a></td>
                        <td>教室</td>
                        <td>30</td>
                        <td>2022年12月15日</td>
                        <td>08:00-17:59</td>
                        <td>课程</td>
                        <td style="width: 15%;">培训</td>
                        <td>season-张</td>
                        <td>N</td>
                        <td>取消借订</td>
                        <td></td>
                    </tr>                 
                    
                </table>


            </div>
        </div>
    </div>

</template>
  
<script>
	import axios from 'axios'
	export default {
		name:'MyBookingList',
		// props:['clsid','classroomschedule_date'],
		data(){
			return{
				ScheduleList:[],
				booking_id: this.$route.query.bid,
				classroomschedule_date: this.$route.query.classroomschedule_date,
			}
		},
		computed:{
			SchFirst(){
				return this.ScheduleList[0]
			}
		},
		methods:{
			searchSchedules(bid,date){
					this.ScheduleList = []
					axios.get(`http://localhost:8080/tc1/bookingDef/${date}/`).then(
					response => {
						console.log('请求成功了',response.data)
						// 判断状态后放入数组中
						response.data.forEach(element => {
							console.log('element',element)
							// 增加教室名称判断
							if(element.booking_id == bid){
							this.ScheduleList.push(element)
							}
						});
						console.log('this.ScheduleList',this.ScheduleList)
					},
					error => {
						console.log('请求失败了',error.message)
						// this.$bus.$emit('getUsers',false,false,error.message,[])
					}
				)
			},

		},
		mounted() {
			console.log(this.classroomschedule_date)
			this.searchSchedules(this.booking_id,this.classroomschedule_date)
		},
	}
</script>

<style>
</style>

MyBookingDetail.vue（复用，略）

路由组件6-其他

MyToday.vue

在这里插入图片描述

<template>

	<div class="container">
		<div class="row py-1">

		
		<button @click="searchTodaySchedules('2022-12-13',$event)">查询12/13排程</button>

		<!--引入今日排程-->
		<div class="col-lg-12 col-md-12">
			<div class="py-2 text-center">
			<h2>当天教室安排</h2>
			<p class="lead">显示今天教室使用情况</p>
			</div>

				<!--表单-->
				<table class="table table-striped table-bordered text-center">
					<thead>
					<tr style="color:White;background-color:#3366FF;font-family:微軟正黑體,Tahoma,Arial,微軟雅黑體;font-size:15px;">
						<th scope="col">预定教室名称</th>
						<th scope="col" style="width:40%">预定内容</th>
						<th scope="col">预定时间</th>
					</tr>
					</thead>
					
					<tr v-for='(sch,index) in this.ScheduleList' :key="index" valign="middle" style="color:Black;border-color:#E0E0E0;font-size:15px;">
						<td>{{ sch.booking_classroom_name }}</td>
						<td style="width:40%">{{ sch.booking_content }}</td>
						<td>{{ sch.booking_date }}&nbsp;{{ sch.booking_start_time }}-{{ sch.booking_end_time }}</td>
					</tr>
					

					
				</table>

				</div>

		</div>

	</div>

</template>
  
<script>
	import axios from 'axios'

	export default {
		name:'MyHelp',
		data() {
			return {
				// title:'教室概况',
				// buttonName:'more',
				// href_sop:''
				ScheduleList:[],
				keyWord:'2022-12-21',
			}
    	},
		methods: {
			searchTodaySchedules(k,e){
					this.ScheduleList = []
					axios.get(`http://localhost:8080/tc1/bookingDef/${k}/`).then(
					response => {
						console.log('请求成功了',response.data.items)
						// 判断状态后放入数组中
						response.data.forEach(element => {
							if(element.booking_status === '借订中' && element.booking_approve_Y_N === 'Y'){
								this.ScheduleList.unshift(element)
							}
						});
					},
					error => {
						console.log('请求失败了',error.message)
						// this.$bus.$emit('getUsers',false,false,error.message,[])
					}
				)
			}
		},
		mounted(){
			this.searchTodaySchedules(this.keyWord)
		},
	}
</script>

<style>
</style>

MyHelp.vue

在这里插入图片描述

<template>
	<div>
		<div>

		<div class="container p-4">
			<h2>Help/教室指南</h2>
			<div class="container">
				<div class="card-deck mb-3 text-center w-75">
					<MyCard title="用户须知" href_sop="https://www.baidu.com/" buttonName="用户手册">
						<template>
							<li>【教室查询】</li>
							<li>【教室预订】</li>
							<li>【教室使用】</li>
							<li>【教室5S】</li>
						</template>
					</MyCard>

					<MyCard class="ml-5"  title="管理员须知" href_sop="https://www.baidu.com/" buttonName="管理员手册">
						<template>
							<li>【教室维护】</li>
							<li>【教室审核】</li>
							<li>【教室使用】</li>
							<li>【教室5S检查】</li>
						</template>
					</MyCard>


				</div>

			</div>

		</div>


		</div>
	</div>
</template>
  
<script>

	import MyCard from './MyCard.vue'

	export default {
		name:'MyHelp',
		components:{
			MyCard,
		}
	}
</script>

<style>
</style>

模拟后端服务器

server.js

const express = require('express')

const app = express()

app.get('/bookingdata',(req,res)=>{
    res.send( {
        "booking_id": 384,
        "booking_classroom_name": "*****",
        "booking_classroom_person_hc": 20,
        "booking_date": "2022-12-13",
        "booking_start_time": "08:30:00",
        "booking_end_time": "10:29:00",
        "booking_type": "课程",
        "booking_content": "*****",
        "booking_employee_id": "*****",
        "booking_employee_name": "*****",
        "booking_employee_phone": "*****",
        "booking_fill_date": "2022-11-24",
        "booking_approve_admin_id": null,
        "booking_approve_admin_name": "*****",
        "booking_approve_admin_phone": "*****",
        "booking_approve_Y_N": "N",
        "booking_status": "取消借订",
        "booking_audit": null,
        "booking_audit_description": null,
        "booking_audit_remark": null
    },
    )
})

app.listen(8001,(err)=>{
    if(!err) console.log('服务器启动成功了!')
})