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="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>
                <span class="refuse" @click="deleteStudent(row.course_student_id)">{{ $t('Key172') }}</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"
    />

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

<script>
export default {
  name: 'StudentList'
};
</script>

<script setup>
import { ref, inject } from 'vue';
import { PageQueryCourseStudentList, DeleteStudent } from '@/api/list';
import { AuditCourseStudent, SendMessageToCourseStudent } from '@/api/course';
import { useList } from '@/utils/list';
import { useRoute } from 'vue-router/composables';
import { Loading, Message, MessageBox } from 'element-ui';

import SendMessage from './SendMessage.vue';

const route = useRoute();

let curTab = ref('new');
const tabList = [
  {
    type: 'new',
    name: 'Key298'
  },
  {
    type: 'list',
    name: 'Key296'
  }
];

let { page_capacity, cur_page, total_count, list, changePage, changePageSize } = useList();

let course_id = ref(route.params.id);
let student_name = ref('');
function queryCourseStudentList() {
  PageQueryCourseStudentList({
    student_name: student_name.value,
    course_id: course_id.value,
    page_capacity: page_capacity.value,
    cur_page: cur_page.value,
    audit_status_list: curTab.value === 'new' ? [0] : [1]
  }).then(({ student_list, total_count: total, cur_page: page }) => {
    list.value = student_list;
    total_count.value = total;
    cur_page.value = page;
  });
}
queryCourseStudentList();

function changeTab(tab) {
  list.value = [];
  curTab.value = tab;
  queryCourseStudentList();
}

let type = ref('');
let student_id = ref('');
let visible = ref(false);
let titleName = ref('');
function sendMessage(types, studentId, student_name) {
  type.value = types;
  student_id.value = studentId;
  titleName.value = type.value === 'all' ? '全部' : student_name;
  visible.value = true;
}

const $t = inject('$t');
function sendMessageToCourseStudent(content) {
  const loading = Loading.service({ text: $t('Key624') });
  SendMessageToCourseStudent({
    course_id: course_id.value,
    content,
    type: type.value,
    student_id: student_id.value
  })
    .then(() => {
      visible.value = false;
      Message.success($t('Key626'));
    })
    .finally(() => {
      loading.close();
    });
}

function auditCourseStudent(course_student_id, is_audited) {
  AuditCourseStudent({ course_student_id, is_audited }).then(() => {
    Message.success($t('Key625'));
    queryCourseStudentList();
  });
}

function deleteStudent(course_student_id) {
  MessageBox.confirm('确定要删除该学生吗？', $t('Key361'), {
    confirmButtonText: $t('Key94'),
    cancelButtonText: $t('Key83'),
    type: 'warning'
  }).then(() => {
    DeleteStudent({ course_student_id }).then(() => {
      Message.success('删除成功');
      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;

      :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>