|
@@ -0,0 +1,288 @@
|
|
|
+<template>
|
|
|
+ <div id="poppleSet">
|
|
|
+ <el-dialog
|
|
|
+ :visible.sync="dialogVisible"
|
|
|
+ width="60%"
|
|
|
+ @open="openExpand"
|
|
|
+ :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="dialogVisible = false"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="text-align: end">
|
|
|
+ <el-button type="text" @click="inits">重置</el-button>
|
|
|
+ </div>
|
|
|
+ <el-tree
|
|
|
+ ref="trees"
|
|
|
+ :data="datas"
|
|
|
+ :props="layoutTreeProps"
|
|
|
+ :load="loadNode"
|
|
|
+ lazy
|
|
|
+ :default-checked-keys="audition"
|
|
|
+ :show-checkbox="true"
|
|
|
+ :check-strictly="true"
|
|
|
+ @check-change="getCheckedKeys"
|
|
|
+ node-key="onlyId"
|
|
|
+ >
|
|
|
+ <span class="custom-tree-node" slot-scope="{ node }">
|
|
|
+ <span>{{ node.label }}</span>
|
|
|
+ <span v-if="node.checked"
|
|
|
+ >试听前
|
|
|
+ <el-input-number
|
|
|
+ v-model="node.data.auditionMinute"
|
|
|
+ controls-position="right"
|
|
|
+ :min="0"
|
|
|
+ :precision="2"
|
|
|
+ :controls="false"
|
|
|
+ size="mini"
|
|
|
+ style="width: 80px"
|
|
|
+ :max="node.data.durationTime"
|
|
|
+ @blur="changeNum(node)"
|
|
|
+ ></el-input-number
|
|
|
+ >分钟</span
|
|
|
+ >
|
|
|
+ </span>
|
|
|
+ </el-tree>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="dialogVisible = false">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="submitTable">确 定</el-button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ props: ["tableData", "auditionList"],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ copyData: [],
|
|
|
+ datas: [],
|
|
|
+ audition: [],
|
|
|
+ auditionListCope: [],
|
|
|
+ dialogVisible: false,
|
|
|
+ layoutTreeProps: {
|
|
|
+ label(data, node) {
|
|
|
+ return (
|
|
|
+ data.courseName || data.categoryName || data.name || data.menuName
|
|
|
+ );
|
|
|
+ },
|
|
|
+ isLeaf(data, node) {
|
|
|
+ return !data.hasChildren;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ getAllSeNum: [], //当前tree所有节ID
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ changeNum(v) {
|
|
|
+ console.log(v)
|
|
|
+ if (v.data.auditionMinute === 0) {
|
|
|
+ this.$message.warning("时长禁止为0,请重新设置");
|
|
|
+ }
|
|
|
+ },
|
|
|
+ inits() {
|
|
|
+ this.datas = JSON.parse(JSON.stringify(this.copyData));
|
|
|
+ },
|
|
|
+ openExpand() {
|
|
|
+ console.log('get',this.auditionList)
|
|
|
+ if (this.auditionList) {
|
|
|
+ this.auditionListCope = JSON.parse(JSON.stringify(this.auditionList));
|
|
|
+ var arrays = [];
|
|
|
+ this.auditionList.map((item) => {
|
|
|
+ arrays.push(item.typeId);
|
|
|
+ });
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.audition = arrays;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.inits();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getCheckedKeys(item, node) {
|
|
|
+ if (item.TypeId.split("-")[0] != "3") {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ console.log(this.audition,321)
|
|
|
+ if (node && this.audition.indexOf(item.onlyId) == -1) {
|
|
|
+ this.audition.push(item.onlyId);
|
|
|
+ }
|
|
|
+ if (!node && this.audition.indexOf(item.onlyId) !== -1) {
|
|
|
+ this.audition.splice(this.audition.indexOf(item.onlyId), 1);
|
|
|
+ }
|
|
|
+ if (node) {
|
|
|
+ var sta = this.auditionListCope.some((items) => {
|
|
|
+ return items.typeId == item.onlyId;
|
|
|
+ });
|
|
|
+ if (!sta) {
|
|
|
+ this.auditionListCope.push({
|
|
|
+ typeId: item.onlyId,
|
|
|
+ auditionMinute: item.auditionMinute,
|
|
|
+ courseId: item.courseId,
|
|
|
+ menuId: item.menuId,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.auditionListCope.map((items, indexs) => {
|
|
|
+ if (items.typeId == item.onlyId) {
|
|
|
+ this.auditionListCope.splice(indexs, 1);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ var a = item.TypeId.split("-").map(Number)[1]
|
|
|
+ this.getAllSeNum.forEach(items => {
|
|
|
+ var ast = items.split("-").map(Number)[3]
|
|
|
+ if(a == ast){
|
|
|
+ this.$refs.trees.setChecked(items, node);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ submitTable() {
|
|
|
+ if (!this.auditionListCope.length) {
|
|
|
+ this.$message.warning("请勾选至少一节的试听时间");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ var arrays = this.$refs.trees.getCheckedNodes();
|
|
|
+ for (let i = 0; i < arrays.length; i++) {
|
|
|
+ for (let j = 0; j < this.auditionListCope.length; j++) {
|
|
|
+ if (arrays[i].onlyId === this.auditionListCope[j].typeId) {
|
|
|
+ this.auditionListCope[j].auditionMinute = arrays[i].auditionMinute;
|
|
|
+ }
|
|
|
+ if (this.auditionListCope[j].auditionMinute === 0) {
|
|
|
+ this.$message.warning("不允许填写时长为0,请重新输入");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // console.log(this.auditionListCope,321)
|
|
|
+ // this.auditionListCope.map((item) => {
|
|
|
+ // if (!item.auditionMinute) {
|
|
|
+ // arrays.map((items) => {
|
|
|
+ // if (items.TypeId == item.TypeId) {
|
|
|
+ // item.auditionMinute = items.auditionMinute;
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ this.$emit("uploadArrays", this.auditionListCope);
|
|
|
+ this.dialogVisible = false;
|
|
|
+ },
|
|
|
+ loadNode(node, resolve) {
|
|
|
+ var self = this;
|
|
|
+ console.log(self.auditionListCope)
|
|
|
+ if (node.level === 0) {
|
|
|
+ this.tableData.map((item) => {
|
|
|
+ item.TypeId = '0-' + item.courseId;
|
|
|
+ item.disabled = true;
|
|
|
+ item.hasChildren = true;
|
|
|
+ });
|
|
|
+ this.copyData = JSON.parse(JSON.stringify(this.tableData));
|
|
|
+ return resolve(this.tableData);
|
|
|
+ } else {
|
|
|
+ if (node.data.type === 1) {
|
|
|
+ this.$api
|
|
|
+ .inquireCourseListmodulechapter(node.data.menuId)
|
|
|
+ .then((res) => {
|
|
|
+ res.data.map((item) => {
|
|
|
+ item.onlyId = `${node.data.courseId}-${node.data.menuId}-${item.chapterId}-0`;
|
|
|
+ item.courseId = node.data.courseId;
|
|
|
+ item.TypeId = "2" + "-" + item.chapterId;
|
|
|
+ item.hasChildren = true;
|
|
|
+ item.disabled = true;
|
|
|
+ item.menuId = item.chapterId;
|
|
|
+ item.type = 2;
|
|
|
+ });
|
|
|
+ return resolve(res.data);
|
|
|
+ });
|
|
|
+ } else if (node.data.type === 2) {
|
|
|
+ this.$api
|
|
|
+ .inquireCoursechaptersectionlist(node.data.menuId)
|
|
|
+ .then((res) => {
|
|
|
+ res.data.map((item) => {
|
|
|
+ item.onlyId = `${node.data.courseId}-${node.data.moduleId}-${item.chapterId}-${item.sectionId}`;
|
|
|
+ if (this.getAllSeNum.indexOf(item.onlyId) === -1) {
|
|
|
+ this.getAllSeNum.push(item.onlyId);
|
|
|
+ }
|
|
|
+ item.type = 3;
|
|
|
+ item.TypeId = "3" + "-" + item.sectionId;
|
|
|
+ item.menuId = item.sectionId;
|
|
|
+ item.auditionMinute = item.durationTime;
|
|
|
+ item.courseId = node.data.courseId;
|
|
|
+ if (self.auditionListCope) {
|
|
|
+ self.auditionListCope.map((items) => {
|
|
|
+ if (items.TypeId === item.TypeId) {
|
|
|
+ item.auditionMinute = items.auditionMinute;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ item.hasChildren = false;
|
|
|
+ });
|
|
|
+ return resolve(res.data);
|
|
|
+ });
|
|
|
+ } else if (node.data.type === 3) {
|
|
|
+ return resolve([]);
|
|
|
+ } else {
|
|
|
+ this.$api
|
|
|
+ .inquireCoursemenuListS({ courseId: node.data.courseId })
|
|
|
+ .then((res) => {
|
|
|
+ res.rows.map((item) => {
|
|
|
+ if (item.type === 1) {
|
|
|
+ item.onlyId = `${node.data.courseId}-${item.menuId}-0-0`;
|
|
|
+ item.TypeId = item.type + "-" + item.menuId;
|
|
|
+ }
|
|
|
+ if (item.type === 2) {
|
|
|
+ item.onlyId = `${node.data.courseId}-0-${item.menuId}-0`;
|
|
|
+ item.TypeId = item.type + "-" + item.menuId;
|
|
|
+ }
|
|
|
+ if (item.type === 3) {
|
|
|
+ item.onlyId = `${node.data.courseId}-0-0-${item.menuId}`;
|
|
|
+ if (this.getAllSeNum.indexOf(item.onlyId) === -1) {
|
|
|
+ this.getAllSeNum.push(item.onlyId);
|
|
|
+ }
|
|
|
+ item.TypeId = item.type + "-" + item.menuId;
|
|
|
+ item.auditionMinute = item.durationTime;
|
|
|
+ if (self.auditionListCope) {
|
|
|
+ self.auditionListCope.map((items) => {
|
|
|
+ if (items.TypeId === item.TypeId) {
|
|
|
+ item.auditionMinute = items.auditionMinute;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ item.disabled = false;
|
|
|
+ item.hasChildren = false;
|
|
|
+ } else {
|
|
|
+ item.disabled = true;
|
|
|
+ item.hasChildren = true;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return resolve(res.rows);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+/deep/.el-tree-node__content {
|
|
|
+ height: 35px;
|
|
|
+}
|
|
|
+.custom-tree-node {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ font-size: 14px;
|
|
|
+ padding-right: 8px;
|
|
|
+}
|
|
|
+</style>
|