【Vue教室管理系统】利用ajax和弹窗实现booking数据分享--20221228

已于 2022-12-28 23:22:41 修改
阅读量202 收藏
点赞数
分类专栏： Vue 文章标签： vue.js javascript ajax
于 2022-12-28 23:10:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46629123/article/details/128475217
版权

利用ajax和弹窗实现booking数据分享

关键点1：elementUI的popover弹窗和表格props属性（读取参数的关键）

					<!-- 利用ajax和弹窗实现booking数据分享 -->
					<el-table-column prop="classroomschedule_0800_0829_YN" label="08:00" sortable width="53" >
						<template slot-scope="props">
							<el-popover
								placement="right"
								width="800"
								trigger="click">
								<el-table :data="ScheduleList2">
									<el-table-column width="100" property="booking_date" label="日期"></el-table-column>
									<el-table-column width="100" property="booking_start_time" label="开始时间"></el-table-column>
									<el-table-column width="100" property="booking_end_time" label="结束时间"></el-table-column>
									<el-table-column width="80" property="booking_employee_name" label="姓名"></el-table-column>
									<el-table-column width="120" property="booking_employee_phone" label="电话"></el-table-column>
									<el-table-column width="100" property="booking_classroom_name" label="教室"></el-table-column>
									<el-table-column width="100" property="booking_content" label="内容"></el-table-column>
								</el-table>
								<a slot="reference" @click="AjaxOdetail(props.row.classroomschedule_0800_0829_content,props.row.classroomschedule_date)">{{props.row.classroomschedule_0800_0829_YN  | deleteN}}</a>
							</el-popover>
						</template>
					</el-table-column>

关键点2：ajax异步读取读取数据

			AjaxOdetail(bid,date){
						this.ScheduleList2 = []
						axios.get(`http://localhost:8080/tc1/bookingDef/${date}/`).then(
						response => {
							console.log('AjaxOdetail请求成功了',response.data)
							// 判断状态后放入数组中
							response.data.forEach(element => {
								console.log('element',element)
								// 增加教室名称判断
								if(element.booking_id == bid){
								this.ScheduleList2.push(element)
								}
							});
							console.log('this.ScheduleList2',this.ScheduleList2)
						},
						error => {
							console.log('AjaxOdetail请求失败了',error.message)
							// this.$bus.$emit('getUsers',false,false,error.message,[])
						}
					)
				},

关键点3：熟悉Vue的事件，用click出发ajax更新数据并弹窗。

效果

在这里插入图片描述

代码

MyClassroomQueryResult.vue

