完善实验室申请模块，设计超级管理员可申请时间段模块

element-vue/src/components/supManager/home.vue

@@ -10,7 +10,7 @@
 </template>
 
 <script>
-    import home from "~/components/home";
+    import home from "~/components/teacher/home";
     import {get} from "~/utils";
     import {showSuccess} from "~/utils/dialog";
 

element-vue/src/components/supManager/setLabTime.vue

@@ -0,0 +1,187 @@
+<template>
+    <div>
+
+        <el-dialog :visible="setLabTimeDialog" title="设置时间段" width="40rem">
+            <el-form :model="form">
+                <el-form-item label="学年：">
+                    <el-select v-model="form.year" size="small">
+                        <el-option
+                                v-for="item in selectOptions1"
+                                :key="item.value"
+                                :label="item.label"
+                                :value="item.value"
+                        >
+                        </el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="学期：">
+                    <el-select v-model="form.semester" size="small">
+                        <el-option
+                                v-for="item in selectOptions2"
+                                :key="item.value"
+                                :label="item.label"
+                                :value="item.value"
+                        >
+                        </el-option>
+                    </el-select>
+
+                </el-form-item>
+                <el-form-item label="星期：">
+                    <el-input v-model="form.time" @focus="showCourseDialog" placeholder="点我设置" style="width: 200px" >点击设置</el-input>
+                </el-form-item>
+            </el-form>
+        </el-dialog>
+        <!--            表格：节数选择-->
+        <el-dialog :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>
+            <span slot="footer" class="dialog-footer">
+                    <el-button @click="cancelSetWeeks">取 消</el-button>
+                    <el-button type="primary" @click="setWeeks">确 定</el-button>
+                </span>
+        </el-dialog>
+        <!--            checkbox:周次选择-->
+        <el-dialog :visible.sync="weekDialog"  title="请选择周数" width="400px" :close-on-click-modal="false" >
+            <week-selection @add="addWeek" @cancel="cancelSelection" ref="weekSelection" ></week-selection>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+    import weekSelection from "~/components/weekSelection";
+    import tb_course from "~/components/tb_course";
+    import {get, post, stop} from "~/utils";
+    import {showDialog, showFail, showSuccess} from "~/utils/dialog";
+    export default {
+        name: "setLabTime",
+        components:{weekSelection,tb_course},
+        data(){
+            return{
+                form:{
+                    year:'',
+                    semester:'',
+                    time:"",
+                },
+                allWeeksValue:[],
+                aWeekValue:[],
+                courseDialog:false,
+                tableAlive:false,     //用于重载表格
+                setLabTimeDialog:true,
+                weekDialog:false,
+                selectOptions1: [
+                    {
+                        value: '1718',
+                        label: '2017-2018年'
+                    },
+                    {
+                        value: '1819',
+                        label: '2018-2019年'
+                    },
+                    {
+                        value: '1920',
+                        label: '2019-2020年'
+                    }
+                ],
+                selectOptions2: [
+                    {
+                        value: 1,
+                        label: '第一学期'
+                    },
+                    {
+                        value: 2,
+                        label: '第二学期'
+                    }
+                ],
+            }
+        },
+        methods:{
+            //设置周次与节次
+            showCourseDialog(){
+                console.log('嘿')
+                this.tableAlive=true
+                this.courseDialog=true
+            },
+            //表格中每个格子的风格
+            cellStyle:function({row, column, rowIndex, columnIndex}){
+                if (column.label!=''){
+                    return 'cursor:pointer'
+                }
+            },
+            //点击格子促发的函数
+            cellClick(row, column, cell, event) {
+                console.log(row.index)
+                if (column.label!='') {
+                    this.weekDialog=true
+                    this.perTargetValue=event.target       //用target对表格进行定位并保存致target对象
+                    console.log(this.aWeekValue,this.allWeeksValue)
+                    this.aWeekValue.push(row.index,column.index)
+                }
+            },
+            //添加已选择的的周数
+            async addWeek() {
+                this.weekDialog=false
+                var targetValue = this.$refs.weekSelection.checkedValue
+                if(targetValue.length!==0){
+                    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)
+                            }
+                        }
+                    }
+
+                }
+                this.aWeekValue=[]
+                // this.$refs.weekSelection.checkedValue=[]   //将周数选择器已选择选项置空
+                // console.log(this.allWeeksValue)
+
+            },
+            //取消一个格子已选择这些周数
+            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=[]
+                this.perTargetValue.style.backgroundColor=''
+                this.perTargetValue.textContent=''
+                //此处再设置将allWeeksValue里边减去这个表格原本的内容，要怎么删去呢，思考一下。
+                // if (this.perTargetValue!=''){
+                //     this.allWeeksValue.pop()
+                // }
+                this.weekDialog=false
+            },
+            //确定所有格子已选择的周数
+            async setWeeks () {
+                console.log(this.$refs.times)
+                console.log(this.allWeeksValue)
+                // this.form.schedule=this.allWeeksValue.toString()
+                this.courseDialog=false
+                // console.log(this.$refs.times)
+                this.tableAlive=false
+                if (this.allWeeksValue.length!==0){
+                    this.form.time='已设置，点击修改'
+                }
+
+            },
+            //取消所有已选择的周数
+            cancelSetWeeks:function () {
+                this.allWeeksValue=[]
+                this.form.schedule=""
+                this.courseDialog=false
+                this.formDialog=true
+                console.log(this.allWeeksValue)
+                this.tableAlive=false   //表格失活
+            },
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>

