dy-admin-manager/src/views/liveClassManager/liveClassManager.vue

<!--  -->
<template>
  <div>
    <auth auths="vipGroupManage/vipGroupApply">
      <el-button @click="newLiveClass" type="primary" style="margin-bottom: 20px">新建直播课</el-button>
    </auth>
    <save-form :inline="true" :model="searchForm" @submit="search" @reset="onReSet" ref="searchForm">
      <el-form-item prop="search">
        <el-input v-model.trim="searchForm.search" clearable @keyup.enter.native="e => {
          e.target.blur();
          $refs.searchForm.save();
          search();
        }
          " placeholder="课程组名称"></el-input>
      </el-form-item>
      <el-form-item props="teacherId">
        <remote-search :commit="'setTeachers'" v-model="searchForm.teacherId" :isForzenWithQueryCondition="true" />
      </el-form-item>
      <el-form-item prop="subjectId">
        <el-select placeholder="课程组类型" v-model="searchForm.subjectId" clearable>
          <el-option v-for="(item, index) in subjectList" :key="index" :value="item.id" :label="item.name" />
        </el-select>
      </el-form-item>
      <el-form-item prop="status">
        <el-select v-model.trim="searchForm.status" filterable clearable placeholder="请选课程组状态">
          <el-option v-for="(item, index) in statusList" :key="index" :label="item.lable" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button native-type="submit" type="primary">搜索</el-button>
        <el-button native-type="reset" type="danger">重置</el-button>
      </el-form-item>
    </save-form>
    <div class="tableWrap">
      <el-table style="width: 100%" :header-cell-style="{ background: '#EDEEF0', color: '#444' }" :data="tableList">
        <el-table-column align="center" prop="id" label="课程组编号"></el-table-column>
        <el-table-column align="center" prop="name" label="课程组名称"></el-table-column>
        <el-table-column align="center" prop="subjectName" label="课程组类型"></el-table-column>
        <el-table-column align="center" label="课程组状态">
          <template slot-scope="scope">
            <div>{{ scope.row.status | formatterStatus }}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="userName" label="指导老师"></el-table-column>
        <el-table-column align="center" prop="educationalTeacherName" label="乐员主管"></el-table-column>

        <el-table-column align="center" prop="studentNum" label="报名人数"></el-table-column>
        <el-table-column align="center" prop="onlineClassesNum" label="课时数"></el-table-column>
        <el-table-column align="center" label="分部">
          <template slot-scope="scope">
            <copy-text>{{ scope.row.organName }}</copy-text>
          </template>
        </el-table-column>

        <el-table-column align="center" prop="liveStartTime" label="开课时间">
          <template slot-scope="scope">
            <div>
              <p>{{ scope.row.courseStartDate | formatterTime }}</p>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="studentId" label="操作">
          <template slot-scope="scope">
            <div>
              <auth auths="vipGroupManage/stopVipGroup">
                <el-button type="text" @click="onDetail(scope.row)">详情</el-button>
              </auth>
              <el-popover placement="top" width="160" v-if="scope.row.status <= 3" :ref="scope.$index">
                <p style="margin-bottom: 10px">确定关闭该直播课?</p>
                <el-input v-model.trim="stopReason" placeholder="请输入关闭原因"></el-input>
                <div style="text-align: right; margin-top: 20px">
                  <el-button type="text" @click="onCancelVip(scope)">取消</el-button>
                  <el-button type="primary" @click="onCloseVip(scope)">确定</el-button>
                </div>
                <el-button type="text" slot="reference">关闭</el-button>
              </el-popover>

              <auth auths="vipGroupManage/updateLiveGroup" v-if="[0, 1, 2].includes(scope.row.status)">
                <el-button type="text" @click="onUpdate(scope.row)">修改</el-button>
              </auth>

              <auth auths="vipGroupManage/delLiveGroup" v-if="scope.row.status == 3">
                <el-button type="text" @click="onDelete(scope.row)">删除</el-button>
              </auth>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <pagination sync :total.sync="rules.total" :page.sync="rules.page" :limit.sync="rules.limit"
        :page-sizes="rules.page_size" @pagination="getList" />
    </div>
  </div>
