frame/parts/time-table.vue

<template>
  <div id="index" style="padding-left:10rem">
    <el-row type="flex" align="middle" justify="end" class="btn_bar">
      <el-col :span="4" class="printingBtn">
        <el-button type="primary" size="mini" @click="toPrint()">打印课程表</el-button>
      </el-col>
    </el-row>
    <el-row class="rowLesson" type="flex" justify="center" ref="print">
      <el-col :span="21" class="timeTable">
        <el-col :span="24" class="top">
          <el-col :span="24" class="title"> 2020年第（{{ data.term }}）期高校大学生就业能力拓展训练课程表（{{ data.name }}班） </el-col>
          <el-col :span="24" class="date"> （{{ th[0] }}—{{ th[th.length - 1] }}） </el-col>
        </el-col>
        <el-col :span="24" class="info">
          <table border="1" class="table">
            <tr>
              <th colspan="2" class="th">
                <p style="text-align:right;padding:0 10px;color:#000;">星期</p>
                <p style="text-align:center;padding:0 10px;color:#000;">课程</p>
                <p style="text-align:left;padding:0 10px;color:#000;">时间</p>
              </th>
              <th class="th" v-for="(date, index) in th" :key="index">
                <p>{{ date | getWeekDay }}</p>
                <p>（{{ date | getDay }}）</p>
              </th>
              <th class="th beizhu">备注</th>
            </tr>
            <!-- 第一行需要合并2行单元格显示上午 -->
            <!-- 第三行需要合并3行单元格显示下午 -->
            <!-- rowspan="5" 班主任,礼仪课教师等其他信息 -->
            <tr v-for="(time, ti) in tr" :key="ti">
              <td rowspan="2" v-if="ti == 0">上午</td>
              <td rowspan="3" v-if="ti == 2">下午</td>
              <td>{{ time }}</td>
              <td v-for="(date, di) in th" :key="di" v-html="getLesson(date, time)"></td>
              <td rowspan="5" v-if="ti == 0">
                <p>
                  上课地点：<span>{{ data.jslocation || '' }}</span>
                </p>
                <p>
                  班主任：<span class="teacherName">{{ data.headteacher || '' }}</span>
                </p>
                <p>
                  礼仪课：<span class="teacherName">{{ data.lyteacher || '' }}</span>
                </p>
              </td>
            </tr>
          </table>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import _ from 'lodash';
const moment = require('moment');
moment.locale('zh-cn');
export default {
  name: 'index',
  props: {
    th: { type: Array, default: () => [] },
    tr: { type: Array, default: () => [] },
    lessons: { type: Array, default: () => [] },
    data: null,
  },
  components: {},
  data: () => ({}),
  created() {},
  computed: {},
  methods: {
    getLesson(date, time) {
      let r = this.lessons.find(f => f.date == date && f.time == time);
      if (!r) return '--';
      else {
        let { subname, teaname = '' } = r;
        let text = `${subname}<br/><span style="color:red">${teaname}</span>`;
        return text;
      }
    },
    toPrint() {
      this.$print(this.$refs.print);
    },
  },
  filters: {
    getWeekDay(date) {
      return moment(date).format('dddd');
    },
    getDay(date) {
      return moment(date).format('MM月DD日');
    },
  },
};
</script>

<style lang="less" scoped>
@import '~@frame/style/timeTable.less';
</style>