|
|
|
|
@ -11,7 +11,7 @@
|
|
|
|
|
<el-header>
|
|
|
|
|
<div>
|
|
|
|
|
<el-input type="text" style="max-width: 400px;float: left" placeholder="请输入查询关键字" ><el-button slot="append" icon="el-icon-search"></el-button></el-input>
|
|
|
|
|
<el-button style="float: right" class="el-button--danger" @click="$router.push('/teacher/myApplyRecord')">我的申请记录</el-button>
|
|
|
|
|
<el-button style="float: right" class="el-button--danger" @click="toMyRecord">我的申请记录</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</el-header>
|
|
|
|
|
<el-table :data="tableData" border ref="detailtb" height="500px">
|
|
|
|
|
@ -29,8 +29,8 @@
|
|
|
|
|
label="操作"
|
|
|
|
|
width="212">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<el-button @click="" type="text" size="medium" @click="$router.push('/labApplyDetail')">查看申请详情</el-button>
|
|
|
|
|
<el-button @click="formDialog=true" type="text" size="medium">申请</el-button>
|
|
|
|
|
<el-button @click="" type="text" size="medium" @click="checkDetail(scope.row)">查看申请详情</el-button>
|
|
|
|
|
<el-button @click="clickLabApply(scope.row)" type="text" size="medium">申请</el-button>
|
|
|
|
|
</template>>
|
|
|
|
|
|
|
|
|
|
</el-table-column>
|
|
|
|
|
@ -38,37 +38,40 @@
|
|
|
|
|
</el-main>
|
|
|
|
|
<!-- 填写申请课室表单信息-->
|
|
|
|
|
<el-dialog title="请填写以下申请信息" :visible.sync="formDialog" :close-on-click-modal="false">
|
|
|
|
|
|
|
|
|
|
<el-form :model="form" :inline="true" label-width="100px">
|
|
|
|
|
<el-form-item label="课程名称" prop="course_name" :rules="[{ required: true, message: '请输入课程名称', trigger: 'blur' }]">
|
|
|
|
|
<el-select v-model="form.course_name" @change="">
|
|
|
|
|
<el-option v-for="item in courseOption" :key="item.uc_id" :label="item.course_name"></el-option>
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="申请时间段" prop="schedule" :rules="[{ required: true, message: '请选择申请时间段', trigger: 'blur' }]">
|
|
|
|
|
<el-input v-model="form.schedule" placeholder="请点击右侧图标进行设置" >
|
|
|
|
|
<i slot="suffix" class="el-input__icon el-icon-date" @click="courseDialog=true" style="cursor: pointer"></i>
|
|
|
|
|
</el-input></el-form-item>
|
|
|
|
|
<el-form-item label="地址" >
|
|
|
|
|
<el-input v-model="form.position" ></el-input>
|
|
|
|
|
<el-input v-model="form.position" disabled></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="申请时间" prop="date" >
|
|
|
|
|
<el-input v-model="form.date"></el-input>
|
|
|
|
|
<el-input v-model="form.date" disabled></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="实验室名称">
|
|
|
|
|
<el-input v-model="form.name"></el-input>
|
|
|
|
|
<el-input v-model="form.name" disabled></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="姓名" prop="nickname" :rules="[{ required: true, message: '请输入您的姓名', trigger: 'blur' }]">
|
|
|
|
|
<el-input v-model="form.nickname"></el-input>
|
|
|
|
|
<el-input v-model="form.nickname" disabled></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="手机号" prop="tel" :rules="[
|
|
|
|
|
{ required: true, message: '请输入您的手机号', trigger: 'blur' },
|
|
|
|
|
{type:'number',message: '请输入11位有效数字',trigger: 'blur'}]">
|
|
|
|
|
<el-input v-model="form.tel"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="课程名称" prop="course_name" :rules="[{ required: true, message: '请输入课程名称', trigger: 'blur' }]">
|
|
|
|
|
<el-input v-model="form.course_name"></el-input>
|
|
|
|
|
<el-input v-model="form.tel" disabled></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="使用班级" prop="class" :rules="[{ required: true, message: '请填写使用的班级', trigger: 'blur' }]">
|
|
|
|
|
<el-input v-model="form.class"></el-input>
|
|
|
|
|
<el-input v-model="form.class" disabled></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="班级人数" prop="population" :rules="[{ required: true, message: '填写班级人数', trigger: 'blur' }]">
|
|
|
|
|
<el-input v-model="form.population"></el-input>
|
|
|
|
|
<el-input v-model="form.population" disabled></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="申请时间段" prop="schedule" :rules="[{ required: true, message: '请选择申请时间段', trigger: 'blur' }]">
|
|
|
|
|
<el-input v-model="form.schedule" placeholder="请点击右侧图标进行设置" >
|
|
|
|
|
<i slot="suffix" class="el-input__icon el-icon-date" @click="courseDialog=true" style="cursor: pointer"></i>
|
|
|
|
|
</el-input></el-form-item>
|
|
|
|
|
<el-form-item label="备注" prop="remind"><el-input v-model="form.remind" ></el-input></el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
<div slot="footer">
|
|
|
|
|
@ -86,7 +89,7 @@
|
|
|
|
|
</el-dialog>
|
|
|
|
|
<!-- 周次选择-->
|
|
|
|
|
<el-dialog :visible.sync="weekDialog" title="请选择周数" width="400px" :close-on-click-modal="false" >
|
|
|
|
|
<week-selection @add="addWeek" @cancel="cancelSelection" ref="weekSelection"></week-selection>
|
|
|
|
|
<week-selection @add="addWeek" @cancel="cancelSelection" ref="weekSelection" :check-option="checkOptioin"></week-selection>
|
|
|
|
|
</el-dialog>
|
|
|
|
|
</el-container>
|
|
|
|
|
|
|
|
|
|
@ -110,13 +113,19 @@
|
|
|
|
|
},
|
|
|
|
|
data(){
|
|
|
|
|
return{
|
|
|
|
|
tableData:[{}
|
|
|
|
|
],
|
|
|
|
|
user:{},
|
|
|
|
|
lab:{},
|
|
|
|
|
|
|
|
|
|
tableData:[{}],
|
|
|
|
|
checkOptioin :[],
|
|
|
|
|
|
|
|
|
|
formDialog:false,
|
|
|
|
|
courseDialog:false,
|
|
|
|
|
weekDialog:false,
|
|
|
|
|
|
|
|
|
|
perTargetValue:'',
|
|
|
|
|
allWeeksValue:[],
|
|
|
|
|
|
|
|
|
|
form:{
|
|
|
|
|
position:'',
|
|
|
|
|
name:'',
|
|
|
|
|
@ -128,19 +137,97 @@
|
|
|
|
|
population:'',
|
|
|
|
|
schedule:'',
|
|
|
|
|
remind:''
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
courseOption:[]
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
methods:{
|
|
|
|
|
//表格中每个格子的风格
|
|
|
|
|
cellStyle:function({row, column, rowIndex, columnIndex}){
|
|
|
|
|
if (column.label!=''){
|
|
|
|
|
return 'cursor:pointer'
|
|
|
|
|
}
|
|
|
|
|
//（待写）检索该实验室的申请情况，每个格子的周数未满则显示为绿色外框，满了则显示红色外框
|
|
|
|
|
//思路大概是每个格子都定义一个属性——isFull,点击打开格子时，就会获取格子的信息，进行for循环，如果isFull，则格子显示为绿色，反之显示为红色。
|
|
|
|
|
},
|
|
|
|
|
//点击格子促发的函数
|
|
|
|
|
cellClick:function (row, column, cell, event) {
|
|
|
|
|
//(待写)检索该格子的周数申请信息，被申请的周数使其样式变为disable
|
|
|
|
|
let position = this.lab.position
|
|
|
|
|
let rowIndex = row.index
|
|
|
|
|
let columIndex = column.index
|
|
|
|
|
var weeks=get('',{position,rowIndex,columIndex}) //返回该格子的周数信息:数组
|
|
|
|
|
this.checkOption=weeks
|
|
|
|
|
//测试用例
|
|
|
|
|
// this.checkOption=[
|
|
|
|
|
// {
|
|
|
|
|
// value:'1',
|
|
|
|
|
// isDisable:false
|
|
|
|
|
// },
|
|
|
|
|
// {
|
|
|
|
|
// value:'2',
|
|
|
|
|
// isDisable:false
|
|
|
|
|
// },
|
|
|
|
|
// {
|
|
|
|
|
// value:'3',
|
|
|
|
|
// isDisable:false
|
|
|
|
|
// },
|
|
|
|
|
// {
|
|
|
|
|
// value:'4',
|
|
|
|
|
// isDisable:false
|
|
|
|
|
// },
|
|
|
|
|
// {
|
|
|
|
|
// value:'5',
|
|
|
|
|
// isDisable:false
|
|
|
|
|
// },
|
|
|
|
|
// {
|
|
|
|
|
// value:'6',
|
|
|
|
|
// isDisable:false
|
|
|
|
|
// },
|
|
|
|
|
// {
|
|
|
|
|
// value:'7',
|
|
|
|
|
// isDisable:false
|
|
|
|
|
// },
|
|
|
|
|
// {
|
|
|
|
|
// value:'8',
|
|
|
|
|
// isDisable:false
|
|
|
|
|
// },
|
|
|
|
|
// {
|
|
|
|
|
// value:'9',
|
|
|
|
|
// isDisable:false
|
|
|
|
|
// },
|
|
|
|
|
// {
|
|
|
|
|
// value:'10',
|
|
|
|
|
// isDisable:false
|
|
|
|
|
// },{
|
|
|
|
|
// value:'11',
|
|
|
|
|
// isDisable:false
|
|
|
|
|
// },{
|
|
|
|
|
// value:'12',
|
|
|
|
|
// isDisable:false
|
|
|
|
|
// },{
|
|
|
|
|
// value:'13',
|
|
|
|
|
// isDisable:false
|
|
|
|
|
// },{
|
|
|
|
|
// value:'14',
|
|
|
|
|
// isDisable:false
|
|
|
|
|
// },{
|
|
|
|
|
// value:'15',
|
|
|
|
|
// isDisable:false
|
|
|
|
|
// },{
|
|
|
|
|
// value:'16',
|
|
|
|
|
// isDisable:false
|
|
|
|
|
// },{
|
|
|
|
|
// value:'17',
|
|
|
|
|
// isDisable:false
|
|
|
|
|
// },{
|
|
|
|
|
// value:'18',
|
|
|
|
|
// isDisable:false
|
|
|
|
|
// },
|
|
|
|
|
// ]
|
|
|
|
|
console.log(row.index)
|
|
|
|
|
console.log(column.index)
|
|
|
|
|
if (this.weekDialog=false){this.weekDialog=true}
|
|
|
|
|
else {this.weekDialog=false}
|
|
|
|
|
if (column.label!='') {
|
|
|
|
|
@ -148,12 +235,35 @@
|
|
|
|
|
// event.target.textContent='' //赋予格子内容
|
|
|
|
|
this.weekDialog=true
|
|
|
|
|
this.perTargetValue=event.target //用target对表格进行定位并保存致target对象
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
//跳转到我的申请记录
|
|
|
|
|
toMyRecord(){
|
|
|
|
|
this.$router.push('/teacher/myApplyRecord/'+this.user.u_id) //这里的user.u_id作为是作为路径参数存在
|
|
|
|
|
},
|
|
|
|
|
//点击申请实验室按钮
|
|
|
|
|
clickLabApply(row){
|
|
|
|
|
this.lab=row
|
|
|
|
|
this.formDialog=true
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
//点击查看申请详情
|
|
|
|
|
checkDetail(row){
|
|
|
|
|
this.$router.push('/labApplyDetail/'+row.position) //发送该行的实验室地址作为参数，使得实验室申请详情可以获得此参数后请求并检索数据
|
|
|
|
|
},
|
|
|
|
|
//当选择的课程发生改变触发此函数
|
|
|
|
|
selectChange(){
|
|
|
|
|
this.courseOption = get('',this.u_id) //发送教师id，返回该教师课程管理中所有的课程信息，是一个数组
|
|
|
|
|
this.form.position= this.lab.position //实验室地点
|
|
|
|
|
this.form.name= this.lab.name //实验室名称
|
|
|
|
|
this.form.date=d.getFullYear()+'/'+(d.getMonth()+1)+'/'+d.getDate() //日期
|
|
|
|
|
this.form.nickname= this.user.nickname //昵称
|
|
|
|
|
this.form.tel= this.user.tel //电话
|
|
|
|
|
this.form.class= this.courseOption.class //班级
|
|
|
|
|
this.form.population= this.courseOption.population //人数
|
|
|
|
|
},
|
|
|
|
|
//添加已选择的的周数
|
|
|
|
|
addWeek:function () {
|
|
|
|
|
console.log(this.perTargetValue)
|
|
|
|
|
this.weekDialog=false
|
|
|
|
|
var targetValue = this.$refs.weekSelection.checkedValue
|
|
|
|
|
if(targetValue.length!==0){
|
|
|
|
|
@ -163,6 +273,7 @@
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
//取消选择这些周数
|
|
|
|
|
cancelSelection:function () {
|
|
|
|
|
console.log('已取消')
|
|
|
|
|
this.perTargetValue.style.backgroundColor=''
|
|
|
|
|
@ -173,12 +284,14 @@
|
|
|
|
|
// }
|
|
|
|
|
this.weekDialog=false
|
|
|
|
|
},
|
|
|
|
|
//确定所有已选择的周数
|
|
|
|
|
setWeeks:function () {
|
|
|
|
|
this.form.schedule=this.allWeeksValue.toString()
|
|
|
|
|
this.courseDialog=false
|
|
|
|
|
console.log(this.$refs.times)
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
//取消所有已选择的周数
|
|
|
|
|
cancelSetWeeks:function () {
|
|
|
|
|
this.courseDialog=false
|
|
|
|
|
},
|
|
|
|
|
@ -193,10 +306,12 @@
|
|
|
|
|
this.formDialog=false
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
//钩子函数，生命周期mouted
|
|
|
|
|
mounted() {
|
|
|
|
|
console.log(this.$refs.detailtb)
|
|
|
|
|
this.user=get('') //获取账号信息
|
|
|
|
|
var d = new Date()
|
|
|
|
|
this.form.date=d.getFullYear()+'/'+(d.getMonth()+1)+'/'+d.getDate()
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
aiyadc
5 years ago