dy-admin-manager/src/views/evaluateManager/vipEvaluateList.vue

<!--  -->
<template>
  <div class="m-core">
    <el-form :inline="true"
             class="searchForm"
             v-model.trim="searchForm">
      <!-- 状态 指导老师 活动方案-->
      <el-form-item>
        <el-input v-model.trim="searchForm.search"
                  @keyup.enter.native="search"
                  placeholder="请输入课程组名称 ID"></el-input>
      </el-form-item>
      <el-form-item>
        <el-select placeholder="请选择分部"
                   v-model="searchForm.organId"
                   clearable>
          <el-option v-for="(item,index) in organList"
                     :label="item.name"
                     :value="item.id"
                     :key="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select placeholder="指导老师"
                   v-model="searchForm.teacherId"
                   clearable
                   filterable>
          <el-option v-for="(item,index) in teacherList"
                     :label="item.realName"
                     :value="item.id"
                     :key="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select v-model.trim="searchForm.eduTeacherId"
                   filterable
                   clearable
                   placeholder="教务老师">
          <el-option v-for="(item,index) in educationList"
                     :key="index"
                     :value="item.userId"
                     :label="item.userName"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select placeholder="老师评价"
                   v-model="searchForm.hasReview"
                   clearable>
          <el-option label="评价"
                     value="1"></el-option>
          <el-option label="未评价"
                     value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select placeholder="教务评价"
                   v-model="searchForm.courseReview"
                   clearable>
          <el-option label="好"
                     value="好"></el-option>
          <el-option label="中"
                     value="中"></el-option>
          <el-option label="差"
                     value="差"></el-option>
        </el-select>
      </el-form-item>
      <!-- <el-form-item>
        <el-select placeholder="是否到课"
                   v-model="searchForm.hasArrived"
                   clearable>
          <el-option label="到课"
                     value="1"></el-option>
          <el-option label="未到"
                     value="0"></el-option>
        </el-select>
      </el-form-item> -->
      <!-- homeWorkReplied -->
      <el-form-item>
        <el-select placeholder="布置作业"
                   v-model="searchForm.assignHomework"
                   clearable>
          <el-option label="是"
                     value="1"></el-option>
          <el-option label="否"
                     value="0"></el-option>
        </el-select>
      </el-form-item>
      <!-- <el-form-item>
        <el-select placeholder="回复作业"
                   v-model="searchForm.homeWorkReplied"
                   clearable>
          <el-option label="是"
                     value="1"></el-option>
          <el-option label="否"
                     value="0"></el-option>
        </el-select>
      </el-form-item> -->
      <el-form-item>
        <el-date-picker :clearable="false"
                        v-model="searchForm.month"
                        type="daterange"
                        value-format="yyyy-MM-dd"
                        format="yyyy-MM-dd"
                        range-separator="-"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
          ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button @click="search"
                   type="danger">搜索</el-button>
        <el-button @click="onReSet"
                   type="primary">重置</el-button>
        <el-button type="primary"
                   v-if="tableData.length > 0"
                   v-permission="'export/courseReviews'"
                   @click="netWorkExport">导出</el-button>
      </el-form-item>
    </el-form>
    <div class="tableWrap">
      <el-table style="width: 100%"
                :header-cell-style="{background:'#EDEEF0',color:'#444'}"
                :data="tableData">
        <el-table-column align="center"
                         prop="organName"
                         label="分部名称"></el-table-column>
        <el-table-column align="center"
                         prop="id"
                         label="课程编号"></el-table-column>
        <el-table-column align="center"
                         prop="courseName"
                         label="课程名称"></el-table-column>
        <el-table-column align="center"
                         prop="subjectName"
                         label="声部"></el-table-column>
        <el-table-column align="center"
                         prop="teacherName"
                         label="指导老师"></el-table-column>
        <el-table-column align="center"
                         prop="eduTeacherName"
                         label="教务老师"></el-table-column>
        <el-table-column align="center"
                         label="老师评价">
          <template slot-scope="scope">
            <div>{{scope.row.reviewId>0?'评价':'未评价'}}</div>
          </template>
        </el-table-column>
        <el-table-column align="center"
                         label="布置作业">
          <template slot-scope="scope">
            <div>{{scope.row.assignHomework?'是':'否'}}</div>
          </template>
        </el-table-column>
        <!-- <el-table-column align="center"
                         label="是否到课">
          <template slot-scope="scope">
            <div>{{scope.row.attendanceId>0?'到课':'未到'}}</div>
          </template>
        </el-table-column> -->
        <el-table-column align="center"
                         label="操作">
          <!-- v-permission="'evaluateList/look'" -->
          <template slot-scope="scope">
            <div>
              <el-button type="text"
                         v-if="scope.row.reviewId"
                         @click="lookDetail(scope.row)">查看</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <pagination :total="rules.total"
                  :page.sync="rules.page"
                  :limit.sync="rules.limit"
                  :page-sizes="rules.page_size"
                  @pagination="getList" />
    </div>
    <el-dialog title="vip评价详情"
               :visible.sync="netWorkVisible"
               width="800px">
      <div class="wrap">
        <div class="commitLeft">
          <div class="leftCell"
               v-if="teacherClassHeadInfo">
            <p>课程班名称</p>
            <p>{{teacherClassHeadInfo.classGroupName}}</p>
          </div>
          <div class="leftCell"
               v-if="teacherClassHeadInfo">
            <p>上课时间</p>
            <p>{{teacherClassHeadInfo.classDate+' '+teacherClassHeadInfo.startClassTime+'-'+teacherClassHeadInfo.endClassTime}}</p>
          </div>
          <div class="leftCell"
               v-if="teacherClassHeadInfo">
            <p>乐器</p>
            <p>{{teacherClassHeadInfo.subjectNames}}</p>
          </div>
          <div class="leftCell"
               v-if="teacherClassHeadInfo">
            <p>指导老师</p>
            <p>{{teacherClassHeadInfo.bishopTeacher}}</p>
          </div>
          <div class="leftCell"
               v-if="teacherClassHeadInfo">
            <p>学员</p>
            <p>{{teacherClassHeadInfo.studentNames}}</p>
          </div>
          <div class="leftCell"
               v-if="courseScheduleReview">
            <p>回访日期</p>
            <p>{{ courseScheduleReview.createTime.substring(0,10) }}</p>
          </div>
          <div class="leftCell"
               v-if="courseScheduleReview">
            <p>是否双向沟通</p>
            <p>{{courseScheduleReview.hasLiaison?'是':'否'}}</p>
          </div>
          <div class="leftCell"
               v-if="courseScheduleReview">
            <p>是否提交作业</p>
            <p>{{courseScheduleReview.handHomework?'是':'否'}}</p>
          </div>
          <div class="leftCell"
               v-if="courseScheduleReview">
            <p>教务老师</p>
            <p>{{courseScheduleReview.eduTeacherName}}</p>
          </div>
          <div class="leftCell">
            <p>课程评价</p>
            <div class="chioseWrap">
              <el-tag :type="mychiose =='好'?'danger':'info'"
                      @click="courseScheduleReview.courseReview='好'">好</el-tag>
              <el-tag :type="mychiose == '中'?'danger':'info'"
                      @click="courseScheduleReview.courseReview='中'">中</el-tag>
              <el-tag :type="mychiose == '差'?'danger':'info'"
                      @click="courseScheduleReview.courseReview='差'">差</el-tag>
            </div>
          </div>
        </div>
        <div class="commitRight">
          <div v-if="courseScheduleComplaints">
            <div v-for="(item,index) in   courseScheduleComplaints"
                 :key="index">
              <div class="rightCell">
                <p>{{item.username}}</p>
                <div class="chioseWrap">
                  <el-rate v-model="item.score"
                           disabled
                           text-color="#ff9900"></el-rate>
                </div>
              </div>
              <el-input type="textarea"
                        v-model="item.reason"
                        disabled></el-input>
            </div>
          </div>
          <div v-if="courseScheduleReview">
            <div class="rightCell"
                 v-if="courseScheduleReview">
              <p>教材内容</p>
            </div>
            <el-input type="textarea"
                      disabled
                      v-model="teachingMaterial"></el-input>
            <div class="leftCell"
                 v-if="courseScheduleReview">
              <p>曲目</p>
              <p>{{ courseScheduleReview.song }}</p>
            </div>
            <div class="rightCell"
                 v-if="courseScheduleReview">
              <p>发音</p>
              <div class="chioseWrap">
                <el-rate v-model="courseScheduleReview.pronunciation"
                         disabled
                         text-color="#ff9900"></el-rate>
              </div>
            </div>
            <div class="rightCell"
                 v-if="courseScheduleReview">
              <p>节奏</p>
              <div class="chioseWrap">
                <el-rate v-model="courseScheduleReview.tempo"
                         disabled
                         text-color="#ff9900"></el-rate>
              </div>
            </div>
            <div class="rightCell"
                 v-if="courseScheduleReview">
              <p>乐理</p>
              <div class="chioseWrap">
                <el-rate v-model="courseScheduleReview.musicTheory"
                         disabled
                         text-color="#ff9900"></el-rate>
              </div>
            </div>
            <div class="rightCell">
              <p>评价备注</p>
            </div>
            <el-input type="textarea"
                      disabled
                      v-model="courseScheduleReview.memo"
                      v-if="courseScheduleReview"></el-input>
          </div>
        </div>
      </div>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="netWorkVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="submitNetwork">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getToken } from "@/utils/auth";
