dy-admin-manager/src/views/teamDetail/components/courseTransModals/transStart.vue

<template>
  <div>
    <el-dialog title="课程转化" width="800px" :visible.sync="transVisible">
      <div v-if="transVisible">
        <p class="subtitle">已选择<span> {{courseConvertSum.courseNum}} </span>节<span>{{courseConvertSum.courseType | coursesType}} </span>进行转换,共 <span>{{courseConvertSum.studentNum}}</span>名学员</p>
        <el-table :data="tableList"    :header-cell-style="{ background: '#EDEEF0', color: '#444' }">
        <el-table-column
          align="center"
          property="name"
          label="学员姓名"
        ></el-table-column>
        <el-table-column
          align="center"
          property="phone"
          label="手机号"
        ></el-table-column>
        <el-table-column
          align="center"
          property="subjectName"
          label="学员声部"
        ></el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="transVisible = false">取 消</el-button>
        <el-button type="primary" @click="gotoNext">下一步</el-button>
      </div>
      </div>

      <!-- <pagination
        sync
        :total.sync="rules.total"
        :page.sync="rules.page"
        :limit.sync="rules.limit"
        :page-sizes="rules.page_size"
        @pagination="getList"
      /> -->
    </el-dialog>
  </div>
</template>
<script>
import { getCourseScheduleConvert } from "../../api";
export default {
  props: {
    activeCourseList: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      tableList: [],

      transVisible: false,
      courseConvertSum: {
        courseMinute: 0,
        courseNum: 0,
        courseType: "",
        studentNum: 0,
      },
    };
  },
  mounted() {},
  methods: {
    async openDialog() {
      // 获取列表
      try {
        let courseIds = this.chioseCourse
          .map((item) => {
            return item.courseScheduleId;
          })
          .join(",");
        const res = await getCourseScheduleConvert({ courseIds });
        this.tableList = res.data.students;
        this.courseConvertSum = { ...res.data.courseConvertSum };
        this.transVisible = true;
      } catch (e) {
        console.log(e);
      }
    },
    getList() {},
    gotoNext(){},
  },
  computed: {
    chioseCourse() {
      return this.activeCourseList;
    },
  },
};
</script>
<style lang="scss" scoped>
  .subtitle {
    margin-bottom: 20px;
    span {
      color: red;
    }
  }
</style>>