dy-admin-manager/src/views/studentManager/components/teamAndcourse.vue

<template>
  <div>
    <div class="tabTopWrap">
      <el-table :data="musicGroupInfo" :header-cell-style="{background:'#EDEEF0',color:'#444'}">
        <el-table-column align="center" prop="musicGroupId" label="乐团编号"></el-table-column>
        <el-table-column align="center" prop="joinMusicGroupDate" label="入团时间">
          <template slot-scope="scope">{{ scope.row.joinMusicGroupDate | dateForMinFormat }}</template>
        </el-table-column>
        <el-table-column align="center" prop="musicGroupName" label="乐团名称"></el-table-column>
        <el-table-column align="center" label="乐团状态">
          <template slot-scope="scope">{{ scope.row.musicGroupStatus | musicGroupType }}</template>
        </el-table-column>
        <el-table-column align="center" prop="subjectName" label="专业"></el-table-column>
        <el-table-column align="center" prop label="乐器来源">
          <template slot-scope="scope">{{ scope.row.kitPurchaseMethod | instrumentType }}</template>
        </el-table-column>
        <el-table-column align="center" label="学员状态">
          <template slot-scope="scope">{{ scope.row.userMusicGroupStatus | musicGroupStudentType }}</template>
        </el-table-column>
        <el-table-column align="center" label="退团时间" prop="quitMusicGroupDate">
        </el-table-column>
        <el-table-column align="center" label="所选乐器">
          <template slot-scope="scope">
            <span
              v-for="good in scope.row.userGoodsDtos"
              :key="good.goodsId"
            >{{ good.goodsName | joinArray(',') }}</span>
            {{ scope.row.kitPurchaseMethod == 'LEASE' ? '(租赁：' + scope.row.depositFee + ')' : '' }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button
              @click="onCourse(scope.row)"
              v-permission="'studentManage/findStudentCourses'"
              type="text"
            >排课详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 搜索类型 -->
    <el-form v-if="coursesShow" :inline="true" class="searchForm" v-model.trim="searchForm">
      <el-form-item>
        <el-select v-model.trim="searchForm.classGroupType" clearable filterable placeholder="课程类型">
          <el-option
            v-for="(item, index) in courseArray"
            :key="index"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select v-model.trim="searchForm.courseStatus" clearable filterable placeholder="课程状态">
          <el-option
            v-for="(item, index) in courseStatus"
            :key="index"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input
          placeholder="班级名称"
          @keyup.enter.native="search"
          v-model.trim="searchForm.classGroupName"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-input
          placeholder="老师姓名"
          @keyup.enter.native="search"
          v-model.trim="searchForm.teacherName"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <div @click="search" class="searchBtn">搜索</div>
      </el-form-item>
    </el-form>
    <!-- 查询列表 -->
    <!-- <div v-if="coursesShow" class="searchWrap">
      <p>查询条件:</p>
      <div class="searchItem"
           @click="closeSearch(item)"
           v-for="(item,index) in searchLsit" :key="index">
        {{ item.key }}
        <i class="el-icon-close"></i>
      </div>
    </div>-->
    <div v-if="coursesShow" class="tableWrap">
      <el-table :data="coursesInfo" :header-cell-style="{background:'#EDEEF0',color:'#444'}">
        <el-table-column align="center" prop="classGroupId" label="编号"></el-table-column>
        <el-table-column align="center" prop="courseDate" label="时间">
           <template slot-scope="scope">{{ scope.row.courseDate | dateForMinFormat }}</template>
        </el-table-column>
        <el-table-column align="center" prop="classGroupName" label="班级名称"></el-table-column>
        <el-table-column align="center" label="课程类型">
          <template slot-scope="scope">{{ scope.row.classGroupType | coursesType }}</template>
        </el-table-column>
        <el-table-column align="center" label="课程状态">
          <template slot-scope="scope">{{ scope.row.courseStatus | coursesStatus }}</template>
        </el-table-column>
        <el-table-column align="center" prop="teacherName" label="老师姓名"></el-table-column>
      </el-table>
      <pagination
        :total="pageInfo.total"
        :page.sync="pageInfo.page"
        :limit.sync="pageInfo.limit"
        :page-sizes="pageInfo.page_size"
        @pagination="getStudentCourses"
      />
    </div>
  </div>
</template>
<script>
import pagination from "@/components/Pagination/index";
import {
  findStudentMusicGroups,
  findStudentCourses
} from "@/api/studentManager";
export default {
  name: "teamAndcourse",
  components: { pagination },
  data() {
    return {
      userId: null,
      musicGroupInfo: [], // 乐团列表
      coursesInfo: [], // 排课列表
      coursesShow: false, // 排课列表是否显示
      searchLsit: [],
      searchForm: {
        studentId: null,
        musicGroupId: null,
        classGroupType: null,
        courseStatus: null,
        classGroupName: null,
        teacherName: null
      },
      courseArray: [
        { label: "单技课", value: "NORMAL" },
        { label: "合奏课", value: "MIX" },
        { label: "基础技能班", value: "HIGH" },
        { label: "VIP课", value: "VIP" },
        { label: "试听课", value: "DEMO" }
      ],
      courseStatus: [
        { value: "NOT_START", label: "未开始" },
        { value: "UNDERWAY", label: "进行中" },
        { value: "OVER", label: "已结束" }
      ],
      pageInfo: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50] // 选择限制显示条数
      }
    };
  },
  mounted() {
    this.userId = this.$route.query.userId;
    this.searchForm.studentId = this.$route.query.userId;
    this.__init();
  },
  activated() {
    this.userId = this.$route.query.userId;
    this.searchForm.studentId = this.$route.query.userId;
    this.__init();
  },
  methods: {
    __init() {
      findStudentMusicGroups({ userId: this.userId }).then(res => {
        if (res.code == 200) {
          this.musicGroupInfo = res.data;
        }
      });
    },
    onCourse(row) {
      this.coursesShow = true;
      this.searchForm = {
        studentId: this.$route.query.userId,
        musicGroupId: row.musicGroupId,
        classGroupType: null,
        courseStatus: null,
        classGroupName: null,
        teacherName: null
      };
      this.getStudentCourses();
    },
    search() {
      this.pageInfo.page = 1;
      this.getStudentCourses();
    },
    getStudentCourses() {
      let params = this.searchForm;
      params.rows = this.pageInfo.limit;
      params.page = this.pageInfo.page;
      findStudentCourses(params).then(res => {
        if (res.code == 200) {
          this.coursesInfo = res.data.rows;
          this.pageInfo.total = res.data.total;
        }
      });
    }
  }
};
</script>
<style lang="scss">
.tabTopWrap {
  margin-bottom: 30px;
}
</style>