update

src/components/excel-term-lesson.vue

@@ -1,74 +1,54 @@
 <template>
   <div id="excel-term-lesson">
-    <table>
-      <tr style="border: 0.1px solid;">
-        <template v-for="(b, bindex) in getBatchData('0', '5f5aed5e69b4221aedaa4fb5')">
-          <th :key="bindex">
-            日期
-            <tr>
-              <template v-for="(d, dindex) in getBatchDayList('0', '5f5aed5e69b4221aedaa4fb5', b)">
-                <td :key="`date-${dindex}`" style="display: grid;">{{ d }}&nbsp;</td>
-              </template>
-            </tr>
-          </th>
+    <div style="overflow-x:auto;" v-for="(t, tindex) in termnum" :key="`term-${tindex}`">
+      <el-card :header="`第${t.term}期课表`" :body-style="{ overflowX: 'auto' }">
+        <table v-for="(type, typeIndex) in classType" :key="`ct-${typeIndex}`" style="border: 1px solid;margin-top:15px">
+          <tr>
+            <template v-for="(b, bindex) in getBatchData(type.code, t._id)">
+              <th :key="`dateHeader-${bindex}`" style="width:60px;">
+                日期
+                <tr>
+                  <template v-for="(d, dindex) in getBatchDayList(type.code, t._id, b)">
+                    <td :key="`date-${dindex}`" style="display: grid;width:60px;">{{ getMonthDay(d) }}&nbsp;</td>
+                  </template>
+                </tr>
+              </th>
 
-          <th :key="bindex">
-            星期
-            <tr>
-              <template v-for="(d, dindex) in getBatchDayList('0', '5f5aed5e69b4221aedaa4fb5', b)">
-                <td :key="`day-${dindex}`" style="display: grid;">{{ getDay(d) }}&nbsp;</td>
-              </template>
-            </tr>
-          </th>
+              <th :key="`dayHeader-${bindex}`" style="width:50px;">
+                星期
+                <tr>
+                  <template v-for="(d, dindex) in getBatchDayList(type.code, t._id, b)">
+                    <td :key="`day-${dindex}`" style="display: grid;width:50px;">{{ getDay(d) }}&nbsp;</td>
+                  </template>
+                </tr>
+              </th>
 
-          <th :key="bindex">
-            课程
-            <tr>
-              <template v-for="(d, dindex) in getBatchDayList('0', '5f5aed5e69b4221aedaa4fb5', b)">
-                <td :key="`lesson-${dindex}`" style="display: grid;">{{ getLesson(d, b) }}&nbsp;</td>
-              </template>
-            </tr>
-          </th>
+              <th :key="`lessonHeader${bindex}`" style="width: 75px;">
+                课程
+                <tr>
+                  <template v-for="(d, dindex) in getBatchDayList(type.code, t._id, b)">
+                    <td :key="`lesson-${dindex}`" class="out" style="display: grid;width: 75px;">{{ getLesson(d, b) }}&nbsp;</td>
+                  </template>
+                </tr>
+              </th>
 
-          <template v-for="(c, cindex) in b.class">
-            <th :key="`${bindex}-${cindex}`">{{ c.name.includes('班') ? c.name : `${c.name}班` }}</th>
-          </template>
-        </template>
-      </tr>
-    </table>
-
-    <!-- <el-row type="flex" class="row_header">
-      <el-col :span="24" v-for="(b, bindex) in getBatchData('0', '5f5aed5e69b4221aedaa4fb5')" :key="bindex" style="border: 0.1px solid;">
-        <el-col :span="4">
-          <el-row>
-            <el-col :span="24">日期</el-col>
-          </el-row>
-        </el-col>
-        <el-col :span="4">星期</el-col>
-        <el-col :span="3">课程</el-col>
-        <template v-for="(c, cindex) in b.class">
-          <el-col :key="`${bindex}-${cindex}`" :span="4">{{ c.name.includes('班') ? c.name : `${c.name}班` }}</el-col>
-        </template>
-      </el-col>
-    </el-row> -->
-    <!-- <el-row type="flex" align="center" style="contentRow">
-      <el-col :span="24" v-for="(b, bindex) in getBatchData('0', '5f5aed5e69b4221aedaa4fb5')" :key="bindex">
-        <el-col :span="6">
-          <el-row style="display: grid;">
-            <el-col :span="24" v-for="(d, dindex) in getBatchDayList('0', '5f5aed5e69b4221aedaa4fb5', b)" :key="dindex">
-              <span> {{ `${d}` }}</span>
-            </el-col>
-          </el-row>
-        </el-col>
-        <el-col :span="4">
-          <el-row style="display: grid;">
-            <el-col :span="24" v-for="(d, dindex) in getBatchDayList('0', '5f5aed5e69b4221aedaa4fb5', b)" :key="dindex">
-              <span>{{ getDay(d) }}</span>
-            </el-col>
-          </el-row>
-        </el-col>
-      </el-col>
-    </el-row> -->
+              <template v-for="(c, cindex) in b.class">
+                <th :key="`${bindex}-${cindex}`">
+                  {{ c.name.includes('班') ? c.name : `${c.name}班` }}
+                  <tr>
+                    <template v-for="(d, dindex) in getBatchDayList(type.code, t._id, b)">
+                      <td :key="`date-${dindex}`" style="display: grid;width:65px">
+                        {{ getTeacher(d, c) }}
+                      </td>
+                    </template>
+                  </tr>
+                </th>
+              </template>
+            </template>
+          </tr>
+        </table>
+      </el-card>
+    </div>
   </div>
 </template>
 
