GCLS_Page_Learn/src/views/main/curricula_list/teacher.vue

<template>
  <div class="curricula-teacher">
    <main-menu cur-tab="CurriculaList" />
    <!-- 查询条件 -->
    <div class="curricula-teacher-search">
      <div class="curricula-teacher-search-condition">
        <el-input v-model="search" prefix-icon="el-icon-search" @change="queryMyCourseList">
          <el-button slot="append" @click="queryMyCourseList">
            {{ $t('Key131') }}
          </el-button>
        </el-input>
      </div>
      <div class="curricula-teacher-search-button">
        <el-select v-model="finish_status">
          <el-option :label="`-${$t('Key295')}-`" :value="-1" />
          <el-option
            v-for="item in finish_status_list"
            :key="item.finish_status"
            :label="item.name"
            :value="item.finish_status"
          />
        </el-select>
        <el-button type="primary" @click="queryMyCourseList">
          {{ $t('Key168') }}
        </el-button>
      </div>
    </div>
    <!-- 课程列表 -->
    <div class="curricula-teacher-container">
      <div class="curricula-teacher-container-title">
        <div>
          <el-button class="create" @click="$router.push('/create_course')">
            <svg-icon icon-class="create" /><span>{{ $t('Key285') }}</span>
          </el-button>
        </div>
      </div>
      <div class="curricula-teacher-container-list">
        <el-table :data="courseList">
          <el-table-column prop="name" :label="$t('Key134')" width="320" />
          <el-table-column :label="$t('Key250')" width="210">
            <template slot-scope="{ row }">
              <i class="el-icon-date" /> {{ row.begin_date }} - {{ row.end_date }}
            </template>
          </el-table-column>
          <el-table-column :label="$t('Key129')" width="90">
            <template slot-scope="{ row }">
              {{ row.is_release === 'true' ? '√' : '' }}
            </template>
          </el-table-column>
          <el-table-column :label="$t('Key136')" width="280" prop="org_name" />
          <el-table-column :label="$t('Key280')" prop="creator_name" />
          <el-table-column fixed="right" width="80">
            <template slot-scope="{ row }">
              <el-dropdown trigger="click">
                <span class="el-dropdown-link">
                  <svg-icon icon-class="more" />
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item @click.native="edit(row.id)">
                    <svg-icon icon-class="edit" /> {{ $t('Key123') }}
                  </el-dropdown-item>
                  <el-dropdown-item @click.native="view(row.id)">
                    <svg-icon icon-class="view" /> {{ $t('Key169') }}
                  </el-dropdown-item>
                  <el-dropdown-item v-if="row.is_release === 'false'" @click.native="releaseCourse(row.id, true)">
                    <svg-icon icon-class="publish" /> {{ $t('Key173') }}
                  </el-dropdown-item>
                  <el-dropdown-item v-else @click.native="releaseCourse(row.id, false)">
                    <svg-icon icon-class="undo" /> {{ $t('Key171') }}
                  </el-dropdown-item>
                  <el-dropdown-item @click.native="deleteCourse(row.id)">
                    <svg-icon icon-class="delete" /> {{ $t('Key172') }}
                  </el-dropdown-item>
                  <el-dropdown-item @click.native="studentList(row.id)">
                    <svg-icon icon-class="students" /> {{ $t('Key296') }}
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </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"
    />
  </div>
</template>

<script>
import MainMenu from '../components/MainMenu.vue';
import { updateWordPack } from '@/utils/i18n';
import { PageQueryMyCourseList } from '@/api/table';
import { GetFinishStatusList_Course } from '@/api/select';
import { ReleaseCourse, DeleteCourse } from '@/api/course';

export default {
  components: {
    MainMenu
  },
  data() {
    return {
      search: '',
      finish_status_list: [],
      teacher_list: [],
      finish_status: -1,
      page_capacity: 10,
      cur_page: 1,
      total_count: 0,
      courseList: []
    };
  },
  created() {
    this.updateWordPack({
      word_key_list: [
        'Key131',
        'Key168',
        'Key295',
        'Key285',
        'Key134',
        'Key250',
        'Key129',
        'Key136',
        'Key280',
        'Key123',
        'Key169',
        'Key171',
        'Key173',
        'Key172',
        'Key296'
      ]
    });
    this.queryMyCourseList();
    this.getFinishStatusList_Course();
    updateWordPack({
      word_key_list: ['Learn_New_Courses']
    });
  },
  methods: {
    getFinishStatusList_Course() {
      GetFinishStatusList_Course().then(({ finish_status_list }) => {
        this.finish_status_list = finish_status_list;
      });
    },
    changePage(newPage) {
      this.cur_page = newPage;
      this.queryMyCourseList();
    },
    changePageSize(pageSize) {
      this.page_capacity = pageSize;
      this.queryMyCourseList();
    },
    queryMyCourseList() {
      PageQueryMyCourseList({
        finish_status: this.finish_status,
        name: this.search,
        page_capacity: this.page_capacity,
        cur_page: this.cur_page
      }).then(({ course_list, total_count }) => {
        this.courseList = course_list;
        this.total_count = total_count;
      });
    },

    statusColor(val) {
      if (val === 0) return '#68CEFA';
      if (val === 1) return '#2ECE5B';
      if (val === 3) return '#f90';
      if (val === 4) return '#4F8EEC';
    },

    studentList(id) {
      this.$router.push(`/student_list/index/${id}`);
    },
    edit(id) {
      this.$router.push(`/create_course_step_table/course_info?id=${id}`);
    },
    view(id) {
      this.$router.push(`/GoodsDetail?goods_id=${id}&goods_type=201&readonly=true`);
    },

    releaseCourse(course_id, is_release) {
      ReleaseCourse({ course_id, is_release }).then(() => {
        this.queryMyCourseList();
        this.$message.success(`${is_release ? '' : '取消'}发布课程成功`);
      });
    },

    deleteCourse(id) {
      this.$confirm('您确定要删除该课程吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        DeleteCourse({ id }).then(() => {
          this.$message.success('删除课程成功');
          this.queryMyCourseList();
        });
      });
    },

    changeTab(tab) {
      this.$emit('changeTab', tab);
    }
  }
};
</script>

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

.curricula-teacher {
  @include pagination;

  &-search {
    display: flex;
    justify-content: space-between;

    &-condition {
      > .el-input {
        width: 528px;
      }
    }

    &-button {
      .el-button {
        width: 114px;
      }

      .el-select {
        width: 225px;
        margin-right: 12px;
      }
    }
  }

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

    &-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 88px;
      padding: 24px 32px;

      .title {
        margin-right: 36px;
        font-size: 20px;
        font-weight: 700;
      }

      .create {
        min-width: 138px;

        .svg-icon {
          margin-right: 12px;
        }
      }
    }

    &-list {
      @include list;

      margin-top: 0;

      .el-dropdown {
        cursor: pointer;

        .svg-icon {
          font-size: 19px;
        }
      }
    }
  }
}
</style>

<style scoped>
.el-dropdown-menu .svg-icon {
  margin-right: 8px;
}
</style>