dy-admin-manager/src/views/resetTeaming/components/archicesComponents/studentAndTeacher.vue

<template>
  <div>
    <el-alert title="" :closable="false" class="alert marginBtm22" type="info">
      <template slot="title">
        <div class="shapeWrap">
          <span class="shape"></span>
          <p style="margin-right:5px">学员分布</p>
          <span v-if="graduateNums>0" style="color: red; font-weight: bold"
            >该乐团当前有{{graduateNums}}名学员在毕业年级</span
          >
        </div>
      </template>
    </el-alert>
    <p class="title">声部分布</p>
    <el-divider class="divider"></el-divider>
    <div>
      <el-row class="row">
        <el-col
          class="col"
          :span="6"
          v-for="(item, index) in subject"
          :key="index"
        >
          <span class="col-title">{{ item.key }}:</span>
          <span class="col-value" @click="getSoundInfo(item.courseScheduleId)"
            >{{ item.value }}人</span
          >
        </el-col>
      </el-row>
    </div>
    <p class="title">年级分布</p>
    <el-divider class="divider"></el-divider>
    <el-row class="row">
      <el-col class="col" :span="6" v-for="(item, index) in grade" :key="index">
        <span class="col-title">{{ gradeMap[item.key ]}}:</span>
        <span class="col-value" @click="getGradeInfo(gradeMap[item.key ])"
          >{{ item.value }}人</span
        >
      </el-col>
    </el-row>

    <el-alert :closable="false" class="alert marginBtm22" type="info">
      <template slot="title">
        <div class="shapeWrap">
          <span class="shape"></span>
          <p style="margin-right:5px">师资安排</p>
          <el-tooltip placement="top" popper-class="mTooltip">
            <div slot="content">师资安排中第一位为主教老师</div>
            <i
              class="el-icon-question micon el-tooltip"
              style="font-size: 18px; color: #f56c6c"
              v-permission="'export/teacherSalary'"
            ></i>
          </el-tooltip>
        </div>
      </template>
    </el-alert>
    <el-row class="row">
      <el-col
        class="col"
        :span="6"
        v-for="(item, index) in teacher"
        :key="index"
      >
        <span class="col-title">{{ item.key }}:</span>
        <span>{{ item.value }}</span>
      </el-col>
    </el-row>
    <!-- studentMaster -->
    <el-dialog
      width="1200px"
      title="学员列表"
      :visible.sync="studentVisible"
      v-if="studentVisible"
    >
      <studentMaster
        :searchForm="searchForm"
        :soundList="soundList"
        :gradeList="gradeList"
      />
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="studentVisible = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getStudentAndTeacher } from "./api";
import studentMaster from "./modals/studentMaster";
import { getMusicGroupGradeList, findSound } from "@/api/buildTeam";
export default {
  props:['graduateNum'],
  components: { studentMaster },
  data() {
    return {
      grade: [],
      subject: [],
      teacher: [],
      studentVisible: false,
      searchForm: {
        search: "",
        subjectId: "",
        currentGrade: "",
        oweFlag: "",
      },
      teamid: this.$route.query.id,
      soundList: [],
      gradeList: [],
    };
  },
  async mounted() {
    findSound({ musicGroupId: this.teamid }).then((res) => {
      if (res.code == 200) {
        this.soundList = res.data;
      }
    });
    getMusicGroupGradeList({ musicGroupId: this.teamid }).then((res) => {
      let result = res.data;
      if (res.code == 200 && result) {
        for (let i in result) {
          this.gradeList.push({
            value: i,
            label: result[i],
          });
        }
      }
    });
    try {
      const res = await getStudentAndTeacher({
        musicGroupId: this.$route.query.id,
      });
      this.grade = res.data.grade;
      this.gradeMap = res.data.gradeMap
      this.subject = res.data.subject;
      this.teacher = res.data.teacher;
    } catch (e) {
      console.log(e);
    }
  },
  methods: {
    getSoundInfo(val) {
      this.searchForm = {
        search: "",
        subjectId: val,
        currentGrade: "",
        oweFlag: "",
      };
      this.studentVisible = true;
    },
    getGradeInfo(val) {
      this.searchForm = {
        search: "",
        subjectId: "",
        currentGrade: val,
        oweFlag: "",
      };
      this.studentVisible = true;
    },
  },
  computed: {
    graduateNums(){
      return this.graduateNum
    }
  },
};
</script>
<style lang="scss" scoped="scoped">
.title {
  padding: 8px 16px;
}
.divider {
  margin-top: 0 !important;
}
.marginBtm22 {
  margin-bottom: 22px;
}
.row {
  padding: 8px 16px;
  margin-bottom: 30px;
  .col {
    margin-bottom: 20px;
    .col-title {
      display: inline-block;
      width: 150px;
      text-align: right;
    }
    .col-value {
      color: #14928a;
      cursor: pointer;
    }
  }
}
.shapeWrap {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  .shape {
    position: relative;
    top: -1px;
    display: block;
    margin-right: 10px;
    height: 14px;
    width: 4px;
    background-color: #14928a;
    z-index: 500;
  }
}
</style>