@@ -79,7 +59,6 @@ import { mapState, createNamespacedHelpers } from 'vuex';
 export default {
   name: 'excel-term-lesson',
   props: {
-    data: { type: Array, default: () => [] },
     classType: { type: Array, default: () => [] },
     termnum: { type: Array, default: () => [] },
   },
@@ -87,63 +66,11 @@ export default {
   data: function() {
     var _this = this;
     return {
-      list: {},
-      headerList: [],
-      dayObject: {},
       term: [],
     };
   },
-  created() {
-    this.init();
-  },
+  created() {},
   methods: {
-    init() {
-      // 先留着
-      let glist = _.groupBy(this.data, 'type');
-      let keys = Object.keys(glist);
-      for (const k of keys) {
-        this.$set(this.list, `list${k}`, glist[k]);
-      }
-      // 整理338期数据
-      this.toDisplay('5f5aed5e69b4221aedaa4fb5');
-    },
-    toDisplay(termid) {
-      // 以338期模拟试下
-      const term = this.termnum.find(f => f._id === termid);
-      this.$set(this, 'term', term);
-      // 取出338期所有数据
-      const l = this.data.filter(f => f.termid === termid);
-      // 按班级类型分组
-      const groupl = _.groupBy(l, 'type');
-      // 整理出日期列表
-      const ctList = Object.keys(groupl);
-      for (const ct of ctList) {
-        const ctLesson = groupl[ct];
-        const newOrder = _.orderBy(ctLesson, ['day'], ['asc']);
-        const firstDay = _.get(_.head(newOrder), 'day');
-        const lastDay = _.get(_.last(newOrder), 'day');
-        const dayList = this.getDayList(firstDay, lastDay);
-        this.$set(this.dayObject, `${ct}`, dayList);
-      }
-      // 将每个类型按批次分组
-      const batchGroup = {};
-      for (const ct of ctList) {
-        const ctLesson = groupl[ct];
-        const gb = _.groupBy(ctLesson, 'batchid');
-        // 以 班级类型-班级批次id来组合存储这批的内容
-        const batchids = Object.keys(gb);
-        for (const bid of batchids) {
-          let bList = gb[bid];
-          // 按时间排下序
-          bList = _.orderBy(bList, 'day');
-          // 按班分组
-          const gc = _.groupBy(bList, 'classid');
-          batchGroup[`${ct}-${bid}`] = gc;
-        }
-      }
-      console.log(batchGroup);
-    },
-
     getDayList(start, end) {
       const r = moment(end).diff(start, 'days');
       const arr = [];
@@ -163,7 +90,6 @@ export default {
     },
     // 获取批次的天列表
     getBatchDayList(type, termid, batch) {
-      console.log(type, termid, batch);
       let duplicate = _.cloneDeep(this.termnum.find(f => f._id === termid));
       let data = duplicate.batchnum.filter(f => f.class.every(ce => ce.type === type));
       const newOrder = _.orderBy(data, ['startdate'], ['asc']);
@@ -185,20 +111,31 @@ export default {
         return `星期${dl[moment(d).day()]}`;
       }
     },
+    getMonthDay(d) {
+      if (d === '-') return d;
+      const l = _.split(d, '-');
+      return `${l[1]}-${l[2]}`;
+    },
     // 获取课程
     getLesson(date, batch) {
       const lessons = _.get(batch, 'lessons', []);
-      console.log(lessons);
       const r = lessons.find(f => f.day === date && f.subid);
       if (r) {
         let res = r.subname;
-        if (res.length > 4) {
-          res = `${res.substr(0, 4)}...`;
-        }
         return res;
       }
       return '-';
     },
+    // 获取对应的教师
+    getTeacher(date, cla) {
+      if (date === '-') return '-';
+      const { lessons } = cla;
+      if (!lessons) return '-';
+      const r = lessons.find(f => f.day === date);
+      if (r) {
+        return r.teaname || '-';
+      } else return '-';
+    },
   },
   computed: {
     ...mapState(['user']),
@@ -213,12 +150,19 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.el-col {
-  min-height: 30px;
+tr,
+th,
+td {
+  text-align: center;
 }
 .row_header {
   .el-col {
     text-align: center;
   }
 }
+.out {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
 </style>