教室表单查询效果
代码
以下不包含校对功能。
<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>