update

parts/time-table.vue

@@ -1,146 +1,146 @@
-<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>{{ time }}</td>
-              <td v-for="(date, di) in th" :key="di" v-html="getLesson(date, time)"></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');
-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() {},
-  computed: {},
-  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 == '08:30-11:30') {
-          let text = `${subname}<br/><span style="color:red">${teaname}</span><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}班`;
-      }
-    },
-  },
-  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>
+<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>{{ time }}</td>
+              <td v-for="(date, di) in th" :key="di" v-html="getLesson(date, time)"></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');
+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() {},
+  computed: {},
+  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 == '08:30-11:30') {
+          let text = `${subname}<br/><span style="color:red">${teaname}</span><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}班`;
+      }
+    },
+  },
+  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>