【Vue,ElementUI】教室预订明细优化-20230103

教室预订明细优化效果

关键点：

1. :model="SchFirst"采取计算属性（也不一定是计算属性，但是要确保有数据）
2. ref="SchFirst"和两个按钮事件参数名字一致，确保【取消预约】和【重置】功能可用
   
   <el-button type=“primary” @click=“submitForm(‘SchFirst’)”>取消预约
   <el-button @click=“resetForm(‘SchFirst’)”>重置
   
3. 采取只读属性disabled，时间和日期选择器也可以只读。

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 class="text-center pb-4">查看教室借订的明细</h2>

            <el-form :model="SchFirst" ref="SchFirst" label-width="150px" class="demo-ruleForm pl-5 ml-5">
		
        <el-form-item
            label="预定编号"
            prop="booking_id"
        >
            <el-input disabled v-model="SchFirst.booking_id" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item
            label="预定教室名称"
            prop="booking_classroom_name"
            :rules="[
            { required: true, message: '教室名称不能为空', trigger: 'blur'},
            ]"
        >
            <el-input disabled v-model="SchFirst.booking_classroom_name" autocomplete="off"></el-input>
        </el-form-item>


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


        <el-form-item 
            label="预定事宜说明" 
            prop="booking_content"
            :rules="[
            { required: true,  min: 3, max: 100, message: '预定事宜说明请填写至少3个字', trigger: 'blur'},
            ]"
        >
            <el-input disabled v-model="SchFirst.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 disabled type="date" placeholder="预订日期" v-model="SchFirst.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 disabled placeholder="开始时间" v-model="SchFirst.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 disabled placeholder="结束时间" v-model="SchFirst.booking_end_time" style="width: 100%;"
                    :picker-options="{
                        start: '08:29',
                        step: '00:30',
                        end: '19:59',
                        minTime: ScheduleList.booking_start_time,
                        }"
                    >
                    </el-time-select>
                </el-form-item>
            </el-col>
        </el-form-item>


        <el-form-item label="预订人" required >
            <el-col :span="7" class="pr-1">
                <el-form-item 
                    prop="booking_employee_id"
                    :rules="[
                    { required: true, message: '预定人工号不能为空', trigger: 'blur' }
                    ]"
                >
                    <el-input disabled v-model="SchFirst.booking_employee_id" placeholder="工号"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="7" class="pr-1">
                <el-form-item 
                    prop="booking_employee_name"
                    :rules="[
                    { required: true, message: '中文姓名不能为空', trigger: 'blur' }
                    ]"
                >
                    <el-input disabled v-model="SchFirst.booking_employee_name" placeholder="姓名"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="7" class="pr-1">
                <el-form-item 
                    prop="booking_employee_phone"
                    :rules="[
                    { required: true, min: 11, max: 11, message: '请填写11位手机长号', trigger: 'blur' }
                    ]"
                >
                    <el-input disabled v-model="SchFirst.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 disabled type="date" placeholder="预订周末请先联系管理员" v-model="SchFirst.booking_fill_date" style="width: 100%;"></el-date-picker>
        </el-form-item>


        <el-form-item label="审核人" required >
            <el-col :span="7" class="pr-1">
                <el-form-item 
                    prop="booking_approve_admin_name"
                    :rules="[
                    { required: true, message: '审核人姓名不能为空', trigger: 'blur' }
                    ]"
                >
                    <el-input v-model="SchFirst.booking_approve_admin_name" placeholder="姓名"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="7" class="pr-1">
                <el-form-item 
                    prop="booking_approve_admin_phone"
                    :rules="[
                    { required: true, min: 11, max: 11, message: '请填写11位手机长号', trigger: 'blur' }
                    ]"
                >
                    <el-input v-model="SchFirst.booking_approve_admin_phone" placeholder="长号"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="7" class="pl-2">
                <el-form-item 
                    prop="booking_approve_Y_N"
                    label="审核结果"
                    :rules="[
                    { required: true, message: '审核结果不能为空', trigger: 'blur' }
                    ]"
                >
                    <el-input v-model="SchFirst.booking_approve_Y_N" placeholder="请写Y或N"></el-input>
                </el-form-item>
            </el-col>
        </el-form-item>



        <el-form-item>
            <el-button type="primary" @click="submitForm('SchFirst')">取消预约</el-button>
            <el-button @click="resetForm('SchFirst')">重置</el-button>
        </el-form-item>
    </el-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,[])
					}
				)
			},
            submitForm(formName) {
			this.$refs[formName].validate((valid) => {
			if (valid) {
				alert('submit!');
			} else {
				console.log('error submit!!');
				return false;
			}
			});
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
		},
		mounted() {
			console.log(this.booking_id,this.classroomschedule_date)
			this.searchSchedules(this.booking_id,this.classroomschedule_date)
		},
	}
</script>

<style>
</style>