【Vue,ElementUI】教室预订申请表单--20221229

i see the future

已于 2023-01-01 15:24:36 修改

阅读量446

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

于 2022-12-30 22:21:42 首次发布

本文链接：https://blog.csdn.net/m0_46629123/article/details/128501367

版权

Vue 专栏收录该内容

58 篇文章 1 订阅

订阅专栏

这是一个使用Vue.js实现的教室预定申请表单，包含字段如教室名称、参与人数、预定类别、预定时间等，并使用el-form组件进行数据验证，确保输入的完整性和格式正确性。表单验证触发事件包括change和blur，时间选择限制在特定的30分钟间隔内。

摘要由CSDN通过智能技术生成

效果

在这里插入图片描述

代码

请注意rule写在表头；
时间栏位有分为el-date-picker 和el-time-select；
trigger分为 ‘change’和’blur’；
利用rules来检验数据格式；

代码

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


		<el-form :model="ruleForm" ref="ruleForm" label-width="150px" class="demo-ruleForm pl-5 ml-5">
		
			<el-form-item 
				label="预定教室名称" 
				prop="checkedClassroom"
				:rules="[
				{ required: true, message: '教室名称不能为空', trigger: 'change'},
				]"
			>
				<el-select v-model="ruleForm.checkedClassroom" placeholder="请选择教室">
				<el-option :label="option" v-for="(option,index) in this.classroom_options" :value="option" :key="index"></el-option>
				</el-select>
			</el-form-item>

			<el-form-item
				label="参与人数"
				prop="booking_classroom_person_hc"
				:rules="[
				{ required: true, type: 'number', message: '参与人数不能为空,必须为数字值', trigger: 'blur'},
				]"
			>
				<el-input v-model.number="ruleForm.booking_classroom_person_hc" autocomplete="off"></el-input>
			</el-form-item>

			<el-form-item 
				label="预定类别" 
				prop="booking_type"
				:rules="[
				{ required: true, message: '预定类别不能为空', trigger: 'blur'},
				]"
			>
				<el-select v-model="ruleForm.booking_type" placeholder="预定类别">
					<el-option label="HR培训课程" value="HR培训课程"></el-option>
					<el-option label="非HR培训课程" value="非HR培训课程"></el-option>
					<el-option label="会议" value="会议"></el-option>
					<el-option label="其他" value="其他"></el-option>
				</el-select>
			</el-form-item>


			<el-form-item 
				label="预定事宜说明" 
				prop="booking_content"
				:rules="[
				{ required: true,  min: 3, max: 100, message: '预定事宜说明请填写至少3个字', trigger: 'blur'},
				]"
			>
				<el-input v-model="ruleForm.booking_content"></el-input>
			</el-form-item>

			<el-form-item
				label="预定时间"
			>
				<el-col :span="5">
					<el-form-item 
					prop="booking_date"
					:rules="[
						{ required: true, message: '预定时间不能为空', trigger: 'blur'},
						]"
					>
						<el-date-picker type="date" placeholder="预订日期" v-model="ruleForm.booking_date" style="width: 100%;"></el-date-picker>
					</el-form-item>
				</el-col>
				<el-col class="line text-center" :span="2">之</el-col>
				<el-col :span="5">
					<el-form-item 
					prop="booking_start_time"
					:rules="[
						{ required: true, message: '开始时间不能为空', trigger: 'blur'},
					]"
					>
						<el-time-select placeholder="开始时间" v-model="ruleForm.booking_start_time" style="width: 100%;"
						:picker-options="{
							start: '08:00',
							step: '00:30',
							end: '19:30'
							}"
						>
						</el-time-select>
					</el-form-item>
				</el-col>
				<el-col class="line text-center" :span="2">-</el-col>
				<el-col :span="5">
					<el-form-item
					prop="booking_end_time"
					:rules="[
						{ required: true, message: '结束时间不能为空', trigger: 'blur'},
					]"
					 >
						<el-time-select placeholder="结束时间" v-model="ruleForm.booking_end_time" style="width: 100%;"
						:picker-options="{
							start: '08:29',
							step: '00:30',
							end: '19:59',
							minTime: ruleForm.booking_start_time,
							}"
						>
						</el-time-select>
					</el-form-item>
				</el-col>
			</el-form-item>


			<el-form-item label="预订人" required >
				<el-col :span="7" class="pl-1">
					<el-form-item 
						prop="booking_employee_id"
						:rules="[
						{ required: true, message: '预定人工号不能为空', trigger: 'blur' }
						]"
					>
						<el-input v-model="ruleForm.booking_employee_id" placeholder="工号"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="7" class="pl-1">
					<el-form-item 
						prop="booking_employee_name"
						:rules="[
						{ required: true, message: '中文姓名不能为空', trigger: 'blur' }
						]"
					>
						<el-input v-model="ruleForm.booking_employee_name" placeholder="姓名"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="7" class="pl-1">
					<el-form-item 
						prop="booking_employee_phone"
						:rules="[
						{ required: true, min: 11, max: 11, message: '请填写11位手机长号', trigger: 'blur' }
						]"
					>
						<el-input v-model="ruleForm.booking_employee_phone" placeholder="长号"></el-input>
					</el-form-item>
				</el-col>
			</el-form-item>



			<el-form-item
				prop="booking_fill_date"
				label="填写日期" 
				:rules="[
				{ required: true, message: '填写日期不能为空', trigger: 'blur' }
				]"
			>
				<el-date-picker type="date" placeholder="预订周末请先联系管理员" v-model="ruleForm.booking_fill_date" style="width: 100%;"></el-date-picker>
			</el-form-item>

			<el-form-item>
				<el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
				<el-button @click="resetForm('ruleForm')">重置</el-button>
			</el-form-item>
		</el-form>


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


<script>


	export default {
		name:'MyTest',
		
		data() {
			return {
				classroom_options:['TC-01.孟子教室','TC-02.庄子教室','TC-03.墨子教室','TC-04.旬子教室',
									'TC-05.国际语言教室','TC-06.会议室','TC-07.企业文化展厅',],
				classroomschedule_date_start:'2022-12-21',
				classroomschedule_date_end:'2022-12-22',
				checkedClassroom: ['TC-01.孟子教室',],
				ruleForm: {
					checkedClassroom:[],
					booking_classroom_person_hc:'',
					booking_type:'',
					booking_content: '',
					booking_date:'',
					booking_start_time: '',
					booking_end_time: '',
					booking_employee_id: '',
					booking_employee_name:'',
					booking_employee_phone:'',
					booking_fill_date:'',
					},
			};
			},
		methods: {
		submitForm(formName) {
			this.$refs[formName].validate((valid) => {
			if (valid) {
				alert('submit!');
			} else {
				console.log('error submit!!');
				return false;
			}
			});
		},
		resetForm(formName) {
			this.$refs[formName].resetFields();
		}
		}

	}
</script>

<style>
</style>