dy-admin-manager/src/views/teamDetail/components/modals/classList-item.vue

<template>
  <div>
    <!--     :closable="false" -->
    <el-alert
      :title="'班级' + (index + 1)"
      type="info"
      @close="deteleClass"
      :closable="index > 0"
      class="alert"
    >
    </el-alert>
    <el-form-item
      label="选择班级"
      style="padding-left: 20px"
      :rules="[{ required: true, message: '请选择班级', trigger: 'change' }]"
      :prop="'classList.' + index + '.classId'"
    >
      <el-select
        v-model="item.classId"
        style="margin-right: 20px"
        clearable
        @change="changeValue"
      >
        <el-option
          :label="item.name"
          :value="item.id"
          v-for="(item, index) in classList"
          :key="index"
          :disabled='item.disabled'
        ></el-option>
      </el-select>
      <el-button
        type="text"
        @click="lookStudentList"
        :disabled="!item.classId"
        class="studentTitle"
        >学员列表>></el-button
      >
    </el-form-item>

    <div class="infomsg">
      <div class="left" v-if="!isNoCourse">
        剩余课时:
        <div v-for="(val, key) in item.courseList" :key="key">
          <p style="margin-right: 5px">
            {{ key | courseTypeFormat }}:<span>{{ val }}</span
            >节
          </p>
        </div>
      </div>
      <div class="left" v-else>
        <div>暂无剩余课时</div>
      </div>
      <div class="right">
        已选学员:
        <p>
          <span>{{ item.studentList.length }}</span
          >人
        </p>
      </div>
    </div>

    <el-dialog
      title="学员列表"
      width="700px"
      :visible.sync="studentListModalVisible"
      append-to-body
      destroy-on-close
    >
      <viewStudentList
        :list="studentList"
        :chioseList="item.studentList"
        v-if="studentListModalVisible"
        :showOk="true"
        :isChiose="true"
        @close="closeStudentView"
      />
    </el-dialog>
  </div>
</template>
<script>
import { getClassAllStudent } from "@/api/studentManager";
import { getClassGroupSubCourseNum } from "@/api/buildTeam";
import viewStudentList from "./view-student-list";
import paymentCycle from "@/views/resetTeaming/modals/payment-cycle";
import extraClass from "../../../resetTeaming/modals/extra-class";
export default {
  props: ["item", "index", "classList", "form"],
  components: { viewStudentList, paymentCycle, extraClass },
  data() {
    return {
      studentList: [],
      studentListModalVisible: false,
      organizationCourseUnitPriceSettingsByType: [],
      eclass: [],
      isNoCourse: false,
      activeClassList: [],
    };
  },
  mounted() {
    this.activeClassList =this.classList
  },
  methods: {
    async changeValue(val) {
      this.item.studentList = [];
      if (val) {
        try {
          let reset = await getClassGroupSubCourseNum({ classGroupId: val });
          this.setClassCourse(reset.data);
          // 成功之后
          this.$emit("filterClassList", val);
        } catch {}
      } else {
        this.setClassCourse({});
        this.$emit("filterClassList", null);
      }
    },
    deteleClass() {
      this.$emit("deteleClass", this.index);
    },

    lookStudentList() {
      if (!this.item.classId) {
        this.$message.error("请先选择班级,再查询学生列表");
        return;
      }
      // 查学生
      getClassAllStudent({ classGroupId: this.item.classId }).then((res) => {
        if (res.code == 200) {
          this.studentList = res.data.map((item) => {
            return {
              userId: item.userId,
              nickName: item.name,
              gender: item.gender,
              phone: item.parentsPhone,
              subjectNames: item.subjectName,
            };
          });
          this.studentListModalVisible = true;
        }
      });
    },
    closeStudentView(list) {
      this.item.studentList = list;
      this.studentListModalVisible = false;
    },
    setClassCourse(data) {
      console.log(data);
      if (Object.keys(data).length > 0) {
        this.item.courseList = data;
        this.isNoCourse = false;
      } else {
        this.isNoCourse = true;
      }
    },
    priceChange() {},
    syncAllMoney() {},
  },
};
</script>
<style lang="scss" scoped>
.alert {
  margin-bottom: 10px;
}
.infomsg {
  background-color: #f5faf9;
  height: 34px;
  line-height: 34px;
  padding: 0 25px;
  color: #333;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 20px;
  div {
    display: flex;
    flex-direction: row;
    p {
      color: #1a1a1a;
      font-weight: bold;
      span {
        color: #3b7f7a;
      }
    }
  }
}
.studentTitle {
  width: 120px !important;
  text-align: right;
  display: inline-block;
  // color: #409eff;
}
/deep/.dialog-footer {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}
</style>