【Vue,ElementUI】教室表单查询--20230101

教室表单查询效果

代码

以下不包含校对功能。

<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>

				<el-form   label-width="300px" class="demo-ruleForm pl-5 ml-5">

					<el-form-item label="查询日期">
						<el-col :span="5" prop="booking_date_start">
							<el-form-item prop="booking_date_start">
								<el-date-picker
									v-model="booking_date_start"
									type="date"
									placeholder="开始日期"
									format="yyyy-MM-dd"
									value-format="yyyy-MM-dd"
									>
								</el-date-picker>
							</el-form-item>
						</el-col>
						<el-col class="line text-center" :span="3">-</el-col>
						<el-col :span="5"  prop="booking_date_end">
							<el-form-item prop="booking_date_end">
								<el-date-picker
									v-model="booking_date_end"
									type="date"
									placeholder="结束日期"
									format="yyyy-MM-dd"
									value-format="yyyy-MM-dd"
									>
								</el-date-picker>
							</el-form-item>
						</el-col>
					</el-form-item>

					<el-form-item label="预订人工号"  prop="booking_employee_id" required>
						<el-col :span="7" class="pr-1">
							<el-form-item 
								prop="booking_employee_id"
								:rules="[
								{ required: true, message: '预定人工号不能为空', trigger: 'blur' }
								]"
							>
								<el-input v-model="booking_employee_id" placeholder="工号"></el-input>
							</el-form-item>
						</el-col>
					</el-form-item>

					<el-form-item 
						prop="booking_approve_Y_N"
						label="预定是否被核准"
						:rules="[
						{ required: true, message: '审核结果不能为空', trigger: 'blur' }
						]"
					>
						<el-radio v-model="booking_approve_Y_N" label="All">All</el-radio>
						<el-radio v-model="booking_approve_Y_N" label="Y">Y</el-radio>
						<el-radio v-model="booking_approve_Y_N" label="N">N</el-radio>
					</el-form-item>
						
					<el-form-item >
						<el-button type="primary" @click="GoToclassroomQueryResult">查询</el-button>
					</el-form-item>

				</el-form>

			</div>


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


<script>


	export default {
		name:'MyClassroomQuery',
		
		data(){
			return{
				booking_date_start:'',
				booking_date_end:'',
				booking_employee_id:'',
				booking_approve_Y_N:'',
			}
		},
		methods:{
			GoToclassroomQueryResult(){
				//$router的两个API
				this.$router.push({
					name:'classroomQueryResult',
					params:{
							checkedClassroom:this.checkedClassroom,
							booking_date_start:this.booking_date_start,
							booking_date_end:this.booking_date_end,
						},
				})
			},
		}
	}
</script>

<style>
</style>