saas_entrepot_admin/src/views/resource/videoManagement/courseManagement/chapterContent/index.vue

<template>
  <div id="chapterContent">
    <el-tabs v-model="activeName" type="card" v-if="status">
      <el-tab-pane label="课程基本信息" name="first" disabled></el-tab-pane>
      <el-tab-pane label="课程章节内容" name="second"></el-tab-pane>
    </el-tabs>
    <ul class="fatherSty">
      <li class="floatLefts" v-for="(item, index) in headerData" :key="index">
        {{ item.label }}：{{
          item.scope === "more"
            ? pageInfo[item.prop1] + "-" + pageInfo[item.prop2]
            : pageInfo[item.prop]
        }}
      </li>
      <div style="clear: both"></div>
    </ul>
    <div class="mar_b">
      <el-button slot="reference" type="success" @click="openBoxs"
        >添加 模块/章/节</el-button
      >
      <div>
        <el-button type="primary" @click="openPreferenceBoxs"
          >配置优选</el-button
        >
        <el-button type="primary" @click="openSortBoxs">排序</el-button>
      </div>
    </div>
    <el-tree
      ref="tree"
      :data="tableDataInfos"
      lazy
      :load="load"
      :props="layoutTreeProps"
      @node-click="handleNodeClick"
    >
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <span>
          <el-button
            v-if="data.isDels"
            type="text"
            size="mini"
            @click.stop="del(node, data)"
          >
            删除
          </el-button>
          <el-button
            type="text"
            size="mini"
            style="color: green"
            @click.stop="openExamBox(node, data)"
          >
            关联试卷
          </el-button>
          <el-button
            v-if="getShowStatus(data) || data.type === 3"
            type="text"
            size="mini"
            style="color: orange"
            @click.stop="preview(node, data)"
          >
            预览
          </el-button>
        </span>
      </span>
    </el-tree>
    <div class="dis-f">
      <el-button @click="backPage">取消</el-button>
      <el-button
        type="primary"
        @click="submit"
        :disabled="!noStudent"
        :loading="disabledBtn"
        >确定</el-button
      >
    </div>
    <el-dialog
      :visible.sync="centerDialogVisible"
      width="300px"
      :show-close="false"
      :close-on-click-modal="false"
    >
      <div slot="title" class="hearders">
        <div class="leftTitle">添加模块/章/节</div>
        <div class="rightBoxs">
          <img
            src="@/assets/images/Close@2x.png"
            alt=""
            @click="centerDialogVisible = false"
          />
        </div>
      </div>
      <el-radio-group v-model="radio" class="dis-f">
        <el-radio :label="1">模块</el-radio>
        <el-radio :label="2">章</el-radio>
        <el-radio :label="3">节</el-radio>
      </el-radio-group>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false" size="small"
          >取 消</el-button
        >
        <el-button type="primary" @click="activeCheckBoxs" size="small"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      :visible.sync="dialogVisible"
      width="800px"
      :show-close="false"
      :close-on-click-modal="false"
    >
      <div slot="title" class="hearders">
        <div class="leftTitle">
          {{ radio === 1 ? "添加模块" : radio === 2 ? "添加章" : "添加节" }}
        </div>
        <div class="rightBoxs">
          <img
            src="@/assets/images/Close@2x.png"
            alt=""
            @click="dialogVisible = false"
          />
        </div>
      </div>
      <search-box-new
        ref="searchBox"
        :formData="formData5"
        :formList="formList5"
        @search="getInfos"
        @init="init5"
      />
      <el-table
        ref="multipleTable"
        :data="boxtableData"
        border
        @selection-change="selectionChange"
        :row-key="getRowKeys"
        :header-cell-style="{
          'background-color': '#eee',
          padding: '8px',
          color: '#333',
        }"
      >
        <el-table-column
          align="center"
          type="selection"
          width="55"
          header-align="center"
          :selectable="checkboxT"
          :reserve-selection="true"
        >
        </el-table-column>
        <el-table-column
          v-for="(item, index) in tableSet"
          :width="item.width"
          :key="index"
          :label="item.label"
          align="center"
          :show-overflow-tooltip="true"
          header-align="center"
        >
          <template slot-scope="scope">
            <span v-if="item.scope === 'Status'">
              {{
                scope.row[item.prop] === 1
                  ? "发布"
                  : scope.row[item.prop] === 0
                  ? "未发布"
                  : "未知"
              }}
            </span>
            <span v-else-if="item.scope === 'teshu'">
              {{ radio === 1 ? scope.row[item.prop] : scope.row[item.prop1] }}
            </span>
            <span v-else>{{ scope.row[item.prop] }}</span></template
          >
        </el-table-column>
      </el-table>
      <pagination
        :total="total5"
        :pageSize="formData5.pageSize"
        :currentPage="formData5.pageNum"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      />
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="submitForm"
          :disabled="activeLists.length === 0"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      :visible.sync="aboutExamStatus"
      width="560px"
      :show-close="false"
      :close-on-click-modal="false"
    >
      <div slot="title" class="hearders">
        <div class="leftTitle">关联题卷</div>
        <div class="rightBoxs">
          <img src="@/assets/images/Close@2x.png" alt="" @click="closeExam" />
        </div>
      </div>
      <div>
        <div><el-button @click="openExamBoxs">选择题卷</el-button></div>
        <div v-for="(item, index) in activeArray" :key="index">
          <span>{{ item.examName }}</span>
          <el-button
            type="text"
            style="margin-left: 10px"
            @click="activeArray.splice(index, 1)"
            >删除</el-button
          >
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeExam">取 消</el-button>
        <el-button type="primary" @click="submitExam">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      :visible.sync="sortTablesBoxs"
      width="560px"
      :show-close="false"
      :close-on-click-modal="false"
    >
      <div slot="title" class="hearders">
        <div class="leftTitle">排序</div>
        <div class="rightBoxs">
          <img
            src="@/assets/images/Close@2x.png"
            alt=""
            @click="sortTablesBoxs = false"
          />
        </div>
      </div>
      <div>
        <el-row>
          <el-col :span="22">
            <ul>
              <li
                v-for="(item, index) in sortList"
                :key="index"
                style="margin-bottom: 6px"
              >
                <el-input-number
                  :controls="false"
                  size="mini"
                  v-model="sortList[index].sort"
                  :min="0"
                  style="width: 50px"
                ></el-input-number>
                <span style="margin-left: 10px">{{ item.name }}</span>
              </li>
            </ul>
          </el-col>
          <el-col :span="2">
            <button @click="initSort">重置</button>
          </el-col>
        </el-row>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="sortTablesBoxs = false">取 消</el-button>
        <el-button type="primary" @click="submitTableBoxs">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      :visible.sync="dialogVisiblePZDown"
      width="1100px"
      :show-close="false"
      :close-on-click-modal="false"
    >
      <div slot="title" class="hearders">
        <div class="leftTitle">选择题卷</div>
        <div class="rightBoxs">
          <img src="@/assets/images/Close@2x.png" alt="" @click="closePZ" />
        </div>
      </div>
      <div v-if="dialogVisiblePZDown">
        <search-box-new
          ref="searchBox"
          :formData="formData6"
          :formList="formList6"
          @search="getSJ(1)"
          @init="init6"
        />
        <el-table
          ref="tableExam"
          row-key="examId"
          :data="tableDataExam"
          border
          :header-cell-style="{
            'background-color': '#eee',
            padding: '8px',
            color: '#333',
          }"
          @selection-change="selectionChangeExam"
        >
          <el-table-column
            label=""
            width="45"
            align="center"
            v-if="ActiveExamType === 3"
          >
            <template scope="scope">
              <!-- <el-radio
                class="radioTables"
                :label="scope.row.examId"
                v-model="nowActiveCheckObj.examId"
                @change.native="getTemplateRow(scope.$index, scope.row)"
                >{{ "" }}</el-radio
              > -->
              <div
                class="radioTables"
                @click="getTemplateRow(scope.$index, scope.row)"
              >
                <div
                  class="activeRadio"
                  v-if="scope.row.examId === nowActiveCheckObj.examId"
                ></div>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            type="selection"
            width="55"
            align="center"
            reserve-selection
            :selectable="checkboxExam"
            v-else
          >
          </el-table-column>
          <template v-for="(item, index) in tableListExam">
            <el-table-column
              v-if="item.scope !== 'inputs'"
              :width="item.width"
              :key="index"
              :label="item.label"
              align="center"
              :show-overflow-tooltip="true"
              header-align="center"
            >
              <template slot-scope="scope">
                <span v-if="item.scope === 'moreList'">
                  {{
                    scope.row[item.prop1] +
                    "-" +
                    scope.row[item.prop2] +
                    "-" +
                    scope.row[item.prop3]
                  }}
                </span>
                <span v-else-if="item.scope === 'status'">{{
                  scope.row[item.prop] === 1
                    ? "发布"
                    : scope.row[item.prop] === 0
                    ? "未发布"
                    : "未知"
                }}</span>
                <span v-else>{{ scope.row[item.prop] }}</span></template
              >
            </el-table-column></template
          >
        </el-table>
        <pagination
          :total="total6"
          :pageSize="formData6.pageSize"
          :currentPage="formData6.pageNum"
          @handleSizeChange="handleSizeChange6"
          @handleCurrentChange="handleCurrentChange6"
        />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closePZ">取 消</el-button>
        <el-button type="primary" @click="submitPZ">确 定</el-button>
      </span>
    </el-dialog>
    <test-paper-preview ref="testPaperPreview" />
    <video-preview ref="preview" />
    <preference ref="preference" :tableDataInfos.sync="tableDataInfos" />
  </div>