element-vue/src/components/weekSelection.vue

@@ -10,7 +10,7 @@
             </el-radio-group>
             </div>
         <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" :disabled="!ableList.find(elem => elem === item)"></el-checkbox-button>
+            <el-checkbox-button v-for="item in checkOption" :label="item" :key="item" style="width: 52px" :disabled="!!disableList.find(elem => elem === item)"></el-checkbox-button>
         </el-checkbox-group>
         <el-divider></el-divider>
             <el-button @click="$emit('add')">确定</el-button>
@@ -20,9 +20,6 @@
 </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];
     export default {
         name: "weekSelection",
         data(){
@@ -33,6 +30,10 @@
                 isIndeterminate2:true,
                 isIndeterminate3:true,
                 ableList:[1,2,3,4,5,6],
+                disableList:[],
+                allVal:[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18],
+                singleVal:[1,3,5,7,9,11,13,15,17],
+                doubleVal:[2,4,6,8,10,12,14,16,18],
                 checkOption:[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18]
             }
         },
@@ -40,9 +41,9 @@
             radioSelect:function (val) {
                 console.log(val)
                 if (val){
-                if (val==='全选'){this.checkedValue=allVal}
+                if (val==='全选'){this.checkedValue=this.allVal}
-                if(val==='单周'){this.checkedValue=singleVal}
+                if(val==='单周'){this.checkedValue=this.singleVal}
-                if (val==='双周'){this.checkedValue=doubleVal}
+                if (val==='双周'){this.checkedValue=this.doubleVal}
                 if (val==='全不选'){this.checkedValue=[]}
                 } else {this.checkedValue=[]}
             },

