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="length" v-if="ti == 2">下午</td>
              <td>{{ getTime(ti) }}</td>
              <td v-for="(date, di) in th" :key="di" v-html="getLesson(date, getTime(ti))"></td>
              <td rowspan="6" v-if="ti == 0">
                <div class="classInfo">
                  <p>上课地点</p>
                  <p>{{ data.jslocation || '' }}</p>
                </div>
                <div class="classInfo">
                  <p>开班地点</p>
                  <p>{{ data.kbyslocation || '' }}</p>
                </div>
                <div class="classInfo">
                  <p>用餐地点</p>
                  <p>{{ data.yclocation || '' }}</p>
                </div>
                <div class="classInfo">
                  <p>扩展训练地点</p>
                  <p>{{ data.kzjhlocation || '' }}</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 v-for="(date, di) in th" :key="di"></td>
            </tr>
          </table>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import _ from 'lodash';
const moment = require('moment');
moment.locale('zh-cn');
import { mapState, createNamespacedHelpers } from 'vuex';
export default {
  name: 'index',
  props: {
    th: { type: Array, default: () => [] },
    tr: { type: Array, default: () => [] },
    lessons: { type: Array, default: () => [] },
    data: null,
  },
  components: {},
  data: () => ({
    length: 0,
  }),
  async created() {
    console.log('in function:');
  },
  computed: {
    timeList() {
      const today = moment().format('YYYY-MM-DD');
      let mid = _.orderBy(
        _.uniqBy(
          this.lessons.map(i => {
            let m = i.time;
            m = m.split('-');
            const obj = { time: i.time, start: moment(`${today} ${m[0]}`).format('YYYY-MM-DD HH:mm') };
            return obj;
          }),
          'start'
        ),
        ['start'],
        ['asc']
      ).map(i => i.time);
      return mid;
    },
    ...mapState(['user']),
  },
  methods: {
    getLesson(date, time) {
      this.$set(this, `length`, this.tr.length - 2);
      let r = this.lessons.find(f => f.date == date && f.time == time);
      if (!r) return '--';
      else {
        let { subname, teaname = '', reason, time } = r;
        if (time == this.timeList[0]) {
          let text = `${subname || ''}<br/><span style="color:red">${teaname || ''}</span>`;
          if (this.user.type == '0') text += `<br/><span>${reason || ''}</span>`;
          return text;
        } else {
          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}班`;
      }
    },
    getTime(index) {
      return this.timeList[index];
    },
  },
  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;
    font-size: 12px;
  }
}
</style>