</template>

<script>
import searchBoxNew from "@/components/searchBoxNew";
import pagination from "@/components/pagination";
import testPaperPreview from "@/components/testPaperPreview";
import videoPreview from "@/components/videoPreview";
import preference from "./preference";
export default {
  name: "ChapterContent",
  components: {
    searchBoxNew,
    pagination,
    testPaperPreview,
    videoPreview,
    preference,
  },
  data() {
    return {
      disabledBtn: false,
      sortTablesBoxs: false,
      activeName: "second",
      status: false,
      tableDataExam: [],
      tableListExam: [
        {
          label: "试卷编码",
          prop: "code",
          width: "120px",
        },
        {
          label: "标题前缀",
          prop: "prefixName",
          width: "160px",
        },
        {
          label: "试卷标题",
          prop: "examName",
          width: "300px",
        },
        {
          label: "业务层级",
          prop1: "educationName",
          prop2: "projectName",
          prop3: "businessName",
          scope: "moreList",
          width: "300px",
        },
        {
          label: "发布状态",
          prop: "publishStatus",
          scope: "status",
        },
      ],
      templateRadioLS: "",
      goodsNameLS: "",
      templateRadio: "",
      goodsName: "",
      menuExamList: [], //关联试卷列表
      onlyId: "",
      newShowObj: {}, //当前关联题卷OBJ
      dialogVisiblePZDown: false,
      aboutExamStatus: false, //关联试卷弹出
      centerDialogVisible: false,
      radio: "",
      headerData: [
        {
          label: "课程名称",
          prop: "courseName",
        },
        {
          label: "业务层次",
          prop1: "projectName",
          prop2: "businessName",
          scope: "more",
        },
        {
          label: "所属院校",
          prop: "schoolName",
        },
        // {
        //   label: "所属专业",
        //   prop: "categoryName",
        // },
        {
          label: "科目",
          prop: "subjectName",
        },
      ],
      pageInfo: {},
      tableData: [],
      tableDataInfos: [],
      tableSet: [
        { label: "编码", prop: "code", width: "120" },
        { label: "标题前缀", prop: "prefixName", width: "160" },
        {
          label: "标题",
          prop: "moduleName",
          prop1: "name",
          scope: "teshu",
          width: "300",
        },
        {
          label: "发布状态",
          prop: "publishStatus",
          scope: "Status",
        },
      ],
      dialogVisible: false,
      boxtableData: [],
      activeLists: [],
      total5: 0, //一共多少条
      formData5: {
        pageSize: 10,
        pageNum: 1,
        status: 1,
        publishStatus: 1,
        name: "",
        key: "",
      },
      formList5: [],
      total6: 0,
      formData6: {
        pageSize: 10,
        pageNum: 1,
        status: 1,
        publishStatus: 1,
        name: "",
        key: "",
      },
      formList6: [
        {
          placeholder: "试卷标题/试卷编码/标题前缀",
          prop: "key",
        },
      ],
      theModuleList: [],
      theChapterList: [],
      theSectionList: [],
      sortList: [],
      noStudent: true,
      layoutTreeProps: {
        label(data, node) {
          return data.name;
        },
        isLeaf(data, node) {
          return data.hasChildren ? false : true;
        },
      },
      activeArray: [],
      nowActiveCheck: [], //当前选中复选框
      nowActiveCheckObj: {}, //当前选中单选框
      ActiveExamType: null, //当前关联类型
    };
  },
  computed: {
    /**
     * 查询是否关联试卷
     */
    getShowStatus: function () {
      return function (item) {
        var ints = item.id.split("-").map(Number);
        if (ints[0] === 1) {
          var atys = `${ints[1]}-${ints[2] || 0}-${ints[3] || 0}`;
        }
        if (ints[0] === 2) {
          var atys = `0-${ints[1]}-${ints[2] || 0}`;
        }
        if (ints[0] === 3) {
          var atys = `0-0-${ints[1]}`;
        }
        var setTs = this.menuExamList.some((items) => {
          return items.onlyId == atys;
        });
        return setTs;
      };
    },
  },
  mounted() {
    this.$api
      .gradecheckGoodsChange({ courseId: this.$route.query.id })
      .then((res) => {
        if (res.data > 0) {
          // this.noStudent = false;
        }
      });
    // this.getDs();
    this.search();
  },
  methods: {
    openPreferenceBoxs() {
      this.$refs.preference.openBoxs(
        JSON.parse(JSON.stringify(this.tableDataInfos))
      );
    },
    allowDrag(node) {
      if (node.level == 1) {
        return true;
      } else {
        return false;
      }
    },
    allowDrop(draggingNode, dropNode, type) {
      if (
        (type === "prev" || type === "next") &&
        draggingNode.level == 1 &&
        dropNode.level == 1
      ) {
        return true;
      }
    },
    selectionChangeExam(a) {
      this.nowActiveCheck = a;
    },
    preview(node, data) {
      if (data.type === 1 || data.type === 2) {
        var ints = data.id.split("-").map(Number);
        if (ints[0] === 1) {
          var atys = `${ints[1]}-${ints[2] || 0}-${ints[3] || 0}`;
        }
        if (ints[0] === 2) {
          var atys = `0-${ints[1]}-${ints[2] || 0}`;
        }
        if (ints[0] === 3) {
          var atys = `0-0-${ints[1]}`;
        }
        if (this.menuExamList.some((items) => items.onlyId == atys)) {
          const array = this.menuExamList.filter((item) => item.onlyId == atys);
          this.$refs.testPaperPreview.openBox(1, array);
        }
      }
      if (data.type === 3) {
        this.$api.obtainCourseSection(data.CodeId).then((res) => {
          this.$refs.preview.diavosFun(res.data);
        });
      }
    },
    initSort() {
      this.sortList = JSON.parse(JSON.stringify(this.tableDataInfos));
    },
    submitTableBoxs() {
      let arr = this.sortList.map((items) => {
        return items.sort;
      });
      if (new Set(arr).size != arr.length) {
        this.$message.warning("排序不允许有重复值");
        return;
      }
      this.tableDataInfos = this.sortList.sort((a, b) => a.sort - b.sort);
      this.sortTablesBoxs = false;
    },
    openSortBoxs() {
      this.sortList = JSON.parse(JSON.stringify(this.tableDataInfos));
      this.sortTablesBoxs = true;
    },
    openExamBoxs() {
      this.getSJ(2);
      if (this.ActiveExamType === 3) {
        if (this.activeArray.length === 0) {
          this.nowActiveCheckObj = {};
        } else {
          this.nowActiveCheckObj = JSON.parse(
            JSON.stringify(this.activeArray[0])
          );
        }
      } else {
        this.nowActiveCheck = [];
      }
      this.dialogVisiblePZDown = true;
      this.$nextTick(() => {
        this.$refs.tableExam.clearSelection();
      });
    },
    //单选触发
    getTemplateRow(index, row) {
      this.nowActiveCheckObj = row;
      console.log(row.examId, this.nowActiveCheckObj.examId);
    },
    //2确定变化选项
    submitPZ() {
      if (this.ActiveExamType !== 3) {
        this.activeArray.push(...this.nowActiveCheck);
      } else {
        this.activeArray = [this.nowActiveCheckObj];
      }
      this.dialogVisiblePZDown = false;
    },
    closePZ() {
      this.dialogVisiblePZDown = false;
    },
    //1确定关联试卷弹窗
    submitExam() {
      if (this.ActiveExamType === 3 && this.activeArray.length > 1) {
        this.$message.error("只允许关联一张试卷");
        return;
      }
      this.menuExamList = this.menuExamList.filter(
        (item) => item.onlyId != this.onlyId
      );
      if (this.activeArray.length !== 0) {
        let ast = this.onlyId.split("-").map(Number);
        var newList = this.activeArray.map((item) => {
          return {
            onlyId: this.onlyId,
            courseId: Number(this.$route.query.id),
            moduleId: ast[0],
            chapterId: ast[1],
            sectionId: ast[2],
            examId: item.examId,
            examName: item.examName,
          };
        });
        this.menuExamList.push(...newList);
      }
      this.aboutExamStatus = false;
    },
    //开启关联试卷盒子
    openExamBox(node, item) {
      var ints = item.id.split("-").map(Number);
      if (ints[0] === 1) {
        var atys = `${ints[1]}-${ints[2] || 0}-${ints[3] || 0}`;
      }
      if (ints[0] === 2) {
        var atys = `0-${ints[1]}-${ints[2] || 0}`;
      }
      if (ints[0] === 3) {
        var atys = `0-0-${ints[1]}`;
      }
      if (this.menuExamList.some((i) => i.onlyId == atys)) {
        this.activeArray = this.menuExamList.filter(
          (items) => items.onlyId == atys
        );
      } else {
        this.activeArray = [];
      }
      this.onlyId = atys;
      this.ActiveExamType = item.type;
      this.aboutExamStatus = true;
    },
    //关闭关联试卷盒子
    closeExam() {
      this.aboutExamStatus = false;
    },
    search() {
      this.$api.obtainCourseS(this.$route.query.id).then((res) => {
        this.pageInfo = res.data;
      });
      this.$api
        .inquireCoursemenuListS({ courseId: this.$route.query.id })
        .then((res) => {
          this.tableData = res.rows;
          this.changeApis();
          this.getList();
        });
    },
    getList() {
      this.$api
        .inquireCourseListSmenuexam({ courseId: this.$route.query.id })
        .then((res) => {
          res.rows.forEach((item) => {
            item.onlyId = `${item.moduleId || 0}-${item.chapterId || 0}-${
              item.sectionId || 0
            }`;
          });
          this.menuExamList = res.rows;
        });
    },
    getDs() {
      this.$api.inquireCourseListmodule({ status: 1 }).then((res) => {
        this.theModuleList = res.rows;
      });
      this.$api.inquireCourseListchapter({ status: 1 }).then((res) => {
        this.theChapterList = res.rows;
      });
      this.$api.inquireCourseSection({ status: 1 }).then((res) => {
        this.theSectionList = res.rows;
      });
    },
    getSJ(int) {
      if (int === 1) {
        this.formData6.pageNum = 1;
      }
      if (int === 2) {
        this.formData6.name = "";
        this.formData6.key = "";
        this.formData6.pageNum = 1;
        this.formData6.pageSize = 10;
      }
      var data = JSON.parse(JSON.stringify(this.formData6));
      data.businessId = this.pageInfo.businessId;
      data.subjectId = this.pageInfo.subjectId;
      data.name = this.formData6.name;
      data.exclude = 1;
      this.$api.inquirebankexamList(data).then((res) => {
        this.tableDataExam = res.rows;
        this.total6 = res.total;
      });
    },
    openBoxs() {
      this.radio = "";
      this.centerDialogVisible = true;
    },
    activeCheckBoxs() {
      var self = this;
      if (!this.radio) {
        this.$message.error("请选择添加类型");
        return;
      }
      if (this.radio === 1) {
        this.formList5 = [
          {
            placeholder: "模块标题/模块编码/标题前缀",
            prop: "key",
          },
        ];
        this.moduleApi(2);
      }
      if (this.radio === 2) {
        this.formList5 = [
          {
            placeholder: "章标题/章编码/标题前缀",
            prop: "key",
          },
        ];
        this.chapterApi(2);
      }
      if (this.radio === 3) {
        this.formList5 = [
          {
            placeholder: "节标题/节编码/标题前缀",
            prop: "key",
          },
        ];
        this.sectionApi(2);
      }
      this.centerDialogVisible = false;
      this.dialogVisible = true;
      this.$nextTick(function () {
        self.activeLists = [];
        self.$refs.multipleTable.clearSelection();
      });
    },
    init5() {
      this.getInfos(2);
    },
    getInfos(int) {
      if (this.radio === 1) {
        this.moduleApi(int);
      }
      if (this.radio === 2) {
        this.chapterApi(int);
      }
      if (this.radio === 3) {
        this.sectionApi(int);
      }
    },
    moduleApi(int) {
      if (int === 1) {
        this.formData5.pageNum = 1;
      }
      if (int === 2) {
        this.formData5.name = "";
        this.formData5.key = "";
        this.formData5.pageNum = 1;
        this.formData5.pageSize = 10;
      }
      var data = JSON.parse(JSON.stringify(this.formData5));
      data.businessId = this.pageInfo.businessId;
      data.subjectId = this.pageInfo.subjectId;
      data.name = this.formData5.name;
      this.$api.inquireCourseListmodule(data).then((res) => {
        this.boxtableData = res.rows;
        this.total5 = res.total;
      });
    },
    chapterApi(int) {
      if (int === 1) {
        this.formData5.pageNum = 1;
      }
      if (int === 2) {
        this.formData5.name = "";
        this.formData5.pageNum = 1;
        this.formData5.key = "";
        this.formData5.pageSize = 10;
      }
      var data = JSON.parse(JSON.stringify(this.formData5));
      data.businessId = this.pageInfo.businessId;
      data.subjectId = this.pageInfo.subjectId;
      data.name = this.formData5.name;
      this.$api.inquireCourseListchapter(data).then((res) => {
        this.boxtableData = res.rows;
        this.total5 = res.total;
      });
    },
    sectionApi(int) {
      if (int === 1) {
        this.formData5.pageNum = 1;
      }
      if (int === 2) {
        this.formData5.name = "";
        this.formData5.key = "";
        this.formData5.pageNum = 1;
        this.formData5.pageSize = 10;
      }
      var data = JSON.parse(JSON.stringify(this.formData5));
      data.businessId = this.pageInfo.businessId;
      data.subjectId = this.pageInfo.subjectId;
      data.name = this.formData5.name;
      this.$api.inquireCourseSection(data).then((res) => {
        this.boxtableData = res.rows;
        this.total5 = res.total;
      });
    },
    // 查询是否存在下级 模块
    quireModule(id) {
      return new Promise((resolve, reject) => {
        this.$api.inquireCourseListmodulechapter(id).then((result) => {
          if (result.data.length === 0) {
            resolve(false);
          } else {
            resolve(true);
          }
        });
      });
    },
    // 查询是否存在下级 章
    quireChapter(id) {
      return new Promise((resolve, reject) => {
        this.$api.inquireCoursechaptersectionlist(id).then((result) => {
          if (result.data.length === 0) {
            resolve(false);
          } else {
            resolve(true);
          }
        });
      });
    },
    changeApis() {
      //inquireCourseListmodulechapter 模块与章关系
      // inquireCoursechaptersectionlist 章与节关系
      var arrays = [];
      this.tableData.map((item, index) => {
        if (item.type === 1) {
          // this.$api.obtainCoursemodule(item.menuId).then(async (res) => {
          var arr = {
            id: "1-" + item.menuId,
            CodeId: item.menuId,
            name: item.menuName,
            hasChildren: true,
            type: 1,
            isDels: true,
            sort: item.sort,
          };
          //查询是否存在下级
          arrays.push(arr);
          // });
        }
        if (item.type === 2) {
          // this.$api.obtainCoursechapter(item.menuId).then(async (res) => {
          var arr = {
            id: "2-" + item.menuId,
            CodeId: item.menuId,
            name: item.menuName,
            hasChildren: true,
            type: 2,
            isDels: true,
            sort: item.sort,
            firstChoiceStatus: item.firstChoiceStatus || 0,
          };
          arrays.push(arr);
          // });
        }
        if (item.type === 3) {
          // this.$api.obtainCourseSection(item.menuId).then((res) => {
          var arr = {
            id: "3-" + item.menuId,
            CodeId: item.menuId,
            name: item.menuName,
            hasChildren: false,
            type: 3,
            isDels: true,
            sort: item.sort,
          };
          arrays.push(arr);
          // });
        }
      });
      this.$nextTick(() => {
        this.tableDataInfos = arrays;
      });
    },
    del(node, item) {
      this.tableDataInfos.map((items, indexs) => {
        if (items.id === item.id) {
          this.tableDataInfos.splice(indexs, 1);
        }
      });
      this.tableDataInfos = JSON.parse(JSON.stringify(this.tableDataInfos));
      if (item.type === 1) {
        this.menuExamList = this.menuExamList.filter((items) => {
          return items.moduleId !== item.CodeId;
        });
      }
      if (item.type === 2) {
        this.menuExamList = this.menuExamList.filter((items) => {
          if (items.moduleId === 0) {
            if (items.chapterId !== item.CodeId) {
              return true;
            } else {
              return false;
            }
          } else {
            return true;
          }
        });
      }
    },
    getRowKeys(row) {
      if (this.radio === 1) {
        return row.moduleId;
      }
      if (this.radio === 2) {
        return row.chapterId;
      }
      if (this.radio === 3) {
        return row.sectionId;
      }
    },
    checkboxT(row, index) {
      var array = [];
      array = this.tableDataInfos.map((item) => {
        if (item.type === this.radio) {
          return item.CodeId;
        }
      });
      if (
        array.indexOf(
          this.radio === 1
            ? row.moduleId
            : this.radio === 2
            ? row.chapterId
            : row.sectionId
        ) !== -1
      ) {
        return false;
      } else {
        return true;
      }
    },
    checkboxExam(row, index) {
      return this.activeArray.findIndex((item) => item.examId == row.examId) ===
        -1
        ? true
        : false;
    },
    submitForm() {
      if (this.activeLists.length === 0) {
        this.dialogVisible = false;
        return;
      }
      var array = [];
      if (this.tableDataInfos.length) {
        if (this.radio === 1) {
          this.activeLists.map((item) => {
            array.push({
              id: 1 + "-" + item.moduleId,
              CodeId: item.moduleId,
              name: item.moduleName,
              isDels: true,
              hasChildren: true,
              type: 1,
              sort: 0,
            });
          });
        } else if (this.radio === 2) {
          this.activeLists.map((item) => {
            array.push({
              id: 2 + "-" + item.chapterId,
              CodeId: item.chapterId,
              name: item.name,
              isDels: true,
              hasChildren: true,
              type: 2,
              sort: 0,
            });
          });
        } else if (this.radio === 3) {
          this.activeLists.map((item) => {
            array.push({
              id: 3 + "-" + item.sectionId,
              CodeId: item.sectionId,
              name: item.name,
              type: 3,
              sort: 0,
              isDels: true,
            });
          });
        }

        let maxIndex = 0;
        this.tableDataInfos.forEach((item) => {
          if (item.sort > maxIndex) {
            maxIndex = item.sort;
          }
        });
        array.forEach((item, index) => {
          item.sort = maxIndex + index + 1;
        });
      } else {
        if (this.radio === 1) {
          this.activeLists.map((item) => {
            array.push({
              id: 1 + "-" + item.moduleId,
              CodeId: item.moduleId,
              name: item.moduleName,
              isDels: true,
              hasChildren: true,
              type: 1,
              sort: 0,
            });
          });
        } else if (this.radio === 2) {
          this.activeLists.map((item) => {
            array.push({
              id: 2 + "-" + item.chapterId,
              CodeId: item.chapterId,
              name: item.name,
              isDels: true,
              hasChildren: true,
              type: 2,
              sort: 0,
            });
          });
        } else if (this.radio === 3) {
          this.activeLists.map((item) => {
            array.push({
              id: 3 + "-" + item.sectionId,
              CodeId: item.sectionId,
              name: item.name,
              type: 3,
              sort: 0,
              isDels: true,
            });
          });
        }
        array.forEach((item, index) => {
          item.sort = index + 1;
        });
      }

      for (let i = 0; i < array.length; i++) {
        this.tableDataInfos.unshift(array[i]);
      }
      // this.tableDataInfos = this.tableDataInfos.concat(array);
      this.activeLists = [];
      this.dialogVisible = false;
      this.$message.success("添加成功");
    },
    handleNodeClick() {},
    async load(node, resolve) {
      const tree = node.data;
      if (tree.type === 1) {
        var arrays = [];
        await this.$api
          .inquireCourseListmodulechapter(tree.CodeId)
          .then((res) => {
            res.data.map((item, index) => {
              var arr = {
                id: tree.id + "-" + item.chapterId,
                CodeId: item.chapterId,
                name: item.name,
                hasChildren: true,
                type: 2,
              };
              arrays.push(arr);
            });
          });
        resolve(arrays);
      }
      if (tree.type === 2) {
        this.$api.inquireCoursechaptersectionlist(tree.CodeId).then((res) => {
          var arrays = [];
          res.data.map((item, index) => {
            var arr = {
              id: tree.id + "-" + item.sectionId,
              CodeId: item.sectionId,
              name: item.name,
              type: 3,
            };
            arrays.push(arr);
          });
          resolve(arrays);
        });
      }
      if (tree.type === 3) {
        resolve([]);
      }
      return;
    },
    handleSizeChange(v) {
      this.formData5.pageSize = v;
      this.formData5.pageNum = 1;
      this.getInfos();
    },
    handleCurrentChange(v) {
      this.formData5.pageNum = v;
      this.getInfos();
    },
    handleSizeChange6(v) {
      this.formData6.pageSize = v;
      this.formData6.pageNum = 1;
      this.getSJ();
    },
    handleCurrentChange6(v) {
      this.formData6.pageNum = v;
      this.getSJ();
    },
    init6() {
      this.getSJ(2);
    },
    /**
     * 多选框变化触发
     */
    selectionChange(arr) {
      this.activeLists = arr;
    },
    backPage() {
      this.$store.dispatch("tagsView/delView", this.$route).then((res) => {
        this.$router.push({
          path: "courseManagement",
        });
      });
    },
    submit() {
      this.disabledBtn = true;
      var array = [];
      this.tableDataInfos.map((item) => {
        array.push({
          courseId: Number(this.$route.query.id),
          menuId: item.CodeId,
          parentId: 0,
          status: 1,
          type: item.type,
          sort: item.sort,
          firstChoiceStatus: item.firstChoiceStatus || 0,
        });
      });
      if (this.menuExamList && this.menuExamList.length > 0) {
        this.menuExamList.forEach((item) => {
          if (
            item.moduleId != 0 &&
            item.sectionId == 0 &&
            item.chapterId == 0
          ) {
            item.type = 3;
          } else if (item.sectionId != 0) {
            item.type = 2;
          } else {
            item.type = 1;
          }
        });
      }
      var data = {
        courseId: Number(this.$route.query.id),
        menuExamList: this.menuExamList,
        menuList: array,
      };
      this.$api
        .editCoursemenu(data)
        .then((res) => {
          this.$message.success("编辑成功");
          setTimeout(() => {
            this.$store
              .dispatch("tagsView/exitView", this.$route)
              .then((res) => {
                this.$router.push({
                  path: "courseManagement",
                });
              });
          }, 300);
        })
        .catch(() => {
          this.disabledBtn = false;
        });
    },
  },
};
</script>

