0507 完善页面功能

element-vue/src/components/dialog.vue

@@ -0,0 +1,50 @@
+<template>
+    <div>
+        <el-dialog title="请填写以下申请信息" :visible="dialogVisable">
+            <el-form :model="form">
+                <el-form-item label="申请时间" prop="date"><el-input type="date" v-model="form.date"></el-input></el-form-item>
+            </el-form>
+            <el-form-item label="地址" ><el-input type="text" v-model="form.position"></el-input></el-form-item>
+            <el-form-item label="实验室名称" ><el-input v-model="form.name"></el-input></el-form-item>
+            <el-form-item label="姓名" prop="nickname"><el-input v-model="form.nickname"></el-input></el-form-item>
+            <el-form-item label="手机号" prop="tel"><el-input v-model="form.tel"></el-input></el-form-item>
+            <el-form-item label="课程名称" prop="course_name"><el-input v-model="form.course_name"></el-input> </el-form-item>
+            <el-form-item label="使用班级" prop="class"><el-input v-model="form.class"></el-input> </el-form-item>
+            <el-form-item label="班级人数" prop="population"> <el-input v-model="form.population"></el-input> </el-form-item>
+            <el-form-item label="申请时间段" ><el-button>点击设置</el-button></el-form-item>
+            <el-form-item label="备注" prop=""><el-input v-model="form.remind"></el-input></el-form-item>
+            <el-form-item>
+                <el-button type="primary" @click="">申请</el-button>
+                <el-button @click="">重置</el-button>
+            </el-form-item>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "dialog",
+        data(){
+            return{
+                dialogVisable:false,
+                form:{
+                    position:'',
+                    name:'',
+                    date:Date,
+                    nickname:'',
+                    tel:'',
+                    course_name:'',
+                    class:'',
+                    population:'',
+                    schedule:[],
+                    remind:''
+
+                }
+            }
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>

element-vue/src/components/empty.vue

@@ -6,8 +6,12 @@
 </template>
 
 <script>
+    import navBar from "~/components/teacher/navBar";
     export default {
-        name: "empty"
+        name: "empty",
+        components:{
+            navBar
+        }
     }
 </script>
 

element-vue/src/components/home.vue

@@ -3,7 +3,7 @@
         <el-container>
             <!-- 头部组件-->
             <el-header  style="size: 20px;text-align: right;padding-top: 10px">
-                <drop-down-user :user="user" ></drop-down-user>
+                <drop-down-user :user="user" @goPersonal="$emit('goPersonal')" @back="$emit('back')"></drop-down-user>
             </el-header>
 <!--            body部分-->
            <el-main class="main" >

element-vue/src/components/tb_course.vue

@@ -1,34 +1,9 @@
 <template>
     <div>
-        <nav-bar></nav-bar><br>
+
-        <el-row>
-            <el-col :span="6" :offset="6">
-                学年：<el-select v-model="year" size="small">
-                <el-option
-                        v-for="item in selectOptions1"
-                        :key="item.value"
-                        :label="item.label"
-                        :value="item.value"
-                >
-                </el-option>
-            </el-select>
-            </el-col>
-            <el-col :span="6">
-                学期：<el-select v-model="semester" size="small">
-                <el-option
-                        v-for="item in selectOptions2"
-                        :key="item.value"
-                        :label="item.label"
-                        :value="item.value"
-                >
-                </el-option>
-            </el-select>
-            </el-col>
-        </el-row>
-        <br><br>
 
         <el-table :data="tableData"   :span-method="objectSpanMethod"  @cell-click="cClick" :cell-style="cStyle">
-            <el-table-column label="我的课表"align="center " >
+            <el-table-column :label="tableLabel"align="center " >
             <el-table-column  prop="daytime" label="" fixed align="center" width="60"></el-table-column>
             <el-table-column prop="time" label="" fixed align="center" width="100"></el-table-column>
             <el-table-column prop="Monday" label="星期一" align="center"></el-table-column>
@@ -49,35 +24,10 @@
     export default {
         name: "tb_course",
         components:{navBar},
-        props:['courseMessage','cClick','cStyle',],
+        props:['tableLabel','courseMessage','cClick','cStyle',],
         data(){
             return{
-                year:'1920',
+
-                semester:'2',
-                selectOptions1:[
-                    {
-                        value:'1718',
-                        label:'2017-2018年'
-                    },
-                {
-                    value:'1819',
-                    label:'2018-2019年'
-                },
-                {
-                    value:'1920',
-                    label:'2019-2020年'
-                }
-                ],
-                selectOptions2:[
-                    {
-                        value:'1',
-                        label:'第一学期'
-                    },
-                    {
-                        value:'2',
-                        label:'第二学期'
-                    }
-                ],
                 tableData:[
                     {daytime:'上午',time:'第一节',Monday:'',Tuesday:'',Wednesday:'',Thursday:'',
                     Friday:'',Saturday:'',Sunday:''},

element-vue/src/components/timeSelect.vue

@@ -0,0 +1,69 @@
+<template>
+    <div>
+        <el-row>
+            <el-col :span="6" :offset="6">
+                学年：<el-select v-model="year" size="small">
+                <el-option
+                        v-for="item in selectOptions1"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value"
+                >
+                </el-option>
+            </el-select>
+            </el-col>
+            <el-col :span="6">
+                学期：<el-select v-model="semester" size="small">
+                <el-option
+                        v-for="item in selectOptions2"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value"
+                >
+                </el-option>
+            </el-select>
+            </el-col>
+        </el-row>
+        <br><br>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "timeSelect",
+        data(){
+            return{
+                year:'1920',
+                semester:'2',
+                selectOptions1:[
+                    {
+                        value:'1718',
+                        label:'2017-2018年'
+                    },
+                    {
+                        value:'1819',
+                        label:'2018-2019年'
+                    },
+                    {
+                        value:'1920',
+                        label:'2019-2020年'
+                    }
+                ],
+                selectOptions2:[
+                    {
+                        value:'1',
+                        label:'第一学期'
+                    },
+                    {
+                        value:'2',
+                        label:'第二学期'
+                    }
+                ],
+            }
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>

element-vue/src/pages/labApplyDetail.vue

@@ -1,16 +1,22 @@
 <template>
     <div>
-        <tb_course :c-click="{}" :c-style="{}"></tb_course>
+        <nav-bar></nav-bar><br>
+        <time-select></time-select>
+        <tb_course :c-click="{}" :c-style="{}" table-label="实验室申请详情"></tb_course>
     </div>
 
 </template>
 
 <script>
     import tb_course from "~/components/tb_course";
+    import timeSelect from "~/components/timeSelect";
+    import navBar from "~/components/teacher/navBar";
     export default {
         name: "labApplyDetail",
         components:{
-            tb_course
+            tb_course,
+            navBar,
+            timeSelect
         }
     }
 </script>

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

@@ -14,32 +14,54 @@
                 </el-header>
                 <el-table :data="tableData" border ref="detailtb" height="500px">
                     <el-table-column prop="position" label="实验室地点">
-
                     </el-table-column>
                     <el-table-column prop="name" label="实验室名称">
-
                     </el-table-column>
                     <el-table-column prop="capacity" 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"
                                      label="操作"
                                      width="212">
                         <template slot-scope="scope">
                             <el-button @click="" type="text" size="medium" @click="$router.push('/labApplyDetail')">查看申请详情</el-button>
-                            <el-button @click="" type="text" size="medium">申请</el-button>
+                            <el-button @click="messageDialog=true" type="text" size="medium">申请</el-button>
                         </template>>
 
                     </el-table-column>
                 </el-table>
             </el-main>
-
+            <el-dialog title="请填写以下申请信息" :visible.sync="messageDialog">
+                <el-form :model="form" :inline="true" label-width="100px">
+                    <el-form-item label="地址" ><el-input v-model="form.position"></el-input></el-form-item>
+                    <el-form-item label="申请时间" prop="date"><el-input v-model="form.date"></el-input></el-form-item>
+                    <el-form-item label="实验室名称" ><el-input v-model="form.name"></el-input></el-form-item>
+                    <el-form-item label="姓名" prop="nickname"><el-input v-model="form.nickname"></el-input></el-form-item>
+                    <el-form-item label="手机号" prop="tel"><el-input v-model="form.tel"></el-input></el-form-item>
+                    <el-form-item label="课程名称" prop="course_name"><el-input v-model="form.course_name"></el-input> </el-form-item>
+                    <el-form-item label="使用班级" prop="class"><el-input v-model="form.class"></el-input> </el-form-item>
+                    <el-form-item label="班级人数" prop="population"> <el-input v-model="form.population"></el-input> </el-form-item>
+                    <el-form-item label="申请时间段" prop="time" >
+                        <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-item>
+                        <el-button type="primary" @click="">申请</el-button>
+                        <el-button @click="">重置</el-button>
+                    </el-form-item>
+                </el-form>
+            </el-dialog>
+            <el-dialog :visible.sync="courseDialog" append-to-body>
+                <tb_course :cClick="cellClick" :cStyle="cellStyle" table-label="点击相应的位置选取时间段"></tb_course>
+                <span slot="footer" class="dialog-footer">
+                    <el-button @click="centerDialogVisible = false">取 消</el-button>
+                    <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
+              </span>
+            </el-dialog>
         </el-container>
 
 
@@ -59,12 +81,47 @@
         data(){
                 return{
                     tableData:[{}
-                    ]
+                    ],
+                    messageDialog:false,
+                    courseDialog:false,
+                    form:{
+                        position:'',
+                        name:'',
+                        date: '',
+                        nickname:'',
+                        tel:'',
+                        course_name:'',
+                        class:'',
+                        population:'',
+                        schedule:'',
+                        remind:''
+
+                    }
                 }
 
         },
+        methods:{
+            cellStyle:function({row, column, rowIndex, columnIndex}){
+                if (column.label!=''){
+                    return 'cursor:pointer'
+                }
+            },
+            cellClick:function (row, column, cell, event) {
+                event.target.style.backgroundColor=""
+                if (column.label!='') {
+                    // console.log(cell,event);
+                    // event.target.textContent=''  //赋予格子内容
+                    if(confirm('此框为周数选择框（待开发）')){
+                        event.target.style.backgroundColor="lightyellow"
+                    }
+
+                }
+            }
+        },
         mounted() {
             console.log(this.$refs.detailtb)
+            var d = new Date()
+            this.form.date=d.getFullYear()+'/'+(d.getMonth()+1)+'/'+d.getDate()
         }
     }
 </script>

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

@@ -1,39 +1,30 @@
 <template>
-    <tb_course :cClick="cellClick" :cStyle="cellStyle" ref="courseTB"></tb_course>
+    <div>
+<!--        导航栏-->
+        <nav-bar></nav-bar><br>
+<!--        学年/学期-->
+<time-select></time-select>
+<!--        课程表-->
+        <tb_course :cClick="{}" :cStyle="{}" ref="courseTB" table-label="我的课表" abel="我的课表"></tb_course>
+    </div>
+
 </template>
 
 <script>
     import tb_course from "~/components/tb_course";
+    import navBar from "~/components/teacher/navBar";
+    import timeSelect from "~/components/timeSelect";
     export default {
         name: "myCourse1",
         components:{
-            tb_course
+            tb_course,
+            navBar,
+            timeSelect
         },
         data(){
-            return{
+            return {}
-
-            }
-
         },
         methods:{
-            cellStyle:function({row, column, rowIndex, columnIndex}){
-                if (column.label!=''){
-                    return 'cursor:pointer'
-                }
-            },
-            cellClick:function (row, column, cell, event) {
-                event.target.style.backgroundColor=""
-                if (column.label!='') {
-                    // console.log(cell,event);
-                    // event.target.textContent=''  //赋予格子内容
-                    if(confirm('确定要这一节课是吧')){
-                        event.target.style.backgroundColor="lightyellow"
-                    }
-
-                }
-
-
-            }
         },
         mounted() {
             // //获取已被同意的申请信息，利用课程的星期几和节次在表中进行定位