element-vue/src/pages/manager/index.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script>
-    import home from "~/components/home";
+    import home from "~/components/teacher/home";
     export default {
         name: "index",
         data(){

element-vue/src/pages/teacher/applyLab.vue

@@ -50,9 +50,9 @@
                     <el-form-item label="地址"  >
                         <el-input v-model="form.position" disabled></el-input>
                     </el-form-item>
-                    <el-form-item label="申请时间" prop="date" >
+<!--                    <el-form-item label="申请时间" prop="date" >-->
-                        <el-input v-model="form.date" disabled></el-input>
+<!--                        <el-input v-model="form.date" disabled></el-input>-->
-                    </el-form-item>
+<!--                    </el-form-item>-->
                     <el-form-item label="实验室名称">
                         <el-input v-model="form.name" disabled></el-input>
                     </el-form-item>
@@ -86,7 +86,7 @@
                 </span>
             </el-dialog>
 <!--            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" :before-close="beforeClose" :destroy-on-close="true">
                 <week-selection @add="addWeek" @cancel="cancelSelection" ref="weekSelection" ></week-selection>
             </el-dialog>
         </el-container>
@@ -99,7 +99,7 @@
 <script>
     import tb_course from "~/components/tb_course";
     import navBar from "~/components/teacher/navBar";
-    import weekSelection from "~/components/teacher/weekSelection";
+    import weekSelection from "~/components/weekSelection";
     import timeSelect from "~/components/timeSelect";
     import {get, post, stop} from "~/utils";
     import {showDialog, showFail, showSuccess} from "~/utils/dialog";
@@ -146,32 +146,38 @@
         },
         methods:{
             //表格中每个格子的风格
-            cellStyle:function({row, column, rowIndex, columnIndex}){
+             cellStyle({row, column, rowIndex, columnIndex}){
                 if (column.label!=''){
                     return 'cursor:pointer'
                 }
             },
             //点击格子促发的函数
-             cellClick(row, column, cell, event) {
+            async cellClick(row, column, cell, event) {
                 console.log(row.index)
-                 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++){
+                //(待写)检索该格子的周数申请信息，被申请的周数使其样式变为disablevar
-                //         console.log(weeks[i])
+
-                //     // this.$refs.weekSelection.$refs.children[weeks[i]].disabled=true
-                // }
-                // console.log(row.index)
-                // console.log(column.index)
 
                 if (column.label!='') {
-                     this.weekDialog=true
                     this.perTargetValue=event.target       //用target对表格进行定位并保存致target对象
+                    this.aWeekValue.push(row.index,column.index)
+
+                    new Promise((resolve,reject)=> {       //使weekDialog打开和调用按顺序执行
+                        this.weekDialog=true
+                        resolve('打开了weekDialog')
+                    }).then((res)=>{
+                        // console.log(this.$refs.weekSelection)
+                        var position = this.form.position
+                        var rowIndex = row.index
+                        var columnIndex = column.index
+                        var selectedWeeks=get('',{position,rowIndex,columnIndex})   //发送给实验室的地址，rowIndex，columIndex返回该格子的周数信息:数组
+                        selectedWeeks=[1,2,3]
+                        this.$refs.weekSelection.disableList=selectedWeeks
+                        this.$refs.weekSelection.singleVal=this.$refs.weekSelection.singleVal.filter(x=>!selectedWeeks.includes(x))
+                        this.$refs.weekSelection.doubleVal=this.$refs.weekSelection.doubleVal.filter(x=>!selectedWeeks.includes(x))
+                        this.$refs.weekSelection.allVal=this.$refs.weekSelection.allVal.filter(x=>!selectedWeeks.includes(x))
+                        console.log('aa',this.$refs.weekSelection.singleVal)
+                    })
                     }
             },
             //点击表格操作栏申请按钮
@@ -199,10 +205,8 @@
             //当选择的课程发生改变触发此函数
             selectChange(){
                 console.log('aaaaaa')
-                var d=new Date()
                 // 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  //班级
@@ -210,6 +214,7 @@
             },
             //添加已选择的的周数
             async addWeek() {
+
                 this.weekDialog=false
                 var targetValue = this.$refs.weekSelection.checkedValue
                 await showDialog("确认设置此时间段吗？",this)
@@ -295,6 +300,11 @@
             cancelAppy:function () {
                 this.formDialog=false
             },
+            //周次选择器关闭前的回调
+            beforeClose(){
+              this.weekDialog=false
+              this.aWeekValue=[]
+            },
             //跳转到我的申请记录
             toMyRecord(){
                 this.$router.push('/teacher/myApplyRecord/'+this.user.u_id)   //这里的user.u_id作为是作为路径参数存在

element-vue/src/pages/teacher/empty.vue

@@ -2,7 +2,6 @@
     <div>
         <router-view> </router-view>
     </div>
-
 </template>
 
 <script>

element-vue/src/pages/teacher/index.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script>
-    import home from "~/components/home";
+    import home from "~/components/teacher/home";
     import {get} from "~/utils";
     import {showSuccess} from "~/utils/dialog";
 

element-vue/src/router.js

@@ -8,7 +8,7 @@ import manager from "~/pages/manager/index";
 import supManager from "~/pages/supManager/index";
 import personal from "~/pages/teacher/personal";
 import login from "~/pages/login";
-import empty from "~/components/empty";
+import empty from "~/pages/teacher/empty";
 import myCourse from "~/pages/teacher/myCourseTable";
 import tb_course from "~/components/tb_course";
 import labApplyDetail from "~/pages/labApplyDetail";
@@ -19,6 +19,7 @@ import supHome from "~/components/supManager/home";
 import supIndex from "~/components/supManager/index";
 import globalPersonal from "~/components/personal";
 import userManage from "~/components/supManager/userManage";
+import setLabTime from "~/components/supManager/setLabTime";
 
 // 要告诉 vue 使用 vueRouter
 Vue.use(VueRouter);
@@ -113,6 +114,10 @@ const routes = [
         path: '/labApplyDetail/:id',
         component: labApplyDetail,
         props:true
+    },
+    {
+        path:'/setLabTime',
+        component: setLabTime
     }
 ]