0506 我的课表

element-vue/src/components/tb_course.vue

@@ -0,0 +1,136 @@
+<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  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>
+            <el-table-column prop="Tuesday" label="星期二" align="center"></el-table-column>
+            <el-table-column prop="Wednesday" label="星期三" align="center"></el-table-column>
+            <el-table-column prop="Thursday" label="星期四" align="center"></el-table-column>
+            <el-table-column prop="Friday" label="星期五" align="center"></el-table-column>
+            <el-table-column prop="Saturday" label="星期六" align="center"></el-table-column>
+            <el-table-column prop="Sunday" label="星期日" align="center"></el-table-column>
+            </el-table-column>
+        </el-table>
+    </div>
+</template>
+
+<script>
+    import navBar from "~/components/teacher/navBar";
+    import {get, post} from "~/utils";
+    export default {
+        name: "tb_course",
+        components:{navBar},
+        props:['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:''},
+                    {daytime:'上午',time:'第二节',Monday:'',Tuesday:'',Wednesday:'',Thursday:'',
+                        Friday:'',Saturday:'',Sunday:''},
+                    {daytime:'下午',time:'第三节',Monday:'',Tuesday:'',Wednesday:'',Thursday:'',
+                        Friday:'',Saturday:'',Sunday:''},
+                    {daytime:'下午',time:'第四节',Monday:'',Tuesday:'',Wednesday:'',Thursday:'',
+                        Friday:'',Saturday:'',Sunday:''},
+                    {daytime:'晚上',time:'第五节',Monday:'',Tuesday:'',Wednesday:'',Thursday:'',
+                        Friday:'',Saturday:'',Sunday:''}
+                ]
+            }
+        },
+        methods:{
+            objectSpanMethod({ row, column, rowIndex, columnIndex }) {
+                if (columnIndex === 0) {
+                    if (rowIndex % 2 === 0) {
+                        return {
+                            rowspan: 2,
+                            colspan: 1
+                        };
+                    } else {
+                        return {
+                            rowspan: 0,
+                            colspan: 0
+                        };
+                    }
+                }
+            }
+        },
+        mounted() {
+            // 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"
+            //     }
+            //
+            // }
+
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>

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

@@ -0,0 +1,60 @@
+<template>
+    <tb_course :cClick="cellClick" :cStyle="cellStyle" ref="courseTB"></tb_course>
+</template>
+
+<script>
+    import tb_course from "~/components/tb_course";
+    export default {
+        name: "myCourse1",
+        components:{
+            tb_course
+        },
+        data(){
+            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() {
+            // //获取已被同意的申请信息，利用课程的星期几和节次在表中进行定位
+            // //发送请求
+            // post('')
+            // //获取表格内容所需数据，周次wekk传入n-m周，哪天day传入1，2，3，节次time传入Monday,Tuesday
+            // var c = res.data
+            //先格式化天和节次，再赋值
+            //格式化：
+            // 赋值：this.courseMessage=c.uc_id+c.name+c.nickname+c.week+c.day+c.time+c.position
+            // //检索位置，并填入课程信息,这里的e.time要传入
+            //     if (columnIndex==e.time-1 && rowIndex==e.day-1)
+            //         给对应的表格填入信息
+            var data=this.$refs.courseTB.tableData
+            console.log(data)
+            // data[e.day-1].e.time=this.courseMessage
+
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>