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

<!--  -->
<template>
  <div>
    <save-form
      :inline="true"
      save-key="commentManager-vipEvaluateList"
      class="searchForm"
      :model="searchForm"
      @submit="search"
      @reset="onReSet"
      ref="searchForm"
    >
      <!-- 状态 指导老师 活动方案-->
      <el-form-item>
        <el-input
          v-model.trim="searchForm.search"
            @keyup.enter.native="
              (e) => {
                e.target.blur();
                $refs.searchForm.save();
                search();
              }
            "
          clearable
          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 selects.branchs"
            :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> -->
        <remote-search
          :commit="'setTeachers'"
          aria-placeholder="请选择指导老师"
          v-model="searchForm.teacherId"
          :isForzenWithQueryCondition="true"
        />
      </el-form-item>
      <el-form-item>
        <el-select
          v-model.trim="searchForm.eduTeacherId"
          filterable
          clearable
          placeholder="乐团主管"
        >
          <el-option
            v-for="(item, index) in selects.roles.EDUCATION"
            :key="index"
            :value="item.userId"
            :label="item.userName"
          >
            <span style="float: left">{{ item.userName }}</span>
            <span style="float: right; color: #8492a6; font-size: 13px">{{
              item.userId
            }}</span>
          </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.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-date-picker
          :clearable="false"
          v-model="searchForm.month"
          type="daterange"
          value-format="yyyy-MM-dd"
          format="yyyy-MM-dd"
          :picker-options="{
            firstDayOfWeek: 1,
          }"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
          ></el-date-picker
        >
      </el-form-item>
      <br />
      <el-form-item>
        <el-button native-type="submit" type="danger">搜索</el-button>
        <el-button native-type="reset" type="primary">重置</el-button>
        <el-button
          type="primary"
          v-if="tableData.length > 0"
          v-permission="'export/courseReviews'"
          @click="netWorkExport"
          >导出</el-button
        >
      </el-form-item>
    </save-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="分部名称">
          <template slot-scope="scope">
            <copy-text>
              {{ scope.row.organName }}
            </copy-text>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="id" label="课程编号">
          <template slot-scope="scope">
            <copy-text>
              {{ scope.row.id }}
            </copy-text>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="courseName" label="课程名称">
          <template slot-scope="scope">
            <copy-text>
              {{ scope.row.courseName }}
            </copy-text>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="courseName" label="上课日期">
          <template slot-scope="scope">
            <div>
              {{ scope.row.classDate | formatTimer }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="subjectName"
          label="声部"
        ></el-table-column>
        <el-table-column align="center" prop="teacherName" label="指导老师">
          <template slot-scope="scope">
            <copy-text>{{ scope.row.teacherName }}</copy-text>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="eduTeacherName" label="乐团主管">
          <template slot-scope="scope">
            <copy-text>{{ scope.row.eduTeacherName }}</copy-text>
          </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.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
        save-key="commentManager-vipEvaluateList"
        sync
        :total.sync="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, getTenantId } from "@/utils/auth";
import qs from "qs";
import axios from "axios";
import pagination from "@/components/Pagination/index";
import { practiceGroupType } from "@/utils/searchArray";
import {
  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元素）
  async mounted() {
    this.$store.dispatch("setBranchs");
    await this.$store.dispatch("setOrganRole");
    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);
      }

      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(),
          tenantId: getTenantId()
        },
        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 + "网管评价.xls"; //下载文件的名字
            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;
    }
  }
}

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