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> -->

    <descriptions :column="4" class="descriptions" v-if="subject.length >= 4">
      <descriptions-item
        :label="item.key"
        :key="index"
        v-for="(item, index) in subject"
      >
        <div
          v-if="item.value"
          class="col-value"
          @click="getSoundInfo(item.courseScheduleId)"
        >
          {{ item.value }}人
        </div>
      </descriptions-item>
    </descriptions>
    <div
      v-else-if="subject.length > 0 && subject.length < 4"
      class="descriptions"
    >
      <div
        class="descriptionItem"
        :style="`width:${100 / 4}%`"
        :key="index"
        v-for="(item, index) in subject"
      >
        <div class="descriptionItemLabel">
          {{ item.key }}
        </div>
        <div
          class="descriptionItemConcat col-value"
          @click="getSoundInfo(item.courseScheduleId)"
        >
          {{ item.value }}人
        </div>
      </div>
    </div>
    <div v-else>
      <empty desc="暂无声部" />
    </div>
    <p class="title">年级分布</p>
    <!-- <el-divider class="divider"></el-divider> -->
    <descriptions :column="4" class="descriptions" v-if="grade.length >= 4">
      <descriptions-item
        :label="gradeMap[item.key]"
        :key="index"
        v-for="(item, index) in grade"
      >
        <div
          v-if="item.value"
          class="col-value"
          @click="getGradeInfo(String(item.key))"
        >
          {{ item.value || 0 }}人
        </div>
      </descriptions-item>
    </descriptions>
    <div v-else-if="grade.length > 0 && grade.length < 4" class="descriptions">
      <div
        class="descriptionItem"
        :style="`width:${100 / 4}%`"
        :key="index"
        v-for="(item, index) in grade"
      >
        <div class="descriptionItemLabel">
          {{ gradeMap[item.key] }}
        </div>
        <div
          class="descriptionItemConcat col-value"
          @click="getGradeInfo(String(item.key))"
        >
          {{ item.value || 0 }}人
        </div>
      </div>
    </div>
    <div v-else>
      <empty desc="暂无年纪" />
    </div>
    <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"
            ></i>
          </el-tooltip>
        </div>
      </template>
    </el-alert>
    <el-form
      :inline="true"
      class="searchForm"
      save-key="teamTrainTimer"
      ref="searchForm"
      :model.sync="teacherForm"
    >
      <el-form-item label="班级类型">
        <el-select v-model.trim="teacherForm.type" clearable filterable>
          <el-option
            v-for="(item, index) in musicClassTypeList"
            :key="index"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <descriptions :column="4" class="descriptions" v-if="teacherFilter.length >= 4">
      <descriptions-item
        :label="item.key"
        :key="index"
        v-for="(item, index) in teacherFilter"
      >
        <div v-if="item.value">
          <overflow-text :text="item.value || ''"></overflow-text>
        </div>
      </descriptions-item>
    </descriptions>
    <div
      v-else-if="teacherFilter.length > 0 && teacherFilter.length < 4"
      class="descriptions"
    >
      <div
        class="descriptionItem"
        :style="`width:${100 / 4}%`"
        :key="index"
        v-for="(item, index) in teacherFilter"
      >
        <div class="descriptionItemLabel">
          <overflow-text :text="item.key || ''"></overflow-text>
        </div>
        <div class="descriptionItemConcat">
          <overflow-text :text="item.value || ''"></overflow-text>
        </div>
      </div>
    </div>
    <div v-else>
      <empty desc="暂无师资安排" />
    </div>
    <!-- <el-row class="row">
      <el-col
        class="col"
        :span="6"
        v-for="(item, index) in teacher"
        :key="index"
      >
        <span class="col-title">
          <overflow-text :text="item.key || ''"></overflow-text>:</span
        >
        <span>:</span>
      </el-col>
    </el-row> -->
    <!-- studentMaster -->
    <el-dialog
      width="1200px"
      title="学员列表"
      :visible.sync="studentVisible"
      v-if="studentVisible"
    >
      <studentMaster
        v-if="studentVisible"
        :searchForm="searchForm"
        :soundList="soundList"
        :gradeList="gradeList"
        :gradeMap="gradeMap"
      />
      <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 { findSound } from "@/api/buildTeam";