<template>
    <div class="">
        <div class="row py-2 pl-3 ml-3 align-items-center">
            
            <!--展示显示人员-->
            <h2 class="ml-3">教室空闲时间查询</h2><span>(Y为已预订)</span>
            <span class="ml-5 pl-5"><router-link type="button" class="btn" style="color:White;background-color:#909399" target="_blank" to="/bookingApply" >教室预定申请</router-link></span>
            <div class="ml-3 table-responsive"  style="background-color: #fff;">
              
				<!-- 第二个表格 -->
				<el-table :header-cell-style="{ 
					background:'#909399',color:'White',border: '1px solid '}" 
					style="width: 100%;font-size:10px;" class="table-bordered " :data="ScheduleList" stripe
					:default-sort = "{prop: 'classroomschedule_date'}">
					<!-- 表格内容 -->
					<el-table-column prop="classroomschedule_classroom_name" label="教室" fixed sortable width="120"></el-table-column>
					<el-table-column prop="classroomschedule_date" label="日期" fixed sortable width="53" :formatter="formatter_date"></el-table-column>
					<el-table-column prop="classroomschedule_classroom_name" label="时数" sortable width="53" :formatter="CountY"></el-table-column>

					<!-- 利用ajax和弹窗实现booking数据分享 -->
					<el-table-column prop="classroomschedule_0800_0829_YN" label="08:00" sortable width="53" >
						<template slot-scope="props">
							<el-popover
								placement="right"
								width="800"
								trigger="click">
								<el-table :data="ScheduleList2">
									<el-table-column width="100" property="booking_date" label="日期"></el-table-column>
									<el-table-column width="100" property="booking_start_time" label="开始时间"></el-table-column>
									<el-table-column width="100" property="booking_end_time" label="结束时间"></el-table-column>
									<el-table-column width="80" property="booking_employee_name" label="姓名"></el-table-column>
									<el-table-column width="120" property="booking_employee_phone" label="电话"></el-table-column>
									<el-table-column width="100" property="booking_classroom_name" label="教室"></el-table-column>
									<el-table-column width="100" property="booking_content" label="内容"></el-table-column>
								</el-table>
								<a slot="reference" @click="AjaxOdetail(props.row.classroomschedule_0800_0829_content,props.row.classroomschedule_date)">{{props.row.classroomschedule_0800_0829_YN  | deleteN}}</a>
							</el-popover>
						</template>
					</el-table-column>

					<el-table-column prop="classroomschedule_0830_0859_YN" label="08:30" sortable width="53">
						<template slot-scope="props">
							<a type="primary" target="_blank" @click="GOTOdetail(props.row,props.row.classroomschedule_0830_0859_content)" >{{props.row.classroomschedule_0830_0859_YN  | deleteN}}</a>
						</template>
					</el-table-column>

					<el-table-column prop="classroomschedule_0900_0929_YN" label="09:00" sortable width="53" >
						<template slot-scope="props">
							<a type="primary" target="_blank" @click="GOTOdetail(props.row,props.row.classroomschedule_0900_0929_content)" >{{props.row.classroomschedule_0900_0929_YN  | deleteN}}</a>
						</template>
					</el-table-column>

					<el-table-column prop="classroomschedule_0930_0959_YN" label="09:30" sortable width="53" >
						<template slot-scope="props">
							<a type="primary" target="_blank" @click="GOTOdetail(props.row,props.row.classroomschedule_0930_0959_content)" >{{props.row.classroomschedule_0930_0959_YN  | deleteN}}</a>
						</template>
					</el-table-column>
					<el-table-column prop="classroomschedule_1000_1029_YN" label="10:00" sortable width="53">
						<template slot-scope="props">
							<a type="primary" target="_blank" @click="GOTOdetail(props.row,props.row.classroomschedule_1000_1029_content)" >{{props.row.classroomschedule_1000_1029_YN | deleteN}}</a>
						</template>
					</el-table-column>
					<el-table-column prop="classroomschedule_1030_1059_YN" label="10:30" sortable width="53" >
						<template slot-scope="props">
							<a type="primary" target="_blank" @click="GOTOdetail(props.row,props.row.classroomschedule_1030_1059_content)" >{{props.row.classroomschedule_1030_1059_YN | deleteN}}</a>
						</template>
					</el-table-column>
					<el-table-column prop="classroomschedule_1100_1129_YN" label="11:00" sortable width="53" >
						<template slot-scope="props">
							<a type="primary" target="_blank" @click="GOTOdetail(props.row,props.row.classroomschedule_1100_1129_content)" >{{props.row.classroomschedule_1100_1129_YN | deleteN}}</a>
						</template>
					</el-table-column>
					<el-table-column prop="classroomschedule_1130_1159_YN" label="11:30" sortable width="53" >
						<template slot-scope="props">
							<a type="primary" target="_blank" @click="GOTOdetail(props.row,props.row.classroomschedule_1130_1159_content)" >{{props.row.classroomschedule_1130_1159_YN | deleteN}}</a>
						</template>
					</el-table-column>
					<el-table-column prop="classroomschedule_1200_1229_YN" label="12:00" sortable width="53" >
						<template slot-scope="props">
							<a type="primary" target="_blank" @click="GOTOdetail(props.row,props.row.classroomschedule_1200_1229_content)" >{{props.row.classroomschedule_1200_1229_YN | deleteN}}</a>
						</template>
					</el-table-column>
					<el-table-column prop="classroomschedule_1230_1259_YN" label="12:30" sortable width="53">
						<template slot-scope="props">
							<a type="primary" target="_blank" @click="GOTOdetail(props.row,props.row.classroomschedule_1230_1259_content)" >{{props.row.classroomschedule_1230_1259_YN | deleteN}}</a>
						</template>
					</el-table-column>
					<el-table-column prop="classroomschedule_1300_1329_YN" label="13:00" sortable width="53" >
						<template slot-scope="props">
							<a type="primary" target="_blank" @click="GOTOdetail(props.row,props.row.classroomschedule_1300_1329_content)" >{{props.row.classroomschedule_1300_1329_YN | deleteN}}</a>
						</template>
					</el-table-column>
					<el-table-column prop="classroomschedule_1330_1359_YN" label="13:30" sortable width="53" >
						<template slot-scope="props">
							<a type="primary" target="_blank" @click="GOTOdetail(props.row,props.row.classroomschedule_1330_1359_content)" >{{props.row.classroomschedule_1330_1359_YN | deleteN}}</a>
						</template>
					</el-table-column>
					<el-table-column prop="classroomschedule_1400_1429_YN" label="14:00" sortable width="53" >
						<template slot-scope="props">
							<a type="primary" target="_blank" @click="GOTOdetail(props.row,props.row.classroomschedule_1400_1429_content)" >{{props.row.classroomschedule_1400_1429_YN | deleteN}}</a>
						</template>
					</el-table-column>
					<el-table-column prop="classroomschedule_1430_1459_YN" label="14:30" sortable width="53" >
						<template slot-scope="props">
							<a type="primary" target="_blank" @click="GOTOdetail(props.row,props.row.classroomschedule_1430_1459_content)" >{{props.row.classroomschedule_1430_1459_YN | deleteN}}</a>
						</template>
					</el-table-column>
					<el-table-column prop="classroomschedule_1500_1529_YN" label="15:00" sortable width="53">
						<template slot-scope="props">
							<a type="primary" target="_blank" @click="GOTOdetail(props.row,props.row.classroomschedule_1500_1529_content)" >{{props.row.classroomschedule_1500_1529_YN | deleteN}}</a>
						</template>
					</el-table-column>
					<el-table-column prop="classroomschedule_1530_1559_YN" label="15:30" sortable width="53">
						<template slot-scope="props">
							<a type="primary" target="_blank" @click="GOTOdetail(props.row,props.row.classroomschedule_1530_1559_content)" >{{props.row.classroomschedule_1530_1559_YN | deleteN}}</a>
						</template>
					</el-table-column>
					<el-table-column prop="classroomschedule_1600_1629_YN" label="16:00" sortable width="53">
						<template slot-scope="props">
							<a type="primary" target="_blank" @click="GOTOdetail(props.row,props.row.classroomschedule_1600_1629_content)" >{{props.row.classroomschedule_1600_1629_YN | deleteN}}</a>
						</template>
					</el-table-column>
					<el-table-column prop="classroomschedule_1630_1659_YN" label="16:30" sortable width="53">
						<template slot-scope="props">
							<a type="primary" target="_blank" @click="GOTOdetail(props.row,props.row.classroomschedule_1630_1659_content)" >{{props.row.classroomschedule_1630_1659_YN | deleteN}}</a>
						</template>
					</el-table-column>
					<el-table-column prop="classroomschedule_1700_1729_YN" label="17:00" sortable width="53">
						<template slot-scope="props">
							<a type="primary" target="_blank" @click="GOTOdetail(props.row,props.row.classroomschedule_1700_1729_content)" >{{props.row.classroomschedule_1700_1729_YN | deleteN}}</a>
						</template>
					</el-table-column>
					<el-table-column prop="classroomschedule_1730_1759_YN" label="17:30" sortable width="53">
						<template slot-scope="props">
							<a type="primary" target="_blank" @click="GOTOdetail(props.row,props.row.classroomschedule_1730_1759_content)" >{{props.row.classroomschedule_1730_1759_YN | deleteN}}</a>
						</template>
					</el-table-column>
					<el-table-column prop="classroomschedule_1800_1829_YN" label="18:00" sortable width="53">
						<template slot-scope="props">
							<a type="primary" target="_blank" @click="GOTOdetail(props.row,props.row.classroomschedule_1800_1829_content)" >{{props.row.classroomschedule_1800_1829_YN | deleteN}}</a>
						</template>
					</el-table-column>
					<el-table-column prop="classroomschedule_1830_1859_YN" label="18:30" sortable width="53">
						<template slot-scope="props">
							<a type="primary" target="_blank" @click="GOTOdetail(props.row,props.row.classroomschedule_1830_1859_content)" >{{props.row.classroomschedule_1830_1859_YN | deleteN}}</a>
						</template>
					</el-table-column>
					<el-table-column prop="classroomschedule_1900_1929_YN" label="19:00" sortable width="53">
						<template slot-scope="props">
							<a type="primary" target="_blank" @click="GOTOdetail(props.row,props.row.classroomschedule_1900_1929_content)" >{{props.row.classroomschedule_1900_1929_YN | deleteN}}</a>
						</template>
					</el-table-column>
					<el-table-column prop="classroomschedule_1930_1959_YN" label="19:30" sortable width="53">
						<template slot-scope="props">
							<a type="primary" target="_blank" @click="GOTOdetail(props.row,props.row.classroomschedule_1930_1959_content)" >{{props.row.classroomschedule_1930_1959_YN | deleteN}}</a>
						</template>
					</el-table-column>

				</el-table>
  
            </div>
        </div>
    </div>