import qs from "qs";
import axios from "axios";
import pagination from "@/components/Pagination/index";
import { practiceGroupType } from "@/utils/searchArray";
import {
  getTeacher,
  getEmployeeOrgan,
  findEducationUsers,
  getReviewInfo,
  updateReviewInfo,
  getVipGroup
} from "@/api/buildTeam";
export default {
  components: { pagination },
  data () {
    return {
      netWorkVisible: false,
      searchForm: {
        organId: null,
        teacherId: null,
        eduTeacherId: null,
        isFree: null,
        studentReview: null,
        hasHandHomework: null,
        hasReview: null,
        courseReview: null,
        hasArrived: null,
        homeWorkReplied: null,
        assignHomework: null,
        month: [],
        practiceGroupType: null
      },
      practiceGroupType: practiceGroupType,
      organList: [],
      teacherList: [],
      educationList: [],
      tableData: [],
      rules: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50] // 选择限制显示条数
      },
      value: null,
      teacherClassHeadInfo: null,
      courseScheduleReview: null,
      courseScheduleComplaints: null,
      activeId: null
    };
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created () { },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
    this.init();
  },
  activated () {
    this.init();
  },
  methods: {
    init () {
      // 获取默认月份
      if (this.searchForm.month.length <= 0) {
        var now = new Date();

        var startDate = new Date(
          Date.UTC(now.getFullYear(), now.getMonth(), now.getDate())
        )
          .toISOString()
          .slice(0, 10);
        //  + " 00:00:00"  + " 23:59:59"
        var endDate = new Date(
          Date.UTC(now.getFullYear(), now.getMonth(), now.getDate())
        )
          .toISOString()
          .slice(0, 10);
        this.searchForm.month = [];
        this.searchForm.month.push(startDate);
        this.searchForm.month.push(endDate);
        console.log(this.searchForm.month);
      }

      // 获取指导老师
      getTeacher({}).then(res => {
        if (res.code == 200) {
          this.teacherList = res.data;
        }
      });
      // 获取分部
      getEmployeeOrgan().then(res => {
        if (res.code == 200) {
          this.organList = res.data;
        }
      });
      // 获取教务
      findEducationUsers().then(res => {
        if (res.code == 200) {
          this.educationList = res.data;
        }
      });

      this.getList();
    },
    getList () {
      let obj = {};
      obj.organId = this.searchForm.organId || null;
      obj.teacherId = this.searchForm.teacherId || null;
      obj.eduTeacherId = this.searchForm.eduTeacherId || null;
      obj.isFree = this.searchForm.isFree || null;
      obj.studentReview = this.searchForm.studentReview || null;
      obj.hasHandHomework = this.searchForm.hasHandHomework || null;
      obj.hasReview = this.searchForm.hasReview || null;
      obj.courseReview = this.searchForm.courseReview || null;
      obj.hasArrived = this.searchForm.hasArrived || null;
      obj.homeWorkReplied = this.searchForm.homeWorkReplied || null;
      obj.assignHomework = this.searchForm.assignHomework || null;
      obj.search = this.searchForm.search;
      obj.practiceGroupType = this.searchForm.practiceGroupType || null;
      if (this.searchForm.month && this.searchForm.month.length > 0) {
        obj.startTime = this.searchForm.month[0];
        obj.endTime = this.searchForm.month[1];
      } else {
        this.$message.error('请选择时间范围')
        return
      }

      obj.page = this.rules.page;
      obj.rows = this.rules.limit;
      getVipGroup(obj).then(res => {
        if (res.code == 200) {
          this.tableData = res.data.rows;
          this.rules.total = res.data.total;
        }
      });
    },
    lookDetail (row) {
      this.activeId = row.reviewId;
      getReviewInfo({ id: this.activeId }).then(res => {
        if (res.code == 200) {
          this.teacherClassHeadInfo = res.data.teacherClassHeadInfo;
          this.courseScheduleReview = res.data.courseScheduleReview;
          this.courseScheduleComplaints = res.data.courseScheduleComplaints;

          // 教务评价详情
          //    eduCourseReviewGetReviewInfo({id}).then(res=>{
          //        if(res.code == 200){

          //        }
          //    })
          this.netWorkVisible = true;
        }
      });
    },
    submitNetwork () {
      if (!this.courseScheduleReview.courseReview) {
        this.$message.error("请评价课程");
        return;
      }
      updateReviewInfo({
        id: this.activeId,
        courseReview: this.courseScheduleReview.courseReview
      }).then(res => {
        if (res.code == 200) {
          this.$message.success("评价成功");
          this.netWorkVisible = false;
          this.getList();
        }
      });
    },
    search () {
      this.rules.page = 1;
      this.getList();
    },
    onReSet () {
      this.rules.page = 1;
      this.searchForm = {
        organId: null,
        teacherId: null,
        educationalTeacherId: null,
        isFree: null,
        studentReview: null,
        hasHandHomework: null,
        hasReview: null,
        courseReview: null,
        month: null,
        hasArrived: null,
        homeWorkReplied: null,
        assignHomework: null,
        practiceGroupType: null
      };
      var now = new Date();

      var startDate = new Date(
        Date.UTC(now.getFullYear(), now.getMonth(), now.getDate())
      )
        .toISOString()
        .slice(0, 10);
      //  + " 00:00:00"  + " 23:59:59"
      var endDate = new Date(
        Date.UTC(now.getFullYear(), now.getMonth(), now.getDate())
      )
        .toISOString()
        .slice(0, 10);
      this.searchForm.month = [];
      this.searchForm.month.push(startDate);
      this.searchForm.month.push(endDate);
      this.getList();
    },
    netWorkExport () {
      let url = "/api-web/export/courseReviews";
      let obj = {};
      this.searchForm.organId ? (obj.organId = this.searchForm.organId) : null;
      this.searchForm.teacherId
        ? (obj.teacherId = this.searchForm.teacherId)
        : null;
      this.searchForm.eduTeacherId
        ? (obj.eduTeacherId = this.searchForm.eduTeacherId)
        : null;
      this.searchForm.isFree ? (obj.isFree = this.searchForm.isFree) : null;
      this.searchForm.studentReview
        ? (obj.studentReview = this.searchForm.studentReview)
        : null;
      this.searchForm.hasHandHomework
        ? (obj.hasHandHomework = this.searchForm.hasHandHomework)
        : null;
      this.searchForm.hasReview
        ? (obj.hasReview = this.searchForm.hasReview)
        : null;
      this.searchForm.courseReview
        ? (obj.courseReview = this.searchForm.courseReview)
        : null;
      this.searchForm.search ? (obj.search = this.searchForm.search) : null;
      this.searchForm.hasArrived
        ? (obj.hasArrived = this.searchForm.hasArrived)
        : null;
      this.searchForm.homeWorkReplied
        ? (obj.homeWorkReplied = this.searchForm.homeWorkReplied)
        : null;
      this.searchForm.assignHomework ? obj.assignHomework = this.searchForm.assignHomework : null
      if (this.searchForm.month && this.searchForm.month.length > 0) {
        obj.startTime = this.searchForm.month[0];
        obj.endTime = this.searchForm.month[1];
      } else {
        this.$message.error('请选择时间范围')
        return
      }
      this.searchForm.practiceGroupType ? obj.practiceGroupType = this.searchForm.practiceGroupType : null;
      const options = {
        method: "POST",
        headers: {
          Authorization: getToken()
        },
        data: qs.stringify(obj),
        url,
        responseType: "blob"
      };
      this.$confirm("您确定导出评价列表", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          axios(options).then(res => {
            let blob = new Blob([res.data], {
              // type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'
              type: "application/vnd.ms-excel;charset=utf-8"
              //word文档为application/msword,pdf文档为application/pdf,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8
            });
            let objectUrl = URL.createObjectURL(blob);
            let link = document.createElement("a");
            let nowTime = new Date();
            let ymd =
              nowTime.getFullYear() +
              "" +
              (nowTime.getMonth() + 1) +
              "" +
              nowTime.getDate() +
              "" +
              nowTime.getHours() +
              "" +
              nowTime.getMinutes();
            let fname = +ymd + "网管评价"; //下载文件的名字
            link.href = objectUrl;
            link.setAttribute("download", fname);
            document.body.appendChild(link);
            link.click();
          });
        })
        .catch(() => { });
    }
  },
  filters: {
    studentReviewFilter (val) {
      let arr = ["未评价", "1星", "2星", "3星", "4星", "5星"];
      return arr[val];
    }
  },
  computed: {
    teachingMaterial () {
      if (
        this.courseScheduleReview &&
        this.courseScheduleReview.teachingMaterial
      ) {
        return this.courseScheduleReview.teachingMaterial;
      } else {
        return "";
      }
    },
    mychiose () {
      if (this.courseScheduleReview && this.courseScheduleReview.courseReview) {
        return this.courseScheduleReview.courseReview;
      } else {
        return "";
      }
    }
  }
};
</script>
<style lang='scss' scoped>
.wrap {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  .leftCell {
    width: 300px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    line-height: 50px;
    // border-bottom: 1px solid #ccc;
  }
  .rightCell {
    width: 300px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    line-height: 50px;
    p {
      margin-right: 30px;
    }
  }
}

/deep/.el-tag {
  cursor: pointer;
}
</style>