mteacher/src/views/afterClassEvaluate/detail.vue

<template>
  <div class="detail">
    <item :isComment="false" :dataInfo="dataInfo" />

    <van-cell-group class="section">
      <p class="work title">
        <van-icon :name="icon_content" size="22" style="padding-right: .06rem;" />
        教学内容
      </p>
      <van-field
        rows="1"
        type="textarea"
        :disabled="isReview || this.groupType === 'MUSIC'"
        v-model="memo"
        placeholder="请输入本课程教学内容"
      />
    </van-cell-group>

    <van-cell-group class="section" v-if="enableAssignHomework && enableAssignHomework == 1 || tenantId != 1">
      <van-cell
        :is-link="!isAssignHomework && !isReview"
        :value="isAssignHomework ? '已布置' : '未布置'"
        @click="onWork()"
        title-class="work"
      >
        <template #title>
          <van-icon :name="icon_class" size="22" style="padding-right: .06rem;" />
          课后训练
        </template>
      </van-cell>
    </van-cell-group>

    <van-cell-group class="section" :style="{ marginBottom: isReview ? '.2rem' : '1rem' }">
      <p class="work title">
        <van-icon :name="icon_nice" size="22" style="padding-right: .06rem;" />
        学员是否达到学习标准
      </p>
      <div style="padding: .08rem 0;">
        <template v-if="studentList && studentList.length >0">
          <van-cell center title-class="titleStyle" v-for="(item, index) in studentList" :key="index" :border="false">
            <template #icon>
              <img class="student-icon" v-if="item.avatar" :src="item.avatar" alt="" />
              <img class="student-icon" v-else src="../../assets/images/icon_student.png" alt="" />
            </template>
            <template #title>
              <span>{{ item.username }}</span>
              {{ item.subjectName }}
            </template>
            <template #default>
              <div v-if="isReview">
                <van-button type="primary" size="small" style="min-width: 64px" disabled round :plain="item.qualifiedFlag !== 1">{{ item.qualifiedFlag == 1 ? '达标' : '不达标' }}</van-button>
              </div>
              <div v-else>
                <van-button type="primary" size="small" style="min-width: 64px" @click="item.qualifiedFlag = 1" round :plain="item.qualifiedFlag !== 1">达标</van-button>
                <van-button type="primary" size="small" style="min-width: 64px" @click="item.qualifiedFlag = 0" round :plain="item.qualifiedFlag !== 0">不达标</van-button>
              </div>
            </template>
          </van-cell>
        </template>
        <MEmpty v-else msg="暂无学员" />
      </div>
    </van-cell-group>

    <div class="button-group" v-if="!isReview">
      <van-button type="primary" round size="large" @click="submitReview">
        提交评价
      </van-button>
    </div>
  </div>
</template>