</template>
  


<script>
	import axios from 'axios'

	export default {
		name:'MyClassroomQueryResult',
		
		data(){
			return{
				classroom_options:['TC-01.孟子教室','TC-02.庄子教室','TC-03.墨子教室','TC-04.旬子教室',
									'TC-05.国际语言教室','TC-06.会议室','TC-07.企业文化展厅',],
				ScheduleList:[],
				ScheduleList2:[],
				keyWord:[this.classroomschedule_date_start,this.classroomschedule_date_end],
			}
		},
		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,[])
							}
						)
						}
					)
			},
			AjaxOdetail(bid,date){
						this.ScheduleList2 = []
						axios.get(`http://localhost:8080/tc1/bookingDef/${date}/`).then(
						response => {
							console.log('AjaxOdetail请求成功了',response.data)
							// 判断状态后放入数组中
							response.data.forEach(element => {
								console.log('element',element)
								// 增加教室名称判断
								if(element.booking_id == bid){
								this.ScheduleList2.push(element)
								}
							});
							console.log('this.ScheduleList2',this.ScheduleList2)
						},
						error => {
							console.log('AjaxOdetail请求失败了',error.message)
							// this.$bus.$emit('getUsers',false,false,error.message,[])
						}
					)
				},
			formatter_date(row, column,cellValue, index) {
					return cellValue.split('-')[1] + '-' + cellValue.split('-')[2]
				},
			CountY(row, column,cellValue, index) {
					let i = 0
					if(row.classroomschedule_0800_0829_YN == 'Y') i += 0.5
					if(row.classroomschedule_0830_0859_YN == 'Y') i += 0.5
					if(row.classroomschedule_0900_0929_YN == 'Y') i += 0.5
					if(row.classroomschedule_0930_0959_YN == 'Y') i += 0.5
					if(row.classroomschedule_1000_1029_YN == 'Y') i += 0.5
					if(row.classroomschedule_1030_1059_YN == 'Y') i += 0.5
					if(row.classroomschedule_1100_1129_YN == 'Y') i += 0.5
					if(row.classroomschedule_1130_1159_YN == 'Y') i += 0.5
					if(row.classroomschedule_1200_1229_YN == 'Y') i += 0.5
					if(row.classroomschedule_1230_1259_YN == 'Y') i += 0.5
					if(row.classroomschedule_1300_1329_YN == 'Y') i += 0.5
					if(row.classroomschedule_1330_1359_YN == 'Y') i += 0.5
					if(row.classroomschedule_1400_1429_YN == 'Y') i += 0.5
					if(row.classroomschedule_1430_1459_YN == 'Y') i += 0.5
					if(row.classroomschedule_1500_1529_YN == 'Y') i += 0.5
					if(row.classroomschedule_1530_1559_YN == 'Y') i += 0.5
					if(row.classroomschedule_1600_1629_YN == 'Y') i += 0.5
					if(row.classroomschedule_1630_1659_YN == 'Y') i += 0.5
					if(row.classroomschedule_1700_1729_YN == 'Y') i += 0.5
					if(row.classroomschedule_1730_1759_YN == 'Y') i += 0.5
					if(row.classroomschedule_1800_1829_YN == 'Y') i += 0.5
					if(row.classroomschedule_1830_1859_YN == 'Y') i += 0.5
					if(row.classroomschedule_1900_1929_YN == 'Y') i += 0.5
					if(row.classroomschedule_1930_1959_YN == 'Y') i += 0.5
					return i
				},
			GOTOdetail(row,content){
				console.log('@@@@@@@@@','GOTOdetail')
				this.$router.push({
				name:'bookingDetail',
				query:{
					bid:content,
					classroomschedule_date:row.classroomschedule_date,
				}
				})
			}
			

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

	}
</script>

<style>
</style>
i see the future
关注
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值