dy-admin-manager/src/views/teamDetail/componentCourse/infoMsg.vue

<template>
  <div>
    <el-collapse v-model="activeName"
                 v-if="dataList.length > 0"
                 accordion>
      <el-collapse-item v-for="
                 (item,index)
                 in
                 dataList"
                        :key="index"
                        :title="getTitle(item)"
                        :name="index">
                        <template slot="title">
                          <header class="header">
                            {{item.operatorName}} <span>在</span> {{item.createTime}} <span>修改了</span>
                          </header>
                        </template>
                        <infoMsgContent
                          :before="item.previousCourseSchedule"
                          :after="item.currentCourseSchedule"
                        />
      </el-collapse-item>
    </el-collapse>
    <div v-if="dataList.length <= 0"
         class="noBox">
      <p>暂无调整记录</p>
    </div>
  </div>
</template>
<script>
import { diffTimerFormMinute } from '@/utils/date'
import dayjs from 'dayjs';
import {
  queryCourseAdjustDetail,
} from "@/api/buildTeam";
import { teachMode } from '@/constant'
import infoMsgContent from './infoMsgContent'
export default {
  props: ['courseScheduleId'],
  data () {
    return {
      activeName: 0,
      dataList: [],
    }
  },
  components: { infoMsgContent },
  mounted () {
    queryCourseAdjustDetail({ courseScheduleId: this.courseScheduleId }).then(res => {
      if (res.code == 200) {
        if (res.data) {
          this.dataList = res.data.map(item => {
            const parsecurrent = JSON.parse(item.currentCourseSchedule)
            const currentCourseSchedule = this.filterKeys(parsecurrent)
            const previousCourseSchedule = this.filterKeys(JSON.parse(item.previousCourseSchedule))
            return {
              ...item,
              operatorName: parsecurrent.operatorName,
              currentCourseSchedule,
              previousCourseSchedule,
            }
          })
        }
      }
    })
  },
  methods: {
    getRealTime(time) {
      const parsenum = parseInt(time)
      return ('' + time).indexOf(' ') > -1 ? time : parsenum
    },
    filterKeys(item) {
      const teachingTeacherNames = (item.teachingTeacherNames || '').split(',').sort((a, b) => (a || '').localeCompare((b || ''), 'zh'))
      return {
        name: item.name,
        actualTeacherName: item.actualTeacherName,
        teachingTeacherNames: teachingTeacherNames.join(','),
        startClassTime: this.$helpers.dayjs(this.getRealTime(item.startClassTime)).format('YYYY-MM-DD HH:mm'),
        // classDate: item.classDate,
        // endClassTime: item.endClassTime,
        teachMode: teachMode[item.teachMode],
        schoolName: item.schoolName,
        timers: this.getTimers(item),
      }
    },
    getTitle (item) {
      return item.operatorName + ' 在 ' + item.createTime + ' 修改了'
    },
    getTimers (item) {
      return diffTimerFormMinute(dayjs(item.classDate).format('YYYY-MM-DD'), dayjs(this.getRealTime(item.startClassTime)).format('HH:mm'), dayjs(this.getRealTime(item.endClassTime)).format('HH:mm'))
    }
  },
  computed: {

  }
}
</script>
<style lang="scss" scoped>
.noBox {
  min-height: 200px;
  p {
    text-align: center;
    margin-top: 120px;
  }
}
.header{
  >span{
    color: rgba($color: #000000, $alpha: .6);
    display: inline-block;
    margin: 0 6px;
  }
}
</style>