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

<template>
  <div class="m-container">
      <el-page-header @back="onCancel"
                      content="评价详情"></el-page-header>
    <div class="m-core">
      <div class="left">
        <el-table
          style="width: 100%"
          :header-cell-style="{background:'#EDEEF0',color:'#444'}"
          :data="tableData"
        >
          <el-table-column align="center" prop="month" label="时间"></el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <div>
                <el-button type="text" @click="getReviews(scope.row.id)">查看</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>
      <div class="right" v-if="isLook"> 
        <el-card class="box-card">
          评价详情
          <div class="cardWrap">
            <div class="cardWrapleft">
              <p class="title">课程信息</p>
              <el-divider></el-divider>
              <p class="row">评价时间：{{commitWrap.time | dateForMinFormat}}</p>
              <p class="row">老师: {{commitWrap.teacher}}</p>
              <p class="row">声部:{{ commitWrap.soundName }}</p>
              <p class="row">训练次数:{{ commitWrap.count }}</p>
              <p class="row">训练时长:{{ commitWrap.timers }}</p>
              <div  v-if="version == 2">
                <p class="title">授课内容</p>
              <el-divider></el-divider>
              <p class="row">乐理：{{ musicTheory }}</p>
              <p class="row">曲子: {{ song}}</p>
              <p class="row">教材: {{teachingMaterial }}</p>
              </div>
              
            </div>
            <div class="cardWrapright">
              <p class="title">课程点评</p>
              <el-divider></el-divider>
              <div v-if="version == 1">
                <p class="row" v-for="(item,index) in askList" :key="index">{{subjectJsonOld[index+1].title+' : '+item}}</p>
              </div>
              <div v-if="version == 2">
                <p class="row" v-for="(item,index) in askList"  :key="index">{{item}}</p>
              </div>

              <!-- <div class="textWrap"></div> -->
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>
<script>
import pagination from "@/components/Pagination/index";
import { getGroupReviews, getReviewsInfo } from "@/api/buildTeam";
import { subjectJsonOld, subjectJson } from "@/utils/questionJson";
export default {
  components: { pagination },
  data() {
    return {
      tableData: [],
      id: null,
      isLook: false,
      rules: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50] // 选择限制显示条数
      },
      subjectJsonOld: subjectJsonOld,
      subjectJson: subjectJson,
      askList: [],
      commitWrap: {
        time: "",
        teacher: "",
        soundName: "",
        count: "",
        timers: ""
      },
      version: null,
      musicTheory: null,
      teachingMaterial: null,
      song: null,
        Fsearch: null,
      Frules: null
    };
  },
  activated() {
    this.init();
  },
  created() {

    this.init();
  },
  methods: {
    init() {
      this.id = this.$route.query.id;
      this.evaluateId = this.$route.query.evaluateId;
        if (this.$route.query.search) {
        this.Fsearch = this.$route.query.search;
      }
      if (this.$route.query.rules) {
        this.Frules = this.$route.query.rules
      }
      // 获取列表
      this.getList();
      // 获取评论详情
      if (this.evaluateId > 0) {
        this.getReviews(this.evaluateId);
      }
    },
    getList() {
      getGroupReviews({ groupId: this.id }).then(res => {
        if (res.code == 200) {
          // this.tableData = res.data.rows;
          // this.rules.total = res.data.total;
          this.tableData = res.data;
        }
      });
    },
    getReviews(id) {
      getReviewsInfo({ id }).then(res => {
        if (res.code == 200) {
          this.isLook = true;
          this.version = res.data.version;
          if (res.data.version == 1) {
            this.askList = res.data.item.split(",").map((item, index) => {
              return this.subjectJsonOld[index + 1][item];
            });
          } else if (res.data.version == 2) {
            // this.askList = res.data.item.split(",").map((item, index) => {
            // return this.subjectJson[index + 1][item];
            // });
            let some = {
              one: 1,
              two: 2,
              three: 3,
              four: 4,
              five: 5,
              six: 6,
              seven: 7,
              eight: 8
            };
            this.item = JSON.parse(res.data.item);
            // console.log(this.item);
            this.askList = []
            for (let key in this.item) {
              switch (key) {
                case "one": {
                  this.askList.push(this.subjectJson[1].title+' : '+this.subjectJson[1][this.item[key]])
                  break;
                }
                case "two": {
                      this.askList.push(this.subjectJson[2].title+' : '+this.subjectJson[2][this.item[key]])
                  break;
                }
                case "three": {
                      this.askList.push(this.subjectJson[3].title+' : '+this.subjectJson[3][this.item[key]])
                  break;
                }
                case "four": {
                      this.askList.push(this.subjectJson[4].title+' : '+this.subjectJson[4][this.item[key]])
                  break;
                }
                case "five": {
                      this.askList.push(this.subjectJson[5].title+' : '+this.subjectJson[5][this.item[key]])
                  break;
                }
                case "six": {
                  if(this.item['six']){
                      this.askList.push(this.subjectJson[6].title+' : '+this.subjectJson[6][this.item[key]])
                  }
                    
                  break;
                }
                case "seven":
                  {     if(this.item['seven']){
                    this.askList.push(this.subjectJson[7].title+' : '+this.subjectJson[7][this.item[key]])
                  }
                        
                        break;
                  }
                  
                case "eight": {
                  if(this.item['eight']){
                     this.askList.push(this.subjectJson[8].title+' : '+this.subjectJson[8][this.item[key]])
                  }
                     
                  break;
                }
              }
           
              // this.askList.push(this.subjectJson[])
            }
              this.askList.sort((a,b)=>{
                return parseInt(a)-parseInt(b)
              })
              // console.log( this.askList)

            this.musicTheory = JSON.parse(res.data.musicTheory)
              .map(item => {
                return item.str;
              })
              .join(",");

            this.teachingMaterial = JSON.parse(res.data.teachingMaterial)
              .map(item => {
                return item.str;
              })
              .join(",");
            this.song = res.data.song;
          }

          this.commitWrap = {
            time: res.data.createTime,
            teacher: res.data.teacher&&res.data.teacher.name,
            soundName: res.data.subjectName,
            count: res.data.times,
            timers: res.data.totalMinutes
          };
        }
      });
    },
    onCancel(){
             this.$router.push({ path: '/operateManager/commentManager', query: { search: this.Fsearch, rules: this.Frules,activeIndex:'1' } })
    }
  }
};
</script>
<style lang="scss" scoped>
.m-core {
  display: flex;
  flex-direction: row;
  .left {
    width: 550px;
  }
  .right {
    margin-left: 30px;
    min-width: 600px;
    .box-card {
      width: 100%;
      min-height: 500px;
      .cardWrap {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
        margin-top: 30px;
        .row {
          line-height: 30px;
          font-size: 14px;
        }
        .title {
          text-align: center;
        }
        .cardWrapleft {
          width: 48%;
        }
        .cardWrapright {
          width: 48%;
          .textWrap {
            margin-top: 20px;
            width: 100%;
            border: 1px solid #999;
            min-height: 100px;
          }
        }
      }
    }
  }
}
</style>