update

src/components/excel-term-lesson.vue

@@ -2,14 +2,16 @@
   <div id="excel-term-lesson">
     <div style="overflow-x:auto;" v-for="(t, tindex) in termnum" :key="`term-${tindex}`">
       <el-card :header="`第${t.term}期课表`" :body-style="{ overflowX: 'auto', padding: '0' }">
-        <table v-for="(type, typeIndex) in classType" :key="`ct-${typeIndex}`" border="1" cellspacing="0" cellpadding="0" style="border-collapse: collapse ">
+        <table v-for="(type, typeIndex) in classType" :key="`ct-${typeIndex}`" border="1" cellspacing="0" style="border-collapse: collapse ">
           <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>
+                    <td :key="`date-${dindex}`" style="display: grid;width:60px;" :style="{ background: getColor(d, dindex, b) }">
+                      {{ getMonthDay(d) }}
+                    </td>
                   </template>
                 </tr>
               </th>
@@ -18,7 +20,7 @@
                 星期
                 <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>
+                    <td :key="`day-${dindex}`" style="display: grid;width:50px;" :style="{ background: getColor(d, dindex, b) }">{{ getDay(d) }}</td>
                   </template>
                 </tr>
               </th>
@@ -27,7 +29,9 @@
                 课程
                 <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>
+                    <td :key="`lesson-${dindex}`" class="out" style="display: grid;width: 75px;" :style="{ background: getColor(d, dindex, b) }">
+                      {{ getLesson(d, b) }}
+                    </td>
                   </template>
                 </tr>
               </th>