</template>

<script>
import pagination from "@/components/Pagination/index";
import { getVipList, closeVip } from "@/api/vipSeting";
import { getSubject } from "@/api/buildTeam";
import { delLiveGroup } from './api'
export default {
  components: {
    pagination
  },
  data() {
    return {
      searchForm: {
        search: null,
        teacherId: null,
        subjectId: null,
        status: null
      },
      tableList: [],
      rules: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50] // 选择限制显示条数
      },
      statusList: [
        { lable: "未开始", value: "0" },
        { lable: "报名中", value: "1" },
        // { lable: "报名结束", value: "5" },
        { lable: "进行中", value: "2" },
        { lable: "已结束", value: "4" },
        { lable: "取消", value: "3" },
        // { lable: "暂停", value: "6" },
      ],
      stopReason: "",
      subjectList: []
    };
  },
  async mounted() {
    try {
      // 获取 指导老师列表
      await getSubject({
        tenantId: 1
      }).then(res => {
        if (res.code == 200) {
          this.subjectList = [
            {
              id: -1,
              name: "乐理"
            },
            ...res.data
          ];
        }
      });
    } catch {

    }
    this.getList();
  },
  methods: {
    async onDelete(row) {
      this.$confirm(`是否确认删除？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        dangerouslyUseHTMLString: true,
        type: "warning"
      })
        .then(async () => {
          try {
            await delLiveGroup({ id: row.id })
            this.$message.success('删除成功')
            this.getList()
          } catch { }
        })
        .catch(() => { });
    },
    newLiveClass() {
      let params = {
        path: "/business/createLiveCourse"
      };
      this.$router.push(params, route => {
        route.meta.title = "新建直播课";
      });
    },
    onDetail(row) {
      this.$router.push({
        path: "/business/liveCourseDetail",
        query: {
          name: row.name,
          id: row.id
        }
      });
    },
    onUpdate(row) {
      this.$router.push({
        path: '/business/createLiveCourse',
        query: {
          type: 'update',
          id: row.id
        }
      }, (route) => {
        route.meta.title = '修改直播课'
      })
    },
    onCancelVip(scope) {
      this.stopReason = null;
      scope._self.$refs[scope.$index].doClose();
    },
    onCloseVip(scope) {
      let id = scope.row.id;
      closeVip({ vipGroupId: id, stopReason: this.stopReason }).then(res => {
        if (res.code == 200) {
          this.$message.success("停止课程组成功");
          scope._self.$refs[scope.$index].doClose();
          this.stopReason = "";
          this.getList();
        }
      });
    },
    async getList() {
      await getVipList({
        ...this.searchForm,
        groupType: "LIVE",
        page: this.rules.page,
        rows: this.rules.limit
      }).then(res => {
        if (res.code == 200) {
          this.tableList = res.data.rows;
          this.rules.total = res.data.total;
        }
      });
    },
    search() {
      this.rules.page = 1;
      this.getList();
    },
    onReSet() {
      this.searchForm.teacherId = "";
      this.$refs.searchForm.resetFields();
      this.search();
    }
  },
  filters: {
    formatterTime(val) {
      let result;
      if (val) {
        result = val.split(" ")[0];
      } else {
        result = "";
      }
      return result;
    },
    formatterStatus(val) {
      let arr = [
        "未开始",
        "报名中",
        "进行中",
        "取消",
        "已结束",
        "报名结束",
        "暂停"
      ];
      return arr[val];
    }
  }
};
</script>
<style lang="scss" scoped>
::v-deep .el-dropdown-link::v-deep .el-dropdown-link {
  cursor: pointer;
  color: var(--color-primary);
}

::v-deep .el-icon-arrow-down {
  font-size: 12px;
}