为您推荐:
精华内容
最热下载
问答
  • 5星
    46.38MB weixin_40228600 2021-03-26 09:10:00
  • 5星
    2.18MB weixin_40228600 2021-04-30 08:34:08
  • 845KB qq_38292703 2018-09-11 12:22:55
  • 2KB colourfultiger 2018-08-05 21:27:19
  • 方案一 根据随机周数及随机课节数渲染 <template> <div class="class-table"> <div class="table-wrapper"> <div class="tabel-container"> <table> ...

    方案一

    采用二维数组,固定显示每周7天及固定课节数,无数据的天及课节也会固定占位

    在这里插入图片描述

    <template>
        <div class="class-table">
            <div class="table-wrapper">
                <div class="tabel-container">
    
                    <table>
                        <thead>
                            <tr>
                                <th>时间</th>
                                <th v-for="(weekNum, weekIndex) in classTableData.courses.length" :key="weekIndex"> {{'周' + digital2Chinese(weekIndex, 'week')}}</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(lesson, lessonIndex) in classTableData.lessons" :key="lessonIndex">
                                <td>
                                    <p>{{'第' + digital2Chinese(lessonIndex+1) + "节"}}</p>
                                    <p class="period">{{ lesson }}</p>
                                </td>
    
                                <td v-for="(course, courseIndex) in classTableData.courses" :key="courseIndex">
                                    {{classTableData.courses[courseIndex][lessonIndex] || '-'}}
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </template>
    
    <script>
    
    export default {
        data() {
            return {
                classTableData: {
                    lessons: [
                        '08:00-09:00',
                        '09:00-10:00',
                        '10:00-11:00',
                        '11:00-12:00',
                        '13:00-14:00',
                        '14:00-15:00',
                        '15:00-16:00',
                        '16:00-17:00'
                    ],
                    courses: [
                        ['', '', '', '', '', '', '', ''],
                        ['生物', '物理', '化学', '政治', '历史', '英语', '', '语文'],
                        ['语文', '数学', '英语', '历史', '', '化学', '物理', '生物'],
                        ['生物', '', '化学', '政治', '历史', '英语', '数学', '语文'],
                        ['语文', '数学', '英语', '历史', '政治', '', '物理', '生物'],
                        ['生物', '物理', '化学', '', '历史', '英语', '数学', '语文'],
                        ['语文', '数学', '英语', '', '', '', '', ''],
                    ]
                }
    
            };
        },
        created() {
        	// /* mock随机数据*/
            // Mock.mock({
    		//     lessons: ['08:00-09:00', '09:00-10:00', '10:00-11:00', '11:00-12:00', '13:00-14:00', '14:00-15:00', '15:00-16:00', '16:00-17:00'],
    		//     'courses|7': [['生物', '物理', '化学', '政治', '历史', '英语', '', '语文']]
    		// });
        },
        methods: {
            /**
            * 数字转中文
            * @param {Number} num 需要转换的数字
            * @param {String} identifier 标识符
            * @returns {String} 转换后的中文
            */
            digital2Chinese(num, identifier) {
                const character = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二'];
                return identifier === 'week' && (num === 0 || num === 7) ? '日' : character[num];
            }
        }
    };
    </script>
    
    <style lang="scss" scoped>
    .class-table {
        .table-wrapper {
            width: 100%;
            height: 100%;
            overflow: auto;
        }
        .tabel-container {
            margin: 7px;
    
            table {
                table-layout: fixed;
                width: 100%;
    
                thead {
                    background-color: #67a1ff;
                    th {
                        color: #fff;
                        line-height: 17px;
                        font-weight: normal;
                    }
                }
                tbody {
                    background-color: #eaf2ff;
                    td {
                        color: #677998;
                        line-height: 12px;
                    }
                }
                th,
                td {
                    width: 60px;
                    padding: 12px 2px;
                    font-size: 12px;
                    text-align: center;
                }
    
                tr td:first-child {
                    color: #333;
                    .period {
                        font-size: 8px;
                    }
                }
            }
        }
    }
    </style>
    

    方案二

    固定显示每周7天及固定课节数,无数据的天及课节也会固定占位
    在这里插入图片描述

    <template>
        <div class='class-table'>
            <div class='table-wrapper'>
                <div class='tabel-container'>
                    <table>
                        <thead>
                            <tr>
                                <th>时间</th>
                                <th v-for='(week, index) in weeks' :key='index'> {{'周' + digital2Chinese(index+1, 'week')}}</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for='(item, index) in classTableData' :key='index'>
                                <td>
                                    <p>{{'第' + digital2Chinese(index+1) + '节'}}</p>
                                    <p class='period'>{{ item.classesTime }}</p>
                                </td>
    
                                <td v-for='(week, index) in weeks' :key='index'>
                                    {{item[week]  || '-'}}
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </template>
    
    <script>
    
    export default {
        data() {
            return {
                weeks: ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'],
                classTableData: [{
                    'classesTime': '08:00-09:00',
                    'monday': '物理',
                    'tuesday': '英语',
                    'wednesday': '政治',
                    'thursday': '历史',
                    'friday': '化学',
                    'saturday': '历史',
                    'sunday': '化学'
                }, {
                    'classesTime': '09:00-10:00',
                    'monday': '生物',
                    'tuesday': '物理',
                    'wednesday': '化学',
                    'thursday': '英语',
                    'friday': '化学',
                    'saturday': '生物',
                    'sunday': '化学'
                }, {
                    'classesTime': '10:00-11:00',
                    'monday': '生物',
                    'tuesday': '物理',
                    'wednesday': '生物',
                    'thursday': '历史',
                    'friday': '生物',
                    'saturday': '英语',
                    'sunday': '政治'
                }, {
                    'classesTime': '11:00-12:00',
                    'monday': '',
                    'tuesday': '政治',
                    'wednesday': '物理',
                    'thursday': '政治',
                    'friday': '历史',
                    'saturday': '历史',
                    'sunday': '生物'
                }, {
                    'classesTime': '13:00-14:00',
                    'monday': '生物',
                    'tuesday': '历史',
                    'wednesday': '历史',
                    'thursday': '历史',
                    'friday': '',
                    'saturday': '英语',
                    'sunday': '化学'
                }, {
                    'classesTime': '14:00-15:00',
                    'monday': '化学',
                    'tuesday': '英语',
                    'wednesday': '物理',
                    'thursday': '化学',
                    'friday': '语文',
                    'saturday': '物理',
                    'sunday': '英语'
                }, {
                    'classesTime': '15:00-16:00',
                    'monday': '历史',
                    'tuesday': '历史',
                    'wednesday': '语文',
                    'thursday': '历史',
                    'friday': '生物',
                    'saturday': '英语',
                    'sunday': ''
                }],
                tableShow: false
            };
        },
        created() {
        	// /* mock随机数据*/
            //  Mock.mock({
            //     'data|7': [
            //         {
            //             'classesTime|+1': ['08:00-09:00', '09:00-10:00', '10:00-11:00', '11:00-12:00', '13:00-14:00', '14:00-15:00', '15:00-16:00', '16:00-17:00'],
            //             'monday|1': ['生物', '物理', '化学', '政治', '历史', '英语', '', '语文'],
            //             'tuesday|1': ['生物', '物理', '化学', '政治', '历史', '英语', '', '语文'],
            //             'wednesday|1': ['生物', '物理', '化学', '政治', '历史', '英语', '', '语文'],
            //             'thursday|1': ['生物', '物理', '化学', '政治', '历史', '英语', '', '语文'],
            //             'friday|1': ['生物', '物理', '化学', '政治', '历史', '英语', '', '语文'],
            //             'saturday|1': ['生物', '物理', '化学', '政治', '历史', '英语', '', '语文'],
            //             'sunday|1': ['生物', '物理', '化学', '政治', '历史', '英语', '', '语文']
            //         }
            //     ]
            // });
        },
        methods: {
            /**
            * 数字转中文
            * @param {Number} num 需要转换的数字
            * @param {String} identifier 标识符
            * @returns {String} 转换后的中文
            */
            digital2Chinese(num, identifier) {
                const character = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二'];
                return identifier === 'week' && (num === 0 || num === 7) ? '日' : character[num];
            }
        }
    };
    </script>
    
    <style lang='scss' scoped>
    .class-table {
        .table-wrapper {
            width: 100%;
            height: 100%;
            overflow: auto;
        }
        .tabel-container {
            margin: 7px;
    
            table {
                table-layout: fixed;
                width: 100%;
    
                thead {
                    background-color: #67a1ff;
                    th {
                        color: #fff;
                        line-height: 17px;
                        font-weight: normal;
                    }
                }
                tbody {
                    background-color: #eaf2ff;
                    td {
                        color: #677998;
                        line-height: 12px;
                    }
                }
                th,
                td {
                    width: 60px;
                    padding: 12px 2px;
                    font-size: 12px;
                    text-align: center;
                }
    
                tr td:first-child {
                    color: #333;
                    .period {
                        font-size: 8px;
                    }
                }
            }
        }
    }
    </style>
    

    方案三

    根据随机周数及随机课节数渲染

    在这里插入图片描述

    <template>
        <div class="class-table">
            <div class="table-wrapper">
                <div class="tabel-container">
                    <table>
                        <thead>
                            <tr>
                                <th>时间</th>
                                <th v-for="(weekNum, weekIndex) in weeks" :key="weekIndex"> {{'周' + digital2Chinese(weekNum, 'week')}}</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(courseNum, courseIndex) in coursesLen" :key="courseIndex">
    
                                <td>
                                    <p>{{'第' + digital2Chinese(courseNum) + "节"}}</p>
                                    <p class="period">{{ classTableData.period[courseIndex] }}</p>
                                </td>
    
                                <td v-for="(weekNum, weekIndex) in weeks" :key="weekIndex">
                                    {{ fieldCharacter(weekIndex, courseIndex) }}
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </template>
    
    <script>
    export default {
        data() {
            return {
                weeks: [], //周集合
                coursesLen: 0, //最大课节数
                classTableData: { //mock模拟的数据
                    period: ['08:00-09:00', '09:00-10:00', '10:00-11:00', '11:00-12:00', '13:00-14:00', '14:00-15:00', '15:00-16:00', '16:00-17:00'], //时间段
                    weekCourse: [
                        {
                            'week': 0,
                            'courses': [
                                { 'index': 1, 'title': '物理' },
                                { 'index': 3, 'title': '语文' }
                            ]
                        },
                        {
                            'week': 1,
                            'courses': [
                                { 'index': 3, 'title': '生物' },
                                { 'index': 4, 'title': '语文' },
                                { 'index': 5, 'title': '历史' },
                                { 'index': 6, 'title': '数学' },
                                { 'index': 7, 'title': '英语' },
                                { 'index': 8, 'title': '生物' },
                                { 'index': 1, 'title': '生物' }
                            ]
                        },
                        {
                            'week': 3,
                            'courses': [
                                { 'index': 5, 'title': '英语' },
                                { 'index': 6, 'title': '英语' },
                                { 'index': 7, 'title': '物理' },
                                { 'index': 8, 'title': '英语' },
                                { 'index': 1, 'title': '生物' },
                                { 'index': 2, 'title': '数学' },
                                { 'index': 3, 'title': '英语' }
                            ]
                        },
                        {
                            'week': 4,
                            'courses': [
                                { 'index': 4, 'title': '语文' },
                                { 'index': 5, 'title': '英语' },
                                { 'index': 6, 'title': '生物' },
                                { 'index': 7, 'title': '历史' }
                            ]
                        },
                        {
                            'week': 5,
                            'courses': [
                                { 'index': 8, 'title': '化学' },
                                { 'index': 1, 'title': '英语' }
                            ]
                        }
                    ]
                }
            }
        },
        created() {
            this.updateData();
            this.initWeekCourses();
        },
        methods: {
            /**
             * 更新mock模拟的数据,对数据进行排序
             */
            updateData() {
    
                /* 将数据按从周日到周六排序 */
                this.classTableData.weekCourse.sort((a, b) => {
                    return a.week - b.week;
                });
    
                /* 将数据按从第一节到第n节排序 */
                for (let v of this.classTableData.weekCourse) {
                    for (let k in v) {
                        if (k === 'courses') {
                            v[k].sort((a, b) => {
                                return a.index - b.index;
                            });
                        }
                    }
                }
    
                console.log(JSON.stringify(this.classTableData.weekCourse));
            },
            /**
             * 计算周数据及课节数
             */
            initWeekCourses() {
                const that = this;
                this.weeks = []; //周集合
                this.coursesLen = 0; //最大的课节数
    
                this.weeks = this.classTableData.weekCourse.map((item, index) => {
                    for (let k in item) {
                        if (k === 'courses') {
                            let maxCoursesLen = 0;
                            /* 取出一周中最大的课节数及当天的最大课节数 */
                            for (let j of item[k]) {
                                j.index > that.coursesLen && (that.coursesLen = j.index); //取所有一周里最大课节值
                                j.index > maxCoursesLen && (maxCoursesLen = j.index); //取当天最大课节值
                            }
    
    
                            /* 如果当天的课节总数小于当天的最大课节值 */
                            if (item[k].length < maxCoursesLen) {
                                for (let i = 0; i < maxCoursesLen; i++) { //以最大课节值为终点遍历当天课节
                                    if (!item[k][i] || item[k][i].index != (i + 1)) { //如果下标课节不存在或着与循环的下标不匹配
                                        item[k].splice(i, 0, ''); //填充空课节
                                    }
                                }
                            }
                        }
                    }
                    return item.week;
                });
    
                console.log(JSON.stringify(this.classTableData.weekCourse));
    
    
    
    
            },
            /**
             * 处理格子数据,无数据转换为字符串'-'
             * @param {Number} weekIndex 周几对应的下标
             * @param {Number} courseNum 第几节课对应的下标
             * @returns {String} 返回对应的字符
             */
            fieldCharacter(weekIndex, courseIndex) {
                if (
                    this.classTableData.weekCourse[weekIndex]
                    &&
                    this.classTableData.weekCourse[weekIndex].courses[courseIndex]
                    &&
                    this.classTableData.weekCourse[weekIndex].courses[courseIndex].index === courseIndex + 1
                ) {
                    return this.classTableData.weekCourse[weekIndex].courses[courseIndex].title;
                }
                return '-';
            },
    
    
            /**
            * 数字转中文
            * @param {Number} num 需要转换的数字
            * @param {Boolean} identifier 标识符
            * @returns {String} 转换后的中文
            */
            digital2Chinese(num, identifier) {
                const character = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二'];
                return identifier === 'week' && (num === 0 || num === 7) ? '日' : character[num];
            },
        }
    };
    </script>
    
    <style lang="scss" scoped>
    .class-table {
        .table-wrapper {
            width: 100%;
            height: 100%;
            overflow: auto;
        }
        .tabel-container {
            margin: 7px;
    
            table {
                table-layout: fixed;
                width: 100%;
    
                thead {
                    background-color: #67a1ff;
                    th {
                        color: #fff;
                        line-height: 17px;
                        font-weight: normal;
                    }
                }
                tbody {
                    background-color: #eaf2ff;
                    td {
                        color: #677998;
                        line-height: 12px;
                    }
                }
                th,
                td {
                    width: 60px;
                    padding: 12px 2px;
                    font-size: 12px;
                    text-align: center;
                }
    
                tr td:first-child {
                    color: #333;
                    .period {
                        font-size: 8px;
                    }
                }
            }
        }
    }
    </style>
    
    展开全文
    lihefei_coder 2019-08-08 16:03:20
  • 功能需求是:在有对接数据的情况下显示该课程表,默认显示当前周的七天数据,并且当天的列要呈淡黄色背景。可以选择日期,必须七天,多了少了都会提示,这个是根据vant的日期选择组件进行小改动实现的,具体实现效果...

    功能需求是:在有对接数据的情况下显示该课程表,默认显示当前周的七天数据,并且当天的列要呈淡黄色背景。可以选择日期,必须七天,多了少了都会提示,这个是根据vant的日期选择组件进行小改动实现的,具体实现效果如下。

    这是默认当前周的显示:

     

    这是选择少于七天的提示信息,并且确定按钮不可点击:

    跟后端沟通,设计的返回数据结构如下:

    timeTable: {
                    // 返回7天对应的周几数组
                    weekday: ["周四", "周五", "周六", "周日", "周一", "周二", "周三"],
                    classData: [
                    // 必须要一周的七天二维数组  对应七天的数据
                    // 每天的课程对应不同的节次下标
                    [{
                        hasClass: true, // 是否有课
                        classIndex: 8, // 对应的节次下标
                    }],
                    [
                        {
                        hasClass: true,
                        classIndex: 3,
                        }
                    ],
                    [
                        {
                        hasClass: true,
                        classIndex: 7,
                        },
                        {
                        hasClass: true,
                        classIndex: 3,
                        }
                    ],
                    [
                        {
                        hasClass: true,
                        classIndex: 11,
    
                        },
                        {
                        hasClass: true,
                        classIndex: 3,
                        }
                    ],
                    [
                        {
                        hasClass: false,
                        classIndex: 3,
                        }
                    ],
                    [
                        {
                        hasClass: true,
                        classIndex: 7,
                        },
                        {
                        hasClass: true,
                        classIndex: 3,
                        },
                    ],
                    [
                        {
                        hasClass: false,
                        classIndex: 7,
    
                        },
                    ]
                    ]
                },

    然后前端要对返回数据进行处理:

    // 重置数据结构
             handleData () {
                 let info = []
                for (let i = 0; i < 11; i++) {
                    info[i] = []
                    for (let j = 0; j < 7; j++) {
                        // 1 表示空白
                        info[i].push(1)
                    }
                }
    
                for (let i = 0; i < 7; i++) {
                    // m 表示第i天所有课程的集合
                    let m = this.timeTable.classData[i]
                    for (let k of m) {
                        info[k.classIndex - 1][i] = k
                    }
                }
                this.info = info
            },

    完整代码如下:

    <template>
      <div class="class-table">
        <header>
          <h4>教务数据:</h4>
          <div class="header-right"
               @click="isHide = !isHide">
            <img class="show-icon"
                 :src="isHide ? down : up "
                 alt=""
                 srcset="">
            <span class="show-text">{{isHide ? "展开" : "收起"}}</span>
          </div>
        </header>
        <template v-if="!isHide">
          <div class="select-date">
            <img class="date-icon"
                 src="../../../assets/images/date@2x.png"
                 alt=""
                 srcset="">
            <div class="date-chioce">
              <span @click="select('start')">{{ selectDate ? selectDate : '选择日期范围' }} </span>
            </div>
          </div>
          <table>
            <thead>
              <tr>
                <th width='50px'
                    class="class-tips"><span class="cutting-line"></span></th>
                <th v-for="(item,index) in timeTable.weekday"
                    :key="index">{{item}}</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item,index) in info"
                  :key="index">
                <td style="font-size:11px;color:#fff;word-wrap: break-word;word-break: break-all;">{{index + 1}}</td>
                <td v-for="(innerItem, idx) in item"
                    :key="idx"
                    :class=" idx === curDayIndex ? 'isCurDay' : ''">
                  <div @click="getTimetableDetail(innerItem)"
                       v-if="innerItem && innerItem.hasClass">
                    {{ innerItem && innerItem.hasClass ? '有课':'' }}
                  </div>
    
                </td>
              </tr>
            </tbody>
          </table>
        </template>
        <!-- 跟产品沟通过 日期范围选择改为直接这样选择区间范围的 而不是单个选开始日期再选个结束日期 -->
        <van-calendar v-model="isShowPopup"
                      color='#1ac1f1'
                      type="range"
                      :max-range="7"
                      @select="selectedDate"
                      @confirm='onConfirm'
                      :min-date="new Date((this.curYear - 1), 0, 1)"
                      :max-date="new Date(this.curYear, 11, 31)"
                      :style="{ height: '55%' }" />
      </div>
    
    </template>
    
    <script>
    import up from '../../../assets/images/up@2x.png';
    import down from '../../../assets/images/down@2x.png';
    import {mapGetters, mapActions} from 'vuex';
    import { getTimetableList, getTimetableInfo } from '../../../services/api_259/api_259';
    import Vue from 'vue';
    import { Toast  } from 'vant'
    Vue.use(Toast);
    export default {
        data() {
            return {
                up,
                down,
                selectDate:'', // 选择的日期
                curYear: 0,
                curDayIndex: 0,
                curDateType: '', // 是开始日期还是结束日期
                isShowPopup: false,
                isConfirm:false, // 是否可以点击确认按钮
                minDate: new Date(),
                maxDate: '',
                currentDate: new Date(),
                startTime: '',
                endTime: '',
                timeTable: {},
                info:[],
                isHide: false, // 是否收起课程表
            }
        },
        computed: {
            ...mapGetters(['detailMsg'])
        },
        async created() {
            this.curYear =  Number(new Date().getFullYear())
            await this.getTimetableList()
            this.getCurWeekDate()
            console.log('今天', this.formatDate(new Date()));
        },
        methods: {
            ...mapActions(['SHOW_TIPS']),
            getCurWeekDate() {
                let currentDate = new Date(new Date())
                let timesStamp = currentDate.getTime();
                let currenDay = currentDate.getDay();
                let dates = [];
                for (let i = 0; i < 7; i++) {
                    dates.push(new Date(timesStamp + 24 * 60 * 60 * 1000 * (i - (currenDay + 6) % 7)).toLocaleDateString().replace(/\//g, '/'));
                }
                this.startTime = dates[0]
                this.endTime = dates[dates.length - 1]
                this.selectDate = `${dates[0]} - ${dates[dates.length - 1]}`
            },
            // 判断今天是否在日期范围内  再进行对比是周几的下标
            curDateToWeekday() {
                let curDay = this.getWeekDay(this.formatDate(new Date()))
                let isInRange = this.isInDateRange(this.startTime, this.endTime)
                if(isInRange) {
                    this.timeTable.weekday.forEach((el, v) => {
                        if(el === curDay) this.curDayIndex =  v
                    })
                } else {
                    this.curDayIndex = null
                }
                // console.log('当前对应周几下标', this.curDayIndex);
            },
            // 今天是否在日期范围区间内
            isInDateRange(start, end) {
                let time = Date.parse(new Date());
                let date1 = Date.parse(new Date(start.replace(/-/g, '/')));
                let date2 = Date.parse(new Date(end.replace(/-/g, '/')));
                if (date1 < time && date2 > time) {
                    return true;
                };
                return false;
            },
            // 重置数据结构
            handleData () {
                 let info = []
                for (let i = 0; i < 11; i++) {
                    info[i] = []
                    for (let j = 0; j < 7; j++) {
                        // 1 表示空白
                        info[i].push(1)
                    }
                }
    
                for (let i = 0; i < 7; i++) {
                    // m 表示第i天所有课程的集合
                    let m = this.timeTable.classData[i]
                    for (let k of m) {
                        info[k.classIndex - 1][i] = k
                    }
                }
                this.info = info
            },
            // 获取课程列表  如果没有传起始时间 后端返回当周的课程
            getTimetableList() {
                // console.log('当前详情', this.detailMsg);
                getTimetableList({mapCode: this.detailMsg.id,startTime: this.startTime, endTime: this.endTime}).then(res => {
                    // console.log('课程列表', res);
                    if(res) {
                        this.timeTable = res
                        this.curDateToWeekday()
                    }
                    this.handleData()
                })
            },
            // 获取课程详情
            getTimetableDetail(item){
                // console.log('查看课程详情', item);
                getTimetableInfo({mapCode: this.detailMsg.id, time: item.date, classes: item.classIndex}).then(res => {
                    let classDetail = res ? res : null
                    let data = {
                        ...classDetail,
                        class_hour: item.classIndex
                    }
                    this.$emit('showClassDetail', data)
                })
            },
            select (type) {
                this.isShowPopup = true
                // 类型也没用了 因为现在是直接选择阶段
                this.curDateType = type
            },
            // 判断当前选择日期区间是否小于7天
            getDaysBetween(dateString1, dateString2){
                let confirmBtn = document.querySelector('.van-calendar__confirm')
    
                let  startDate = Date.parse(dateString1);
                let  endDate = Date.parse(dateString2);
                if (startDate > endDate){
                    return 0;
                }
                if (startDate === endDate){
                    return 1;
                }
                let days = (endDate - startDate)/(1000 * 60 * 60 * 24);
                // console.log('当前选择天数', days);
                if(days < 6) {
                    Toast('请选择间隔为7天的时间段');
                   this.$nextTick(() => {
                        confirmBtn.classList.add('van-button--disabled')
                   })
                   this.isConfirm = false
                    this.isShowPopup = true
    
                } else {
    
                    this.$nextTick(() => {
                        confirmBtn.classList.remove('van-button--disabled')
                         this.isConfirm = true
                    })
                }
                // return  days;
            },
            // 日期转换为对应周几
            getWeekDay(date) {
                let weekDay = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
                let myDate = new Date(Date.parse(date));
                // console.log('对应周几', date, weekDay[myDate.getDay()]);
                return weekDay[myDate.getDay()]
    
            },
            formatDate(date) {
                let d = new Date(date),
                    month = '' + (d.getMonth() + 1),
                    day = '' + d.getDate(),
                    year = d.getFullYear();
    
                if (month.length < 2) month = '0' + month;
                if (day.length < 2) day = '0' + day;
    
                return [year, month, day].join('-');
    
            },
            formatDateAll(date) {
                return  `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`
            },
            // 选择日期的时候判断是否少于7天 少于则提醒不能少于一周
            selectedDate (date) {
                // console.log('选择日期', date);
                const [start, end] = date;
                let startDate = this.formatDate(start)
                let endDate = this.formatDate(end)
                this.getDaysBetween(startDate, endDate)
            },
            onConfirm(date) {
                const [start, end] = date;
                if(this.isConfirm) {
                    this.isShowPopup = false
                    this.startTime = this.formatDate(start)
                    this.endTime = this.formatDate(end)
                    // console.log('起终日期', this.startTime, this.endTime);
                    this.selectDate = `${this.formatDateAll(start)} - ${this.formatDateAll(end)}`;
                    // 时间段更改 调用获取课程接口
                    this.getTimetableList()
                }
            }
        },
    }
    </script>
    
    <style scoped>
    * {
      margin: 0;
      padding: 0;
    }
    
    .class-table {
      width: 100%;
      /* margin-bottom: 60px; */
    }
    header {
      display: flex;
      justify-content: space-between;
    }
    h4 {
      font-size: 0.75rem /* 15/20 */;
      line-height: 0.45rem /* 9/20 */;
    }
    img {
      width: 1rem /* 20/20 */;
    }
    .header-right {
      display: inline-block;
      line-height: 0.45rem /* 9/20 */;
    }
    .show-icon {
      width: 1rem /* 20/20 */;
    }
    .show-text {
      font-size: 0.6rem /* 12/20 */;
      font-weight: 500;
      color: #999999;
    }
    .select-date {
      display: flex;
      align-items: center;
      line-height: 0.6rem /* 12/20 */;
      margin: 0.65rem /* 13/20 */ 0;
    }
    .date-chioce {
      font-size: 0.6rem /* 12/20 */;
      font-weight: 500;
      color: #c0c4cc;
      margin-left: 0.4rem /* 8/20 */;
    }
    table {
      table-layout: fixed;
      /* width: 100%; */
      border-collapse: collapse;
      background: #fff;
      color: #606266;
      border: 1px solid #e4e7ed;
      transition: 0.4s ease;
    }
    
    thead {
    }
    th {
      font-weight: normal;
      border: 1px solid #e4e7ed;
      width: 2.15rem /* 43/20 */;
      height: 1.35rem /* 27/20 */ !important;
      border: 1px solid #e4e7ed;
    }
    .bg_graphic,
    .content {
      position: absolute;
      top: 0;
      left: 0;
      width: 47px;
      height: 25px;
      background-color: transparent;
    }
    
    .content > span {
      position: absolute;
      color: #909399;
      font-size: 0.5rem /* 10/20 */;
      transform: scale(0.6);
      -webkit-transform: scale(0.6);
      /* padding: 6px 8px; */
    }
    .content_left-bottom {
      bottom: 0;
      left: 0;
    }
    
    .content_right-top {
      top: 0;
      right: 0;
    }
    
    .bg_graphic::before {
      position: absolute;
      top: 0px;
      right: 0;
      left: 0;
      bottom: 0;
      border-bottom: 25px solid #e4e7ed;
      border-right: 47px solid transparent;
      content: "";
    }
    
    .bg_graphic::after {
      position: absolute;
      left: 0;
      right: 0;
      top: 0px;
      bottom: 0;
      border-bottom: 25px solid white;
      border-right: 47px solid transparent;
      content: "";
    }
    .class-tips {
      position: relative;
      overflow: hidden;
      color: #909399;
    }
    .class-tips::before {
      content: "星期";
      position: absolute;
      right: 0;
      top: -2px;
      transform: scale(0.6);
      -webkit-transform: scale(0.6);
    }
    .class-tips::after {
      content: "节次";
      position: absolute;
      left: 0;
      bottom: -2px;
      transform: scale(0.6);
      -webkit-transform: scale(0.6);
    }
    .cutting-line {
      position: absolute;
      top: 7.1px;
      left: 0;
      display: inline-block;
      width: 100%;
      height: 1px;
      background-color: #e4e7ed;
      transform: rotateZ(31.5deg) scale(1.414) translateY(4px);
      transform-origin: center;
    }
    tbody {
      font-size: 0.6rem /* 12/20 */;
    }
    th,
    td {
      position: relative;
      text-align: center;
      width: 2.15rem /* 43/20 */;
      height: 0.95rem /* 11/20 */;
      line-height: 0.95rem /* 11/20 */;
      font-size: 0.6rem /* 12/20 */;
      text-align: center;
      background: #fefefe;
      border: 1px solid #e4e7ed;
      overflow: hidden;
    }
    tr td div {
      background: #7bcaf8;
      width: 100%;
      height: 100%;
      color: #ffffff;
      box-sizing: border-box;
    }
    
    tr td:first-child {
      width: 2.45rem /* 49/20 */;
    
      color: #909399;
    }
    .isCurDay {
      background: #fcf9ee;
    }
    </style>
    

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

    展开全文
    sueRimn 2021-04-08 15:33:15
  • 代码实现: 封装一个超级课程表组件ClassTable如下: <template> <!-- 课表组件 --> <div class="class-table"> <div class="table-wrapper"> <div class="tabel-container"> <table> <thead> <tr> (item,index) in...

    效果图展示:
    Alt
    在这里插入图片描述
    实现思路:
    (1)使用table表格实现的
    (2)接口数据需要返回一个二位数组即可。

    代码实现:
    封装一个超级课程表组件ClassTable如下:

    <template>
      <!-- 课表组件 -->
      <div class="class-table">
        <div class="table-wrapper">
          <div class="tabel-container">
            <table>
              <thead>
                <tr>
                  <th v-for="(item,index) in classTableData.weeks" :key="index">{{item?'周'+item:''}}</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item,index) in classTableData.courses" :key="index">
                  <td
                    style="font-size:12px;background:#d4f7fd;word-wrap: break-word; 
      word-break: break-all;"
                  >{{changeCharacter(index)}}</td>
                  <td v-for="(innerItem,idx) in item" :key="idx" @click="toScanDetail(innerItem,idx)">
                    <div style v-if="innerItem.lessonsName">
                      {{innerItem.lessonsName}}
                      <br />
                      {{innerItem.lessonsTime}}
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </template>
     
    <script>
    var that;
    import { Dialog } from "vant";
    export default {
      props: {
        classTableData: {
          type: Object
        }
      },
      computed: {
        // 将数字转换成汉字
        changeCharacter(num) {
          return function(num) {
            var digArr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
            var characterArr = [
              "一",
              "二",
              "三",
              "四",
              "五",
              "六",
              "七",
              "八",
              "九"
            ];
            return characterArr[num];
          };
        }
      },
      methods: {
        // 查看该课程的相关详情
        toScanDetail(item, idx) {
          var con = `<div style="width:180px;text-align:left!important;margin:0 auto;color:#999;font-size:16px">课程名称:${item.lessonsName}<br/>上课时间:${item.lessonsTime}<br/>上课地点:${item.lessonsAddress}<br/>授课老师:${item.lessonsTeacher}<br/>课程课时:${item.lessonsRemark}</div>`;
          if (item.lessonsName) {
            Dialog.alert({
              message: con
            });
          }
        }
      }
    };
    </script>
     
    <style scoped>
    * {
      margin: 0;
      padding: 0;
    }
    .table-wrapper {
      width: 100%;
      overflow: auto;
      margin-bottom: 60px;
    }
    table {
      table-layout: fixed;
      width: 100%;
      border-collapse: collapse;
      color: #677998;
    }
    
    thead {
      background: #d4f7fd;
    }
    th {
      font-weight: normal;
      height: 46px !important;
    }
    tbody {
      font-size: 12px;
    }
    th,
    td {
      text-align: center;
      height: 80px;
      border-right: 1px solid #fefefe;
      border-bottom: 1px solid #fefefe;
    }
    tr td div {
      background: #a5d16d;
      width: 100%;
      height: 100%;
      color: #efefef;
      border-radius: 10px;
      padding: 5px;
      box-sizing: border-box;
    }
    
    tr td:first-child {
      color: #333;
    }
    .course {
      background-color: #ebbbbb;
      color: #fff;
      display: inline-block;
      border-radius: 3px;
      width: 47%;
      margin: 1px 1%;
    }
    .bgColor {
      background-color: #89b2e5;
    }
    </style>
    

    使用该组件如下:

    <template>
      <div>
        <v-ClassTable :classTableData="classTableData" />
      </div>
    </template>
    <script>
    var that;
    import ClassTable from "../../components/ClassTable";
    import { reqFindTeacherLesson } from "../../config/api";
    export default {
      data() {
        return {
          msg: "",
          classTableData:{
              weeks: ["", "一", "二", "三", "四", "五","六","日"],
              courses: [],
          }
        };
      },
      components: {
        "v-ClassTable": ClassTable
      },
      created() {
        const { userId, userName, roleId } = JSON.parse(
          this.$cookie.get("userInfo")
        );
        this.findTeacherLesson(userName);
      },
      methods: {
        // 查询教师课表
        async findTeacherLesson(userName) {
          that = this;
          var params = {
            userName: userName
          };
          const { msg, status, info } = await reqFindTeacherLesson(params);
          that.classTableData.courses = info;
        }
      }
    };
    </script>
    

    接口返回的数据格式如下:

    {
        "msg": "查询成功",
        "status": 1,
        "info": [
            [
                {
                    "id": 1,
                    "classId": 2,
                    "lessonsTime": "8:00-9:40",
                    "lessonsName": "计算机导论",
                    "lessonsAddress": "二教302",
                    "lessonsTeacher": "吴老师",
                    "lessonsRemark": "1-17周",
                    "lessonsNumber": "一",
                    "weekday": "星期一"
                },
                {
                    "id": 19,
                    "classId": 2,
                    "lessonsTime": "8:00-9:40",
                    "lessonsName": "编译原理",
                    "lessonsAddress": "二教302",
                    "lessonsTeacher": "吴老师",
                    "lessonsRemark": "1-5,8-12周",
                    "lessonsNumber": "一",
                    "weekday": "星期四"
                },
            ],
            [{},{},{}],
            [{},{},{}]
        ]
    }
    
    展开全文
    qq_39721418 2020-01-09 09:28:41
  • <template> <div class='class-table'> <div class='table-wrapper'> <div class='tabel-container'> <table> <thead> <tr>
    <template>
        <div class='class-table'>
            <div class='table-wrapper'>
                <div class='tabel-container'>
                    <table>
                        <thead>
                            <tr>
                                <th>时间</th>
                                <th v-for='(week, index) in weeks' :key='index'> {{'周' + digital2Chinese(index+1, 'week')}}</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for='(item, index) in classTableData' :key='index'>
                                <td>
                                    <p>{{'第' + digital2Chinese(index+1) + '节'}}</p>
                                    <p class='period'>{{ item.classesTime }}</p>
                                </td>
    
                                <td v-for='(week, index) in weeks' :key='index'>
                                    {{item[week]  || '-'}}
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </template>
    
    <script>
    
    export default {
        data() {
            return {
                weeks: ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'],
                classTableData: [{
                    'classesTime': '08:00-09:00',
                    'monday': '物理',
                    'tuesday': '英语',
                    'wednesday': '政治',
                    'thursday': '历史',
                    'friday': '化学',
                    'saturday': '历史',
                    'sunday': '化学'
                }, {
                    'classesTime': '09:00-10:00',
                    'monday': '生物',
                    'tuesday': '物理',
                    'wednesday': '化学',
                    'thursday': '英语',
                    'friday': '化学',
                    'saturday': '生物',
                    'sunday': '化学'
                }, {
                    'classesTime': '10:00-11:00',
                    'monday': '生物',
                    'tuesday': '物理',
                    'wednesday': '生物',
                    'thursday': '历史',
                    'friday': '生物',
                    'saturday': '英语',
                    'sunday': '政治'
                }, {
                    'classesTime': '11:00-12:00',
                    'monday': '',
                    'tuesday': '政治',
                    'wednesday': '物理',
                    'thursday': '政治',
                    'friday': '历史',
                    'saturday': '历史',
                    'sunday': '生物'
                }, {
                    'classesTime': '13:00-14:00',
                    'monday': '生物',
                    'tuesday': '历史',
                    'wednesday': '历史',
                    'thursday': '历史',
                    'friday': '',
                    'saturday': '英语',
                    'sunday': '化学'
                }, {
                    'classesTime': '14:00-15:00',
                    'monday': '化学',
                    'tuesday': '英语',
                    'wednesday': '物理',
                    'thursday': '化学',
                    'friday': '语文',
                    'saturday': '物理',
                    'sunday': '英语'
                }, {
                    'classesTime': '15:00-16:00',
                    'monday': '历史',
                    'tuesday': '历史',
                    'wednesday': '语文',
                    'thursday': '历史',
                    'friday': '生物',
                    'saturday': '英语',
                    'sunday': ''
                }],
                tableShow: false
            };
        },
        created() {
        	// /* mock随机数据*/
            //  Mock.mock({
            //     'data|7': [
            //         {
            //             'classesTime|+1': ['08:00-09:00', '09:00-10:00', '10:00-11:00', '11:00-12:00', '13:00-14:00', '14:00-15:00', '15:00-16:00', '16:00-17:00'],
            //             'monday|1': ['生物', '物理', '化学', '政治', '历史', '英语', '', '语文'],
            //             'tuesday|1': ['生物', '物理', '化学', '政治', '历史', '英语', '', '语文'],
            //             'wednesday|1': ['生物', '物理', '化学', '政治', '历史', '英语', '', '语文'],
            //             'thursday|1': ['生物', '物理', '化学', '政治', '历史', '英语', '', '语文'],
            //             'friday|1': ['生物', '物理', '化学', '政治', '历史', '英语', '', '语文'],
            //             'saturday|1': ['生物', '物理', '化学', '政治', '历史', '英语', '', '语文'],
            //             'sunday|1': ['生物', '物理', '化学', '政治', '历史', '英语', '', '语文']
            //         }
            //     ]
            // });
        },
        methods: {
            /**
            * 数字转中文
            * @param {Number} num 需要转换的数字
            * @param {String} identifier 标识符
            * @returns {String} 转换后的中文
            */
            digital2Chinese(num, identifier) {
                const character = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二'];
                return identifier === 'week' && (num === 0 || num === 7) ? '日' : character[num];
            }
        }
    };
    </script>
    
    <style lang='scss' scoped>
    .class-table {
        .table-wrapper {
            width: 100%;
            height: 100%;
            overflow: auto;
        }
        .tabel-container {
            margin: 7px;
    
            table {
                table-layout: fixed;
                width: 100%;
    
                thead {
                    background-color: #67a1ff;
                    th {
                        color: #fff;
                        line-height: 17px;
                        font-weight: normal;
                    }
                }
                tbody {
                    background-color: #eaf2ff;
                    td {
                        color: #677998;
                        line-height: 12px;
                    }
                }
                th,
                td {
                    width: 60px;
                    padding: 12px 2px;
                    font-size: 12px;
                    text-align: center;
                }
    
                tr td:first-child {
                    color: #333;
                    .period {
                        font-size: 8px;
                    }
                }
            }
        }
    }
    </style>
    
    

    =================================================================>>>>

    <template>
      <div class="kbBox">
        <el-table
          :data="classList"
          border
          style="width: 100%"
          class="courseForm"
          :header-cell-style="{ background: '#5D87EB', color: '#fff' }"
        >
          <el-table-column
            prop="Course"
            label="课时/节次"
            width="100"
          ></el-table-column>
          <el-table-column prop="one" label="周一" width="103"></el-table-column>
          <el-table-column prop="two" label="周二" width="110"></el-table-column>
          <el-table-column prop="three" label="周三" width="110"></el-table-column>
          <el-table-column prop="four" label="周四" width="100"></el-table-column>
          <el-table-column prop="five" label="周五" width="120"></el-table-column>
        </el-table>
        <div></div>
      </div>
    </template>
    
    <script>
    
    export default {
    
      data() {
        return {
          classList: [
            {
              Course: "第一节",
              one: "语文",
              two: "数学",
              three: "科学",
              four: "地理",
              five: "生物",
            },
            {
              Course: "第二节",
              one: "语文",
              two: "数学",
              three: "英语",
              four: "地理",
              five: "生物",
            },
            {
              Course: "第三节",
              one: "语文",
              two: "数学",
              three: "英语",
              four: "地理",
              five: "生物",
            },
            {
              Course: "第四节",
              one: "语文",
              two: "数学",
              three: "英语",
              four: "地理",
              five: "生物",
            },
            {
              Course: "第五节",
              one: "语文",
              two: "数学",
              three: "英语",
              four: "地理",
              five: "生物",
            },
            {
              Course: "第六节",
              one: "语文",
              two: "数学",
              three: "英语",
              four: "地理",
              five: "生物",
            },
          ],
        };
      },
    };
    </script>
    
    <style>
    </style>
    
    展开全文
    qq_26705343 2021-06-17 14:31:11
  • weixin_43272781 2020-03-29 14:25:40
  • marsur 2019-11-13 15:14:01
  • weixin_44592912 2020-06-12 20:11:30
  • Ninewu 2020-07-27 14:49:48
  • 45KB weixin_38739942 2020-08-29 18:52:38
  • 31.49MB weixin_42119281 2021-04-15 08:49:48
  • weixin_45113258 2019-05-27 15:21:43
  • meimeieee 2015-06-07 12:20:31
  • web_gutianle 2020-07-10 15:37:02
  • 12KB Q2053435955 2021-04-13 11:43:08
  • m0_46549277 2021-05-08 17:10:25
  • weixin_42413860 2020-06-09 11:12:11
  • qq_43604182 2021-11-30 17:02:25
  • lingxun123456 2021-03-05 16:03:09
  • qishubiao 2021-05-11 11:15:07
  • 4星
    4.32MB u012908087 2017-01-03 16:50:31
  • 59KB weixin_38569219 2020-12-29 13:20:57
  • 1.15MB weixin_39840924 2019-08-09 19:07:13
  • 51.2MB weixin_46820017 2021-06-22 19:23:21
  • 59KB weixin_38569166 2020-10-14 17:56:46
  • o_o814222198 2019-09-18 09:53:22
  • u014608640 2019-01-22 16:54:59
  • PY0312 2019-09-12 00:48:57

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,774
精华内容 1,909
关键字:

vue课程表

vue 订阅