@@ -37,10 +41,16 @@
                   {{ 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;word-break:break-all;" @click="tdClick(d, c, t._id, b._id, t.term, b.batch)">
-                        <!-- <el-link :type="getMessage" :underline="false" style="font-size:16px">{{ getTeacher(d, c) }}</el-link> -->
+                      <td
+                        :key="`date-${dindex}`"
+                        class="teacher_td"
+                        :style="computedTeacherTdWidth(c, d, dindex, b)"
+                        @click="tdClick(d, c, t._id, b._id, t.term, b.batch)"
+                      >
                         <span>{{ getTeacher(d, c) }}</span>
-                        <el-link v-if="checkMsg(d, c)" :type="getMessage()" :underline="false">未确认</el-link>
+                        <el-link v-if="checkMsg(d, c)" :type="checkMsg(d, c)" :underline="false" style="font-weight: 600;">
+                          {{ getMsgWord(checkMsg(d, c)) }}
+                        </el-link>
                       </td>
                     </template>
                   </tr>
@@ -64,12 +74,12 @@ export default {
     classType: { type: Array, default: () => [] },
     termnum: { type: Array, default: () => [] },
     subjectList: { type: Array, default: () => [] },
+    noticeList: { type: Array, default: () => [] },
   },
   components: {},
   data: function() {
-    var _this = this;
     return {
-      term: [],
+      colorList: ['#E9E7EF', '#E6E6FA', '#FFF0F5', '#FFE4C4', '#E9F1F6', '#FFF2DF', '#E1FFFF', '#FFFFE0', '#F0FFF0', '#F8F8FF'],
     };
   },
   created() {},
@@ -143,7 +153,25 @@ export default {
     checkMsg(date, cla) {
       if (this.getTeacher(date, cla) === '-') return false;
       // TODO检查消息列表,是否有这个教师的消息,如果没有,也return false
-      return true;
+      const r = this.noticeList.find(f => f.classid === cla._id);
+      // 没找到该班通知返回不显示
+      if (!r) return false;
+      const { notified } = r;
+      // 没有通知人数组返回不显示
+      if (!notified) return false;
+      const { lessons } = cla;
+      // 没有课程数组返回不显示
+      if (!lessons) return false;
+      const l = lessons.find(f => f.day === date);
+      // 没有课程返回不显示
+      if (!l) return false;
+      const { teaid } = l;
+      const msg = notified.find(f => f.notifiedid === teaid);
+      // 没找到信息返回显示,但是是未收到通知,说明没绑定
+      if (!msg) return 'danger';
+      const { status } = msg;
+      if (status === '0') return 'warning';
+      return 'success';
     },
     //获取信息接收状态
     getMessage() {
@@ -159,6 +187,50 @@ export default {
         this.$emit('changeTeacher', r);
       }
     },
+    // 计算每班教师的td宽度,+获取背景颜色
+    computedTeacherTdWidth(cla, date, index, batch) {
+      let wid = 0;
+      // 班级名称
+      let cname = _.get(cla, 'name', '');
+      let unit = 15;
+      const { lessons } = cla;
+      let arr = [];
+      for (const l of lessons) {
+        if (l.teaname) arr.push(l.teaname.length);
+      }
+      arr = arr.sort((a, b) => b - a);
+      const h = _.head(arr);
+      // 小于等于3个字 75 之后多一个字加15
+      if (h && h >= cname.length) {
+        if (h <= 3) wid = 75;
+        else wid = 75 + (h - 3) * unit;
+      } else {
+        if (cname.length <= 3) wid = 65;
+        else wid = 65 + (cname.length - 3) * unit;
+      }
+      let obj = { width: `${wid}px`, background: this.getColor(date, index, batch) };
+      return obj;
+    },
+    // 背景颜色
+    getColor(date, index, batch) {
+      if (date === '-') return '#FFFFFF';
+      const lessons = _.get(batch, 'lessons', []);
+      let r = lessons.filter(f => f.day === date);
+      r = r.map(i => {
+        const sub = this.subjectList.find(f => f._id === i.subid);
+        if (sub) i.need_teacher = sub.need_teacher;
+
+        return i;
+      });
+      if (r.some(e => e.need_teacher === '0')) return this.colorList[index];
+      else return '#FFFFFF';
+    },
+    // 文字对应的信息
+    getMsgWord(result) {
+      if (result === 'danger') return '未收到信息';
+      if (result === 'warning') return '未确认';
+      return '已确认';
+    },
   },
   computed: {
     ...mapState(['user']),
@@ -176,12 +248,19 @@ export default {
 td {
   text-align: center;
   min-height: 50px;
+  border-right: 0;
+  border-left: 0;
+  border-bottom: 0;
 }
 .row_header {
   .el-col {
     text-align: center;
   }
 }
+.teacher_td {
+  display: grid;
+  word-break: break-all;
+}
 .out {
   overflow: hidden;
   white-space: nowrap;

src/views/new-plan/teacher-lesson.vue

@@ -18,7 +18,13 @@
         </el-col>
       </el-row>
       <div>
-        <excel-term-lesson :classType="ctList" :termnum="filterList()" :subject="subjectList" @changeTeacher="cellClick"></excel-term-lesson>
+        <excel-term-lesson
+          :classType="ctList"
+          :termnum="filterList()"
+          :subjectList="subjectList"
+          :noticeList="noticeList"
+          @changeTeacher="cellClick"
+        ></excel-term-lesson>
       </div>
 
       <el-dialog title="选择教师" width="30%" :visible.sync="dialog" center :destroy-on-close="true" @close="toClose">
@@ -68,8 +74,8 @@
         <el-row style="text-align:center" class="msgrow">
           <el-col :span="24">请选择期数,系统将会对教师发送通知(发送通知并不代表确定安排)</el-col>
           <el-checkbox-group v-model="msgForm">
-            <el-col :span="6" v-for="(i, index) in termList" :key="index">
-              <el-checkbox :label="i.id">第{{ i.term }}期</el-checkbox>
+            <el-col :span="6" v-for="(i, index) in plan.termnum" :key="index">
+              <el-checkbox :label="i._id">第{{ i.term }}期</el-checkbox>
             </el-col>
           </el-checkbox-group>
         </el-row>
@@ -93,8 +99,8 @@
         <el-row style="text-align:center" class="msgrow">
           <el-col :span="24">请选择期数确定安排</el-col>
           <el-checkbox-group v-model="conForm">
-            <el-col :span="6" v-for="(i, index) in termList" :key="index">
-              <el-checkbox :label="i.id">第{{ i.term }}期</el-checkbox>
+            <el-col :span="6" v-for="(i, index) in plan.termnum" :key="index">
+              <el-checkbox :label="i._id">第{{ i.term }}期</el-checkbox>
             </el-col>
           </el-checkbox-group>
         </el-row>
@@ -160,7 +166,7 @@ export default {
       termList: [],
       applyList: [],
       info: {},
-      noticeList: {},
+      noticeList: [],
     };
   },
   created() {},