dy-admin-manager/src/views/liveClassManager/liveClassTwo/components/courseOverview.vue

<!--  -->
<template>
  <div>
    <div class="m-core">
      <el-form ref="liveForm" :model="form" label-position="top">
        <el-alert title="课程规划" :closable="false" type="info" style="margin: 0 0 20px" />
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="直播课标题" prop="roomTitle" :rules="[{ required: false, message: '请输入直播课标题' }]">
              <el-input v-model="form.roomTitle" placeholder="请输入直播课标题" maxlength="25" :disabled="disabled"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="分部" prop="organIds" :rules="[{ required: false, message: '请选择分部' }]">
              <select-all v-model.trim="form.organIds" filterable placeholder="请选择分部" multiple clearable
                :disabled="disabled">
                <el-option v-for="(item, index) in selects.branchs" :key="index" :label="item.name"
                  :value="item.id"></el-option>
              </select-all>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="直播课内容" prop="liveRemark" :rules="[{ required: false, message: '请输入直播课内容' }]">
              <el-input type="textarea" v-model="form.liveRemark" placeholder="请输入直播课内容" maxlength="200" show-word-limit
                :disabled="disabled"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="声部" prop="subjectIdList" :rules="[{ required: false, message: '请选择声部' }]">
              <el-select v-model.trim="form.subjectIdList" filterable clearable placeholder="请选择声部"
                style="width: 100% !important" :disabled="disabled">
                <el-option v-for="(item, index) in subjectList" :key="index" :value="item.id" :label="item.name" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="指导老师" prop="teacher" :rules="[{ required: false, message: '请选择指导老师' }]">
              <el-select v-model.trim="form.teacher" filterable clearable placeholder="请选择指导老师"
                style="width: 100% !important" :disabled="!form.subjectIdList || disabled">
                <el-option v-for="(item, index) in teacherList" :key="index" :label="item.realName" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="乐团主管" prop="educationalTeacherId" :rules="[{ required: false, message: '请选择乐团主管' }]">
              <el-select v-model.trim="form.educationalTeacherId" filterable clearable style="width: 100% !important"
                :disabled="disabled">
                <el-option v-for="(item, key) in educationList" :key="key" :label="item.userName" :value="item.userId" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="课程购买时间" prop="signUpTimeList" :rules="[{ required: false, message: '请选择课程购买时间' }]">
              <!-- :default-time="['00:00:00', '23:59:59']" -->
              <el-date-picker style="width: 100%" v-model="form.signUpTimeList" type="daterange" range-separator="-"
                start-placeholder="购买开始日期" end-placeholder="购买结束日期" :disabled="disabled">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="课时数" prop="onlineClassesNum" :rules="[{ required: false, message: '请输入课时数' }]">
              <el-input v-model="form.onlineClassesNum" placeholder="请输入课时数" maxlength="2"
                :disabled="disabled"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="课程时长" prop="singleClassMinuteId" :rules="[{ required: false, message: '请选择课程时长' }]">
              <el-select v-model.trim="form.singleClassMinuteId" filterable clearable style="width: 100% !important"
                placeholder="请选择课程时长" :disabled="disabled">
                <el-option v-for="(item, key) in liveGroupList" :key="key" :label="item.singleClassMinutes"
                  :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="现价" prop="onlineClassesUnitPrice" :rules="[{ required: false, message: '请输入现价' }]">
              <el-input v-model="form.onlineClassesUnitPrice" placeholder="请输入现价" @keyup.native="keyupEvent($event)"
                :disabled="disabled"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="原价" prop="offlineClassesUnitPrice" :rules="[{ required: false, message: '请输入原价' }]">
              <el-input v-model="form.offlineClassesUnitPrice" placeholder="请输入原价" @keyup.native="keyupEvent($event)"
                :disabled="disabled"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-table style="width: 100%; margin-top: 20px;" :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
          :data="form.timeTable">
          <el-table-column align="center" label="课时">
            <template slot-scope="scope">
              第{{ scope.$index + 1 }}课
            </template>
          </el-table-column>
          <el-table-column align="center" label="内容" width="150px" prop="teachingContent" key="teachingContent">
            <template slot-scope="scope">
              <!-- {{ scope.row.teachingContent }} -->
              <Tooltip :content="scope.row.teachingContent" />
            </template>
          </el-table-column>
          <el-table-column align="center" label="技能/知识点掌握" width="220px" prop="teachingPoint" key="teachingPoint">
            <template slot-scope="scope">
              <!-- {{ scope.row.teachingPoint }} -->
              <Tooltip :content="scope.row.teachingPoint" />
            </template>
          </el-table-column>
          <el-table-column align="center" prop="singleClassMinutes" label="时长"></el-table-column>
          <el-table-column align="center" label="课程日期">
            <template slot-scope="scope">
              <div>{{ scope.row.classDate | formatTimer }}</div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="startClassTimeStr" label="开始时间"></el-table-column>
          <el-table-column align="center" prop="endClassTimeStr" label="结束时间"></el-table-column>
          <el-table-column align="center" label="课程类型">
            <template slot-scope="scope">
              <div>{{ scope.row.teachMode | teachMode }}</div>
            </template>
          </el-table-column>
        </el-table>

        <el-alert title="直播课信息" :closable="false" type="info" style="margin: 20px 0" />
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="直播设备" prop="os" :rules="[{ required: false, message: '请选择推广类型' }]">
              <el-radio-group v-model="form.os" :disabled="disabled">
                <!-- 根据不同的模式，显示不同的直播设备 -->
                <el-radio v-if="serviceProvider === 'rongCloud'" label="pc">web</el-radio>
                <el-radio v-if="serviceProvider === 'tencentCloud'" label="client">客户端</el-radio>
                <el-radio label="mobile">手机</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="直播场景" prop="useScene" :rules="[{ required: false, message: '请选择直播场景' }]">
              <el-radio-group v-model="form.useScene" :disabled="disabled">
                <el-radio label="NORMAL">普通模式</el-radio>
                <el-radio label="MUSIC">音乐模式</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item prop="roomConfig.whether_video" label="保存直播回放"
              :rules="[{ required: false, message: '是否保存直播回放' }]">
              <el-radio-group v-model="form.roomConfig.whether_video" :disabled="disabled">
                <el-radio :label="0">是</el-radio>
                <el-radio :label="1">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item prop="roomConfig.whether_view_shop_cart" label="是否展示购物车"
              :rules="[{ required: false, message: '是否展示购物车' }]">
              <el-radio-group v-model="form.roomConfig.whether_view_shop_cart" :disabled="disabled">
                <el-radio :label="0">是</el-radio>
                <el-radio :label="1">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="预热模板（模板使用于分享宣传图片）" prop="preTemplate" :rules="[{ required: false, message: '请选择预热模板' }]">
              <el-radio-group v-model="form.preTemplate" :disabled="disabled">
                <div class="chioseWrap">
                  <div class="chioseItem">
                    <img src="../../images/img1.png" alt="" />
                    <i class="dotWrap" :class="form.preTemplate == 1 ? 'checked' : ''"></i>
                  </div>
                  <div class="chioseItem">
                    <img src="../../images/img2.png" alt="" />
                    <i class="dotWrap" :class="form.preTemplate == 2 ? 'checked' : ''"></i>
                  </div>
                  <div class="chioseItem">
                    <img src="../../images/img3.png" alt="" />
                    <i class="dotWrap" :class="form.preTemplate == 3 ? 'checked' : ''"></i>
                  </div>
                </div>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
