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

完善申请实验室页面

Browse Source
master
aiyadc 5 years ago
parent 68335bcf5d
commit 9dde8ed89b
4 changed files with 169 additions and 135 deletions
Show Stats Download Patch File Download Diff File

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

@ -9,8 +9,8 @@
<el-radio label="全不选"></el-radio>
</el-radio-group>
</div>
<el-checkbox-group v-model="checkedValue" @change="handleCheckedValueChange">
<el-checkbox-button v-for="item in checkOption" :label="item.value" :key="item.value" style="width: 52px" :disabled="item.isDisable"></el-checkbox-button>
<el-checkbox-group v-model="checkedValue" @change="handleCheckedValueChange" ref="checkBox">
<el-checkbox-button v-for="item in checkOption" :label="item" :key="item" style="width: 52px"></el-checkbox-button>
</el-checkbox-group>
<el-divider></el-divider>
<el-button @click="$emit('add')">确定</el-button>
@ -20,12 +20,11 @@
</template>
<script>
const allVal=['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18'];
const singleVal=['1','3','5','7','9','11','13','15','17'];
const doubleVal=['2','4','6','8','10','12','14','16','18'];
const allVal=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18];
const singleVal=[1,3,5,7,9,11,13,15,17];
const doubleVal=[2,4,6,8,10,12,14,16,18];
export default {
name: "weekSelection",
props:['checkOption'],
data(){
return{
checkedValue:[],
@ -33,7 +32,7 @@
isIndeterminate1:true,
isIndeterminate2:true,
isIndeterminate3:true,
checkOption:[]
checkOption:[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18]
}
},
methods:{
@ -51,6 +50,15 @@
this.radioValue=value.length===allVal.length?'all':''
}
},
mounted() {
// console.log(this.$refs.checkBox.$children)
// var weeks=[6,7,8]
// for (let i=0;i<weeks.length;i++){
// console.log(weeks[i])
// this.$refs.checkBox.$children[weeks[i]-1].disabled=true
// }
}
}
</script>

6
element-vue/src/components/timeSelect.vue
Unescape View File

@ -41,15 +41,15 @@
semester: 2,
selectOptions1: [
{
value: '2017',
value: '1718',
label: '2017-2018年'
},
{
value: '2018',
value: '1819',
label: '2018-2019年'
},
{
value: '2019',
value: '1920',
label: '2019-2020年'
}
],

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

