zc_saas_admin/src/views/Marketing/commodityManageMent/poppleSet.vue

<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) {
      if (v.data.auditionMinute === 0) {
        this.$message.warning("时长禁止为0，请重新设置");
      } else {
        var arrays = this.$refs.trees;
        //修改指定项的 auditionMinute
        arrays.root.childNodes.forEach((item, index) => {
          item.childNodes.forEach((items, indexs) => {
            if (items.data.TypeId === v.data.TypeId) {
              items.data.auditionMinute = v.data.auditionMinute;
            }
            if (items.childNodes.length) {
              items.childNodes.forEach((ik) => {
                if (ik.data.TypeId === v.data.TypeId) {
                  ik.data.auditionMinute = v.data.auditionMinute;
                }
                if (ik.childNodes.length) {
                  ik.childNodes.forEach((iks) => {
                    if (iks.data.TypeId === v.data.TypeId) {
                      iks.data.auditionMinute = v.data.auditionMinute;
                    }
                  });
                }
              });
            }
          });
        });
        this.auditionListCope.forEach((items) => {
          if (items.TypeId === v.data.TypeId) {
            items.auditionMinute = v.data.auditionMinute;
          }
        });
      }
    },
    /**
     * 重置按钮
     */
    inits() {
      if (this.auditionList) {
        this.auditionListCope = JSON.parse(JSON.stringify(this.auditionList));
        this.$nextTick(() => {
          this.audition = [];
        });
      }
      this.datas = JSON.parse(JSON.stringify(this.copyData));
    },
    /**
     * 弹窗打开触发
     */
    openExpand() {
      if (this.auditionList) {
        this.auditionListCope = JSON.parse(JSON.stringify(this.auditionList));
        this.$nextTick(() => {
          this.audition = [];
        });
      }
      this.$nextTick(() => {
        this.inits();
      });
    },
    /**
     * @param {Objact,Bool} 当前点击数据 当前是否勾选
     * 复选框变化触发
     */
    getCheckedKeys(item, node) {
      var self = this;
      if (item.TypeId.split("-")[0] != "3") {
        return;
      }
      if (node) {
        var ast = self.getAllSeNum.filter((items, indexs) => {
          if (
            items.split("-")[0] == item.courseId &&
            items.split("-")[3] == item.menuId
          ) {
            return items;
          }
        });
        var st = ast.concat(self.audition);
        self.audition = [...new Set(st)];
        var pds = self.auditionListCope.some((items, indexs) => {
          return (
            items.courseId === item.courseId && items.menuId === item.menuId
          );
        });
        if (!pds) {
          var data = {
            TypeId: item.TypeId,
            // typeId: item.onlyId,
            auditionMinute: item.auditionMinute,
            courseId: item.courseId,
            menuId: item.menuId,
          };
          self.auditionListCope.push(data);
        }
      } else {
        self.audition = self.audition.filter((items, indexs) => {
          if (items.split("-")[0] != item.courseId) {
            return items;
          } else {
            if (items.split("-")[3] != item.menuId) {
              return items;
            } else {
              self.$refs.trees.setChecked(items, node);
            }
          }
        });
        var pds = self.auditionListCope.filter((itx, indx) => {
          if (itx.courseId != item.courseId) {
            return itx;
          } else {
            if (itx.menuId != item.menuId) {
              return itx;
            }
          }
        });
        self.auditionListCope = pds;
      }
    },
    submitTable() {
      if (!this.auditionListCope.length) {
        this.$message.warning("请勾选至少一节的试听时间");
        return;
      }
      this.auditionListCope.forEach((item) => {
        if (!item.auditionMinute) {
          this.$message.warning("不允许填写时长为0的节，请重新输入");
          return;
        }
      });
      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 ? node.data.moduleId : 0
                }-${item.chapterId}-${item.sectionId}`;
                if (this.getAllSeNum.indexOf(item.onlyId) === -1) {
                  this.getAllSeNum.push(item.onlyId);
                }
                console.log(item.onlyId, 555555);
                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) {
                      if (self.audition.indexOf(item.onlyId) === -1) {
                        self.audition.push(item.onlyId);
                      }
                      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) {
                        if (self.audition.indexOf(item.onlyId) === -1) {
                          self.audition.push(item.onlyId);
                        }
                        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>