dy-admin-manager/src/views/evaluateManager/networkList.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.isFree" clearable>
          <el-option label="付费" value="0"></el-option>
          <el-option label="免费" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select placeholder="学员评分" v-model="searchForm.studentReview" clearable>
          <el-option v-for="index in 5" :label="index+'星'" :value="index" :key="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select placeholder="提交作业" v-model="searchForm.hasHandHomework" 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.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-date-picker
          :clearable="false"
          v-model="searchForm.month"
          type="datetimerange"
          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" prop="id" label="收费类型">
          <template slot-scope="scope">
            <div>{{scope.row.buyMonths>0?'付费':'免费'}}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="学员评分">
          <template slot-scope="scope">
            <div>{{ scope.row.studentReview | studentReviewFilter}}</div>
          </template>
        </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.handHomework?'是':'否'}}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="courseReview" label="教务评价"></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="网管课评价详情" :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 class="rightCell">
              <p>学员评价</p>
              <div class="chioseWrap">
                <el-rate v-model="courseScheduleComplaints[0].score" disabled text-color="#ff9900"></el-rate>
              </div>
            </div>
            <el-input type="textarea" v-model="courseScheduleComplaints[0].reason" disabled></el-input>
          </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 {
  getTeacher,
  getEmployeeOrgan,
  findEducationUsers,
  getPracticeGroup,
  getReviewInfo,
  updateReviewInfo
} 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,
        month: []
      },
      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.search = this.searchForm.search;
      if (this.searchForm.month.length > 0) {
        obj.startTime = this.searchForm.month[0];
        obj.endTime = this.searchForm.month[1];
      }

      obj.page = this.rules.page;
      obj.rows = this.rules.limit;
      getPracticeGroup(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
      };
      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;
      if (this.searchForm.month.length > 0) {
        obj.startTime = this.searchForm.month[0];
        obj.endTime = this.searchForm.month[1];
      }
      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>