From 9dde8ed89b9e52cb88f14c68b35b884be330735e Mon Sep 17 00:00:00 2001
From: aiyadc <565548447@qq.com>
Date: Wed, 20 May 2020 23:40:14 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=E7=94=B3=E8=AF=B7=E5=AE=9E?=
 =?UTF-8?q?=E9=AA=8C=E5=AE=A4=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/teacher/weekSelection.vue  |  22 +-
 element-vue/src/components/timeSelect.vue     |   6 +-
 element-vue/src/pages/teacher/applyLab.vue    | 264 ++++++++++--------
 .../src/pages/teacher/courseManagement.vue    |  12 +-
 4 files changed, 169 insertions(+), 135 deletions(-)

diff --git a/element-vue/src/components/teacher/weekSelection.vue b/element-vue/src/components/teacher/weekSelection.vue
index 172b981..f112bd3 100644
--- a/element-vue/src/components/teacher/weekSelection.vue
+++ b/element-vue/src/components/teacher/weekSelection.vue
@@ -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>
 
diff --git a/element-vue/src/components/timeSelect.vue b/element-vue/src/components/timeSelect.vue
index 795c571..bc764ae 100644
--- a/element-vue/src/components/timeSelect.vue
+++ b/element-vue/src/components/timeSelect.vue
@@ -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年'
                     }
                 ],
diff --git a/element-vue/src/pages/teacher/applyLab.vue b/element-vue/src/pages/teacher/applyLab.vue
index b3d3372..736c476 100644
--- a/element-vue/src/pages/teacher/applyLab.vue
+++ b/element-vue/src/pages/teacher/applyLab.vue
@@ -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()
 
         }
diff --git a/element-vue/src/pages/teacher/courseManagement.vue b/element-vue/src/pages/teacher/courseManagement.vue
index 44f0bb4..524638f 100644
--- a/element-vue/src/pages/teacher/courseManagement.vue
+++ b/element-vue/src/pages/teacher/courseManagement.vue
@@ -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: '',