@ -7,6 +7,8 @@
<nav-bar></nav-bar>
</el-header>
<el-main>
<!-- 年/和学期-->
<time-select ref="timeSelection"></time-select>
<!-- 表格查询、申请记录-->
<el-header>
<div>
@ -39,16 +41,12 @@
<!-- 填写申请课室表单信息-->
<el-dialog title="请填写以下申请信息" :visible.sync="formDialog" :close-on-click-modal="false">
<el-form :model="form" :inline="true" label-width="100px">
<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-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 v-model="form.course_name">
<el-option v-for="item in courseOption" :key="item.uc_id" :label="item.name" :value="item.uc_id"></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" disabled></el-input>
</el-form-item>
@ -72,24 +70,25 @@
<el-form-item label="班级人数" prop="population" :rules="[{ required: true, message: '填写班级人数', trigger: 'blur' }]">
<el-input v-model="form.population" disabled></el-input>
</el-form-item>
<el-form-item label="备注" prop="remind"><el-input v-model="form.remind" ></el-input></el-form-item>
<el-form-item label="备注" prop="remind"><el-input v-model="form.remind" placeholder="请输入备注"></el-input></el-form-item>
</el-form>
<div slot="footer">
<el-button type="primary" @click="sendApply">申请</el-button>
<el-button type="primary" @click="sendApply">填写申请时间段</el-button>
<el-button @click="cancelAppy">取消</el-button>
</div>
</el-dialog>
<!-- 节数选择-->
<!-- 表格：节数选择-->
<el-dialog :visible.sync="courseDialog" append-to-body :close-on-click-modal="false">
<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>
<div><p style="color: deeppink" v-html="tips"></p></div>
</el-dialog>
<!-- 周次选择-->
<!-- checkbox:周次选择-->
<el-dialog :visible.sync="weekDialog" title="请选择周数" width="400px" :close-on-click-modal="false" >
<week-selection @add="addWeek" @cancel="cancelSelection" ref="weekSelection" :check-option="checkOptioin"></week-selection>
<week-selection @add="addWeek" @cancel="cancelSelection" ref="weekSelection" ></week-selection>
</el-dialog>
</el-container>
@ -102,6 +101,7 @@
import tb_course from "~/components/tb_course";
import navBar from "~/components/teacher/navBar";
import weekSelection from "~/components/teacher/weekSelection";
import timeSelect from "~/components/timeSelect";
import {get, post, stop} from "~/utils";
import {showDialog, showFail, showSuccess} from "~/utils/dialog";
export default {
@ -109,7 +109,8 @@
components:{
tb_course,
navBar,
weekSelection
weekSelection,
timeSelect
},
data(){
return{
@ -117,15 +118,17 @@
lab:{},
tableData:[{}],
checkOptioin :[],
checkOption :[],
formDialog:false,
courseDialog:false,
weekDialog:false,
perTargetValue:'',
aWeekValue:[],
allWeeksValue:[],
tips:"已添加时间段：",
form:{
position:'',
name:'',
@ -136,7 +139,7 @@
class:'',
population:'',
schedule:'',
remind:''
remind:'无'
},
courseOption:[]
}
@ -152,96 +155,30 @@
//思路大概是每个格子都定义一个属性——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
// },
// ]
cellClick(row, column, cell, event) {
console.log(row.index)
console.log(column.index)
if (this.weekDialog=false){this.weekDialog=true}
else {this.weekDialog=false}
this.aWeekValue.push(row.index,column.index)
//(待写)检索该格子的周数申请信息，被申请的周数使其样式变为disable
// let position = this.lab.position
// let rowIndex = row.index
// let columIndex = column.index
// var weeks=get('',{position,rowIndex,columIndex}) //发送给实验室的地址，rowIndex，columIndex返回该格子的周数信息:数组
// var weeks=[6,7,8]
// for (let i=0;i<weeks.length;i++){
// console.log(weeks[i])
// // this.$refs.weekSelection.$refs.children[weeks[i]].disabled=true
// }
// console.log(row.index)
// console.log(column.index)
if (column.label!='') {
console.log(event);
// event.target.textContent='' //赋予格子内容
this.tips=""
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
@ -253,31 +190,68 @@
},
//当选择的课程发生改变触发此函数
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 //人数
// 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 () {
async addWeek() {
this.weekDialog=false
var targetValue = this.$refs.weekSelection.checkedValue
await showDialog("确认设置此时间段吗？",this)
if(targetValue.length!==0){
this.perTargetValue.textContent='【'+targetValue+'】周'
this.allWeeksValue.push(targetValue)
this.perTargetValue.style.backgroundColor='lightyellow'
this.perTargetValue.textContent='【'+targetValue+'】周'
this.aWeekValue.push(targetValue) //单个节数时间段添加完成，包括[rowIndex,column,targetValue]
this.allWeeksValue.push(this.aWeekValue) //把单个格子选择的时间段添加到allWeeksValue中
this.perTargetValue.style.backgroundColor='lightyellow'
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)
}
}
}
for (let k=0;k<this.allWeeksValue.length;k++){
// console.log(this.allWeeksValue[k][2])
if (this.allWeeksValue[k][2]!==[]){
this.tips+='星期'+this.allWeeksValue[k][1]+'、第'+this.allWeeksValue[k][0]+'节、所选周数'+this.allWeeksValue[k][2]+";"+'</br>'
}
}
}
this.aWeekValue=[]
this.$refs.weekSelection.checkedValue=[] //将周数选择器已选择选项置空
// console.log(this.allWeeksValue)
},
//取消选择这些周数
cancelSelection:function () {
console.log('已取消')
this.perTargetValue.style.backgroundColor=''
this.perTargetValue.textContent=''
//取消一个格子已选择这些周数
async cancelSelection() {
for (let i=0;i<this.allWeeksValue.length;i++){
if (this.aWeekValue[0]===this.allWeeksValue[i][0] && this.aWeekValue[1]===this.allWeeksValue[i][1]){
this.allWeeksValue.splice(i,1)
console.log(this.allWeeksValue)
}
}
this.aWeekValue=[]
//显示所选周数
if(this.allWeeksValue.length!==0){
for (let k=0;k<this.allWeeksValue.length;k++){
if (this.allWeeksValue[k][2]!==[]){
this.tips='星期'+this.allWeeksValue[k][1]+'、第'+this.allWeeksValue[k][0]+'节、所选周数'+this.allWeeksValue[k][2]+';'+'</br>'
}
}
}else {
this.tips='已添加周数:无'
}
this.perTargetValue.style.backgroundColor=''
this.perTargetValue.textContent=''
//此处再设置将allWeeksValue里边减去这个表格原本的内容，要怎么删去呢，思考一下。
// if (this.perTargetValue!=''){
// this.allWeeksValue.pop()
@ -286,30 +260,72 @@
},
//确定所有已选择的周数
setWeeks:function () {
this.form.schedule=this.allWeeksValue.toString()
console.log(this.allWeeksValue)
post('/lb_teacher_applyLab',{
weeks:this.allWeeksValue,
year:this.$refs.timeSelection.year,
semester:this.$refs.timeSelection.semester,
position:this.from.position,
name:this.form.name,
date: this.form.date,
nickname:this.form.nickname,
tel:this.form.tel,
course_name:this.form.course_name,
class:this.form.class,
population:this.form.population,
remind:this.form.remind
})
// this.form.schedule=this.allWeeksValue.toString()
this.courseDialog=false
console.log(this.$refs.times)
this.tips='已添加时间段'
// console.log(this.$refs.times)
},
//取消所有已选择的周数
cancelSetWeeks:function () {
this.allWeeksValue=[]
this.form.schedule=""
this.tips='已添加时间段'
this.courseDialog=false
console.log(this.allWeeksValue)
},
sendApply:function () {
let form = this.form
post('/lb_teacher_applyLab',{
formData:form
})
alert('这里本来要验证的，为了方便查看表格，暂无设置，需要验证请把代码行注释解除掉')
this.courseDialog=true
// this.$refs.courseForm.validate(()=>{
// if (vailid){
// this.courseDialog=true
// }
// })
this.formDialog=false
},
cancelAppy:function () {
this.formDialog=false
},
//跳转到我的申请记录
toMyRecord(){
this.$router.push('/teacher/myApplyRecord/'+this.user.u_id) //这里的user.u_id作为是作为路径参数存在
}
},
//钩子函数，生命周期mouted
mounted() {
console.log(this.$refs.detailtb)
this.user=get('') //获取账号信息
this.courseOption = get('',this.u_id) //发送教师id，返回该教师课程管理中所有的课程信息，是一个数组
//测试数据
this.courseOption=[{
year: '1819',
semester: '2',
uc_id: '12345677',
name: '软件工程',
software: 'Webstorm',
classes: '6班',
population: '41',
isHaveDocuments: '1',
remind: '无',
}]
// console.log(this.$refs.detailtb)
console.log('this is mouted')
console.log(this.$refs.weekSelection)
var d = new Date()
}

12
element-vue/src/pages/teacher/courseManagement.vue
Unescape View File

@ -121,7 +121,17 @@
dialogForm: false,
edit: '',
user: {},
tableData: [],
tableData: [{
year: '1819',
semester: '2',
uc_id: '12345677',
name: '林大池',
software: 'Webstorm',
classes: '6班',
population: '41',
isHaveDocuments: '1',
remind: '无',
}],
courseForm: {
year: '',
semester: '',

Write Preview
Loading…
Cancel
Save