p35z7urxv
/
pqa2fspn3
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

[fix][V]：完善实验室申请页面

Browse Source
master
Romesum 5 years ago
parent 3ad5744b56
commit caa048e9f2
2 changed files with 162 additions and 168 deletions
Show Stats Download Patch File Download Diff File

4
element-vue/src/components/teacher/weekSelection.vue
Unescape View File

@ -25,6 +25,9 @@
const doubleVal=[2,4,6,8,10,12,14,16,18]; const doubleVal=[2,4,6,8,10,12,14,16,18];
export default { export default {
name: "weekSelection", name: "weekSelection",
props:{
ableList:{default: allVal}
},
data(){ data(){
return{ return{
checkedValue:[], checkedValue:[],
@ -32,7 +35,6 @@
isIndeterminate1:true, isIndeterminate1:true,
isIndeterminate2:true, isIndeterminate2:true,
isIndeterminate3:true, isIndeterminate3:true,
ableList:[1,2,3,4,5,6],
checkOption:[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18] checkOption:[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18]
} }
}, },

326
element-vue/src/pages/teacher/applyLab.vue
Unescape View File

@ -2,97 +2,89 @@
<div> <div>
<el-container> <el-container>
<!-- 标题栏--> <!-- 标题栏-->
<el-header style="padding: 0"> <el-header style="padding: 0">
<nav-bar></nav-bar> <nav-bar></nav-bar>
</el-header> </el-header>
<el-main> <el-main>
<!-- 年/和学期--> <!-- 年/和学期-->
<time-select ref="timeSelection"></time-select> <time-select ref="timeSelection"></time-select>
<!-- 表格查询、申请记录--> <!-- 表格查询、申请记录-->
<el-header> <el-header>
<div> <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-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="toMyRecord">我的申请记录</el-button> <el-button style="float: right" class="el-button--danger" @click="toMyRecord">我的申请记录</el-button>
</div> </div>
</el-header> </el-header>
<el-table :data="tableData" border ref="detailtb" height="500px"> <el-table :data="tableData" border ref="detailtb" height="500px">
<el-table-column prop="position" label="实验室地点"> <el-table-column prop="position" label="实验室地点"></el-table-column>
</el-table-column> <el-table-column prop="name" label="实验室名称"></el-table-column>
<el-table-column prop="name" label="实验室名称"> <el-table-column prop="capacity" label="可容纳人数"></el-table-column>
</el-table-column> <el-table-column prop="software" label="软件"></el-table-column>
<el-table-column prop="capacity" label="可容纳人数"> <el-table-column prop="nickname" label="管理员"></el-table-column>
</el-table-column> <el-table-column prop="tel" label="管理员联系电话"></el-table-column>
<el-table-column prop="status" label="状态">
</el-table-column>
<el-table-column prop="nickname" label="管理员">
</el-table-column>
<el-table-column fixed="right" <el-table-column fixed="right"
label="操作" label="操作"
width="212"> width="212">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button @click="" type="text" size="medium" @click="checkDetail(scope.row)">查看申请详情</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> <el-button @click="clickLabApply(scope.row)" type="text" size="medium">申请</el-button>
</template>> </template>
>
</el-table-column> </el-table-column>
</el-table> </el-table>
</el-main> </el-main>
<!-- 填写申请课室表单信息--> <!-- 填写申请课室表单信息-->
<el-dialog title="请填写以下申请信息" :visible.sync="formDialog" :close-on-click-modal="false"> <el-dialog title="请填写以下申请信息" :visible.sync="formDialog" :close-on-click-modal="false">
<el-form :model="form" :inline="true" label-width="100px" ref="courseForm"> <el-form :model="form" :inline="true" label-width="100px" ref="courseForm">
<el-form-item label="课程名称" prop="course_name" :rules="[{ required: true, message: '请输入课程名称', trigger: 'blur' }]"> <el-form-item label="课程名称" prop="course_name"
<el-select v-model="form.course_name" @change="selectChange"> :rules="[{ required: true, message: '请选择课程', trigger: 'blur' }]">
<el-option v-for="item in courseOption" :key="item.uc_id" :label="item.name" :value="item.uc_id"></el-option> <el-select v-model="form.ucId" @change="selectChange">
<el-option v-for="item in courseOption" :key="item.ucId" :label="item.name"
:value="item.ucId"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="地址" > <el-form-item label="地址">
<el-input v-model="form.position" disabled></el-input> <el-input v-model="form.position" disabled></el-input>
</el-form-item> </el-form-item>
<el-form-item label="申请时间" prop="date" >
<el-input v-model="form.date" disabled></el-input>
</el-form-item>
<el-form-item label="实验室名称"> <el-form-item label="实验室名称">
<el-input v-model="form.name" disabled></el-input> <el-input v-model="form.name" disabled></el-input>
</el-form-item> </el-form-item>
<el-form-item label="姓名" prop="nickname" :rules="[{ required: true, message: '请输入您的姓名', trigger: 'blur' }]"> <el-form-item label="姓名" prop="nickname">
<el-input v-model="form.nickname" disabled></el-input> <el-input v-model="form.nickname" disabled></el-input>
</el-form-item> </el-form-item>
<el-form-item label="手机号" prop="tel" :rules="[ <el-form-item label="手机号" prop="tel">
{ required: true, message: '请输入您的手机号', trigger: 'blur' },
{type:'number',message: '请输入11位有效数字',trigger: 'blur'}]">
<el-input v-model="form.tel" disabled></el-input> <el-input v-model="form.tel" disabled></el-input>
</el-form-item> </el-form-item>
<el-form-item label="使用班级" prop="class" :rules="[{ required: true, message: '请填写使用的班级', trigger: 'blur' }]"> <el-form-item label="使用班级" prop="class">
<el-input v-model="form.class" disabled></el-input> <el-input v-model="form.class" disabled></el-input>
</el-form-item> </el-form-item>
<el-form-item label="班级人数" prop="population" :rules="[{ required: true, message: '填写班级人数', trigger: 'blur' }]"> <el-form-item label="班级人数" prop="population">
<el-input v-model="form.population" disabled></el-input> <el-input v-model="form.population" disabled></el-input>
</el-form-item> </el-form-item>
<el-form-item label="备注" prop="remind"><el-input v-model="form.remind" placeholder="请输入备注"></el-input></el-form-item>
</el-form> </el-form>
<div slot="footer"> <div slot="footer">
<el-button type="primary" @click="setTime">填写申请时间段</el-button> <el-button type="primary" @click="setTime">填写申请时间段</el-button>
<el-button @click="cancelAppy">取消</el-button> <el-button @click="cancelAppy">取消</el-button>
</div> </div>
</el-dialog> </el-dialog>
<!-- 表格：节数选择--> <!-- 表格：节数选择-->
<el-dialog :visible.sync="courseDialog" append-to-body :close-on-click-modal="false" v-if="tableAlive" > <el-dialog :title="form.position+' '+form.name" :visible.sync="courseDialog" append-to-body
:close-on-click-modal="false" v-if="tableAlive">
<tb_course :cClick="cellClick" :cStyle="cellStyle" table-label="点击相应的位置选取时间段" ref="times"></tb_course> <tb_course :cClick="cellClick" :cStyle="cellStyle" table-label="点击相应的位置选取时间段" ref="times"></tb_course>
<span slot="footer" class="dialog-footer">
<el-button @click="cancelSetWeeks">取 消</el-button>
<el-button type="primary" @click="setWeeks">确 定</el-button>
</span>
</el-dialog> </el-dialog>
<!-- checkbox:周次选择--> <!-- checkbox:周次选择-->
<el-dialog :visible.sync="weekDialog" title="请选择周数" width="400px" :close-on-click-modal="false" > <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" :able-list="ableList"></week-selection>
</el-dialog> </el-dialog>
</el-container> </el-container>
</div> </div>
</template> </template>
@ -103,58 +95,61 @@
import timeSelect from "~/components/timeSelect"; import timeSelect from "~/components/timeSelect";
import {get, post, stop} from "~/utils"; import {get, post, stop} from "~/utils";
import {showDialog, showFail, showSuccess} from "~/utils/dialog"; import {showDialog, showFail, showSuccess} from "~/utils/dialog";
export default { export default {
name: "applyLab", name: "applyLab",
components:{ components: {
tb_course, tb_course, navBar, weekSelection, timeSelect
navBar,
weekSelection,
timeSelect
}, },
data(){ data() {
return{ return {
user:{}, user: {},
lab:{}, lab: {},
ableList:[],
tableAlive:false, //用于重载表格 tableAlive: false, //用于重载表格
tableData:[{}], tableData: [{}],
checkOption :[], checkOption: [],
formDialog:false, formDialog: false,
courseDialog:false, courseDialog: false,
weekDialog:false, weekDialog: false,
perTargetValue:'', perTargetValue: '',
aWeekValue:[], aWeekValue: [],
allWeeksValue:[], allWeeksValue: [],
form:{ form: {
position:'', position: '',
name:'', name: '',
date: '', date: '',
nickname:'', nickname: '',
tel:'', tel: '',
course_name:'', course_name: '',
class:'', class: '',
population:'', population: '',
schedule:'', schedule: '',
remind:'无' remind: '无'
}, },
courseOption:[] courseOption: []
} }
}, },
methods:{ methods: {
//表格中每个格子的风格 //表格中每个格子的风格
cellStyle:function({row, column, rowIndex, columnIndex}){ cellStyle: function ({row, column, rowIndex, columnIndex}) {
if (column.label!=''){ if (column.label != '') {
return 'cursor:pointer' return 'cursor:pointer'
} }
}, },
//点击格子促发的函数 //点击格子促发的函数
cellClick(row, column, cell, event) { async cellClick(row, column, cell, event) {
console.log(row.index) this.form.day = column.index
this.aWeekValue.push(row.index,column.index) this.form.time = row.index
this.form.year = this.$refs.timeSelection.year
this.form.semester = this.$refs.timeSelection.semester
this.ableList = await get("lb/labTime/getWeeksAbleBook",this.form)
this.aWeekValue.push(row.index, column.index)
//(待写)检索该格子的周数申请信息，被申请的周数使其样式变为disable //(待写)检索该格子的周数申请信息，被申请的周数使其样式变为disable
// let position = this.lab.position // let position = this.lab.position
// let rowIndex = row.index // let rowIndex = row.index
@ -169,142 +164,141 @@
// console.log(row.index) // console.log(row.index)
// console.log(column.index) // console.log(column.index)
if (column.label!='') { if (column.label != '') {
this.weekDialog=true this.weekDialog = true
this.perTargetValue=event.target //用target对表格进行定位并保存致target对象 this.perTargetValue = event.target //用target对表格进行定位并保存致target对象
} }
}, },
//点击表格操作栏申请按钮 //点击表格操作栏申请按钮
clickLabApply(row){ clickLabApply(row) {
this.lab=row console.log(row)
this.form={ this.lab = row
position:'', this.form = {
name:'', labId: row.lab_id,
date: '', position: row.position,
nickname:'', name: row.name,
tel:'', nickname: this.user.nickname,
course_name:'', tel: this.user.tel,
class:'', class: '',
population:'', population: '',
schedule:'', remind: '无'
remind:'无'
} }
this.formDialog=true this.formDialog = true
}, },
//点击查看申请详情 //点击查看申请详情
checkDetail(row){ checkDetail(row) {
this.$router.push('/labApplyDetail/'+row.position) //发送该行的实验室地址作为参数，使得实验室申请详情可以获得此参数后请求并检索数据 this.$router.push('/labApplyDetail/' + row.position) //发送该行的实验室地址作为参数，使得实验室申请详情可以获得此参数后请求并检索数据
}, },
//当选择的课程发生改变触发此函数 //当选择的课程发生改变触发此函数
selectChange(){ async selectChange(uc_id) {
console.log('aaaaaa') let course = await get("lb/usercourse/findusercourse/" + uc_id)
var d=new Date() this.form.class = course.classes
// this.form.position= this.lab.position //实验室地点 this.form.population = course.population
// 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 //人数
}, },
//添加已选择的的周数 //添加已选择的的周数
async addWeek() { async addWeek() {
this.weekDialog=false this.weekDialog = false
var targetValue = this.$refs.weekSelection.checkedValue const targetValue = this.$refs.weekSelection.checkedValue
await showDialog("确认设置此时间段吗？",this) this.form.weeks = targetValue
if(targetValue.length!==0){ await showDialog("确认提交选择该时间段吗？", this)
this.perTargetValue.textContent='【'+targetValue+'】周' console.log(this.form)
this.aWeekValue.push(targetValue) //单个节数时间段添加完成，包括[rowIndex,column,targetValue]
this.allWeeksValue.push(this.aWeekValue) //把单个格子选择的时间段添加到allWeeksValue中 if (targetValue.length !== 0) {
this.perTargetValue.style.backgroundColor='lightyellow' this.perTargetValue.textContent = '【' + targetValue + '】周'
for (let i=0;i<this.allWeeksValue.length;i++){ this.aWeekValue.push(targetValue) //单个节数时间段添加完成，包括[rowIndex,column,targetValue]
for (let j=i+1;j<this.allWeeksValue.length;j++){ this.allWeeksValue.push(this.aWeekValue) //把单个格子选择的时间段添加到allWeeksValue中
if (this.allWeeksValue[i][0]===this.allWeeksValue[j][0]&&this.allWeeksValue[i][1]===this.allWeeksValue[j][1]){ this.perTargetValue.style.backgroundColor = 'lightyellow'
this.allWeeksValue.splice(i,1) for (let i = 0; i < this.allWeeksValue.length; i++) {
for (let j = i + 1; j < this.allWeeksValue.length; j++) {
if (this.allWeeksValue[i][0] === this.allWeeksValue[j][0] && this.allWeeksValue[i][1] === this.allWeeksValue[j][1]) {
this.allWeeksValue.splice(i, 1)
} }
} }
} }
} }
this.aWeekValue=[] this.aWeekValue = []
this.$refs.weekSelection.checkedValue=[] //将周数选择器已选择选项置空 this.$refs.weekSelection.checkedValue = [] //将周数选择器已选择选项置空
// console.log(this.allWeeksValue) // console.log(this.allWeeksValue)
//提交
await post('lb/labRecord/updateWeeks', this.form);
}, },
//取消一个格子已选择这些周数 //取消一个格子已选择这些周数
async cancelSelection() { async cancelSelection() {
for (let i=0;i<this.allWeeksValue.length;i++){ for (let i = 0; i < this.allWeeksValue.length; i++) {
if (this.aWeekValue[0]===this.allWeeksValue[i][0] && this.aWeekValue[1]===this.allWeeksValue[i][1]){ if (this.aWeekValue[0] === this.allWeeksValue[i][0] && this.aWeekValue[1] === this.allWeeksValue[i][1]) {
this.allWeeksValue.splice(i,1) this.allWeeksValue.splice(i, 1)
console.log(this.allWeeksValue) console.log(this.allWeeksValue)
} }
} }
this.aWeekValue=[] this.aWeekValue = []
this.perTargetValue.style.backgroundColor='' this.perTargetValue.style.backgroundColor = ''
this.perTargetValue.textContent='' this.perTargetValue.textContent = ''
//此处再设置将allWeeksValue里边减去这个表格原本的内容，要怎么删去呢，思考一下。 //此处再设置将allWeeksValue里边减去这个表格原本的内容，要怎么删去呢，思考一下。
// if (this.perTargetValue!=''){ // if (this.perTargetValue!=''){
// this.allWeeksValue.pop() // this.allWeeksValue.pop()
// } // }
this.weekDialog=false this.weekDialog = false
}, },
//确定所有已选择的周数 //确定所有已选择的周数
async setWeeks () { async setWeeks() {
console.log(this.allWeeksValue) console.log(this.allWeeksValue)
await post('/lb_teacher_applyLab',{ await post('/lb_teacher_applyLab', {
weeks:this.allWeeksValue, weeks: this.allWeeksValue,
year:this.$refs.timeSelection.year, year: this.$refs.timeSelection.year,
semester:this.$refs.timeSelection.semester, semester: this.$refs.timeSelection.semester,
position:this.form.position, position: this.form.position,
name:this.form.name, name: this.form.name,
date: this.form.date, date: this.form.date,
nickname:this.form.nickname, nickname: this.form.nickname,
tel:this.form.tel, tel: this.form.tel,
course_name:this.form.course_name, course_name: this.form.course_name,
class:this.form.class, class: this.form.class,
population:this.form.population, population: this.form.population,
remind:this.form.remind remind: this.form.remind
}) })
// this.form.schedule=this.allWeeksValue.toString() // this.form.schedule=this.allWeeksValue.toString()
this.courseDialog=false this.courseDialog = false
// console.log(this.$refs.times) // console.log(this.$refs.times)
this.tableAlive=false this.tableAlive = false
}, },
//取消所有已选择的周数 //取消所有已选择的周数
cancelSetWeeks:function () { cancelSetWeeks: function () {
this.allWeeksValue=[] this.allWeeksValue = []
this.form.schedule="" this.form.schedule = ""
this.courseDialog=false this.courseDialog = false
this.formDialog=true this.formDialog = true
console.log(this.allWeeksValue) console.log(this.allWeeksValue)
this.tableAlive=false //表格失活 this.tableAlive = false //表格失活
}, },
setTime:function () { setTime: function () {
this.tableAlive=true this.tableAlive = true
alert('这里本来要验证的，为了方便查看表格，暂无设置，需要验证请把代码行注释解除掉') alert('这里本来要验证的，为了方便查看表格，暂无设置，需要验证请把代码行注释解除掉')
this.courseDialog=true this.courseDialog = true
// this.$refs.courseForm.validate(()=>{ // this.$refs.courseForm.validate(()=>{
// if (vailid){ // if (vailid){
// this.courseDialog=true // this.courseDialog=true
// } // }
// }) // })
this.formDialog=false this.formDialog = false
}, },
cancelAppy:function () { cancelAppy: function () {
this.formDialog=false this.formDialog = false
}, },
//跳转到我的申请记录 //跳转到我的申请记录
toMyRecord(){ toMyRecord() {
this.$router.push('/teacher/myApplyRecord/'+this.user.u_id) //这里的user.u_id作为是作为路径参数存在 this.$router.push('/teacher/myApplyRecord/' + this.user.u_id) //这里的user.u_id作为是作为路径参数存在
},
async loadCourse() {
this.courseOption = await get("lb/usercourse/findbyyearandsemester/" + this.$refs.timeSelection.year + "/" + this.$refs.timeSelection.semester)
} }
}, },
//钩子函数，生命周期mouted //钩子函数，生命周期mouted
async mounted() { async mounted() {
this.courseOption = get('',this.u_id) //发送教师id，返回该教师课程管理中所有的课程信息，是一个数组 // this.courseOption = get('',this.u_id) //发送教师id，返回该教师课程管理中所有的课程信息，是一个数组
//测试数据 //测试数据
this.courseOption=[{ this.courseOption = [{
year: '1819', year: '1819',
semester: '2', semester: '2',
uc_id: '12345677', uc_id: '12345677',
@ -315,11 +309,9 @@
isHaveDocuments: '1', isHaveDocuments: '1',
remind: '无', remind: '无',
}] }]
// console.log(this.$refs.detailtb)
console.log('this is mouted')
console.log(this.$refs.weekSelection)
var d = new Date()
this.tableData = await get('/lb/lab/getLabList') this.tableData = await get('/lb/lab/getLabList')
this.user = await get('lb/user/getUserInfo')
await this.loadCourse()
} }
} }
</script> </script>

Write Preview
Loading…
Cancel
Save