v3-lab-web/src/views/safetyEducationExam/safeLearning/el_course/edit.vue

<template>
  <div class="edit-page">
    <el-steps :active="stepsType" simple class="top-steps-box">
      <el-step title="资源信息" icon="el-icon-edit" :status="stepsType==0?'finish ':'process'"
               @click.native="stepsClick(0,$event)" style="cursor:pointer;"></el-step>
      <el-step title="资源章节" icon="el-icon-folder-add" :status="stepsType==1?'finish ':'process'"
               @click.native="stepsClick(1,$event)" style="cursor:pointer;"></el-step>
      <el-step title="资源设置" icon="el-icon-setting" :status="stepsType==2?'finish ':'process'"
               @click.native="stepsClick(2,$event)" style="cursor:pointer;"></el-step>
    </el-steps>
    <!--课程信息-->
    <div class="center-content-max-box info-max-box" v-if="stepsType === 0">
      <el-form :model="infoForm" ref="infoForm" :rules="infoRules" label-width="80px">
        <el-form-item label="课程名称" prop="title">
          <el-input
            style="width:400px;"
            v-model="infoForm.title"
            maxLength="25"
            placeholder="请输入课程名称"
            size="small"
          />
          {{infoForm.title.length}}/25
        </el-form-item>
        <el-form-item label="课程分类" prop="cateName">
          <div style="display: flex">
            <el-input
              style="width:400px;"
              v-model="infoForm.cateName"
              disabled
              maxLength="25"
              placeholder="请选择课程分类"
              size="small"
            />
            <p class="page-add-common-style-button"
               style="margin-left:20px;"
               @click="openClassTreeClick"
            >选择分类</p>
          </div>
        </el-form-item>
        <el-form-item label="适用类型" prop="checkList">
          <el-checkbox-group v-model="infoForm.checkList">
            <el-checkbox
              v-for="item in scopeTypeList"
              :label="item.id"
              :key="item.id">{{item.value}}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="适用学院" prop="deptId">
          <el-cascader
            ref="deptCascader"
            style="width:400px;"
            @change="deptFun"
            v-model="infoForm.deptId"
            :options="deptOptions"
            :props="{value: 'deptId', label: 'deptName',children:'child',checkStrictly: false}"
            placeholder="请选择适用学院"
            collapse-tags></el-cascader>
          <!--<el-select v-model="infoForm.deptId" placeholder="请选择适用学院" @change="deptFun" style="width:400px;">-->
            <!--<el-option-->
              <!--v-for="item in deptOptions"-->
              <!--:key="item.deptId"-->
              <!--:label="item.deptName"-->
              <!--:value="item.deptId"-->
            <!--&gt;-->
            <!--</el-option>-->
          <!--</el-select>-->
        </el-form-item>
      </el-form>
    </div>
    <!--课程章节-->
    <div class="center-content-max-box chapter-max-box" v-if="stepsType === 1">
      <div class="left-new-chapter-box">
        <p class="title-p">新建章节</p>
        <p class="add-chapter-p page-add-common-style-button" @click="add_el_chapterClick">新增章节</p>
        <div class="chapter-list-for-max-box scrollbar-box">
          <div class="chapter-list-for-big-box" v-for="(item,index) in chapterList" :key="index" :index="item.id">
            <div class="chapter-list-for-box" :class="{'checkChapter':item.id == chapterIndex}"
                 @click.stop="checkChapterClick(item)">
              <p v-if="item.showType" @click.stop="chapterTreeClick(item,false)"><i class="el-icon-remove-outline"></i>
              </p>
              <p v-if="!item.showType" @click.stop="chapterTreeClick(item,true)"><i
                class="el-icon-circle-plus-outline"></i></p>
              <p>{{item.title}}</p>
              <p @click.stop="del_el_chapter(item)"><i class="el-icon-circle-close"></i></p>
            </div>
            <div class="chapter-list-min-for-box" :class="{'checkChapter':minItem.id == chapterIndex}"
                 @click.stop="checkChapterClick(minItem)"
                 v-if="item.showType"
                 v-for="(minItem,index2) in item.children" :key="index2" :index="minItem.id">
              <p>{{minItem.title}}</p>
              <p @click.stop="del_el_chapter(minItem)"><i class="el-icon-circle-close"></i></p>
            </div>
          </div>
        </div>
      </div>
      <div class="center-content-box scrollbar-box">
        <p class="title-p">编辑框</p>
        <p class="null-add-p" v-if="!chapterData.id">请先在左侧动作条选择或创建章节</p>
        <div class="center-content-box-one" v-if="!exerciseAddType">
          <el-form :model="chapterData" ref="chapterForm" :rules="chapterRules" v-if="chapterData.id">
            <div style="display: flex">
              <el-form-item label="标题" prop="title" style="margin:20px 0;" label-width="100px">
                <el-input
                  style="width:190px;margin-right:20px;"
                  v-model="chapterData.title"
                  maxLength="20"
                  minlength="1"
                  placeholder="请输入标题"
                  size="small"
                />
              </el-form-item>
              <el-form-item label="时间" prop="timeValue" style="margin:20px 0;display: flex"
                            v-if="chapterData.chapterData">
                <el-time-picker
                  @change="timeChange"
                  v-model="chapterData.timeValue"
                  format='HH:mm:ss'
                  value-format='HH:mm:ss'
                  placeholder="请选择时间">
                </el-time-picker>
              </el-form-item>
              <el-form-item label="课后考核" prop="exerciseValue1" style="margin:20px 0;" label-width="100px"
                            v-if="chapterData.chapterData">
                <el-switch
                  v-model="chapterData.isAssess"
                  :active-value="true"
                  :inactive-value="false">
                </el-switch>
              </el-form-item>
              <p style="flex:1;"></p>
              <el-button type="primary" style="margin:20px 20px 0 20px;" @click="edit_el_chapterClick">保存</el-button>
            </div>
            <div class="exercise-title-max-box" v-if="chapterData.isAssess">
              <el-form-item label="考核名称" prop="assessName" label-width="100px">
                <el-input
                  style="width:300px;"
                  v-model="chapterData.assessName"
                  maxLength="20"
                  minlength="1"
                  placeholder="请输入考核名称"
                  size="small"
                />
              </el-form-item>
              <div class="exercise-add-max-box">
                <p class="exercise-add-button page-add-common-style-button" @click="exerciseAddClickOn">设置考核题目</p>
                <div class="exercise-add-text-box">
                  <div>题目总数：{{totalNum}}</div>
                  <div>单选题数：{{oneNum}}</div>
                  <div>多选题数：{{manyNum}}</div>
                  <div>判断题数：{{judgeNum}}</div>
                </div>
              </div>
            </div>
          </el-form>
          <div class="center-info-components-max-box scrollbar-box" v-loading="loading">
            <!--图片-->
            <img
              style="display: block;margin:0 auto;max-width:900px;"
              v-if="chapterData.postfix == 'png' || chapterData.postfix == 'jpg'|| chapterData.postfix == 'jpeg' || chapterData.postfix == 'gif'"
              :src="chapterData.chapterData">
            <video class="video-player vjs-custom-skin"
                   style="width:810px;height:512px;"
                   autoplay="autoplay"
                   :poster="videoCover"
                   v-if="chapterData.chapterData && chapterData.postfix == 'mp4'">
              <source :src="chapterData.chapterData" type="video/mp4">
            </video>
            <!--word-->

            <vue-office-docx
              v-if="chapterData.postfix == 'docx'"
              :src="chapterData.iframeSrc"
              @rendered="renderedHandler"
              @error="errorHandler"
            />
            <vue-office-pdf
              v-if="chapterData.postfix == 'pdf'"
              :src="chapterData.iframeSrc"
              @rendered="renderedHandler"
              @error="errorHandler"
            />
            <!--富文本-->
            <div v-if="chapterData.type == 5" v-html="chapterData.chapterData"></div>
          </div>
        </div>
        <!--课后练习-->
        <div class="center-content-box-two" v-if="exerciseAddType">
          <el-form class="center-content-box-two-top" style="margin-bottom:10px;" :model="exerciseQueryParams"
                   ref="exerciseQueryParams" :inline="true" label-width="80px">
            <el-form-item label="题目名称" prop="content">
              <el-input
                style="width:140px;"
                v-model="exerciseQueryParams.content"
                placeholder="请输入题目名称"
              />
            </el-form-item>
            <el-form-item label="题目类型" prop="quType">
              <el-select
                style="width:150px;"
                v-model="exerciseQueryParams.quType"
                placeholder="请选择题目类型">
                <el-option
                  v-for="dict in quTypes"
                  :key="dict.type"
                  :label="dict.value"
                  :value="dict.type">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="题目分类" prop="classifyIds">
              <el-select
                style="width:150px;"
                v-model="exerciseQueryParams.classifyIds"
                placeholder="请选择题目分类">
                <el-option
                  v-for="dict in optionList"
                  :key="dict.id"
                  :label="dict.title"
                  :value="dict.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <p class="page-inquire-common-style-button" @click="exerciseHandleQuery" style="margin:0 10px;">查询</p>
              <p class="page-reset-common-style-button" @click="exerciseResetQuery">重置</p>
            </el-form-item>
          </el-form>
          <div class="center-content-box-two-bottom">
            <div class="center-content-box-two-bottom-left">
              <el-table v-loading="loading" border :data="exerciseList" empty-text="请在右侧添加题目">
                <el-table-column label="题目名称" align="left" prop="content" :show-overflow-tooltip="true"/>
                <el-table-column width="40">
                  <template slot-scope="scope">
                    <i class="el-icon-circle-close del-i" @click="delExerciseListClick(scope.row)"></i>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div class="center-content-box-two-bottom-right">
              <div class="center-content-box-two-bottom-right-table scrollbar-box">
                <el-table v-loading="loading" class="table-box" border :data="el_courseList">
                  <el-table-column label="题目名称" align="left" prop="content" :show-overflow-tooltip="true"/>
                  <el-table-column label="题目类型" align="left" prop="title" width="120" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                    <span
                      v-for="(item, index) in quTypes"
                      :key="index"
                      v-if="scope.row.quType == item.type"
                    >{{ item.value }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" align="left" width="100">
                    <template slot-scope="scope">
                      <div class="table-button-box">
                        <p class="table-button-null"></p>
                        <p class="table-button-p"
                           @click="exerciseAdd(scope.row)">添加</p>
                        <p class="table-button-null"></p>
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
                <pagination :page-sizes="[20, 30, 40, 50]"
                            v-show="el_courseTotal>0"
                            :total="el_courseTotal"
                            :pager-count="5"
                            layout="total, pager, jumper"
                            :page.sync="exerciseQueryParams.page"
                            :limit.sync="exerciseQueryParams.pageSize"
                            @pagination="getExerciseList"
                />
              </div>
            </div>
          </div>
          <div class="center-content-box-two-bottom-button">
            <p></p>
            <p class="reset-button-one" @click="exerciseAddClickOff">取消</p>
            <p class="inquire-button-one" @click="exerciseAddClickSave">提交</p>
          </div>
        </div>
      </div>
      <div class="right-courseware-box">
        <p class="title-p">资源管理</p>

        <div class="el-resources-tree scrollbar-box">
          <el-select v-model="selectTree" placeholder="请选择分类" style="width: 100%;margin-top: 20px;">
            <el-option :value="selectTreeValue" style="height: auto;">
              <el-tree
                :data="treeData"
                :props="defaultProps"
                :highlight-current="true"
                :expand-on-click-node="false"
                :filter-node-method="filterNode"
                ref="resourcesTree"
                default-expand-all
                @node-click="handleNodeClick"
              />
            </el-option>
          </el-select>
          <el-input class="el-resources-search" placeholder="请输入资源名称" v-model="resourceName"
                    style="margin-top: 14px;">
            <i slot="append" class="el-icon-search" style="font-size: 22px;" @click="queryResources"></i>
          </el-input>
        </div>
        <div class="el-resources-list ">
          <el-table :data="el_resourcesList" class="table-box" border :show-header="false">
            <el-table-column label="课件名称" align="left" prop="title" width="240" :show-overflow-tooltip="true"/>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="80">
              <template slot-scope="scope">
                <div class="table-button-box">
                  <p class="table-button-null"></p>
                  <p class="table-button-p" @click="addMinChildren(scope.row)">添加</p>
                  <p class="table-button-null"></p>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <pagination :page-sizes="[20, 30, 40, 50]"
                      style="height:50px;margin-left:10px;"
                      v-show="total>0"
                      :total="total"
                      layout="total, prev, next"
                      :page.sync="queryParams.page"
                      :limit.sync="queryParams.pageSize"
                      @pagination="getResources"
          />
        </div>
      </div>
    </div>
    <!--课程设置-->
    <div class="center-content-max-box set-up-max-box" v-if="stepsType === 2">
      <el-form :model="setUpForm" ref="setUpForm" :rules="setUpRules" label-width="180px">
        <el-form-item label="有效时间类型" prop="ceType" style="margin-top:20px;">
          <el-radio v-model="setUpForm.ceType" :label="0" style="margin-right:20px;">永久</el-radio>
          <el-radio v-model="setUpForm.ceType" :label="1">有限</el-radio>
        </el-form-item>
        <el-form-item label="过期日期" prop="ceTime" v-if="setUpForm.ceType == 1" style="margin-top:20px;">
          <el-date-picker
            :clearable="false"
            v-model="setUpForm.ceTime"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请选择过期日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="课程上架状态" prop="status" style="margin-top:20px;">
          <el-switch
            v-model="setUpForm.status"
            active-color="#00b7ee"
            inactive-color="#dedede"
            :active-value=true
            :inactive-value=false>
          </el-switch>
        </el-form-item>
        <el-form-item label="显示课程拖拽进度" prop="videoDraggable" style="margin-top:20px;">
          <el-switch
            v-model="setUpForm.videoDraggable"
            active-color="#00b7ee"
            inactive-color="#dedede"
            :active-value="1"
            :inactive-value="0">
          </el-switch>
        </el-form-item>
      </el-form>
    </div>
    <div class="bottom-button-box">
      <el-button @click="offPage">取 消</el-button>
      <el-button type="primary" style="width:200px;" @click="stepsClick">
        {{stepsType==0?'保存并进入下一步':(stepsType==1?'下一步':stepsType==2?'完成':'')}}
      </el-button>
    </div>
    <!--选择分类-->
    <el-dialog title="选择分类" :visible.sync="openClassTree" width="700px" append-to-body :close-on-click-modal="false">
      <div style="height:500px;" class="scrollbar-box">
        <el-tree
          v-if="openClassTree"
          :data="classTree"
          show-checkbox
          default-expand-all
          node-key="id"
          :check-strictly="true"
          ref="ditTree"
          highlight-current
          @node-click="editCheck"
          @check="editCheck"
          :props="defaultProps">
        </el-tree>
      </div>
      <div slot="footer" class="dialog-footer dialog-footer-box">
        <p class="dialog-footer-button-null"></p>
        <p class="dialog-footer-button-info" @click="openClassTreeClickOff">取消</p>
        <p class="dialog-footer-button-primary" @click="openClassSubmit">提交</p>
        <p class="dialog-footer-button-null"></p>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    examQuList, list_option, examElResourcesList, examElCourse, examElCourseAdd, examElCourseEdit, examElChapterAdd,
    examElChapterEdit, examElChapterDel, examElChapterQueryChapterQu, examElCategoryTreeList, examElClassifyQueryOption
  } from '@/api/safetyEducationExam/index'
  import { systemDeptOrganizeStructure, systemDeptOrganizeStructureByDept } from '@/api/commonality/permission'
  import { getToken } from '@/utils/auth'
  import { videoPlayer } from 'vue-video-player'
  import 'video.js/dist/video-js.css'
  //引入VueOfficeDocx组件
  import VueOfficeDocx from '@vue-office/docx'
  import '@vue-office/docx/lib/index.css'
  //引入VueOfficePdf组件
  import VueOfficePdf from '@vue-office/pdf'

  export default {
    name: 'edit',
    props: {
      infoId: {}
    },
    components: {
      videoPlayer,
      VueOfficeDocx,
      VueOfficePdf
    },
    data() {
      return {
        videoCover:localStorage.getItem('fileBrowseEnvironment')+ localStorage.getItem('videoCover'),
        selectTree: '',
        selectTreeValue: [],
        /******************基本信息-开始******************/
        //上传封面设置
        uploadImgUrl: this.uploadUrl(), // 上传的图片服务器地址
        //步骤条状态
        stepsType: 0,
        //课程信息
        infoForm: {
          title: '',
          // content:"",
          cateName: '',
          // certUrl:"",
          checkList: [],
          deptId: ''
        },
        courseTypeList: [
          { id: '0', name: '基础课程' },
          { id: '1', name: '视频课程' },
          { id: '2', name: 'VR课程' },
          { id: '3', name: '趣味学习' }
        ],
        resourceName: '',//资源名称
        //课程信息校验
        infoRules: {
          title: [
            { required: true, message: '请输入课程名称', trigger: 'blur' },
            { required: true, message: '请输入课程名称', validator: this.spaceJudgment, trigger: 'blur' }
          ],
          cateName: [
            { required: true, message: '请选择课程分类', trigger: 'blur' }
          ],
          checkList: [
            { required: true, message: '请选择适用类型', trigger: 'blur' }
          ],
          deptId: [
            { required: true, message: '请选择适用学院', trigger: 'blur' }
          ]
        },
        //分类页面
        openClassTree: false,
        //分类树数据
        classTree: [],
        defaultProps: {
          children: 'children',
          label: 'title'
        },
        //分类选择临时数据
        openClassTreeType: {},
        //学院
        deptOptions: [],
        //适用类型
        scopeTypeList: [
          { id: '1', value: '安全准入考试' },
          { id: '2', value: '负面清单考试' },
          { id: '3', value: '黑名单考试' }
        ],
        /******************基本信息-结束******************/
        /******************章节信息-开始******************/
        // 章节数组
        chapterList: [],
        chapterIndex: 0,
        chapterData: {},
        //课程信息校验
        chapterRules: {
          title: [
            { required: true, message: '请输入标题', trigger: 'blur' }
          ],
          assessName: [
            { required: true, message: '请输入考核名称', trigger: 'blur' }
          ]
        },
        //课件列表
        // 查询参数
        queryParams: {
          page: 1,
          pageSize: 20
        },
        //树列表
        treeData: [],

        //课件列表
        el_resourcesList: [],
        total: 0,
        //加载动画
        loading: false,
        //pdf页数
        pdfNumPages: null,
        page: 1,
        pageTotalNum: 1, //# 总页数
        loadedRatio: 0, //# 当前页面的加载进度，范围是0-1 ，等于1的时候代表当前页已经完全加载完成了
        //视频设置

        playerOptions: {
          playbackRates: [], // 可选的播放速度
          autoplay: false, // 如果为true,浏览器准备好时开始回放。
          muted: false, // 默认情况下将会消除任何音频。
          loop: false, // 是否视频一结束就重新开始。
          preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
          language: 'zh-CN',
          aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
          fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
          sources: [],
          poster: '', // 封面地址
          notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
          controlBar: {
            timeDivider: true, // 当前时间和持续时间的分隔符
            durationDisplay: true, // 显示持续时间
            remainingTimeDisplay: false, // 是否显示剩余时间功能
            fullscreenToggle: true // 是否显示全屏按钮
          }
        },
        //课后题添加
        exerciseAddType: false,
        //题目类型
        quTypes: [
          {
            type: 1,
            value: '单选题'
          },
          {
            type: 2,
            value: '多选题'
          },
          {
            type: 3,
            value: '判断题'
          }
        ],
        //题目分类
        optionList: [],
        //题目搜索项
        exerciseQueryParams: {
          page: 1,
          pageSize: 20,
          content: null,
          quType: null,
          classifyIds: null
        },
        //题目数量
        el_courseTotal: 0,
        //题目列表
        el_courseList: [],
        //选中题目数据
        exerciseList: [],
        //总题数
        totalNum: 0,
        //单选数
        oneNum: 0,
        //多选数
        manyNum: 0,
        //判断数
        judgeNum: 0,
        /******************章节信息-结束******************/
        /******************设置信息-开始******************/
        setUpForm: {},
        durationNum: {},
        setUpRules: {
          duration: [
            { required: true, message: '请输入课程学习时长', trigger: 'blur' }
          ],
          // points: [
          //   { required: true, message: "请输入积分值", trigger: "blur" },
          // ],
          // machinePoints: [
          //   { required: true, message: "请输入学习机积分值", trigger: "blur" },
          // ],
          ceType: [
            { required: true, message: '请选择有效时间类型', trigger: 'blur' }
          ],
          ceTime: [
            { required: true, message: '请选择过期日期', trigger: 'blur' }
          ]
        }
        /******************设置信息-结束******************/
      }
    },
    created() {
      if (this.infoId.id) {
        this.getInfoData()
      }
    },
    mounted() {
      this.getTreeData()
      this.getResourceTreeData()
      this.getResources()
      this.getDeptList()
      this.getList_option()
      this.getExerciseList()
    },
    methods: {
      /******************基本信息-开始******************/
      /* 查询学院列表 */
      getDeptList() {
        systemDeptOrganizeStructure({}).then(response => {
          let list = JSON.parse(JSON.stringify(response.data));
          pushNode(list,false)
          function pushNode(list,type){
            for(let i=0;i<list.length;i++){
              if(!list[i].child[0]){
                delete list[i].child;
              }else if(type){
                delete list[i].child;
              }else{
                pushNode(list[i].child,true)
              }
            }
          }
          this.$set(this, 'deptOptions', list)
        })
      },
      //步骤条下一步按钮
      stepsClick(type, e) {
        if (type == 0 || type == 1 || type == 2) {
          if (this.infoId.id && this.stepsType != type) {
            if (type == 1) {
              this.queryParams.cateId = ''
              this.queryParams.page = 1
              this.queryParams.pageSize = 20
              this.getResources()
            }
            this.getInfoData()
            this.stepsType = type
          }
        } else if (this.stepsType == 0) {
          if (this.stepsType == 0) {
            this.addElCourseClick()
          }
        } else if (this.stepsType == 1) {
          // this.edit_el_chapterClick();
          this.stepsType++
        } else if (this.stepsType == 2) {
          this.edutSetUpClick()
        }
        //关闭课后题目选择页面
        this.exerciseAddClickOff()
      },
      //选择分类页面开启
      openClassTreeClick() {
        let self = this
        this.openClassTree = true
        if (this.infoForm.cateId) {
          setTimeout(function() {
            self.$refs.ditTree.setCheckedKeys([self.infoForm.cateId])
          }, 100)
        }
      },
      openClassTreeClickOff() {
        this.openClassTree = false
        this.openClassTreeType = {}
      },
      /** 查询课程分类树 */
      getTreeData() {
        examElCategoryTreeList({}, 2).then(response => {
          this.classTree = JSON.parse(JSON.stringify(response.data))

        })
      },
      /** 查询资源分类树 */
      getResourceTreeData() {
        examElCategoryTreeList({}, 1).then(response => {
          let list = []
          let obj = {
            children: [],
            title: '所有分类',
            id: ''
          }
          list.push(obj)
          for (let i = 0; i < response.data.length; i++) {
            list.push(response.data[i])
          }
          this.treeData = list
        })
      },
      //使用学院
      deptFun(value) {
        if(value){
          let list = this.$refs['deptCascader'].getCheckedNodes()
          let deptNames = [];
          list.forEach((item)=>{
            deptNames.push(item.label)
          })
          this.$set(this.infoForm,'deptNames',deptNames);
        }
      },
      //分类树点击事件
      editCheck(event) {
        this.$refs.ditTree.setCheckedKeys([event.id])
        this.openClassTreeType.cateName = event.title
        this.openClassTreeType.cateId = event.id
      },
      //选择分类确定
      openClassSubmit() {
        let obj = JSON.parse(JSON.stringify(this.openClassTreeType))
        this.infoForm.cateId = obj.cateId
        this.infoForm.cateName = obj.cateName
        this.openClassTree = !this.openClassTree
      },
      //退出上一页
      offPage() {
        this.$parent.goPageEdit(4)
      },
      //获取课程数据
      getInfoData() {
        let self = this
        examElCourse(this.infoId.id).then(response => {
          //基础信息
          this.$set(this.infoForm, 'title', response.data.title)
          this.$set(this.infoForm, 'cateName', response.data.cateTitle)
          this.$set(this.infoForm, 'cateId', response.data.cateId)
          if (response.data.scopeType) {
            let scopeList = response.data.scopeType.split(',')
            this.$set(this.infoForm, 'checkList', scopeList)
          }
          this.$set(this.infoForm, 'deptId', response.data.deptIds?response.data.deptIds.split(','):'')
          this.$set(this.infoForm, 'deptNames', response.data.deptNames?response.data.deptNames.split(','):'')
          //章节信息
          for (let i = 0; i < response.data.chapterList.length; i++) {
            response.data.chapterList[i].showType = true
          }
          this.$set(this, 'chapterList', response.data.chapterList)
          if (response.data.chapterList[0]) {
            this.chapterIndex = response.data.chapterList[0].id
            this.chapterData = JSON.parse(JSON.stringify(response.data.chapterList[0]))
          } else {
            this.chapterIndex = ''
            this.chapterData = {}
          }
          //设置信息
          this.$set(this.setUpForm, 'duration', response.data.duration)
          this.$set(this.setUpForm, 'ceType', response.data.ceType)
          this.$set(this.setUpForm, 'ceTime', response.data.ceTime)
          this.$set(this.setUpForm, 'status', response.data.status)
          this.$set(this.setUpForm, 'videoDraggable', response.data.videoDraggable)
        })
      },
      //获取课程信息不从新定义index
      getInfoDataTow() {
        examElCourse(this.infoId.id).then(response => {
          this.$set(this.infoForm, 'title', response.data.title)
          this.$set(this.infoForm, 'cateName', response.data.cateTitle)
          this.$set(this.infoForm, 'cateId', response.data.cateId)
          if (response.data.scopeType) {
            let scopeList = response.data.scopeType.split(',')
            this.$set(this.infoForm, 'checkList', scopeList)
          }
          this.$set(this.infoForm, 'dictType', response.data.dictType)
          for (let i = 0; i < response.data.chapterList.length; i++) {
            response.data.chapterList[i].showType = true
          }
          this.$set(this, 'chapterList', response.data.chapterList)

        })
      },
      //信息保存
      addElCourseClick() {
        let self = this
        this.$refs['infoForm'].validate(valid => {
          if (valid) {
            if (this.infoId.id) {
              let obj = {
                id: this.infoId.id,
                title: this.infoForm.title,
                cateId: this.infoForm.cateId,
                deptIds: this.infoForm.deptId+'',
                deptNames: this.infoForm.deptNames+'',
              }
              let scopeText = this.infoForm.checkList + ''
              obj.scopeType = scopeText
              examElCourseEdit(obj).then(response => {
                this.msgSuccess('修改成功')
                this.stepsType++
              })
            } else {
              let obj = {
                title: this.infoForm.title,
                cateId: this.infoForm.cateId,
                deptIds: this.infoForm.deptId+'',
                deptNames: this.infoForm.deptNames+'',
              }
              let scopeText = this.infoForm.checkList + ''
              obj.scopeType = scopeText
              examElCourseAdd(obj).then(response => {
                this.infoId.id = response.data.id
                this.getInfoData()
                this.msgSuccess('新增成功')
                this.stepsType++
              })
            }
          }
        })
      },
      /******************基本信息-结束******************/
      /******************章节信息-开始******************/
      //搜索查询课件
      queryResources() {
        this.queryParams.title = this.resourceName
        examElResourcesList(this.queryParams).then(response => {
          this.el_resourcesList = response.data.records
          this.total = response.data.total
        })
      },
      //获取课件
      getResources() {
        examElResourcesList(this.queryParams).then(response => {
          this.el_resourcesList = response.data.records
          this.total = response.data.total
        })
      },
      //获取题目分类
      getList_option() {
        examElClassifyQueryOption({pageSize:-1}).then(response => {
          this.optionList = response.data.records
        })
      },
      //选中章节
      checkChapterClick(item) {
        this.chapterIndex = item.id
        this.$set(this, 'chapterData', JSON.parse(JSON.stringify(item)))
        let hour = parseInt(this.chapterData.duration / 3600)
        let hourNum = this.chapterData.duration - this.accMul(hour, 3600)
        let minute = parseInt(hourNum / 60)
        let second = hourNum - this.accMul(minute, 60)
        let timeValue = hour + ':' + minute + ':' + second
        this.$set(this.chapterData, 'timeValue', timeValue)
        if (this.chapterData.postfix == 'mp4') {
          this.chapterData.chapterData = localStorage.getItem('fileBrowseEnvironment')+this.chapterData.chapterData
        } else if (this.chapterData.postfix == 'pdf' || this.chapterData.postfix == 'docx') {
          this.getWord()
        } else if (this.chapterData.type == 5) {
          this.getRichText()
        }
        if (this.chapterData.isAssess) {
          this.getQueryChapterQu(this.chapterData.id)
        }
        this.countTheNumberOfQuestions()
        this.exerciseAddClickOff()
        this.$forceUpdate()
      },
      //富文本处理
      getRichText() {
        this.chapterData.chapterData = unescape(this.chapterData.chapterData)
      },
      //word处理
      async getWord() {
        this.chapterData.iframeSrc = localStorage.getItem('fileBrowseEnvironment')+this.chapterData.chapterData
      },
      //文件加载成功
      renderedHandler() {
        // console.log("渲染完成")
        // this.$set(this,'officeNullType',false);
      },
      //文件加载失败
      errorHandler() {
        // console.log("渲染失败")
        // this.$set(this,'officeNullType',true);
      },
      //子类展开/关闭
      chapterTreeClick(item, type) {
        item.showType = type
      },
      //添加新章节
      add_el_chapterClick() {
        let obj = {
          type: 0,
          courseId: this.infoId.id,
          parentId: 0,
          title: '新章节'
        }
        examElChapterAdd(obj).then(response => {
          response.data.showType = true
          if (this.chapterList[0]) {
            this.chapterList.push(response.data)
          } else {
            this.chapterList.push(response.data)
            this.chapterIndex = response.data.id
            this.chapterData = JSON.parse(JSON.stringify(response.data))
          }
          this.msgSuccess('新增成功')
        })
      },
      //时间确定
      timeChange(data) {
        // this.$set(this.chapterData,'timeValue',data);
        let timeList = data.split(':')
        let hour = timeList[0]
        let minute = timeList[1]
        let second = timeList[2]
        minute = this.accAdd(minute, this.accMul(hour, 60))
        second = this.accAdd(second, this.accMul(minute, 60))
        this.$set(this.chapterData, 'duration', second)
        this.$forceUpdate()
      },
      //修改章节
      edit_el_chapterClick() {
        let self = this
        this.$refs['chapterForm'].validate(valid => {
          if (valid) {
            if (this.chapterData.chapterData) {
              if (self.chapterData.isAssess && !self.chapterData.exerciseList) {
                this.msgError('请添加题目或关闭课后考核')
                return
              }
              if (self.chapterData.isAssess && !self.chapterData.exerciseList[0]) {
                this.msgError('请添加题目或关闭课后考核')
                return
              }
              let list = []
              if (self.chapterData.isAssess && self.chapterData.exerciseList) {
                for (let i = 0; i < self.chapterData.exerciseList.length; i++) {
                  let minObj = {
                    quId: self.chapterData.exerciseList[i].quId
                  }
                  list.push(minObj)
                }
              }
              let obj = {
                courseId: this.infoId.id,
                id: this.chapterData.id,
                title: this.chapterData.title,
                // description:this.chapterData.description,
                duration: this.chapterData.duration,
                isAssess: this.chapterData.isAssess
              }
              if (list[0]) {
                obj.assessName = this.chapterData.assessName
                obj.chapterQuList = list
              }
              examElChapterEdit(obj).then(response => {
                this.msgSuccess('修改成功')
                this.getInfoDataTow()
                // this.stepsType++
              })
            } else {
              let obj = {
                courseId: this.infoId.id,
                id: this.chapterData.id,
                title: this.chapterData.title
                // description:this.chapterData.description,
              }
              examElChapterEdit(obj).then(response => {
                this.msgSuccess('修改成功')
                this.getInfoDataTow()
                // this.stepsType++
              })
            }
          }
        })
      },
      //删除章节
      del_el_chapter(item) {
        let self = this
        examElChapterDel({ id: item.id }).then(response => {
          for (let i = 0; i < self.chapterList.length; i++) {
            if (item.id == self.chapterList[i].id) {
              self.chapterList.splice(i, 1)
            }
          }
          if (item.id == this.chapterIndex) {
            if (self.chapterList[0]) {
              this.chapterIndex = self.chapterList[0].id
              this.chapterData = JSON.parse(JSON.stringify(self.chapterList[0]))
            } else {
              this.chapterIndex = ''
              this.chapterData = {}
            }
          }
          this.$forceUpdate()
          this.msgSuccess('删除成功')
          this.getInfoDataTow()
        })
      },
      //添加节
      addMinChildren(item) {
        if (!this.chapterData.id) {
          this.msgError('请先选择或添加章节')
          return
        }
        if (this.chapterData.chapterData) {
          this.msgError('无法给课程添加课程')
          return
        }
        let obj = {
          type: item.type,
          courseId: this.infoId.id,
          parentId: this.chapterData.id,
          resourcesId: item.id,
          chapterData: item.path,
          title: item.title,
          duration: item.duration
        }
        if (item.type == 5) {
          obj.chapterData = item.content
        }
        examElChapterAdd(obj).then(response => {
          this.msgSuccess('添加成功')
          this.getInfoDataTow()
        })
      },
      // 筛选节点
      filterNode(value, data) {
        if (!value) return true
        return data.label.indexOf(value) !== -1
      },
      // 节点单击事件
      handleNodeClick(data) {
        this.selectTree = data.title
        this.queryParams.cateId = data.id
        this.getResources()
      },
      //打开课后练习页面
      exerciseAddClickOn() {
        this.exerciseAddType = true
        if (!this.chapterData.exerciseList) {
          this.$set(this.chapterData, 'exerciseList', [])
          this.exerciseList = []
        } else {
          this.$set(this, 'exerciseList', this.chapterData.exerciseList)
        }
      },
      //关闭课后练习页面
      exerciseAddClickOff() {
        this.exerciseAddType = false
      },
      //保存课后练习页面数据并计算题目数量
      exerciseAddClickSave() {
        this.$set(this.chapterData, 'exerciseList', this.exerciseList)
        this.countTheNumberOfQuestions()
        this.exerciseAddType = false
      },
      //删除已添加题目
      delExerciseListClick(row) {
        let self = this
        for (let i = 0; self.exerciseList.length; i++) {
          if (row.quId == self.exerciseList[i].quId) {
            self.exerciseList.splice(i, 1)
          }
        }
      },
      //获取题目列表
      getExerciseList() {
        this.loading = true
        examQuList(this.exerciseQueryParams).then((response) => {
          this.el_courseList = response.data.records
          this.el_courseTotal = response.data.total
          this.loading = false
        })
      },
      /** 搜索按钮操作 */
      exerciseHandleQuery() {
        this.exerciseQueryParams.page = 1
        this.getExerciseList()
      },
      /** 重置按钮操作 */
      exerciseResetQuery() {
        this.resetForm('exerciseQueryParams')
        this.handleQuery()
      },
      /** 添加题目*/
      exerciseAdd(row) {
        let self = this
        for (let i = 0; i < self.exerciseList.length; i++) {
          if (row.id == self.exerciseList[i].quId) {
            this.msgError('该题目已添加')
            return
          }
        }
        row.quId = row.id
        this.exerciseList.push(row)
      },
      /** 计算题目数量 */
      countTheNumberOfQuestions() {
        let self = this
        if (this.stepsType == 1) {
          if (this.chapterData.chapterData) {
            if (this.chapterData.exerciseList) {
              let total = 0
              let one = 0
              let many = 0
              let judge = 0
              for (let i = 0; i < self.chapterData.exerciseList.length; i++) {
                total++
                if (self.chapterData.exerciseList[i].quType == 1) {
                  one++
                } else if (self.chapterData.exerciseList[i].quType == 2) {
                  many++
                } else if (self.chapterData.exerciseList[i].quType == 3) {
                  judge++
                }
              }
              this.totalNum = total
              this.oneNum = one
              this.manyNum = many
              this.judgeNum = judge
            } else {
              this.totalNum = 0
              this.oneNum = 0
              this.manyNum = 0
              this.judgeNum = 0
            }
          } else {
            this.totalNum = 0
            this.oneNum = 0
            this.manyNum = 0
            this.judgeNum = 0
          }
        }
      },
      //获取章节题目数据
      getQueryChapterQu(id) {
        examElChapterQueryChapterQu({ id: id }).then(res => {
          this.$set(this.chapterData, 'exerciseList', res.data)
          this.countTheNumberOfQuestions()
        })
      },
      /******************章节信息-结束******************/
      /******************设置信息-开始******************/
      edutSetUpClick() {
        this.$refs['setUpForm'].validate(valid => {
          if (valid) {
            let obj = {
              id: this.infoId.id,
              // duration:this.setUpForm.duration,
              // points:this.setUpForm.points,
              ceTime: this.setUpForm.ceTime,
              ceType: this.setUpForm.ceType,
              status: this.setUpForm.status,
              videoDraggable: this.setUpForm.videoDraggable
            }
            examElCourseEdit(obj).then(response => {
              this.msgSuccess('修改成功')
              this.offPage()
            })
          }
        })
      },
      /******************设置信息-结束******************/
      //乘法
      accMul(arg1, arg2) {
        var m = 0, s1 = arg1.toString(), s2 = arg2.toString()
        try {
          m += s1.split('.')[1].length
        } catch (e) {
        }
        try {
          m += s2.split('.')[1].length
        } catch (e) {
        }
        return Number(s1.replace('.', '')) * Number(s2.replace('.', '')) / Math.pow(10, m)
      },
      //加法
      accAdd(arg1, arg2) {
        var r1, r2, m
        try {
          r1 = arg1.toString().split('.')[1].length
        } catch (e) {
          r1 = 0
        }
        try {
          r2 = arg2.toString().split('.')[1].length
        } catch (e) {
          r2 = 0
        }
        m = Math.pow(10, Math.max(r1, r2))
        return ((arg1 * m + arg2 * m) / m).toFixed(0)
      }
    }
  }