import Tooltip from "@/components/Tooltip/index";
import { liveGroupDetail } from "../../api";
export default {
  components: {
    Tooltip
  },
  data() {
    return {
      disabled: true,
      tableList: [],
      form: {
        roomTitle: "", //
        liveRemark: "", // 内容
        organIds: [],
        subjectIdList: null, // 声部
        teacher: "", // 指导老师列表
        educationalTeacherId: null, // 乐团主管
        preTemplate: 1, // 模板
        signUpStart: null, // 开始时间
        signUpEnd: null, // 结束时间
        signUpTimeList: [], // 课程购买时间
        onlineClassesNum: null,
        singleClassMinuteId: null, //时长编号
        singleClassMinutes: null, // 时长
        onlineClassesUnitPrice: null, // 售价
        offlineClassesUnitPrice: null, // 原价
        os: "client", // 直播设备
        useScene: "NORMAL", // 直播场景
        popularizeType: "ALL", // 观看权限信息
        viewMode: "LOGIN",
        roomConfig: {
          whether_like: 0,
          whether_chat: 0,
          whether_video: 0,
          whether_mic: 0,
          whether_view_shop_cart: 0
        },
        timeTable: [], // 排课
        clientType: "TEACHER" // 主讲人身份 默认[老师]
      },
      serviceProvider: "tencentCloud", // 直播模式
      subjectList: [], // 声部列表
      teacherList: [], // 指导老师
      educationList: [], // 乐团主管
      liveGroupList: [] // 课时列表
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    async getList() {
      try {
        const query = this.$route.query;
        const { data } = await liveGroupDetail({ id: query.id });

        const liveBroadcastRoom = data.liveBroadcastRoom || {};
        const vipGroupApplyBaseInfo = data.vipGroupApplyBaseInfo || {};
        const courseSchedules = data.courseSchedules || [];
        const tempCourse = [];
        courseSchedules.forEach(item => {
          tempCourse.push({
            classDate: item.classDate,
            actualTeacherId: item.teacherId,
            startClassTimeStr: item.startClassTimeStr,
            endClassTimeStr: item.endClassTimeStr,
            teachMode: "ONLINE",
            singleClassMinutes: vipGroupApplyBaseInfo.singleClassMinutes,
            teachingContent: item.teachingContent,
            teachingPoint: item.teachingPoint
          });
        });

        // 初始化数据
        this.form = {
          roomTitle: liveBroadcastRoom.roomTitle, //
          liveRemark: liveBroadcastRoom.liveRemark, // 内容
          organIds: vipGroupApplyBaseInfo.organName ? vipGroupApplyBaseInfo.organName.split(",") : [],
          subjectIdList: vipGroupApplyBaseInfo.subjectName, // 声部
          teacher: liveBroadcastRoom.speakerName, // 指导老师列表
          educationalTeacherId: vipGroupApplyBaseInfo.educationalTeacherName, // 乐团主管
          preTemplate: liveBroadcastRoom.preTemplate, // 模板
          signUpStart: null, // 开始时间
          signUpEnd: null, // 结束时间
          signUpTimeList: [
            vipGroupApplyBaseInfo.registrationStartTime,
            vipGroupApplyBaseInfo.paymentExpireDate
          ], // 课程购买时间
          onlineClassesNum: vipGroupApplyBaseInfo.onlineClassesNum,
          singleClassMinuteId: vipGroupApplyBaseInfo.singleClassMinutes, //时长编号
          singleClassMinutes: vipGroupApplyBaseInfo.singleClassMinutes, // 时长
          onlineClassesUnitPrice: vipGroupApplyBaseInfo.onlineClassesUnitPrice, // 售价
          offlineClassesUnitPrice:
            vipGroupApplyBaseInfo.offlineClassesUnitPrice, // 原价
          os: liveBroadcastRoom.os, // 直播设备
          useScene: liveBroadcastRoom.useScene, // 直播场景
          popularizeType: liveBroadcastRoom.popularizeType, // 观看权限信息
          viewMode: liveBroadcastRoom.viewMode,
          roomConfig: liveBroadcastRoom.roomConfig || {
            whether_like: 0,
            whether_chat: 0,
            whether_video: 0,
            whether_mic: 0,
            whether_view_shop_cart: 0
          },
          timeTable: tempCourse, // 排课
          clientType: "TEACHER" // 主讲人身份 默认[老师]
        };
      } catch {
        //
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.chioseWrap {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;

  .chioseItem {
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    margin-right: 10px;
    width: 188px;
    height: 188px;
    cursor: pointer;

    .dotWrap {
      width: 21px;
      height: 21px;
      background: url("../../../../assets/images/icon_checkbox_default.png") no-repeat center;
      background-size: contain;
      display: block;
      position: absolute;
      top: 10px;
      right: 12px;
      overflow: hidden;

      &.checked {
        background: url("../../../../assets/images/icon_checkbox.png") no-repeat center;
        background-size: contain;
      }
    }
  }
}

::v-deep .el-select>.el-input {
  height: 36px !important;
}

::v-deep .select-all {
  .select {
    .el-input__inner {
      height: 36px !important;
      min-height: 36px !important;
    }
  }

  .btn {
    height: 36px !important;
    min-height: 36px !important;
  }
}
</style>