<script>
import { getReviewInfo, studyStandardList, checkeIsAssignHomework, courseReviewAdd, getCurrentCourseDetail } from './api'
import Item from "./modal/item";
import MEmpty from '@/components/MEmpty';
export default {
  name: "afterClassEvaluateDetail",
  components: { Item, MEmpty },
  data() {
    const query = this.$route.query;
    return {
      id: query.id,
      isInside: query.isInside,
      evaluateFlag: query.evaluateFlag,
      groupType: query.groupType,
      reviewId: query.reviewId,
      isAssignHomework: 0, // 是否有布置作业,0 => 否 1 => 是
      enableAssignHomework: 0, // 是否要布置作业  0 否  1 是
      memberStatus: 0, // 是否有学生或者乐团是会员
      tenantId: null, // 当前机构编号
      icon_content: require('@/views/afterClassEvaluate/images/icon_content.png'),
      icon_class: require('@/views/afterClassEvaluate/images/icon_class.png'),
      icon_nice: require('@/views/afterClassEvaluate/images/icon_nice.png'),
      dataInfo: {},
      studentList: [],
      memo: null,
    };
  },
  computed: {
    isReview() {
      return !!(this.evaluateFlag && this.evaluateFlag > 0);
    },
  },
  async mounted() {
    this.tenantId = sessionStorage.getItem('tenantId') || null
    try {
      // 获取是否有布置作业
      const homeWork = await checkeIsAssignHomework({ courseScheduleId: this.id });
      let tempData = homeWork.data || {}
      this.isAssignHomework = tempData.isAssignHomework;
      this.enableAssignHomework = tempData.enableAssignHomework;
      const memberNum = tempData.memberNum;
      const courseStudentNum = tempData.courseStudentNum;
      if(courseStudentNum == memberNum) {
        this.memberStatus = 1
      }

      const detail = await getCurrentCourseDetail({ courseID: this.id })
      const resultDetail = detail.data
      let tempMemo = resultDetail.coursePlan
      this.dataInfo = {
        classStartTime: resultDetail.startClassTime,
        classEndTime: resultDetail.endClassTime,
        courseType: resultDetail.courseType,
        courseName: resultDetail.courseScheduleName,
        teachMode: resultDetail.teachMode,
        schoolName: resultDetail.address,
        courseScheduleId: this.id
      }

      if(this.isReview && this.reviewId && this.reviewId > 0) {
        const res = await getReviewInfo({ id: this.reviewId });
        const result = res.data
        tempMemo = result.courseScheduleReview.memo
      }
      this.memo = tempMemo
      if(this.groupType === 'MUSIC' || this.isReview) {
        this.memo = this.memo || '该课程未设置教学内容'
      }
      //  else {
      //   const res = await getCourseInfoHead({
      //     courseId: this.id
      //   });
      //   const result = res.data
      //   params = {
      //     classStartTime: result.classDate + ' ' + result.startClassTime + ':00',
      //     classEndTime: result.endClassTime + ':00',
      //     courseType: result.courseScheduleType,
      //     courseName: result.classGroupName,
      //     teachMode: result.teachMode,
      //     schoolName: null,
      //     courseScheduleId: this.id
      //   }
      // }
      // this.dataInfo = params

      // 获取学生列表
      const studyList = await studyStandardList({ courseScheduleId: this.id, page: 1, rows: 200 })
      const resultStudy = studyList.data
      this.studentList = resultStudy.rows || []
      if(!this.isReview) {
        this.studentList.forEach(item => {
          item.qualifiedFlag = 1
        })
      }
    } catch {
      //
    }
  },
  methods: {
    async submitReview() {
      // 不是大雅机构则作业非必填
      if(!this.isAssignHomework && this.enableAssignHomework && this.tenantId == 1) {
        this.$toast('请布置课后训练')
        return
      }

      try {
        let params = []
        this.studentList.forEach(item => {
          params.push({
            userId: item.userId,
            qualifiedFlag: item.qualifiedFlag
          })
        })
        let obj = {
          memo: this.memo, // 备注
          courseScheduleId: this.id,
          studentStandardDtos: params
        };
        await courseReviewAdd(obj)
        this.$toast("提交成功");
        setTimeout(() => {
          //  && this.tenantId == 1
          if (this.isInside) {
            this.$router.push({ path: "/afterClassEvaluate" });
          } else {
            this.onAppBack();
          }
        }, 1000);
      } catch {
        //
      }
    },
    onWork() {
      if(this.isAssignHomework == 1 || this.isReview) {
        return
      }
      this.$router.push({
        path: "/arrangeWork",
        query: {
          id: this.courseId,
          isNewJoin: 1, // 新的入口
          memberNum: this.memberStatus,
          classGroupName: this.dataInfo.courseName,
          ...this.$route.query
        },
      });
    },
  }
};
</script>

<style lang="less" scoped>
@import url("../../assets/commonLess/variable.less");
.detail {
  min-height: 100vh;
  overflow: hidden;
  position: relative;
}
/deep/.van-button--plain {
  background: #fff;
  color: @mColor;
}
/deep/.van-button+.van-button {
  margin-left: 0.1rem;
}
.section {
  margin: 0.1rem 0.12rem 0;
  border-radius: .1rem;
  overflow: hidden;
  .work {
    display: flex;
    align-items: center;
    font-size:16px;
    color: #333;
  }
  .title {
    padding: 12px 16px 0;
  }

  .student-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
  }
  .titleStyle {
    font-size: 16px;
    color: #666666;
    span {
      color: #1A1A1A;
      padding: 0 .1rem;
    }
  }
}

.button-group {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.2rem .16rem 0.15rem;
  background: #f3f4f8;
  border: 0.01rem solid #f3f4f8;
  .van-button--primary {
    font-size: 0.18rem;
    height: 0.48rem;
    line-height: 0.48rem;
  }
}
/deep/.mempty .icon {
  margin-top: 0;
}
/deep/.van-button--disabled {
  opacity: 0.8;
}
/deep/.van-field__control:disabled {
  color: #a1a1a1 !important;
  -webkit-text-fill-color: #a1a1a1 !important;
}
</style>