GCLS_Page_BMS/src/views/quota/LiveDetail.vue

<template>
  <div class="usage-record">
    <div class="quota-info">
      <span class="quota-info-item">{{ course_name }} - {{ task_name }} - {{ teacher_name }}</span>
    </div>
    <div class="usage-record-list">
      <div class="title">详情列表</div>

      <el-table :data="data_list">
        <el-table-column prop="live_room_id" label="直播间ID" width="115" />
        <el-table-column prop="live_id" label="直播ID" width="115" />
        <el-table-column label="类型" width="115">
          <template slot-scope="{ row }">
            {{ row.online_type === 1 || row.online_type === 0 ? onlineTypeList[row.online_type].label : '' }}
          </template>
        </el-table-column>
        <el-table-column prop="person_count" label="人数" width="115" />
        <el-table-column prop="v_duration" label="直播时长" width="115" />
        <el-table-column label="连线时长" width="115">
          <template slot-scope="{ row }"> {{ row.duration_online }}小时 </template>
        </el-table-column>
        <el-table-column label="费用" width="115">
          <template slot-scope="{ row }">{{ row.money_online }}元</template>
        </el-table-column>
        <el-table-column prop="begin_time" label="开始时间" width="115" />
        <el-table-column prop="end_time" label="结束时间" width="115" />
        <el-table-column label="是否分组">
          <template slot-scope="{ row }">
            {{ row.is_group === 'true' ? '是' : '否' }}
          </template>
        </el-table-column>
      </el-table>
    </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 { onlineTypeList } from './data';
import { PageQueryTaskLiveDetailList } from '@/api/list';

export default {
  props: {
    orgId: {
      type: String,
      default: ''
    },
    taskId: {
      type: String,
      default: ''
    },
    orgName: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      teacher_name: '',
      course_name: '',
      task_name: '',
      onlineTypeList,
      data_list: [],
      page_capacity: 10,
      total_count: 0,
      cur_page: 1
    };
  },
  created() {
    this.pageQueryTaskLiveDetailList();
  },
  methods: {
    pageQueryTaskLiveDetailList() {
      PageQueryTaskLiveDetailList({
        org_id: this.orgId,
        task_id: this.taskId,
        page_capacity: this.page_capacity,
        cur_page: this.cur_page
      }).then(({ total_count, cur_page, teacher_name, course_name, task_name, data_list }) => {
        this.total_count = total_count;
        this.cur_page = cur_page;
        this.teacher_name = teacher_name;
        this.course_name = course_name;
        this.task_name = task_name;
        this.data_list = data_list;
      });
    },
    changePage(newPage) {
      this.cur_page = newPage;
      this.pageQueryTaskLiveDetailList();
    },
    changePageSize(pageSize) {
      this.page_capacity = pageSize;
      this.pageQueryTaskLiveDetailList();
    }
  }
};
</script>

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

.usage-record {
  @include container;
  @include pagination;

  .quota-info {
    padding-top: 26px;
    font-size: 18px;
    font-weight: bold;
    color: #000;

    &-item {
      margin-right: 24px;
    }
  }

  &-list {
    @include list;

    padding: 24px;

    .title {
      margin-bottom: 16px;
      font-weight: bold;
      color: #000;
    }

    ::v-deep .el-table th.el-table__cell {
      color: #000;
    }
  }
}
</style>