zhihuixiaoyuan2-ui/components/timetable/timetable.vue

<template>
    <view class="tablebox">
    	<table  class='table'>
    		<thead class='thead'> 
    			<tr class="tr_one"> 
					<th style="width: 80rpx;flex: 0 0 auto;"></th>
    				<th  v-for="(item,idx) in week" :key="idx">{{item.tit}}</th>
    			</tr>
    		</thead>
    		
    		<tbody class="tbody" v-if="week.length>0">
    			<tr v-for="(item,index) in timelist" :key="index">
    				<td  class="tbodyl">
						<view>{{item.val}}</view>
						<view v-if="item.time">{{item.time}}</view>
					</td>
					<td  v-for="(weekite,idx) in week" :key="idx">
						<block v-for="(ite,idx) in timetables" :key="idx">
							<block v-if="ite.week==weekite.val">
								<view v-if="item.val==1" class="lit" :class="ite.teacherClassNum&&ite.teacherClassNum.includes(1)?'act':''"  @click="getChose(ite.oneClass,ite.week,item.val)">
									<view class="tit">{{ite.oneClass||''}}</view>
									<view class="txt">{{ite.oneTeacher||''}}</view>
								</view>
								<view v-if="item.val==2" class="lit" :class="ite.teacherClassNum&&ite.teacherClassNum.includes(2)?'act':''" @click="getChose(ite.twoClass,ite.week,item.val)">
									<view class="tit">{{ite.twoClass||''}}</view>
									<view class="txt">{{ite.twoTeacher||''}}</view>
								</view>
								<view v-if="item.val==3" class="lit" :class="ite.teacherClassNum&&ite.teacherClassNum.includes(3)?'act':''"  @click="getChose(ite.threeClass,ite.week,item.val)">
									<view class="tit">{{ite.threeClass||''}}</view>
									<view class="txt">{{ite.threeTeacher||''}}</view>
								</view>
								<view v-if="item.val==4" class="lit" :class="ite.teacherClassNum&&ite.teacherClassNum.includes(4)?'act':''"  @click="getChose(ite.fourClass,ite.week,item.val)">
									<view class="tit">{{ite.fourClass||''}}</view>
									<view class="txt">{{ite.fourTeacher||''}}</view>
								</view>
								<view v-if="item.val==5" class="lit" :class="ite.teacherClassNum&&ite.teacherClassNum.includes(5)?'act':''"  @click="getChose(ite.fiveClass,ite.week,item.val)">
									<view class="tit">{{ite.fiveClass||''}}</view>
									<view class="txt">{{ite.fiveTeacher||''}}</view>
								</view>
								<view v-if="item.val==6" class="lit" :class="ite.teacherClassNum&&ite.teacherClassNum.includes(6)?'act':''"  @click="getChose(ite.sixClass,ite.week,item.val)">
									<view class="tit">{{ite.sixClass||''}}</view>
									<view class="txt">{{ite.sixTeacher||''}}</view>
								</view>
								<view v-if="item.val==7" class="lit" :class="ite.teacherClassNum&&ite.teacherClassNum.includes(7)?'act':''"  @click="getChose(ite.sevenClass,ite.week,item.val)">
									<view class="tit">{{ite.sevenClass||''}}</view>
									<view class="txt">{{ite.sevenTeacher||''}}</view>
								</view>
								<view v-if="item.val==8" class="lit" :class="ite.teacherClassNum&&ite.teacherClassNum.includes(8)?'act':''"  @click="getChose(ite.eightClass,ite.week,item.val)">
									<view class="tit">{{ite.eightClass||''}}</view>
									<view class="txt">{{ite.eightTeacher||''}}</view>
								</view>
							</block>
						</block>
					</td>
    			</tr>
    		</tbody>
    	</table>
    </view>
</template>

<script>
	import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数
  export default {
    name: 'Timetable',
    props: {
      timelist: {
        type: Array,
        default: () => {
          return [{ val: '1'},{ val: '2'}, { val: '3'},{ val: '4'},{ val: '5'},{ val: '6'},{ val: '7'},{ val: '8'}]
        }
      },
      week: {
        type: Array,
        default: () => {
          return [{tit:'周一',val:1}, {tit:'周二',val:2}, {tit:'周三',val:3}, {tit:'周四',val:4}, {tit:'周五',val:5}]
        }
      },
      timetables: {
        type: Array,
        default: () => {
          return []
        }
      },
      palette: {
        type: Array,
        default: () => {
          return []
        }
      },
	  roles:{
		  
	  }
    },
    data () {
      return {
        allPalette: [...this.palette, '#f05261', '#48a8e4', '#ffd061', '#52db9a', '#70d3e6', '#52db9a', '#3f51b5', '#f3d147', '#4adbc3', '#673ab7', '#f3db49', '#76bfcd', '#b495e1', '#ff9800', '#8bc34a']
      }
    },
	mounted() {
		// console.log(this.timelist)
	},
    computed: {
      todayWeekIndex () {
        let weekIndex = new Date().getDay() - 1
        if (weekIndex === -1) {
          weekIndex = 6
        }
        return weekIndex
      }
    },
    methods: {
		checkPermi, checkRole,
      handleCourseClick (course, weekIndex, courseIndex) {
        const data = {
          index: courseIndex + 1,
          length: course.length,
          week: this.week[weekIndex],
          weekIndex: weekIndex,
          name: course.name
        }
        console.log(`星期${data.week}; 第${data.index}节课; 课程名:${data.name}; 课节:${data.length}`)
        console.log(data)
        this.$emit('courseClick', data)
      },
	  getChose(course,zweek,val){
		  if(checkPermi(['course:change:add'])){
			  var newobj={
			  		subject:course,
			  		subjectWeek:zweek,
			  		isNum:val,
			  }
			  this.$emit("getChose",newobj)
		  }
	  }
    }
  }
</script>

<style scoped lang="scss">
.tablebox{
	.table{border-spacing: 0;width: 100%;display: flex;flex-direction: column;overflow: hidden;
		tr{display: flex;}
		.thead{width: 100%;background-color:#F5F5F5;flex: 0 0 auto;border-radius: 10rpx;
			th{padding:10rpx 8rpx;box-sizing: border-box;font-size: 24rpx;color: #838383;font-weight: 500;text-align: center;flex: 1;
			}
		}
		.tbody {flex: 1;overflow: auto;
			td{min-height: 100rpx;box-sizing: border-box;font-weight: 500;color: #343434;font-size: 28rpx;text-align: center;word-break: break-all;flex: 1;display: flex;align-items: center;justify-content: center;flex-direction: column;background-color: #ffffff;padding: 0;
				.lit{padding: 16rpx 12rpx;box-sizing: border-box;width: 100%;height: 100%;
				// &.act{background-color:#fbb0b0;
				&.act{background-color:#EBEBEB;
					.txt{color: #6f6f6f;}
				}
				}
			}
			.tbodyl{display: flex;align-items: center;justify-content: center;flex: 0 0 auto;width: 80rpx;background-color:#F5F5F5;font-size: 24rpx;color: #838383;font-weight: 500;
			}
			
			.tit{font-size: 30rpx;color: #161616;}
			.txt{font-size: 26rpx;color: #AAAAAA;}
		}
	}	 
}
table, td,th{
	border: 1rpx solid #E6E6E6;;
	border-collapse: collapse;
}
</style>