import { musicClassTypeList } from "@/utils/searchArray";
export default {
  props: ["graduateNum"],
  components: { studentMaster },
  data() {
    return {
      grade: [],
      subject: [],
      teacher: [],
      studentVisible: false,
      searchForm: {
        search: "",
        subjectId: "",
        currentGradeNum: "",
        isBuyInstrumentsInsurance: "",
      },
      teamid: this.$route.query.id,
      soundList: [],
      gradeList: [],
      teacherForm:{
        type: "",
      },

      musicClassTypeList,
    };
  },
  async mounted() {
    findSound({ musicGroupId: this.teamid }).then((res) => {
      if (res.code == 200) {
        this.soundList = res.data;
      }
    });

    try {
      const res = await getStudentAndTeacher({
        musicGroupId: this.$route.query.id,
      });
      this.grade = res.data.grade;
      this.gradeMap = res.data.gradeMap;
      this.gradeList = [];
      for (let i in this.gradeMap) {
        this.gradeList.push({
          value: i,
          label: this.gradeMap[i],
        });
      }
      this.subject = res.data.subject;

      // if (this.subject.length > 0 && this.subject.length < 4) {
      //   // 样式丑 至少对齐一排
      //   for (let i = 0; i <= 4 - this.subject.length; i++) {
      //     this.subject.push({ key: null, value: null });
      //   }
      // }
      this.teacher = res.data.teacher;
      // if (this.teacher.length > 0 && this.teacher.length < 4) {
      //   // 样式丑 至少对齐一排
      //   for (let i = 0; i <= 4 - this.subject.length; i++) {
      //     this.teacher.push({ key: null, value: null });
      //   }
      // }
    } catch (e) {
      console.log(e);
    }
  },
  methods: {
    getSoundInfo(val) {
      this.$set(this, "searchForm", {
        search: "",
        subjectId: val,
        currentGradeNum: "",
        isBuyInstrumentsInsurance: "",
      });
      // this.searchForm = {
      //   search: "",
      //   subjectId: val,
      //   currentGradeNum: "",
      //   isBuyInstrumentsInsurance: "",
      // };

      this.studentVisible = true;
    },
    getGradeInfo(val) {
      this.$set(this, "searchForm", {
        search: "",
        subjectId: "",
        currentGradeNum: val,
        isBuyInstrumentsInsurance: "",
      });
      // this.searchForm = {
      //   search: "",
      //   subjectId: "",
      //   currentGradeNum: val,
      //   isBuyInstrumentsInsurance: "",
      // };
      this.studentVisible = true;
    },
  },
  computed: {
    graduateNums() {
      return this.graduateNum;
    },
    teacherFilter() {
      let arr = [];
      if (this.teacherForm.type) {
        arr = this.teacher.filter((item) => {
          return item.type == this.teacherForm.type;
        });
      } else {
        arr = this.teacher;
      }
      return arr;
    },
  },
};
</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;
  }
}
.descriptions {
  margin-bottom: 30px;
  display: flex;
  flex-direction: row;
  .col-value {
    color: #14928a;
    cursor: pointer;
  }
  .descriptionItem {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    height: 46px;
    line-height: 46px;
    border-top: 1px solid #e8e8e8;
    border-bottom: 1px solid #e8e8e8;
    &:first-child {
      border-left: 1px solid #e8e8e8;
    }
    .descriptionItemLabel {
      border-right: 1px solid #e8e8e8;
      background-color: #fafafa;
      color: rgba(0, 0, 0, 0.85);
      font-weight: 400;
      font-size: 14px;
      width: 50%;
      text-align: center;
    }
    .descriptionItemConcat {
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      border-right: 1px solid #e8e8e8;
      font-size: 14px;
      line-height: 1.5;
      padding: 12px 16px;
      color: rgba(0, 0, 0, 0.65);
      display: table-cell;
      width: 50%;
    }
    .col-value {
      color: #14928a;
      cursor: pointer;
    }
  }
}
</style>