frame/parts/time-table.vue

<template>
  <div id="index" style="padding-left:0rem">
    <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 }}）期高校大学生就业能力拓展训练课程表（{{ getClassName(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="ths" v-for="(date, index) in th" :key="index">
                <p>{{ date | getWeekDay }}</p>
                <p>（{{ date | getDay }}）</p>
              </th>
              <th class="ths 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">
                <div class="classInfo">
                  <p>上课地点</p>
                  <p>{{ data.jslocation || '' }}</p>
                </div>
                <div class="classInfo">
                  <p>用餐地点</p>
                  <p>{{ data.yclocation || '' }}</p>
                </div>
                <div class="classInfo">
                  <p>开班地点</p>
                  <p>{{ data.kbyslocation || '' }}</p>
                </div>
                <div class="classInfo">
                  <p>班主任</p>
                  <p>{{ data.headteacher || '' }}</p>
                </div>
                <div class="classInfo">
                  <p>礼仪课</p>
                  <p>{{ data.lyteacher || '暂无' }}</p>
                </div>
                <div class="classInfo">
                  <p>督导值班</p>
                  <p>{{ data.reteacher || '' }}</p>
                </div>
              </td>
            </tr>
            <tr>
              <td colspan="2">教师签字</td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td colspan="2"></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 = '', reason } = r;
        let text = `${subname}<br/><span style="color:red">${teaname}</span>`;
        if (reason && teaname !== '') text = `${text}<br/><span style="color:red">${reason}</span>`;
        return text;
      }
    },
    toPrint() {
      this.$print(this.$refs.print);
    },
    getClassName(data) {
      if (data) {
        if (_.isString(data) && data.includes('班')) return data;
        else return `${data}班`;
      }
    },
  },
  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';
.classInfo {
  margin: 10px 0;
  p:first-child {
    padding: 5px 0;
  }
  p:last-child {
    color: #ff0000;
  }
}
</style>