update

src/views/train-plan/attendance.vue

@@ -20,7 +20,7 @@
         </el-form-item>
       </el-form>
       <!-- <data-table :fields="fields" :data="list"> </data-table> -->
-      <el-table :data="list" border stripe height="600px" v-if="headList.length > 0">
+      <el-table :data="list" border stripe height="600px" v-if="headList.length > 0" v-loading="loading" :cell-style="cellStyle">
         <el-table-column align="center" v-for="(h, hindex) in headList" :key="`col-${hindex}`" :label="h.label" :prop="h.prop">
           <template v-if="h.prop !== 'name'">
             <el-table-column align="center" label="上午">
@@ -69,6 +69,7 @@ export default {
     // dataTable,
   },
   data: () => ({
+    loading: true,
     classList: [],
     batchList: [],
     termList: [],
@@ -125,14 +126,16 @@ export default {
       this.$set(this, `classList`, arr);
     },
     async onsearch({ skip = 0, limit = 10, ...info } = {}) {
+      this.loading = true;
       // 首先整理表头,如果没有选择班级,就是说,要看这期的考勤,需要将这期的日期都列出来坐表头
       const headColumn = this.getColumn();
       if (!headColumn) return;
       this.$set(this, `headList`, headColumn);
       // 找到相关信息
-      this.getStudent();
-      this.getAttendance();
-      this.getLeave();
+      await this.getStudent();
+      await this.getAttendance();
+      await this.getLeave();
+      this.loading = false;
     },
     // 获取表格内容,
     getTableContent(...data) {
@@ -142,6 +145,31 @@ export default {
       const { word } = this.chageWord(type);
       return word;
     },
+    // 表格颜色识别
+    cellStyle({ row, column, rowIndex, columnIndex }) {
+      // 除去第一列,学生姓名列
+      if (columnIndex <= 0) return;
+      // 公式, columnIndex / 3 = x ...y
+      // x为哪天,直接在表头数组取出
+      // y的值有 0,1,2:0=>寝室;1=>上午;2=>下午
+      let di = _.floor(columnIndex / 3);
+      let ti = columnIndex % 3;
+      if (ti != 0) di = di + 1;
+      let day = this.headList[di];
+      if (day) day = day.label;
+      let type = 'bd';
+      if (ti == 1) type = 'am';
+      else if (ti == 2) type = 'pm';
+      const res = this.getPersonAttend(row, day, type);
+      if (!res) return;
+      const { type: rtype } = res;
+      if (row.name === '李绍雪') {
+        console.log(ti);
+        console.log(day, type, rtype);
+      }
+      const { color } = this.chageWord(rtype);
+      if (color) return { background: color };
+    },
     /**
      * 获取表格内容的通用方法
      * @param stu 学生信息
@@ -323,28 +351,34 @@ export default {
     },
     chageWord(type) {
       let word;
+      let color;
       switch (type) {
         case 'ok':
           word = '签到';
+          color = '#00E500';
           break;
         case 'late':
           word = '迟到';
+          color = '#F56C6C';
           break;
         case 'nosign':
           word = '';
           break;
         case 'leave':
           word = '请假';
+          color = '#30DFF4';
           break;
         case 'exit':
           word = '退出';
+          color = '#909399';
           break;
 
         default:
           word = '';
+          color = '';
           break;
       }
-      return { word };
+      return { word, color };
     },
   },
   watch: {