班主任课表显示

src/views/classes/parts/class-table.vue

@@ -1,264 +1,267 @@
-<template>
-  <div id="class-table">
-    <el-card>
-      <template #header>
-        <el-row type="flex" align="middle" justify="space-between">
-          <el-col :span="4">课程安排</el-col>
-        </el-row>
-      </template>
-      <el-table :data="lessonList" border stripe @cell-click="cellClick">
-        <el-table-column align="center" label="时间" prop="time"></el-table-column>
-        <el-table-column align="center" v-for="(i, index) in dateList" :key="index" :label="i" :prop="`subname_day${index + 1}`">
-          <template v-slot="{ row, $index }">
-            <el-row>
-              <el-col :span="24">{{ getProp(row, `subname_day${index + 1}`) }}</el-col>
-              <el-col :span="24" v-if="getProp(row, `teaname_day${index + 1}`)">
-                <p>{{ getProp(row, `teaname_day${index + 1}`) }}</p>
-                <p>{{ getPhone(row, `teaid_day${index + 1}`) }}</p>
-              </el-col>
-              <el-col :span="24">
-                <el-link :type="wordColor(getNoticeResult(getProp(row, `teaid_day${index + 1}`)))">
-                  {{ getNoticeResult(getProp(row, `teaid_day${index + 1}`)) }}
-                </el-link>
-              </el-col>
-            </el-row>
-          </template>
-        </el-table-column>
-      </el-table>
-    </el-card>
-  </div>
-</template>
-
-<script>
-var moment = require('moment');
-import _ from 'lodash';
-import dataForm from '@frame/components/form';
-import { mapState, createNamespacedHelpers } from 'vuex';
-const { mapActions: lesson } = createNamespacedHelpers('lesson');
-const { mapActions: mapUtil } = createNamespacedHelpers('util');
-const { mapActions: subject } = createNamespacedHelpers('subject');
-const { mapActions: teacher } = createNamespacedHelpers('teacher');
-const { mapActions: school } = createNamespacedHelpers('school'); //给选老师组件使用.这个页面请求完就不销毁了
-
-// 本页的组合数据,变量用x表示: _id_day[x];subname_day[x];subid_day[x];teaid_day[x];teaname_day:[x]
-export default {
-  name: 'class-table',
-  props: {
-    classInfo: { type: Object, default: () => {} },
-  },
-  components: {},
-  data: function() {
-    var that = this;
-    return {
-      oLessonList: [],
-      lessonInfo: {},
-      lessonList: [],
-      dateList: [],
-      timeList: [],
-      subjectList: [],
-      teacherList: [],
-      schoolList: [], //给选老师组件用
-      drawer: false,
-      drawerTime: false,
-      dialog: false,
-      form: {},
-      fields: [
-        { label: '日期', model: 'date', type: 'text' },
-        { label: '时间', model: 'time', type: 'text' },
-        { label: '类型', model: 'type', type: 'radio' },
-        { label: '课程安排', model: 'subid', type: 'select', display: (fields, form) => that.fieldDisplay(fields, form) },
-        { label: '活动安排', model: 'subname', type: 'select', display: (fields, form) => that.fieldDisplay(fields, form) },
-        { label: '教师', model: 'teaname', custom: true, display: (fields, form) => that.fieldDisplay(fields, form) },
-      ],
-      dayType: [{ label: '活动' }, { label: '课程' }],
-      actList: [
-        { label: '--' },
-        { label: '报到+开班仪式' },
-        { label: '午餐+休息' },
-        { label: '晚餐' },
-        { label: '团队组建' },
-        { label: '拓展交流' },
-        { label: '课程作业小组展示' },
-        { label: '课程作业' },
-        { label: '礼仪课小组面试' },
-        { label: '结业仪式' },
-      ],
-      noticeList: [],
-    };
-  },
-  created() {
-    this.getOtherList();
-  },
-  methods: {
-    ...mapUtil(['fetch']),
-    ...lesson(['query', 'create', 'update']),
-    ...subject({ getSubject: 'query' }),
-    ...teacher({ getTeacher: 'query', lessonteafetch: 'lessonteafetch' }),
-    ...school({ getSchool: 'query' }),
-    async search() {
-      await this.getNoticeList();
-      let res = await this.fetch({ model: 'lesson', classid: _.get(this.classInfo, '_id'), status: '1' });
-      if (this.$checkRes(res)) {
-        if (!_.get(res.data, 'lessons') || res.data.lessons.length <= 0) {
-          this.$message.warning('课表还未确认,如有疑问请联系中心管理员');
-          return;
-        }
-        this.$set(this, `lessonInfo`, _.omit(res.data, ['lessons']));
-        let arr = _.get(res.data, `lessons`, []);
-        this.$set(this, `oLessonList`, _.cloneDeep(arr));
-        // 查询指定班级教师信息
-        this.seachTeacher();
-        let x = this.getX(JSON.parse(JSON.stringify(arr)));
-        this.getY(JSON.parse(JSON.stringify(arr)));
-        this.$set(this, `dateList`, x);
-        arr = this.aData(arr);
-        this.$set(this, `lessonList`, arr);
-      }
-    },
-    //点击单元格事件
-    cellClick(row, column) {
-      return false;
-    },
-    //field的显示
-    fieldDisplay(f, form) {
-      if (f.model == 'teaname' || f.model == 'subid') {
-        return form.type == '课程';
-      } else return form.type == '活动';
-    },
-    //请求后整理数据方法
-    aData(data) {
-      let duplicate = JSON.parse(JSON.stringify(data));
-      //按时间分组
-      duplicate = _.flatten(_.toPairs(_.groupBy(data, 'time'))).filter(f => _.isArray(f));
-      let r = duplicate.map(i => {
-        //按日期排序
-        let aa = i.sort((a, b) => moment(a.date).format('X') - moment(b.date).format('X'));
-        //组合数据:{time,day1,id_day1,subid_day1}
-        let object = { time: _.get(i[0], 'time') };
-        aa.map(a => {
-          let index = this.dateList.findIndex(f => f == a.date);
-          if (index >= 0) {
-            index = index + 1;
-          }
-          let obj = this.resetData(a, index);
-          object = { ...object, ...obj };
-        });
-        return object;
-      });
-      r = this.getOrderForTime(r);
-      return r;
-    },
-    //整理,匹配数据是哪天,该显示在哪
-    resetData(data, index) {
-      let obj = {};
-      if (_.get(data, '_id')) obj[`_id_day${index}`] = _.get(data, '_id');
-      obj[`subname_day${index}`] = _.get(data, 'subname', '--');
-      if (_.get(data, 'subid')) obj[`subid_day${index}`] = _.get(data, 'subid');
-      if (_.get(data, 'teaid')) obj[`teaid_day${index}`] = _.get(data, 'teaid');
-      if (_.get(data, 'teaname')) obj[`teaname_day${index}`] = _.get(data, 'teaname');
-      if (_.get(data, 'reason')) obj[`reason${index}`] = _.get(data, 'reason');
-      return obj;
-    },
-    //根据时间排序
-    getOrderForTime(data) {
-      let duplicate = JSON.parse(JSON.stringify(data));
-      duplicate = duplicate.sort((a, b) => {
-        let a_arr = a.time.split('-');
-        let b_arr = b.time.split('-');
-        let at = moment(`${moment().format('YYYY-MM-DD')} ${a_arr[0]}`).format('X');
-        let bt = moment(`${moment().format('YYYY-MM-DD')} ${b_arr[0]}`).format('X');
-        return at - bt;
-      });
-      return duplicate;
-    },
-    //整理出标头,根据日期排序
-    getX(data) {
-      let r = _.uniqBy(data, 'date').map(i => i.date);
-      r = r.sort((a, b) => moment(a).format('X') - moment(b).format('X'));
-      return r;
-    },
-    //获得时间列表
-    getY(data) {
-      let duplicate = JSON.parse(JSON.stringify(data));
-      let arr = _.uniqBy(
-        duplicate.map(i => _.pick(i, ['time'])),
-        'time'
-      );
-      arr = this.getOrderForTime(arr);
-      this.$set(
-        this,
-        `timeList`,
-        arr.map(i => i.time)
-      );
-    },
-    //课程列表
-    async getOtherList() {
-      let res = await this.getSubject();
-      if (this.$checkRes(res)) this.$set(this, `subjectList`, res.data);
-    },
-    // 消息列表
-    async getNoticeList() {
-      let { _id: classid, planid, termid } = this.classInfo;
-      let res = await this.fetch({ model: 'notice', classid: this.classInfo.id, type: '4', planid: this.classInfo.planid, termid: this.classInfo.termid });
-      if (this.$checkRes(res)) this.$set(this, `noticeList`, res.data);
-    },
-    async seachTeacher() {
-      let arr = this.oLessonList.filter(item => item.teaid != null);
-      let NewArr = _.uniqBy(arr, 'teaid');
-      var ids = NewArr.map(item => item.teaid);
-      let res = await this.lessonteafetch(ids);
-      if (this.$checkRes(res)) this.$set(this, `teacherList`, res.data);
-    },
-    //显示
-    getProp(data, prop) {
-      return _.get(data, prop);
-    },
-    // 手机号
-    getPhone(data, prop) {
-      let teacher = this.teacherList.find(f => f.id == _.get(data, prop));
-      if (teacher) return teacher.phone;
-    },
-    getNoticeResult(teaid) {
-      let word = '';
-      if (teaid) {
-        const { notified } = this.noticeList;
-        if (notified) {
-          const r = notified.find(f => f.notifiedid == teaid);
-          if (!r) word = '未收到通知';
-          else {
-            word = r.status == '0' ? '未确认' : '已确认';
-          }
-        }
-      }
-      return word;
-    },
-    wordColor(word) {
-      let type = 'danger';
-      if (word == '未确认') type = 'warning';
-      if (word == '已确认') type = 'success';
-      return type;
-    },
-  },
-  computed: {
-    ...mapState(['user', 'defaultOption']),
-    pageTitle() {
-      return `${this.$route.meta.title}`;
-    },
-  },
-  watch: {
-    classInfo: {
-      handler(val) {
-        let id = _.get(val, '_id');
-        if (id) this.search();
-      },
-      immediate: true,
-      deep: true,
-    },
-  },
-  metaInfo() {
-    return { title: this.$route.meta.title };
-  },
-};
-</script>
-
-<style lang="less" scoped></style>
+<template>
+  <div id="class-table">
+    <el-card>
+      <template #header>
+        <el-row type="flex" align="middle" justify="space-between">
+          <el-col :span="4">课程安排</el-col>
+        </el-row>
+      </template>
+      <el-table :data="lessonList" border stripe @cell-click="cellClick">
+        <el-table-column align="center" label="时间" prop="time"></el-table-column>
+        <el-table-column align="center" v-for="(i, index) in dateList" :key="index" :label="i" :prop="`subname_day${index + 1}`">
+          <template v-slot="{ row, $index }">
+            <!-- $index==2 午后课程 -->
+            <template v-if="$index === 2 && getProp(row, `day${index + 1}`) !== '0'">--</template>
+            <el-row v-else>
+              <el-col :span="24">{{ getProp(row, `subname_day${index + 1}`) }}</el-col>
+              <el-col :span="24" v-if="getProp(row, `teaname_day${index + 1}`)">
+                <p>{{ getProp(row, `teaname_day${index + 1}`) }}</p>
+                <p>{{ getPhone(row, `teaid_day${index + 1}`) }}</p>
+              </el-col>
+              <el-col :span="24">
+                <el-link :type="wordColor(getNoticeResult(getProp(row, `teaid_day${index + 1}`)))">
+                  {{ getNoticeResult(getProp(row, `teaid_day${index + 1}`)) }}
+                </el-link>
+              </el-col>
+            </el-row>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+  </div>
+</template>
+
+<script>
+var moment = require('moment');
+import _ from 'lodash';
+import dataForm from '@frame/components/form';
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: lesson } = createNamespacedHelpers('lesson');
+const { mapActions: mapUtil } = createNamespacedHelpers('util');
+const { mapActions: subject } = createNamespacedHelpers('subject');
+const { mapActions: teacher } = createNamespacedHelpers('teacher');
+const { mapActions: school } = createNamespacedHelpers('school'); //给选老师组件使用.这个页面请求完就不销毁了
+
+// 本页的组合数据,变量用x表示: _id_day[x];subname_day[x];subid_day[x];teaid_day[x];teaname_day:[x]
+export default {
+  name: 'class-table',
+  props: {
+    classInfo: { type: Object, default: () => {} },
+  },
+  components: {},
+  data: function() {
+    var that = this;
+    return {
+      oLessonList: [],
+      lessonInfo: {},
+      lessonList: [],
+      dateList: [],
+      timeList: [],
+      subjectList: [],
+      teacherList: [],
+      schoolList: [], //给选老师组件用
+      drawer: false,
+      drawerTime: false,
+      dialog: false,
+      form: {},
+      fields: [
+        { label: '日期', model: 'date', type: 'text' },
+        { label: '时间', model: 'time', type: 'text' },
+        { label: '类型', model: 'type', type: 'radio' },
+        { label: '课程安排', model: 'subid', type: 'select', display: (fields, form) => that.fieldDisplay(fields, form) },
+        { label: '活动安排', model: 'subname', type: 'select', display: (fields, form) => that.fieldDisplay(fields, form) },
+        { label: '教师', model: 'teaname', custom: true, display: (fields, form) => that.fieldDisplay(fields, form) },
+      ],
+      dayType: [{ label: '活动' }, { label: '课程' }],
+      actList: [
+        { label: '--' },
+        { label: '报到+开班仪式' },
+        { label: '午餐+休息' },
+        { label: '晚餐' },
+        { label: '团队组建' },
+        { label: '拓展交流' },
+        { label: '课程作业小组展示' },
+        { label: '课程作业' },
+        { label: '礼仪课小组面试' },
+        { label: '结业仪式' },
+      ],
+      noticeList: [],
+    };
+  },
+  created() {
+    this.getOtherList();
+  },
+  methods: {
+    ...mapUtil(['fetch']),
+    ...lesson(['query', 'create', 'update']),
+    ...subject({ getSubject: 'query' }),
+    ...teacher({ getTeacher: 'query', lessonteafetch: 'lessonteafetch' }),
+    ...school({ getSchool: 'query' }),
+    async search() {
+      await this.getNoticeList();
+      let res = await this.fetch({ model: 'lesson', classid: _.get(this.classInfo, '_id'), status: '1' });
+      if (this.$checkRes(res)) {
+        if (!_.get(res.data, 'lessons') || res.data.lessons.length <= 0) {
+          this.$message.warning('课表还未确认,如有疑问请联系中心管理员');
+          return;
+        }
+        this.$set(this, `lessonInfo`, _.omit(res.data, ['lessons']));
+        let arr = _.get(res.data, `lessons`, []);
+        this.$set(this, `oLessonList`, _.cloneDeep(arr));
+        // 查询指定班级教师信息
+        this.seachTeacher();
+        let x = this.getX(JSON.parse(JSON.stringify(arr)));
+        this.getY(JSON.parse(JSON.stringify(arr)));
+        this.$set(this, `dateList`, x);
+        arr = this.aData(arr);
+        this.$set(this, `lessonList`, arr);
+      }
+    },
+    //点击单元格事件
+    cellClick(row, column) {
+      return false;
+    },
+    //field的显示
+    fieldDisplay(f, form) {
+      if (f.model == 'teaname' || f.model == 'subid') {
+        return form.type == '课程';
+      } else return form.type == '活动';
+    },
+    //请求后整理数据方法
+    aData(data) {
+      let duplicate = JSON.parse(JSON.stringify(data));
+      //按时间分组
+      duplicate = _.flatten(_.toPairs(_.groupBy(data, 'time'))).filter(f => _.isArray(f));
+      let r = duplicate.map(i => {
+        //按日期排序
+        let aa = i.sort((a, b) => moment(a.date).format('X') - moment(b.date).format('X'));
+        //组合数据:{time,day1,id_day1,subid_day1}
+        let object = { time: _.get(i[0], 'time') };
+        aa.map(a => {
+          let index = this.dateList.findIndex(f => f == a.date);
+          if (index >= 0) {
+            index = index + 1;
+          }
+          let obj = this.resetData(a, index);
+          object = { ...object, ...obj };
+        });
+        return object;
+      });
+      r = this.getOrderForTime(r);
+      return r;
+    },
+    //整理,匹配数据是哪天,该显示在哪
+    resetData(data, index) {
+      let obj = {};
+      if (_.get(data, '_id')) obj[`_id_day${index}`] = _.get(data, '_id');
+      obj[`subname_day${index}`] = _.get(data, 'subname', '--');
+      if (_.get(data, 'subid')) obj[`subid_day${index}`] = _.get(data, 'subid');
+      if (_.get(data, 'teaid')) obj[`teaid_day${index}`] = _.get(data, 'teaid');
+      if (_.get(data, 'teaname')) obj[`teaname_day${index}`] = _.get(data, 'teaname');
+      if (_.get(data, 'reason')) obj[`reason${index}`] = _.get(data, 'reason');
+      if (_.get(data, 'day')) obj[`day${index}`] = _.get(data, 'day');
+      return obj;
+    },
+    //根据时间排序
+    getOrderForTime(data) {
+      let duplicate = JSON.parse(JSON.stringify(data));
+      duplicate = duplicate.sort((a, b) => {
+        let a_arr = a.time.split('-');
+        let b_arr = b.time.split('-');
+        let at = moment(`${moment().format('YYYY-MM-DD')} ${a_arr[0]}`).format('X');
+        let bt = moment(`${moment().format('YYYY-MM-DD')} ${b_arr[0]}`).format('X');
+        return at - bt;
+      });
+      return duplicate;
+    },
+    //整理出标头,根据日期排序
+    getX(data) {
+      let r = _.uniqBy(data, 'date').map(i => i.date);
+      r = r.sort((a, b) => moment(a).format('X') - moment(b).format('X'));
+      return r;
+    },
+    //获得时间列表
+    getY(data) {
+      let duplicate = JSON.parse(JSON.stringify(data));
+      let arr = _.uniqBy(
+        duplicate.map(i => _.pick(i, ['time'])),
+        'time'
+      );
+      arr = this.getOrderForTime(arr);
+      this.$set(
+        this,
+        `timeList`,
+        arr.map(i => i.time)
+      );
+    },
+    //课程列表
+    async getOtherList() {
+      let res = await this.getSubject();
+      if (this.$checkRes(res)) this.$set(this, `subjectList`, res.data);
+    },
+    // 消息列表
+    async getNoticeList() {
+      let { _id: classid, planid, termid } = this.classInfo;
+      let res = await this.fetch({ model: 'notice', classid: this.classInfo.id, type: '4', planid: this.classInfo.planid, termid: this.classInfo.termid });
+      if (this.$checkRes(res)) this.$set(this, `noticeList`, res.data);
+    },
+    async seachTeacher() {
+      let arr = this.oLessonList.filter(item => item.teaid != null);
+      let NewArr = _.uniqBy(arr, 'teaid');
+      var ids = NewArr.map(item => item.teaid);
+      let res = await this.lessonteafetch(ids);
+      if (this.$checkRes(res)) this.$set(this, `teacherList`, res.data);
+    },
+    //显示
+    getProp(data, prop) {
+      return _.get(data, prop);
+    },
+    // 手机号
+    getPhone(data, prop) {
+      let teacher = this.teacherList.find(f => f.id == _.get(data, prop));
+      if (teacher) return teacher.phone;
+    },
+    getNoticeResult(teaid) {
+      let word = '';
+      if (teaid) {
+        const { notified } = this.noticeList;
+        if (notified) {
+          const r = notified.find(f => f.notifiedid == teaid);
+          if (!r) word = '未收到通知';
+          else {
+            word = r.status == '0' ? '未确认' : '已确认';
+          }
+        }
+      }
+      return word;
+    },
+    wordColor(word) {
+      let type = 'danger';
+      if (word == '未确认') type = 'warning';
+      if (word == '已确认') type = 'success';
+      return type;
+    },
+  },
+  computed: {
+    ...mapState(['user', 'defaultOption']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  watch: {
+    classInfo: {
+      handler(val) {
+        let id = _.get(val, '_id');
+        if (id) this.search();
+      },
+      immediate: true,
+      deep: true,
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped></style>