<style lang="less" scoped>
.radioTables {
  border-radius: 50%;
  width: 18px;
  height: 18px;
  border: 1px solid #eee;
  background-color: #fff;
  cursor: pointer;
  position: relative;
  & > .activeRadio {
    position: absolute;
    transition: all 0.3s;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    overflow: hidden;
    background-color: rgb(24, 144, 255);
    animation: radios 0.3s;
  }
}
@keyframes radios {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.fatherSty {
  background-color: #eee;
  padding: 10px;
  margin-bottom: 15px;
}
.floatLefts {
  font-size: 14px;
  float: left;
  margin-right: 30px;
}
.mar_b {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.dis-f {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/deep/.el-tree-node__content {
  height: 35px;
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 8px;
}
/deep/.el-button {
  border-radius: 8px;
}
/deep/.el-dialog {
  border-radius: 8px;
  .el-dialog__header {
    padding: 0;
    .hearders {
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0px 18px 0px 20px;
      border-bottom: 1px solid #e2e2e2;
      .leftTitle {
        font-size: 14px;
        font-weight: bold;
        color: #2f4378;
      }
      .rightBoxs {
        display: flex;
        align-items: center;
        img {
          width: 14px;
          height: 14px;
          margin-left: 13px;
          cursor: pointer;
        }
      }
    }
  }
  .el-dialog__footer {
    padding: 0;
    .dialog-footer {
      padding: 0px 40px;
      height: 70px;
      border-top: 1px solid #e2e2e2;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
  }
}
</style>