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"
                         width="180px"
                         label="乐团编号">
          <template slot-scope="scope">
            <copy-text>{{ scope.row.musicGroupId }}</copy-text>
          </template>
        </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">
          <template slot-scope="scope">
            <span v-if="scope.row.userMusicGroupStatus == 'QUIT'">
              {{ scope.row.quitMusicGroupDate | formatTimer }}
            </span>
          </template>
        </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="'studentAttendance/findStudentAttendance'"
                       type="text">排课详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
      :visible.sync="coursesShow"
      title="排课详情"
      width="1000px"
    >
    <template>
      <!-- 搜索类型 -->
      <el-form v-if="coursesShow"
              :inline="true"
              class="searchForm"
              v-model.trim="searchForm">
        <el-form-item>
          <el-select v-model.trim="searchForm.courseScheduleType"
                    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 prop="teacherId">
          <remote-search :commit='"setTeachers"' v-model='searchForm.teacherId' />
        </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>
          <el-button type="danger" @click="search">搜索</el-button>
        </el-form-item>
      </el-form>
        <div v-if="coursesShow"
            class="tableWrap">
          <el-table :data="coursesInfo"
                    :header-cell-style="{background:'#EDEEF0',color:'#444'}">
            <el-table-column align="center"
                            prop="courseScheduleId"
                            label="课程编号">
              <template slot-scope="scope">
                <copy-text>{{ scope.row.courseScheduleId }}</copy-text>
              </template>
            </el-table-column>
            <el-table-column align="center"
                            width="180px"
                            label="上课时间">
              <template slot-scope="scope">
                {{ scope.row.courseSchedule.classDate | dayjsFormat }} 
                {{
                  scope.row.courseSchedule.startClassTime | dayjsFormatMinute
                }}-{{
                  scope.row.courseSchedule.endClassTime | dayjsFormatMinute
                }}
              </template>
            </el-table-column>
            <el-table-column align="center"
                            prop="courseSchedule.name"
                            label="课程名称"></el-table-column>
            <el-table-column align="center"
                            label="课程类型">
              <template slot-scope="scope">{{ scope.row.courseSchedule.type | coursesType }}</template>
            </el-table-column>
            <el-table-column align="center"
                            label="课程状态">
              <template slot-scope="scope">{{ scope.row.courseSchedule.status | coursesStatus }}</template>
            </el-table-column>
            <el-table-column align="center" label="是否被合并">
              <template slot-scope="scope">
                <div>
                  {{ scope.row.courseSchedule.newCourseId > 0 ? '是' : '否' }}
                </div>
              </template>
            </el-table-column>
            <el-table-column align="center"
                            prop="courseSchedule.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>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import pagination from "@/components/Pagination/index";
import {musicCourseType} from "@/utils/searchArray"
import { findStudentAttendance } from "@/api/buildTeam";
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,
        courseScheduleType: null,
        courseStatus: null,
        teacherId: null
      },
      courseArray: musicCourseType,
      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,
        courseScheduleType: null,
        courseStatus: null,
        teacherId: 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;
      console.log(params)
      findStudentAttendance(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>