GCLS_Page_Learn/src/views/teacher/student_list/index.vue

<template>
  <div class="student-list">
    <div class="search">
      <el-input v-model.trim="student_name" prefix-icon="el-icon-search" @change="queryCourseStudentList">
        <el-button slot="append" @click="queryCourseStudentList">
          {{ $t('Key131') }}
        </el-button>
      </el-input>
    </div>
    <div class="student-list-container">
      <div class="tabs">
        <div class="tabs-left">
          <span
            v-for="item in tabList"
            :key="item.type"
            :class="['tabs-item', { active: item.type === curTab }]"
            @click="changeTab(item.type)"
          >
            {{ $t(item.name) }}
          </span>
        </div>
        <div v-if="curTab === tabList[1].type" class="tabs-right">
          <el-button @click="sendMessage('all')">
            <span><svg-icon icon-class="send-message" /> {{ $t('Key299') }}</span>
          </el-button>
        </div>
      </div>
      <div class="student-table">
        <el-table :data="student_list">
          <el-table-column width="280">
            <template slot-scope="{ row }">
              <el-avatar icon="el-icon-user" size="small" :src="row.image_url" />
              <span class="student-name">{{ row.student_name }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="age" width="120">
            <template slot-scope="scope"> {{ scope.row.age }}岁 </template>
          </el-table-column>
          <el-table-column prop="org_name" width="280" />
          <el-table-column prop="country_name" width="180" />
          <el-table-column>
            <template slot-scope="{ row }">
              <span>{{ row.is_pay === 'true' ? $t('Key306') : $t('Key307') }}</span>
            </template>
          </el-table-column>
          <el-table-column fixed="right" width="160">
            <template slot-scope="{ row }">
              <template v-if="curTab === tabList[0].type">
                <span class="agree" @click="auditCourseStudent(row.course_student_id, 'true')">
                  {{ $t('Key303') }}
                </span>
                <span class="refuse" @click="auditCourseStudent(row.course_student_id, 'false')">
                  {{ $t('Key304') }}
                </span>
              </template>
              <template v-if="curTab === tabList[1].type">
                <span class="agree" @click="sendMessage('single', row.student_id, row.student_name)">
                  {{ $t('Key305') }}
                </span>
              </template>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <el-pagination
      background
      :page-sizes="[10, 20, 30, 40, 50]"
      :page-size="page_capacity"
      layout="prev, pager, next, total, sizes, jumper"
      :total="total_count"
      :current-page="cur_page"
      @prev-click="changePage"
      @next-click="changePage"
      @current-change="changePage"
      @size-change="changePageSize"
    />

    <send-message :visible.sync="visible" :title-name="titleName" @sendMessage="sendMessageToCourseStudent" />
  </div>
</template>

<script>
import { PageQueryCourseStudentList } from '@/api/list';
import { AuditCourseStudent, SendMessageToCourseStudent } from '@/api/course';
import SendMessage from './SendMessage.vue';

export default {
  components: {
    SendMessage
  },
  data() {
    return {
      course_id: this.$route.params.id,
      student_name: '',
      curTab: 'new',
      visible: false,
      titleName: '',
      type: '',
      student_id: '',
      student_list: [],
      page_capacity: 10,
      cur_page: 1,
      total_count: 0,
      tabList: [
        {
          type: 'new',
          name: 'Key298'
        },
        {
          type: 'list',
          name: 'Key296'
        }
      ]
    };
  },
  created() {
    this.queryCourseStudentList();
    this.updateWordPack({
      word_key_list: [
        'Key131',
        'Key299',
        'Key298',
        'Key296',
        'Key303',
        'Key304',
        'Key305',
        'Key306',
        'Key307',
        'Key624',
        'Key625',
        'Key626'
      ]
    });
  },
  methods: {
    queryCourseStudentList() {
      PageQueryCourseStudentList({
        student_name: this.student_name,
        course_id: this.course_id,
        page_capacity: this.page_capacity,
        cur_page: this.cur_page,
        audit_status_list: this.curTab === 'new' ? [0] : [1]
      }).then(({ student_list, total_count, cur_page }) => {
        this.student_list = student_list;
        this.total_count = total_count;
        this.cur_page = cur_page;
      });
    },

    changeTab(tab) {
      this.student_list = [];
      this.curTab = tab;
      this.queryCourseStudentList();
    },

    changePage(newPage) {
      this.cur_page = newPage;
      this.queryCourseStudentList();
    },

    changePageSize(pageSize) {
      this.page_capacity = pageSize;
      this.queryCourseStudentList();
    },

    sendMessage(type, student_id, student_name) {
      this.type = type;
      this.student_id = student_id;
      if (type === 'all') {
        this.titleName = '全部';
      } else {
        this.titleName = student_name;
      }
      this.visible = true;
    },

    sendMessageToCourseStudent(content) {
      let loading = this.$loading(this.$i18n.t('Key624'));
      SendMessageToCourseStudent({
        course_id: this.course_id,
        content,
        type: this.type,
        student_id: this.student_id
      })
        .then(() => {
          this.visible = false;
          this.$message.success(this.$i18n.t('Key626'));
        })
        .finally(() => {
          loading.close();
        });
    },

    auditCourseStudent(course_student_id, is_audited) {
      AuditCourseStudent({ course_student_id, is_audited }).then(() => {
        this.$message.success(this.$i18n.t('Key625'));
        this.queryCourseStudentList();
      });
    }
  }
};
</script>

<style lang="scss" scoped>
@import '~@/styles/mixin';

.student-list {
  @include container;
  @include pagination;

  .search .el-input {
    width: 528px;
  }

  &-container {
    width: 100%;
    min-height: calc(100vh - 240px);
    margin-top: 16px;
    background-color: #fff;
    border-radius: 8px;

    // 标签
    .tabs {
      display: flex;
      justify-content: space-between;
      height: 68px;
      padding: 16px 16px 0 32px;
      border-bottom: 1px solid #d9d9d9;

      &-left {
        display: flex;
        align-items: flex-end;

        .tabs-item {
          padding-bottom: 16px;
          font-size: 18px;
          cursor: pointer;

          &.active {
            font-weight: 600;
            box-shadow: 0 1px 0 $basic-color, 0 -1px 0 $basic-color inset;
          }

          &:not(:first-child) {
            margin-left: 24px;
          }
        }
      }

      &-right {
        .el-button {
          height: 40px;
          padding: 8px 16px;

          .svg-icon {
            width: 24px;
            height: 24px;
            margin-right: 8px;
            vertical-align: middle;
          }
        }
      }
    }

    // 学员列表
    .student-table {
      @include list;

      min-height: calc(100vh - 343px);
      margin-top: 0;

      ::v-deep .el-table__header {
        display: none;
      }

      .agree {
        margin-right: 32px;
        color: #2a99ff;
        cursor: pointer;
      }

      .refuse {
        color: #ff3c3c;
        cursor: pointer;
      }

      .el-avatar {
        margin-left: 22px;
        vertical-align: sub;
      }

      .student-name {
        display: inline-block;
        margin-left: 16px;
        vertical-align: super;
      }
    }
  }
}
</style>