update

parts/time-table.vue

@@ -1,10 +1,15 @@
 <template>
   <div id="index">
-    <el-row type="flex" justify="center">
+    <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 type="flex" justify="center" ref="print">
       <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 :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">
@@ -14,35 +19,42 @@
                 <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 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>
-            <tr>
-              <td rowspan="2">上午</td>
-              <td>8:30-11:30</td>
-              <td v-for="(lesson, index) in data.lessons" :key="index">
+            <!-- 第一行需要合并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>{{ getData(time) }}</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">
+              </td> -->
+              <td rowspan="5" v-if="ti == 0">
                 <p>
-                  上课地点：<span>{{ data | getProp('js.name') }}</span>
+                  上课地点：<span>{{ data.jslocation || '' }}</span>
                 </p>
                 <p>
-                  班主任：<span class="teacherName">{{ data | getProp('headteacher.name') }}</span>
+                  班主任：<span class="teacherName">{{ data.headteacher || '' }}</span>
                 </p>
                 <p>
-                  礼仪课：<span class="teacherName">{{ data | getProp('lyTeacher.name') }}</span>
+                  礼仪课：<span class="teacherName">{{ data.lyteacher || '' }}</span>
                 </p>
               </td>
             </tr>
-            <tr>
+            <!-- <tr>
               <td>11:30-13:30</td>
               <td>--</td>
               <td :colspan="data.lessons.length - 1">午餐+休息</td>
@@ -76,7 +88,7 @@
               <td>课程作业</td>
               <td>礼仪课<br />小组面试</td>
               <td>结业仪式</td>
-            </tr>
+            </tr> -->
           </table>
         </el-col>
       </el-col>
@@ -86,34 +98,40 @@
 
 <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: {},
-  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}`;
+  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;
+      }
     },
-    getDate(date) {
-      let arr = date.split('-');
-      return `${arr[1]}月${arr[2]}日`;
+    toPrint() {
+      this.$print(this.$refs.print);
+    },
+  },
+  filters: {
+    getWeekDay(date) {
+      return moment(date).format('dddd');
     },
-    getProp(data, pos) {
-      return _.get(data, pos);
+    getDay(date) {
+      return moment(date).format('MM月DD日');
     },
   },
 };