</script>

<style scoped lang="scss">
  .edit-page {
    flex: 1;
    display: flex !important;
    flex-direction: column;
    overflow: hidden;
    /*box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);*/
    /*padding:20px!important;*/
    /*margin:9px 20px 20px;*/
    .top-steps-box {
      margin: 20px 20px 0;
    }
    .center-content-max-box {
      flex: 1;
    }
    .bottom-button-box {
      width: 280px;
      margin: 0 auto 20px;
    }
    .info-max-box {
      margin: 20px 20px 0;
    }
    .chapter-max-box {
      * {
        margin: 0;
        padding: 0;
      }
      display: flex;
      overflow: hidden;
      .left-new-chapter-box {
        /*backAnimation-color: blueviolet;*/
        box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.1);
        border-radius: 6px;
        width: 270px;
        overflow: hidden;
        margin: 20px;
        display: flex;
        flex-direction: column;
        .add-chapter-p {
          margin: 15px auto;
        }
        .chapter-list-for-max-box {
          flex: 1;
          margin-bottom: 20px;
          overflow-y: scroll;
          padding: 0 !important;
          .chapter-list-for-big-box {
            margin: 10px 6px 0 10px;
            .chapter-list-for-box {
              display: flex;
              background: #F2F2F2;
              border: 1px solid #F2F2F2;
              p {
                line-height: 30px;
                font-size: 15px;
              }
              p:nth-child(1) {
                width: 30px;
                text-align: center;
                font-size: 18px;
                cursor: pointer;
              }
              p:nth-child(2) {
                flex: 1;
                display: block;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
              p:nth-child(3) {
                width: 30px;
                text-align: center;
                font-size: 18px;
                cursor: pointer;
              }
            }
            .chapter-list-min-for-box {
              display: flex;
              margin: 10px 0 0 10px;
              border: 1px solid #F2F2F2;
              p {
                line-height: 30px;
                font-size: 15px;
              }
              p:nth-child(1) {
                flex: 1;
                margin-left: 10px;
                display: block;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
              p:nth-child(2) {
                width: 30px;
                text-align: center;
                font-size: 18px;
                cursor: pointer;
              }
            }
          }
        }
      }
      .center-content-box {
        display: flex;
        flex-direction: column;
        /*backAnimation-color: red;*/
        box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.1);
        border-radius: 6px;
        flex: 1;
        margin: 20px 0;
        width: 861px;
        .center-content-box-one {
          flex: 1;
          display: flex;
          flex-direction: column;
        }
        .center-content-box-two {
          flex: 1;
          display: flex;
          flex-direction: column;
          overflow: hidden;
          .center-content-box-two-top {
            padding-top: 10px;
          }
          .center-content-box-two-bottom {
            flex: 1;
            display: flex;
            overflow: hidden;
            /*max-width:956px;*/
            .center-content-box-two-bottom-left {
              width: 320px;
              border: 1px solid #dedede;
              border-radius: 4px;
              margin: 0 20px;
              display: flex;
              flex-direction: column;
              overflow-y: hidden;
              .del-i {
                color: #999;
                cursor: pointer;
                font-size: 16px;
              }
              .del-i:hover {
                color: #FF6666;
              }
              .center-content-box-two-bottom-left-title {
                background: #f8f8f9;
                border-bottom: 1px solid #dfe6ec;
                height: 40px;
                line-height: 40px;
                padding-left: 10px;
                font-size: 14px;
              }
              .center-content-box-two-bottom-left-null {
                line-height: 100px;
                text-align: center;
                font-size: 14px;
                color: #999;
              }
              .center-content-box-two-bottom-left-for-box {
                flex: 1;
                display: flex;
                flex-direction: column;
                .center-content-box-two-bottom-left-for-p {
                  border-top: 1px solid #dfe6ec;
                  flex: 1;
                  line-height: 40px;
                  font-size: 14px;
                  color: #999;
                  font-weight: 500;
                  padding: 0 10px;
                  display: block;
                  white-space: nowrap;
                }
              }
            }
            .center-content-box-two-bottom-right {
              flex: 1;
              border: 1px solid #dedede;
              border-radius: 4px;
              display: flex;
              flex-direction: column;
              overflow-y: hidden;
              margin-right: 20px;
              position: relative;
              .center-content-box-two-bottom-right-table {
                display: flex;
                flex-direction: column;
                position: absolute;
                width: 100%;
                height: 100%;
              }
            }
          }
          .center-content-box-two-bottom-button {
            height: 60px;
            display: flex;
            p:nth-child(1) {
              flex: 1;
            }
            p:nth-child(2) {
              height: 30px;
              width: 70px;
              margin: 10px;
              line-height: 30px;
              text-align: center;
              border: 1px solid #E0E0E0;
              background: #E0E0E0;
              color: #999999;
              cursor: pointer;
              font-size: 12px;
              border-radius: 6px;
            }
            p:nth-child(3) {
              height: 30px;
              width: 70px;
              margin: 10px 20px 0 0;
              line-height: 30px;
              text-align: center;
              border: 1px solid #0045AF;
              color: #FFFFFF;
              background: #0045AF;
              cursor: pointer;
              font-size: 12px;
              border-radius: 6px;
            }
          }
        }
        .center-info-components-max-box {
          margin: 20px;
          overflow-y: scroll;
          flex: 1;
          display: flex;
          flex-direction: column;
          iframe {
            flex: 1;
          }
        }
        .exercise-add-max-box {
          margin: 20px 20px 0;
          display: flex;
          .exercise-add-text-box {
            display: flex;
            flex: 1;
            div {
              flex: 1;
              padding: 10px 20px;
              background: #f5f5f5;
            }
          }
          .exercise-add-button {
            width: 200px;
            line-height: 40px;
            text-align: center;
            border-radius: 6px;
            margin-right: 20px;
          }
        }
      }
      .right-courseware-box {
        /*backAnimation-color: blue;*/
        display: flex;
        flex-direction: column;
        box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.1);
        border-radius: 6px;
        width: 365px;
        margin: 20px;
        padding: 0 20px;
        box-sizing: border-box;
        .el-resources-tree {
          /* flex:1;*/
          border-bottom: 1px solid #dedede;
          overflow-y: scroll;
          height: 130px;
        }
        .el-resources-search {
          flex: 1;
        }
        .el-resources-list {
          height: 72%;
          overflow-y: auto;
          .el-table {
            height: 86%;
          }
        }
      }
    }
    .set-up-max-box {
      * {
        margin: 0;
        padding: 0;
      }
    }
    .title-p {
      margin: 0;
      line-height: 40px;
      font-size: 16px;
      color: #0045AF;
      font-weight: 500;
      padding-left: 20px;
      border-bottom: 2px solid #E0E0E0;
    }
    .null-add-p {
      font-size: 20px;
      color: #999;
      text-align: center;
      line-height: 300px;
      font-weight: 500;
    }
    .checkChapter {
      border: 1px solid #0045AF !important;
    }
    .video-player {
      video {
        object-fit: fill !important;
      }
    }

  }

</style>