修改课程表

parts/time-table.vue

@@ -0,0 +1,125 @@
+<template>
+  <div id="index">
+    <el-row type="flex" justify="center">
+      <el-col :span="18" class="timeTable">
+        <el-col :span="24" class="top">
+          <el-col :span="24" class="title"> 2020年第（{{ data.term }}）期高校大学生就业能力拓展训练课程表（{{ data.class }}班） </el-col>
+          <el-col :span="24" class="date"> （{{ data.start | getDate }}—{{ data.end | getDate }}） </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 data.lessons" :key="index">
+                <p>{{ date.week | getWeek }}</p>
+                <p>（{{ date.date | getDate }}）</p>
+              </th>
+              <th class="th beizhu">备注</th>
+            </tr>
+            <tr>
+              <td rowspan="2">上午</td>
+              <td>8:30-11:30</td>
+              <td v-for="(lesson, index) in data.lessons" :key="index">
+                <template v-if="index == 0"> --</template>
+                <template v-else>
+                  <p>{{ lesson.subname || '-' }}</p>
+                  <p class="teacherName">{{ lesson.teaname || '-' }}</p>
+                </template>
+              </td>
+              <td rowspan="5">
+                <p>
+                  上课地点：<span>{{ data | getProp('js.name') }}</span>
+                </p>
+                <p>
+                  班主任：<span class="teacherName">{{ data | getProp('headteacher.name') }}</span>
+                </p>
+                <p>
+                  礼仪课：<span class="teacherName">{{ data | getProp('lyTeacher.name') }}</span>
+                </p>
+              </td>
+            </tr>
+            <tr>
+              <td>11:30-13:30</td>
+              <td>--</td>
+              <td :colspan="data.lessons.length - 1">午餐+休息</td>
+            </tr>
+            <tr class="fourth">
+              <td rowspan="3">下午</td>
+              <td>13:30-16:30</td>
+              <td v-for="(lesson, index) in data.lessons" :key="index">
+                <template v-if="index == 0">
+                  13:30开始报到 <br />（教育宾馆大厅）<br />
+                  15:30开班仪式 <br />（{{ data | getProp('kbys.name') }}）
+                </template>
+                <template v-else>
+                  <template v-if="lesson && lesson.day === '一天'">
+                    <p>{{ lesson.subname || '-' }}</p>
+                    <p class="teacherName">{{ lesson.teaname || '-' }}</p>
+                  </template>
+                </template>
+              </td>
+            </tr>
+            <tr>
+              <td>16:30-17:30</td>
+              <td colspan="5">晚餐</td>
+              <td>--</td>
+            </tr>
+            <tr>
+              <td>17:30-19:45</td>
+              <td>团队组建</td>
+              <td>拓展交流</td>
+              <td>课程作业<br />小组展示</td>
+              <td>课程作业</td>
+              <td>礼仪课<br />小组面试</td>
+              <td>结业仪式</td>
+            </tr>
+          </table>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import _ from 'lodash';
+export default {
+  name: 'index',
+  props: {
+    data: null,
+  },
+  components: {},
+  data: () => ({}),
+  created() {},
+  computed: {},
+  methods: {},
+  filters: {
+    getWeek(week) {
+      let word = '日';
+      if (week == 1) word = '一';
+      if (week == 2) word = '二';
+      if (week == 3) word = '三';
+      if (week == 4) word = '四';
+      if (week == 5) word = '五';
+      if (week == 6) word = '六';
+      if (week == 7) word = '日';
+      return `周${word}`;
+    },
+    getDate(date) {
+      console.log(date);
+      let arr = date.split('-');
+      return `${arr[1]}月${arr[2]}日`;
+    },
+    getProp(data, pos) {
+      return _.get(data, pos);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+@import '~@frame/style/timeTable.less';
+</style>

style/timeTable.less

@@ -0,0 +1,32 @@
+.top .title {
+  text-align: center;
+  font-size: 30px;
+}
+.top .date {
+  text-align: center;
+  font-size: 25px;
+  color: #ff0000;
+  padding: 10px 0;
+}
+.th {
+  width: 120px !important;
+  height: 40px !important;
+}
+.th p {
+  color: #ff0000;
+}
+.th .beizhu {
+  color: #000;
+}
+.table tr td {
+  text-align: center;
+  padding: 15px 5px;
+  font-size: 15px;
+  color: #000;
+}
+.teacherName {
+  color: #ff0000;
+}
+// .fourth td:nth-child(8n) p {
+//   display: none;
+// }