dy-admin-manager/src/views/teamDetail/teamClassList.vue

<!--  -->
<template>
  <div class="m-container">
    <h2>
      <div class="squrt"></div>
      班级管理
      <filter-search v-if="permission('/teamCLassList/abnormal')" :keys="['lessThenThreeHighOnline']"
        @reload="reloadSearch" :moreKeys="['organId']" />
    </h2>
    <div class="m-core">
      <save-form ref="searchForm" :inline="true" :model="searchForm" @submit="search" @reset="onReSet">
        <el-form-item prop="search">
          <el-input v-model.trim="searchForm.search" clearable @keyup.enter.native="(e) => {
              e.target.blur();
              $refs.searchForm.save();
              search();
            }
            " placeholder="乐团&班级编号名称"></el-input>
        </el-form-item>
        <el-form-item prop="organIdList">
          <select-all class="multiple" filterable multiple v-model.trim="searchForm.organIdList" clearable
            placeholder="请选择分部">
            <el-option v-for="(item, index) in selects.branchs" :key="index" :label="item.name"
              :value="item.id"></el-option>
          </select-all>
        </el-form-item>
        <el-form-item>
          <el-select v-model.trim="searchForm.groupType" @change="() => {
              searchForm.type = '';
            }
            " filterable placeholder="课程组类型">
            <el-option v-for="(item, index) in courseListType" :key="index" :value="item.value"
              :label="item.label"></el-option>
          </el-select>
        </el-form-item>
        <!-- musicClassTypeList -->
        <el-form-item prop="type">
          <el-select v-model.trim="searchForm.type" filterable clearable :disabled="searchForm.groupType != 'MUSIC'"
            placeholder="班级类型">
            <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-item prop="mainTeacherUserId">
          <remote-search :commit="'setTeachers'" v-model="searchForm.mainTeacherUserId" :demissionFlag="true"
            :isForzenWithQueryCondition="true" />
        </el-form-item>
        <el-form-item>
          <el-button native-type="submit" type="primary">搜索</el-button>
          <el-button native-type="reset" type="danger">重置</el-button>
          <el-button type="primary" v-permission="'export/classGroup'" @click="exportClassGroup">导出</el-button>
        </el-form-item>
      </save-form>
      <div class="tableWrap">
        <el-table style="width: 100%" :header-cell-style="{ background: '#EDEEF0', color: '#444' }" :data="tableList">
          <el-table-column align="center" prop="musicGroupId" label="课程组编号">
            <template slot-scope="scope">
              <copy-text>{{ scope.row.musicGroupId }}</copy-text>
            </template>
          </el-table-column>
          <!-- <el-table-column align="center" prop="musicGroupId" label="课程编号">
            <template slot-scope="scope">
              <copy-text>{{ scope.row.id }}</copy-text>
            </template>
          </el-table-column> -->
          <el-table-column align="center" prop="musicGroupName" label="课程组名称"></el-table-column>
          <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="name" label="班级名称"></el-table-column>
          <el-table-column align="center" prop="type" label="班级类型">
            <template slot-scope="scope">
              <div>{{ scope.row.type | classType }}</div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="studentNum" label="当前班级人数">
            <template slot-scope="scope">
              <div>{{ scope.row.studentNum }}人</div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop label="主教老师">
            <template slot-scope="scope">
              <div v-if="scope.row.classGroupTeacherMapperList">
                <p v-for="(item, index) in scope.row.classGroupTeacherMapperList" v-if="item.teacherRole == 'BISHOP'"
                  :key="index">
                  {{ item.userName }}
                </p>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="助教老师">
            <template slot-scope="scope">
              <div v-if="scope.row.classGroupTeacherMapperList">
                <p v-for="(item, index) in scope.row.classGroupTeacherMapperList" v-if="item.teacherRole == 'TEACHING'"
                  :key="index">
                  {{ item.userName }}
                </p>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="已上课时">
            <template slot-scope="scope">
              <div>{{ scope.row.currentClassTimes }}</div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="总课数">
            <template slot-scope="scope">
              <div>{{ scope.row.totalClassTimes }}</div>
            </template>
          </el-table-column>
          <el-table-column fixed="right" width="160px" align="center" label="操作">
            <template slot-scope="scope">
              <el-button type="text" v-if="permission('classGroup/update')
                " @click="resetClassName(scope.row, true)">班级名称调整</el-button>
              <el-button type="text" v-if="permission('classGroup/update')
                " @click="resetClassName(scope.row, false)">备注</el-button>
              <el-button type="text" @click="addCompound(scope.row)" v-if="scope.row.type != 'MUSIC_NETWORK' &&
                scope.row.groupType == 'MUSIC' &&
                !isAddCom(scope.row) &&
                permission('classGroup/spanGroupMergeClassSplitClassAffirm')
                ">添加合班</el-button>
              <el-button type="text" v-if="isAddCom(scope.row) &&
                permission('classGroup/spanGroupMergeClassSplitClassAffirm')
                " @click="cancleCompound(scope.row)">取消合班</el-button>
              <el-button type="text" v-if="permission('classGroup/delSingle?page=teamCLassList') &&
                scope.row.groupType === 'MUSIC' &&
                (scope.row.studentNum == '0' ||
                  scope.row.totalClassTimes == '0')
                " @click="removeClass(scope)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination sync :total.sync="rules.total" :page.sync="rules.page" :limit.sync="rules.limit"
          :page-sizes="rules.page_size" @pagination="getList" />
      </div>
    </div>
    <classCompound :compoundList="compoundList" v-if="permission('classGroup/spanGroupMergeClassSplitClassAffirm') &&
      compoundList.length > 0
      " @clearCom="clearCom" @getList="getList" @cancleCompound="cancleCompound" />
    <!-- 修改班级名称 -->
    <el-dialog :title="!resetName ? '班级名称调整' : '备注'" width="500px" :visible.sync="classNameVisible" v-if="classNameVisible">
      <changeClassName :classGroupId="activeClass" :detail="classDetail" @submited="submitedResetClassName"
        :resetName="resetName" @close="classNameVisible = false" />
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
import { getToken } from "@/utils/auth";
import pagination from "@/components/Pagination/index";
import load from "@/utils/loading";
import { courseListType } from "@/utils/searchArray";
import { musicClassTypeList } from "@/utils/searchArray";
import {
  getClassGroupPage,
  removeSingleClass,
  getAgreement,
} from "@/api/buildTeam";
import { permission } from "@/utils/directivePage";
import classCompound from "./componentClass/classCompound";
import { Export } from "@/utils/downLoadFile";
import changeClassName from "@/views/teamDetail/components/modals/class-resetclass-name.vue";
import { resetClassName } from '@/views/teamDetail/api'
import qs from "qs";
export default {
  components: { pagination, classCompound, changeClassName },
  data() {
    return {
      searchForm: {
        search: null,
        organIdList: [],
        type: "",
        groupType: "MUSIC",
        mainTeacherUserId: ''
      },
      courseListType: courseListType,
      musicClassTypeList,
      tableList: [],
      compoundList: [],
      hightCount: 0,
      hightOnlineCount: 0,
      rules: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50], // 选择限制显示条数
      },
      classNameVisible: false,
      classDetail: null,
      activeClass: '',
      resetName: false
    };
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() { },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    const { query, params } = this.$route;
    if (params.search) {
      this.searchForm.search = params.search;
    }
    if (query.type) {
      this.searchForm.type = query.type;
    }
    if (query.organId) {
      this.searchForm.organIdList = [Number(query.organId)];
    }
    // 获取分部
    this.$store.dispatch("setBranchs");
    this.init();
  },
  methods: {
    async getAgreement() {
      try {
        const res = await getAgreement();
        if (!res.data) {
          this.$bus.$emit("showguide", ["agreement"]);
        }
      } catch (e) { }
    },
    reloadSearch() {
      this.rules.page = 1;
      this.getList();
    },
    init() {
      this.getList();
      this.getAgreement();
    },
    async getList() {
      try {
        let { organIdList, ...result } = this.searchForm;
        let obj = {
          ...result,
          lessThenThreeHighOnline: this.$route.query.lessThenThreeHighOnline,
          organIds: this.searchForm.organIdList.join(","),
          page: this.rules.page,
          rows: this.rules.limit,
        };
        const res = await getClassGroupPage(obj);
        this.rules.total = res.data.total;
        this.tableList = res.data.rows;
      } catch (err) {
        console.log(err);
      }
    },
    search() {
      this.rules.page = 1;
      this.getList();
    },
    onReSet() {
      this.$refs.searchForm.resetFields();
      this.searchForm.groupType = "MUSIC";
      this.search();
    },
    async removeClass(scope) {
      try {
        await this.$confirm("是否确定删除该班级?", "提示", {
          type: "warning",
        });
        await removeSingleClass({ classGroupId: scope.row.id });
        this.$message.success("删除成功");
        this.getList();
      } catch (error) { }
    },
    addCompound(row) {
      //  scope.row.type != 'HIGH_ONLINE' &&scope.row.type != 'HIGH'&&
      this.hightOnlineCount = 0;
      this.hightCount = 0;
      this.compoundList.push(row);
      this.compoundList = [...new Set(this.compoundList)];

      this.compoundList.forEach((classes) => {
        if (classes.type == "HIGH") {
          this.hightCount++;
        }
        if (classes.type == "HIGH_ONLINE") {
          this.hightOnlineCount++;
        }
      });
      if (
        this.hightOnlineCount &&
        this.hightOnlineCount != this.compoundList.length
      ) {
        this.$message.error("线上基础技能班仅能和线上基础技能班合并");
        // this.hightOnlineCount = 0;
        // this.hightCount = 0;
        // this.compoundList = [];
        this.compoundList.splice(this.compoundList.length - 1, 1);
      }
      if (this.hightCount && this.hightCount != this.compoundList.length) {
        this.$message.error("基础技能班仅能和基础技能班合并");
        this.compoundList.splice(this.compoundList.length - 1, 1);
        // this.hightOnlineCount = 0;
        // this.hightCount = 0;
        // this.compoundList = [];
      }
    },
    isAddCom(row) {
      let flag = false;
      this.compoundList.forEach((com) => {
        if (com.id == row.id) {
          flag = true;
        }
      });
      return flag;
    },
    cancleCompound(row) {
      let indexNum = null;
      this.compoundList.forEach((com, index) => {
        if (com.id == row.id) {
          indexNum = index;
          if (row.type == "HIGH") this.hightCount--;
          if (row.type == "HIGH_ONLINE") this.hightOnlineCount--;
        }
      });
      if (indexNum + "") {
        this.compoundList.splice(indexNum, 1);
      }
    },
    clearCom() {
      this.compoundList = [];
      this.hightOnlineCount = 0;
      this.hightCount = 0;
    },
    permission(str, parent) {
      return permission(str, parent);
    },
    exportClassGroup() {
      let params = this.searchForm;
      Export(
        this,
        {
          method: "post",
          url: "/api-web/export/classGroup",
          params: qs.stringify({
            ...params,
            organIds: this.searchForm.organIdList.join(","),
            lessThenThreeHighOnline: this.$route.query.lessThenThreeHighOnline,
          }),
        },
        "是否确认导出报表？"
      );
    },
    resetClassName(row, flag) {
      this.classDetail = row;
      this.resetName = !flag;
      this.classNameVisible = true;
    },
    async submitedResetClassName(data) {
      const obj = { ...data };
      resetClassName(obj).then((res) => {
        if (res.code == 200) {
          this.$message.success("修改成功");
          this.classNameVisible = false;
          this.getList();
        }
      });
    },
  },
};
</script>
<style lang='scss' scoped></style>